gwchq-textjam 0.3.1 → 0.3.2

package/dist/index.js

@@ -64833,6 +64833,35 @@ function SvgButtonDots(props) {
 
 /***/ }),
 
+/***/ 62284:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
+var _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+
+function SvgCheckbox(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
+    width: 8,
+    height: 6,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M.75 2.75l2 2 4-4",
+    stroke: "#33625E",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })));
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgCheckbox);
+
+/***/ }),
+
 /***/ 16882:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -65494,6 +65523,35 @@ function SvgMinusCircle(props) {
 
 /***/ }),
 
+/***/ 36311:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
+var _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+
+function SvgMonitor(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
+    width: 32,
+    height: 32,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M10.8 28h10.4M16 22.667V28M5.6 4h20.8C27.836 4 29 5.194 29 6.667V20c0 1.473-1.164 2.667-2.6 2.667H5.6C4.164 22.667 3 21.473 3 20V6.667C3 5.194 4.164 4 5.6 4z",
+    stroke: "#003046",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })));
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgMonitor);
+
+/***/ }),
+
 /***/ 97512:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -68348,8 +68406,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(89379);
-/* harmony import */ var D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(53986);
+/* harmony import */ var C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(89379);
+/* harmony import */ var C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(53986);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
 /* harmony import */ var _hello_pangea_dnd__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(98850);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(14062);
@@ -68373,7 +68431,7 @@ var DraggableTab = _ref => {
       panelIndex,
       fileIndex
     } = _ref,
-    otherProps = (0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)(_ref, _excluded);
+    otherProps = (0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)(_ref, _excluded);
   var openFiles = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(state => state.editor.openedFiles);
   var openFilesCount = openFiles[panelIndex].length;
   var dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useDispatch)();
@@ -68390,7 +68448,7 @@ var DraggableTab = _ref => {
       switchToFileTab(panelIndex, (fileIndex + openFilesCount - 1) % openFilesCount);
     }
   };
