gwchq-textjam 0.1.71 → 0.1.73

package/dist/index.js

@@ -64671,6 +64671,34 @@ function SvgAlert(props) {
 
 /***/ }),
 
+/***/ 30103:
+/***/ ((__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 SvgAlertTriangle(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M14.036 6.71L4.308 22.95a2.297 2.297 0 001.964 3.446h19.456a2.297 2.297 0 001.964-3.446L17.964 6.71a2.296 2.296 0 00-3.928 0v0zM16 12.613v4.595M16 21.801h.012",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })));
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgAlertTriangle);
+
+/***/ }),
+
 /***/ 17297:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -67920,8 +67948,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var _Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(89379);
-/* harmony import */ var _Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(53986);
+/* harmony import */ var _Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(89379);
+/* harmony import */ var _Users_hanna_gwc_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);
@@ -67945,7 +67973,7 @@ var DraggableTab = _ref => {
       panelIndex,
       fileIndex
     } = _ref,
-    otherProps = (0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)(_ref, _excluded);
+    otherProps = (0,_Users_hanna_gwc_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)();
@@ -67962,7 +67990,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,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,_Users_valeriya_projects_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,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
     onClick: e => {
       e.stopPropagation();
       switchToFileTab(panelIndex, fileIndex);
@@ -67980,7 +68008,7 @@ var DraggableTab = _ref => {
         draggableProps,
         dragHandleProps
       } = _ref2;
-      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", (0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,_Users_valeriya_projects_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,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
         className: "draggable-tab",
         ref: innerRef
       }, draggableProps), dragHandleProps), {}, {
@@ -68002,8 +68030,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var _Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(89379);
-/* harmony import */ var _Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(53986);
+/* harmony import */ var _Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(89379);
+/* harmony import */ var _Users_hanna_gwc_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);
@@ -68022,8 +68050,8 @@ var DroppableTabList = _ref => {
       children: _children,
       index
     } = _ref,
-    otherProps = (0,_Users_valeriya_projects_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,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({}, otherProps), {}, {
+    otherProps = (0,_Users_hanna_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,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,_Users_hanna_gwc_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(),
@@ -68033,7 +68061,7 @@ var DroppableTabList = _ref => {
           droppableProps,
           placeholder
         } = _ref2;
-        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", (0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,_Users_valeriya_projects_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,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({
           className: "droppable-tab-list"
         }, droppableProps), {}, {
           ref: innerRef,
@@ -101773,6 +101801,8 @@ function SvgSave(props) {
 /* harmony default export */ const save = (SvgSave);
 // EXTERNAL MODULE: ./src/components/Button/Button.jsx + 1 modules
 var Button = __webpack_require__(60232);
+// EXTERNAL MODULE: ./src/redux/types.ts
+var types = __webpack_require__(92932);
 ;// ./src/components/SaveButton/SaveButton.jsx
 
 
@@ -101783,12 +101813,14 @@ var Button = __webpack_require__(60232);
 
 
 
+
 var SaveButton = props => {
   var dispatch = (0,external_react_redux_.useDispatch)();
   var loading = (0,external_react_redux_.useSelector)(state => state.editor.loading);
+  var saving = (0,external_react_redux_.useSelector)(state => state.editor.saving);
   var onClickSave = (0,external_react_.useCallback)(/*#__PURE__*/(0,asyncToGenerator/* default */.A)(function* () {
     document.dispatchEvent(WebComponentCustomEvents.logInEvent);
-    dispatch((0,EditorSlice.triggerSave)());
+    dispatch((0,EditorSlice.setSaveTriggered)(true));
   }), [dispatch]);
   var projectOwner = false;
   return loading === "success" && !projectOwner && /*#__PURE__*/(0,jsx_runtime.jsx)(Button["default"], (0,objectSpread2/* default */.A)({
@@ -101796,7 +101828,8 @@ var SaveButton = props => {
     ButtonIcon: save,
     buttonIconPosition: "left",
     variant: "secondary",
-    onClickHandler: onClickSave
+    onClickHandler: onClickSave,
+    disabled: saving === types.SavingState.PROCESS
   }, props));
 };
 /* harmony default export */ const SaveButton_SaveButton = (SaveButton);
@@ -101819,8 +101852,6 @@ function SvgShare(props) {
   })));
 }
 /* harmony default export */ const share = (SvgShare);
-// EXTERNAL MODULE: ./src/redux/types.ts
-var types = __webpack_require__(92932);
 ;// ./src/components/ShareButton/ShareButton.jsx
 
 
@@ -102797,7 +102828,7 @@ var ShareProjectModal = () => {
 
 /***/ }),
 
-/***/ 56822:
+/***/ 16893:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 // ESM COMPAT FLAG
@@ -102823,25 +102854,8 @@ var types = __webpack_require__(92932);
 var external_react_redux_ = __webpack_require__(14062);
 // EXTERNAL MODULE: ./src/components/Modals/BaseModal/BaseModal.jsx
 var BaseModal = __webpack_require__(94738);
-;// ./src/assets/icons/alertTriangle.svg
-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 SvgAlertTriangle(props) {
-  return /*#__PURE__*/external_react_.createElement("svg", _extends({
-    width: 32,
-    height: 32,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path || (_path = /*#__PURE__*/external_react_.createElement("path", {
-    d: "M14.036 6.71L4.308 22.95a2.297 2.297 0 001.964 3.446h19.456a2.297 2.297 0 001.964-3.446L17.964 6.71a2.296 2.296 0 00-3.928 0v0zM16 12.613v4.595M16 21.801h.012",
-    stroke: "#edce22",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  })));
-}
-/* harmony default export */ const alertTriangle = (SvgAlertTriangle);
+// EXTERNAL MODULE: ./src/assets/icons/alertTriangle.svg
+var alertTriangle = __webpack_require__(30103);
 // EXTERNAL MODULE: ./src/components/Button/Button.jsx + 1 modules
 var Button = __webpack_require__(60232);
 // EXTERNAL MODULE: ./src/components/shared/SvgIcon/index.tsx
@@ -102878,7 +102892,7 @@ var UploadSizeLimitModal = () => {
         className: BaseModal_styles_module["default"].headerContainer,
         children: [/*#__PURE__*/(0,jsx_runtime.jsx)(SvgIcon.SvgIcon, {
           size: 32,
-          SvgElement: alertTriangle,
+          SvgElement: alertTriangle["default"],
           className: "".concat(BaseModal_styles_module["default"].headerText, " ").concat(styles_module.headerIcon)
         }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
           className: "".concat(BaseModal_styles_module["default"].headerText, " ").concat(styles_module.headerText),
@@ -103095,6 +103109,8 @@ __webpack_require__.d(__webpack_exports__, {
 var asyncToGenerator = __webpack_require__(10467);
 // EXTERNAL MODULE: external "react"
 var external_react_ = __webpack_require__(51649);
+// EXTERNAL MODULE: ./node_modules/path-browserify/index.js
+var path_browserify = __webpack_require__(57975);
 // EXTERNAL MODULE: external "react-redux"
 var external_react_redux_ = __webpack_require__(14062);
 // EXTERNAL MODULE: ./src/redux/EditorSlice.ts
@@ -103156,10 +103172,10 @@ var useProjectPersistence = _ref => {
         if (!project || Object.keys(project).length === 0) return;
         var identifier = project.identifier;
         if (saveTriggered || localStorage.getItem("awaitingSave")) {
-          if ((0,projectHelpers.isOwner)(user, project)) {
-            yield onSave === null || onSave === void 0 ? void 0 : onSave(identifier);
-            localStorage.removeItem("awaitingSave");
-          }
+          yield onSave === null || onSave === void 0 ? void 0 : onSave(identifier).finally(() => {
+            dispatch((0,EditorSlice.setSaveTriggered)(false));
+          });
+          localStorage.removeItem("awaitingSave");
         }
       });
       return function run() {
@@ -103167,7 +103183,7 @@ var useProjectPersistence = _ref => {
       };
     }();
     run().catch(console.error);
-  }, [saveTriggered, project, user, onSave]);
+  }, [saveTriggered, project, user, onSave, dispatch]);
 
   // Autosave
   (0,external_react_.useEffect)(() => {
@@ -103270,6 +103286,8 @@ var ErrorModal = _ref => {
   });
 };
 /* harmony default export */ const Modals_ErrorModal = (ErrorModal);
+// EXTERNAL MODULE: ./node_modules/react-toastify/dist/react-toastify.esm.js
+var react_toastify_esm = __webpack_require__(21241);
 ;// ./src/assets/stylesheets/ExternalStyles.scss
 // extracted by mini-css-extract-plugin
 
@@ -103285,9 +103303,13 @@ var WebComponentCustomEvents = __webpack_require__(30272);
 var ToastMessages = __webpack_require__(6459);
 // EXTERNAL MODULE: ./src/components/Modals/index.tsx
 var Modals = __webpack_require__(18284);
+// EXTERNAL MODULE: ./src/utils/createProjectArchive.ts
+var createProjectArchive = __webpack_require__(46514);
 // EXTERNAL MODULE: ./src/components/Loading/Loading.tsx
 var Loading = __webpack_require__(34466);
 var Loading_default = /*#__PURE__*/__webpack_require__.n(Loading);
+// EXTERNAL MODULE: ./node_modules/file-saver/dist/FileSaver.min.js
+var FileSaver_min = __webpack_require__(4213);
 ;// ./src/containers/WebComponentLoader.jsx
 
 
@@ -103304,6 +103326,12 @@ var Loading_default = /*#__PURE__*/__webpack_require__.n(Loading);
 
 
 
+
+
+
+
+
+
 
 
 
@@ -103324,6 +103352,11 @@ var WebComponentLoader = props => {
     sidebarOptions = [],
     loadCache = true,
     project: projectData,
+    saveProject,
+    isSaving,
+    loadCommit,
+    commits = [],
+    projectContent = null,
     isLoading = false,
     packageApiUrl,
     user,
@@ -103337,6 +103370,7 @@ var WebComponentLoader = props => {
   var project = (0,external_react_redux_.useSelector)(state => state.editor.project);
   var projectOwner = (0,external_react_redux_.useSelector)(state => state.editor.project.user_name);
   var loading = (0,external_react_redux_.useSelector)(state => state.editor.loading);
+  var saving = (0,external_react_redux_.useSelector)(state => state.editor.saving);
   var justLoaded = (0,external_react_redux_.useSelector)(state => state.editor.justLoaded);
   var hasShownSavePrompt = (0,external_react_redux_.useSelector)(state => state.editor.hasShownSavePrompt);
   var saveTriggered = (0,external_react_redux_.useSelector)(state => state.editor.saveTriggered);
@@ -103366,6 +103400,16 @@ var WebComponentLoader = props => {
       }));
     }
   }, [user, dispatch]);
