@tsparticles/preset-squares 4.3.2 → 4.5.0

package/tsparticles.preset.squares.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.squares = global.__tsParticlesInternals.presets.squares || {})));
-})(this, (function (exports) { 'use strict';
+(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 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", 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, 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, 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;
+    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", 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, 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, 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;
     }
@@ -276,6 +307,57 @@
         };
     }
 
+    const ErrorCodes$1 = {
+        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$1.engineVersionMismatch]: "The tsParticles version is different from the loaded plugins version. Engine version: {0}. Plugin version: {1}",
+        [ErrorCodes$1.particlePositionNotFound]: "a valid position cannot be found for particle",
+        [ErrorCodes$1.pluginRegisterAfterLoad]: "Register plugins can only be done before calling tsParticles.load()",
+        [ErrorCodes$1.offscreenCanvasUnsupported]: "OffscreenCanvas is required but not supported by this browser",
+        [ErrorCodes$1.offscreenCanvasTransferFailed]: "OffscreenCanvas transfer failed",
+        [ErrorCodes$1.hdrEnableInvalid]: 'Invalid HDR "enable" value: expected a boolean, got "{0}"',
+        [ErrorCodes$1.hdrModeInvalid]: 'Invalid HDR "mode" value: expected one of {0}, got "{1}"',
+        [ErrorCodes$1.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;
     (function (OutModeDirection) {
         OutModeDirection["bottom"] = "bottom";
@@ -290,7 +372,6 @@
         PixelMode["percent"] = "percent";
     })(PixelMode || (PixelMode = {}));
 
-    const minRadius = 0;
     function isForbiddenKey(key) {
         return key === "__proto__" || key === "constructor" || key === "prototype";
     }
@@ -486,22 +567,84 @@
             element.removeEventListener(event, handler, removeOptions);
         }
     }