-  var InnerTab = () => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(react_tabs__WEBPACK_IMPORTED_MODULE_2__.Tab, (0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
+  var InnerTab = () => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(react_tabs__WEBPACK_IMPORTED_MODULE_2__.Tab, (0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
     onClick: e => {
       e.stopPropagation();
       switchToFileTab(panelIndex, fileIndex);
@@ -68408,7 +68466,7 @@ var DraggableTab = _ref => {
         draggableProps,
         dragHandleProps
       } = _ref2;
-      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", (0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
+      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", (0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
         className: "draggable-tab",
         ref: innerRef
       }, draggableProps), dragHandleProps), {}, {
@@ -68430,8 +68488,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(89379);
-/* harmony import */ var D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(53986);
+/* harmony import */ var C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(89379);
+/* harmony import */ var C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(53986);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
 /* harmony import */ var _hello_pangea_dnd__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(98850);
 /* harmony import */ var react_tabs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(39243);
@@ -68450,8 +68508,8 @@ var DroppableTabList = _ref => {
       children: _children,
       index
     } = _ref,
-    otherProps = (0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)(_ref, _excluded);
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_tabs__WEBPACK_IMPORTED_MODULE_1__.TabList, (0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({}, otherProps), {}, {
+    otherProps = (0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)(_ref, _excluded);
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_tabs__WEBPACK_IMPORTED_MODULE_1__.TabList, (0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({}, otherProps), {}, {
     children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_hello_pangea_dnd__WEBPACK_IMPORTED_MODULE_6__.Droppable, {
       direction: "horizontal",
       droppableId: index.toString(),
@@ -68461,7 +68519,7 @@ var DroppableTabList = _ref => {
           droppableProps,
           placeholder
         } = _ref2;
-        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", (0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({
+        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", (0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({
           className: "droppable-tab-list"
         }, droppableProps), {}, {
           ref: innerRef,
@@ -101805,8 +101863,10 @@ var editorLightTheme = EditorView.theme({
 var utils_settings = __webpack_require__(62161);
 // EXTERNAL MODULE: ./src/redux/stores/index.ts
 var stores = __webpack_require__(32132);
-// EXTERNAL MODULE: ./src/components/AssetPreview/index.tsx
-var AssetPreview = __webpack_require__(91078);
+// EXTERNAL MODULE: ./src/components/Editor/EditorStatistic/EditorStatistic.tsx
+var EditorStatistic = __webpack_require__(47272);
+// EXTERNAL MODULE: ./src/components/AssetPreviewPanel/index.tsx
+var AssetPreviewPanel = __webpack_require__(66360);
 ;// ./src/components/Editor/EditorPanel/EditorPanel.jsx
 
 /* eslint-disable react-hooks/exhaustive-deps */
@@ -101829,6 +101889,8 @@ var AssetPreview = __webpack_require__(91078);
 
 
 
+
+
 
 
 
@@ -101847,6 +101909,8 @@ var EditorPanel = _ref => {
   } = (0,es.useTranslation)();
   var settings = (0,external_react_.useContext)(utils_settings.SettingsContext);
   var [characterLimitExceeded, setCharacterLimitExceeded] = (0,external_react_.useState)(false);
+  var [line, setLine] = (0,external_react_.useState)(0);
+  var [position, setPosition] = (0,external_react_.useState)(0);
   var updateStoredProject = c(content => {
     dispatch((0,EditorSlice.updateProjectComponent)((0,objectSpread2/* default */.A)((0,objectSpread2/* default */.A)({}, file), {}, {
       content
@@ -101912,7 +101976,7 @@ var EditorPanel = _ref => {
   }, [file, cascadeUpdate, editorViewRef]);
   if (!file) return null;
   if (file.isBinary) {
-    return /*#__PURE__*/(0,jsx_runtime.jsx)(AssetPreview/* AssetPreview */.n, {
+    return /*#__PURE__*/(0,jsx_runtime.jsx)(AssetPreviewPanel.AssetPreviewPanel, {
       file: file
     });
   }
@@ -101924,20 +101988,31 @@ var EditorPanel = _ref => {
       updateStoredProject(viewUpdate.state.doc.toString());
     }
   });
-  var getMode = () => {
-    switch (file.extension) {
-      case "html":
-        return html();
-      case "css":
-        return css();
-      case "py":
-        return python();
-      case "js":
-        return javascript();
-      default:
-        return html();
+  var fileModes = {
+    html: {
+      title: "HTML",
+      renderer: html()
+    },
+    css: {
+      title: "CSS",
+      renderer: css()
+    },
+    py: {
+      title: "Python",
+      renderer: python()
+    },
+    js: {
+      title: "JavaScript",
+      renderer: javascript()
     }
   };
+  var getMode = () => {
+    return !!fileModes[file.extension] ? fileModes[file.extension].renderer : fileModes["html"].renderer;
+  };
+  var getModeTitle = () => {
+    return !!fileModes[file.extension] ? fileModes[file.extension].title : file.extension;
+  };
+
   // const isDarkMode =
   //   cookies.theme === "dark" ||
   //   (!cookies.theme &&
@@ -101946,11 +102021,24 @@ var EditorPanel = _ref => {
 
   // setting hardcode light theme for TextJam phase 1
   var editorTheme = editorLightTheme;
+  var getCaretPosition = () => {
+    var _editorViewRef$curren, _editorViewRef$curren2;
+    var pos = (_editorViewRef$curren = editorViewRef.current) === null || _editorViewRef$curren === void 0 || (_editorViewRef$curren = _editorViewRef$curren.state) === null || _editorViewRef$curren === void 0 || (_editorViewRef$curren = _editorViewRef$curren.selection) === null || _editorViewRef$curren === void 0 || (_editorViewRef$curren = _editorViewRef$curren.main) === null || _editorViewRef$curren === void 0 ? void 0 : _editorViewRef$curren.head;
+    var line = (_editorViewRef$curren2 = editorViewRef.current) === null || _editorViewRef$curren2 === void 0 ? void 0 : _editorViewRef$curren2.state.doc.lineAt(pos);
+    setLine(line.number);
+    setPosition(pos - line.from + 1);
+  };
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
     className: "editor-wrapper",
     children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", {
       className: "editor editor--".concat(settings.fontSize),
-      ref: editor
+      ref: editor,
+      onKeyUp: getCaretPosition,
+      onClick: getCaretPosition
+    }), /*#__PURE__*/(0,jsx_runtime.jsx)(EditorStatistic.EditorStatistic, {
+      line: line,
+      position: position,
+      title: getModeTitle()
     }), characterLimitExceeded && /*#__PURE__*/(0,jsx_runtime.jsx)(er, {
       title: t("editorPanel.characterLimitError"),
       type: "error",
@@ -103015,7 +103103,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(89379);
+/* harmony import */ var C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(89379);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(14062);
 /* harmony import */ var _redux_EditorSlice__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(68512);
@@ -103129,7 +103217,7 @@ var ProjectName = _ref => {
       id: "project_name_label",
       className: _styles_module_scss__WEBPACK_IMPORTED_MODULE_3__["default"].projectLabel,
       children: "Project Name"
-    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", (0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", (0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
       className: classnames__WEBPACK_IMPORTED_MODULE_2___default()(_styles_module_scss__WEBPACK_IMPORTED_MODULE_3__["default"].projectName, className)
     }, hoverProps), {}, {
       children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)((components_Tooltip_Tooltip__WEBPACK_IMPORTED_MODULE_8___default()), {
@@ -103147,6 +103235,7 @@ var ProjectName = _ref => {
         onKeyUp: handleKeyUp,
         value: name,
         readOnly: !isEditing,
+        maxLength: 255,
         onChange: handleOnChange,
         onBlur: handleOnBlur,
         className: classnames__WEBPACK_IMPORTED_MODULE_2___default()(_styles_module_scss__WEBPACK_IMPORTED_MODULE_3__["default"].projectInput, {
@@ -103213,6 +103302,11 @@ var Button = __webpack_require__(79428);
 var external_react_redux_ = __webpack_require__(14062);
 // EXTERNAL MODULE: ./src/redux/EditorSlice.ts
 var EditorSlice = __webpack_require__(68512);
+// EXTERNAL MODULE: ./src/components/Tooltip/Tooltip.tsx
+var Tooltip = __webpack_require__(26982);
+var Tooltip_default = /*#__PURE__*/__webpack_require__.n(Tooltip);
+// EXTERNAL MODULE: ./src/hooks/useHover.ts
+var useHover = __webpack_require__(78556);
 // EXTERNAL MODULE: ./node_modules/react/jsx-runtime.js
 var jsx_runtime = __webpack_require__(74848);
 ;// ./src/components/RunButton/RunButton.jsx
@@ -103224,6 +103318,8 @@ var _excluded = ["className"];
 
 
 
+
+
 var RunButton = _ref => {
   var {
       className
@@ -103233,15 +103329,26 @@ var RunButton = _ref => {
   var activeRunner = (0,external_react_redux_.useSelector)(state => state.editor.activeRunner);
   var loadedRunner = (0,external_react_redux_.useSelector)(state => state.editor.loadedRunner);
   var dispatch = (0,external_react_redux_.useDispatch)();
+  var {
+    hovered,
+    hoverProps
+  } = (0,useHover.useHover)();
   var onClickRun = () => {
     dispatch((0,EditorSlice.triggerCodeRun)());
     // reset page when running code to ensure it starts from the beginning
     dispatch((0,EditorSlice.setPage)(null));
   };
-  return /*#__PURE__*/(0,jsx_runtime.jsx)(Button["default"], (0,objectSpread2/* default */.A)({
-    disabled: !activeRunner || activeRunner !== loadedRunner || codeRunLoading,
-    onClickHandler: onClickRun
-  }, props));
+  var isButtonDisabled = !activeRunner || activeRunner !== loadedRunner || codeRunLoading;
+  return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", (0,objectSpread2/* default */.A)((0,objectSpread2/* default */.A)({}, hoverProps), {}, {
+    children: [/*#__PURE__*/(0,jsx_runtime.jsx)((Tooltip_default()), {
+      message: "We\u2019re still loading what you need to run your code. Try again in a moment!",
+      visible: hovered && isButtonDisabled,
+      position: "bottom"
+    }), /*#__PURE__*/(0,jsx_runtime.jsx)(Button["default"], (0,objectSpread2/* default */.A)({
+      disabled: isButtonDisabled,
+      onClickHandler: onClickRun
+    }, props))]
+  }));
 };
 /* harmony default export */ const RunButton_RunButton = (RunButton);
 // EXTERNAL MODULE: ./node_modules/classnames/index.js
@@ -103460,6 +103567,7 @@ var jsx_runtime = __webpack_require__(74848);
 
 
 var NO_CHANGES_TO_SAVE_MESSAGE = "No new changes to save!";
+var DEFAULT_TOOLTIP = "Save project";
 var SaveButton = props => {
   var dispatch = (0,external_react_redux_.useDispatch)();
   var {
@@ -103489,8 +103597,8 @@ var SaveButton = props => {
     className: styles_module.wrapper
   }, hoverProps), {}, {
     children: [/*#__PURE__*/(0,jsx_runtime.jsx)((Tooltip_default()), {
-      message: NO_CHANGES_TO_SAVE_MESSAGE,
-      visible: !hasChangesToSave && hovered,
+      message: DEFAULT_TOOLTIP + (hasChangesToSave ? "" : "\n" + NO_CHANGES_TO_SAVE_MESSAGE),
+      visible: hovered,
       position: "bottom"
     }), /*#__PURE__*/(0,jsx_runtime.jsx)(Button["default"], (0,objectSpread2/* default */.A)({
       buttonText: buttonText,
@@ -106198,6 +106306,14 @@ instance.use(es.initReactI18next)
 
   interpolation: {
     escapeValue: false // not needed for react!!
+  },
+  // Disable Suspense integration in react-i18next so that translation
+  // loads (initial + i18n.changeLanguage) never throw promises that would
+  // bubble to the root <Suspense fallback={<Loading />}> in App.tsx and
+  // remount the Loading component (restarting the GIF / dot animation).
+  // The visible loading state is driven by redux in WebComponentLoader.
+  react: {
+    useSuspense: false
   }
 });
 /* harmony default export */ const i18n = (instance);
@@ -142811,6 +142927,18 @@ __webpack_require__.r(__webpack_exports__);
 // extracted by mini-css-extract-plugin
 
 
+/***/ }),
+
+/***/ 22401:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+// extracted by mini-css-extract-plugin
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"previewContainer":"styles-module__previewContainer--gHB-N"});
+
 /***/ }),
 
 /***/ 63724:
@@ -142837,6 +142965,18 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
+/***/ 89464:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+// extracted by mini-css-extract-plugin
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"grey-rpi-grey-15":"#d5d7dc","grey-rpi-grey-40":"#9497a4","grey-rpi-grey-5":"#f1f2f3","grey-rpi-grey-70":"#4a4d59","grey-rpf-white":"#fff","editorStatistic":"styles-module__editorStatistic--EyK0S","contentType":"styles-module__contentType--Sb4eE"});
+
+/***/ }),
+
 /***/ 71244:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -142861,6 +143001,18 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
+/***/ 38231:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+// extracted by mini-css-extract-plugin
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"grey-rpi-grey-15":"#d5d7dc","grey-rpi-grey-40":"#9497a4","grey-rpi-grey-5":"#f1f2f3","grey-rpi-grey-70":"#4a4d59","grey-rpf-white":"#fff","container":"styles-module__container--cs4+2","title":"styles-module__title--7NEra"});
+
+/***/ }),
+
 /***/ 12914:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -142941,7 +143093,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"grey-rpi-grey-15":"#d5d7dc","grey-rpi-grey-40":"#9497a4","grey-rpi-grey-5":"#f1f2f3","grey-rpi-grey-70":"#4a4d59","grey-rpf-white":"#fff","tree":"styles-module__tree--KziAJ","fileTreeActions":"styles-module__fileTreeActions--k+Wsd","fileTreeActionsLabel":"styles-module__fileTreeActionsLabel--dPZp4","importButton":"styles-module__importButton--rcLUm","importArrowIcon":"styles-module__importArrowIcon--3eOLN","label":"styles-module__label--WY51f","iconButton":"styles-module__iconButton--6UIVe","iconButtonFilled":"styles-module__iconButtonFilled--w2vJC","dragline":"styles-module__dragline--RXmTT","emptyStateContainer":"styles-module__emptyStateContainer--AnTAm","emptyStateIcon":"styles-module__emptyStateIcon--sDlxK","emptyStateMessage":"styles-module__emptyStateMessage--OkPax"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"grey-rpi-grey-15":"#d5d7dc","grey-rpi-grey-40":"#9497a4","grey-rpi-grey-5":"#f1f2f3","grey-rpi-grey-70":"#4a4d59","grey-rpf-white":"#fff","tree":"styles-module__tree--KziAJ","fileTreeActions":"styles-module__fileTreeActions--k+Wsd","tooltipWrapper":"styles-module__tooltipWrapper--wltXE","fileTreeActionsLabel":"styles-module__fileTreeActionsLabel--dPZp4","importButton":"styles-module__importButton--rcLUm","importArrowIcon":"styles-module__importArrowIcon--3eOLN","label":"styles-module__label--WY51f","iconButton":"styles-module__iconButton--6UIVe","iconButtonFilled":"styles-module__iconButtonFilled--w2vJC","dragline":"styles-module__dragline--RXmTT","emptyStateContainer":"styles-module__emptyStateContainer--AnTAm","emptyStateIcon":"styles-module__emptyStateIcon--sDlxK","emptyStateMessage":"styles-module__emptyStateMessage--OkPax"});
 
 /***/ }),
 
@@ -368684,15 +368836,34 @@ const TextJamEditor = ({ onLogoutClick = () => { }, onViewProfileClick = () => {
 exports.TextJamEditor = TextJamEditor;
 
 
+/***/ }),
+
+/***/ 66360:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.AssetPreviewPanel = void 0;
+const jsx_runtime_1 = __webpack_require__(74848);
+const styles_module_scss_1 = __importDefault(__webpack_require__(22401));
+const AssetPreview_1 = __webpack_require__(91078);
+const AssetPreviewPanel = ({ file, }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.previewContainer, children: (0, jsx_runtime_1.jsx)(AssetPreview_1.AssetPreview, { file: file }) }));
+};
+exports.AssetPreviewPanel = AssetPreviewPanel;
+
+
 /***/ }),
 
 /***/ 91078:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
-var __webpack_unused_export__;
 
-__webpack_unused_export__ = ({ value: true });
-exports.n = void 0;
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.AssetPreview = void 0;
 const jsx_runtime_1 = __webpack_require__(74848);
 const react_1 = __webpack_require__(51649);
 const binaryStore_1 = __webpack_require__(5060);
@@ -368719,7 +368890,7 @@ const AssetPreview = ({ file }) => {
     if (!url)
         return null;
     if (file.mimeType?.startsWith("image/")) {
-        return ((0, jsx_runtime_1.jsx)("img", { src: url, alt: file.name || "Asset preview", style: { maxWidth: "100%" } }));
+        return ((0, jsx_runtime_1.jsx)("img", { src: url, alt: file.name || "Asset preview", style: { width: "fit-content", maxWidth: "100%" } }));
     }
     if (file.mimeType?.startsWith("audio/")) {
         return (0, jsx_runtime_1.jsx)("audio", { src: url, controls: true, style: { margin: 20 } });
@@ -368732,7 +368903,7 @@ const AssetPreview = ({ file }) => {
     }
     return (0, jsx_runtime_1.jsxs)("div", { children: ["File: ", file.name] });
 };
-exports.n = AssetPreview;
+exports.AssetPreview = AssetPreview;
 
 
 /***/ }),
@@ -368804,7 +368975,7 @@ const HistoryButton = ({ className }) => {
     const handleClick = () => {
         setIsContextOpen((prev) => !prev);
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.btnContainer, ...hoverProps, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Nothing here yet! Once you save your work, versions will appear here so you can restore them.", visible: hovered && !commits?.length, position: "bottom" }), (0, jsx_runtime_1.jsx)(Button_1.default, { buttonRef: ref, className: (0, classnames_1.default)(styles_module_scss_1.default.historyButton, className, {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.btnContainer, ...hoverProps, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Nothing here yet! Once you save your work, versions will appear here so you can restore them.", visible: hovered && !commits?.length, position: "bottom" }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Load previous versions", visible: hovered && !!commits?.length, position: "bottom" }), (0, jsx_runtime_1.jsx)(Button_1.default, { buttonRef: ref, className: (0, classnames_1.default)(styles_module_scss_1.default.historyButton, className, {
                             [styles_module_scss_1.default.historyActive]: isContextOpen,
                         }), variant: "tertiary", onClickHandler: handleClick, ButtonIcon: () => (0, SvgIcon_1.SvgIcon)({ SvgElement: history_svg_1.default, size: 24 }), disabled: !commits?.length })] }), (0, jsx_runtime_1.jsx)(CommitHistoryMenu_1.CommitHistoryMenu, { isOpen: isContextOpen, onClose: () => setIsContextOpen(false), commits: commits, btnRef: ref, activeCommitId: project.commitId ?? undefined })] }));
 };
