@tsparticles/preset-triangles 4.3.2 → 4.5.0

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.3.2 */
-(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.0 */
+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;
+        }
+        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;
+    }
+    function isSourceOptionsValue(value) {
+        if (isArray(value)) {
+            return value.every((entry) => isObject(entry) && !isArray(entry));
         }
-        return res;
+        return isObject(value) && !isArray(value);
     }
-    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 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");
+            }
         }
-        return res;
+        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 {
@@ -576,7 +718,6 @@
     class PluginManager {
         colorManagers = new Map();
         easingFunctions = new Map();
-        effectDrawers = new Map();
         initializers = {
             effects: new Map(),
             shapes: new Map(),
@@ -585,8 +726,6 @@
         palettes = new Map();
         plugins = [];
         presets = new Map();
-        shapeDrawers = new Map();
-        updaters = new Map();
         #allLoadersSet = new Set();
         #configs = new Map();
         #engine;
@@ -604,57 +743,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 +825,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 +843,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 +857,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 +875,7 @@
             return this.#domArray;
         }
         get version() {
-            return "4.3.2";
+            return "4.5.0";
         }
         addEventListener(type, listener) {
             this.#eventDispatcher.addEventListener(type, listener);
@@ -809,7 +884,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);
@@ -881,6 +956,10 @@
     }
 
     function initEngine() {
+        const existing = globalThis.tsParticles;
+        if (existing?.pluginManager) {
+            return existing;
+        }
         return new Engine();
     }
 
@@ -978,6 +1057,15 @@
         AnimationMode["random"] = "random";
     })(AnimationMode || (AnimationMode = {}));
 
+    var HdrMode;
+    (function (HdrMode) {
+        HdrMode["standard"] = "standard";
+        HdrMode["natural"] = "natural";
+        HdrMode["vivid"] = "vivid";
+        HdrMode["cinematic"] = "cinematic";
+        HdrMode["dynamic"] = "dynamic";
+    })(HdrMode || (HdrMode = {}));
+
     var LimitMode;
     (function (LimitMode) {
         LimitMode["delete"] = "delete";
@@ -1045,20 +1133,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;
@@ -1090,6 +1164,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;
@@ -1233,6 +1321,28 @@
         }
     }
 
+    const defaultPeakNits = 400, minPeakNits = 0, toStringValue = (value) => String(value);
+    class HDROptions extends OptionLoader {
+        enable = true;
+        mode = HdrMode.standard;
+        peakNits = defaultPeakNits;
+        doLoad(data) {
+            if (data.enable !== undefined && !isBoolean(data.enable)) {
+                throw new Error(getErrorMessage(ErrorCodes$2.hdrEnableInvalid, String(data.enable)));
+            }
+            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(getErrorMessage(ErrorCodes$2.hdrPeakNitsInvalid, String(data.peakNits)));
+            }
+            loadProperty(this, "enable", data.enable);
+            loadProperty(this, "mode", data.mode);
+            loadProperty(this, "peakNits", data.peakNits);
+        }
+    }
+
     class ResizeEvent extends OptionLoader {
         delay = 0.5;
         enable = true;
@@ -1603,12 +1713,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);
                     }
                 }
             }
@@ -1676,7 +1784,7 @@
         duration = 0;
         fpsLimit = 120;
         fullScreen;
-        hdr = true;
+        hdr;
         key;
         name;
         palette;
@@ -1696,6 +1804,7 @@
             this.#container = container;
             this.background = new Background();
             this.fullScreen = new FullScreen();
+            this.hdr = new HDROptions();
             this.particles = loadParticlesOptions(this.#pluginManager, this.#container);
             this.resize = new ResizeEvent();
         }
@@ -1718,7 +1827,15 @@
             loadProperty(this, "detectRetina", data.detectRetina);
             loadRangeProperty(this, "duration", data.duration);
             loadProperty(this, "fpsLimit", data.fpsLimit);
-            loadProperty(this, "hdr", data.hdr);
+            const hdrData = data.hdr;
+            if (isBoolean(hdrData)) {
+                this.hdr.enable = hdrData;
+                this.hdr.mode = HdrMode.standard;
+                this.hdr.peakNits = 400;
+            }
+            else {
+                this.hdr.load(hdrData);
+            }
             loadProperty(this, "pauseOnBlur", data.pauseOnBlur);
             loadProperty(this, "pauseOnOutsideViewport", data.pauseOnOutsideViewport);
             loadProperty(this, "zLayers", data.zLayers);