-    async function getItemsFromInitializer(container, map, initializers, force = false) {
-        let res = map.get(container);
-        if (!res || force) {
-            res = await Promise.all([...initializers.values()].map(t => t(container)));
-            map.set(container, res);
+    async function getItemsFromInitializer(container, initializers) {
+        return await Promise.all([...initializers.values()].map(t => t(container)));
+    }
+    async function getItemMapFromInitializer(container, initializers) {
+        const entries = await Promise.all([...initializers.entries()].map(([key, initializer]) => initializer(container).then(item => [key, item])));
+        return new Map(entries);
+    }
+    async function getDataFromUrl(data) {
+        const url = itemFromSingleOrMultiple(data.url, data.index);
+        if (!url) {
+            return data.fallback;
         }
-        return res;
+        try {
+            const response = await fetch(url);
+            if (response.ok) {
+                const current = (await response.json());
+                if (isSourceOptionsValue(current)) {
+                    return current;
+                }
+                getLogger().error("invalid configuration data while retrieving config file");
+            }
+            else {
+                getLogger().error(`${response.status.toString()} while retrieving config file`);
+            }
+        }
+        catch (error) {
+            getLogger().error(`error while retrieving config file: ${error}`);
+        }
+        return data.fallback;
     }
-    async function getItemMapFromInitializer(container, map, initializers, force = false) {
-        let res = map.get(container);
-        if (!res || force) {
-            const entries = await Promise.all([...initializers.entries()].map(([key, initializer]) => initializer(container).then(item => [key, item])));
-            res = new Map(entries);
-            map.set(container, res);
+    function isSourceOptionsValue(value) {
+        if (isArray(value)) {
+            return value.every((entry) => isObject(entry) && !isArray(entry));
         }
-        return res;
+        return isObject(value) && !isArray(value);
+    }
+    function getCanvasFromContainer(domContainer) {
+        let canvasEl;
+        const documentSafe = safeDocument(), isCanvas = domContainer instanceof HTMLCanvasElement || domContainer.tagName.toLowerCase() === canvasTag;
+        if (isCanvas) {
+            canvasEl = domContainer;
+            canvasEl.dataset[generatedAttribute] ??= generatedFalse;
+            if (canvasEl.dataset[generatedAttribute] === generatedTrue) {
+                canvasEl.style.width ||= fullPercent;
+                canvasEl.style.height ||= fullPercent;
+                canvasEl.style.pointerEvents = "none";
+                canvasEl.style.setProperty("pointer-events", "none");
+            }
+        }
+        else {
+            const existingCanvases = domContainer.getElementsByTagName(canvasTag), foundCanvas = existingCanvases.item(canvasFirstIndex);
+            if (foundCanvas) {
+                canvasEl = foundCanvas;
+                canvasEl.dataset[generatedAttribute] = generatedFalse;
+            }
+            else {
+                canvasEl = documentSafe.createElement(canvasTag);
+                canvasEl.dataset[generatedAttribute] = generatedTrue;
+                domContainer.appendChild(canvasEl);
+            }
+            canvasEl.style.width ||= fullPercent;
+            canvasEl.style.height ||= fullPercent;
+            canvasEl.style.pointerEvents = "none";
+            canvasEl.style.setProperty("pointer-events", "none");
+        }
+        return canvasEl;
+    }
+    function getDomContainer(id, source) {
+        const documentSafe = safeDocument();
+        let domContainer = source ?? documentSafe.getElementById(id);
+        if (domContainer) {
+            return domContainer;
+        }
+        domContainer = documentSafe.createElement("canvas");
+        domContainer.id = id;
+        domContainer.dataset[generatedAttribute] = generatedTrue;
+        documentSafe.body.append(domContainer);
+        return domContainer;
     }
 
     class EventDispatcher {
@@ -572,7 +715,6 @@
     class PluginManager {
         colorManagers = new Map();
         easingFunctions = new Map();
-        effectDrawers = new Map();
         initializers = {
             effects: new Map(),
             shapes: new Map(),
@@ -581,8 +723,6 @@
         palettes = new Map();
         plugins = [];
         presets = new Map();
-        shapeDrawers = new Map();
-        updaters = new Map();
         #allLoadersSet = new Set();
         #configs = new Map();
         #engine;
@@ -600,57 +740,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);
         }
@@ -660,12 +822,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;
@@ -684,16 +840,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$1.pluginRegisterAfterLoad));
             }
             for (const loader of loaders) {
                 if (this.#isRunningLoaders) {
@@ -705,88 +854,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 = [];
@@ -796,7 +872,7 @@
             return this.#domArray;
         }
         get version() {
-            return "4.3.2";
+            return "4.5.0";
         }
         addEventListener(type, listener) {
             this.#eventDispatcher.addEventListener(type, listener);
@@ -805,7 +881,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$1.engineVersionMismatch, this.version, pluginVersion));
         }
         dispatchEvent(type, args) {
             this.#eventDispatcher.dispatchEvent(type, args);
@@ -877,6 +953,10 @@
     }
 
     function initEngine() {
+        const existing = globalThis.tsParticles;
+        if (existing?.pluginManager) {
+            return existing;
+        }
         return new Engine();
     }
 
@@ -974,6 +1054,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";
@@ -1041,20 +1130,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;
@@ -1086,6 +1161,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;
@@ -1229,6 +1318,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$1.hdrEnableInvalid, String(data.enable)));
+            }
+            if (data.mode !== undefined && !isEnumValue(HdrMode, data.mode)) {
+                throw new Error(getErrorMessage(ErrorCodes$1.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$1.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;
@@ -1599,12 +1710,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);
                     }
                 }
             }
@@ -1672,7 +1781,7 @@
         duration = 0;
         fpsLimit = 120;
         fullScreen;
-        hdr = true;
+        hdr;
         key;
         name;
         palette;
@@ -1692,6 +1801,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();
         }
@@ -1714,7 +1824,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);
@@ -1757,7 +1875,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;
     function getCachedStyle(key, generator) {
         let cached = styleCache.get(key);
         if (!cached) {
@@ -1769,6 +1887,42 @@
         }
         return cached;
     }
+    function acesFilmic(x) {
+        return clamp((x * (acesA * x + acesB)) / (x * (acesC * x + acesD) + acesE), none, one);
+    }
+    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;
@@ -1892,9 +2046,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 getRandomRgbColor(min, hdr) {
@@ -1906,21 +2060,40 @@
             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) {
-        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 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 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 getHslFromAnimation(animation) {
@@ -1983,7 +2156,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))) {
@@ -1996,7 +2169,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) {
@@ -2028,9 +2201,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 {
@@ -2134,6 +2307,8 @@
         autoPlay = true;
         direction;
         domId;
+        draggable = false;
+        draw = true;
         fill = true;
         life = new EmitterLife();
         name;
@@ -2157,6 +2332,8 @@
             }
             loadProperty(this, "direction", data.direction);
             loadProperty(this, "domId", data.domId);
+            loadProperty(this, "draggable", data.draggable);
+            loadProperty(this, "draw", data.draw);
             loadProperty(this, "fill", data.fill);
             this.life.load(data.life);
             loadProperty(this, "name", data.name);
@@ -2218,6 +2395,14 @@
         }
     }
 