@@ -368851,13 +369022,16 @@ const stores_1 = __webpack_require__(32132);
 const SvgIcon_1 = __webpack_require__(82917);
 const Button_1 = __importDefault(__webpack_require__(79428));
 const createProjectArchive_1 = __webpack_require__(46514);
+const Tooltip_1 = __importDefault(__webpack_require__(26982));
+const useHover_1 = __webpack_require__(78556);
 const DownloadButton = (props) => {
     const project = (0, stores_1.useAppSelector)((state) => state.editor.project);
+    const { hovered, hoverProps } = (0, useHover_1.useHover)();
     const onClickDownload = async () => {
         const { zipBlob: content } = await (0, createProjectArchive_1.createProjectArchive)(project);
         file_saver_1.default.saveAs(content, `${(0, js_convert_case_1.toSnakeCase)(project.name || "untitled_project")}.zip`);
     };
-    return ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "tertiary", ButtonIcon: () => (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: download_svg_1.default, size: 24 }), onClickHandler: onClickDownload, ...props }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...hoverProps, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { variant: "tertiary", ButtonIcon: () => (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: download_svg_1.default, size: 24 }), onClickHandler: onClickDownload, ...props }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Download project", visible: hovered, position: "bottom" })] }));
 };
 exports["default"] = DownloadButton;
 