@@ -1761,7 +1878,7 @@
         }
     }
 
-    const styleCache = new Map(), maxStyleCacheSize = 2000, rgbFixedPrecision = 2, hslFixedPrecision = 2, hdrRgbFixedPrecision = 4, hdrHslFixedPrecision = 4, sdrReferenceWhiteNits = 203, hdrAnimationScale = sdrReferenceWhiteNits / maxNits;
+    const styleCache = new Map(), maxStyleCacheSize = 2000, rgbFixedPrecision = 2, hslFixedPrecision = 2, hdrRgbFixedPrecision = 4, hdrHslFixedPrecision = 4, sdrReferenceWhiteNits = 203, acesA = 2.51, acesB = 0.03, acesC = 2.43, acesD = 0.59, acesE = 0.14, saturationBoost = 1.15, lightnessBoost = 1.05, temperatureR = 1.05, temperatureB = 0.95, contrastFactor = 1.1, luminanceR = 0.2126, luminanceG = 0.7152, luminanceB = 0.0722, dynamicLuminanceFactor = 2, channelCount = 3, srgbThreshold = 0.04045, srgbDivisor = 12.92, srgbOffset = 0.055, srgbScale = 1.055, srgbExponent = 2.4, linearThreshold = 0.0031308, linearScale = 12.92;
     function getCachedStyle(key, generator) {
         let cached = styleCache.get(key);
         if (!cached) {
@@ -1773,6 +1890,48 @@
         }
         return cached;
     }
+    function acesFilmic(x) {
+        return clamp((x * (acesA * x + acesB)) / (x * (acesC * x + acesD) + acesE), none, one);
+    }
+    function srgbToLinear(c) {
+        return c <= srgbThreshold ? c / srgbDivisor : Math.pow((c + srgbOffset) / srgbScale, srgbExponent);
+    }
+    function linearToSrgb(c) {
+        return c <= linearThreshold ? c * linearScale : srgbScale * Math.pow(c, one / srgbExponent) - srgbOffset;
+    }
+    function applyHdrModeAdjustments(r, g, b, mode, maxChannel) {
+        switch (mode) {
+            case HdrMode.vivid: {
+                const avg = (r + g + b) / channelCount;
+                return {
+                    b: clamp(clamp(avg + (b - avg) * saturationBoost, none, maxChannel) * lightnessBoost, none, maxChannel),
+                    g: clamp(clamp(avg + (g - avg) * saturationBoost, none, maxChannel) * lightnessBoost, none, maxChannel),
+                    r: clamp(clamp(avg + (r - avg) * saturationBoost, none, maxChannel) * lightnessBoost, none, maxChannel),
+                };
+            }
+            case HdrMode.cinematic: {
+                const tempR = r * temperatureR, tempB = b * temperatureB, avg = (tempR + g + tempB) / channelCount;
+                return {
+                    b: clamp(avg + (tempB - avg) * contrastFactor, none, maxChannel),
+                    g: clamp(avg + (g - avg) * contrastFactor, none, maxChannel),
+                    r: clamp(avg + (tempR - avg) * contrastFactor, none, maxChannel),
+                };
+            }
+            case HdrMode.dynamic: {
+                const luminance = luminanceR * r + luminanceG * g + luminanceB * b, vividWeight = Math.min(one, luminance * dynamicLuminanceFactor), naturalWeight = one - vividWeight, avg = (r + g + b) / channelCount, vividR = clamp(avg + (r - avg) * saturationBoost, none, maxChannel) * lightnessBoost, vividG = clamp(avg + (g - avg) * saturationBoost, none, maxChannel) * lightnessBoost, vividB = clamp(avg + (b - avg) * saturationBoost, none, maxChannel) * lightnessBoost;
+                return {
+                    b: clamp(b * naturalWeight + vividB * vividWeight, none, maxChannel),
+                    g: clamp(g * naturalWeight + vividG * vividWeight, none, maxChannel),
+                    r: clamp(r * naturalWeight + vividR * vividWeight, none, maxChannel),
+                };
+            }
+            case HdrMode.standard:
+                return { b, g, r };
+            case HdrMode.natural:
+            default:
+                return { b, g, r };
+        }
+    }
     function stringToRgba(pluginManager, input) {
         if (!input) {
             return;
@@ -1896,9 +2055,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) {
@@ -1907,9 +2066,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) {
@@ -1930,30 +2089,65 @@
             r: getRgbInRangeValue(),
         };
     }
