@tsparticles/preset-triangles 4.4.0 → 4.5.1

package/tsparticles.preset.triangles.bundle.js

@@ -1,21 +1,35 @@
-(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);
-/* Preset 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.presets = global.__tsParticlesInternals.presets || {}, global.__tsParticlesInternals.presets.triangles = global.__tsParticlesInternals.presets.triangles || {})));
-})(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, 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, defaultTransformValue = 1, minimumSize = 0, zIndexFactorOffset = 1, defaultOpacity$1 = 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) {
+/* Preset v4.5.1 */
+g.__tsParticlesInternals = g.__tsParticlesInternals || {};
+g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
+(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 getLogger() {
+        return _logger;
+    }
 
     var MoveDirection;
     (function (MoveDirection) {
@@ -32,6 +46,17 @@
         MoveDirection["inside"] = "inside";
     })(MoveDirection || (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$1 = 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;
     }
@@ -147,6 +172,12 @@
     function isNumber(arg) {
         return typeof arg === "number";
     }
+    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;
     }
@@ -273,11 +304,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$2 = {
+        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$2.engineVersionMismatch]: "The tsParticles version is different from the loaded plugins version. Engine version: {0}. Plugin version: {1}",
+        [ErrorCodes$2.particlePositionNotFound]: "a valid position cannot be found for particle",
+        [ErrorCodes$2.pluginRegisterAfterLoad]: "Register plugins can only be done before calling tsParticles.load()",
+        [ErrorCodes$2.offscreenCanvasUnsupported]: "OffscreenCanvas is required but not supported by this browser",
+        [ErrorCodes$2.offscreenCanvasTransferFailed]: "OffscreenCanvas transfer failed",
+        [ErrorCodes$2.hdrEnableInvalid]: 'Invalid HDR "enable" value: expected a boolean, got "{0}"',
+        [ErrorCodes$2.hdrModeInvalid]: 'Invalid HDR "mode" value: expected one of {0}, got "{1}"',
+        [ErrorCodes$2.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);
     }
 
     var OutModeDirection;
@@ -294,7 +375,6 @@
         PixelMode["percent"] = "percent";
     })(PixelMode || (PixelMode = {}));
 
-    const minRadius = 0;
     function isForbiddenKey(key) {
         return key === "__proto__" || key === "constructor" || key === "prototype";
     }
@@ -490,22 +570,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 {
@@ -515,12 +657,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);
@@ -552,7 +690,7 @@
                 this.#listeners.delete(type);
             }
             else {
-                arr.splice(idx, deleteCount);
+                this.#listeners.set(type, [...arr.slice(minIndex, idx), ...arr.slice(idx + deleteCount)]);
             }
         }
     }
@@ -576,7 +714,6 @@
     class PluginManager {
         colorManagers = new Map();
         easingFunctions = new Map();
-        effectDrawers = new Map();
         initializers = {
             effects: new Map(),
             shapes: new Map(),
@@ -585,8 +722,6 @@
         palettes = new Map();
         plugins = [];
         presets = new Map();
-        shapeDrawers = new Map();
-        updaters = new Map();
         #allLoadersSet = new Set();
         #configs = new Map();
         #engine;
@@ -604,57 +739,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(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);
         }
@@ -664,12 +821,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;
@@ -688,16 +839,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$2.pluginRegisterAfterLoad));
             }
             for (const loader of loaders) {
                 if (this.#isRunningLoaders) {
@@ -709,88 +853,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 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 = [];
@@ -800,7 +871,7 @@
             return this.#domArray;
         }
         get version() {
-            return "4.4.0";
+            return "4.5.1";
         }
         addEventListener(type, listener) {
             this.#eventDispatcher.addEventListener(type, listener);
@@ -809,7 +880,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$2.engineVersionMismatch, this.version, pluginVersion));
         }
         dispatchEvent(type, args) {
             this.#eventDispatcher.dispatchEvent(type, args);
@@ -1058,20 +1129,6 @@
         DrawLayer[DrawLayer["Foreground"] = 7] = "Foreground";
     })(DrawLayer || (DrawLayer = {}));
 
-    class OptionLoader {
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
-            this.doLoad(data);
-        }
-    }
-    function loadOptions(options, ...sourceOptionsArr) {
-        for (const sourceOptions of sourceOptionsArr) {
-            options.load(sourceOptions);
-        }
-    }
-
     function loadProperty(obj, key, value) {
         if (value !== undefined) {
             obj[key] = value;
@@ -1103,6 +1160,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;
@@ -1253,15 +1324,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$2.hdrEnableInvalid, String(data.enable)));
             }
