@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260430100756 → 0.8.1-dev.20260502043006

package/dist/{HlsPlayer-GV3FOPYT.mjs → HlsPlayer-VZHMWUEY.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   HlsPlayer_default
-} from "./chunk-TXHD4F4A.mjs";
+} from "./chunk-2NTH6VLK.mjs";
 export {
   HlsPlayer_default as default
 };

package/dist/{chunk-TXHD4F4A.mjs → chunk-2NTH6VLK.mjs}

@@ -16,11 +16,14 @@ var HlsPlayer = React.memo(
   }) => {
     const videoRef = useRef(null);
     const hlsRef = useRef(null);
+    const isPlayOnHover = playOptions === "playOnHover";
+    const startsMuted = playOptions === "autoplay" || isPlayOnHover;
     const [isPlaying, setIsPlaying] = useState(playOptions === "autoplay");
     const [isHovered, setIsHovered] = useState(false);
     const [isMobile, setIsMobile] = useState(false);
     const [isControlsVisible, setIsControlsVisible] = useState(true);
     const [isPosterVisible, setIsPosterVisible] = useState(true);
+    const [isMuted, setIsMuted] = useState(startsMuted);
     const wasManuallyPausedRef = useRef(false);
     const inactivityTimerRef = useRef(null);
     const INACTIVITY_DELAY = 2500;
@@ -117,33 +120,67 @@ var HlsPlayer = React.memo(
         setIsPlaying(false);
       }
     }, []);
+    const handleMuteToggle = useCallback(() => {
+      const v = videoRef.current;
+      if (!v) return;
+      v.muted = !v.muted;
+      setIsMuted(v.muted);
+    }, []);
     const handleMouseEnter = useCallback(() => {
       if (isMobile) return;
       setIsHovered(true);
       resetInactivityTimer();
-      if (playOptions === "playOnHover" && videoRef.current && !wasManuallyPausedRef.current) {
+      if (isPlayOnHover && videoRef.current && !wasManuallyPausedRef.current) {
         videoRef.current.play().then(() => setIsPlaying(true));
       }
-    }, [playOptions, isMobile, resetInactivityTimer]);
+    }, [isPlayOnHover, isMobile, resetInactivityTimer]);
     const handleMouseLeave = useCallback(() => {
       if (isMobile) return;
       setIsHovered(false);
       if (inactivityTimerRef.current) clearTimeout(inactivityTimerRef.current);
       if (isPlaying) setIsControlsVisible(false);
-      if (playOptions === "playOnHover" && videoRef.current) {
+      if (isPlayOnHover && videoRef.current) {
         videoRef.current.pause();
         videoRef.current.currentTime = 0;
         setIsPlaying(false);
       }
-    }, [playOptions, isMobile, isPlaying]);
+    }, [isPlayOnHover, isMobile, isPlaying]);
     const handleMouseMove = useCallback(() => {
       if (isMobile) return;
       resetInactivityTimer();
     }, [isMobile, resetInactivityTimer]);
     const posterSources = resolvedSources.filter((s) => s.media && s.posterUrl);
     const fallbackPoster = posterUrl ?? resolvedSources.find((s) => !s.media)?.posterUrl ?? resolvedSources[0]?.posterUrl;
-    const isPlayOnHover = playOptions === "playOnHover";
+    const overlayButtonStyle = {
+      pointerEvents: isControlsVisible ? "auto" : "none",
+      width: 40,
+      height: 40,
+      borderRadius: "50%",
+      border: "1.5px solid rgba(255,255,255,0.18)",
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      background: "rgba(0, 0, 0, 0.45)",
+      backdropFilter: "blur(10px)",
+      WebkitBackdropFilter: "blur(10px)",
+      boxShadow: "0 4px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1)",
+      transition: "transform 0.18s ease, background 0.18s ease, border-color 0.18s ease"
+    };
+    const handleButtonMouseEnter = useCallback((e) => {
+      const btn = e.currentTarget;
+      btn.style.transform = "scale(1.1)";
+      btn.style.background = "rgba(0,0,0,0.65)";
+      btn.style.borderColor = "rgba(255,255,255,0.32)";
+    }, []);
+    const handleButtonMouseLeave = useCallback((e) => {
+      const btn = e.currentTarget;
+      btn.style.transform = "scale(1)";
+      btn.style.background = "rgba(0,0,0,0.45)";
+      btn.style.borderColor = "rgba(255,255,255,0.18)";
+    }, []);
     if (resolvedSources.length === 0) return null;