-    function getStyleFromRgb(color, hdr, opacity) {
-        const rgbPrecision = hdr ? hdrRgbFixedPrecision : rgbFixedPrecision, op = opacity ?? defaultOpacity$1, key = `rgb-${color.r.toFixed(rgbPrecision)}-${color.g.toFixed(rgbPrecision)}-${color.b.toFixed(rgbPrecision)}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
-        return getCachedStyle(key, () => (hdr ? getHdrStyleFromRgb(color, opacity) : getSdrStyleFromRgb(color, opacity)));
+    function getStyleFromRgb(color, hdr, opacity, peakNits, mode) {
+        const rgbPrecision = hdr ? hdrRgbFixedPrecision : rgbFixedPrecision, op = opacity ?? defaultOpacity$1, key = hdr
+            ? `rgb-${color.r.toFixed(rgbPrecision)}-${color.g.toFixed(rgbPrecision)}-${color.b.toFixed(rgbPrecision)}-hdr-${op.toString()}-${(peakNits ?? maxNits).toString()}-${mode ?? HdrMode.standard}`
+            : `rgb-${color.r.toFixed(rgbPrecision)}-${color.g.toFixed(rgbPrecision)}-${color.b.toFixed(rgbPrecision)}-sdr-${op.toString()}`;
+        return getCachedStyle(key, () => hdr ? getHdrStyleFromRgb(color, opacity, peakNits, mode) : getSdrStyleFromRgb(color, opacity));
+    }
+    function getHdrStyleFromRgb(color, opacity, peakNits = maxNits, mode = HdrMode.standard) {
+        const headroom = peakNits / sdrReferenceWhiteNits, middleGray = 0.18, mapped = hdrToneMapColor(color, headroom, middleGray, mode);
+        return `color(display-p3 ${mapped.r.toString()} ${mapped.g.toString()} ${mapped.b.toString()} / ${(opacity ?? defaultOpacity$1).toString()})`;
+    }
+    function hdrToneMapColor(color, headroom, middleGray, mode) {
+        const rNorm = color.r / rgbMax, gNorm = color.g / rgbMax, bNorm = color.b / rgbMax;
+        if (mode !== HdrMode.natural && mode !== HdrMode.vivid && mode !== HdrMode.cinematic && mode !== HdrMode.dynamic) {
+            return { b: bNorm, g: gNorm, r: rNorm };
+        }
+        const maxChannel = Math.max(one, headroom), luminance = luminanceR * rNorm + luminanceG * gNorm + luminanceB * bNorm, mappedLuminance = hdrToneMap(luminance, headroom, middleGray), scale = luminance > none ? mappedLuminance / luminance : one;
+        return applyHdrModeAdjustments(clamp(rNorm * scale, none, maxChannel), clamp(gNorm * scale, none, maxChannel), clamp(bNorm * scale, none, maxChannel), mode, maxChannel);
     }
-    function getHdrStyleFromRgb(color, opacity, peakNits = maxNits) {
-        const headroom = peakNits / sdrReferenceWhiteNits;
-        return `color(display-p3 ${((color.r / rgbMax) * headroom).toString()} ${((color.g / rgbMax) * headroom).toString()} ${((color.b / rgbMax) * headroom).toString()} / ${(opacity ?? defaultOpacity$1).toString()})`;
+    function hdrToneMap(normalized, headroom, middleGray) {
+        if (normalized <= middleGray) {
+            return acesFilmic(normalized);
+        }
+        const expanded = normalized + (normalized - middleGray) * (headroom - one);
+        return acesFilmic(expanded);
     }
     function getSdrStyleFromRgb(color, opacity) {
         return `rgba(${color.r.toString()}, ${color.g.toString()}, ${color.b.toString()}, ${(opacity ?? defaultOpacity$1).toString()})`;
     }
-    function getStyleFromHsl(color, hdr, opacity) {
-        const hslPrecision = hdr ? hdrHslFixedPrecision : hslFixedPrecision, op = opacity ?? defaultOpacity$1, key = `hsl-${color.h.toFixed(hslPrecision)}-${color.s.toFixed(hslPrecision)}-${color.l.toFixed(hslPrecision)}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
+    function getStyleFromHsl(color, hdr, opacity, peakNits, mode) {
+        const hslPrecision = hdr ? hdrHslFixedPrecision : hslFixedPrecision, op = opacity ?? defaultOpacity$1, key = hdr
+            ? `hsl-${color.h.toFixed(hslPrecision)}-${color.s.toFixed(hslPrecision)}-${color.l.toFixed(hslPrecision)}-hdr-${op.toString()}-${(peakNits ?? maxNits).toString()}-${mode ?? HdrMode.standard}`
+            : `hsl-${color.h.toFixed(hslPrecision)}-${color.s.toFixed(hslPrecision)}-${color.l.toFixed(hslPrecision)}-sdr-${op.toString()}`;
         return getCachedStyle(key, () => hdr
-            ? getStyleFromRgb(hslToRgbFloat(color), true, opacity)
+            ? getStyleFromRgb(hslToRgbFloat(color), true, opacity, peakNits, mode)
             : `hsla(${color.h.toString()}, ${color.s.toString()}%, ${color.l.toString()}%, ${op.toString()})`);
     }
-    function colorMix(color1, color2, size1, size2) {
+    function colorMix(color1, color2, size1, size2, hdr) {
         let rgb1 = color1, rgb2 = color2;
         if (!("r" in rgb1)) {
-            rgb1 = hslToRgb(color1);
+            rgb1 = hdr ? hslToRgbFloat(color1) : hslToRgb(color1);
         }
         if (!("r" in rgb2)) {
-            rgb2 = hslToRgb(color2);
+            rgb2 = hdr ? hslToRgbFloat(color2) : hslToRgb(color2);
+        }
+        if (hdr) {
+            const lin1 = {
+                b: srgbToLinear(rgb1.b / rgbMax),
+                g: srgbToLinear(rgb1.g / rgbMax),
+                r: srgbToLinear(rgb1.r / rgbMax),
+            }, lin2 = {
+                b: srgbToLinear(rgb2.b / rgbMax),
+                g: srgbToLinear(rgb2.g / rgbMax),
+                r: srgbToLinear(rgb2.r / rgbMax),
+            }, totalWeight = size1 + size2;
+            return {
+                b: linearToSrgb((lin1.b * size1 + lin2.b * size2) / totalWeight) * rgbMax,
+                g: linearToSrgb((lin1.g * size1 + lin2.g * size2) / totalWeight) * rgbMax,
+                r: linearToSrgb((lin1.r * size1 + lin2.r * size2) / totalWeight) * rgbMax,
+            };
         }
         return {
             b: mix(rgb1.b, rgb2.b, size1, size2),
@@ -1961,14 +2155,14 @@
             r: mix(rgb1.r, rgb2.r, size1, size2),
         };
     }
-    function getLinkColor(p1, p2, linkColor) {
+    function getLinkColor(p1, p2, linkColor, hdr) {
         if (linkColor === randomColorValue) {
             return getRandomRgbColor();
         }
         else if (linkColor === midColorValue) {
             const sourceColor = p1.getFillColor() ?? p1.getStrokeColor(), destColor = p2?.getFillColor() ?? p2?.getStrokeColor();
             if (sourceColor && destColor && p2) {
-                return colorMix(sourceColor, destColor, p1.getRadius(), p2.getRadius());
+                return colorMix(sourceColor, destColor, p1.getRadius(), p2.getRadius(), hdr);
             }
             else {
                 const hslColor = sourceColor ?? destColor;
@@ -2064,7 +2258,7 @@
             colorValue.velocity = defaultVelocity;
         }
     }
-    function updateColorValue(data, decrease, delta, hdr) {
+    function updateColorValue(data, decrease, delta, _hdr) {
         const minLoops = 0, minDelay = 0, identity = 1, minVelocity = 0, minOffset = 0, velocityFactor = 3.6;
         if (!data.enable ||
             ((data.maxLoops ?? minLoops) > minLoops && (data.loops ?? minLoops) > (data.maxLoops ?? minLoops))) {
@@ -2077,7 +2271,7 @@
         if ((data.delayTime ?? minDelay) > minDelay && data.time < (data.delayTime ?? minDelay)) {
             return;
         }
-        const offset = data.offset ? randomInRangeValue(data.offset) : minOffset, velocity = ((data.velocity ?? minVelocity) * delta.factor + offset * velocityFactor) * (hdr ? hdrAnimationScale : identity), decay = data.decay ?? identity, max = data.max, min = data.min;
+        const offset = data.offset ? randomInRangeValue(data.offset) : minOffset, velocity = (data.velocity ?? minVelocity) * delta.factor + offset * velocityFactor, decay = data.decay ?? identity, max = data.max, min = data.min;
         if (!decrease || data.status === AnimationStatus.increasing) {
             data.value += velocity;
             if (data.value > max) {
@@ -2109,9 +2303,9 @@
             return;
         }
         const { h, s, l } = color;
-        updateColorValue(h, false, delta, hdr);
-        updateColorValue(s, true, delta, hdr);
-        updateColorValue(l, true, delta, hdr);
+        updateColorValue(h, false, delta);
+        updateColorValue(s, true, delta);
+        updateColorValue(l, true, delta);
     }
     function alterHsl(color, type, value) {
         return {
@@ -2161,7 +2355,7 @@
     }
 
     async function loadBlendPlugin(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.5.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new BlendPlugin());
         });
@@ -2198,7 +2392,7 @@
     }
 
     async function loadCircleShape(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.5.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["circle"], () => {
                 return Promise.resolve(new CircleDrawer());
@@ -2213,7 +2407,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("#");
@@ -2246,7 +2440,7 @@
     }
 
     async function loadHexColorPlugin(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.5.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hex", new HexColorManager());
         });
@@ -2286,7 +2480,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,
@@ -2299,12 +2493,20 @@
     }
 
     async function loadHslColorPlugin(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.5.0");
         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;
@@ -2323,20 +2525,20 @@
     }
 
     async function loadMovePlugin(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.5.0");
+        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));
         });
     }