+  (0,external_react_.useEffect)(() => {
+    dispatch((0,EditorSlice.setCommits)({
+      commits
+    }));
+  }, [commits, dispatch]);
+  (0,external_react_.useEffect)(() => {
+    dispatch((0,EditorSlice.setLoadCommit)({
+      loadCommit
+    }));
+  }, [loadCommit, dispatch]);
 
   // useEffect(() => {
   //   if (theme) {
@@ -103374,6 +103418,9 @@ var WebComponentLoader = props => {
   //   }
   // }, [theme, setCookie, dispatch]);
 
+  (0,external_react_.useEffect)(() => {
+    dispatch((0,EditorSlice.setSaveTriggered)(isSaving));
+  }, [isSaving]);
   (0,external_react_.useEffect)(() => {
     if (justLoaded) {
       document.dispatchEvent((0,WebComponentCustomEvents.projectOwnerLoadedEvent)(projectOwner));
@@ -103384,32 +103431,39 @@ var WebComponentLoader = props => {
       i18n.changeLanguage(locale);
     }
   }, [locale, i18n]);
-  (0,external_react_.useEffect)(() => {
-    var cancelled = false;
-    if (!(projectData !== null && projectData !== void 0 && projectData.templateId)) return;
-    (0,asyncToGenerator/* default */.A)(function* () {
-      if (cancelled) return;
-      var projectCache = yield IndexedDb.IndexedDb.getProject(projectData.identifier);
-      if (!projectCache && !template.isLoading) {
-        yield getTextJamTemplate(projectData.templateId);
-      }
-      return () => {
-        cancelled = true;
-      };
-    })().catch(console.error);
-  }, [projectData === null || projectData === void 0 ? void 0 : projectData.templateId]);
   (0,useProject/* useProject */.U)({
     identifier: projectData === null || projectData === void 0 ? void 0 : projectData.identifier,
     projectData,
     loadCache,
+    isLoading: !!(template !== null && template !== void 0 && template.isLoading) || isLoading,
     template,
-    templateId: projectData === null || projectData === void 0 ? void 0 : projectData.templateId
+    templateId: projectData === null || projectData === void 0 ? void 0 : projectData.templateId,
+    getTextJamTemplate,
+    projectContent
   });
+  var onSave = /*#__PURE__*/function () {
+    var _ref = (0,asyncToGenerator/* default */.A)(function* () {
+      var _project$components;
+      if (!(project !== null && project !== void 0 && (_project$components = project.components) !== null && _project$components !== void 0 && _project$components.length)) return;
+      try {
+        var commitBlob = yield (0,createProjectArchive.createProjectArchive)(project);
+        yield saveProject === null || saveProject === void 0 ? void 0 : saveProject(project, commitBlob);
+      } catch (e) {
+        console.error(e);
+      } finally {
+        dispatch((0,EditorSlice.setSaveTriggered)(false));
+      }
+    });
+    return function onSave() {
+      return _ref.apply(this, arguments);
+    };
+  }();
   useProjectPersistence({
     project,
     justLoaded,
     hasShownSavePrompt: hasShownSavePrompt || !showSavePrompt,
-    saveTriggered
+    saveTriggered,
+    onSave
   });
   (0,external_react_.useEffect)(() => {
     dispatch((0,EditorSlice.setReadOnly)(readOnly));
@@ -142905,7 +142959,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","pythonrunnerContainer":"styles-module__pythonrunnerContainer---nPGz","htmlrunnerContainer":"styles-module__htmlrunnerContainer--KPi8D","console":"styles-module__console--B8x1A","pythonGraphic":"styles-module__pythonGraphic--V+du6","pyodiderunner":"styles-module__pyodiderunner--DKTtB","active":"styles-module__active--bKVnT","visualOutput":"styles-module__visualOutput--WLaca","outputPanel":"styles-module__outputPanel--W1TnW","consoleOutputLine":"styles-module__consoleOutputLine--y3Vbp","stderr":"styles-module__stderr--PIyhL","pythonrunnerInput":"styles-module__pythonrunnerInput--dOXEa","previewLink":"styles-module__previewLink--rWLII","previewHtml":"styles-module__previewHtml--oWG28","iframe":"styles-module__iframe--YfQ0V","codeHasBeenRun":"styles-module__codeHasBeenRun--fqiYL"});
+/* 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","pythonrunnerContainer":"styles-module__pythonrunnerContainer---nPGz","htmlrunnerContainer":"styles-module__htmlrunnerContainer--KPi8D","console":"styles-module__console--B8x1A","pythonGraphic":"styles-module__pythonGraphic--V+du6","pyodiderunner":"styles-module__pyodiderunner--DKTtB","active":"styles-module__active--bKVnT","visualOutput":"styles-module__visualOutput--WLaca","outputPanel":"styles-module__outputPanel--W1TnW","pythonConsoleLine":"styles-module__pythonConsoleLine--bwFQC","stderr":"styles-module__stderr--PIyhL","pythonrunnerInput":"styles-module__pythonrunnerInput--dOXEa","webConsole":"styles-module__webConsole--MTdnk","webConsoleLine":"styles-module__webConsoleLine--j31U1","string":"styles-module__string--YDxWc","stringInsideStructure":"styles-module__stringInsideStructure--KJtZp","number":"styles-module__number--7h5TG","boolean":"styles-module__boolean--WYb4I","null":"styles-module__null--BZCmR","undefined":"styles-module__undefined--nQkol","key":"styles-module__key--ZZTlD","error":"styles-module__error--RL5Lt","errorIcon":"styles-module__errorIcon--Gnn4-","warn":"styles-module__warn--B+MPR","warnIcon":"styles-module__warnIcon--Q82Y5","timestamp":"styles-module__timestamp--HDZxD","details":"styles-module__details--W1bGT","summary":"styles-module__summary--vms5d","nestedEntry":"styles-module__nestedEntry--OU25X","previewLink":"styles-module__previewLink--rWLII","previewHtml":"styles-module__previewHtml--oWG28","iframe":"styles-module__iframe--YfQ0V","codeHasBeenRun":"styles-module__codeHasBeenRun--fqiYL"});
 
 /***/ }),
 
@@ -368644,7 +368698,7 @@ __webpack_require__(72788);
 const editorListener_1 = __webpack_require__(41824);
 const Loading_1 = __importDefault(__webpack_require__(34466));
 (0, editorListener_1.registerEditorListeners)();
-const TextJamEditor = ({ onLogoutClick = () => { }, onViewProfileClick = () => { }, onHomeClick = () => { }, getTextJamTemplate = (templateId) => { }, template = {
+const TextJamEditor = ({ onLogoutClick = () => { }, onViewProfileClick = () => { }, onHomeClick = () => { }, saveProject = (project, commitBlob) => { }, isSaving, loadCommit = (repositoryId, commmitId) => { }, commits = [], projectContent = null, getTextJamTemplate = (templateId) => { }, template = {
     isLoading: false,
     error: null,
     data: null,
@@ -368666,6 +368720,11 @@ const TextJamEditor = ({ onLogoutClick = () => { }, onViewProfileClick = () => {
     const mergedProps = {
         ...defaultProps,
         ...componentProps,
+        saveProject,
+        isSaving,
+        loadCommit,
+        commits,
+        projectContent,
         getTextJamTemplate,
         template,
     };
@@ -368735,29 +368794,15 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(74848);
 const file_saver_1 = __importDefault(__webpack_require__(4213));
 const js_convert_case_1 = __webpack_require__(61647);
-const jszip_1 = __importDefault(__webpack_require__(71710));
 const download_svg_1 = __importDefault(__webpack_require__(63279));
 const stores_1 = __webpack_require__(32132);
-const ProjectTypes_1 = __webpack_require__(27130);
 const SvgIcon_1 = __webpack_require__(82917);
 const Button_1 = __importDefault(__webpack_require__(60232));
-const binaryStore_1 = __webpack_require__(5060);
+const createProjectArchive_1 = __webpack_require__(46514);
 const DownloadButton = (props) => {
     const project = (0, stores_1.useAppSelector)((state) => state.editor.project);
     const onClickDownload = async () => {
-        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;
-            const blob = await binaryStore_1.binaryStore.get(file.id);
-            zip.file(safePath, blob ?? file.content);
-        }));
-        const content = await zip.generateAsync({ type: "blob" });
+        const 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 }));
@@ -369039,6 +369084,33 @@ const Output = ({ packageApiUrl }) => {
 exports["default"] = Output;
 
 
+/***/ }),
+
+/***/ 55339:
+/***/ (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 classnames_1 = __importDefault(__webpack_require__(46942));
+const styles_module_scss_1 = __importDefault(__webpack_require__(46259));
+const LogRenderer_1 = __importDefault(__webpack_require__(67278));
+const SvgIcon_1 = __webpack_require__(82917);
+const alert_svg_1 = __importDefault(__webpack_require__(11367));
+const alertTriangle_svg_1 = __importDefault(__webpack_require__(30103));
+function HtmlConsole({ consoleLogs, }) {
+    return ((0, jsx_runtime_1.jsx)("pre", { className: (0, classnames_1.default)(styles_module_scss_1.default.console, styles_module_scss_1.default.webConsole), children: consoleLogs.length === 0 ? ((0, jsx_runtime_1.jsx)("span", { children: "No logs received yet" })) : (consoleLogs.map((log, i) => {
+            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.webConsoleLine, styles_module_scss_1.default[log.method]), children: [(0, jsx_runtime_1.jsxs)("span", { children: [(log.method === "error" || log.method === "warn") && ((0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: log.method === "error" ? alert_svg_1.default : alertTriangle_svg_1.default, size: 12, className: log.method === "error"
+                                    ? styles_module_scss_1.default.errorIcon
+                                    : styles_module_scss_1.default.warnIcon })), log.timestamp && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.timestamp, children: log.timestamp }))] }), log.data?.map((node, idx) => ((0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)(LogRenderer_1.default, { node: node }), log.data && idx < log.data.length - 1 && " "] }, idx)))] }, i));
+        })) }));
+}
+exports["default"] = HtmlConsole;
+
+
 /***/ }),
 
 /***/ 86224:
@@ -369070,14 +369142,17 @@ const OutputTabPanel_1 = __webpack_require__(25931);
 const styles_module_scss_1 = __importDefault(__webpack_require__(46259));
 const helpers_1 = __webpack_require__(1108);
 const fileParsers_1 = __webpack_require__(26683);
+const scripts_1 = __webpack_require__(57621);
 const Errors_1 = __webpack_require__(20339);
 const NotFoundPage_1 = __webpack_require__(87931);
+const HtmlConsole_1 = __importDefault(__webpack_require__(55339));
 const BROADCAST_CHANNEL = "html_runner_channel";
 var BroadcastMessageType;
 (function (BroadcastMessageType) {
     BroadcastMessageType["RELOAD_PROJECT"] = "RELOAD_PROJECT";
 })(BroadcastMessageType || (BroadcastMessageType = {}));
 function HtmlRunner() {
+    const [consoleLogs, setConsoleLogs] = (0, react_1.useState)([]);
     const project = (0, stores_1.useAppSelector)((state) => state.editor.project);
     const projectComponents = project.components ?? [];
     const error = (0, stores_1.useAppSelector)((state) => state.editor.error);
@@ -369193,6 +369268,7 @@ function HtmlRunner() {
         }
     }, [currentPageParam, dispatch]);
     const runCode = async () => {
+        setConsoleLogs([]);
         const fileToRun = page ?? defaultPreviewFilePath;
         setRunningFilePath(fileToRun);
         dispatch((0, EditorSlice_2.setError)(null));
@@ -369214,53 +369290,9 @@ function HtmlRunner() {
             }
             const indexPage = (0, node_html_parser_1.parse)(entryPoint.content);
             const body = indexPage.querySelector("body") || indexPage;
-            // insert script to disable access to specific localStorage keys
-            // localstorage.getItem() is a potential security risk when executing untrusted code
-            const disableLocalStorageScript = `
-      <script>
-        (function() {
-          const originalGetItem = window.localStorage.getItem.bind(window.localStorage);
-          const originalSetItem = window.localStorage.setItem.bind(window.localStorage);
-          const originalRemoveItem = window.localStorage.removeItem.bind(window.localStorage);
-          const originalClear = window.localStorage.clear.bind(window.localStorage);
-
-          const isDisallowedKey = (key) => key === 'authKey' || key.startsWith('oidc.');
-
-          Object.defineProperty(window, 'localStorage', {
-            value: {
-              getItem: function(key) {
-                if (isDisallowedKey(key)) {
-                  console.log(\`localStorage.getItem for "\${key}" is disabled\`);
-                  return null;
-                }
-                return originalGetItem(key);
-              },
-              setItem: function(key, value) {
-                if (isDisallowedKey(key)) {
-                  console.log(\`localStorage.setItem for "\${key}" is disabled\`);
-                  return;
-                }
-                return originalSetItem(key, value);
-              },
-              removeItem: function(key) {
-                if (isDisallowedKey(key)) {
-                  console.log(\`localStorage.removeItem for "\${key}" is disabled\`);
-                  return;
-                }
-                return originalRemoveItem(key);
-              },
-              clear: function() {
-                console.log('localStorage.clear is disabled');
-                return;
-              }
-            },
-            writable: false,
-            configurable: false
-          });
-        })();
-      </script>
-    `;
-            body.insertAdjacentHTML("afterbegin", disableLocalStorageScript);
+            const htmlRoot = indexPage.querySelector("html") ?? indexPage;
+            body.insertAdjacentHTML("afterbegin", scripts_1.disableLocalStorageScript);
+            htmlRoot.insertAdjacentHTML("afterbegin", scripts_1.consoleOverrideScript);
             const { blobUrl } = await (0, fileParsers_1.resolveAndRewriteHtmlImports)(indexPage.toString(), projectComponents, entryPoint.path, page ?? entryPoint.path);
             if (output.current) {
                 output.current.src = blobUrl;
@@ -369276,6 +369308,16 @@ function HtmlRunner() {
             dispatch((0, EditorSlice_2.codeRunHandled)());
         }
     };
+    (0, react_1.useEffect)(() => {
+        const handler = (event) => {
+            if (event.data?.type !== "console")
+                return;
+            const data = event.data;
+            setConsoleLogs((prev) => [...prev, data]);
+        };
+        window.addEventListener("message", handler);
+        return () => window.removeEventListener("message", handler);
+    }, []);
     const openPreview = () => {
         window.open(`${window.location.href}/preview`, "_blank", "noopener,noreferrer");
     };
@@ -369283,11 +369325,67 @@ function HtmlRunner() {
     const iframeClasses = (0, classnames_1.default)(styles_module_scss_1.default.iframe, {
         [styles_module_scss_1.default.codeHasBeenRun]: codeHasBeenRun,
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.htmlrunnerContainer, children: [(0, jsx_runtime_1.jsx)(OutputTabPanel_1.OutputTabPanel, { title: "Preview", icon: preview_svg_1.default, readOnly: readOnly, extraTabContent: codeHasBeenRun && openInNewTabLink, tabPanelClassName: styles_module_scss_1.default.previewHtml, children: error ? ((0, jsx_runtime_1.jsx)("div", { className: iframeClasses, children: (0, jsx_runtime_1.jsx)(NotFoundPage_1.NotFoundPage, {}) })) : ((0, jsx_runtime_1.jsx)("iframe", { className: iframeClasses, sandbox: "allow-scripts allow-same-origin allow-modals", referrerPolicy: "no-referrer", allow: "\n            accelerometer 'none';\n            camera 'none';\n            encrypted-media 'none';\n            geolocation 'none';\n            gyroscope 'none';\n            magnetometer 'none';\n            microphone 'none';\n            midi 'none';\n            payment 'none';\n            usb 'none';\n          ", id: "output-frame", title: "HTML Output Preview", ref: output, onLoad: iframeReload })) }), !outputOnly && ((0, jsx_runtime_1.jsx)(OutputTabPanel_1.OutputTabPanel, { title: "Console", icon: console_svg_1.default, readOnly: readOnly, children: "\u0421onsole output..." }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.htmlrunnerContainer, children: [(0, jsx_runtime_1.jsx)(OutputTabPanel_1.OutputTabPanel, { title: "Preview", icon: preview_svg_1.default, readOnly: readOnly, extraTabContent: codeHasBeenRun && openInNewTabLink, tabPanelClassName: styles_module_scss_1.default.previewHtml, children: error ? ((0, jsx_runtime_1.jsx)("div", { className: iframeClasses, children: (0, jsx_runtime_1.jsx)(NotFoundPage_1.NotFoundPage, {}) })) : ((0, jsx_runtime_1.jsx)("iframe", { className: iframeClasses, sandbox: "allow-scripts allow-same-origin allow-modals", referrerPolicy: "no-referrer", allow: "\n            accelerometer 'none';\n            camera 'none';\n            encrypted-media 'none';\n            geolocation 'none';\n            gyroscope 'none';\n            magnetometer 'none';\n            microphone 'none';\n            midi 'none';\n            payment 'none';\n            usb 'none';\n          ", id: "output-frame", title: "HTML Output Preview", ref: output, onLoad: iframeReload })) }), !outputOnly && ((0, jsx_runtime_1.jsx)(OutputTabPanel_1.OutputTabPanel, { title: "Console", icon: console_svg_1.default, readOnly: readOnly, children: (0, jsx_runtime_1.jsx)(HtmlConsole_1.default, { consoleLogs: consoleLogs }) }))] }));
 }
 exports["default"] = HtmlRunner;
 
 
+/***/ }),
+
+/***/ 67278:
+/***/ (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__(46259));
+var SerializedNodeType;
+(function (SerializedNodeType) {
+    SerializedNodeType["String"] = "string";
+    SerializedNodeType["Number"] = "number";
+    SerializedNodeType["Boolean"] = "boolean";
+    SerializedNodeType["Null"] = "null";
+    SerializedNodeType["Undefined"] = "undefined";
+    SerializedNodeType["Array"] = "array";
+    SerializedNodeType["Object"] = "object";
+})(SerializedNodeType || (SerializedNodeType = {}));
+const OFFSET_PER_LEVEL = 12;
+function LogRenderer({ node, depth = 0, isInsideStructure = false, }) {
+    if ([
+        SerializedNodeType.String,
+        SerializedNodeType.Number,
+        SerializedNodeType.Boolean,
+        SerializedNodeType.Null,
+        SerializedNodeType.Undefined,
+    ].includes(node.type)) {
+        const value = node.value;
+        const className = node.type === SerializedNodeType.String && isInsideStructure
+            ? styles_module_scss_1.default.stringInsideStructure
+            : styles_module_scss_1.default[node.type];
+        let content = value;
+        if (node.type === SerializedNodeType.String && isInsideStructure) {
+            content = `"${value}"`;
+        }
+        return (0, jsx_runtime_1.jsx)("span", { className: className, children: content });
+    }
+    const isArray = node.type === SerializedNodeType.Array;
+    const entries = isArray
+        ? node.value.map((val, idx) => ({
+            key: idx.toString(),
+            val,
+        }))
+        : Object.entries(node.value).map(([key, val]) => ({
+            key,
+            val,
+        }));
+    return ((0, jsx_runtime_1.jsxs)("details", { className: styles_module_scss_1.default.details, style: { marginLeft: `${depth * OFFSET_PER_LEVEL}px` }, children: [(0, jsx_runtime_1.jsx)("summary", { className: styles_module_scss_1.default.summary, children: isArray ? `Array(${entries.length})` : "Object" }), entries.map(({ key, val }) => ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.nestedEntry, children: [(0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.key, children: [key, ":"] }), (0, jsx_runtime_1.jsx)(LogRenderer, { node: val, depth: depth + 1, isInsideStructure: true })] }, key)))] }));
+}
+exports["default"] = LogRenderer;
+
+
 /***/ }),
 
 /***/ 26683:
@@ -369576,6 +369674,159 @@ const getFilenameFromIFrame = (iframe) => iframe?.querySelector("meta[filename]"
 exports.getFilenameFromIFrame = getFilenameFromIFrame;
 
 
+/***/ }),
+
+/***/ 57621:
+/***/ ((__unused_webpack_module, exports) => {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.consoleOverrideScript = exports.disableLocalStorageScript = void 0;
+// insert script to disable access to specific localStorage keys
+// localstorage.getItem() is a potential security risk when executing untrusted code
+exports.disableLocalStorageScript = `
+<script>
+  (function() {
+      const originalGetItem = window.localStorage.getItem.bind(window.localStorage);
+      const originalSetItem = window.localStorage.setItem.bind(window.localStorage);
+      const originalRemoveItem = window.localStorage.removeItem.bind(window.localStorage);
+      const originalClear = window.localStorage.clear.bind(window.localStorage);
+
+      const isDisallowedKey = (key) => key === 'authKey' || key.startsWith('oidc.');
+
+      Object.defineProperty(window, 'localStorage', {
+      value: {
+          getItem: function(key) {
+          if (isDisallowedKey(key)) {
+              console.log(\`localStorage.getItem for "\${key}" is disabled\`);
+              return null;
+          }
+          return originalGetItem(key);
+          },
+          setItem: function(key, value) {
+          if (isDisallowedKey(key)) {
+              console.log(\`localStorage.setItem for "\${key}" is disabled\`);
+              return;
+          }
+          return originalSetItem(key, value);
+          },
+          removeItem: function(key) {
+          if (isDisallowedKey(key)) {
+              console.log(\`localStorage.removeItem for "\${key}" is disabled\`);
+              return;
+          }
+          return originalRemoveItem(key);
+          },
+          clear: function() {
+          console.log('localStorage.clear is disabled');
+          return;
+          }
+      },
+      writable: false,
+      configurable: false
+      });
+  })();
+</script>
+`;
+const MAX_DEPTH = 5; // Maximum depth for object serialization to prevent infinite recursion
+// Override console methods to send logs to parent window and serialize complex objects
+exports.consoleOverrideScript = `
+<script>
+  (function() {
+    const SerializedType = {
+      Null: "null",
+      Undefined: "undefined",
+      Boolean: "boolean",
+      Number: "number",
+      String: "string",
+      Array: "array",
+      Object: "object",
+    };
+
+    const original = {};
+    const methods = ["log", "error", "warn", "info", "debug", "assert"];
+
+    function serialize(arg, depth = 0, maxDepth = ${MAX_DEPTH}, visited = new WeakSet()) {
+      if (depth > maxDepth) return { "type": SerializedType.String, "value": "[Max depth reached]" };
+
+      if (arg && typeof arg === "object") {
+        if (visited.has(arg)) {
+          return { "type": SerializedType.String, "value": "[Circular reference]" };
+        }
+        visited.add(arg);
+      }
+
+      const type = typeof arg;
+      if (arg === null) return { "type": SerializedType.Null, "value": "null" };
+      if (arg === undefined) return { "type": SerializedType.Undefined, "value": "undefined" };
+      if (type === "boolean") return { "type": SerializedType.Boolean, "value": String(arg) };
+      if (type === "number") return { "type": SerializedType.Number, "value": String(arg) };
+      if (type === "string") return { "type": SerializedType.String, "value": arg };
+
+      if (Array.isArray(arg)) {
+        return {
+          "type": SerializedType.Array,
+          "value": arg.map(item => serialize(item, depth + 1, maxDepth))
+        };
+      }
+
+      if (type === "object" && arg !== null) {
+        const props = {};
+        try {
+          for (let key in arg) {
+            if (arg.hasOwnProperty(key)) {
+              props[key] = serialize(arg[key], depth + 1, maxDepth, visited);
+            }
+          }
+        } catch (error) {
+          console.error("Error serializing object property:", error);
+        }
+        return { "type": SerializedType.Object, "value": props };
+      }
+
+      return { "type": SerializedType.String, "value": String(arg) };
+    }
+
+    methods.forEach(m => {
+      original[m] = console[m] || function(){};
+
+      console[m] = function(...args) {
+        const now = new Date();
+        const timestamp = now.toISOString()
+          .slice(0, 19)
+          .replace("T", " ") + "." +
+          now.getMilliseconds().toString().padStart(3, "0").slice(0, 2);
+
+        let level = m;
+        let serializedArgs = args.map(arg => serialize(arg));
+
+        if (m === "assert") {
+          if (args[0]) {
+            original[m](...args);
+            return;
+          }
+          level = "error";
+          serializedArgs = args.slice(1).map(arg => serialize(arg));
+          if (serializedArgs.length === 0) {
+            serializedArgs = [{ "type": "string", "value": "Assertion failed" }];
+          }
+        }
+          
+        window.parent.postMessage({
+          "type": "console",
+          "method": level,
+          "data": serializedArgs,
+          "timestamp": timestamp
+        }, "*");
+
+        original[m](...args);
+      };
+    });
+  })();
+</script>
+`;
+
+
 /***/ }),
 
 /***/ 25931:
@@ -369788,7 +370039,7 @@ const PyodideRunner = ({ active, packageApiUrl, }) => {
     const handleOutput = (stream, content) => {
         const node = output.current;
         const div = document.createElement("span");
-        div.className = (0, classnames_1.default)(styles_module_scss_1.default.consoleOutputLine, stream === "stderr" && styles_module_scss_1.default["stderr"], stream === "stdout" && styles_module_scss_1.default["stdout"]);
+        div.className = (0, classnames_1.default)(styles_module_scss_1.default.pythonConsoleLine, stream === "stderr" && styles_module_scss_1.default["stderr"], stream === "stdout" && styles_module_scss_1.default["stdout"]);
         div.innerHTML = new Option(content || " ").innerHTML + "\n";
         if (node) {
             node.appendChild(div);
@@ -371525,7 +371776,7 @@ const ShareProjectModal_1 = __importDefault(__webpack_require__(50734));
 const ProjectHistoryModal_1 = __importDefault(__webpack_require__(2468));
 const RemoveItemModal_1 = __importDefault(__webpack_require__(3985));
 const SaveProjectReminderModal_1 = __importDefault(__webpack_require__(66536));
-const UploadSizeLimitModal_1 = __importDefault(__webpack_require__(56822));
+const UploadSizeLimitModal_1 = __importDefault(__webpack_require__(16893));
 const UploadFilesModal_1 = __importDefault(__webpack_require__(9825));
 exports.ModalTypeToComponentMap = {
     [types_1.ModalType.SHARE_PROJECT]: (0, jsx_runtime_1.jsx)(ShareProjectModal_1.default, {}),
@@ -372292,6 +372543,7 @@ const ProjectTypes_1 = __webpack_require__(27130);
 const stores_1 = __webpack_require__(32132);
 const projectHelpers_1 = __webpack_require__(2610);
 const IndexedDb_1 = __webpack_require__(27161);
+const loadProjectFromZip_1 = __webpack_require__(65404);
 const getDefaultProjectIdentifier = (type) => {
     switch (type) {
         case ProjectTypes_1.ProjectType.WEB:
@@ -372301,14 +372553,61 @@ const getDefaultProjectIdentifier = (type) => {
             return defaultProjects_1.DEFAULT_PY_PROJECT_IDENTIFIER;
     }
 };
-const useProject = ({ loadCache = true, identifier = null, projectData = null, template = { isLoading: false, error: null, data: null }, templateId = null, }) => {
+const useProject = ({ loadCache = true, identifier = null, projectData = null, template = { isLoading: false, error: null, data: null }, templateId = null, getTextJamTemplate, projectContent = null, isLoading = false, }) => {
     const project = (0, stores_1.useAppSelector)((state) => state.editor.project);
     const [cachedProject, setCachedProject] = (0, react_1.useState)(null);
     const [cacheLoaded, setCacheLoaded] = (0, react_1.useState)(false);
     const { i18n } = (0, react_i18next_1.useTranslation)();
     const dispatch = (0, react_redux_1.useDispatch)();
     const cacheKey = identifier ?? getDefaultProjectIdentifier(projectData?.project_type);
-    const isLoading = template?.isLoading;
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        if (!templateId)
+            return;
+        (async () => {
+            if (cancelled)
+                return;
+            if (!projectData?.identifier)
+                return;
+            let projectCache;
+            try {
+                projectCache = await IndexedDb_1.IndexedDb.getProject(projectData.identifier);
+            }
+            catch (e) { }
+            if (!projectCache && !template?.isLoading) {
+                getTextJamTemplate?.(templateId);
+            }
+            return () => {
+                cancelled = true;
+            };
+        })().catch(console.error);
+    }, [templateId]);
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        if (!projectContent || !projectData || isLoading)
+            return;
+        (async () => {
+            try {
+                const identifier = projectData?.identifier;
+                const projectType = projectData?.project_type;
+                const loaded = await (0, loadProjectFromZip_1.loadProjectFromZip)({
+                    zipBlob: projectContent,
+                    projectType,
+                    identifier,
+                    name: projectData.name,
+                });
+                dispatch((0, EditorSlice_1.setProject)(loaded));
+                await IndexedDb_1.IndexedDb.setProject(identifier, loaded);
+            }
+            catch (e) {
+                console.error("Failed to load project", e);
+            }
+            return () => {
+                cancelled = true;
+            };
+        })().catch(console.error);
+        ;
+    }, [projectContent]);
     (0, react_1.useEffect)(() => {
         if (isLoading)
             return;
@@ -372351,6 +372650,8 @@ const useProject = ({ loadCache = true, identifier = null, projectData = null, t
             dispatch((0, EditorSlice_1.setProject)(cachedProject));
             return;
         }
+        if (!!templateId && template !== null && !template?.data)
+            return;
         if (!!templateId && template !== null && !template?.data)
             return;
         // in case no identifier and no cached project, or provided identifier doesn't match cached project,
@@ -372380,7 +372681,7 @@ const useProject = ({ loadCache = true, identifier = null, projectData = null, t
             return;
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [project?.identifier, cachedProject, cacheLoaded, i18n.language, template, templateId]);
+    }, [project?.identifier, cachedProject, cacheLoaded, i18n.language, template, templateId, projectContent]);
 };
 exports.U = useProject;
 
@@ -372393,7 +372694,7 @@ exports.U = useProject;
 
 var _a;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.queueBinaryWrites = exports.applyComponentsPatch = exports.disableTheming = exports.hideSidebar = exports.showSidebar = exports.closeModal = exports.showModal = exports.closeErrorModal = exports.showErrorModal = exports.updateProjectName = exports.triggerSave = exports.triggerDraw = exports.triggerCodeRun = exports.stopDraw = exports.stopCodeRun = exports.setLoading = exports.setReadOnly = exports.setProject = exports.setHasShownSavePrompt = exports.setError = exports.setCascadeUpdate = exports.setIsOutputOnly = exports.setAutorunEnabled = exports.setPage = exports.setFocussedFileIndex = exports.addFilePanel = exports.setOpenedFiles = exports.openFile = exports.closeFile = exports.expireJustLoaded = exports.codeRunHandled = exports.resetRunner = exports.setLoadedRunner = exports.loadingRunner = exports.updateProjectComponent = exports.addProjectComponent = exports.resetState = exports.EditorSlice = exports.editorInitialState = void 0;
+exports.queueBinaryWrites = exports.setLoadCommit = exports.setCommits = exports.applyComponentsPatch = exports.setSaving = exports.disableTheming = exports.hideSidebar = exports.showSidebar = exports.closeModal = exports.showModal = exports.closeErrorModal = exports.showErrorModal = exports.updateProjectName = exports.setSaveTriggered = exports.triggerDraw = exports.triggerCodeRun = exports.stopDraw = exports.stopCodeRun = exports.setLoading = exports.setReadOnly = exports.setProject = exports.setHasShownSavePrompt = exports.setError = exports.setCascadeUpdate = exports.setIsOutputOnly = exports.setAutorunEnabled = exports.setPage = exports.setFocussedFileIndex = exports.addFilePanel = exports.setOpenedFiles = exports.openFile = exports.closeFile = exports.expireJustLoaded = exports.codeRunHandled = exports.resetRunner = exports.setLoadedRunner = exports.loadingRunner = exports.updateProjectComponent = exports.addProjectComponent = exports.resetState = exports.EditorSlice = exports.editorInitialState = void 0;
 const toolkit_1 = __webpack_require__(12069);
 const ProjectTypes_1 = __webpack_require__(27130);
 const types_1 = __webpack_require__(92932);
@@ -372402,7 +372703,7 @@ exports.editorInitialState = {
     cascadeUpdate: false,
     readOnly: false,
     saveTriggered: false,
-    saving: "idle",
+    saving: types_1.SavingState.IDLE,
     loading: types_1.LoadingState.IDLE,
     justLoaded: false,
     hasShownSavePrompt: false,
@@ -372428,6 +372729,8 @@ exports.editorInitialState = {
     errorModalShowing: false,
     modalWindowShowing: null,
     modalWindowArgs: null,
+    commits: [],
+    loadCommit: (repositoryId, commmitId) => { },
     sidebarShowing: true,
     modals: {},
     runnerBeingLoaded: null,
@@ -372497,11 +372800,11 @@ exports.EditorSlice = (0, toolkit_1.createSlice)({
                 map.set(upsert.id, upsert);
             });
             state.project.components = Array.from(map.values());
-            state.saving = "idle";
+            state.saving = types_1.SavingState.IDLE;
         },
         addProjectComponent: (state, action) => {
             state.project.components.push(action.payload);
-            state.saving = "idle";
+            state.saving = types_1.SavingState.IDLE;
         },
         setPage: (state, action) => {
             state.page = action.payload;
@@ -372534,12 +372837,16 @@ exports.EditorSlice = (0, toolkit_1.createSlice)({
         triggerDraw: (state) => {
             state.drawTriggered = true;
         },
-        triggerSave: (state) => {
-            state.saveTriggered = true;
+        setSaveTriggered: (state, action) => {
+            state.saveTriggered = action.payload;
+            state.saving = state.saveTriggered ? types_1.SavingState.PROCESS : types_1.SavingState.IDLE;
+        },
+        setSaving: (state, action) => {
+            state.saving = action.payload;
         },
         updateProjectName: (state, action) => {
-            state.project.name = action.payload.name;
-            state.saving = "idle";
+            state.project.name = action.payload;
+            state.saving = types_1.SavingState.IDLE;
         },
         updateProjectComponent: (state, action) => {
             const mapped = state.project.components.map((component) => {
@@ -372628,10 +372935,16 @@ exports.EditorSlice = (0, toolkit_1.createSlice)({
         disableTheming: (state) => {
             state.isThemeable = false;
         },
+        setCommits: (state, action) => {
+            state.commits = action.payload;
+        },
+        setLoadCommit: (state, action) => {
+            state.loadCommit = action.payload;
+        },
     },
 });
 // Action creators are generated for each case reducer function
-_a = exports.EditorSlice.actions, exports.resetState = _a.resetState, exports.addProjectComponent = _a.addProjectComponent, exports.updateProjectComponent = _a.updateProjectComponent, exports.loadingRunner = _a.loadingRunner, exports.setLoadedRunner = _a.setLoadedRunner, exports.resetRunner = _a.resetRunner, exports.codeRunHandled = _a.codeRunHandled, exports.expireJustLoaded = _a.expireJustLoaded, exports.closeFile = _a.closeFile, exports.openFile = _a.openFile, exports.setOpenedFiles = _a.setOpenedFiles, exports.addFilePanel = _a.addFilePanel, exports.setFocussedFileIndex = _a.setFocussedFileIndex, exports.setPage = _a.setPage, exports.setAutorunEnabled = _a.setAutorunEnabled, exports.setIsOutputOnly = _a.setIsOutputOnly, exports.setCascadeUpdate = _a.setCascadeUpdate, exports.setError = _a.setError, exports.setHasShownSavePrompt = _a.setHasShownSavePrompt, exports.setProject = _a.setProject, exports.setReadOnly = _a.setReadOnly, exports.setLoading = _a.setLoading, exports.stopCodeRun = _a.stopCodeRun, exports.stopDraw = _a.stopDraw, exports.triggerCodeRun = _a.triggerCodeRun, exports.triggerDraw = _a.triggerDraw, exports.triggerSave = _a.triggerSave, exports.updateProjectName = _a.updateProjectName, exports.showErrorModal = _a.showErrorModal, exports.closeErrorModal = _a.closeErrorModal, exports.showModal = _a.showModal, exports.closeModal = _a.closeModal, exports.showSidebar = _a.showSidebar, exports.hideSidebar = _a.hideSidebar, exports.disableTheming = _a.disableTheming, exports.applyComponentsPatch = _a.applyComponentsPatch;
+_a = exports.EditorSlice.actions, exports.resetState = _a.resetState, exports.addProjectComponent = _a.addProjectComponent, exports.updateProjectComponent = _a.updateProjectComponent, exports.loadingRunner = _a.loadingRunner, exports.setLoadedRunner = _a.setLoadedRunner, exports.resetRunner = _a.resetRunner, exports.codeRunHandled = _a.codeRunHandled, exports.expireJustLoaded = _a.expireJustLoaded, exports.closeFile = _a.closeFile, exports.openFile = _a.openFile, exports.setOpenedFiles = _a.setOpenedFiles, exports.addFilePanel = _a.addFilePanel, exports.setFocussedFileIndex = _a.setFocussedFileIndex, exports.setPage = _a.setPage, exports.setAutorunEnabled = _a.setAutorunEnabled, exports.setIsOutputOnly = _a.setIsOutputOnly, exports.setCascadeUpdate = _a.setCascadeUpdate, exports.setError = _a.setError, exports.setHasShownSavePrompt = _a.setHasShownSavePrompt, exports.setProject = _a.setProject, exports.setReadOnly = _a.setReadOnly, exports.setLoading = _a.setLoading, exports.stopCodeRun = _a.stopCodeRun, exports.stopDraw = _a.stopDraw, exports.triggerCodeRun = _a.triggerCodeRun, exports.triggerDraw = _a.triggerDraw, exports.setSaveTriggered = _a.setSaveTriggered, exports.updateProjectName = _a.updateProjectName, exports.showErrorModal = _a.showErrorModal, exports.closeErrorModal = _a.closeErrorModal, exports.showModal = _a.showModal, exports.closeModal = _a.closeModal, exports.showSidebar = _a.showSidebar, exports.hideSidebar = _a.hideSidebar, exports.disableTheming = _a.disableTheming, exports.setSaving = _a.setSaving, exports.applyComponentsPatch = _a.applyComponentsPatch, exports.setCommits = _a.setCommits, exports.setLoadCommit = _a.setLoadCommit;
 exports.queueBinaryWrites = (0, toolkit_1.createAction)("editor/queueBinaryWrites");
 exports["default"] = exports.EditorSlice.reducer;
 
@@ -372874,7 +373187,7 @@ exports["default"] = store;
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.LoadingState = exports.ModalType = void 0;
+exports.LoadingState = exports.SavingState = exports.ModalType = void 0;
 var ModalType;
 (function (ModalType) {
     ModalType["SHARE_PROJECT"] = "shareProject";
@@ -372884,6 +373197,11 @@ var ModalType;
     ModalType["UPLOAD_SIZE_LIMIT"] = "uploadSizeLimit";
     ModalType["UPLOAD_FILES"] = "uploadFiles";
 })(ModalType || (exports.ModalType = ModalType = {}));
+var SavingState;
+(function (SavingState) {
+    SavingState["IDLE"] = "idle";
+    SavingState["PROCESS"] = "process";
+})(SavingState || (exports.SavingState = SavingState = {}));
 var LoadingState;
 (function (LoadingState) {
     LoadingState["IDLE"] = "idle";
@@ -372932,7 +373250,7 @@ var ErrorType;
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.MIME_IMAGE_JPG = exports.MIME_IMAGE_JPEG = exports.ProjectFileExtension = exports.ProjectType = exports.ProjectComponentType = void 0;
+exports.MIME_IMAGE_JPG = exports.MIME_IMAGE_JPEG = exports.binaryExtensions = exports.MIME_BY_EXT = exports.ProjectFileExtension = exports.ProjectType = exports.ProjectComponentType = void 0;
 var ProjectComponentType;
 (function (ProjectComponentType) {
     ProjectComponentType["FILE"] = "file";
@@ -372959,6 +373277,17 @@ var ProjectFileExtension;
     ProjectFileExtension["WAV"] = "wav";
     ProjectFileExtension["TXT"] = "txt";
 })(ProjectFileExtension || (exports.ProjectFileExtension = ProjectFileExtension = {}));
+var MIME_BY_EXT;
+(function (MIME_BY_EXT) {
+    MIME_BY_EXT["png"] = "image/png";
+    MIME_BY_EXT["jpg"] = "image/jpg";
+    MIME_BY_EXT["jpeg"] = "image/jpeg";
+    MIME_BY_EXT["gif"] = "image/gif";
+    MIME_BY_EXT["mp3"] = "audio/mpeg";
+    MIME_BY_EXT["wav"] = "audio/wav";
+})(MIME_BY_EXT || (exports.MIME_BY_EXT = MIME_BY_EXT = {}));
+;
+exports.binaryExtensions = ["png", "jpg", "jpeg", "gif", "mp3", "wav"];
 exports.MIME_IMAGE_JPEG = "image/jpeg";
 exports.MIME_IMAGE_JPG = "image/jpg";
 
@@ -373299,6 +373628,37 @@ exports.ErrorToMsgMap = {
 };
 
 
+/***/ }),
+
+/***/ 46514:
+/***/ (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.createProjectArchive = createProjectArchive;
+const jszip_1 = __importDefault(__webpack_require__(71710));
+const ProjectTypes_1 = __webpack_require__(27130);
+const binaryStore_1 = __webpack_require__(5060);
+async function createProjectArchive(project) {
+    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;
+        const blob = await binaryStore_1.binaryStore.get(file.id);
+        zip.file(safePath, blob ?? file.content);
+    }));
+    return zip.generateAsync({ type: "blob" });
+}
+
+
 /***/ }),
 
 /***/ 74133:
@@ -373468,6 +373828,130 @@ const matchingRegexes = (regexArray, testString) => {
 exports.matchingRegexes = matchingRegexes;
 
 
+/***/ }),
+
+/***/ 65404:
+/***/ (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.loadProjectFromZip = loadProjectFromZip;
+const jszip_1 = __importDefault(__webpack_require__(71710));
+const ProjectTypes_1 = __webpack_require__(27130);
+const projectHelpers_1 = __webpack_require__(2610);
+const binaryStore_1 = __webpack_require__(5060);
+const projectBinaryIndex_1 = __webpack_require__(3044);
+function normPath(p) {
+    let s = (p || "").replace(/\\/g, "/").replace(/^\/+/, "");
+    // remove extra folder in zipball zip
+    s = s.replace(/^(\.[/])+/, "");
+    return s;
+}
+function ensureDir(dirsByPath, parentPath, name) {
+    const path = parentPath === "/" ? `/${name}` : `${parentPath}/${name}`;
+    const existing = dirsByPath.get(path);
+    if (existing)
+        return existing;
+    const dir = {
+        id: crypto.randomUUID(),
+        type: ProjectTypes_1.ProjectComponentType.DIR,
+        name,
+        path,
+        children: [],
+    };
+    dirsByPath.set(path, dir);
+    return dir;
+}
+function pushChild(parent, childId) {
+    if (!parent.children.includes(childId))
+        parent.children.push(childId);
+}
+async function loadProjectFromZip(opts) {
+    const zip = await jszip_1.default.loadAsync(opts.zipBlob);
+    const rootDirId = crypto.randomUUID();
+    const root = {
+        id: rootDirId,
+        type: ProjectTypes_1.ProjectComponentType.DIR,
+        name: "",
+        path: "/",
+        children: [],
+    };
+    const dirsByPath = new Map();
+    dirsByPath.set("/", root);
+    const files = [];
+    const binaryIds = [];
+    const entries = Object.values(zip.files);
+    const rootPath = entries[0]?.name ?? "";
+    for (const entry of entries) {
+        if (entry.dir)
+            continue;
+        const raw = normPath(entry.name.replace(rootPath, ""));
+        if (!raw)
+            continue;
+        const parts = raw.split("/").filter(Boolean);
+        const fileName = parts.pop();
+        if (!fileName)
+            continue;
+        let parentPath = "/";
+        let parentDir = root;
+        for (const seg of parts) {
+            const dir = ensureDir(dirsByPath, parentPath, seg);
+            pushChild(parentDir, dir.id);
+            parentDir = dir;
+            parentPath = dir.path;
+        }
+        const { name, extension } = (0, projectHelpers_1.parseFileName)(fileName);
+        const fileId = crypto.randomUUID();
+        const extLower = (extension || "").toLowerCase();
+        const isBinary = ProjectTypes_1.binaryExtensions.includes(extLower);
+        let content = "";
+        let mimeType;
+        if (isBinary) {
+            const ab = await entry.async("arraybuffer");
+            mimeType = ProjectTypes_1.MIME_BY_EXT[extLower] || "application/octet-stream";
+            await binaryStore_1.binaryStore.set(fileId, ab, mimeType);
+            binaryIds.push(fileId);
+        }
+        else {
+            content = await entry.async("text");
+            mimeType = "text/plain;charset=utf-8";
+        }
+        const file = {
+            id: fileId,
+            type: ProjectTypes_1.ProjectComponentType.FILE,
+            name,
+            extension: extLower,
+            content,
+            isBinary,
+            mimeType,
+            path: parentPath === "/" ? `/${fileName}` : `${parentPath}/${fileName}`,
+        };
+        files.push(file);
+        pushChild(parentDir, file.id);
+    }
+    const dirs = Array.from(dirsByPath.values());
+    const allComponents = [...dirs, ...files];
+    const componentsMap = new Map(allComponents.map((c) => [c.id, c]));
+    for (const d of dirs) {
+        d.children = (0, projectHelpers_1.sortChildren)(d.children ?? [], componentsMap);
+    }
+    if (binaryIds.length) {
+        await (0, projectBinaryIndex_1.addBinaryIdsToProjectIndex)(opts.identifier, binaryIds);
+    }
+    const project = {
+        name: opts.name,
+        identifier: opts.identifier,
+        project_type: opts.projectType,
+        rootDirId,
+        components: allComponents,
+    };
+    return project;
+}
+
+
 /***/ }),
 
 /***/ 3044:

package/dist/style.css

@@ -671,7 +671,7 @@
 }
 
 /*# sourceMappingURL=ReactToastify.css.map */
-:root{--rpf-white: #ffffff}.styles-module__pythonrunnerContainer---nPGz,.styles-module__htmlrunnerContainer--KPi8D{display:flex;flex-direction:column;flex:1;gap:calc(.5rem*var(--scale-factor, 1));block-size:100%;inline-size:100%}.styles-module__console--B8x1A{padding:calc(.75rem*var(--scale-factor, 1)) calc(1rem*var(--scale-factor, 1));margin:0;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;width:100%;word-wrap:break-word;overflow-y:auto;font-size:13px;line-height:18px;font-family:"Roboto Mono",source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}.styles-module__pythonGraphic--V\+du6{overflow:auto;position:relative}.styles-module__pyodiderunner--DKTtB{display:none}.styles-module__pyodiderunner--DKTtB.styles-module__active--bKVnT{display:flex}.styles-module__visualOutput--WLaca{flex:1;display:flex;min-block-size:100%;inline-size:100%}.styles-module__outputPanel--W1TnW{display:flex;overflow:hidden;background-color:#fff;border-radius:calc(.5rem*var(--scale-factor, 1)) calc(.5rem*var(--scale-factor, 1)) calc(.25rem*var(--scale-factor, 1)) calc(.25rem*var(--scale-factor, 1));flex:5}.styles-module__consoleOutputLine--y3Vbp{padding-inline-end:5px}.styles-module__consoleOutputLine--y3Vbp.styles-module__stderr--PIyhL{color:red}.styles-module__pythonrunnerInput--dOXEa{caret-color:inherit;color:#2467ec;display:block;line-height:20px;padding:2px 1px 2px 0}.styles-module__pythonrunnerInput--dOXEa:focus{outline:0}.styles-module__previewLink--rWLII{margin-inline-start:auto;padding-top:calc(.25rem*var(--scale-factor, 1))}.styles-module__previewHtml--oWG28{padding:calc(.25rem*var(--scale-factor, 1))}.styles-module__iframe--YfQ0V{border:none;border-radius:calc(.25rem*var(--scale-factor, 1));background-color:#fff;block-size:100%;inline-size:100%}.styles-module__iframe--YfQ0V.styles-module__codeHasBeenRun--fqiYL{border:1px solid #e5e5e5}#p5Sketch{display:flex;flex:1;position:absolute}.pythonrunner-graphic{overflow:auto;position:relative}
+:root{--rpf-white: #ffffff}.styles-module__pythonrunnerContainer---nPGz,.styles-module__htmlrunnerContainer--KPi8D{display:flex;flex-direction:column;flex:1;gap:calc(.5rem*var(--scale-factor, 1));block-size:100%;inline-size:100%}.styles-module__console--B8x1A{padding:calc(.75rem*var(--scale-factor, 1)) calc(1rem*var(--scale-factor, 1));margin:0;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;width:100%;word-wrap:break-word;overflow-y:auto;color:#242424;font-size:13px;line-height:18px;font-family:"Roboto Mono",source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}.styles-module__pythonGraphic--V\+du6{overflow:auto;position:relative}.styles-module__pyodiderunner--DKTtB{display:none}.styles-module__pyodiderunner--DKTtB.styles-module__active--bKVnT{display:flex}.styles-module__visualOutput--WLaca{flex:1;display:flex;min-block-size:100%;inline-size:100%}.styles-module__outputPanel--W1TnW{display:flex;overflow:hidden;background-color:#fff;border-radius:calc(.5rem*var(--scale-factor, 1)) calc(.5rem*var(--scale-factor, 1)) calc(.25rem*var(--scale-factor, 1)) calc(.25rem*var(--scale-factor, 1));flex:5}.styles-module__pythonConsoleLine--bwFQC{padding-inline-end:5px}.styles-module__pythonConsoleLine--bwFQC.styles-module__stderr--PIyhL{color:red}.styles-module__pythonrunnerInput--dOXEa{caret-color:inherit;color:#2467ec;display:block;line-height:20px;padding:2px 1px 2px 0}.styles-module__pythonrunnerInput--dOXEa:focus{outline:0}.styles-module__webConsole--MTdnk{padding:calc(.25rem*var(--scale-factor, 1))}.styles-module__webConsoleLine--j31U1{display:flex;align-items:flex-start;flex-wrap:wrap;padding:0 calc(.25rem*var(--scale-factor, 1)) 0 calc(1.5rem*var(--scale-factor, 1));margin-bottom:calc(.25rem*var(--scale-factor, 1))}.styles-module__webConsoleLine--j31U1>span:first-child{display:flex;align-items:center;flex-shrink:0;white-space:nowrap}.styles-module__webConsoleLine--j31U1>span:last-child{flex:1;word-break:break-word}.styles-module__webConsoleLine--j31U1>span:last-child:has(>details){flex:1 1 100%}.styles-module__string--YDxWc{color:#242424}.styles-module__stringInsideStructure--KJtZp{color:#a31515}.styles-module__number--7h5TG,.styles-module__boolean--WYb4I{color:#0d47a1}.styles-module__null--BZCmR,.styles-module__undefined--nQkol{color:#888}.styles-module__key--ZZTlD{color:#aa0d91}.styles-module__error--RL5Lt{border-radius:calc(.25rem*var(--scale-factor, 1));padding-left:calc(.5rem*var(--scale-factor, 1));background:#ffd5ce}.styles-module__errorIcon--Gnn4-{margin-right:calc(.25rem*var(--scale-factor, 1));color:#e0201c}.styles-module__warn--B\+MPR{border-radius:calc(.25rem*var(--scale-factor, 1));padding-left:calc(.5rem*var(--scale-factor, 1));background:#fffbe3}.styles-module__warnIcon--Q82Y5{margin-right:calc(.25rem*var(--scale-factor, 1));color:#a88f00}.styles-module__timestamp--HDZxD{color:#69746d;margin-right:calc(.5rem*var(--scale-factor, 1))}.styles-module__details--W1bGT{display:inline-block}.styles-module__summary--vms5d{cursor:pointer;user-select:none}.styles-module__nestedEntry--OU25X{display:flex;gap:calc(.3125rem*var(--scale-factor, 1))}.styles-module__previewLink--rWLII{margin-inline-start:auto;padding-top:calc(.25rem*var(--scale-factor, 1))}.styles-module__previewHtml--oWG28{padding:calc(.25rem*var(--scale-factor, 1))}.styles-module__iframe--YfQ0V{border:none;border-radius:calc(.25rem*var(--scale-factor, 1));background-color:#fff;block-size:100%;inline-size:100%}.styles-module__iframe--YfQ0V.styles-module__codeHasBeenRun--fqiYL{border:1px solid #e5e5e5}#p5Sketch{display:flex;flex:1;position:absolute}.pythonrunner-graphic{overflow:auto;position:relative}
 :root{--rpf-white: #ffffff}.styles-module__container--uYbdi{color:#e0201c;padding:calc(.75rem*var(--scale-factor, 1)) calc(1.25rem*var(--scale-factor, 1));overflow-y:auto;display:flex;flex-direction:column;gap:calc(1rem*var(--scale-factor, 1))}.styles-module__message--hNGZt{padding:0;margin:0;white-space:pre-wrap;word-break:break-word;font-size:13px;line-height:18px;font-family:"Roboto Mono",source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}.styles-module__infoBox--Ti35B{width:100%;overflow-wrap:break-word;padding:calc(.5rem*var(--scale-factor, 1));background-color:#ffd5ce;color:#520e0e;display:flex;flex-direction:row;align-items:start;justify-content:flex-start;border:1px solid #e0201c;border-radius:calc(.5rem*var(--scale-factor, 1));gap:calc(.25rem*var(--scale-factor, 1))}.styles-module__infoBox--Ti35B svg{color:#e0201c}.styles-module__infoText--jXz2P{display:flex;flex-direction:column;align-items:flex-start;gap:calc(.3125rem*var(--scale-factor, 1))}.styles-module__notFoundContainer--YfNdr{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;gap:calc(2rem*var(--scale-factor, 1));padding:calc(2rem*var(--scale-factor, 1)) calc(1rem*var(--scale-factor, 1));overflow:scroll;justify-content:space-evenly}.styles-module__notFoundText--q6EKC{display:flex;flex-direction:column;align-items:center;gap:calc(1rem*var(--scale-factor, 1))}
 .styles-module__svgIcon--eiAsQ{display:block}.styles-module__svgIcon-8--0J-NH{width:8px;height:8px;min-width:8px}.styles-module__svgIcon-9--4U91M{width:9px;height:9px;min-width:9px}.styles-module__svgIcon-10--b6pWr{width:10px;height:10px;min-width:10px}.styles-module__svgIcon-11--UBu85{width:11px;height:11px;min-width:11px}.styles-module__svgIcon-12--ca5dh{width:12px;height:12px;min-width:12px}.styles-module__svgIcon-13--H5H9q{width:13px;height:13px;min-width:13px}.styles-module__svgIcon-14--02QBx{width:14px;height:14px;min-width:14px}.styles-module__svgIcon-15---h9Pf{width:15px;height:15px;min-width:15px}.styles-module__svgIcon-16--xSxA4{width:16px;height:16px;min-width:16px}.styles-module__svgIcon-17--Puaug{width:17px;height:17px;min-width:17px}.styles-module__svgIcon-18--QewDX{width:18px;height:18px;min-width:18px}.styles-module__svgIcon-19--iC7Jc{width:19px;height:19px;min-width:19px}.styles-module__svgIcon-20--PrJEw{width:20px;height:20px;min-width:20px}.styles-module__svgIcon-21---Hd09{width:21px;height:21px;min-width:21px}.styles-module__svgIcon-22--d8Xg1{width:22px;height:22px;min-width:22px}.styles-module__svgIcon-23--pGQQQ{width:23px;height:23px;min-width:23px}.styles-module__svgIcon-24--IqT3u{width:24px;height:24px;min-width:24px}.styles-module__svgIcon-25--PfjHm{width:25px;height:25px;min-width:25px}.styles-module__svgIcon-26--cFTjX{width:26px;height:26px;min-width:26px}.styles-module__svgIcon-27--MPei3{width:27px;height:27px;min-width:27px}.styles-module__svgIcon-28--W7Xyd{width:28px;height:28px;min-width:28px}.styles-module__svgIcon-29--EUfun{width:29px;height:29px;min-width:29px}.styles-module__svgIcon-30--lQhTn{width:30px;height:30px;min-width:30px}.styles-module__svgIcon-31--Lf753{width:31px;height:31px;min-width:31px}.styles-module__svgIcon-32--\+xBfi{width:32px;height:32px;min-width:32px}
 .styles-module__text--w\+\+5r{font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif}.styles-module__code--E-a9Y{font-family:"Roboto Mono",source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}.styles-module__size-12--hY0wv{font-size:calc(12/16*1rem*var(--scale-factor, 1));line-height:calc(16/16*1rem*var(--scale-factor, 1))}.styles-module__size-14--WSVwD{font-size:calc(14/16*1rem*var(--scale-factor, 1));line-height:calc(20/16*1rem*var(--scale-factor, 1))}.styles-module__size-16--6hjvA{font-size:calc(16/16*1rem*var(--scale-factor, 1));line-height:calc(24/16*1rem*var(--scale-factor, 1))}.styles-module__size-18--P7XJw{font-size:calc(18/16*1rem*var(--scale-factor, 1));line-height:calc(30/16*1rem*var(--scale-factor, 1))}.styles-module__size-20--py7l4{font-size:calc(20/16*1rem*var(--scale-factor, 1));line-height:calc(32/16*1rem*var(--scale-factor, 1))}.styles-module__size-24--tYu3W{font-size:calc(24/16*1rem*var(--scale-factor, 1));line-height:calc(34/16*1rem*var(--scale-factor, 1))}.styles-module__weight-regular--S9vrI{font-weight:400}.styles-module__weight-medium--JN8TI{font-weight:500}.styles-module__weight-bold--JgpDo{font-weight:700}
@@ -703,6 +703,6 @@
 :root{--rpf-white: #ffffff}.styles-module__content--vm091{width:454px;top:256px;left:493px}.styles-module__headerText--O4YZK{color:#003046;line-height:34px}.styles-module__headerIcon--F-\+Vd path{stroke:#33625e}.styles-module__containerBox--HK-4z{margin-top:calc(.5rem*var(--scale-factor, 1));font-weight:400;font-size:calc(.75rem*var(--scale-factor, 1));line-height:calc(1rem*var(--scale-factor, 1));text-align:center;color:#242424}.styles-module__containerBox--HK-4z .styles-module__versionDate--OLHbO{font-weight:500;font-size:18px;line-height:30px;margin-top:calc(.5rem*var(--scale-factor, 1));margin-bottom:calc(.5rem*var(--scale-factor, 1));color:#33625e}.styles-module__containerBox--HK-4z .styles-module__messageContainer--PVpY\+{background-color:#b9e6ee;border-radius:calc(.5rem*var(--scale-factor, 1));padding:calc(1rem*var(--scale-factor, 1));gap:calc(.5rem*var(--scale-factor, 1));opacity:1;display:flex;text-align:left;color:#003046}.styles-module__containerBox--HK-4z .styles-module__messageContainer--PVpY\+ svg path{stroke:#0d47a1}.styles-module__buttonsContainer--dWeY9{margin-top:calc(.5rem*var(--scale-factor, 1));padding-bottom:0px}
 :root{--rpf-white: #ffffff}.styles-module__content--uVl64{width:330px;gap:0px}.styles-module__headerContainer--FPLYl{text-align:center}.styles-module__headerIcon--VUrhy path{fill:#e0201c}.styles-module__headerText--F\+NA0{color:#003046;line-height:34px}.styles-module__containerBox--Dezow{margin-top:calc(.25rem*var(--scale-factor, 1));color:#242424;font-weight:400;font-size:calc(.75rem*var(--scale-factor, 1));line-height:calc(1rem*var(--scale-factor, 1));text-align:center}.styles-module__buttonsContainer--pnT1Q{margin-top:calc(.75rem*var(--scale-factor, 1));padding-bottom:0px}
 :root{--rpf-white: #ffffff}.styles-module__content--UhJMG{width:454px;gap:0px}.styles-module__modalContentHeader--YPWsb{height:16px}.styles-module__headerText--89Clx{font-weight:400;font-size:calc(1.5rem*var(--scale-factor, 1));leading-trim:NONE;line-height:34px;text-align:center;color:#003046}.styles-module__containerBox--WUoyb{margin-top:calc(.25rem*var(--scale-factor, 1));font-weight:400;font-size:calc(.75rem*var(--scale-factor, 1));leading-trim:NONE;line-height:calc(1rem*var(--scale-factor, 1));color:#003046;text-align:center}.styles-module__containerBox--WUoyb .styles-module__messageContainer--WzXV7{background-color:#b9e6ee;border-radius:calc(.5rem*var(--scale-factor, 1));padding:calc(1rem*var(--scale-factor, 1));gap:calc(.5rem*var(--scale-factor, 1));opacity:1;display:flex;text-align:left}.styles-module__containerBox--WUoyb .styles-module__messageContainer--WzXV7 .styles-module__messageIcon--a6yn-{display:flex;align-items:center;color:#0d47a1}.styles-module__containerBox--WUoyb .styles-module__messageContainer--WzXV7 .styles-module__messageContent--CYn9o{display:flex;align-items:center;color:#003046}.styles-module__buttonsContainer--1toXb{margin-top:calc(.5rem*var(--scale-factor, 1));padding-bottom:0px}
-:root{--rpf-white: #ffffff}.styles-module__content--pEmxZ{width:330px}.styles-module__headerIcon--mzjrS{text-align:center;fill:rgba(0,0,0,0)}.styles-module__headerIcon--mzjrS svg{fill:rgba(0,0,0,0);stroke:#edce22 !important}.styles-module__headerText--pt2r0{color:#003046;line-height:34px}.styles-module__containerBox--r5zsA{margin-top:calc(.75rem*var(--scale-factor, 1));color:#242424;font-size:calc(.75rem*var(--scale-factor, 1));line-height:calc(1rem*var(--scale-factor, 1));display:flex;justify-content:center}.styles-module__buttonsContainer--I3Coy{margin-top:calc(.5rem*var(--scale-factor, 1))}
+:root{--rpf-white: #ffffff}.styles-module__content--pEmxZ{width:330px}.styles-module__headerIcon--mzjrS{text-align:center;fill:rgba(0,0,0,0);color:#edce22}.styles-module__headerText--pt2r0{color:#003046;line-height:34px}.styles-module__containerBox--r5zsA{margin-top:calc(.75rem*var(--scale-factor, 1));color:#242424;font-size:calc(.75rem*var(--scale-factor, 1));line-height:calc(1rem*var(--scale-factor, 1));display:flex;justify-content:center}.styles-module__buttonsContainer--I3Coy{margin-top:calc(.5rem*var(--scale-factor, 1))}
 :root{--rpf-white: #ffffff}.styles-module__content--j863h{display:flex;flex-direction:column;align-items:center;gap:calc(.5rem*var(--scale-factor, 1));color:#003046}.styles-module__infoBox--MyOkq{width:100%;background-color:#b9e6ee;border-radius:calc(.5rem*var(--scale-factor, 1));padding:calc(1rem*var(--scale-factor, 1));display:flex;align-items:start;gap:calc(.5rem*var(--scale-factor, 1));margin-bottom:calc(.5rem*var(--scale-factor, 1));overflow-wrap:anywhere}.styles-module__infoBox--MyOkq svg{margin:calc(.125rem*var(--scale-factor, 1));color:#0d47a1}
 :root{--rpf-white: #ffffff}.styles-module__loadingPage--r5PoP{margin:0px;padding:0px;background-color:#e5f6f1;min-height:100vh;display:flex;align-items:center;justify-content:center;font-family:"Roboto Flex";font-weight:600;text-align:center;color:#33625e;font-size:calc(1.25rem*var(--scale-factor, 1));line-height:calc(1.5rem*var(--scale-factor, 1))}.styles-module__loadingContainerAnimation--FNE3T{height:calc(4rem*var(--scale-factor, 1));margin-bottom:calc(1.875rem*var(--scale-factor, 1))}.styles-module__loadingContainerSubtext--1xp7T{margin-top:calc(.5rem*var(--scale-factor, 1));font-weight:400;font-size:calc(.875rem*var(--scale-factor, 1));line-height:calc(1.25rem*var(--scale-factor, 1))}.styles-module__dots--wWdo2{display:inline-block;margin-left:.1em}.styles-module__dot--RwqoT{opacity:0;display:inline-block;animation:styles-module__dot1--hGBky 6s infinite linear}.styles-module__dot2--hoNk-{animation-name:styles-module__dot2--hoNk-}.styles-module__dot3---5q-W{animation-name:styles-module__dot3---5q-W}@keyframes styles-module__dot1--hGBky{0%{opacity:0}5%{opacity:1}80%{opacity:1}83.333%{opacity:0}100%{opacity:0}}@keyframes styles-module__dot2--hoNk-{0%{opacity:0}16.666%{opacity:0}21%{opacity:1}62%{opacity:1}66.666%{opacity:0}100%{opacity:0}}@keyframes styles-module__dot3---5q-W{0%{opacity:0}33.333%{opacity:0}37%{opacity:1}46%{opacity:1}50%{opacity:0}100%{opacity:0}}@media(prefers-reduced-motion: reduce){.styles-module__dot--RwqoT{animation:none;opacity:1}}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gwchq-textjam",
   "description": "Embeddable React editor used in Raspberry Pi text-based projects.",
-  "version": "0.1.71",
+  "version": "0.1.73",
   "license": "Apache-2.0",
   "homepage": "https://github.com/GirlsFirst/gwchq-textjam",
   "author": "Girls Who Code HQ",