+    const showMuteButton = !showControls && !isMobile && !isPlayOnHover;
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -159,11 +196,11 @@ var HlsPlayer = React.memo(
               className: "w-full h-full object-contain",
               poster: fallbackPoster,
               controls: showControls && (isMobile || isPlaying),
-              muted: playOptions === "autoplay" || isPlayOnHover,
+              muted: startsMuted,
               autoPlay: playOptions === "autoplay",
               loop,
-              playsInline: true,
               onClick: !isMobile ? handlePlayPause : void 0,
+              playsInline: true,
               children: resolvedSources.map(({ src, media }, i) => /* @__PURE__ */ jsx(
                 "source",
                 {
@@ -215,43 +252,51 @@ var HlsPlayer = React.memo(
                     e.stopPropagation();
                     handlePlayPause();
                   },
-                  style: {
-                    pointerEvents: isControlsVisible ? "auto" : "none",
-                    width: 64,
-                    height: 64,
-                    borderRadius: "50%",
-                    border: "1.5px solid rgba(255,255,255,0.18)",
-                    cursor: "pointer",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    background: "rgba(0, 0, 0, 0.45)",
-                    backdropFilter: "blur(10px)",
-                    WebkitBackdropFilter: "blur(10px)",
-                    boxShadow: "0 4px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1)",
-                    transition: "transform 0.18s ease, background 0.18s ease, border-color 0.18s ease"
-                  },
-                  onMouseEnter: (e) => {
-                    const btn = e.currentTarget;
-                    btn.style.transform = "scale(1.1)";
-                    btn.style.background = "rgba(0,0,0,0.65)";
-                    btn.style.borderColor = "rgba(255,255,255,0.32)";
-                  },
-                  onMouseLeave: (e) => {
-                    const btn = e.currentTarget;
-                    btn.style.transform = "scale(1)";
-                    btn.style.background = "rgba(0,0,0,0.45)";
-                    btn.style.borderColor = "rgba(255,255,255,0.18)";
+                  style: { ...overlayButtonStyle, width: 64, height: 64 },
+                  onMouseEnter: handleButtonMouseEnter,
+                  onMouseLeave: handleButtonMouseLeave,
+                  children: isPlaying ? /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                    /* @__PURE__ */ jsx("rect", { x: "3.5", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" }),
+                    /* @__PURE__ */ jsx("rect", { x: "12", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" })
+                  ] }) : /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { transform: "translateX(2px)" }, children: /* @__PURE__ */ jsx("path", { d: "M5 3.5L17 10L5 16.5V3.5Z", fill: "white" }) })
+                }
+              )
+            }
+          ),
+          showMuteButton && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute bottom-3 right-3 pointer-events-none",
+              style: {
+                opacity: isControlsVisible ? 1 : 0,
+                transition: "opacity 0.3s ease"
+              },
+              children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": isMuted ? "Unmute" : "Mute",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleMuteToggle();
                   },