@@ -2533,7 +2735,7 @@
     }
 
     async function loadOpacityUpdater(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.5.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("opacity", container => {
                 return Promise.resolve(new OpacityUpdater(container));
@@ -2542,70 +2744,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();
         }
@@ -2621,26 +2813,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 });
         }
     }
 
@@ -2729,107 +2914,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;
         }
     }
 
@@ -2878,7 +3064,7 @@
     }
 
     async function loadOutModesUpdater(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.5.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("outModes", container => {
                 return Promise.resolve(new OutOfCanvasUpdater(container));
@@ -2895,39 +3081,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 &&
@@ -2946,10 +3102,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.3.2");
+        engine.checkVersion("4.5.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("paint", container => {
                 return Promise.resolve(new PaintUpdater(e.pluginManager, container));
@@ -2991,7 +3185,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,
@@ -3004,7 +3198,7 @@
     }
 
     async function loadRgbColorPlugin(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.5.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("rgb", new RgbColorManager());
         });
@@ -3089,7 +3283,7 @@
     }
 
     async function loadSizeUpdater(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.5.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("size", container => {
                 return Promise.resolve(new SizeUpdater(container));
@@ -3098,7 +3292,7 @@
     }
 
     async function loadBasic(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.5.0");
         await engine.pluginManager.register(async (e) => {
             await Promise.all([
                 loadBlendPlugin(e),
@@ -3115,6 +3309,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 = [];
@@ -3191,9 +3395,7 @@
 
     class Modes {
         #container;
-        #pluginManager;
-        constructor(pluginManager, container) {
-            this.#pluginManager = pluginManager;
+        constructor(container) {
             this.#container = container;
         }
         load(data) {
@@ -3203,10 +3405,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;
@@ -3220,8 +3419,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)) {
@@ -3252,10 +3451,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;
             }
@@ -3269,7 +3468,7 @@
             if (source?.interactivity) {
                 options.interactivity = deepExtend({}, source.interactivity);
             }
-            const interactors = this.#pluginManager.interactors?.get(container);
+            const interactors = container.interactionManager?.interactors;
             if (!interactors) {
                 return;
             }
@@ -3299,25 +3498,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.3.2");
+        engine.checkVersion("4.5.0");
+        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;
@@ -3328,7 +3527,7 @@
     }
     function ensureInteractivityPluginLoaded(e) {
         if (!e.pluginManager.addInteractor) {
-            throw new Error("tsParticles Interactivity Plugin is not loaded");
+            throw new Error(getErrorMessage(ErrorCodes.interactivityPluginNotLoaded));
         }
     }
 
@@ -3535,7 +3734,7 @@
             const linkColor = linksOptions.id !== undefined
                 ? container.particles.linksColors.get(linksOptions.id)
                 : container.particles.linksColor;
-            return getLinkColor(p1, p2, linkColor);
+            return getLinkColor(p1, p2, linkColor, container.hdr);
         }
         #setColor(p1) {
             if (!p1.options.links) {
@@ -3576,7 +3775,7 @@
     }
 
     async function loadParticlesLinksInteraction(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.5.0");
         await engine.pluginManager.register((e) => {
             const pluginManager = e.pluginManager;
             ensureInteractivityPluginLoaded(e);
@@ -3705,21 +3904,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();
@@ -3760,7 +3966,11 @@
             if (!fColor && !sColor) {
                 return;
             }
-            const container = this.#container, zIndexOptions = particle.options.zIndex, zIndexFactor = zIndexFactorOffset - particle.zIndexFactor, { fillOpacity, opacity, strokeOpacity } = particle.getOpacity(), transform = this.#reusableTransform, colorStyles = this.#reusableColorStyles, fill = fColor ? getStyleFromHsl(fColor, container.hdr, fillOpacity * opacity) : undefined, stroke = sColor ? getStyleFromHsl(sColor, container.hdr, strokeOpacity * opacity) : fill;
+            const container = this.#container, zIndexOptions = particle.options.zIndex, zIndexFactor = zIndexFactorOffset - particle.zIndexFactor, { fillOpacity, opacity, strokeOpacity } = particle.getOpacity(), transform = this.#reusableTransform, colorStyles = this.#reusableColorStyles, fill = fColor
+                ? getStyleFromHsl(fColor, container.hdr, fillOpacity * opacity, container.peakNits, container.hdrMode)
+                : undefined, stroke = sColor
+                ? getStyleFromHsl(sColor, container.hdr, strokeOpacity * opacity, container.peakNits, container.hdrMode)
+                : fill;
             transform.a = transform.b = transform.c = transform.d = undefined;
             colorStyles.fill = fill;
             colorStyles.stroke = stroke;
@@ -3793,8 +4003,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;
@@ -3816,7 +4025,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);
@@ -3835,48 +4046,20 @@
             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.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 = [];
@@ -4085,6 +4268,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;
@@ -4094,7 +4316,7 @@
             if (typeof background.element === "string") {
                 if (typeof document !== "undefined") {
                     const node = document.querySelector(background.element);
-                    if (node instanceof HTMLCanvasElement || node instanceof HTMLVideoElement || node instanceof HTMLImageElement) {
+                    if (node && this.#isSupportedElement(node)) {
                         this.#backgroundElement = node;
                     }
                     else if (node) {
@@ -4105,10 +4327,7 @@
                     }
                 }
             }
-            else if (background.element instanceof HTMLCanvasElement ||
-                background.element instanceof OffscreenCanvas ||
-                background.element instanceof HTMLVideoElement ||
-                background.element instanceof HTMLImageElement) {
+            else if (this.#isSupportedElement(background.element)) {
                 this.#backgroundElement = background.element;
             }
         }
@@ -4126,7 +4345,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();
@@ -4134,10 +4353,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) {
@@ -4176,6 +4401,7 @@
         zoom = defaultZoom;
         #container;
         #generated;
+        #hdrMediaListeners;
         #mutationObserver;
         #originalStyle;
         #pluginManager;
@@ -4240,7 +4466,6 @@
             });
             this.resize();
             this.#initStyle();
-            this.initBackground();
             this.#safeMutationObserver(obs => {
                 const element = this.domElement;
                 if (!element || !(element instanceof Node)) {
@@ -4250,6 +4475,8 @@
             });
             this.initPlugins();
             this.#initContext();
+            this.initBackground();
+            this.#initHdrListeners();
             this.render.init();
         }
         initBackground() {
@@ -4259,7 +4486,8 @@
             }
             const elementStyle = element.style, color = rangeColorToRgb(this.#pluginManager, background.color);
             if (color) {
-                elementStyle.backgroundColor = getStyleFromRgb(color, container.actualOptions.hdr, background.opacity);
+                const hdrOptions = container.actualOptions.hdr;
+                elementStyle.backgroundColor = getStyleFromRgb(color, container.hdr, background.opacity, hdrOptions.peakNits, toEnumValue(HdrMode, hdrOptions.mode, HdrMode.standard));
             }
             else {
                 elementStyle.backgroundColor = "";
@@ -4356,6 +4584,7 @@
                 obs.disconnect();
             });
             this.#mutationObserver = undefined;
+            this.#removeHdrListeners();
             this.render.stop();
         }
         async windowResize() {
@@ -4375,9 +4604,16 @@
             }
         }
         #initContext() {
-            const container = this.#container, canSupportHdr = container.actualOptions.hdr &&
+            const container = this.#container, canSupportHdr = container.actualOptions.hdr.enable &&
                 safeMatchMedia("(color-gamut: p3)")?.matches &&
                 safeMatchMedia("(dynamic-range: high)")?.matches;
+            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({
                 alpha: true,
                 desynchronized: true,
@@ -4386,11 +4622,51 @@
                     ? { colorSpace: "display-p3", colorType: "float16" }
                     : { colorSpace: "srgb" }),
             });
-            const renderCanvas = this.renderCanvas;
-            if (!renderCanvas) {
-                return;
+            let context;
+            try {
+                context = renderCanvas.getContext("2d", this.render.settings);
+            }
+            catch {
+                context = null;
+            }
+            if (canSupportHdr && !context) {
+                const sdrSettings = {
+                    alpha: true,
+                    desynchronized: true,
+                    willReadFrequently: false,
+                    colorSpace: "srgb",
+                };
+                this.render.setContextSettings(sdrSettings);
+                try {
+                    context = renderCanvas.getContext("2d", sdrSettings);
+                }
+                catch {
+                    context = null;
+                }
+            }
+            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.#initContext();
+                this.initBackground();
+            }, listeners = [];
+            if (p3Query) {
+                p3Query.addEventListener("change", handleChange);
+                listeners.push({ handler: handleChange, mql: p3Query });
+            }
+            if (hdrQuery) {
+                hdrQuery.addEventListener("change", handleChange);
+                listeners.push({ handler: handleChange, mql: hdrQuery });
             }
-            this.render.setContext(renderCanvas.getContext("2d", this.render.settings));
+            this.#hdrMediaListeners = listeners;
         }
         #initStyle() {
             const element = this.domElement, options = this.#container.actualOptions;
@@ -4414,6 +4690,15 @@
                 element.style.setProperty(key, value, "important");
             }
         }