+    const ErrorCodes = {
+        emittersPluginNotLoaded: "TSP-3101",
+    };
+
+    const ErrorMessages = {
+        [ErrorCodes.emittersPluginNotLoaded]: "tsParticles Emitters Plugin is not loaded",
+    };
+
     async function addEmittersShapesManager(e) {
         const { ShapeManager } = await Promise.resolve().then(function () { return ShapeManager$1; }), pluginManager = e.pluginManager;
         pluginManager.emitterShapeManager ??= new ShapeManager();
@@ -2248,7 +2433,10 @@
     })(EmitterClickMode || (EmitterClickMode = {}));
 
     async function loadEmittersPluginSimple(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(async (e) => {
             const instancesManager = await getEmittersInstancesManager(e);
             await addEmittersShapesManager(e);
@@ -2263,7 +2451,7 @@
         RgbIndexes[RgbIndexes["b"] = 3] = "b";
         RgbIndexes[RgbIndexes["a"] = 4] = "a";
     })(RgbIndexes || (RgbIndexes = {}));
-    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("#");
@@ -2296,7 +2484,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());
         });
@@ -2311,39 +2499,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 &&
@@ -2362,10 +2520,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));
@@ -2547,7 +2743,7 @@
             particle.pathRotation = rotateOptions.path;
             let rotateDirection = rotateOptions.direction;
             if (rotateDirection === RotateDirection.random) {
-                const index = Math.floor(getRandom() * double), minIndex = 0;
+                const index = Math.floor(getRandom() * double);
                 rotateDirection = index > minIndex ? RotateDirection.counterClockwise : RotateDirection.clockwise;
             }
             switch (rotateDirection) {
@@ -2594,7 +2790,7 @@
     }
 
     async function loadRotateUpdater(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.5.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("rotate", container => {
                 return Promise.resolve(new RotateUpdater(container));
@@ -2681,7 +2877,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));
@@ -2705,7 +2901,7 @@
     }
 
     async function loadSquareShape(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.5.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["edge", "square"], () => Promise.resolve(new SquareDrawer()));
         });
@@ -2844,21 +3040,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();
@@ -2899,7 +3102,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;
@@ -2932,8 +3139,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;
@@ -2955,7 +3161,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);
@@ -2987,35 +3195,7 @@
                     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.#initPluginsArray();
         }
         initUpdaters() {
             this.#preDrawUpdaters = [];
@@ -3224,6 +3404,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;
@@ -3233,7 +3452,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) {
@@ -3244,10 +3463,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;
             }
         }
@@ -3265,7 +3481,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$1.offscreenCanvasUnsupported));
         }
         try {
             const offscreenCanvas = canvas.transferControlToOffscreen();
@@ -3273,10 +3489,16 @@
             return offscreenCanvas;
         }
         catch {
-            throw new TypeError("OffscreenCanvas transfer failed");
+            throw new TypeError(getErrorMessage(ErrorCodes$1.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) {
@@ -3315,6 +3537,7 @@
         zoom = defaultZoom;
         #container;
         #generated;
+        #hdrMediaListeners;
         #mutationObserver;
         #originalStyle;
         #pluginManager;
@@ -3379,7 +3602,6 @@
             });
             this.resize();
             this.#initStyle();
-            this.initBackground();
             this.#safeMutationObserver(obs => {
                 const element = this.domElement;
                 if (!element || !(element instanceof Node)) {
@@ -3389,6 +3611,8 @@
             });
             this.initPlugins();
             this.#initContext();
+            this.initBackground();
+            this.#initHdrListeners();
             this.render.init();
         }
         initBackground() {
@@ -3398,7 +3622,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 = "";
@@ -3495,6 +3720,7 @@
                 obs.disconnect();
             });
             this.#mutationObserver = undefined;