-                  children: isPlaying ? (
-                    /* Pause — two rounded bars */
-                    /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-                      /* @__PURE__ */ jsx("rect", { x: "3.5", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" }),
-                      /* @__PURE__ */ jsx("rect", { x: "12", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" })
+                  style: overlayButtonStyle,
+                  onMouseEnter: handleButtonMouseEnter,
+                  onMouseLeave: handleButtonMouseLeave,
+                  children: isMuted ? (
+                    /* Muted — speaker with an X */
+                    /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                      /* @__PURE__ */ jsx("path", { d: "M11 5L6 9H2v6h4l5 4V5Z", fill: "white" }),
+                      /* @__PURE__ */ jsx("line", { x1: "23", y1: "9", x2: "17", y2: "15", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }),
+                      /* @__PURE__ */ jsx("line", { x1: "17", y1: "9", x2: "23", y2: "15", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
                     ] })
                   ) : (
-                    /* Play — solid triangle, nudged right for optical balance */
-                    /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M5 3.5L17 10L5 16.5V3.5Z", fill: "white" }) })
+                    /* Unmuted — speaker with sound waves */
+                    /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                      /* @__PURE__ */ jsx("path", { d: "M11 5L6 9H2v6h4l5 4V5Z", fill: "white" }),
+                      /* @__PURE__ */ jsx("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }),
+                      /* @__PURE__ */ jsx("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
+                    ] })
                   )
                 }
               )

package/dist/index.js

@@ -542,11 +542,14 @@ var init_HlsPlayer = __esm({
       }) => {
         const videoRef = (0, import_react32.useRef)(null);
         const hlsRef = (0, import_react32.useRef)(null);
+        const isPlayOnHover = playOptions === "playOnHover";
+        const startsMuted = playOptions === "autoplay" || isPlayOnHover;
         const [isPlaying, setIsPlaying] = (0, import_react32.useState)(playOptions === "autoplay");
         const [isHovered, setIsHovered] = (0, import_react32.useState)(false);
         const [isMobile, setIsMobile] = (0, import_react32.useState)(false);
         const [isControlsVisible, setIsControlsVisible] = (0, import_react32.useState)(true);
         const [isPosterVisible, setIsPosterVisible] = (0, import_react32.useState)(true);
+        const [isMuted, setIsMuted] = (0, import_react32.useState)(startsMuted);
         const wasManuallyPausedRef = (0, import_react32.useRef)(false);
         const inactivityTimerRef = (0, import_react32.useRef)(null);
         const INACTIVITY_DELAY = 2500;
@@ -643,33 +646,67 @@ var init_HlsPlayer = __esm({
             setIsPlaying(false);
           }
         }, []);
+        const handleMuteToggle = (0, import_react32.useCallback)(() => {
+          const v = videoRef.current;
+          if (!v) return;
+          v.muted = !v.muted;
+          setIsMuted(v.muted);
+        }, []);
         const handleMouseEnter = (0, import_react32.useCallback)(() => {
           if (isMobile) return;
           setIsHovered(true);
           resetInactivityTimer();
-          if (playOptions === "playOnHover" && videoRef.current && !wasManuallyPausedRef.current) {
+          if (isPlayOnHover && videoRef.current && !wasManuallyPausedRef.current) {
             videoRef.current.play().then(() => setIsPlaying(true));
           }
-        }, [playOptions, isMobile, resetInactivityTimer]);
+        }, [isPlayOnHover, isMobile, resetInactivityTimer]);
         const handleMouseLeave = (0, import_react32.useCallback)(() => {
           if (isMobile) return;
           setIsHovered(false);
           if (inactivityTimerRef.current) clearTimeout(inactivityTimerRef.current);
           if (isPlaying) setIsControlsVisible(false);
-          if (playOptions === "playOnHover" && videoRef.current) {
+          if (isPlayOnHover && videoRef.current) {
             videoRef.current.pause();
             videoRef.current.currentTime = 0;
             setIsPlaying(false);
           }
-        }, [playOptions, isMobile, isPlaying]);
+        }, [isPlayOnHover, isMobile, isPlaying]);
         const handleMouseMove = (0, import_react32.useCallback)(() => {
           if (isMobile) return;
           resetInactivityTimer();
         }, [isMobile, resetInactivityTimer]);
         const posterSources = resolvedSources.filter((s) => s.media && s.posterUrl);
         const fallbackPoster = posterUrl ?? resolvedSources.find((s) => !s.media)?.posterUrl ?? resolvedSources[0]?.posterUrl;
-        const isPlayOnHover = playOptions === "playOnHover";
+        const overlayButtonStyle = {
+          pointerEvents: isControlsVisible ? "auto" : "none",
+          width: 40,
+          height: 40,
+          borderRadius: "50%",
+          border: "1.5px solid rgba(255,255,255,0.18)",
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "rgba(0, 0, 0, 0.45)",
+          backdropFilter: "blur(10px)",
+          WebkitBackdropFilter: "blur(10px)",
+          boxShadow: "0 4px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1)",
+          transition: "transform 0.18s ease, background 0.18s ease, border-color 0.18s ease"
+        };
+        const handleButtonMouseEnter = (0, import_react32.useCallback)((e) => {
+          const btn = e.currentTarget;
+          btn.style.transform = "scale(1.1)";
+          btn.style.background = "rgba(0,0,0,0.65)";
+          btn.style.borderColor = "rgba(255,255,255,0.32)";
+        }, []);
+        const handleButtonMouseLeave = (0, import_react32.useCallback)((e) => {
+          const btn = e.currentTarget;
+          btn.style.transform = "scale(1)";
+          btn.style.background = "rgba(0,0,0,0.45)";
+          btn.style.borderColor = "rgba(255,255,255,0.18)";
+        }, []);
         if (resolvedSources.length === 0) return null;