@@ -369048,6 +369222,28 @@ const EditorInput = () => {
 exports["default"] = EditorInput;
 
 
+/***/ }),
+
+/***/ 47272:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.EditorStatistic = void 0;
+const jsx_runtime_1 = __webpack_require__(74848);
+const SvgIcon_1 = __webpack_require__(82917);
+const checkbox_svg_1 = __importDefault(__webpack_require__(62284));
+const styles_module_scss_1 = __importDefault(__webpack_require__(89464));
+const EditorStatistic = (props) => {
+    const TAB_SIZE = 2;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.editorStatistic, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentType, children: ["{", (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { size: 6, SvgElement: checkbox_svg_1.default }), "} ", props.title] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentStatistic, children: ["Ln ", props.line, ", Col ", props.position, " * Spaces ", TAB_SIZE] })] }));
+};
+exports.EditorStatistic = EditorStatistic;
+
+
 /***/ }),
 
 /***/ 80335:
@@ -370164,7 +370360,7 @@ const PyodideRunner = ({ active, packageApiUrl, }) => {
         console.warn("PyodideWorker is not initialized");
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.pythonrunnerContainer, styles_module_scss_1.default.pyodiderunner, active && styles_module_scss_1.default.active), children: [(0, jsx_runtime_1.jsxs)(OutputTabPanel_1.OutputTabPanel, { title: "Terminal", icon: console_svg_1.default, readOnly: readOnly, children: [(0, jsx_runtime_1.jsx)(ErrorMessage_1.default, {}), (0, jsx_runtime_1.jsx)("pre", { className: styles_module_scss_1.default.console, onClick: consoleInput_1.shiftFocusToInput, ref: output })] }), (0, jsx_runtime_1.jsx)(ResizableWithHandle_1.default, { "data-testid": "proj-console-container", handleDirection: "top", defaultHeight: "50%", className: styles_module_scss_1.default.resizeContainer, handleClassName: styles_module_scss_1.default.resizeHandleContainer, children: (0, jsx_runtime_1.jsx)(OutputTabPanel_1.OutputTabPanel, { title: "Visual output", icon: preview_svg_1.default, readOnly: readOnly, children: (0, jsx_runtime_1.jsx)(VisualOutputPane_1.default, { visuals: visuals, setVisuals: setVisuals }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.pythonrunnerContainer, styles_module_scss_1.default.pyodiderunner, active && styles_module_scss_1.default.active), children: [(0, jsx_runtime_1.jsxs)(OutputTabPanel_1.OutputTabPanel, { title: "Terminal", icon: console_svg_1.default, readOnly: readOnly, children: [(0, jsx_runtime_1.jsx)(ErrorMessage_1.default, {}), (0, jsx_runtime_1.jsx)("pre", { className: styles_module_scss_1.default.console, onClick: consoleInput_1.shiftFocusToInput, ref: output })] }), (0, jsx_runtime_1.jsx)(ResizableWithHandle_1.default, { "data-testid": "proj-console-container", handleDirection: "top", defaultHeight: "50%", className: styles_module_scss_1.default.resizeContainer, handleClassName: styles_module_scss_1.default.resizeHandleContainer, children: (0, jsx_runtime_1.jsx)(OutputTabPanel_1.OutputTabPanel, { title: "VNC", icon: preview_svg_1.default, readOnly: readOnly, children: (0, jsx_runtime_1.jsx)(VisualOutputPane_1.default, { visuals: visuals, setVisuals: setVisuals }) }) })] }));
 };
 exports["default"] = PyodideRunner;
 
@@ -370184,6 +370380,7 @@ const react_1 = __webpack_require__(51649);
 const highcharts_1 = __importDefault(__webpack_require__(14783));
 const plotly_js_1 = __importDefault(__webpack_require__(28850));
 const styles_module_scss_1 = __importDefault(__webpack_require__(12914));
+const VisualOutputPaneEmpty_1 = __importDefault(__webpack_require__(93290));
 const VisualOutputPane = ({ visuals, setVisuals }) => {
     const output = (0, react_1.useRef)(null);
     const showVisual = (0, react_1.useCallback)((visual, output) => {
@@ -370245,7 +370442,7 @@ const VisualOutputPane = ({ visuals, setVisuals }) => {
             setVisuals((visuals) => showVisuals(visuals, output));
         }
     }, [visuals, setVisuals, showVisuals]);
-    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.visualOutput, children: (0, jsx_runtime_1.jsx)("div", { ref: output, className: styles_module_scss_1.default.pythonGraphic }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.visualOutput, children: visuals.length !== 0 ? ((0, jsx_runtime_1.jsx)("div", { ref: output, className: styles_module_scss_1.default.pythonGraphic })) : ((0, jsx_runtime_1.jsx)(VisualOutputPaneEmpty_1.default, {})) }));
 };
 const elementFromProps = (map) => {
     const tag = map.get("tag");
@@ -370264,6 +370461,27 @@ const elementFromProps = (map) => {
 exports["default"] = VisualOutputPane;
 
 
+/***/ }),
+
+/***/ 93290:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+const jsx_runtime_1 = __webpack_require__(74848);
+const styles_module_scss_1 = __importDefault(__webpack_require__(38231));
+const monitor_svg_1 = __importDefault(__webpack_require__(36311));
+const SvgIcon_1 = __webpack_require__(82917);
+const Text_1 = __webpack_require__(82803);
+const VisualOutputPaneEmpty = () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, children: [(0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: monitor_svg_1.default, size: 32, "aria-hidden": "true", focusable: "false" }), (0, jsx_runtime_1.jsx)(Text_1.Text, { size: 20, className: styles_module_scss_1.default.title, weight: "bold", children: "View your app\u2019s desktop screen output" }), (0, jsx_runtime_1.jsx)(Text_1.Text, { size: 12, children: "No VNC browser is currently running with compatible ports available to view." })] }));
+};
+exports["default"] = VisualOutputPaneEmpty;
+
+
 /***/ }),
 
 /***/ 85799:
@@ -371666,12 +371884,15 @@ const SvgIcon_1 = __webpack_require__(82917);
 const arrow_right_svg_1 = __importDefault(__webpack_require__(17297));
 const styles_module_scss_1 = __importDefault(__webpack_require__(51191));
 const ContextMenu_1 = __importDefault(__webpack_require__(39179));
+const Tooltip_1 = __importDefault(__webpack_require__(26982));
+const useHover_1 = __webpack_require__(78556);
 const Dropdown = (props) => {
     const { ButtonIcon, buttonClassname, menuOptions, menuPosition, ariaLabel } = props;
     const { direction = "bottom", align = "center" } = menuPosition || {};
     const [isOpen, setOpen] = (0, react_1.useState)(false);
     const buttonRef = (0, react_1.useRef)(null);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", "aria-label": ariaLabel, className: (0, classnames_1.default)(buttonClassname, isOpen && styles_module_scss_1.default.buttonActive), onClick: () => setOpen((prev) => !prev), ref: buttonRef, children: [ButtonIcon && ((0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: ButtonIcon, size: 16, "aria-hidden": "true", focusable: "false" })), (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { className: (0, classnames_1.default)(styles_module_scss_1.default.arrowIcon, isOpen && styles_module_scss_1.default.arrowIconOpen), style: { rotate: `${isOpen ? "-" : ""}90deg` }, SvgElement: arrow_right_svg_1.default, size: 8, "aria-hidden": "true", focusable: "false" })] }), (0, jsx_runtime_1.jsx)(ContextMenu_1.default, { anchorRef: buttonRef, menuOptions: menuOptions, opened: isOpen, onClose: () => setOpen(false), align: align, direction: direction, gap: 4 })] }));
+    const { hovered, hoverProps } = (0, useHover_1.useHover)();
+    return ((0, jsx_runtime_1.jsxs)("div", { ...hoverProps, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", "aria-label": ariaLabel, className: (0, classnames_1.default)(buttonClassname, isOpen && styles_module_scss_1.default.buttonActive), onClick: () => setOpen((prev) => !prev), ref: buttonRef, children: [ButtonIcon && ((0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: ButtonIcon, size: 16, "aria-hidden": "true", focusable: "false" })), (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { className: (0, classnames_1.default)(styles_module_scss_1.default.arrowIcon, isOpen && styles_module_scss_1.default.arrowIconOpen), style: { rotate: `${isOpen ? "-" : ""}90deg` }, SvgElement: arrow_right_svg_1.default, size: 8, "aria-hidden": "true", focusable: "false" })] }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Upload files", visible: hovered && !isOpen, position: "fixed" }), (0, jsx_runtime_1.jsx)(ContextMenu_1.default, { anchorRef: buttonRef, menuOptions: menuOptions, opened: isOpen, onClose: () => setOpen(false), align: align, direction: direction, gap: 4 })] }));
 };
 exports["default"] = Dropdown;
 