+            this.#removeHdrListeners();
             this.render.stop();
         }
         async windowResize() {
@@ -3514,9 +3740,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,
@@ -3525,11 +3758,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;
@@ -3553,6 +3826,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) {
@@ -3642,8 +3924,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);
         }
@@ -3671,8 +3952,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();
@@ -3936,10 +4217,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() {
@@ -4186,7 +4467,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$1.particlePositionNotFound));
             }
             this.position = initialPosition;
             this.initialPosition = this.position.copy();
@@ -4235,6 +4516,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;
@@ -4258,18 +4545,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;
@@ -4284,14 +4560,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);
@@ -4318,6 +4603,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;
@@ -4326,9 +4625,9 @@
 
     class ParticlesManager {
         checkParticlePositionPlugins;
-        grid;
         #array;
         #container;
+        #grid;
         #groupLimits;
         #limit;
         #nextId;
@@ -4352,7 +4651,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 = [];
@@ -4363,23 +4662,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);
@@ -4443,7 +4731,7 @@
             return this.#array[index];
         }
         async init() {
-            const container = this.#container, options = container.actualOptions;
+            const container = this.#container;
             this.checkParticlePositionPlugins = [];
             this.#updatePlugins = [];
             this.#particleUpdatePlugins = [];
@@ -4452,59 +4740,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++) {
@@ -4519,13 +4764,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++;
                 }
@@ -4556,7 +4801,7 @@
             this.#resizeFactor = factor;
         }
         update(delta) {
-            this.grid.clear();
+            this.#grid.clear();
             for (const plugin of this.#updatePlugins) {
                 plugin.update?.(delta);
             }
@@ -4567,7 +4812,7 @@
             this.#updateParticlesPhase2(delta, particlesToDelete);
             if (particlesToDelete.size) {
                 for (const particle of particlesToDelete) {
-                    this.remove(particle);
+                    this.remove(particle, particle.group);
                 }
             }
             this.#resizeFactor = undefined;
@@ -4578,12 +4823,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);
@@ -4591,7 +4831,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);
@@ -4600,6 +4843,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 }, () => []);
@@ -4622,6 +4914,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) {
@@ -4630,12 +4986,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);
@@ -4722,7 +5081,7 @@
                     particlesToDelete.add(particle);
                     continue;
                 }
-                this.grid.insert(particle);
+                this.#grid.insert(particle);
             }
             return particlesToDelete;
         }
@@ -4794,6 +5153,7 @@
         effectDrawers;
         fpsLimit;
         hdr;
+        hdrMode;
         id;
         pageHidden;
         particleCreatedPlugins;
@@ -4801,6 +5161,7 @@
         particlePositionPlugins;
         particleUpdaters;
         particles;
+        peakNits;
         plugins;
         retina;
         shapeDrawers;
@@ -4831,6 +5192,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;
@@ -4894,7 +5257,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);
@@ -4947,31 +5309,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;
@@ -4991,9 +5337,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)) {
@@ -5104,6 +5450,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 &&
@@ -5148,6 +5515,11 @@
             this.#container = container;
             this.#instancesManager.initContainer(container);
         }
+        draw(context, _delta) {
+            for (const emitter of this.#instancesManager.getArray(this.#container)) {
+                emitter.draw(context);
+            }
+        }
         async init() {
             const emittersOptions = this.#container.actualOptions.emitters;
             if (isArray(emittersOptions)) {
@@ -5218,14 +5590,21 @@
             this.#pluginManager = pluginManager;
         }
         async addEmitter(container, options, position) {
-            const emitterOptions = new Emitter();
-            emitterOptions.load(options);
-            const { EmitterInstance } = await Promise.resolve().then(function () { return EmitterInstance$1; }), emitter = new EmitterInstance(this.#pluginManager, container, (emitter) => {
-                this.removeEmitter(container, emitter);
-            }, emitterOptions, position);
-            await emitter.init();
-            this.getArray(container).push(emitter);
-            return emitter;
+            return this.addEmitters(container, [{ options, position }]).then(t => t[defaultIndex]);
+        }
+        async addEmitters(container, emitters) {
+            const { EmitterInstance } = await Promise.resolve().then(function () { return EmitterInstance$1; }), res = [];
+            for (const { options, position } of emitters) {
+                const emitterOptions = new Emitter();
+                emitterOptions.load(options);
+                const emitter = new EmitterInstance(this.#pluginManager, container, (emitter) => {
+                    this.removeEmitter(container, emitter);
+                }, emitterOptions, position);
+                await emitter.init();
+                this.getArray(container).push(emitter);
+                res.push(emitter);
+            }
+            return res;
         }
         clear(container) {
             this.initContainer(container);
@@ -5252,6 +5631,7 @@
                     : array.find(t => t.name === idxOrName);
             };
             container.addEmitter = async (options, position) => this.addEmitter(container, options, position);