+        const showMuteButton = !showControls && !isMobile && !isPlayOnHover;
         return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
           "div",
           {
@@ -685,11 +722,11 @@ var init_HlsPlayer = __esm({
                   className: "w-full h-full object-contain",
                   poster: fallbackPoster,
                   controls: showControls && (isMobile || isPlaying),
-                  muted: playOptions === "autoplay" || isPlayOnHover,
+                  muted: startsMuted,
                   autoPlay: playOptions === "autoplay",
                   loop,
-                  playsInline: true,
                   onClick: !isMobile ? handlePlayPause : void 0,
+                  playsInline: true,
                   children: resolvedSources.map(({ src, media }, i) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                     "source",
                     {
@@ -741,43 +778,51 @@ var init_HlsPlayer = __esm({
                         e.stopPropagation();
                         handlePlayPause();
                       },
-                      style: {
-                        pointerEvents: isControlsVisible ? "auto" : "none",
-                        width: 64,
-                        height: 64,
-                        borderRadius: "50%",
-                        border: "1.5px solid rgba(255,255,255,0.18)",
-                        cursor: "pointer",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        background: "rgba(0, 0, 0, 0.45)",
-                        backdropFilter: "blur(10px)",
-                        WebkitBackdropFilter: "blur(10px)",
-                        boxShadow: "0 4px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1)",
-                        transition: "transform 0.18s ease, background 0.18s ease, border-color 0.18s ease"
-                      },
-                      onMouseEnter: (e) => {
-                        const btn = e.currentTarget;
-                        btn.style.transform = "scale(1.1)";
-                        btn.style.background = "rgba(0,0,0,0.65)";
-                        btn.style.borderColor = "rgba(255,255,255,0.32)";
-                      },
-                      onMouseLeave: (e) => {
-                        const btn = e.currentTarget;
-                        btn.style.transform = "scale(1)";
-                        btn.style.background = "rgba(0,0,0,0.45)";
-                        btn.style.borderColor = "rgba(255,255,255,0.18)";
+                      style: { ...overlayButtonStyle, width: 64, height: 64 },
+                      onMouseEnter: handleButtonMouseEnter,
+                      onMouseLeave: handleButtonMouseLeave,
+                      children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("rect", { x: "3.5", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("rect", { x: "12", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" })
+                      ] }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { transform: "translateX(2px)" }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M5 3.5L17 10L5 16.5V3.5Z", fill: "white" }) })
+                    }
+                  )
+                }
+              ),
+              showMuteButton && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                "div",
+                {
+                  className: "absolute bottom-3 right-3 pointer-events-none",
+                  style: {
+                    opacity: isControlsVisible ? 1 : 0,
+                    transition: "opacity 0.3s ease"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": isMuted ? "Unmute" : "Mute",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleMuteToggle();
                       },
-                      children: isPlaying ? (
-                        /* Pause — two rounded bars */
-                        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("rect", { x: "3.5", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("rect", { x: "12", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" })
+                      style: overlayButtonStyle,
+                      onMouseEnter: handleButtonMouseEnter,
+                      onMouseLeave: handleButtonMouseLeave,
+                      children: isMuted ? (
+                        /* Muted — speaker with an X */
+                        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M11 5L6 9H2v6h4l5 4V5Z", fill: "white" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("line", { x1: "23", y1: "9", x2: "17", y2: "15", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("line", { x1: "17", y1: "9", x2: "23", y2: "15", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
                         ] })
                       ) : (
-                        /* Play — solid triangle, nudged right for optical balance */
-                        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M5 3.5L17 10L5 16.5V3.5Z", fill: "white" }) })
+                        /* Unmuted — speaker with sound waves */
+                        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M11 5L6 9H2v6h4l5 4V5Z", fill: "white" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
+                        ] })
                       )
                     }
                   )

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import {
   HlsPlayer_default
-} from "./chunk-TXHD4F4A.mjs";
+} from "./chunk-2NTH6VLK.mjs";
 import {
   Button_default,
   ClientButton_default,
@@ -1963,7 +1963,7 @@ var DeviceAssetSelector_default = DeviceAssetSelector;
 
 // src/components/pageRenderingEngine/nodes/ImageNode.tsx
 import { Fragment as Fragment2, jsx as jsx37 } from "react/jsx-runtime";
-var HlsPlayer = dynamic2(() => import("./HlsPlayer-GV3FOPYT.mjs"), {
+var HlsPlayer = dynamic2(() => import("./HlsPlayer-VZHMWUEY.mjs"), {
   ssr: false
 });
 var getNestedValue = (obj, path) => {
@@ -3645,7 +3645,7 @@ var Pagination_default = Pagination;
 // src/components/pageRenderingEngine/nodes/ImageGalleryNode.tsx
 import dynamic6 from "next/dynamic";
 import { Fragment as Fragment8, jsx as jsx56, jsxs as jsxs31 } from "react/jsx-runtime";
-var HlsPlayer2 = dynamic6(() => import("./HlsPlayer-GV3FOPYT.mjs"), { ssr: false });
+var HlsPlayer2 = dynamic6(() => import("./HlsPlayer-VZHMWUEY.mjs"), { ssr: false });
 var deviceToMediaQuery = (device) => {
   switch (device) {
     case "sm":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acoustte-digital-services/digitalstore-controls-dev",
-  "version": "0.8.1-dev.20260430100756",
+  "version": "0.8.1-dev.20260502043006",
   "description": "Reusable React components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",