@@ -371746,10 +371967,15 @@ const FileTreeContext_1 = __webpack_require__(5323);
 const ProjectTypes_1 = __webpack_require__(27130);
 const Text_1 = __webpack_require__(82803);
 const stores_1 = __webpack_require__(32132);
+const Tooltip_1 = __importDefault(__webpack_require__(26982));
+const useHover_1 = __webpack_require__(78556);
 const FileTreeActions = ({ hasExpandedNodes, }) => {
     const { expandAll, collapseAll, createComponent, importFiles, importFolder } = (0, react_1.useContext)(FileTreeContext_1.TreeContext);
     const isReadOnly = (0, stores_1.useAppSelector)((state) => state.editor.readOnly);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.fileTreeActions, children: [hasExpandedNodes ? ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Collapse all folders", onClick: collapseAll, className: styles_module_scss_1.default.iconButton, children: (0, jsx_runtime_1.jsx)(minus_circle_svg_1.default, { "aria-hidden": "true", focusable: "false" }) })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Expand all folders", onClick: expandAll, className: styles_module_scss_1.default.iconButton, children: (0, jsx_runtime_1.jsx)(plus_circle_svg_1.default, { "aria-hidden": "true", focusable: "false" }) })), (0, jsx_runtime_1.jsx)(Text_1.Text, { size: 12, weight: "medium", className: styles_module_scss_1.default.fileTreeActionsLabel, children: "Project files" }), !isReadOnly && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Add folder", onClick: () => createComponent(ProjectTypes_1.ProjectComponentType.DIR), className: (0, classnames_1.default)([styles_module_scss_1.default.iconButtonFilled, styles_module_scss_1.default.iconButton]), children: (0, jsx_runtime_1.jsx)(add_folder_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Add file", onClick: () => createComponent(ProjectTypes_1.ProjectComponentType.FILE), className: (0, classnames_1.default)([styles_module_scss_1.default.iconButtonFilled, styles_module_scss_1.default.iconButton]), children: (0, jsx_runtime_1.jsx)(add_file_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)(ImportButton_1.ImportButton, { importFiles: importFiles, importFolder: importFolder })] }))] }));
