@tsparticles/pjs 4.3.2 → 4.4.0

package/tsparticles.pjs.bundle.js

@@ -1,5 +1,5 @@
 (function(g){g.__tsParticlesInternals=g.__tsParticlesInternals||{};g.__tsParticlesInternals.bundles=g.__tsParticlesInternals.bundles||{};g.__tsParticlesInternals.effects=g.__tsParticlesInternals.effects||{};g.__tsParticlesInternals.engine=g.__tsParticlesInternals.engine||{};g.__tsParticlesInternals.interactions=g.__tsParticlesInternals.interactions||{};g.__tsParticlesInternals.palettes=g.__tsParticlesInternals.palettes||{};g.__tsParticlesInternals.paths=g.__tsParticlesInternals.paths||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins.emittersShapes=g.__tsParticlesInternals.plugins.emittersShapes||{};g.__tsParticlesInternals.presets=g.__tsParticlesInternals.presets||{};g.__tsParticlesInternals.shapes=g.__tsParticlesInternals.shapes||{};g.__tsParticlesInternals.updaters=g.__tsParticlesInternals.updaters||{};g.__tsParticlesInternals.utils=g.__tsParticlesInternals.utils||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas.utils=g.__tsParticlesInternals.canvas.utils||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path.utils=g.__tsParticlesInternals.path.utils||{};var __tsProxyFactory=typeof Proxy!=="undefined"?function(obj){return new Proxy(obj,{get:function(target,key){if(!(key in target)){target[key]={};}return target[key];}});}:function(obj){return obj;};g.__tsParticlesInternals.bundles=__tsProxyFactory(g.__tsParticlesInternals.bundles);g.__tsParticlesInternals.effects=__tsProxyFactory(g.__tsParticlesInternals.effects);g.__tsParticlesInternals.interactions=__tsProxyFactory(g.__tsParticlesInternals.interactions);g.__tsParticlesInternals.palettes=__tsProxyFactory(g.__tsParticlesInternals.palettes);g.__tsParticlesInternals.paths=__tsProxyFactory(g.__tsParticlesInternals.paths);g.__tsParticlesInternals.plugins=__tsProxyFactory(g.__tsParticlesInternals.plugins);g.__tsParticlesInternals.plugins.emittersShapes=__tsProxyFactory(g.__tsParticlesInternals.plugins.emittersShapes);g.__tsParticlesInternals.presets=__tsProxyFactory(g.__tsParticlesInternals.presets);g.__tsParticlesInternals.shapes=__tsProxyFactory(g.__tsParticlesInternals.shapes);g.__tsParticlesInternals.updaters=__tsProxyFactory(g.__tsParticlesInternals.updaters);g.__tsParticlesInternals.utils=__tsProxyFactory(g.__tsParticlesInternals.utils);g.__tsParticlesInternals.canvas=__tsProxyFactory(g.__tsParticlesInternals.canvas);g.__tsParticlesInternals.path=__tsProxyFactory(g.__tsParticlesInternals.path);g.tsparticlesInternalExports=g.tsparticlesInternalExports||{};})(typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:this);
