@tsparticles/plugin-oklch-color 3.9.1 → 4.0.0-alpha.1

package/599.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see 599.min.js.LICENSE.txt */
+(this.webpackChunk_tsparticles_plugin_oklch_color=this.webpackChunk_tsparticles_plugin_oklch_color||[]).push([[599],{599(a,e,t){t.d(e,{OklchColorManager:()=>O});var s=t(303);const c={L:1,a:.3963377774,b:.2158037573},r={L:1,a:-.1055613458,b:-.0638541728},l={L:1,a:-.0894841775,b:-1.291485548},n={l:4.0767416621,m:-3.3077115913,s:.2309699292},o={l:-1.2684380046,m:2.6097574011,s:-.3413193965},h={l:-.0041960863,m:-.7034186147,s:1.707614701},u=2.4,i=.0031308,p=12.92,b=1.055,d=.055;function g(a){const e=a.l/s.percentDenominator,t=a.c/s.percentDenominator,g=(0,s.degToRad)(a.h),k=t*Math.cos(g),O=t*Math.sin(g),m=(c.L*e+c.a*k+c.b*O)**3,v=(r.L*e+r.a*k+r.b*O)**3,w=(l.L*e+l.a*k+l.b*O)**3,_=n.l*m+n.m*v+n.s*w,j=o.l*m+o.m*v+o.s*w,L=h.l*m+h.m*v+h.s*w,M=a=>{return Math.round((0,s.clamp)((e=a)<=i?p*e:b*Math.pow(e,s.inverseFactorNumerator/u)-d,0,1)*s.rgbMax);var e};return{r:M(_),g:M(j),b:M(L)}}const k=/oklch\(\s*(\d+(\.\d+)?)%\s+(\d+(\.\d+)?)\s+(\d+(\.\d+)?)(°)?(?:\s*\/\s*(0|1|0?\.\d+|\d{1,3}%))?\s*\)/i;class O{constructor(){this.key="oklch"}accepts(a){return a.startsWith("oklch")}handleColor(a){const e=a.value.oklch??a.value;if(Object.hasOwn(e,"l")||Object.hasOwn(e,"c")||Object.hasOwn(e,"h"))return g(e)}handleRangeColor(a){const e=a.value.oklch??a.value;if(Object.hasOwn(e,"l")||Object.hasOwn(e,"c")||Object.hasOwn(e,"h"))return g({l:(0,s.getRangeValue)(e.l),c:(0,s.getRangeValue)(e.c),h:(0,s.getRangeValue)(e.h)})}parseString(a){if(!this.accepts(a))return;const e=k.exec(a),t=1,c=3,r=5,l=7;return e?{a:(n={a:e[l]?(0,s.parseAlpha)(e[l]):1,c:parseFloat(e[c]??"0"),h:parseFloat(e[r]??"0"),l:parseFloat(e[t]??"0")}).a,...g(n)}:void 0;var n}}}}]);

package/599.min.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! tsParticles OKLCH Color Plugin v4.0.0-alpha.1 by Matteo Bruni */

package/browser/OklchColorManager.js

@@ -1,32 +1,36 @@
 import { getRangeValue, parseAlpha, } from "@tsparticles/engine";
 import { oklchToRgb, oklchaToRgba } from "./utils.js";