+        #removeHdrListeners() {
+            if (!this.#hdrMediaListeners) {
+                return;
+            }
+            for (const { handler, mql } of this.#hdrMediaListeners) {
+                mql.removeEventListener("change", handler);
+            }
+            this.#hdrMediaListeners = undefined;
+        }
         #repairStyle() {
             const element = this.domElement;
             if (!element) {
@@ -4503,8 +4788,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);
         }
@@ -4532,8 +4816,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();
@@ -4797,10 +5081,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 = opacity * fillOpacity * zOpacityFactor;
+            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 = opacity * strokeOpacity * zOpacityFactor;
+            this.#cachedOpacityData.strokeOpacity = this.strokeOpacity ?? defaultOpacity$1;
             return this.#cachedOpacityData;
         }
         getPosition() {
@@ -5047,7 +5331,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();
@@ -5096,6 +5380,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;
@@ -5119,18 +5409,7 @@
             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;
@@ -5145,14 +5424,23 @@
             this.#releaseShapes();
             return result;
         }
-        setCellSize(cellSize) {
-            this.#pendingCellSize = cellSize;
-        }
         #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);
@@ -5179,6 +5467,20 @@
             }
             return null;
         }
+        #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);
+                }
+            }
+        }
         #releaseShapes() {
             this.#circlePoolIdx = 0;
             this.#rectanglePoolIdx = 0;