-            if (data.mode !== undefined &&
-                (typeof data.mode !== "string" || !Object.values(HdrMode).includes(data.mode))) {
-                throw new Error(`Invalid HDR "mode" value: expected one of ${Object.values(HdrMode).join(", ")}, got "${toStringValue(data.mode)}"`);
+            if (data.mode !== undefined && !isEnumValue(HdrMode, data.mode)) {
+                throw new Error(getErrorMessage(ErrorCodes$2.hdrModeInvalid, Object.values(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$2.hdrPeakNitsInvalid, String(data.peakNits)));
             }
             loadProperty(this, "enable", data.enable);
             loadProperty(this, "mode", data.mode);
@@ -1639,12 +1709,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);
                     }
                 }
             }
@@ -1983,9 +2051,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) {
@@ -1994,9 +2062,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) {
@@ -2283,7 +2351,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());
         });
@@ -2320,7 +2388,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());
@@ -2335,7 +2403,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("#");
@@ -2368,7 +2436,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());
         });
@@ -2408,7 +2476,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,
@@ -2421,12 +2489,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$1 = {
+        baseMoverNotLoaded: "TSP-3203",
+    };
+
+    const ErrorMessages$1 = {
+        [ErrorCodes$1.baseMoverNotLoaded]: "tsParticles Base Mover is not loaded",
+    };
+
     class MovePlugin {
         id = "move";
         #pluginManager;
@@ -2445,20 +2521,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$1);
+        }
         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));
         });
     }
@@ -2655,7 +2731,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));
@@ -2664,70 +2740,60 @@
     }
 
     const boundsMin = 0;
-    function bounceHorizontal(data) {
-        if ((data.outMode !== OutMode.bounce && data.outMode !== OutMode.split) ||
-            (data.direction !== OutModeDirection.left && data.direction !== OutModeDirection.right)) {
-            return;
-        }
-        if (data.bounds.right < boundsMin && data.direction === OutModeDirection.left) {
-            data.particle.position.x = data.size + data.offset.x;
-        }
-        else if (data.bounds.left > data.canvasSize.width && data.direction === 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 === OutModeDirection.right && velocity > minVelocity) ||
-                (data.direction === 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 === OutModeDirection.right) {
-            data.particle.position.x = data.canvasSize.width - minPos;
-        }
-        else if (data.outOfCanvas && data.direction === OutModeDirection.left) {
-            data.particle.position.x = minPos;
-        }
-        if (data.outMode === OutMode.split) {
-            data.particle.destroy();
-        }
-    }
-    function bounceVertical(data) {
-        if ((data.outMode !== OutMode.bounce && data.outMode !== OutMode.split) ||
-            (data.direction !== OutModeDirection.bottom && data.direction !== OutModeDirection.top)) {
+    const bounceAxisConfigs = {
+        [OutModeDirection.left]: {
+            axis: "x",
+            canvas: "width",
+            bounce: "horizontal",
+            negativeEdge: "right",
+            positiveEdge: "left",
+            negative: true,
+        },
+        [OutModeDirection.right]: {
+            axis: "x",
+            canvas: "width",
+            bounce: "horizontal",
+            negativeEdge: "right",
+            positiveEdge: "left",
+            negative: false,
+        },
+        [OutModeDirection.top]: {
+            axis: "y",
+            canvas: "height",
+            bounce: "vertical",
+            negativeEdge: "bottom",
+            positiveEdge: "top",
+            negative: true,
+        },
+        [OutModeDirection.bottom]: {
+            axis: "y",
+            canvas: "height",
+            bounce: "vertical",
+            negativeEdge: "bottom",
+            positiveEdge: "top",
+            negative: false,
+        },
+    };
+    function bounce(data) {
+        if ((data.outMode !== OutMode.bounce && data.outMode !== OutMode.split) || !(data.direction in bounceAxisConfigs)) {
             return;
         }
-        if (data.bounds.bottom < boundsMin && data.direction === 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 === 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 === OutModeDirection.bottom && velocity > minVelocity) ||
-                (data.direction === 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 === OutModeDirection.bottom) {
-            data.particle.position.y = data.canvasSize.height - minPos;
-        }
-        else if (data.outOfCanvas && data.direction === 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 === OutMode.split) {
             data.particle.destroy();
         }
@@ -2743,26 +2809,19 @@
                 OutMode.bounce,
                 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({ particle, outMode, direction, bounds, canvasSize, offset, outOfCanvas, size });
         }
     }
 
@@ -2851,107 +2910,108 @@
                 return;
             }
             const container = this.#container;
