@tsparticles/stencil 4.3.1 → 4.4.0

package/dist/cjs/{Container-DwRv_rua.js → Container-BPdTDiSM.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BEJx8swj.js');
+var index = require('./index-B6adnBft.js');
 
 class BaseRange {
     position;
@@ -241,6 +241,29 @@ class FullScreen extends OptionLoader {
     }
 }
 
+const defaultPeakNits = 400, minPeakNits = 0, toStringValue = (value) => String(value);
+class HDROptions extends OptionLoader {
+    enable = true;
+    mode = index.HdrMode.standard;
+    peakNits = defaultPeakNits;
+    doLoad(data) {
+        if (data.enable !== undefined && !index.isBoolean(data.enable)) {
+            throw new Error(`Invalid HDR "enable" value: expected a boolean, got "${String(data.enable)}"`);
+        }
+        if (data.mode !== undefined &&
+            (typeof data.mode !== "string" || !Object.values(index.HdrMode).includes(data.mode))) {
+            throw new Error(`Invalid HDR "mode" value: expected one of ${Object.values(index.HdrMode).join(", ")}, got "${toStringValue(data.mode)}"`);
+        }
+        if (data.peakNits !== undefined &&
+            (!index.isNumber(data.peakNits) || !Number.isFinite(data.peakNits) || data.peakNits <= minPeakNits)) {
+            throw new Error(`Invalid HDR "peakNits" value: expected a positive number, got "${String(data.peakNits)}"`);
+        }
+        loadProperty(this, "enable", data.enable);
+        loadProperty(this, "mode", data.mode);
+        loadProperty(this, "peakNits", data.peakNits);
+    }
+}
+
 class ResizeEvent extends OptionLoader {
     delay = 0.5;
     enable = true;
@@ -674,7 +697,7 @@ class Options extends OptionLoader {
     duration = 0;
     fpsLimit = 120;
     fullScreen;
-    hdr = true;
+    hdr;
     key;
     name;
     palette;
@@ -694,6 +717,7 @@ class Options extends OptionLoader {
         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();
     }
@@ -716,7 +740,15 @@ class Options extends OptionLoader {
         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 (index.isBoolean(hdrData)) {
+            this.hdr.enable = hdrData;
+            this.hdr.mode = index.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);
@@ -759,7 +791,7 @@ class Options extends OptionLoader {
     }
 }
 
-const styleCache = new Map(), maxStyleCacheSize = 2000, rgbFixedPrecision = 2, hslFixedPrecision = 2, hdrRgbFixedPrecision = 4, hdrHslFixedPrecision = 4, sdrReferenceWhiteNits = 203;
+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) {
@@ -771,6 +803,42 @@ function getCachedStyle(key, generator) {
     }
     return cached;
 }
+function acesFilmic(x) {
+    return index.clamp((x * (acesA * x + acesB)) / (x * (acesC * x + acesD) + acesE), index.none, index.one);
+}
+function applyHdrModeAdjustments(r, g, b, mode, maxChannel) {
+    switch (mode) {
+        case index.HdrMode.vivid: {
+            const avg = (r + g + b) / channelCount;
+            return {
+                b: index.clamp(index.clamp(avg + (b - avg) * saturationBoost, index.none, maxChannel) * lightnessBoost, index.none, maxChannel),
+                g: index.clamp(index.clamp(avg + (g - avg) * saturationBoost, index.none, maxChannel) * lightnessBoost, index.none, maxChannel),
+                r: index.clamp(index.clamp(avg + (r - avg) * saturationBoost, index.none, maxChannel) * lightnessBoost, index.none, maxChannel),
+            };
+        }
+        case index.HdrMode.cinematic: {
+            const tempR = r * temperatureR, tempB = b * temperatureB, avg = (tempR + g + tempB) / channelCount;
+            return {
+                b: index.clamp(avg + (tempB - avg) * contrastFactor, index.none, maxChannel),
+                g: index.clamp(avg + (g - avg) * contrastFactor, index.none, maxChannel),
+                r: index.clamp(avg + (tempR - avg) * contrastFactor, index.none, maxChannel),
+            };
+        }
+        case index.HdrMode.dynamic: {
+            const luminance = luminanceR * r + luminanceG * g + luminanceB * b, vividWeight = Math.min(index.one, luminance * dynamicLuminanceFactor), naturalWeight = index.one - vividWeight, avg = (r + g + b) / channelCount, vividR = index.clamp(avg + (r - avg) * saturationBoost, index.none, maxChannel) * lightnessBoost, vividG = index.clamp(avg + (g - avg) * saturationBoost, index.none, maxChannel) * lightnessBoost, vividB = index.clamp(avg + (b - avg) * saturationBoost, index.none, maxChannel) * lightnessBoost;
+            return {
+                b: index.clamp(b * naturalWeight + vividB * vividWeight, index.none, maxChannel),
+                g: index.clamp(g * naturalWeight + vividG * vividWeight, index.none, maxChannel),
+                r: index.clamp(r * naturalWeight + vividR * vividWeight, index.none, maxChannel),
+            };
+        }
+        case index.HdrMode.standard:
+            return { b, g, r };
+        case index.HdrMode.natural:
+        default:
+            return { b, g, r };
+    }
+}
 function stringToRgba(pluginManager, input) {
     if (!input) {
         return;
@@ -908,21 +976,40 @@ function getRandomRgbColor(min, hdr) {
         r: getRgbInRangeValue(),
     };
 }
-function getStyleFromRgb(color, hdr, opacity) {
-    const rgbPrecision = hdr ? hdrRgbFixedPrecision : rgbFixedPrecision, op = opacity ?? index.defaultOpacity, 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 ?? index.defaultOpacity, key = hdr
+        ? `rgb-${color.r.toFixed(rgbPrecision)}-${color.g.toFixed(rgbPrecision)}-${color.b.toFixed(rgbPrecision)}-hdr-${op.toString()}-${(peakNits ?? index.maxNits).toString()}-${mode ?? index.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 = index.maxNits) {
-    const headroom = peakNits / sdrReferenceWhiteNits;
-    return `color(display-p3 ${((color.r / index.rgbMax) * headroom).toString()} ${((color.g / index.rgbMax) * headroom).toString()} ${((color.b / index.rgbMax) * headroom).toString()} / ${(opacity ?? index.defaultOpacity).toString()})`;
+function getHdrStyleFromRgb(color, opacity, peakNits = index.maxNits, mode = index.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 ?? index.defaultOpacity).toString()})`;
+}
+function hdrToneMapColor(color, headroom, middleGray, mode) {
+    const rNorm = color.r / index.rgbMax, gNorm = color.g / index.rgbMax, bNorm = color.b / index.rgbMax;
+    if (mode !== index.HdrMode.natural && mode !== index.HdrMode.vivid && mode !== index.HdrMode.cinematic && mode !== index.HdrMode.dynamic) {
+        return { b: bNorm, g: gNorm, r: rNorm };
+    }
+    const maxChannel = Math.max(index.one, headroom), luminance = luminanceR * rNorm + luminanceG * gNorm + luminanceB * bNorm, mappedLuminance = hdrToneMap(luminance, headroom, middleGray), scale = luminance > index.none ? mappedLuminance / luminance : index.one;
+    return applyHdrModeAdjustments(index.clamp(rNorm * scale, index.none, maxChannel), index.clamp(gNorm * scale, index.none, maxChannel), index.clamp(bNorm * scale, index.none, maxChannel), mode, maxChannel);
+}
+function hdrToneMap(normalized, headroom, middleGray) {
+    if (normalized <= middleGray) {
+        return acesFilmic(normalized);
+    }
+    const expanded = normalized + (normalized - middleGray) * (headroom - index.one);
+    return acesFilmic(expanded);
 }
 function getSdrStyleFromRgb(color, opacity) {
     return `rgba(${color.r.toString()}, ${color.g.toString()}, ${color.b.toString()}, ${(opacity ?? index.defaultOpacity).toString()})`;
 }
-function getStyleFromHsl(color, hdr, opacity) {
-    const hslPrecision = hdr ? hdrHslFixedPrecision : hslFixedPrecision, op = opacity ?? index.defaultOpacity, 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 ?? index.defaultOpacity, key = hdr
+        ? `hsl-${color.h.toFixed(hslPrecision)}-${color.s.toFixed(hslPrecision)}-${color.l.toFixed(hslPrecision)}-hdr-${op.toString()}-${(peakNits ?? index.maxNits).toString()}-${mode ?? index.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) {
@@ -1060,7 +1147,11 @@ class RenderManager {
         if (!fColor && !sColor) {
             return;
         }
-        const container = this.#container, zIndexOptions = particle.options.zIndex, zIndexFactor = index.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 = index.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;
@@ -1394,7 +1485,9 @@ class RenderManager {
         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 ((typeof HTMLCanvasElement !== "undefined" && node instanceof HTMLCanvasElement) ||
+                    (typeof HTMLVideoElement !== "undefined" && node instanceof HTMLVideoElement) ||
+                    (typeof HTMLImageElement !== "undefined" && node instanceof HTMLImageElement)) {
                     this.#backgroundElement = node;
                 }
                 else if (node) {
@@ -1405,10 +1498,10 @@ class RenderManager {
                 }
             }
         }
-        else if (background.element instanceof HTMLCanvasElement ||
-            background.element instanceof OffscreenCanvas ||
-            background.element instanceof HTMLVideoElement ||
-            background.element instanceof HTMLImageElement) {
+        else if ((typeof HTMLCanvasElement !== "undefined" && background.element instanceof HTMLCanvasElement) ||
+            (typeof OffscreenCanvas !== "undefined" && background.element instanceof OffscreenCanvas) ||
+            (typeof HTMLVideoElement !== "undefined" && background.element instanceof HTMLVideoElement) ||
+            (typeof HTMLImageElement !== "undefined" && background.element instanceof HTMLImageElement)) {
             this.#backgroundElement = background.element;
         }
     }
@@ -1476,6 +1569,7 @@ class CanvasManager {
     zoom = index.defaultZoom;
     #container;
     #generated;
+    #hdrMediaListeners;
     #mutationObserver;
     #originalStyle;
     #pluginManager;
@@ -1540,7 +1634,6 @@ class CanvasManager {
         });
         this.resize();
         this.#initStyle();
-        this.initBackground();
         this.#safeMutationObserver(obs => {
             const element = this.domElement;
             if (!element || !(element instanceof Node)) {
@@ -1550,6 +1643,8 @@ class CanvasManager {
         });
         this.initPlugins();
         this.#initContext();
+        this.initBackground();
+        this.#initHdrListeners();
         this.render.init();
     }
     initBackground() {
@@ -1559,7 +1654,8 @@ class CanvasManager {
         }
         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, hdrOptions.mode);
         }
         else {
             elementStyle.backgroundColor = "";
@@ -1656,6 +1752,7 @@ class CanvasManager {
             obs.disconnect();
         });
         this.#mutationObserver = undefined;
+        this.#removeHdrListeners();
         this.render.stop();
     }
     async windowResize() {
@@ -1675,9 +1772,16 @@ class CanvasManager {
         }
     }
     #initContext() {
-        const container = this.#container, canSupportHdr = container.actualOptions.hdr &&
+        const container = this.#container, canSupportHdr = container.actualOptions.hdr.enable &&
             index.safeMatchMedia("(color-gamut: p3)")?.matches &&
             index.safeMatchMedia("(dynamic-range: high)")?.matches;
+        container.hdr = canSupportHdr ?? false;
+        container.hdrMode = container.actualOptions.hdr.mode;
+        container.peakNits = container.actualOptions.hdr.peakNits;
+        const renderCanvas = this.renderCanvas;
+        if (!renderCanvas) {
+            return;
+        }
         this.render.setContextSettings({
             alpha: true,
             desynchronized: true,
@@ -1686,11 +1790,47 @@ class CanvasManager {
                 ? { 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) {
+            container.hdr = false;
+            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(renderCanvas.getContext("2d", this.render.settings));
+        this.render.setContext(context);
+    }
+    #initHdrListeners() {
+        this.#removeHdrListeners();
+        const p3Query = index.safeMatchMedia("(color-gamut: p3)"), hdrQuery = index.safeMatchMedia("(dynamic-range: high)"), handleChange = () => {
+            this.#recreateRenderCanvas();
+            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.#hdrMediaListeners = listeners;
     }
     #initStyle() {
         const element = this.domElement, options = this.#container.actualOptions;
@@ -1714,6 +1854,25 @@ class CanvasManager {
             element.style.setProperty(key, value, "important");
         }
     }
+    #recreateRenderCanvas() {
+        const renderCanvas = this.renderCanvas;
+        if (!renderCanvas) {
+            return;
+        }
+        if (this.domElement) {
+            return;
+        }
+        this.renderCanvas = new OffscreenCanvas(renderCanvas.width, renderCanvas.height);
+    }
+    #removeHdrListeners() {
+        if (!this.#hdrMediaListeners) {
+            return;
+        }
+        for (const { handler, mql } of this.#hdrMediaListeners) {
+            mql.removeEventListener("change", handler);
+        }
+        this.#hdrMediaListeners = undefined;
+    }
     #repairStyle() {
         const element = this.domElement;
         if (!element) {
@@ -2098,9 +2257,9 @@ class Particle {
     }
     getOpacity() {
         const zIndexOptions = this.options.zIndex, zIndexFactor = index.zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, baseOpacity = index.getRangeValue(this.opacity?.value ?? index.defaultOpacity), modifierOpacity = this.#applyModifiers(undefined, m => m.opacity), opacity = modifierOpacity ?? baseOpacity, fillOpacity = this.fillOpacity ?? index.defaultOpacity, strokeOpacity = this.strokeOpacity ?? index.defaultOpacity;
-        this.#cachedOpacityData.fillOpacity = opacity * fillOpacity * zOpacityFactor;
+        this.#cachedOpacityData.fillOpacity = fillOpacity;
         this.#cachedOpacityData.opacity = opacity * zOpacityFactor;
-        this.#cachedOpacityData.strokeOpacity = opacity * strokeOpacity * zOpacityFactor;
+        this.#cachedOpacityData.strokeOpacity = strokeOpacity;
         return this.#cachedOpacityData;
     }
     getPosition() {
@@ -2955,6 +3114,7 @@ class Container {
     effectDrawers;
     fpsLimit;
     hdr;
+    hdrMode;
     id;
     pageHidden;
     particleCreatedPlugins;
@@ -2962,6 +3122,7 @@ class Container {
     particlePositionPlugins;
     particleUpdaters;
     particles;
+    peakNits;
     plugins;
     retina;
     shapeDrawers;
@@ -2992,6 +3153,8 @@ class Container {
         this.id = Symbol(id);
         this.fpsLimit = 120;
         this.hdr = false;
+        this.hdrMode = index.HdrMode.standard;
+        this.peakNits = 400;
         this.#smooth = false;
         this.#delay = 0;
         this.#duration = 0;
@@ -3131,8 +3294,9 @@ class Container {
         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 = hdrOptions.mode;
+        this.peakNits = hdrOptions.peakNits;
         this.zLayers = zLayers;
         this.#duration = index.getRangeValue(duration) * index.millisecondsToSeconds;
         this.#delay = index.getRangeValue(delay) * index.millisecondsToSeconds;

package/dist/cjs/{index-BEJx8swj.js → index-B6adnBft.js}

@@ -271,6 +271,9 @@ exports.PixelMode = void 0;
     PixelMode["percent"] = "percent";
 })(exports.PixelMode || (exports.PixelMode = {}));
 
+function isForbiddenKey(key) {
+    return key === "__proto__" || key === "constructor" || key === "prototype";
+}
 function hasMatchMedia() {
     return typeof matchMedia !== "undefined";
 }
@@ -319,7 +322,7 @@ function deepExtend(destination, ...sources) {
         if (!hasNested) {
             const sourceDict = source, destDict = destination;
             for (const key of sourceKeys) {
-                if (key === "__proto__" || key === "constructor" || key === "prototype") {
+                if (isForbiddenKey(key)) {
                     continue;
                 }
                 const v = sourceDict[key];
@@ -330,7 +333,7 @@ function deepExtend(destination, ...sources) {
             continue;
         }
         for (const key of sourceKeys) {
-            if (key === "__proto__" || key === "constructor" || key === "prototype") {
+            if (isForbiddenKey(key)) {
                 continue;
             }
             const sourceDict = source, destDict = destination, value = sourceDict[key];
@@ -746,7 +749,7 @@ class Engine {
         return this.#domArray;
     }
     get version() {
-        return "4.3.1";
+        return "4.4.0";
     }
     addEventListener(type, listener) {
         this.#eventDispatcher.addEventListener(type, listener);
@@ -781,7 +784,7 @@ class Engine {
         if (typeof HTMLElement !== "undefined" && params.element instanceof HTMLElement) {
             domSourceElement = params.element;
         }
-        const { Container } = await Promise.resolve().then(function () { return require('./Container-DwRv_rua.js'); }), id = params.id ?? domSourceElement?.id ?? `tsparticles${Math.floor(getRandom() * loadRandomFactor).toString()}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options, currentOptions = itemFromSingleOrMultiple(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new Container({
+        const { Container } = await Promise.resolve().then(function () { return require('./Container-BPdTDiSM.js'); }), id = params.id ?? domSourceElement?.id ?? `tsparticles${Math.floor(getRandom() * loadRandomFactor).toString()}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options, currentOptions = itemFromSingleOrMultiple(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new Container({
             dispatchCallback: (eventType, args) => {
                 this.dispatchEvent(eventType, args);
             },
@@ -827,6 +830,10 @@ class Engine {
 }
 
 function initEngine() {
+    const existing = globalThis.tsParticles;
+    if (existing?.pluginManager) {
+        return existing;
+    }
     return new Engine();
 }
 
@@ -851,6 +858,15 @@ var AnimationMode;
     AnimationMode["random"] = "random";
 })(AnimationMode || (AnimationMode = {}));
 
+exports.HdrMode = void 0;
+(function (HdrMode) {
+    HdrMode["standard"] = "standard";
+    HdrMode["natural"] = "natural";
+    HdrMode["vivid"] = "vivid";
+    HdrMode["cinematic"] = "cinematic";
+    HdrMode["dynamic"] = "dynamic";
+})(exports.HdrMode || (exports.HdrMode = {}));
+
 exports.LimitMode = void 0;
 (function (LimitMode) {
     LimitMode["delete"] = "delete";
@@ -1025,6 +1041,7 @@ exports.minLimit = minLimit;
 exports.minStrokeWidth = minStrokeWidth;
 exports.minZ = minZ;
 exports.minimumSize = minimumSize;
+exports.none = none;
 exports.one = one;
 exports.originPoint = originPoint;
 exports.phaseNumerator = phaseNumerator;

package/dist/cjs/index.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BEJx8swj.js');
+var index = require('./index-B6adnBft.js');
 
 
 

package/dist/cjs/stencil-particles.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-BjS63OiI.js');
-var index$1 = require('./index-BEJx8swj.js');
+var index$1 = require('./index-B6adnBft.js');
 
 const StencilParticles = class {
     constructor(hostRef) {
@@ -48,7 +48,7 @@ const StencilParticles = class {
             }
             // Load particles directly onto the DOM element.
             // If a container-id is provided, use it so consumers can retrieve the container later.
-            const loadParams = Object.assign(Object.assign({ element: this.containerElement }, (this.containerId ? { id: this.containerId } : {})), (this.options ? { options: this.options } : { url: this.url }));
+            const loadParams = Object.assign(Object.assign(Object.assign({ element: this.containerElement }, (this.containerId ? { id: this.containerId } : {})), (this.options ? { options: this.options } : {})), (this.url ? { url: this.url } : {}));
             container = await index$1.tsParticles.load(loadParams);
         }
         catch (error) {
@@ -67,7 +67,7 @@ const StencilParticles = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'f5fe33d147a1a606a75fe0d1ee385bacaf0e0b7d', id: this.containerId, ref: el => {
+        return (index.h("div", { key: 'a2468083e697bd937120a4e800456a12d80a6935', id: this.containerId, ref: el => {
                 this.containerElement = el;
             }, style: { width: "100%", height: "100%" } }));
     }

package/dist/collection/components/stencil-particles/stencil-particles.js

@@ -44,7 +44,7 @@ export class StencilParticles {
             }
             // Load particles directly onto the DOM element.
             // If a container-id is provided, use it so consumers can retrieve the container later.
-            const loadParams = Object.assign(Object.assign({ element: this.containerElement }, (this.containerId ? { id: this.containerId } : {})), (this.options ? { options: this.options } : { url: this.url }));
+            const loadParams = Object.assign(Object.assign(Object.assign({ element: this.containerElement }, (this.containerId ? { id: this.containerId } : {})), (this.options ? { options: this.options } : {})), (this.url ? { url: this.url } : {}));
             container = await tsParticles.load(loadParams);
         }
         catch (error) {
@@ -63,7 +63,7 @@ export class StencilParticles {
         }
     }
     render() {
-        return (h("div", { key: 'f5fe33d147a1a606a75fe0d1ee385bacaf0e0b7d', id: this.containerId, ref: el => {
+        return (h("div", { key: 'a2468083e697bd937120a4e800456a12d80a6935', id: this.containerId, ref: el => {
                 this.containerElement = el;
             }, style: { width: "100%", height: "100%" } }));
     }