@@ -5187,9 +5489,9 @@
 
     class ParticlesManager {
         checkParticlePositionPlugins;
-        grid;
         #array;
         #container;
+        #grid;
         #groupLimits;
         #limit;
         #nextId;
@@ -5213,7 +5515,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 = [];
@@ -5224,23 +5526,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);
@@ -5304,7 +5595,7 @@
             return this.#array[index];
         }
         async init() {
-            const container = this.#container, options = container.actualOptions;
+            const container = this.#container;
             this.checkParticlePositionPlugins = [];
             this.#updatePlugins = [];
             this.#particleUpdatePlugins = [];
@@ -5313,59 +5604,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++) {
@@ -5380,13 +5628,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++;
                 }
@@ -5417,7 +5665,7 @@
             this.#resizeFactor = factor;
         }
         update(delta) {
-            this.grid.clear();
+            this.#grid.clear();
             for (const plugin of this.#updatePlugins) {
                 plugin.update?.(delta);
             }
@@ -5428,7 +5676,7 @@
             this.#updateParticlesPhase2(delta, particlesToDelete);
             if (particlesToDelete.size) {
                 for (const particle of particlesToDelete) {
-                    this.remove(particle);
+                    this.remove(particle, particle.group);
                 }
             }
             this.#resizeFactor = undefined;
@@ -5439,12 +5687,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);
@@ -5452,7 +5695,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);
@@ -5461,6 +5707,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 }, () => []);
@@ -5483,6 +5778,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) {
@@ -5491,12 +5850,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);
@@ -5583,7 +5945,7 @@
                     particlesToDelete.add(particle);
                     continue;
                 }