+    const { hovered: toggleHovered, hoverProps: toggleHoverProps } = (0, useHover_1.useHover)();
+    const { hovered: addFolderHovered, hoverProps: addFolderHoverProps } = (0, useHover_1.useHover)();
+    const { hovered: addFileHovered, hoverProps: addFileHoverProps } = (0, useHover_1.useHover)();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.fileTreeActions, children: [hasExpandedNodes ? ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.tooltipWrapper, ...toggleHoverProps, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Collapse all folders", onClick: collapseAll, className: styles_module_scss_1.default.iconButton, children: (0, jsx_runtime_1.jsx)(minus_circle_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Collapse all folders", visible: toggleHovered, position: "fixed" })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.tooltipWrapper, ...toggleHoverProps, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Expand all folders", onClick: expandAll, className: styles_module_scss_1.default.iconButton, children: (0, jsx_runtime_1.jsx)(plus_circle_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Expand all folders", visible: toggleHovered, position: "fixed" })] })), (0, jsx_runtime_1.jsx)(Text_1.Text, { size: 12, weight: "medium", className: styles_module_scss_1.default.fileTreeActionsLabel, children: "Project files" }), !isReadOnly && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.tooltipWrapper, ...addFolderHoverProps, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Add folder", onClick: () => createComponent(ProjectTypes_1.ProjectComponentType.DIR), className: (0, classnames_1.default)([styles_module_scss_1.default.iconButtonFilled, styles_module_scss_1.default.iconButton]), children: (0, jsx_runtime_1.jsx)(add_folder_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Add folder", visible: addFolderHovered, position: "fixed" })] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.tooltipWrapper, ...addFileHoverProps, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Add file", onClick: () => createComponent(ProjectTypes_1.ProjectComponentType.FILE), className: (0, classnames_1.default)([styles_module_scss_1.default.iconButtonFilled, styles_module_scss_1.default.iconButton]), children: (0, jsx_runtime_1.jsx)(add_file_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Add file", visible: addFileHovered, position: "fixed" })] }), (0, jsx_runtime_1.jsx)(ImportButton_1.ImportButton, { importFiles: importFiles, importFolder: importFolder })] }))] }));
 };
 exports.FileTreeActions = FileTreeActions;
 
@@ -371894,9 +372120,15 @@ const DeleteOption_1 = __webpack_require__(50185);
 const react_redux_1 = __webpack_require__(14062);
 const EditorSlice_1 = __webpack_require__(68512);
 const types_1 = __webpack_require__(92932);