-            switch (particle.outType) {
-                case 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 === ParticleOutType.inside) {
+                this.#applyOutModeInside(particle, container);
+            }
+            else {
+                if (particle.isInsideCanvasForOutMode(outMode, direction)) {
+                    return;
                 }
-                default: {
-                    if (particle.isInsideCanvasForOutMode(outMode, direction)) {
-                        return;
-                    }
-                    switch (particle.outType) {
-                        case 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 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 === 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 === 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 === 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 === 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 === 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 === 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 === 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 === 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 === 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;
         }
     }
 
@@ -3000,7 +3060,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));
@@ -3017,39 +3077,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 &&
@@ -3068,10 +3098,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));
@@ -3113,7 +3181,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,
@@ -3126,7 +3194,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());
         });
@@ -3211,7 +3279,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));
@@ -3220,7 +3288,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),
@@ -3237,6 +3305,16 @@
         });
     }
 
+    const ErrorCodes = {
+        interactivityPluginNotLoaded: "TSP-3201",
+        interactivityClickHandlerNotSet: "TSP-3202",
+    };
+
+    const ErrorMessages = {
+        [ErrorCodes.interactivityPluginNotLoaded]: "tsParticles Interactivity Plugin is not loaded",
+        [ErrorCodes.interactivityClickHandlerNotSet]: "Click handlers can only be set after calling tsParticles.load()",
+    };
+
     class ClickEvent {
         enable = false;
         mode = [];
@@ -3313,9 +3391,7 @@
 
     class Modes {
         #container;
-        #pluginManager;
-        constructor(pluginManager, container) {
-            this.#pluginManager = pluginManager;
+        constructor(container) {
             this.#container = container;
         }
         load(data) {
@@ -3325,10 +3401,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;
@@ -3342,8 +3415,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)) {
@@ -3374,10 +3447,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;
             }
@@ -3391,7 +3464,7 @@
             if (source?.interactivity) {
                 options.interactivity = deepExtend({}, source.interactivity);
             }
-            const interactors = this.#pluginManager.interactors?.get(container);
+            const interactors = container.interactionManager?.interactors;
             if (!interactors) {
                 return;
             }
@@ -3421,25 +3494,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);
+        }
         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.interactivityClickHandlerNotSet));
                 }
                 items.forEach(item => {
                     const interactivityContainer = item;
@@ -3450,7 +3523,7 @@
     }
     function ensureInteractivityPluginLoaded(e) {
         if (!e.pluginManager.addInteractor) {
-            throw new Error("tsParticles Interactivity Plugin is not loaded");
+            throw new Error(getErrorMessage(ErrorCodes.interactivityPluginNotLoaded));
         }
     }
 
@@ -3501,6 +3574,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 {
@@ -3610,7 +3707,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 ||
@@ -3698,7 +3797,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);
@@ -3827,21 +3926,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(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();
@@ -3919,8 +4025,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;
@@ -3942,7 +4047,9 @@
                     }
                 }
                 for (const plugin of this.#getLayerPlugins(DrawLayer.BackgroundMask)) {
-                    plugin.canvasPaint?.();
+                    if (plugin !== clearedPlugin) {
+                        plugin.canvasPaint?.();
+                    }
                 }
                 for (const plugin of this.#getLayerPlugins(DrawLayer.CanvasSetup)) {
                     plugin.drawSettingsSetup?.(ctx, delta);
@@ -3958,51 +4065,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(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(DrawLayer.BackgroundMask).push(plugin);
-                }
-                if (plugin.drawSettingsSetup) {
-                    this.#getLayerPlugins(DrawLayer.CanvasSetup).push(plugin);
-                }
-                if (plugin.draw) {
-                    this.#getLayerPlugins(DrawLayer.PluginContent).push(plugin);
-                }
-                if (plugin.clearDraw ?? plugin.drawSettingsCleanup) {
-                    this.#getLayerPlugins(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(DrawLayer)) {
+                if (typeof layer === "number") {
+                    this.#layers[layer] = [];
                 }
             }
+            this.#initPluginsArray();
         }
         initUpdaters() {
             this.#preDrawUpdaters = [];
@@ -4211,6 +4290,45 @@
             this.#reusablePluginColors[sColorIndex] = sColor;
             return this.#reusablePluginColors;
         }