-                this.grid.insert(particle);
+                this.#grid.insert(particle);
             }
             return particlesToDelete;
         }
@@ -5655,6 +6017,7 @@
         effectDrawers;
         fpsLimit;
         hdr;
+        hdrMode;
         id;
         pageHidden;
         particleCreatedPlugins;
@@ -5662,6 +6025,7 @@
         particlePositionPlugins;
         particleUpdaters;
         particles;
+        peakNits;
         plugins;
         retina;
         shapeDrawers;
@@ -5692,6 +6056,8 @@
             this.id = Symbol(id);
             this.fpsLimit = 120;
             this.hdr = false;
+            this.hdrMode = HdrMode.standard;
+            this.peakNits = 400;
             this.#smooth = false;
             this.#delay = 0;
             this.#duration = 0;
@@ -5755,7 +6121,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);
@@ -5808,31 +6173,15 @@
             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, hdr, smooth, zLayers } = this.actualOptions;
-            this.hdr = hdr;
+            const { delay, duration, fpsLimit, smooth, zLayers } = this.actualOptions, hdrOptions = this.actualOptions.hdr;
+            this.hdrMode = toEnumValue(HdrMode, hdrOptions.mode, HdrMode.standard);
+            this.peakNits = hdrOptions.peakNits;
             this.zLayers = zLayers;
             this.#duration = getRangeValue(duration) * millisecondsToSeconds;
             this.#delay = getRangeValue(delay) * millisecondsToSeconds;