-/* tsParticles v4.3.2 */
+/* tsParticles v4.4.0 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
     typeof define === 'function' && define.amd ? define(['exports'], factory) :
@@ -880,7 +880,7 @@
             return this.#domArray;
         }
         get version() {
-            return "4.3.2";
+            return "4.4.0";
         }
         addEventListener(type, listener) {
             this.#eventDispatcher.addEventListener(type, listener);
@@ -961,6 +961,10 @@
     }
 
     function initEngine() {
+        const existing = globalThis.tsParticles;
+        if (existing?.pluginManager) {
+            return existing;
+        }
         return new Engine();
     }
 
@@ -1058,6 +1062,15 @@
         AnimationMode["random"] = "random";
     })(exports.AnimationMode || (exports.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";
@@ -1323,6 +1336,29 @@
         }
     }
 
+    const defaultPeakNits = 400, minPeakNits = 0, toStringValue = (value) => String(value);
+    class HDROptions extends OptionLoader {
+        enable = true;
+        mode = exports.HdrMode.standard;
+        peakNits = defaultPeakNits;
+        doLoad(data) {
+            if (data.enable !== undefined && !isBoolean(data.enable)) {
+                throw new Error(`Invalid HDR "enable" value: expected a boolean, got "${String(data.enable)}"`);
+            }
+            if (data.mode !== undefined &&
+                (typeof data.mode !== "string" || !Object.values(exports.HdrMode).includes(data.mode))) {
+                throw new Error(`Invalid HDR "mode" value: expected one of ${Object.values(exports.HdrMode).join(", ")}, got "${toStringValue(data.mode)}"`);
+            }
+            if (data.peakNits !== undefined &&
+                (!isNumber(data.peakNits) || !Number.isFinite(data.peakNits) || data.peakNits <= minPeakNits)) {
+                throw new Error(`Invalid HDR "peakNits" value: expected a positive number, got "${String(data.peakNits)}"`);
+            }
+            loadProperty(this, "enable", data.enable);
+            loadProperty(this, "mode", data.mode);
+            loadProperty(this, "peakNits", data.peakNits);
+        }
+    }
+
     class ResizeEvent extends OptionLoader {
         delay = 0.5;
         enable = true;
@@ -1766,7 +1802,7 @@
         duration = 0;
         fpsLimit = 120;
         fullScreen;
-        hdr = true;
+        hdr;
         key;
         name;
         palette;
@@ -1786,6 +1822,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();
         }
@@ -1808,7 +1845,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 = exports.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);
@@ -1851,7 +1896,7 @@
         }
     }
 
-    const styleCache = new Map(), maxStyleCacheSize = 2000, rgbFixedPrecision = 2, hslFixedPrecision = 2, hdrRgbFixedPrecision = 4, hdrHslFixedPrecision = 4, sdrReferenceWhiteNits = 203, hdrAnimationScale = sdrReferenceWhiteNits / maxNits;
+    const styleCache = new Map(), maxStyleCacheSize = 2000, rgbFixedPrecision = 2, hslFixedPrecision = 2, hdrRgbFixedPrecision = 4, hdrHslFixedPrecision = 4, sdrReferenceWhiteNits = 203, acesA = 2.51, acesB = 0.03, acesC = 2.43, acesD = 0.59, acesE = 0.14, saturationBoost = 1.15, lightnessBoost = 1.05, temperatureR = 1.05, temperatureB = 0.95, contrastFactor = 1.1, luminanceR = 0.2126, luminanceG = 0.7152, luminanceB = 0.0722, dynamicLuminanceFactor = 2, channelCount = 3, srgbThreshold = 0.04045, srgbDivisor = 12.92, srgbOffset = 0.055, srgbScale = 1.055, srgbExponent = 2.4, linearThreshold = 0.0031308, linearScale = 12.92;
     function getCachedStyle(key, generator) {
         let cached = styleCache.get(key);
         if (!cached) {
@@ -1863,6 +1908,48 @@
         }
         return cached;
     }
+    function acesFilmic(x) {
+        return clamp((x * (acesA * x + acesB)) / (x * (acesC * x + acesD) + acesE), none, one);
+    }
+    function srgbToLinear(c) {
+        return c <= srgbThreshold ? c / srgbDivisor : Math.pow((c + srgbOffset) / srgbScale, srgbExponent);
+    }
+    function linearToSrgb(c) {
+        return c <= linearThreshold ? c * linearScale : srgbScale * Math.pow(c, one / srgbExponent) - srgbOffset;
+    }
+    function applyHdrModeAdjustments(r, g, b, mode, maxChannel) {
+        switch (mode) {
+            case exports.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 exports.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 exports.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 exports.HdrMode.standard:
+                return { b, g, r };
+            case exports.HdrMode.natural:
+            default:
+                return { b, g, r };
+        }
+    }
     function stringToRgba(pluginManager, input) {
         if (!input) {
             return;
@@ -2030,30 +2117,65 @@
             r: getRgbInRangeValue(),
         };
     }
-    function getStyleFromRgb(color, hdr, opacity) {
-        const rgbPrecision = hdr ? hdrRgbFixedPrecision : rgbFixedPrecision, op = opacity ?? defaultOpacity$3, 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$3, key = hdr
+            ? `rgb-${color.r.toFixed(rgbPrecision)}-${color.g.toFixed(rgbPrecision)}-${color.b.toFixed(rgbPrecision)}-hdr-${op.toString()}-${(peakNits ?? maxNits).toString()}-${mode ?? exports.HdrMode.standard}`
+            : `rgb-${color.r.toFixed(rgbPrecision)}-${color.g.toFixed(rgbPrecision)}-${color.b.toFixed(rgbPrecision)}-sdr-${op.toString()}`;
+        return getCachedStyle(key, () => hdr ? getHdrStyleFromRgb(color, opacity, peakNits, mode) : getSdrStyleFromRgb(color, opacity));
+    }
+    function getHdrStyleFromRgb(color, opacity, peakNits = maxNits, mode = exports.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$3).toString()})`;
+    }
+    function hdrToneMapColor(color, headroom, middleGray, mode) {
+        const rNorm = color.r / rgbMax, gNorm = color.g / rgbMax, bNorm = color.b / rgbMax;
+        if (mode !== exports.HdrMode.natural && mode !== exports.HdrMode.vivid && mode !== exports.HdrMode.cinematic && mode !== exports.HdrMode.dynamic) {
+            return { b: bNorm, g: gNorm, r: rNorm };
+        }
+        const maxChannel = Math.max(one, headroom), luminance = luminanceR * rNorm + luminanceG * gNorm + luminanceB * bNorm, mappedLuminance = hdrToneMap(luminance, headroom, middleGray), scale = luminance > none ? mappedLuminance / luminance : one;
+        return applyHdrModeAdjustments(clamp(rNorm * scale, none, maxChannel), clamp(gNorm * scale, none, maxChannel), clamp(bNorm * scale, none, maxChannel), mode, maxChannel);
     }
-    function getHdrStyleFromRgb(color, opacity, peakNits = maxNits) {
-        const headroom = peakNits / sdrReferenceWhiteNits;
-        return `color(display-p3 ${((color.r / rgbMax) * headroom).toString()} ${((color.g / rgbMax) * headroom).toString()} ${((color.b / rgbMax) * headroom).toString()} / ${(opacity ?? defaultOpacity$3).toString()})`;
+    function hdrToneMap(normalized, headroom, middleGray) {
+        if (normalized <= middleGray) {
+            return acesFilmic(normalized);
+        }
+        const expanded = normalized + (normalized - middleGray) * (headroom - one);
+        return acesFilmic(expanded);
     }
     function getSdrStyleFromRgb(color, opacity) {
         return `rgba(${color.r.toString()}, ${color.g.toString()}, ${color.b.toString()}, ${(opacity ?? defaultOpacity$3).toString()})`;
     }
-    function getStyleFromHsl(color, hdr, opacity) {
-        const hslPrecision = hdr ? hdrHslFixedPrecision : hslFixedPrecision, op = opacity ?? defaultOpacity$3, 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$3, key = hdr
+            ? `hsl-${color.h.toFixed(hslPrecision)}-${color.s.toFixed(hslPrecision)}-${color.l.toFixed(hslPrecision)}-hdr-${op.toString()}-${(peakNits ?? maxNits).toString()}-${mode ?? exports.HdrMode.standard}`
+            : `hsl-${color.h.toFixed(hslPrecision)}-${color.s.toFixed(hslPrecision)}-${color.l.toFixed(hslPrecision)}-sdr-${op.toString()}`;
         return getCachedStyle(key, () => hdr
-            ? getStyleFromRgb(hslToRgbFloat(color), true, opacity)
+            ? getStyleFromRgb(hslToRgbFloat(color), true, opacity, peakNits, mode)
             : `hsla(${color.h.toString()}, ${color.s.toString()}%, ${color.l.toString()}%, ${op.toString()})`);
     }
-    function colorMix(color1, color2, size1, size2) {
+    function colorMix(color1, color2, size1, size2, hdr) {
         let rgb1 = color1, rgb2 = color2;
         if (!("r" in rgb1)) {
-            rgb1 = hslToRgb(color1);
+            rgb1 = hdr ? hslToRgbFloat(color1) : hslToRgb(color1);
         }
         if (!("r" in rgb2)) {
-            rgb2 = hslToRgb(color2);
+            rgb2 = hdr ? hslToRgbFloat(color2) : hslToRgb(color2);
+        }
+        if (hdr) {
+            const lin1 = {
+                b: srgbToLinear(rgb1.b / rgbMax),
+                g: srgbToLinear(rgb1.g / rgbMax),
+                r: srgbToLinear(rgb1.r / rgbMax),
+            }, lin2 = {
+                b: srgbToLinear(rgb2.b / rgbMax),
+                g: srgbToLinear(rgb2.g / rgbMax),
+                r: srgbToLinear(rgb2.r / rgbMax),
+            }, totalWeight = size1 + size2;
+            return {
+                b: linearToSrgb((lin1.b * size1 + lin2.b * size2) / totalWeight) * rgbMax,
+                g: linearToSrgb((lin1.g * size1 + lin2.g * size2) / totalWeight) * rgbMax,
+                r: linearToSrgb((lin1.r * size1 + lin2.r * size2) / totalWeight) * rgbMax,
+            };
         }
         return {
             b: mix(rgb1.b, rgb2.b, size1, size2),
@@ -2061,14 +2183,14 @@
             r: mix(rgb1.r, rgb2.r, size1, size2),
         };
     }
-    function getLinkColor(p1, p2, linkColor) {
+    function getLinkColor(p1, p2, linkColor, hdr) {
         if (linkColor === randomColorValue) {
             return getRandomRgbColor();
         }
         else if (linkColor === midColorValue) {
             const sourceColor = p1.getFillColor() ?? p1.getStrokeColor(), destColor = p2?.getFillColor() ?? p2?.getStrokeColor();
             if (sourceColor && destColor && p2) {
-                return colorMix(sourceColor, destColor, p1.getRadius(), p2.getRadius());
+                return colorMix(sourceColor, destColor, p1.getRadius(), p2.getRadius(), hdr);
             }
             else {
                 const hslColor = sourceColor ?? destColor;
@@ -2164,7 +2286,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))) {
@@ -2177,7 +2299,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 === exports.AnimationStatus.increasing) {
             data.value += velocity;
             if (data.value > max) {
@@ -2209,9 +2331,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 {
@@ -2808,7 +2930,7 @@
     }
 
     async function loadInteractivityPlugin(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             const interactivityEngine = e, interactivityPluginManager = interactivityEngine.pluginManager;
             interactivityPluginManager.addPlugin(new InteractivityPlugin(interactivityPluginManager));
@@ -3048,7 +3170,7 @@
     }
 
     async function loadAbsorbersInteraction(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(async (e) => {
             const pluginManager = e.pluginManager, instancesManager = await getAbsorbersInstancesManager(e);
             ensureInteractivityPluginLoaded(e);
@@ -3096,7 +3218,7 @@
     }
 
     async function loadAbsorbersPluginSimple(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(async (e) => {
             const pluginManager = e.pluginManager, instancesManager = await getAbsorbersInstancesManager(e);
             pluginManager.addPlugin(new AbsorbersPlugin(instancesManager));
@@ -3422,7 +3544,7 @@
     }
 
     async function loadDestroyUpdater(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("destroy", container => {
                 return Promise.resolve(new DestroyUpdater(e.pluginManager, container));
@@ -3740,7 +3862,7 @@
     })(EmitterClickMode || (EmitterClickMode = {}));
 
     async function loadEmittersInteraction(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(async (e) => {
             const instancesManager = await getEmittersInstancesManager(e);
             ensureInteractivityPluginLoaded(e);
@@ -3783,7 +3905,7 @@
     }
 
     async function loadEmittersPluginSimple(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(async (e) => {
             const instancesManager = await getEmittersInstancesManager(e);
             await addEmittersShapesManager(e);
@@ -3840,7 +3962,7 @@
     }
 
     async function loadEmittersShapeCircle(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureEmittersPluginLoaded(e);
             e.pluginManager.addEmitterShapeGenerator?.("circle", new EmittersCircleShapeGenerator());
@@ -3921,7 +4043,7 @@
     }
 
     async function loadEmittersShapeSquare(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureEmittersPluginLoaded(e);
             e.pluginManager.addEmitterShapeGenerator?.("square", new EmittersSquareShapeGenerator());
@@ -4103,7 +4225,7 @@
     }
 
     async function loadExternalDragInteraction(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalDrag", container => {
@@ -4276,7 +4398,7 @@
     }
 
     async function loadExternalTrailInteraction(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalTrail", container => {
@@ -4412,7 +4534,7 @@
     }
 
     async function loadRollUpdater(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("roll", () => {
                 return Promise.resolve(new RollUpdater(e.pluginManager));
@@ -4458,7 +4580,7 @@
     }
 
     async function loadBlendPlugin(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new BlendPlugin());
         });
@@ -4495,7 +4617,7 @@
     }
 
     async function loadCircleShape(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["circle"], () => {
                 return Promise.resolve(new CircleDrawer());
@@ -4543,7 +4665,7 @@
     }
 
     async function loadHexColorPlugin(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hex", new HexColorManager());
         });
@@ -4596,7 +4718,7 @@
     }
 
     async function loadHslColorPlugin(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hsl", new HslColorManager());
         });
@@ -4620,7 +4742,7 @@
     }
 
     async function loadMovePlugin(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             const moveEngine = e, movePluginManager = moveEngine.pluginManager;
             movePluginManager.initializers.pathGenerators ??= new Map();
@@ -4836,7 +4958,7 @@
     }
 
     async function loadOpacityUpdater(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("opacity", container => {
                 return Promise.resolve(new OpacityUpdater(container));
@@ -5181,7 +5303,7 @@
     }
 
     async function loadOutModesUpdater(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("outModes", container => {
                 return Promise.resolve(new OutOfCanvasUpdater(container));
@@ -5252,7 +5374,7 @@
     }
 
     async function loadPaintUpdater(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("paint", container => {
                 return Promise.resolve(new PaintUpdater(e.pluginManager, container));
@@ -5307,7 +5429,7 @@
     }
 
     async function loadRgbColorPlugin(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("rgb", new RgbColorManager());
         });
@@ -5392,7 +5514,7 @@
     }
 
     async function loadSizeUpdater(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("size", container => {
                 return Promise.resolve(new SizeUpdater(container));
@@ -5401,7 +5523,7 @@
     }
 
     async function loadBasic(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(async (e) => {
             await Promise.all([
                 loadBlendPlugin(e),
@@ -5424,7 +5546,7 @@
     easingsFunctions.set("ease-in-out-quad", value => (value < 0.5 ? 2 * value ** 2 : 1 - (-2 * value + 2) ** 2 / 2));
 
     async function loadEasingQuadPlugin(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -5532,7 +5654,7 @@
     }
 
     async function loadEmojiShape(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(validTypes$1, () => Promise.resolve(new EmojiDrawer()));
         });
@@ -5765,7 +5887,7 @@
     };
 
     async function loadExternalAttractInteraction(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalAttract", container => {
@@ -5954,7 +6076,7 @@
     }
 
     async function loadExternalBounceInteraction(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalBounce", container => {
@@ -6241,7 +6363,7 @@
                 mod.strokeColor = undefined;
                 const pColor = particle.getFillColor();
                 if (pColor) {
-                    const mixedColor = rgbToHsl(colorMix(pColor, mod.finalColor, ratioOffset - ratio, ratio));
+                    const mixedColor = rgbToHsl(colorMix(pColor, mod.finalColor, ratioOffset - ratio, ratio, this.container.hdr));
                     mod.fillColor = mixedColor;
                     mod.strokeColor = mixedColor;
                 }
@@ -6354,7 +6476,7 @@
     }
 
     async function loadExternalBubbleInteraction(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalBubble", container => {
@@ -6393,10 +6515,10 @@
         if (!color1 || !color2) {
             return;
         }
-        const sourcePos = p1.getPosition(), destPos = p2.getPosition(), midRgb = colorMix(color1, color2, p1.getRadius(), p2.getRadius()), grad = context.createLinearGradient(sourcePos.x, sourcePos.y, destPos.x, destPos.y);
-        grad.addColorStop(gradientMin, getStyleFromHsl(color1, container.hdr, opacity));
-        grad.addColorStop(clamp(gradStop, gradientMin, gradientMax), getStyleFromRgb(midRgb, container.hdr, opacity));
-        grad.addColorStop(gradientMax, getStyleFromHsl(color2, container.hdr, opacity));
+        const sourcePos = p1.getPosition(), destPos = p2.getPosition(), midRgb = colorMix(color1, color2, p1.getRadius(), p2.getRadius(), container.hdr), grad = context.createLinearGradient(sourcePos.x, sourcePos.y, destPos.x, destPos.y);
+        grad.addColorStop(gradientMin, getStyleFromHsl(color1, container.hdr, opacity, container.peakNits, container.hdrMode));
+        grad.addColorStop(clamp(gradStop, gradientMin, gradientMax), getStyleFromRgb(midRgb, container.hdr, opacity, container.peakNits, container.hdrMode));
+        grad.addColorStop(gradientMax, getStyleFromHsl(color2, container.hdr, opacity, container.peakNits, container.hdrMode));
         return grad;
     }
     function drawConnectLine(context, width, lineStyle, begin, end) {
@@ -6482,7 +6604,7 @@
     }
 
     async function loadExternalConnectInteraction(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalConnect", container => {
@@ -6586,7 +6708,7 @@
     }
 
     async function loadExternalDestroyInteraction(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalDestroy", async (container) => {
@@ -6626,16 +6748,16 @@
     }
 
     const defaultWidth = 0;
-    function drawGrabLine(context, width, begin, end, colorLine, opacity, hdr = false) {
+    function drawGrabLine(context, width, begin, end, colorLine, opacity, hdr = false, peakNits, mode) {
         drawLine$1(context, begin, end);
-        context.strokeStyle = getStyleFromRgb(colorLine, hdr, opacity);
+        context.strokeStyle = getStyleFromRgb(colorLine, hdr, opacity, peakNits, mode);
         context.lineWidth = width;
         context.stroke();
     }
     function drawGrab(container, particle, lineColor, opacity, mousePos) {
         container.canvas.render.draw(ctx => {
             const beginPos = particle.getPosition();
-            drawGrabLine(ctx, particle.retina.linksWidth ?? defaultWidth, beginPos, mousePos, lineColor, opacity, container.hdr);
+            drawGrabLine(ctx, particle.retina.linksWidth ?? defaultWidth, beginPos, mousePos, lineColor, opacity, container.hdr, container.peakNits, container.hdrMode);
         });
     }
 
@@ -6691,7 +6813,7 @@
                     const linksOptions = interactivity.modes.grab.links;
                     container.particles.grabLineColor = getLinkRandomColor(this.#pluginManager, optColor, linksOptions.blink, linksOptions.consent);
                 }
-                const colorLine = getLinkColor(particle, undefined, container.particles.grabLineColor);
+                const colorLine = getLinkColor(particle, undefined, container.particles.grabLineColor, container.hdr);
                 if (!colorLine) {
                     continue;
                 }
@@ -6710,7 +6832,7 @@
     }
 
     async function loadExternalGrabInteraction(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalGrab", container => {
@@ -6780,7 +6902,7 @@
     }
 
     async function loadExternalParallaxInteraction(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalParallax", container => {
@@ -6823,7 +6945,7 @@
     }
 
     async function loadExternalPauseInteraction(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalPause", container => {
@@ -6895,7 +7017,7 @@
     }
 
     async function loadExternalPushInteraction(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalPush", container => {
@@ -6949,7 +7071,7 @@
     }
 
     async function loadExternalRemoveInteraction(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalRemove", container => {
@@ -7255,7 +7377,7 @@
     }
 
     async function loadExternalRepulseInteraction(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             const pluginManager = e.pluginManager;
@@ -7349,7 +7471,7 @@
     }
 
     async function loadExternalSlowInteraction(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalSlow", container => {
@@ -7361,12 +7483,12 @@
     const shapeTypes = ["image", "images"];
     const stringStart = 0, defaultOpacity = 1;
     const currentColorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;
-    function replaceColorSvg(imageShape, color, opacity, hdr = false) {
+    function replaceColorSvg(imageShape, color, opacity, hdr = false, peakNits, mode) {
         const { svgData } = imageShape;
         if (!svgData) {
             return "";
         }
-        const colorStyle = getStyleFromHsl(color, hdr, opacity);
+        const colorStyle = getStyleFromHsl(color, hdr, opacity, peakNits, mode);
         if (svgData.includes("fill")) {
             return svgData.replaceAll(currentColorRegex, () => colorStyle);
         }
@@ -7408,8 +7530,8 @@
         }
         image.loading = false;
     }
-    function replaceImageColor(image, imageData, color, particle, hdr = false) {
-        const svgColoredData = replaceColorSvg(image, color, particle.opacity?.value ?? defaultOpacity, hdr), imageRes = {
+    function replaceImageColor(image, imageData, color, particle, hdr = false, peakNits, mode) {
+        const svgColoredData = replaceColorSvg(image, color, particle.opacity?.value ?? defaultOpacity, hdr, peakNits, mode), imageRes = {
             color,
             data: {
                 ...image,
@@ -7521,7 +7643,7 @@
             void (async () => {
                 let imageRes;
                 if (image.svgData && color) {
-                    imageRes = await replaceImageColor(image, imageData, color, particle, container.hdr);
+                    imageRes = await replaceImageColor(image, imageData, color, particle, container.hdr, container.peakNits, container.hdrMode);
                 }
                 else {
                     imageRes = {
@@ -7658,7 +7780,7 @@
         };
     }
     async function loadImageShape(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             addLoadImageToEngine(e);
             e.pluginManager.addPlugin(new ImagePreloaderPlugin(e));
@@ -7803,7 +7925,7 @@
     }
 
     async function loadLifeUpdater(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("life", container => {
                 return Promise.resolve(new LifeUpdater(container));
@@ -7829,7 +7951,7 @@
     }
 
     async function loadLineShape(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["line"], () => Promise.resolve(new LineDrawer()));
         });
@@ -7913,7 +8035,7 @@
     }
 
     async function loadParticlesAttractInteraction(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("particlesAttract", container => {
@@ -8123,7 +8245,7 @@
     }
 
     async function loadParticlesCollisionsInteraction(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addPlugin(new OverlapPlugin());
@@ -8336,7 +8458,7 @@
             const linkColor = linksOptions.id !== undefined
                 ? container.particles.linksColors.get(linksOptions.id)
                 : container.particles.linksColor;
-            return getLinkColor(p1, p2, linkColor);
+            return getLinkColor(p1, p2, linkColor, container.hdr);
         }
         #setColor(p1) {
             if (!p1.options.links) {
@@ -8377,7 +8499,7 @@
     }
 
     async function loadParticlesLinksInteraction(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             const pluginManager = e.pluginManager;
             ensureInteractivityPluginLoaded(e);
@@ -8467,19 +8589,19 @@
     }
 
     async function loadGenericPolygonShape(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["polygon"], () => Promise.resolve(new PolygonDrawer()));
         });
     }
     async function loadTriangleShape(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["triangle"], () => Promise.resolve(new TriangleDrawer()));
         });
     }
     async function loadPolygonShape(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await Promise.all([
             loadGenericPolygonShape(engine),
             loadTriangleShape(engine),
@@ -8584,7 +8706,7 @@
     }
 
     async function loadRotateUpdater(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("rotate", container => {
                 return Promise.resolve(new RotateUpdater(container));
@@ -8608,7 +8730,7 @@
     }
 
     async function loadSquareShape(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["edge", "square"], () => Promise.resolve(new SquareDrawer()));
         });
@@ -8642,14 +8764,14 @@
     }
 
     async function loadStarShape(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["star"], () => Promise.resolve(new StarDrawer()));
         });
     }
 
     async function loadSlim(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(async (e) => {
             const loadInteractivityForSlim = async (e) => {
                 await loadInteractivityPlugin(e);
@@ -8766,7 +8888,7 @@
     }
 
     async function loadTextShape(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(validTypes, () => Promise.resolve(new TextDrawer()));
         });
@@ -8875,7 +8997,7 @@
     }
 
     async function loadTiltUpdater(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("tilt", container => {
                 return Promise.resolve(new TiltUpdater(container));
@@ -8951,12 +9073,12 @@
                 if (!twinkleFillRgb) {
                     return undefined;
                 }
-                return getStyleFromHsl(twinkleFillRgb, container.hdr, twinklingOpacity);
+                return getStyleFromHsl(twinkleFillRgb, container.hdr, twinklingOpacity, container.peakNits, container.hdrMode);
             }, getTwinkleStrokeStyle = () => {
                 if (!twinkleStrokeRgb) {
                     return undefined;
                 }
-                return getStyleFromHsl(twinkleStrokeRgb, container.hdr, twinklingOpacity);
+                return getStyleFromHsl(twinkleStrokeRgb, container.hdr, twinklingOpacity, container.peakNits, container.hdrMode);
             }, twinkleFillStyle = getTwinkleFillStyle(), twinkleStrokeStyle = getTwinkleStrokeStyle(), res = {}, needsTwinkle = twinkling && (!!twinkleFillStyle || !!twinkleStrokeStyle);
             res.fill = needsTwinkle ? twinkleFillStyle : undefined;
             res.stroke = needsTwinkle ? twinkleStrokeStyle : undefined;
@@ -8979,7 +9101,7 @@
     }
 
     async function loadTwinkleUpdater(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("twinkle", container => {
                 return Promise.resolve(new TwinkleUpdater(e.pluginManager, container));
@@ -9081,7 +9203,7 @@
     }
 
     async function loadWobbleUpdater(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("wobble", container => {
                 return Promise.resolve(new WobbleUpdater(container));
@@ -9090,7 +9212,7 @@
     }
 
     async function loadFull(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(async (e) => {
             const loadEmittersPluginBundle = async (e) => {
                 await loadEmittersPlugin(e);
@@ -9190,14 +9312,14 @@
     }
 
     async function loadResponsivePlugin(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new ResponsivePlugin());
         });
     }
 
     const initPjs = async (engine) => {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(async (e) => {
             await Promise.all([loadFull(e), loadResponsivePlugin(e)]);
         });
@@ -9329,7 +9451,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;
@@ -9663,7 +9789,9 @@
             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) {
@@ -9674,10 +9802,10 @@
                     }
                 }
             }
-            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;
             }
         }
@@ -9745,6 +9873,7 @@
         zoom = defaultZoom;
         #container;
         #generated;
+        #hdrMediaListeners;
         #mutationObserver;
         #originalStyle;
         #pluginManager;
@@ -9809,7 +9938,6 @@
             });
             this.resize();
             this.#initStyle();
-            this.initBackground();
             this.#safeMutationObserver(obs => {
                 const element = this.domElement;
                 if (!element || !(element instanceof Node)) {
@@ -9819,6 +9947,8 @@
             });
             this.initPlugins();
             this.#initContext();
+            this.initBackground();
+            this.#initHdrListeners();
             this.render.init();
         }
         initBackground() {
@@ -9828,7 +9958,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, hdrOptions.mode);
             }
             else {
                 elementStyle.backgroundColor = "";
@@ -9925,6 +10056,7 @@
                 obs.disconnect();
             });
             this.#mutationObserver = undefined;
+            this.#removeHdrListeners();
             this.render.stop();
         }
         async windowResize() {
@@ -9944,9 +10076,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.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,
@@ -9955,11 +10094,47 @@
                     ? { 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 = safeMatchMedia("(color-gamut: p3)"), hdrQuery = 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;
@@ -9983,6 +10158,25 @@
                 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) {
@@ -10367,9 +10561,9 @@
         }
         getOpacity() {
             const zIndexOptions = this.options.zIndex, zIndexFactor = zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, baseOpacity = getRangeValue(this.opacity?.value ?? defaultOpacity$3), modifierOpacity = this.#applyModifiers(undefined, m => m.opacity), opacity = modifierOpacity ?? baseOpacity, fillOpacity = this.fillOpacity ?? defaultOpacity$3, strokeOpacity = this.strokeOpacity ?? defaultOpacity$3;
-            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() {
@@ -11224,6 +11418,7 @@
         effectDrawers;
         fpsLimit;
         hdr;
+        hdrMode;
         id;
         pageHidden;
         particleCreatedPlugins;
@@ -11231,6 +11426,7 @@
         particlePositionPlugins;
         particleUpdaters;
         particles;
+        peakNits;
         plugins;
         retina;
         shapeDrawers;
@@ -11261,6 +11457,8 @@
             this.id = Symbol(id);
             this.fpsLimit = 120;
             this.hdr = false;
+            this.hdrMode = exports.HdrMode.standard;
+            this.peakNits = 400;
             this.#smooth = false;
             this.#delay = 0;
             this.#duration = 0;
@@ -11400,8 +11598,9 @@
             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 = getRangeValue(duration) * millisecondsToSeconds;
             this.#delay = getRangeValue(delay) * millisecondsToSeconds;
@@ -12820,10 +13019,10 @@
             }
         }
         #getCachedStyle(rgb) {
-            const key = `${rgb.r},${rgb.g},${rgb.b}`;
+            const key = `${rgb.r},${rgb.g},${rgb.b}-${this.#container.hdr}-${this.#container.peakNits}-${this.#container.hdrMode}`;
             let style = this.#colorCache.get(key);
             if (!style) {
-                style = getStyleFromRgb(rgb, this.#container.hdr);
+                style = getStyleFromRgb(rgb, this.#container.hdr, undefined, this.#container.peakNits, this.#container.hdrMode);
                 this.#colorCache.set(key, style);
             }
             return style;
@@ -12956,7 +13155,7 @@
             context.beginPath();
             context.arc(originPoint.x, originPoint.y, this.size, minAngle, maxAngle, false);
             context.closePath();
-            context.fillStyle = getStyleFromRgb(this.color, this.#container.hdr, this.opacity);
+            context.fillStyle = getStyleFromRgb(this.color, this.#container.hdr, this.opacity, this.#container.peakNits, this.#container.hdrMode);
             context.fill();
         }
         resize() {
@@ -13436,6 +13635,7 @@
     exports.ColorAnimation = ColorAnimation;
     exports.Fill = Fill;
     exports.FullScreen = FullScreen;
+    exports.HDROptions = HDROptions;
     exports.HslAnimation = HslAnimation;
     exports.Move = Move;
     exports.MoveAngle = MoveAngle;