+        #initLayerPlugin(plugin) {
+            const layerMap = [
+                [DrawLayer.BackgroundMask, !!plugin.canvasPaint],
+                [DrawLayer.CanvasSetup, !!plugin.drawSettingsSetup],
+                [DrawLayer.PluginContent, !!plugin.draw],
+                [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;
@@ -4220,9 +4338,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) {
@@ -4233,10 +4349,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;
             }
         }
@@ -4254,7 +4367,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$2.offscreenCanvasUnsupported));
         }
         try {
             const offscreenCanvas = canvas.transferControlToOffscreen();
@@ -4262,10 +4375,16 @@
             return offscreenCanvas;
         }
         catch {
-            throw new TypeError("OffscreenCanvas transfer failed");
+            throw new TypeError(getErrorMessage(ErrorCodes$2.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) {
@@ -4390,7 +4509,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(HdrMode, hdrOptions.mode, HdrMode.standard));
             }
             else {
                 elementStyle.backgroundColor = "";
@@ -4510,11 +4629,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(HdrMode, container.actualOptions.hdr.mode, HdrMode.standard);
             container.peakNits = container.actualOptions.hdr.peakNits;
             const renderCanvas = this.renderCanvas;
             if (!renderCanvas) {
+                container.hdr = canSupportHdr ?? false;
                 return;
             }
             this.render.setContextSettings({
@@ -4533,7 +4652,6 @@
                 context = null;
             }
             if (canSupportHdr && !context) {
-                container.hdr = false;
                 const sdrSettings = {
                     alpha: true,
                     desynchronized: true,
@@ -4549,11 +4667,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 = [];
@@ -4589,16 +4712,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;
@@ -4670,6 +4783,10 @@
             this.#manageListeners(true);
         }
         removeListeners() {
+            if (this.#resizeTimeout !== undefined) {
+                clearTimeout(this.#resizeTimeout);
+                this.#resizeTimeout = undefined;
+            }
             this.#manageListeners(false);
         }
         #handleVisibilityChange() {
@@ -4697,8 +4814,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);
         }
@@ -4726,8 +4842,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();
@@ -4991,10 +5107,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$1), modifierOpacity = this.#applyModifiers(undefined, m => m.opacity), opacity = modifierOpacity ?? baseOpacity, fillOpacity = this.fillOpacity ?? defaultOpacity$1, strokeOpacity = this.strokeOpacity ?? defaultOpacity$1;
-            this.#cachedOpacityData.fillOpacity = fillOpacity;
+            const zIndexOptions = this.options.zIndex, zIndexFactor = zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, baseOpacity = getRangeValue(this.opacity?.value ?? defaultOpacity$1), modifierOpacity = this.#applyModifiers(undefined, m => m.opacity), opacity = modifierOpacity ?? baseOpacity;
+            this.#cachedOpacityData.fillOpacity = this.fillOpacity ?? defaultOpacity$1;
             this.#cachedOpacityData.opacity = opacity * zOpacityFactor;
-            this.#cachedOpacityData.strokeOpacity = strokeOpacity;
+            this.#cachedOpacityData.strokeOpacity = this.strokeOpacity ?? defaultOpacity$1;
             return this.#cachedOpacityData;
         }
         getPosition() {
@@ -5241,7 +5357,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$2.particlePositionNotFound));
             }
             this.position = initialPosition;
             this.initialPosition = this.position.copy();
@@ -5290,6 +5406,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;
@@ -5313,40 +5435,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);
@@ -5373,17 +5501,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;
@@ -5407,7 +5545,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 = [];
@@ -5418,23 +5556,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 LimitMode.delete: {
-                        const countToRemove = currentCount + countOffset - limit;
-                        if (countToRemove > minCount) {
-                            this.removeQuantity(countToRemove);
-                        }
-                        break;
-                    }
-                    case 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);
@@ -5498,7 +5625,7 @@
             return this.#array[index];
         }
         async init() {
-            const container = this.#container, options = container.actualOptions;
+            const container = this.#container;
             this.checkParticlePositionPlugins = [];
             this.#updatePlugins = [];
             this.#particleUpdatePlugins = [];
@@ -5507,59 +5634,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++) {
@@ -5574,13 +5658,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++;
                 }