@@ -5852,9 +6201,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)) {
@@ -5965,6 +6314,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 &&
@@ -6241,11 +6611,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();
@@ -6349,28 +6719,12 @@
             }
             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);
-            }
+            manageListener(interactivityEl, touchEndEvent, options.interactivity?.events.onClick.enable ? handlers.touchEndClick : handlers.touchEnd, add);
+            manageListener(interactivityEl, mouseUpEvent, handlers.mouseUp, add);
+            manageListener(interactivityEl, mouseDownEvent, handlers.mouseDown, add);
             manageListener(interactivityEl, mouseLeaveEvent, handlers.mouseLeave, add);
             manageListener(interactivityEl, touchCancelEvent, handlers.touchCancel, add);
         }
@@ -6396,19 +6750,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;
         }
@@ -6504,6 +6857,9 @@
                 this.#touches.set(touch.identifier, performance.now());
             }
             this.#mouseTouchMove(e);
+            const { mouse } = this.#interactionManager.interactivityData;
+            mouse.clicking = true;
+            mouse.downPosition = mouse.position;
         }
     }
 
@@ -6516,18 +6872,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();
@@ -6646,7 +7002,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);
@@ -6659,11 +7015,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 = [];
         }
@@ -6708,13 +7064,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;
@@ -6736,59 +7092,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();
         }
     }
 
@@ -6958,10 +7314,10 @@
             }
         }
         #getCachedStyle(rgb) {
-            const key = `${rgb.r},${rgb.g},${rgb.b}`;
+            const key = `${rgb.r},${rgb.g},${rgb.b}-${this.#container.hdr}-${this.#container.peakNits}-${this.#container.hdrMode}`;
             let style = this.#colorCache.get(key);
             if (!style) {
-                style = getStyleFromRgb(rgb, this.#container.hdr);
+                style = getStyleFromRgb(rgb, this.#container.hdr, undefined, this.#container.peakNits, this.#container.hdrMode);
                 this.#colorCache.set(key, style);
             }
             return style;
@@ -6982,6 +7338,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;