+const createProjectArchive_1 = __webpack_require__(46514);
+const js_convert_case_1 = __webpack_require__(61647);
+const stores_1 = __webpack_require__(32132);
+const file_saver_1 = __importDefault(__webpack_require__(4213));
+const sendToast_1 = __webpack_require__(50068);
 const ItemContextMenu = ({ item, menuPosition, isOpened, onClose, openImportFileDialog, }) => {
     const dispatch = (0, react_redux_1.useDispatch)();
     const { startRenaming, createComponent, downloadFile, removeComponent } = (0, react_1.useContext)(FileTreeContext_1.TreeContext);
+    const project = (0, stores_1.useAppSelector)((state) => state.editor.project);
     const handleDelete = ({ isFolder }) => {
         dispatch((0, EditorSlice_1.showModal)({
             modal: types_1.ModalType.REMOVE_ITEM,
@@ -371930,6 +372162,25 @@ const ItemContextMenu = ({ item, menuPosition, isOpened, onClose, openImportFile
             icon: (0, jsx_runtime_1.jsx)(OptionIcon_1.OptionIcon, { icon: upload_file_svg_1.default }),
             action: openImportFileDialog,
         },
+        {
+            text: "Download Folder",
+            icon: (0, jsx_runtime_1.jsx)(OptionIcon_1.OptionIcon, { icon: download_svg_1.default }),
+            // Sync action that fires-and-handles its own async work. `ContextMenu`
+            // calls `option.action?.()` without awaiting, so we must catch errors
+            // here ourselves to avoid an unhandled promise rejection.
+            action: () => {
+                const folder = item.getItemData();
+                const fileName = `${(0, js_convert_case_1.toSnakeCase)(project.name || "untitled_project")}_${(0, js_convert_case_1.toSnakeCase)(folder.name || "folder")}.zip`;
+                const downloadFolder = async () => {
+                    const { zipBlob: content } = await (0, createProjectArchive_1.createProjectArchive)(project, folder);
+                    file_saver_1.default.saveAs(content, fileName);
+                };
+                downloadFolder().catch((err) => {
+                    console.error("Download Folder failed:", err);
+                    (0, sendToast_1.showError)(`Failed to download folder "${folder.name}".`);
+                });
+            },
+        },
         {
             text: (0, jsx_runtime_1.jsx)(DeleteOption_1.DeleteOption, {}),
             action: () => handleDelete({ isFolder: true }),
@@ -372674,20 +372925,27 @@ const classnames_1 = __importDefault(__webpack_require__(46942));
 const styles_module_scss_1 = __importDefault(__webpack_require__(21852));
 const UserMenu_1 = __importDefault(__webpack_require__(2957));
 const backgroundColors = [
-    'D7F9F4', '43D6B9',
-    '0D9C90', 'E5F8FF',
-    'FEEFEE', 'F37C6F',
-    'FFF3E8', 'F9B88C',
-    'FA7815', 'FCE688'
+    "D7F9F4",
+    "43D6B9",
+    "0D9C90",
+    "E5F8FF",
+    "FEEFEE",
+    "F37C6F",
+    "FFF3E8",
+    "F9B88C",
+    "FA7815",
+    "FCE688",
 ];
 const SidebarBarOption = (props) => {
-    const { Icon, isActive, name, title, toggleOption, buttonText, isUser, action } = props;
+    const { Icon, isActive, name, title, toggleOption, buttonText, isUser, action, } = props;
     const userId = (0, stores_1.useAppSelector)((state) => state.user.userId);
     const isFacilitator = (0, stores_1.useAppSelector)((state) => state.user.isFacilitator);
     const avatarSrc = (0, stores_1.useAppSelector)((state) => state.user.avatarSrc);
     const avatarStyle = isUser
         ? isFacilitator
-            ? { background: 'linear-gradient(90deg,#d7f9f4,#fff9e2,#fff3e8,#e5f8ff,#d7f9f4)' }
+            ? {
+                background: "linear-gradient(90deg,#d7f9f4,#fff9e2,#fff3e8,#e5f8ff,#d7f9f4)",
+            }
             : { backgroundColor: `#${backgroundColors[(userId ?? 0) % 10]}` }
         : null;
     const [isMenuOpen, setIsMenuOpen] = (0, react_1.useState)(false);
@@ -373604,15 +373862,8 @@ const WebComponentLoader = (props) => {
             }, children: [(0, jsx_runtime_1.jsx)(ToastMessages_1.ToastMessagesProvider, {}), (0, jsx_runtime_1.jsxs)("div", { id: "textjam-root", className: `editor-shell --${themeDefault}`, children: [(0, jsx_runtime_1.jsx)(WebComponentProject_1.default, { nameEditable: projectNameEditable, sidebarOptions: sidebarOptions, packageApiUrl: packageApiUrl }), errorModalShowing && (0, jsx_runtime_1.jsx)(ErrorModal_1.default, {}), modal, shouldBlockNavigation && (0, jsx_runtime_1.jsx)(SaveBeforeLeave_1.SaveBeforeLeaveModal, {})] })] }) }));
     const renderFailedState = () => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("p", { children: t("webComponent.failed") }) }));
     const renderLoadingState = () => (0, jsx_runtime_1.jsx)(Loading_1.default, {});
-    if (loading === types_1.LoadingState.SUCCESS) {
-        return renderSuccessState();
-    }
-    else if (loading === types_1.LoadingState.FAILED) {
-        return renderFailedState();
-    }
-    else {
-        return renderLoadingState();
-    }
+    const isLoadingState = ![types_1.LoadingState.SUCCESS, types_1.LoadingState.FAILED].includes(loading);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [loading === types_1.LoadingState.SUCCESS && renderSuccessState(), loading === types_1.LoadingState.FAILED && renderFailedState(), isLoadingState && renderLoadingState()] }));
 };
 exports["default"] = WebComponentLoader;
 
@@ -376500,20 +376751,39 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.createProjectArchive = createProjectArchive;
-const jszip_1 = __importDefault(__webpack_require__(71710));
 const ProjectTypes_1 = __webpack_require__(27130);
+const jszip_1 = __importDefault(__webpack_require__(71710));
 const binaryStore_1 = __webpack_require__(5060);
-async function createProjectArchive(project) {
+const projectPath_1 = __webpack_require__(95506);
+async function createProjectArchive(project, folder) {
     let unzipSize = 0;
     const zip = new jszip_1.default();
     await Promise.all(project.components.map(async (component) => {
         if (component.type !== ProjectTypes_1.ProjectComponentType.FILE)
             return;
         const file = component;
-        // remove leading slash for windows compatibility
-        const safePath = file.path.startsWith("/")
-            ? file.path.slice(1)
-            : file.path;
+        // Normalize once; we decide between "everything" and "scope to a
+        // subfolder" by inspecting the normalized folder path.
+        const normalizedFile = (0, projectPath_1.normalizePath)(file.path);
+        const normalizedFolder = folder ? (0, projectPath_1.normalizePath)(folder.path) : null;
+        let safePath;
+        if (normalizedFolder && normalizedFolder !== "/") {
+            // Scoped to a non-root subfolder: include only files within it,
+            // with paths relative to that folder. `stripTopFolder` returns null
+            // when the file is outside the folder and "" when the file path
+            // equals the folder path (skip both).
+            const relative = (0, projectPath_1.stripTopFolder)(normalizedFile, normalizedFolder);
+            if (relative === null || relative === "")
+                return;
+            safePath = relative;
+        }
+        else {
+            // Whole project (no folder, or the root folder "/"). Emit
+            // Windows-friendly entries without a leading "/".
+            if (normalizedFile === "/")
+                return;
+            safePath = normalizedFile.slice(1);
+        }
         const blob = (await binaryStore_1.binaryStore.get(file.id)) ??
             new Blob([file.content], { type: file.mimeType || "text/plain" });
         unzipSize += blob.size;