Merge changes into master

.gitignore

@@ -27,3 +27,8 @@ npm-*
 # for act
 .secrets
 launch.json
+
+# Environment variables
+.env
+.env.local
+.env.production

package.json

@@ -33,7 +33,9 @@
   },
   "dependencies": {
     "@microbit/microbit-universal-hex": "^0.2.2",
+    "@splitsoftware/splitio-react": "^1.11.0",
     "arraybuffer-loader": "^1.0.6",
+    "artie-scratch-vm": "4.8.39-artie",
     "autoprefixer": "^9.0.1",
     "balance-text": "^3.3.1",
     "base64-loader": "^1.0.0",
@@ -50,6 +52,7 @@
     "fastestsmallesttextencoderdecoder": "^1.0.22",
     "get-float-time-domain-data": "^0.1.0",
     "get-user-media-promise": "^1.1.4",
+    "html2canvas": "^1.4.1",
     "immutable": "^3.8.2",
     "intl": "^1.2.5",
     "js-base64": "^2.4.9",
@@ -83,25 +86,21 @@
     "react-tooltip": "^4.5.1",
     "react-virtualized": "^9.20.1",
     "redux": "^3.7.2",
+    "redux-logger": "^3.0.6",
     "redux-throttle": "^0.1.1",
     "scratch-audio": "^1.0.0",
     "scratch-blocks": "^1.1.6",
-    "artie-scratch-l10n": "3.18.5",
+    "artie-scratch-l10n": "3.19.000-artie",
     "scratch-paint": "^2.2.151",
     "scratch-render": "^1.0.233",
     "scratch-render-fonts": "^1.0.2",
     "scratch-storage": "^2.3.1",
     "scratch-svg-renderer": "^2.3.102",
-    "artie-scratch-vm": "4.8.39-artie",
     "startaudiocontext": "^1.2.1",
     "style-loader": "4.0.0",
     "to-style": "^1.3.3",
     "wav-encoder": "^1.3.0",
-    "xhr": "^2.5.0",
-
-    "redux-logger": "^3.0.6",
-    "html2canvas": "^1.4.1",
-    "@splitsoftware/splitio-react": "^1.11.0"
+    "xhr": "^2.5.0"
   },
   "peerDependencies": {
     "react": "^16.0.0",

src/components/artie-help/artie-loading-overlay.css

@@ -0,0 +1,30 @@
+@import "../../css/colors.css";
+
+.artie-loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10001; /* por encima de popups y menús */
+}
+
+.artie-loading-overlay__content {
+    background: hsla(215, 50%, 90%, 1); /* equivalente a $ui-tertiary */
+    border-radius: 12px;
+    padding: 24px 32px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+}
+
+.artie-loading-overlay__text {
+    color: hsla(0, 100%, 100%, 1); /* equivalente a $ui-white */
+    font-weight: bold;
+}

src/components/artie-help/artie-loading-overlay.jsx

@@ -0,0 +1,38 @@
+/* eslint-disable no-multiple-empty-lines */
+import classNames from 'classnames';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import {FormattedMessage} from 'react-intl';
+
+import Spinner from '../spinner/spinner.jsx';
+import styles from './artie-loading-overlay.css';
+
+const ArtieLoadingOverlay = ({
+    className
+}) => (
+    ReactDOM.createPortal(
+        <div className={classNames(styles['artie-loading-overlay'], className)}>
+            <div className={styles['artie-loading-overlay__content']}>
+                <Spinner
+                    large
+                    level="info"
+                />
+                <div className={styles['artie-loading-overlay__text']}>
+                    <FormattedMessage
+                        defaultMessage="Calculando tu ayuda..."
+                        description="Overlay text shown while waiting for ARTIE help response"
+                        id="gui.artie.loadingHelp"
+                    />
+                </div>
+            </div>
+        </div>,
+        document.body
+    )
+);
+
+ArtieLoadingOverlay.propTypes = {
+    className: PropTypes.string
+};
+
+export default ArtieLoadingOverlay; // EOF