@@ -5611,7 +5695,7 @@
             this.#resizeFactor = factor;
         }
         update(delta) {
-            this.grid.clear();
+            this.#grid.clear();
             for (const plugin of this.#updatePlugins) {
                 plugin.update?.(delta);
             }
@@ -5622,7 +5706,7 @@
             this.#updateParticlesPhase2(delta, particlesToDelete);
             if (particlesToDelete.size) {
                 for (const particle of particlesToDelete) {
-                    this.remove(particle);
+                    this.remove(particle, particle.group);
                 }
             }
             this.#resizeFactor = undefined;
@@ -5633,12 +5717,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);
@@ -5646,7 +5725,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(LimitMode, numberOptions.limit.mode, LimitMode.delete),
+                });
             }
             if (particlesCount < particlesNumber) {
                 this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);
@@ -5655,6 +5737,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(LimitMode, groupOptions?.number?.limit?.mode ?? options.number.limit.mode, 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 === LimitMode.wait && currentCount >= globalLimit) {
+                return true;
+            }
+            const groupLimitEntry = group === undefined ? undefined : this.#groupLimits.get(group);
+            if (groupLimitEntry && groupLimitEntry.limit > minLimit && groupLimitEntry.mode === LimitMode.wait) {
+                const groupCount = this.filter(t => t.group === group).length;
+                if (groupCount >= groupLimitEntry.limit) {
+                    return true;
+                }
+            }
+            if (groupLimitEntry && groupLimitEntry.limit > minLimit && groupLimitEntry.mode === 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 === 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 }, () => []);
@@ -5677,6 +5808,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) {
@@ -5685,12 +5880,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);
@@ -5777,7 +5975,7 @@
                     particlesToDelete.add(particle);
                     continue;
                 }
-                this.grid.insert(particle);
+                this.#grid.insert(particle);
             }
             return particlesToDelete;
         }
@@ -5864,6 +6062,7 @@
         started;
         zLayers;
         #delay;
+        #delayResolve;
         #delayTimeout;
         #delta = { value: 0, factor: 0 };
         #dispatchCallback;
@@ -5953,7 +6152,6 @@
             this.shapeDrawers = new Map();
             this.particleUpdaters = [];
             this.plugins.length = 0;
-            this.#pluginManager.clearPlugins(this);
             this.destroyed = true;
             this.#onDestroy(remove);
             this.dispatchEvent(EventType.containerDestroyed);
@@ -6006,31 +6204,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(HdrMode, hdrOptions.mode, HdrMode.standard);
             this.peakNits = hdrOptions.peakNits;
             this.zLayers = zLayers;
             this.#duration = getRangeValue(duration) * millisecondsToSeconds;
@@ -6051,9 +6232,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)) {
@@ -6120,7 +6301,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?.();
@@ -6136,9 +6320,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;
@@ -6164,6 +6350,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 &&
@@ -6440,11 +6647,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();
@@ -6548,28 +6755,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);
         }
@@ -6595,19 +6788,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;
         }
@@ -6703,6 +6895,9 @@
                 this.#touches.set(touch.identifier, performance.now());
             }
             this.#mouseTouchMove(e);
+            const { mouse } = this.#interactionManager.interactivityData;
+            mouse.clicking = true;
+            mouse.downPosition = mouse.position;
         }
     }
 
@@ -6715,18 +6910,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();
@@ -6845,7 +7040,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);
@@ -6858,11 +7053,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 = [];
         }
@@ -6907,13 +7102,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;
@@ -6935,59 +7130,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();
         }
     }
 
@@ -7181,6 +7376,7 @@
     exports.loadTrianglesPreset = loadTrianglesPreset;
     exports.tsParticles = tsParticles;
 
-}));
+})(g.__tsParticlesInternals.presets.triangles = g.__tsParticlesInternals.presets.triangles || {});
+})(typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : self);
+
 Object.assign(globalThis.window || globalThis, { loadTrianglesPreset: (globalThis.__tsParticlesInternals.presets.triangles || {}).loadTrianglesPreset });
-delete (globalThis.window || globalThis).tsparticlesInternalExports;