+            container.addEmitters = async (emitters) => this.addEmitters(container, emitters);
             container.removeEmitter = (idxOrName) => {
                 const emitter = container.getEmitter?.(idxOrName);
                 if (emitter) {
@@ -5272,7 +5652,7 @@
             };
         }
         removeEmitter(container, emitter) {
-            const index = this.getArray(container).indexOf(emitter), minIndex = 0, deleteCount = 1;
+            const index = this.getArray(container).indexOf(emitter), deleteCount = 1;
             if (index >= minIndex) {
                 this.getArray(container).splice(index, deleteCount);
             }
@@ -5327,6 +5707,7 @@
         #particlesOptions;
         #paused;
         #pluginManager;
+        #positionOverride = false;
         #removeCallback;
         #resizeObserver;
         #shape;
@@ -5403,6 +5784,31 @@
             });
             this.play();
         }
+        draw(context) {
+            if (!this.options.draw || !this.#shape) {
+                return;
+            }
+            const container = this.#container, fillEnabled = this.options.spawn.fill?.enable ?? true;
+            context.save();
+            context.beginPath();
+            if (fillEnabled) {
+                context.fillStyle = this.spawnFillColor
+                    ? getStyleFromHsl(this.spawnFillColor, container.hdr, this.spawnFillOpacity ?? defaultOpacity$1, container.peakNits, container.hdrMode)
+                    : getStyleFromRgb({ r: 0, g: 0, b: 0 }, container.hdr, defaultOpacity$1, container.peakNits, container.hdrMode);
+            }
+            if (this.spawnStrokeColor) {
+                context.strokeStyle = getStyleFromHsl(this.spawnStrokeColor, container.hdr, this.spawnStrokeOpacity ?? defaultOpacity$1, container.peakNits, container.hdrMode);
+                context.lineWidth = this.spawnStrokeWidth ?? defaultStrokeWidth;
+            }
+            this.#shape.draw?.(context);
+            if (fillEnabled) {
+                context.fill();
+            }
+            if (this.spawnStrokeColor) {
+                context.stroke();
+            }
+            context.restore();
+        }
         externalPause() {
             this.#paused = true;
             this.pause();
@@ -5440,11 +5846,14 @@
             }
         }
         resize() {
-            const initialPosition = this.#initialPosition, container = this.#container;
-            this.position =
-                initialPosition && isPointInside(initialPosition, container.canvas.size, Vector.origin)
-                    ? initialPosition
-                    : this.#calcPosition();
+            const container = this.#container;
+            if (!this.#positionOverride) {
+                const initialPosition = this.#initialPosition;
+                this.position =
+                    initialPosition && isPointInside(initialPosition, container.canvas.size, Vector.origin)
+                        ? initialPosition
+                        : this.#calcPosition();
+            }
             this.#size = this.#calcSize();
             this.size =
                 this.#size.mode === PixelMode.percent
@@ -5455,6 +5864,11 @@
                     : { width: this.#size.width, height: this.#size.height };
             this.#shape?.resize(this.position, this.size);
         }
+        setPosition(position) {
+            this.#positionOverride = true;
+            this.position = { ...position };
+            this.#shape?.resize(this.position, this.size);
+        }
         update(delta) {
             if (this.#paused) {
                 return;
@@ -5650,6 +6064,7 @@
     exports.loadSquaresPreset = loadSquaresPreset;
     exports.tsParticles = tsParticles;
 
-}));
+})(g.__tsParticlesInternals.presets.squares = g.__tsParticlesInternals.presets.squares || {});
+})(typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : self);
+
 Object.assign(globalThis.window || globalThis, { loadSquaresPreset: (globalThis.__tsParticlesInternals.presets.squares || {}).loadSquaresPreset });
-delete (globalThis.window || globalThis).tsparticlesInternalExports;