@tsparticles/all 4.3.1 → 4.4.0

package/tsparticles.all.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.1 */
+/* tsParticles v4.4.0 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
     typeof define === 'function' && define.amd ? define(['exports'], factory) :
@@ -332,6 +332,9 @@
     })(exports.PixelMode || (exports.PixelMode = {}));
 
     const minRadius$7 = 0;
+    function isForbiddenKey(key) {
+        return key === "__proto__" || key === "constructor" || key === "prototype";
+    }
     function hasMatchMedia() {
         return typeof matchMedia !== "undefined";
     }
@@ -407,7 +410,7 @@
             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];
@@ -418,7 +421,7 @@
                 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];
@@ -877,7 +880,7 @@
             return this.#domArray;
         }
         get version() {
-            return "4.3.1";
+            return "4.4.0";
         }
         addEventListener(type, listener) {
             this.#eventDispatcher.addEventListener(type, listener);
@@ -958,6 +961,10 @@
     }
 
     function initEngine() {
+        const existing = globalThis.tsParticles;
+        if (existing?.pluginManager) {
+            return existing;
+        }
         return new Engine();
     }
 
@@ -1055,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";
@@ -1160,7 +1176,12 @@
     }
     function loadExtendProperty(obj, key, value) {
         if (value !== undefined) {
-            obj[key] = deepExtend(obj[key] ?? {}, value);
+            const keyStr = key;
+            if (keyStr === "__proto__" || keyStr === "constructor" || keyStr === "prototype") {
+                return;
+            }
+            const objRecord = obj, currentValue = Object.prototype.hasOwnProperty.call(objRecord, keyStr) ? objRecord[keyStr] : {};
+            objRecord[keyStr] = deepExtend(currentValue, value);
         }
     }
     function loadOptionProperty(obj, key, optionClass, ...sources) {
@@ -1315,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;
@@ -1758,7 +1802,7 @@
         duration = 0;
         fpsLimit = 120;
         fullScreen;
-        hdr = true;
+        hdr;
         key;
         name;
         palette;
@@ -1778,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();
         }
@@ -1800,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);
@@ -1843,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) {
@@ -1855,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;
@@ -2022,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),
@@ -2053,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;
@@ -2156,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))) {
@@ -2169,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) {
@@ -2201,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 {
@@ -2243,7 +2373,7 @@
     }
 
     async function loadArrowShape(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["arrow"], () => Promise.resolve(new ArrowDrawer()));
         });
@@ -2317,7 +2447,7 @@
     }
 
     async function loadBackgroundMaskPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new BackgroundMaskPlugin(e.pluginManager));
         });
@@ -2341,7 +2471,7 @@
     }
 
     async function loadMovePlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             const moveEngine = e, movePluginManager = moveEngine.pluginManager;
             movePluginManager.initializers.pathGenerators ??= new Map();
@@ -2442,7 +2572,7 @@
 
     const branchingPathName = "branchesPathGenerator";
     async function loadBranchesPath(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(branchingPathName, container => {
@@ -2491,7 +2621,7 @@
 
     const brownianPathName = "brownianPathGenerator";
     async function loadBrownianPath(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(brownianPathName, container => {
@@ -2513,7 +2643,7 @@
     }
 
     async function loadBubbleEffect(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addEffect("bubble", () => {
                 return Promise.resolve(new BubbleDrawer());
@@ -2683,7 +2813,7 @@
     }
 
     async function loadCanvasMaskPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new CanvasMaskPlugin());
         });
@@ -2972,7 +3102,7 @@
     }
 
     async function loadClubsSuitShape(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["club", "clubs"], () => Promise.resolve(new ClubDrawer()));
         });
@@ -2986,7 +3116,7 @@
     }
 
     async function loadDiamondsSuitShape(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["diamond", "diamonds"], () => Promise.resolve(new DiamondDrawer()));
         });
@@ -3000,7 +3130,7 @@
     };
 
     async function loadHeartsSuitShape(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["heart", "hearts"], () => Promise.resolve(new HeartDrawer$1()));
         });
@@ -3014,14 +3144,14 @@
     }
 
     async function loadSpadesSuitShape(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["spade", "spades"], () => Promise.resolve(new SpadeDrawer()));
         });
     }
 
     async function loadCardSuitsShape(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await Promise.all([
             loadClubsSuitShape(engine),
             loadDiamondsSuitShape(engine),
@@ -3031,18 +3161,18 @@
     }
 
     const cardWidthRatio = (double * double) / triple, cardHeightRatio = double, cornerRadiusRatio = 0.2, cornerFontRatio = 0.4, cornerSuitRatio = 0.3, centerSuitRatio = 0.7, cornerPaddingRatio = 0.2, textHorizontalOffsetRatio = 0.25, minRadius$6 = 0, minAngle$5 = 0, suitEdgeBufferFactor = 0.1, fixedCacheKey = 2, cardsCache = new Map(), redSuitColor = { r: 215, g: 20, b: 20 }, blackSuitColor = { r: 18, g: 18, b: 18 };
-    function drawRoundedCard(ctx, radius, cardData, hdr, flipped, canvasSettings) {
+    function drawRoundedCard(ctx, radius, cardData, hdr, flipped, canvasSettings, peakNits, mode) {
         if (flipped) {
             drawRoundedCardBack(ctx, radius);
         }
         else {
-            const cacheKey = getCacheKey(radius, hdr, cardData), cardWidth = radius * cardWidthRatio, cardHeight = radius * cardHeightRatio, halfWidth = cardWidth * half$2, halfHeight = cardHeight * half$2;
+            const cacheKey = getCacheKey(radius, hdr, cardData, peakNits, mode), cardWidth = radius * cardWidthRatio, cardHeight = radius * cardHeightRatio, halfWidth = cardWidth * half$2, halfHeight = cardHeight * half$2;
             let cachedData = cardsCache.get(cacheKey);
             if (!cachedData) {
                 const cacheCanvas = new OffscreenCanvas(cardWidth, cardHeight), cacheCtx = cacheCanvas.getContext("2d", canvasSettings);
                 if (cacheCtx) {
                     cacheCtx.translate(halfWidth, halfHeight);
-                    drawRoundedCardFront(cacheCtx, radius, cardData, hdr);
+                    drawRoundedCardFront(cacheCtx, radius, cardData, hdr, peakNits, mode);
                     cachedData = cacheCanvas instanceof HTMLCanvasElement ? cacheCanvas : cacheCanvas.transferToImageBitmap();
                     cardsCache.set(cacheKey, cachedData);
                 }
@@ -3051,23 +3181,25 @@
                 ctx.drawImage(cachedData, -halfWidth, -halfHeight, cardWidth, cardHeight);
             }
             else {
-                drawRoundedCardFront(ctx, radius, cardData, hdr);
+                drawRoundedCardFront(ctx, radius, cardData, hdr, peakNits, mode);
             }
         }
     }
-    function getCacheKey(radius, hdr, cardData) {
-        return `${radius.toFixed(fixedCacheKey)}-${hdr ? "hdr" : "sdr"}-${cardData.suit}-${cardData.value}`;
+    function getCacheKey(radius, hdr, cardData, peakNits, mode) {
+        return `${radius.toFixed(fixedCacheKey)}-${hdr ? "hdr" : "sdr"}-${peakNits !== undefined ? peakNits.toFixed(fixedCacheKey) : "default"}-${mode ?? "default"}-${cardData.suit}-${cardData.value}`;
     }
     function drawRoundedCardBack(ctx, radius) {
         drawCardBody(ctx, radius);
     }
-    function drawRoundedCardFront(ctx, radius, cardData, hdr) {
-        const { suit, value } = cardData, cardWidth = radius * cardWidthRatio, cardHeight = radius * cardHeightRatio, halfWidth = cardWidth * half$2, halfHeight = cardHeight * half$2, cornerPadding = radius * cornerPaddingRatio, cornerFontSize = radius * cornerFontRatio, cornerSuitSize = radius * cornerSuitRatio, centerSuitSize = radius * centerSuitRatio, textOffset = radius * textHorizontalOffsetRatio, suitEdgeBuffer = radius * suitEdgeBufferFactor, isRed = suit === SuitType.hearts || suit === SuitType.diamonds, color = isRed ? getStyleFromRgb(redSuitColor, hdr) : getStyleFromRgb(blackSuitColor, hdr);
+    function drawRoundedCardFront(ctx, radius, cardData, hdr, peakNits, mode) {
+        const { suit, value } = cardData, cardWidth = radius * cardWidthRatio, cardHeight = radius * cardHeightRatio, halfWidth = cardWidth * half$2, halfHeight = cardHeight * half$2, cornerPadding = radius * cornerPaddingRatio, cornerFontSize = radius * cornerFontRatio, cornerSuitSize = radius * cornerSuitRatio, centerSuitSize = radius * centerSuitRatio, textOffset = radius * textHorizontalOffsetRatio, suitEdgeBuffer = radius * suitEdgeBufferFactor, isRed = suit === SuitType.hearts || suit === SuitType.diamonds, color = isRed
+            ? getStyleFromRgb(redSuitColor, hdr, undefined, peakNits, mode)
+            : getStyleFromRgb(blackSuitColor, hdr, undefined, peakNits, mode);
         ctx.save();
         drawCardBody(ctx, radius);
-        ctx.fillStyle = getStyleFromRgb({ r: 255, g: 255, b: 255 }, hdr);
+        ctx.fillStyle = getStyleFromRgb({ r: 255, g: 255, b: 255 }, hdr, undefined, peakNits, mode);
         ctx.fill();
-        ctx.strokeStyle = getStyleFromRgb({ r: 0, g: 0, b: 0 }, hdr);
+        ctx.strokeStyle = getStyleFromRgb({ r: 0, g: 0, b: 0 }, hdr, undefined, peakNits, mode);
         ctx.stroke();
         ctx.fillStyle = color;
         ctx.font = `bold ${cornerFontSize.toString()}px Arial, serif`;
@@ -3129,7 +3261,7 @@
             }
             const defaultOpacity = context.globalAlpha, container = this.#container;
             context.globalAlpha = opacity;
-            drawRoundedCard(context, radius, particle.cardData, container.hdr, particle.isShowingBack(), container.canvas.render.settings);
+            drawRoundedCard(context, radius, particle.cardData, container.hdr, particle.isShowingBack(), container.canvas.render.settings, container.peakNits, container.hdrMode);
             context.globalAlpha = defaultOpacity;
         }
         particleInit(_container, particle) {
@@ -3142,14 +3274,14 @@
     }
 
     async function loadFullCardsShape(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["card"], container => Promise.resolve(new CardDrawer(container)));
         });
     }
 
     async function loadCardsShape(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await Promise.all([
             loadFullCardsShape(engine),
             loadCardSuitsShape(engine),
@@ -3219,7 +3351,7 @@
     }
 
     async function loadCogShape(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["cog"], () => Promise.resolve(new CogDrawer()));
         });
@@ -6859,7 +6991,7 @@
 
     const curlNoisePathName = "curlNoise";
     async function loadCurlNoisePath(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(curlNoisePathName, container => {
@@ -6962,7 +7094,7 @@
 
     const curvesPathName = "curvesPathGenerator";
     async function loadCurvesPath(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(curvesPathName, container => {
@@ -6988,7 +7120,7 @@
     });
 
     async function loadEasingBackPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$d) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -7019,7 +7151,7 @@
     easingsFunctions$c.set("ease-in-out-bounce", value => value < 0.5 ? (1 - bounceOut(1 - value * 2)) / 2 : (1 + bounceOut(value * 2 - 1)) / 2);
 
     async function loadEasingBouncePlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$c) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -7033,7 +7165,7 @@
     easingsFunctions$b.set("ease-in-out-circ", value => value < 0.5 ? (1 - Math.sqrt(1 - (2 * value) ** 2)) / 2 : (Math.sqrt(1 - (-2 * value + 2) ** 2) + 1) / 2);
 
     async function loadEasingCircPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$b) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -7047,7 +7179,7 @@
     easingsFunctions$a.set("ease-in-out-cubic", value => (value < 0.5 ? 4 * value ** 3 : 1 - (-2 * value + 2) ** 3 / 2));
 
     async function loadEasingCubicPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$a) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -7080,7 +7212,7 @@
     });
 
     async function loadEasingElasticPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$9) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -7104,7 +7236,7 @@
     });
 
     async function loadEasingExpoPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$8) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -7118,7 +7250,7 @@
     easingsFunctions$7.set("ease-in-out-gaussian", value => gaussian(value));
 
     async function loadEasingGaussianPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$7) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -7132,7 +7264,7 @@
     easingsFunctions$6.set("ease-in-out-linear", value => value);
 
     async function loadEasingLinearPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$6) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -7146,7 +7278,7 @@
     easingsFunctions$5.set("ease-in-out-quart", value => (value < 0.5 ? 8 * value ** 4 : 1 - (-2 * value + 2) ** 4 / 2));
 
     async function loadEasingQuartPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$5) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -7160,7 +7292,7 @@
     easingsFunctions$4.set("ease-in-out-quint", value => (value < 0.5 ? 16 * value ** 5 : 1 - (-2 * value + 2) ** 5 / 2));
 
     async function loadEasingQuintPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$4) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -7174,7 +7306,7 @@
     easingsFunctions$3.set("ease-in-out-sigmoid", value => sigmoid(value));
 
     async function loadEasingSigmoidPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$3) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -7188,7 +7320,7 @@
     easingsFunctions$2.set("ease-in-out-sine", value => -(Math.cos(Math.PI * value) - 1) / 2);
 
     async function loadEasingSinePlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$2) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -7202,7 +7334,7 @@
     easingsFunctions$1.set("ease-in-out-smoothstep", value => smoothstep$1(value));
 
     async function loadEasingSmoothstepPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$1) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -7441,7 +7573,7 @@
     }
 
     async function loadInteractivityPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             const interactivityEngine = e, interactivityPluginManager = interactivityEngine.pluginManager;
             interactivityPluginManager.addPlugin(new InteractivityPlugin(interactivityPluginManager));
@@ -7784,7 +7916,7 @@
     })(EmitterClickMode || (EmitterClickMode = {}));
 
     async function loadEmittersInteraction(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(async (e) => {
             const instancesManager = await getEmittersInstancesManager(e);
             ensureInteractivityPluginLoaded(e);
@@ -7827,7 +7959,7 @@
     }
 
     async function loadEmittersPluginSimple(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(async (e) => {
             const instancesManager = await getEmittersInstancesManager(e);
             await addEmittersShapesManager(e);
@@ -8167,7 +8299,7 @@
     }
 
     async function loadEmittersShapeCanvas(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureEmittersPluginLoaded(e);
             e.pluginManager.addEmitterShapeGenerator?.("canvas", new EmittersCanvasShapeGenerator());
@@ -8304,7 +8436,7 @@
     }
 
     async function loadEmittersShapePath(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureEmittersPluginLoaded(e);
             e.pluginManager.addEmitterShapeGenerator?.("path", new EmittersPathShapeGenerator());
@@ -8431,7 +8563,7 @@
     }
 
     async function loadEmittersShapePolygon(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureEmittersPluginLoaded(e);
             e.pluginManager.addEmitterShapeGenerator?.("polygon", new EmittersPolygonShapeGenerator());
@@ -8452,7 +8584,7 @@
     }
 
     async function loadExportImagePlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new ExportImagePlugin());
         });
@@ -8472,7 +8604,7 @@
     }
 
     async function loadExportJSONPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new ExportJSONPlugin());
         });
@@ -8492,7 +8624,7 @@
     }
 
     async function loadExportVideoPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new ExportVideoPlugin());
         });
@@ -8644,7 +8776,7 @@
     }
 
     async function loadExternalCannonInteraction(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalCannon", container => {
@@ -8773,7 +8905,7 @@
     }
 
     async function loadExternalParticleInteraction(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalParticle", container => {
@@ -8821,7 +8953,7 @@
     }
 
     async function loadExternalPopInteraction(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalPop", container => {
@@ -8862,7 +8994,7 @@
     }
 
     async function loadFilterEffect(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addEffect("filter", () => {
                 return Promise.resolve(new FilterDrawer());
@@ -9144,7 +9276,7 @@
 
     const fractalNoisePathName = "fractalNoise";
     async function loadFractalNoisePath(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(fractalNoisePathName, container => {
@@ -9360,7 +9492,7 @@
     }
 
     async function loadAbsorbersInteraction(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(async (e) => {
             const pluginManager = e.pluginManager, instancesManager = await getAbsorbersInstancesManager(e);
             ensureInteractivityPluginLoaded(e);
@@ -9408,7 +9540,7 @@
     }
 
     async function loadAbsorbersPluginSimple(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(async (e) => {
             const pluginManager = e.pluginManager, instancesManager = await getAbsorbersInstancesManager(e);
             pluginManager.addPlugin(new AbsorbersPlugin(instancesManager));
@@ -9734,7 +9866,7 @@
     }
 
     async function loadDestroyUpdater(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("destroy", container => {
                 return Promise.resolve(new DestroyUpdater(e.pluginManager, container));
@@ -9780,7 +9912,7 @@
     }
 
     async function loadEmittersShapeCircle(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureEmittersPluginLoaded(e);
             e.pluginManager.addEmitterShapeGenerator?.("circle", new EmittersCircleShapeGenerator());
@@ -9861,7 +9993,7 @@
     }
 
     async function loadEmittersShapeSquare(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureEmittersPluginLoaded(e);
             e.pluginManager.addEmitterShapeGenerator?.("square", new EmittersSquareShapeGenerator());
@@ -10043,7 +10175,7 @@
     }
 
     async function loadExternalDragInteraction(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalDrag", container => {
@@ -10216,7 +10348,7 @@
     }
 
     async function loadExternalTrailInteraction(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalTrail", container => {
@@ -10352,7 +10484,7 @@
     }
 
     async function loadRollUpdater(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("roll", () => {
                 return Promise.resolve(new RollUpdater(e.pluginManager));
@@ -10398,7 +10530,7 @@
     }
 
     async function loadBlendPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new BlendPlugin());
         });
@@ -10435,7 +10567,7 @@
     }
 
     async function loadCircleShape(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["circle"], () => {
                 return Promise.resolve(new CircleDrawer());
@@ -10483,7 +10615,7 @@
     }
 
     async function loadHexColorPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hex", new HexColorManager());
         });
@@ -10536,7 +10668,7 @@
     }
 
     async function loadHslColorPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hsl", new HslColorManager());
         });
@@ -10740,7 +10872,7 @@
     }
 
     async function loadOpacityUpdater(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("opacity", container => {
                 return Promise.resolve(new OpacityUpdater(container));
@@ -11085,7 +11217,7 @@
     }
 
     async function loadOutModesUpdater(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("outModes", container => {
                 return Promise.resolve(new OutOfCanvasUpdater(container));
@@ -11156,7 +11288,7 @@
     }
 
     async function loadPaintUpdater(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("paint", container => {
                 return Promise.resolve(new PaintUpdater(e.pluginManager, container));
@@ -11211,7 +11343,7 @@
     }
 
     async function loadRgbColorPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("rgb", new RgbColorManager());
         });
@@ -11296,7 +11428,7 @@
     }
 
     async function loadSizeUpdater(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("size", container => {
                 return Promise.resolve(new SizeUpdater(container));
@@ -11305,7 +11437,7 @@
     }
 
     async function loadBasic(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(async (e) => {
             await Promise.all([
                 loadBlendPlugin(e),
@@ -11328,7 +11460,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.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -11422,7 +11554,7 @@
     }
 
     async function loadEmojiShape(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(validTypes$1, () => Promise.resolve(new EmojiDrawer()));
         });
@@ -11655,7 +11787,7 @@
     };
 
     async function loadExternalAttractInteraction(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalAttract", container => {
@@ -11844,7 +11976,7 @@
     }
 
     async function loadExternalBounceInteraction(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalBounce", container => {
@@ -12131,7 +12263,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;
                 }
@@ -12244,7 +12376,7 @@
     }
 
     async function loadExternalBubbleInteraction(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalBubble", container => {
@@ -12283,10 +12415,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) {
@@ -12372,7 +12504,7 @@
     }
 
     async function loadExternalConnectInteraction(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalConnect", container => {
@@ -12476,7 +12608,7 @@
     }
 
     async function loadExternalDestroyInteraction(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalDestroy", async (container) => {
@@ -12516,16 +12648,16 @@
     }
 
     const defaultWidth$2 = 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$2, beginPos, mousePos, lineColor, opacity, container.hdr);
+            drawGrabLine(ctx, particle.retina.linksWidth ?? defaultWidth$2, beginPos, mousePos, lineColor, opacity, container.hdr, container.peakNits, container.hdrMode);
         });
     }
 
@@ -12581,7 +12713,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;
                 }
@@ -12600,7 +12732,7 @@
     }
 
     async function loadExternalGrabInteraction(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalGrab", container => {
@@ -12670,7 +12802,7 @@
     }
 
     async function loadExternalParallaxInteraction(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalParallax", container => {
@@ -12713,7 +12845,7 @@
     }
 
     async function loadExternalPauseInteraction(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalPause", container => {
@@ -12785,7 +12917,7 @@
     }
 
     async function loadExternalPushInteraction(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalPush", container => {
@@ -12839,7 +12971,7 @@
     }
 
     async function loadExternalRemoveInteraction(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalRemove", container => {
@@ -13145,7 +13277,7 @@
     };
 
     async function loadExternalRepulseInteraction(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             const pluginManager = e.pluginManager;
@@ -13239,7 +13371,7 @@
     }
 
     async function loadExternalSlowInteraction(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalSlow", container => {
@@ -13251,12 +13383,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);
         }
@@ -13298,8 +13430,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,
@@ -13411,7 +13543,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 = {
@@ -13548,7 +13680,7 @@
         };
     }
     async function loadImageShape(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             addLoadImageToEngine(e);
             e.pluginManager.addPlugin(new ImagePreloaderPlugin(e));
@@ -13693,7 +13825,7 @@
     }
 
     async function loadLifeUpdater(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("life", container => {
                 return Promise.resolve(new LifeUpdater(container));
@@ -13719,7 +13851,7 @@
     }
 
     async function loadLineShape(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["line"], () => Promise.resolve(new LineDrawer()));
         });
@@ -13803,7 +13935,7 @@
     }
 
     async function loadParticlesAttractInteraction(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("particlesAttract", container => {
@@ -14013,7 +14145,7 @@
     }
 
     async function loadParticlesCollisionsInteraction(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addPlugin(new OverlapPlugin());
@@ -14226,7 +14358,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) {
@@ -14267,7 +14399,7 @@
     }
 
     async function loadParticlesLinksInteraction(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             const pluginManager = e.pluginManager;
             ensureInteractivityPluginLoaded(e);
@@ -14357,19 +14489,19 @@
     }
 
     async function loadGenericPolygonShape(engine) {
-        engine.checkVersion("4.3.1");
+        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.1");
+        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.1");
+        engine.checkVersion("4.4.0");
         await Promise.all([
             loadGenericPolygonShape(engine),
             loadTriangleShape(engine),
@@ -14474,7 +14606,7 @@
     }
 
     async function loadRotateUpdater(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("rotate", container => {
                 return Promise.resolve(new RotateUpdater(container));
@@ -14498,7 +14630,7 @@
     }
 
     async function loadSquareShape(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["edge", "square"], () => Promise.resolve(new SquareDrawer()));
         });
@@ -14532,14 +14664,14 @@
     }
 
     async function loadStarShape(engine) {
-        engine.checkVersion("4.3.1");
+        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.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(async (e) => {
             const loadInteractivityForSlim = async (e) => {
                 await loadInteractivityPlugin(e);
@@ -14656,7 +14788,7 @@
     }
 
     async function loadTextShape(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(validTypes, () => Promise.resolve(new TextDrawer()));
         });
@@ -14765,7 +14897,7 @@
     }
 
     async function loadTiltUpdater(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("tilt", container => {
                 return Promise.resolve(new TiltUpdater(container));
@@ -14841,12 +14973,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;
@@ -14869,7 +15001,7 @@
     }
 
     async function loadTwinkleUpdater(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("twinkle", container => {
                 return Promise.resolve(new TwinkleUpdater(e.pluginManager, container));
@@ -14971,7 +15103,7 @@
     }
 
     async function loadWobbleUpdater(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("wobble", container => {
                 return Promise.resolve(new WobbleUpdater(container));
@@ -14980,7 +15112,7 @@
     }
 
     async function loadFull(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(async (e) => {
             const loadEmittersPluginBundle = async (e) => {
                 await loadEmittersPlugin(e);
@@ -15532,7 +15664,7 @@
     }
 
     async function loadGifShape(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["gif", "gifs"], container => Promise.resolve(new GifDrawer(container)));
         });
@@ -15655,7 +15787,7 @@
         }
         updateAnimation(particle, gradient.angle, false, exports.DestroyType.none, delta);
         for (const color of gradient.colors) {
-            updateColor(color.value, delta, hdr);
+            updateColor(color.value, delta);
             if (color.opacity) {
                 updateAnimation(particle, color.opacity, true, exports.DestroyType.none, delta);
             }
@@ -15683,7 +15815,7 @@
                     s: value.s.value,
                     l: value.l.value,
                 };
-                fillGradient.addColorStop(stop, getStyleFromHsl(hsl, container.hdr, cOpacity?.value ?? opacity));
+                fillGradient.addColorStop(stop, getStyleFromHsl(hsl, container.hdr, cOpacity?.value ?? opacity, container.peakNits, container.hdrMode));
             }
             return { fill: fillGradient };
         }
@@ -15792,7 +15924,7 @@
     }
 
     async function loadGradientUpdater(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("gradient", container => {
                 return Promise.resolve(new GradientUpdater(e.pluginManager, container));
@@ -15912,7 +16044,7 @@
 
     const gridPathName = "gridPathGenerator";
     async function loadGridPath(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(gridPathName, container => {
@@ -15941,7 +16073,7 @@
     }
 
     async function loadHeartShape(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["heart"], () => Promise.resolve(new HeartDrawer()));
         });
@@ -16057,7 +16189,7 @@
     }
 
     async function loadHsvColorPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hsv", new HsvColorManager());
         });
@@ -16142,7 +16274,7 @@
     }
 
     async function loadHwbColorPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hwb", new HwbColorManager());
         });
@@ -16290,7 +16422,7 @@
     }
 
     async function loadInfectionPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addPlugin(new InfectionPlugin());
@@ -16316,7 +16448,7 @@
     }
 
     async function loadInfinityShape(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["infinity"], () => Promise.resolve(new InfinityDrawer()));
         });
@@ -16417,7 +16549,7 @@
     }
 
     async function loadLabColorPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("lab", new LabColorManager());
         });
@@ -16518,7 +16650,7 @@
     }
 
     async function loadLchColorPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("lch", new LchColorManager());
         });
@@ -16572,7 +16704,7 @@
 
     const levyPathName = "levyPathGenerator";
     async function loadLevyPath(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(levyPathName, container => {
@@ -16597,8 +16729,8 @@
         if (!gradientRgb?.start || !gradientRgb.stop) {
             return;
         }
-        gradientAmbientLight.addColorStop(gradientPos.min, getStyleFromRgb(gradientRgb.start, container.hdr));
-        gradientAmbientLight.addColorStop(gradientPos.max, getStyleFromRgb(gradientRgb.stop, container.hdr));
+        gradientAmbientLight.addColorStop(gradientPos.min, getStyleFromRgb(gradientRgb.start, container.hdr, undefined, container.peakNits, container.hdrMode));
+        gradientAmbientLight.addColorStop(gradientPos.max, getStyleFromRgb(gradientRgb.stop, container.hdr, undefined, container.peakNits, container.hdrMode));
         context.fillStyle = gradientAmbientLight;
         context.fill();
     }
@@ -16629,7 +16761,7 @@
                 start: dot,
             });
         }
-        const shadowColor = getStyleFromRgb(shadowRgb, container.hdr), lastOffset = 1, firstPos = 0, last = points.length - lastOffset;
+        const shadowColor = getStyleFromRgb(shadowRgb, container.hdr, undefined, container.peakNits, container.hdrMode), lastOffset = 1, firstPos = 0, last = points.length - lastOffset;
         for (let i = last, n = 0; i >= firstPos; n = i--) {
             context.beginPath();
             const iPoint = points[i], nPoint = points[n];
@@ -16788,7 +16920,7 @@
     }
 
     async function loadLightInteraction(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalLight", container => {
@@ -16846,7 +16978,7 @@
     }
 
     async function loadManualParticlesPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new ManualParticlesPlugin());
         });
@@ -17067,7 +17199,7 @@
     }
 
     async function loadMatrixShape(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["matrix"], () => Promise.resolve(new MatrixDrawer()));
         });
@@ -17119,7 +17251,7 @@
     }
 
     async function loadMotionPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new MotionPlugin());
         });
@@ -17302,7 +17434,7 @@
     }
 
     async function loadNamedColorPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("named", new NamedColorManager());
         });
@@ -17398,7 +17530,7 @@
     }
 
     async function loadOklabColorPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("oklab", new OklabColorManager());
         });
@@ -17494,7 +17626,7 @@
     }
 
     async function loadOklchColorPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("oklch", new OklchColorManager());
         });
@@ -17547,7 +17679,7 @@
         }
         const pos = particle.getPosition();
         if (fillColorValue) {
-            context.strokeStyle = getStyleFromHsl(fillColorValue, container.hdr, opacity);
+            context.strokeStyle = getStyleFromHsl(fillColorValue, container.hdr, opacity, container.peakNits, container.hdrMode);
         }
         context.lineWidth = width;
         const rotationRadian = degToRad(rotation);
@@ -17629,7 +17761,7 @@
     }
 
     async function loadOrbitUpdater(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("orbit", container => {
                 return Promise.resolve(new OrbitUpdater(e.pluginManager, container));
@@ -17669,7 +17801,7 @@
     }
 
     async function loadParticlesEffect(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addEffect("particles", container => {
                 return Promise.resolve(new ParticlesDrawer(container));
@@ -17761,7 +17893,7 @@
     }
 
     async function loadParticlesRepulseInteraction(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("particlesRepulse", container => {
@@ -17788,7 +17920,7 @@
     }
 
     async function loadPathShape(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["path"], () => Promise.resolve(new PathDrawer()));
         });
@@ -18192,7 +18324,7 @@
 
     const perlinNoisePathName = "perlinNoise";
     async function loadPerlinNoisePath(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(perlinNoisePathName, container => {
@@ -18240,7 +18372,7 @@
     }
 
     async function loadPoissonDiscPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new PoissonDiscPlugin());
         });
@@ -18427,7 +18559,7 @@
     }
 
     async function loadPolygonMaskPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new PolygonMaskPlugin(e.pluginManager));
         });
@@ -18493,7 +18625,7 @@
 
     const polygonPathName = "polygonPathGenerator";
     async function loadPolygonPath(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(polygonPathName, container => {
@@ -18523,7 +18655,7 @@
 
     const randomPathName = "randomPathGenerator";
     async function loadRandomPath(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(randomPathName, () => {
@@ -18603,7 +18735,7 @@
     }
 
     async function loadResponsivePlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new ResponsivePlugin());
         });
@@ -18811,12 +18943,7 @@
             context.fill();
         }
     }
-    function drawRibbon(data, hdr) {
-        const { context, particle, radius } = data, points = particle.ribbonPoints, offsets = particle.ribbonOffsets, bounds = particle.ribbonBounds, hasFill = data.fill, hasStroke = data.stroke;
-        if (!points || !offsets || !bounds || points.length < minPointCount || (!hasFill && !hasStroke)) {
-            return;
-        }
-        const drawOffsets = offsets.mult(radius), center = particle.position, frontFill = typeof context.fillStyle === "string" ? context.fillStyle : "", frontStroke = typeof context.strokeStyle === "string" ? context.strokeStyle : "", shapeData = particle.shapeData;
+    function resolveBackFill(hasStroke, frontFill, frontStroke, shapeData, particle, hdr, peakNits, mode) {
         let backFill = hasStroke ? frontStroke : frontFill;
         if (shapeData?.backColor) {
             backFill = shapeData.backColor;
@@ -18825,16 +18952,68 @@
             const frontHsl = getHslFromAnimation(particle.fillColor);
             if (frontHsl) {
                 const altered = alterHsl(frontHsl, exports.AlterType.darken, getRangeValue(shapeData.darken.value));
-                backFill = getStyleFromHsl(altered, hdr);
+                backFill = getStyleFromHsl(altered, hdr, undefined, peakNits, mode);
             }
         }
         else if (shapeData?.enlighten?.enable) {
             const frontHsl = getHslFromAnimation(particle.fillColor);
             if (frontHsl) {
                 const altered = alterHsl(frontHsl, exports.AlterType.enlighten, getRangeValue(shapeData.enlighten.value));
-                backFill = getStyleFromHsl(altered, hdr);
+                backFill = getStyleFromHsl(altered, hdr, undefined, peakNits, mode);
             }
         }
+        return backFill;
+    }
+    function drawEdgeSegments(context, currentBase, nextBase, currentSide, nextSide, isFirst, isLast, hasFill, hasStroke) {
+        if (isFirst) {
+            drawPolygonSegment(context, {
+                a: currentBase,
+                b: nextBase,
+                c: getMidpoint(nextBase, nextSide),
+                fill: hasFill,
+                stroke: hasStroke,
+            });
+            drawPolygonSegment(context, {
+                a: nextSide,
+                b: currentSide,
+                c: getMidpoint(nextBase, nextSide),
+                fill: hasFill,
+                stroke: hasStroke,
+            });
+        }
+        else if (isLast) {
+            drawPolygonSegment(context, {
+                a: currentBase,
+                b: nextBase,
+                c: getMidpoint(currentBase, currentSide),
+                fill: hasFill,
+                stroke: hasStroke,
+            });
+            drawPolygonSegment(context, {
+                a: nextSide,
+                b: currentSide,
+                c: getMidpoint(currentBase, currentSide),
+                fill: hasFill,
+                stroke: hasStroke,
+            });
+        }
+        else {
+            drawPolygonSegment(context, {
+                a: currentBase,
+                b: nextBase,
+                c: nextSide,
+                d: currentSide,
+                fill: hasFill,
+                stroke: hasStroke,
+            });
+        }
+    }
+    function drawRibbon(data, hdr, peakNits, mode) {
+        const { context, particle, radius } = data, points = particle.ribbonPoints, offsets = particle.ribbonOffsets, bounds = particle.ribbonBounds, hasFill = data.fill, hasStroke = data.stroke;
+        if (!points || !offsets || !bounds || points.length < minPointCount || (!hasFill && !hasStroke)) {
+            return;
+        }
+        const drawOffsets = offsets.mult(radius), center = particle.position, frontFill = typeof context.fillStyle === "string" ? context.fillStyle : "", frontStroke = typeof context.strokeStyle === "string" ? context.strokeStyle : "", shapeData = particle.shapeData, backFill = resolveBackFill(hasStroke, frontFill, frontStroke, shapeData, particle, hdr, peakNits, mode);
         context.lineWidth = lineWidth;
         context.lineJoin = "round";
         context.lineCap = "round";
@@ -18852,46 +19031,13 @@
                 context.strokeStyle = segmentStyle;
             }
             if (i === noPoint) {
-                drawPolygonSegment(context, {
-                    a: currentBase,
-                    b: nextBase,
-                    c: getMidpoint(nextBase, nextSide),
-                    fill: hasFill,
-                    stroke: hasStroke,
-                });
-                drawPolygonSegment(context, {
-                    a: nextSide,
-                    b: currentSide,
-                    c: getMidpoint(nextBase, nextSide),
-                    fill: hasFill,
-                    stroke: hasStroke,
-                });
+                drawEdgeSegments(context, currentBase, nextBase, currentSide, nextSide, true, false, hasFill, hasStroke);
             }
             else if (i === points.length - secondPoint) {
-                drawPolygonSegment(context, {
-                    a: currentBase,
-                    b: nextBase,
-                    c: getMidpoint(currentBase, currentSide),
-                    fill: hasFill,
-                    stroke: hasStroke,
-                });
-                drawPolygonSegment(context, {
-                    a: nextSide,
-                    b: currentSide,
-                    c: getMidpoint(currentBase, currentSide),
-                    fill: hasFill,
-                    stroke: hasStroke,
-                });
+                drawEdgeSegments(context, currentBase, nextBase, currentSide, nextSide, false, true, hasFill, hasStroke);
             }
             else {
-                drawPolygonSegment(context, {
-                    a: currentBase,
-                    b: nextBase,
-                    c: nextSide,
-                    d: currentSide,
-                    fill: hasFill,
-                    stroke: hasStroke,
-                });
+                drawEdgeSegments(context, currentBase, nextBase, currentSide, nextSide, false, false, hasFill, hasStroke);
             }
         }
         context.fillStyle = frontFill;
@@ -18939,7 +19085,7 @@
                 createRibbonState(data.particle);
             }
             updateRibbon(data);
-            drawRibbon(data, this.#container.hdr);
+            drawRibbon(data, this.#container.hdr, this.#container.peakNits, this.#container.hdrMode);
         }
         getSidesCount(particle) {
             const pointsLen = particle.ribbonPoints?.length;
@@ -19001,7 +19147,7 @@
     }
 
     async function loadRibbonShape(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["ribbon"], (container) => Promise.resolve(new RibbonDrawer(container)));
         });
@@ -19050,7 +19196,7 @@
     }
 
     async function loadRoundedPolygonShape(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["rounded-polygon"], () => Promise.resolve(new RoundedPolygonDrawer()));
         });
@@ -19097,7 +19243,7 @@
     }
 
     async function loadRoundedRectShape(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["rounded-rect"], () => Promise.resolve(new RoundedRectDrawer()));
         });
@@ -19255,7 +19401,7 @@
 
     const svgPathName = "svgPathGenerator";
     async function loadSVGPath(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(svgPathName, container => {
@@ -19283,7 +19429,7 @@
             }
             context.save();
             context.shadowBlur = shadowParticle.shadowBlur ?? defaultShadowBlur;
-            context.shadowColor = getStyleFromRgb(shadowColor, container.hdr);
+            context.shadowColor = getStyleFromRgb(shadowColor, container.hdr, undefined, container.peakNits, container.hdrMode);
             context.shadowOffsetX = shadowOffset?.x ?? defaultShadowOffsetValue;
             context.shadowOffsetY = shadowOffset?.y ?? defaultShadowOffsetValue;
         }
@@ -19296,7 +19442,7 @@
     }
 
     async function loadShadowEffect(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addEffect("shadow", container => {
                 return Promise.resolve(new ShadowDrawer(e.pluginManager, container));
@@ -19318,7 +19464,7 @@
 
     const simplexNoisePathName = "simplexNoise";
     async function loadSimplexNoisePath(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(simplexNoisePathName, container => {
@@ -19635,7 +19781,7 @@
     }
 
     async function loadSoundsPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new SoundsPlugin(e));
         });
@@ -19704,7 +19850,7 @@
 
     const spiralPathName = "spiralPathGenerator";
     async function loadSpiralPath(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(spiralPathName, container => {
@@ -19744,7 +19890,7 @@
     }
 
     async function loadSpiralShape(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["spiral"], () => Promise.resolve(new SpiralDrawer()));
         });
@@ -19788,7 +19934,7 @@
     }
 
     async function loadSquircleShape(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["squircle"], () => Promise.resolve(new SquircleDrawer()));
         });
@@ -19892,7 +20038,7 @@
     }
 
     async function loadThemesPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new ThemesPlugin());
         });
@@ -20008,7 +20154,7 @@
     }
 
     async function loadTrailEffect(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addEffect("trail", container => {
                 return Promise.resolve(new TrailDrawer(container));
@@ -20072,7 +20218,7 @@
     }
 
     async function loadTrailPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new TrailPlugin(e.pluginManager));
         });
@@ -20121,7 +20267,7 @@
 
     const zigZagPathName = "zigZagPathGenerator";
     async function loadZigZagPath(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(zigZagPathName, container => {
@@ -20178,14 +20324,14 @@
     }
 
     async function loadZoomPlugin(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new ZoomPlugin());
         });
     }
 
     async function loadAll(engine) {
-        engine.checkVersion("4.3.1");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(async (e) => {
             const loadInteractionsForAll = async (e) => {
                 await loadFull(e);
@@ -20397,7 +20543,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;
@@ -20731,7 +20881,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) {
@@ -20742,10 +20894,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;
             }
         }
@@ -20813,6 +20965,7 @@
         zoom = defaultZoom;
         #container;
         #generated;
+        #hdrMediaListeners;
         #mutationObserver;
         #originalStyle;
         #pluginManager;
@@ -20877,7 +21030,6 @@
             });
             this.resize();
             this.#initStyle();
-            this.initBackground();
             this.#safeMutationObserver(obs => {
                 const element = this.domElement;
                 if (!element || !(element instanceof Node)) {
@@ -20887,6 +21039,8 @@
             });
             this.initPlugins();
             this.#initContext();
+            this.initBackground();
+            this.#initHdrListeners();
             this.render.init();
         }
         initBackground() {
@@ -20896,7 +21050,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 = "";
@@ -20993,6 +21148,7 @@
                 obs.disconnect();
             });
             this.#mutationObserver = undefined;
+            this.#removeHdrListeners();
             this.render.stop();
         }
         async windowResize() {
@@ -21012,9 +21168,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,
@@ -21023,11 +21186,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(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 });
             }
-            this.render.setContext(renderCanvas.getContext("2d", this.render.settings));
+            if (hdrQuery) {
+                hdrQuery.addEventListener("change", handleChange);
+                listeners.push({ handler: handleChange, mql: hdrQuery });
+            }
+            this.#hdrMediaListeners = listeners;
         }
         #initStyle() {
             const element = this.domElement, options = this.#container.actualOptions;
@@ -21051,6 +21250,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) {
@@ -21435,9 +21653,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() {
@@ -22292,6 +22510,7 @@
         effectDrawers;
         fpsLimit;
         hdr;
+        hdrMode;
         id;
         pageHidden;
         particleCreatedPlugins;
@@ -22299,6 +22518,7 @@
         particlePositionPlugins;
         particleUpdaters;
         particles;
+        peakNits;
         plugins;
         retina;
         shapeDrawers;
@@ -22329,6 +22549,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;
@@ -22468,8 +22690,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$1;
             this.#delay = getRangeValue(delay) * millisecondsToSeconds$1;
@@ -22730,7 +22953,7 @@
                         ...coverRgb,
                         a: cover.opacity,
                     };
-                    this.#coverColorStyle = getStyleFromRgb(coverColor, this.#container.hdr, coverColor.a);
+                    this.#coverColorStyle = getStyleFromRgb(coverColor, this.#container.hdr, coverColor.a, this.#container.peakNits, this.#container.hdrMode);
                 }
             }
             else if (cover?.image) {
@@ -24312,10 +24535,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;
@@ -26104,7 +26327,7 @@
         min: 0,
         max: 1,
     };
-    function drawPolygonMask(pluginManager, context, rawData, stroke, hdr = false) {
+    function drawPolygonMask(pluginManager, context, rawData, stroke, hdr = false, peakNits, mode) {
         const color = rangeColorToRgb(pluginManager, stroke.color);
         if (!color) {
             return;
@@ -26119,11 +26342,11 @@
             context.lineTo(item.x, item.y);
         }
         context.closePath();
-        context.strokeStyle = getStyleFromRgb(color, hdr);
+        context.strokeStyle = getStyleFromRgb(color, hdr, undefined, peakNits, mode);
         context.lineWidth = stroke.width;
         context.stroke();
     }
-    function drawPolygonMaskPath(pluginManager, context, path, stroke, position, hdr = false) {
+    function drawPolygonMaskPath(pluginManager, context, path, stroke, position, hdr = false, peakNits, mode) {
         const defaultTransform = {
             a: 1,
             b: 0,
@@ -26135,7 +26358,7 @@
         if (!color) {
             return;
         }
-        context.strokeStyle = getStyleFromRgb(color, hdr, stroke.opacity);
+        context.strokeStyle = getStyleFromRgb(color, hdr, stroke.opacity, peakNits, mode);
         context.lineWidth = stroke.width;
         context.stroke(path);
         context.resetTransform();
@@ -26266,10 +26489,10 @@
             for (const path of this.paths) {
                 const path2d = path.path2d;
                 if (path2d && this.offset) {
-                    drawPolygonMaskPath(this.#pluginManager, context, path2d, polygonDraw.stroke, this.offset, this.#container.hdr);
+                    drawPolygonMaskPath(this.#pluginManager, context, path2d, polygonDraw.stroke, this.offset, this.#container.hdr, this.#container.peakNits, this.#container.hdrMode);
                 }
                 else if (rawData) {
-                    drawPolygonMask(this.#pluginManager, context, rawData, polygonDraw.stroke, this.#container.hdr);
+                    drawPolygonMask(this.#pluginManager, context, rawData, polygonDraw.stroke, this.#container.hdr, this.#container.peakNits, this.#container.hdrMode);
                 }
             }
         }
@@ -27187,7 +27410,7 @@
             let handled = false;
             const canvas = container.canvas;
             if (trailFill.color) {
-                canvas.render.paintBase(getStyleFromRgb(trailFill.color, container.hdr, trailFill.opacity));
+                canvas.render.paintBase(getStyleFromRgb(trailFill.color, container.hdr, trailFill.opacity, container.peakNits, container.hdrMode));
                 handled = true;
             }
             else if (trailFill.image) {
@@ -27934,7 +28157,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() {
@@ -28232,6 +28455,7 @@
     exports.ColorAnimation = ColorAnimation;
     exports.Fill = Fill;
     exports.FullScreen = FullScreen;
+    exports.HDROptions = HDROptions;
     exports.HslAnimation = HslAnimation;
     exports.Move = Move;
     exports.MoveAngle = MoveAngle;