+const oklchRegex = /oklch\(\s*(\d+(\.\d+)?)%\s+(\d+(\.\d+)?)\s+(\d+(\.\d+)?)(°)?(?:\s*\/\s*(0|1|0?\.\d+|\d{1,3}%))?\s*\)/i;
 export class OklchColorManager {
     constructor() {
         this.key = "oklch";
-        this.stringPrefix = "oklch";
+    }
+    accepts(input) {
+        return input.startsWith("oklch");
     }
     handleColor(color) {
         const colorValue = color.value, oklchColor = colorValue.oklch ?? color.value;
-        if (oklchColor.l !== undefined && oklchColor.c !== undefined && oklchColor.h !== undefined) {
-            return oklchToRgb(oklchColor);
+        if (!Object.hasOwn(oklchColor, "l") && !Object.hasOwn(oklchColor, "c") && !Object.hasOwn(oklchColor, "h")) {
+            return;
         }
+        return oklchToRgb(oklchColor);
     }
     handleRangeColor(color) {
         const colorValue = color.value, oklchColor = colorValue.oklch ?? color.value;
-        if (oklchColor.l !== undefined && oklchColor.c !== undefined && oklchColor.h !== undefined) {
-            return oklchToRgb({
-                l: getRangeValue(oklchColor.l),
-                c: getRangeValue(oklchColor.c),
-                h: getRangeValue(oklchColor.h),
-            });
+        if (!Object.hasOwn(oklchColor, "l") && !Object.hasOwn(oklchColor, "c") && !Object.hasOwn(oklchColor, "h")) {
+            return;
         }
+        return oklchToRgb({
+            l: getRangeValue(oklchColor.l),
+            c: getRangeValue(oklchColor.c),
+            h: getRangeValue(oklchColor.h),
+        });
     }
     parseString(input) {
-        const isOklch = input.startsWith("oklch");
-        if (!isOklch) {
+        if (!this.accepts(input)) {
             return;
         }
-        const regex = /oklch\(\s*(\d+(\.\d+)?)%\s+(\d+(\.\d+)?)\s+(\d+(\.\d+)?)(°)?(?:\s*\/\s*(0|1|0?\.\d+|\d{1,3}%))?\s*\)/i, result = regex.exec(input), indexes = {
+        const result = oklchRegex.exec(input), indexes = {
             l: 1,
             c: 3,
             h: 5,
@@ -35,9 +39,9 @@ export class OklchColorManager {
         return result
             ? oklchaToRgba({
                 a: result[indexes.a] ? parseAlpha(result[indexes.a]) : defaultAlpha,
-                c: parseFloat(result[indexes.c]),
-                h: parseFloat(result[indexes.h]),
-                l: parseFloat(result[indexes.l]),
+                c: parseFloat(result[indexes.c] ?? "0"),
+                h: parseFloat(result[indexes.h] ?? "0"),
+                l: parseFloat(result[indexes.l] ?? "0"),
             })
             : undefined;
     }

package/browser/index.js

@@ -1,7 +1,7 @@
-import { LchColorManager } from "./LchColorManager.js";
-import { OklchColorManager } from "./OklchColorManager.js";
-export async function loadOklchColorPlugin(engine, refresh = true) {
-    engine.checkVersion("3.9.1");
-    await engine.addColorManager(new OklchColorManager(), refresh);
-    await engine.addColorManager(new LchColorManager(), refresh);
+export function loadOklchColorPlugin(engine) {
+    engine.checkVersion("4.0.0-alpha.1");
+    engine.register(async (e) => {
+        const { OklchColorManager } = await import("./OklchColorManager.js");
+        e.addColorManager(new OklchColorManager());
+    });
 }

package/browser/utils.js

@@ -1,25 +1,29 @@
-import { percentDenominator, } from "@tsparticles/engine";
-const rgbFactor = 255, fullDegree = 360;
-export function lchToRgb(lch) {
-    const l = lch.l / percentDenominator, c = lch.c, h = lch.h / fullDegree, result = { r: 0, g: 0, b: 0 };
-    result.r = Math.floor(l * rgbFactor);
-    result.g = Math.floor(c * rgbFactor);
-    result.b = Math.floor(h * rgbFactor);
-    return result;
-}
-export function lchaToRgba(lcha) {
+import { clamp, degToRad, inverseFactorNumerator, percentDenominator, rgbMax, } from "@tsparticles/engine";
+const OKLAB_LMS = {
+    l: { L: 1, a: 0.3963377774, b: 0.2158037573 },
+    m: { L: 1, a: -0.1055613458, b: -0.0638541728 },
+    s: { L: 1, a: -0.0894841775, b: -1.291485548 },
+}, LMS_TO_LINEAR_RGB = {
+    r: { l: 4.0767416621, m: -3.3077115913, s: 0.2309699292 },
+    g: { l: -1.2684380046, m: 2.6097574011, s: -0.3413193965 },
+    b: { l: -0.0041960863, m: -0.7034186147, s: 1.707614701 },
+}, SRGB = {
+    GAMMA: 2.4,
+    LINEAR_THRESHOLD: 0.0031308,
+    LINEAR_SCALE: 12.92,
+    SCALE: 1.055,
+    OFFSET: 0.055,
+}, minSrgbValue = 0, maxSrgbValue = 1;
+export function oklchToRgb(oklch) {
+    const L = oklch.l / percentDenominator, C = oklch.c / percentDenominator, hRad = degToRad(oklch.h), a = C * Math.cos(hRad), b = C * Math.sin(hRad), l_ = OKLAB_LMS.l.L * L + OKLAB_LMS.l.a * a + OKLAB_LMS.l.b * b, m_ = OKLAB_LMS.m.L * L + OKLAB_LMS.m.a * a + OKLAB_LMS.m.b * b, s_ = OKLAB_LMS.s.L * L + OKLAB_LMS.s.a * a + OKLAB_LMS.s.b * b, cubic = 3, l = l_ ** cubic, m = m_ ** cubic, s = s_ ** cubic, rLinear = LMS_TO_LINEAR_RGB.r.l * l + LMS_TO_LINEAR_RGB.r.m * m + LMS_TO_LINEAR_RGB.r.s * s, gLinear = LMS_TO_LINEAR_RGB.g.l * l + LMS_TO_LINEAR_RGB.g.m * m + LMS_TO_LINEAR_RGB.g.s * s, bLinear = LMS_TO_LINEAR_RGB.b.l * l + LMS_TO_LINEAR_RGB.b.m * m + LMS_TO_LINEAR_RGB.b.s * s, toSrgb = (x) => x <= SRGB.LINEAR_THRESHOLD
+        ? SRGB.LINEAR_SCALE * x
+        : SRGB.SCALE * Math.pow(x, inverseFactorNumerator / SRGB.GAMMA) - SRGB.OFFSET, toSrgbFixed = num => Math.round(clamp(toSrgb(num), minSrgbValue, maxSrgbValue) * rgbMax);
     return {
-        a: lcha.a,
-        ...lchToRgb(lcha),
+        r: toSrgbFixed(rLinear),
+        g: toSrgbFixed(gLinear),
+        b: toSrgbFixed(bLinear),
     };
 }
-export function oklchToRgb(oklch) {
-    const l = oklch.l / percentDenominator, c = oklch.c / percentDenominator, h = oklch.h / fullDegree, result = { r: 0, g: 0, b: 0 };
-    result.r = Math.floor(l * rgbFactor);
-    result.g = Math.floor(c * rgbFactor);
-    result.b = Math.floor(h * rgbFactor);
-    return result;
-}
 export function oklchaToRgba(oklcha) {
     return {
         a: oklcha.a,
@@ -27,6 +31,6 @@ export function oklchaToRgba(oklcha) {
     };
 }
 export function getStyleFromOklch(color, opacity) {
-    const { l, c, h } = color, alpha = opacity !== undefined ? `, ${opacity}` : "";
-    return `oklch(${l}%, ${c}%, ${h}°${alpha})`;
+    const { l, c, h } = color, alpha = opacity !== undefined ? ` / ${opacity.toString()}` : "";
+    return `oklch(${l.toString()}% ${c.toString()}% ${h.toString()}°${alpha})`;
 }

package/cjs/OklchColorManager.js

@@ -1,48 +1,48 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.OklchColorManager = void 0;
-const engine_1 = require("@tsparticles/engine");
-const utils_js_1 = require("./utils.js");
-class OklchColorManager {
+import { getRangeValue, parseAlpha, } from "@tsparticles/engine";
+import { oklchToRgb, oklchaToRgba } from "./utils.js";
+const oklchRegex = /oklch\(\s*(\d+(\.\d+)?)%\s+(\d+(\.\d+)?)\s+(\d+(\.\d+)?)(°)?(?:\s*\/\s*(0|1|0?\.\d+|\d{1,3}%))?\s*\)/i;
+export class OklchColorManager {
     constructor() {
         this.key = "oklch";
-        this.stringPrefix = "oklch";
+    }
+    accepts(input) {
+        return input.startsWith("oklch");
     }
     handleColor(color) {
         const colorValue = color.value, oklchColor = colorValue.oklch ?? color.value;
-        if (oklchColor.l !== undefined && oklchColor.c !== undefined && oklchColor.h !== undefined) {
-            return (0, utils_js_1.oklchToRgb)(oklchColor);
+        if (!Object.hasOwn(oklchColor, "l") && !Object.hasOwn(oklchColor, "c") && !Object.hasOwn(oklchColor, "h")) {
+            return;
         }
+        return oklchToRgb(oklchColor);
     }
     handleRangeColor(color) {
         const colorValue = color.value, oklchColor = colorValue.oklch ?? color.value;
-        if (oklchColor.l !== undefined && oklchColor.c !== undefined && oklchColor.h !== undefined) {
-            return (0, utils_js_1.oklchToRgb)({
-                l: (0, engine_1.getRangeValue)(oklchColor.l),
-                c: (0, engine_1.getRangeValue)(oklchColor.c),
-                h: (0, engine_1.getRangeValue)(oklchColor.h),
-            });
+        if (!Object.hasOwn(oklchColor, "l") && !Object.hasOwn(oklchColor, "c") && !Object.hasOwn(oklchColor, "h")) {
+            return;
         }
+        return oklchToRgb({
+            l: getRangeValue(oklchColor.l),
+            c: getRangeValue(oklchColor.c),
+            h: getRangeValue(oklchColor.h),
+        });
     }
     parseString(input) {
-        const isOklch = input.startsWith("oklch");
-        if (!isOklch) {
+        if (!this.accepts(input)) {
             return;
         }
-        const regex = /oklch\(\s*(\d+(\.\d+)?)%\s+(\d+(\.\d+)?)\s+(\d+(\.\d+)?)(°)?(?:\s*\/\s*(0|1|0?\.\d+|\d{1,3}%))?\s*\)/i, result = regex.exec(input), indexes = {
+        const result = oklchRegex.exec(input), indexes = {
             l: 1,
             c: 3,
             h: 5,
             a: 7,
         }, defaultAlpha = 1;
         return result
-            ? (0, utils_js_1.oklchaToRgba)({
-                a: result[indexes.a] ? (0, engine_1.parseAlpha)(result[indexes.a]) : defaultAlpha,
-                c: parseFloat(result[indexes.c]),
-                h: parseFloat(result[indexes.h]),
-                l: parseFloat(result[indexes.l]),
+            ? oklchaToRgba({
+                a: result[indexes.a] ? parseAlpha(result[indexes.a]) : defaultAlpha,
+                c: parseFloat(result[indexes.c] ?? "0"),
+                h: parseFloat(result[indexes.h] ?? "0"),
+                l: parseFloat(result[indexes.l] ?? "0"),
             })
             : undefined;
     }
 }
-exports.OklchColorManager = OklchColorManager;

package/cjs/index.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.loadOklchColorPlugin = loadOklchColorPlugin;
-const LchColorManager_js_1 = require("./LchColorManager.js");
-const OklchColorManager_js_1 = require("./OklchColorManager.js");
-async function loadOklchColorPlugin(engine, refresh = true) {
-    engine.checkVersion("3.9.1");
-    await engine.addColorManager(new OklchColorManager_js_1.OklchColorManager(), refresh);
-    await engine.addColorManager(new LchColorManager_js_1.LchColorManager(), refresh);
+export function loadOklchColorPlugin(engine) {
+    engine.checkVersion("4.0.0-alpha.1");
+    engine.register(async (e) => {
+        const { OklchColorManager } = await import("./OklchColorManager.js");
+        e.addColorManager(new OklchColorManager());
+    });
 }

package/cjs/utils.js

@@ -1,39 +1,36 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.lchToRgb = lchToRgb;
-exports.lchaToRgba = lchaToRgba;
-exports.oklchToRgb = oklchToRgb;
-exports.oklchaToRgba = oklchaToRgba;
-exports.getStyleFromOklch = getStyleFromOklch;
-const engine_1 = require("@tsparticles/engine");
-const rgbFactor = 255, fullDegree = 360;
-function lchToRgb(lch) {
-    const l = lch.l / engine_1.percentDenominator, c = lch.c, h = lch.h / fullDegree, result = { r: 0, g: 0, b: 0 };
-    result.r = Math.floor(l * rgbFactor);
-    result.g = Math.floor(c * rgbFactor);
-    result.b = Math.floor(h * rgbFactor);
-    return result;
-}
-function lchaToRgba(lcha) {
+import { clamp, degToRad, inverseFactorNumerator, percentDenominator, rgbMax, } from "@tsparticles/engine";
+const OKLAB_LMS = {
+    l: { L: 1, a: 0.3963377774, b: 0.2158037573 },
+    m: { L: 1, a: -0.1055613458, b: -0.0638541728 },
+    s: { L: 1, a: -0.0894841775, b: -1.291485548 },
+}, LMS_TO_LINEAR_RGB = {
+    r: { l: 4.0767416621, m: -3.3077115913, s: 0.2309699292 },
+    g: { l: -1.2684380046, m: 2.6097574011, s: -0.3413193965 },
+    b: { l: -0.0041960863, m: -0.7034186147, s: 1.707614701 },
+}, SRGB = {
+    GAMMA: 2.4,
+    LINEAR_THRESHOLD: 0.0031308,
+    LINEAR_SCALE: 12.92,
+    SCALE: 1.055,
+    OFFSET: 0.055,
+}, minSrgbValue = 0, maxSrgbValue = 1;
+export function oklchToRgb(oklch) {
+    const L = oklch.l / percentDenominator, C = oklch.c / percentDenominator, hRad = degToRad(oklch.h), a = C * Math.cos(hRad), b = C * Math.sin(hRad), l_ = OKLAB_LMS.l.L * L + OKLAB_LMS.l.a * a + OKLAB_LMS.l.b * b, m_ = OKLAB_LMS.m.L * L + OKLAB_LMS.m.a * a + OKLAB_LMS.m.b * b, s_ = OKLAB_LMS.s.L * L + OKLAB_LMS.s.a * a + OKLAB_LMS.s.b * b, cubic = 3, l = l_ ** cubic, m = m_ ** cubic, s = s_ ** cubic, rLinear = LMS_TO_LINEAR_RGB.r.l * l + LMS_TO_LINEAR_RGB.r.m * m + LMS_TO_LINEAR_RGB.r.s * s, gLinear = LMS_TO_LINEAR_RGB.g.l * l + LMS_TO_LINEAR_RGB.g.m * m + LMS_TO_LINEAR_RGB.g.s * s, bLinear = LMS_TO_LINEAR_RGB.b.l * l + LMS_TO_LINEAR_RGB.b.m * m + LMS_TO_LINEAR_RGB.b.s * s, toSrgb = (x) => x <= SRGB.LINEAR_THRESHOLD
+        ? SRGB.LINEAR_SCALE * x
+        : SRGB.SCALE * Math.pow(x, inverseFactorNumerator / SRGB.GAMMA) - SRGB.OFFSET, toSrgbFixed = num => Math.round(clamp(toSrgb(num), minSrgbValue, maxSrgbValue) * rgbMax);
     return {
-        a: lcha.a,
-        ...lchToRgb(lcha),
+        r: toSrgbFixed(rLinear),
+        g: toSrgbFixed(gLinear),
+        b: toSrgbFixed(bLinear),
     };
 }
-function oklchToRgb(oklch) {
-    const l = oklch.l / engine_1.percentDenominator, c = oklch.c / engine_1.percentDenominator, h = oklch.h / fullDegree, result = { r: 0, g: 0, b: 0 };
-    result.r = Math.floor(l * rgbFactor);
-    result.g = Math.floor(c * rgbFactor);
-    result.b = Math.floor(h * rgbFactor);
-    return result;
-}
-function oklchaToRgba(oklcha) {
+export function oklchaToRgba(oklcha) {
     return {
         a: oklcha.a,
         ...oklchToRgb(oklcha),
     };
 }
-function getStyleFromOklch(color, opacity) {
-    const { l, c, h } = color, alpha = opacity !== undefined ? `, ${opacity}` : "";
-    return `oklch(${l}%, ${c}%, ${h}°${alpha})`;
+export function getStyleFromOklch(color, opacity) {
+    const { l, c, h } = color, alpha = opacity !== undefined ? ` / ${opacity.toString()}` : "";
+    return `oklch(${l.toString()}% ${c.toString()}% ${h.toString()}°${alpha})`;
 }

package/dist_browser_OklchColorManager_js.js

@@ -0,0 +1,40 @@
+/*!
+ * Author : Matteo Bruni
+ * MIT license: https://opensource.org/licenses/MIT
+ * Demo / Generator : https://particles.js.org/
+ * GitHub : https://www.github.com/matteobruni/tsparticles
+ * How to use? : Check the GitHub README
+ * v4.0.0-alpha.1
+ */
+"use strict";
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+(this["webpackChunk_tsparticles_plugin_oklch_color"] = this["webpackChunk_tsparticles_plugin_oklch_color"] || []).push([["dist_browser_OklchColorManager_js"],{
+
+/***/ "./dist/browser/OklchColorManager.js"
+/*!*******************************************!*\
+  !*** ./dist/browser/OklchColorManager.js ***!
+  \*******************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   OklchColorManager: () => (/* binding */ OklchColorManager)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils.js */ \"./dist/browser/utils.js\");\n\n\nconst oklchRegex = /oklch\\(\\s*(\\d+(\\.\\d+)?)%\\s+(\\d+(\\.\\d+)?)\\s+(\\d+(\\.\\d+)?)(°)?(?:\\s*\\/\\s*(0|1|0?\\.\\d+|\\d{1,3}%))?\\s*\\)/i;\nclass OklchColorManager {\n  constructor() {\n    this.key = \"oklch\";\n  }\n  accepts(input) {\n    return input.startsWith(\"oklch\");\n  }\n  handleColor(color) {\n    const colorValue = color.value,\n      oklchColor = colorValue.oklch ?? color.value;\n    if (!Object.hasOwn(oklchColor, \"l\") && !Object.hasOwn(oklchColor, \"c\") && !Object.hasOwn(oklchColor, \"h\")) {\n      return;\n    }\n    return (0,_utils_js__WEBPACK_IMPORTED_MODULE_1__.oklchToRgb)(oklchColor);\n  }\n  handleRangeColor(color) {\n    const colorValue = color.value,\n      oklchColor = colorValue.oklch ?? color.value;\n    if (!Object.hasOwn(oklchColor, \"l\") && !Object.hasOwn(oklchColor, \"c\") && !Object.hasOwn(oklchColor, \"h\")) {\n      return;\n    }\n    return (0,_utils_js__WEBPACK_IMPORTED_MODULE_1__.oklchToRgb)({\n      l: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(oklchColor.l),\n      c: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(oklchColor.c),\n      h: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(oklchColor.h)\n    });\n  }\n  parseString(input) {\n    if (!this.accepts(input)) {\n      return;\n    }\n    const result = oklchRegex.exec(input),\n      indexes = {\n        l: 1,\n        c: 3,\n        h: 5,\n        a: 7\n      },\n      defaultAlpha = 1;\n    return result ? (0,_utils_js__WEBPACK_IMPORTED_MODULE_1__.oklchaToRgba)({\n      a: result[indexes.a] ? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.parseAlpha)(result[indexes.a]) : defaultAlpha,\n      c: parseFloat(result[indexes.c] ?? \"0\"),\n      h: parseFloat(result[indexes.h] ?? \"0\"),\n      l: parseFloat(result[indexes.l] ?? \"0\")\n    }) : undefined;\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-oklch-color/./dist/browser/OklchColorManager.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/utils.js"
+/*!*******************************!*\
+  !*** ./dist/browser/utils.js ***!
+  \*******************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   getStyleFromOklch: () => (/* binding */ getStyleFromOklch),\n/* harmony export */   oklchToRgb: () => (/* binding */ oklchToRgb),\n/* harmony export */   oklchaToRgba: () => (/* binding */ oklchaToRgba)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst OKLAB_LMS = {\n    l: {\n      L: 1,\n      a: 0.3963377774,\n      b: 0.2158037573\n    },\n    m: {\n      L: 1,\n      a: -0.1055613458,\n      b: -0.0638541728\n    },\n    s: {\n      L: 1,\n      a: -0.0894841775,\n      b: -1.291485548\n    }\n  },\n  LMS_TO_LINEAR_RGB = {\n    r: {\n      l: 4.0767416621,\n      m: -3.3077115913,\n      s: 0.2309699292\n    },\n    g: {\n      l: -1.2684380046,\n      m: 2.6097574011,\n      s: -0.3413193965\n    },\n    b: {\n      l: -0.0041960863,\n      m: -0.7034186147,\n      s: 1.707614701\n    }\n  },\n  SRGB = {\n    GAMMA: 2.4,\n    LINEAR_THRESHOLD: 0.0031308,\n    LINEAR_SCALE: 12.92,\n    SCALE: 1.055,\n    OFFSET: 0.055\n  },\n  minSrgbValue = 0,\n  maxSrgbValue = 1;\nfunction oklchToRgb(oklch) {\n  const L = oklch.l / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.percentDenominator,\n    C = oklch.c / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.percentDenominator,\n    hRad = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.degToRad)(oklch.h),\n    a = C * Math.cos(hRad),\n    b = C * Math.sin(hRad),\n    l_ = OKLAB_LMS.l.L * L + OKLAB_LMS.l.a * a + OKLAB_LMS.l.b * b,\n    m_ = OKLAB_LMS.m.L * L + OKLAB_LMS.m.a * a + OKLAB_LMS.m.b * b,\n    s_ = OKLAB_LMS.s.L * L + OKLAB_LMS.s.a * a + OKLAB_LMS.s.b * b,\n    cubic = 3,\n    l = l_ ** cubic,\n    m = m_ ** cubic,\n    s = s_ ** cubic,\n    rLinear = LMS_TO_LINEAR_RGB.r.l * l + LMS_TO_LINEAR_RGB.r.m * m + LMS_TO_LINEAR_RGB.r.s * s,\n    gLinear = LMS_TO_LINEAR_RGB.g.l * l + LMS_TO_LINEAR_RGB.g.m * m + LMS_TO_LINEAR_RGB.g.s * s,\n    bLinear = LMS_TO_LINEAR_RGB.b.l * l + LMS_TO_LINEAR_RGB.b.m * m + LMS_TO_LINEAR_RGB.b.s * s,\n    toSrgb = x => x <= SRGB.LINEAR_THRESHOLD ? SRGB.LINEAR_SCALE * x : SRGB.SCALE * Math.pow(x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.inverseFactorNumerator / SRGB.GAMMA) - SRGB.OFFSET,\n    toSrgbFixed = num => Math.round((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.clamp)(toSrgb(num), minSrgbValue, maxSrgbValue) * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rgbMax);\n  return {\n    r: toSrgbFixed(rLinear),\n    g: toSrgbFixed(gLinear),\n    b: toSrgbFixed(bLinear)\n  };\n}\nfunction oklchaToRgba(oklcha) {\n  return {\n    a: oklcha.a,\n    ...oklchToRgb(oklcha)\n  };\n}\nfunction getStyleFromOklch(color, opacity) {\n  const {\n      l,\n      c,\n      h\n    } = color,\n    alpha = opacity !== undefined ? ` / ${opacity.toString()}` : \"\";\n  return `oklch(${l.toString()}% ${c.toString()}% ${h.toString()}°${alpha})`;\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-oklch-color/./dist/browser/utils.js?\n}");
+
+/***/ }
+
+}]);

package/esm/OklchColorManager.js

@@ -1,32 +1,36 @@
 import { getRangeValue, parseAlpha, } from "@tsparticles/engine";
 import { oklchToRgb, oklchaToRgba } from "./utils.js";
+const oklchRegex = /oklch\(\s*(\d+(\.\d+)?)%\s+(\d+(\.\d+)?)\s+(\d+(\.\d+)?)(°)?(?:\s*\/\s*(0|1|0?\.\d+|\d{1,3}%))?\s*\)/i;
 export class OklchColorManager {
     constructor() {
         this.key = "oklch";
-        this.stringPrefix = "oklch";
+    }
+    accepts(input) {
+        return input.startsWith("oklch");
     }
     handleColor(color) {
         const colorValue = color.value, oklchColor = colorValue.oklch ?? color.value;
-        if (oklchColor.l !== undefined && oklchColor.c !== undefined && oklchColor.h !== undefined) {
-            return oklchToRgb(oklchColor);
+        if (!Object.hasOwn(oklchColor, "l") && !Object.hasOwn(oklchColor, "c") && !Object.hasOwn(oklchColor, "h")) {
+            return;
         }
+        return oklchToRgb(oklchColor);
     }
     handleRangeColor(color) {
         const colorValue = color.value, oklchColor = colorValue.oklch ?? color.value;
-        if (oklchColor.l !== undefined && oklchColor.c !== undefined && oklchColor.h !== undefined) {
-            return oklchToRgb({
-                l: getRangeValue(oklchColor.l),
-                c: getRangeValue(oklchColor.c),
-                h: getRangeValue(oklchColor.h),
-            });
+        if (!Object.hasOwn(oklchColor, "l") && !Object.hasOwn(oklchColor, "c") && !Object.hasOwn(oklchColor, "h")) {
+            return;
         }
+        return oklchToRgb({
+            l: getRangeValue(oklchColor.l),
+            c: getRangeValue(oklchColor.c),
+            h: getRangeValue(oklchColor.h),
+        });
     }
     parseString(input) {
-        const isOklch = input.startsWith("oklch");
-        if (!isOklch) {
+        if (!this.accepts(input)) {
             return;
         }
-        const regex = /oklch\(\s*(\d+(\.\d+)?)%\s+(\d+(\.\d+)?)\s+(\d+(\.\d+)?)(°)?(?:\s*\/\s*(0|1|0?\.\d+|\d{1,3}%))?\s*\)/i, result = regex.exec(input), indexes = {
+        const result = oklchRegex.exec(input), indexes = {
             l: 1,
             c: 3,
             h: 5,
@@ -35,9 +39,9 @@ export class OklchColorManager {
         return result
             ? oklchaToRgba({
                 a: result[indexes.a] ? parseAlpha(result[indexes.a]) : defaultAlpha,
-                c: parseFloat(result[indexes.c]),
-                h: parseFloat(result[indexes.h]),
-                l: parseFloat(result[indexes.l]),
+                c: parseFloat(result[indexes.c] ?? "0"),
+                h: parseFloat(result[indexes.h] ?? "0"),
+                l: parseFloat(result[indexes.l] ?? "0"),
             })
             : undefined;
     }

package/esm/index.js

@@ -1,7 +1,7 @@
-import { LchColorManager } from "./LchColorManager.js";
-import { OklchColorManager } from "./OklchColorManager.js";
-export async function loadOklchColorPlugin(engine, refresh = true) {
-    engine.checkVersion("3.9.1");
-    await engine.addColorManager(new OklchColorManager(), refresh);
-    await engine.addColorManager(new LchColorManager(), refresh);
+export function loadOklchColorPlugin(engine) {
+    engine.checkVersion("4.0.0-alpha.1");
+    engine.register(async (e) => {
+        const { OklchColorManager } = await import("./OklchColorManager.js");
+        e.addColorManager(new OklchColorManager());
+    });
 }

package/esm/utils.js

@@ -1,25 +1,29 @@
-import { percentDenominator, } from "@tsparticles/engine";
-const rgbFactor = 255, fullDegree = 360;
-export function lchToRgb(lch) {
-    const l = lch.l / percentDenominator, c = lch.c, h = lch.h / fullDegree, result = { r: 0, g: 0, b: 0 };
-    result.r = Math.floor(l * rgbFactor);
-    result.g = Math.floor(c * rgbFactor);
-    result.b = Math.floor(h * rgbFactor);
-    return result;
-}
-export function lchaToRgba(lcha) {
+import { clamp, degToRad, inverseFactorNumerator, percentDenominator, rgbMax, } from "@tsparticles/engine";
+const OKLAB_LMS = {
+    l: { L: 1, a: 0.3963377774, b: 0.2158037573 },
+    m: { L: 1, a: -0.1055613458, b: -0.0638541728 },
+    s: { L: 1, a: -0.0894841775, b: -1.291485548 },
+}, LMS_TO_LINEAR_RGB = {
+    r: { l: 4.0767416621, m: -3.3077115913, s: 0.2309699292 },
+    g: { l: -1.2684380046, m: 2.6097574011, s: -0.3413193965 },
+    b: { l: -0.0041960863, m: -0.7034186147, s: 1.707614701 },
+}, SRGB = {
+    GAMMA: 2.4,
+    LINEAR_THRESHOLD: 0.0031308,
+    LINEAR_SCALE: 12.92,
+    SCALE: 1.055,
+    OFFSET: 0.055,
+}, minSrgbValue = 0, maxSrgbValue = 1;
+export function oklchToRgb(oklch) {
+    const L = oklch.l / percentDenominator, C = oklch.c / percentDenominator, hRad = degToRad(oklch.h), a = C * Math.cos(hRad), b = C * Math.sin(hRad), l_ = OKLAB_LMS.l.L * L + OKLAB_LMS.l.a * a + OKLAB_LMS.l.b * b, m_ = OKLAB_LMS.m.L * L + OKLAB_LMS.m.a * a + OKLAB_LMS.m.b * b, s_ = OKLAB_LMS.s.L * L + OKLAB_LMS.s.a * a + OKLAB_LMS.s.b * b, cubic = 3, l = l_ ** cubic, m = m_ ** cubic, s = s_ ** cubic, rLinear = LMS_TO_LINEAR_RGB.r.l * l + LMS_TO_LINEAR_RGB.r.m * m + LMS_TO_LINEAR_RGB.r.s * s, gLinear = LMS_TO_LINEAR_RGB.g.l * l + LMS_TO_LINEAR_RGB.g.m * m + LMS_TO_LINEAR_RGB.g.s * s, bLinear = LMS_TO_LINEAR_RGB.b.l * l + LMS_TO_LINEAR_RGB.b.m * m + LMS_TO_LINEAR_RGB.b.s * s, toSrgb = (x) => x <= SRGB.LINEAR_THRESHOLD
+        ? SRGB.LINEAR_SCALE * x
+        : SRGB.SCALE * Math.pow(x, inverseFactorNumerator / SRGB.GAMMA) - SRGB.OFFSET, toSrgbFixed = num => Math.round(clamp(toSrgb(num), minSrgbValue, maxSrgbValue) * rgbMax);
     return {
-        a: lcha.a,
-        ...lchToRgb(lcha),
+        r: toSrgbFixed(rLinear),
+        g: toSrgbFixed(gLinear),
+        b: toSrgbFixed(bLinear),
     };
 }
-export function oklchToRgb(oklch) {
-    const l = oklch.l / percentDenominator, c = oklch.c / percentDenominator, h = oklch.h / fullDegree, result = { r: 0, g: 0, b: 0 };
-    result.r = Math.floor(l * rgbFactor);
-    result.g = Math.floor(c * rgbFactor);
-    result.b = Math.floor(h * rgbFactor);
-    return result;
-}
 export function oklchaToRgba(oklcha) {
     return {
         a: oklcha.a,
@@ -27,6 +31,6 @@ export function oklchaToRgba(oklcha) {
     };
 }
 export function getStyleFromOklch(color, opacity) {
-    const { l, c, h } = color, alpha = opacity !== undefined ? `, ${opacity}` : "";
-    return `oklch(${l}%, ${c}%, ${h}°${alpha})`;
+    const { l, c, h } = color, alpha = opacity !== undefined ? ` / ${opacity.toString()}` : "";
+    return `oklch(${l.toString()}% ${c.toString()}% ${h.toString()}°${alpha})`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/plugin-oklch-color",
-  "version": "3.9.1",
+  "version": "4.0.0-alpha.1",
   "description": "tsParticles OKLCH color plugin",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -100,9 +100,10 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "3.9.1"
+    "@tsparticles/engine": "4.0.0-alpha.1"
   },
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "type": "module"
 }