gwchq-textjam 0.3.3 → 0.3.4

package/dist/index.js

@@ -68492,8 +68492,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_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(89379);
-/* harmony import */ var _Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(53986);
+/* harmony import */ var _Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(89379);
+/* harmony import */ var _Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(53986);
 /* 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_4__ = __webpack_require__(68512);
@@ -68513,7 +68513,7 @@ var DraggableTab = _ref => {
       fileIndex,
       onTabClick
     } = _ref,
-    otherProps = (0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .A)(_ref, _excluded);
+    otherProps = (0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .A)(_ref, _excluded);
   var openedTabs = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(state => state.editor.openedTabs);
   var openFilesCount = openedTabs.filter(t => t && t.type === "file").length || 1;
   var dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useDispatch)();
@@ -68531,7 +68531,7 @@ var DraggableTab = _ref => {
       switchToFileTab((fileIndex + openFilesCount - 1) % openFilesCount);
     }
   };
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Tabs_DraggableTabWrapper__WEBPACK_IMPORTED_MODULE_5__["default"], (0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A)((0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A)({
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Tabs_DraggableTabWrapper__WEBPACK_IMPORTED_MODULE_5__["default"], (0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A)((0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A)({
     draggableId: "draggable".concat(fileIndex),
     index: fileIndex,
     onClick: e => {
@@ -68555,8 +68555,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_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 _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 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);
@@ -68575,8 +68575,8 @@ var DroppableTabList = _ref => {
       children: _children,
       index
     } = _ref,
-    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), {}, {
+    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), {}, {
     children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_hello_pangea_dnd__WEBPACK_IMPORTED_MODULE_6__.Droppable, {
       direction: "horizontal",
       droppableId: index.toString(),
@@ -68586,7 +68586,7 @@ var DroppableTabList = _ref => {
           droppableProps,
           placeholder
         } = _ref2;
-        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)({
+        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)({
           className: "droppable-tab-list"
         }, droppableProps), {}, {
           ref: innerRef,
@@ -103159,7 +103159,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* 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_valeriya_projects_gwc_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);
@@ -103273,7 +103273,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,_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)({
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("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)({
       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()), {
@@ -103654,7 +103654,7 @@ var SaveButton = props => {
   }, hoverProps), {}, {
     children: [/*#__PURE__*/(0,jsx_runtime.jsx)((Tooltip_default()), {
       message: DEFAULT_TOOLTIP + (hasChangesToSave ? "" : "\n" + NO_CHANGES_TO_SAVE_MESSAGE),
-      visible: hovered,
+      visible: hovered && !hasChangesToSave,
       position: "bottom"
     }), /*#__PURE__*/(0,jsx_runtime.jsx)(Button["default"], (0,objectSpread2/* default */.A)({
       buttonText: buttonText,
@@ -107294,50 +107294,6 @@ var _excluded = ["children", "defaultWidth", "defaultHeight", "handleDirection",
 
 
 
-var VerticalHandle = _ref => {
-  var {
-    className
-  } = _ref;
-  return /*#__PURE__*/(0,jsx_runtime.jsx)("svg", {
-    "data-testid": "verticalHandle",
-    width: "44",
-    height: "56",
-    viewBox: "0 0 44 56",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className: className,
-    children: /*#__PURE__*/(0,jsx_runtime.jsx)("rect", {
-      x: "20",
-      width: "4",
-      height: "56",
-      rx: "2",
-      fill: "#616575"
-    })
-  });
-};
-var HorizontalHandle = _ref2 => {
-  var {
-    className
-  } = _ref2;
-  return /*#__PURE__*/(0,jsx_runtime.jsx)("svg", {
-    "data-testid": "horizontalHandle",
-    width: "56",
-    height: "44",
-    viewBox: "0 0 56 44",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className: className,
-    children: /*#__PURE__*/(0,jsx_runtime.jsx)("rect", {
-      x: "56",
-      y: "20",
-      width: "4",
-      height: "56",
-      rx: "2",
-      transform: "rotate(90 56 20)",
-      fill: "#616575"
-    })
-  });
-};
 var ResizableWithHandle = props => {
   var {
       children,
@@ -107352,22 +107308,13 @@ var ResizableWithHandle = props => {
   (0,external_react_.useMemo)(() => setWidth(defaultWidth), [defaultWidth]);
   (0,external_react_.useMemo)(() => setHeight(defaultHeight), [defaultHeight]);
   var onResizeStop = function onResizeStop() {
-    for (var _len = arguments.length, _ref3 = new Array(_len), _key = 0; _key < _len; _key++) {
-      _ref3[_key] = arguments[_key];
+    for (var _len = arguments.length, _ref = new Array(_len), _key = 0; _key < _len; _key++) {
+      _ref[_key] = arguments[_key];
     }
-    var [,,, d] = _ref3;
+    var [,,, d] = _ref;
     setWidth(width + d.width);
     setHeight(height + d.height);
   };
-  var handleComponent = ["right", "left"].includes(handleDirection) ? {
-    [handleDirection]: /*#__PURE__*/(0,jsx_runtime.jsx)(VerticalHandle, {
-      className: handleClassName
-    })
-  } : ["top", "bottom"].includes(handleDirection) ? {
-    [handleDirection]: /*#__PURE__*/(0,jsx_runtime.jsx)(HorizontalHandle, {
-      className: handleClassName
-    })
-  } : {};
   var handleWrapperClass = "resizable-with-handle__handle resizable-with-handle__handle--".concat(handleDirection);
   return /*#__PURE__*/(0,jsx_runtime.jsx)(Resizable, (0,objectSpread2/* default */.A)((0,objectSpread2/* default */.A)({
     enable: (0,objectSpread2/* default */.A)({
@@ -107378,7 +107325,6 @@ var ResizableWithHandle = props => {
     }, {
       [handleDirection]: true
     }),
-    handleComponent: handleComponent,
     handleWrapperClass: handleWrapperClass,
     onResizeStop: onResizeStop,
     size: {
@@ -107386,9 +107332,13 @@ var ResizableWithHandle = props => {
       height: height
     },
     handleStyles: {
+      top: {
+        top: "-9px"
+      },
       right: {
         height: "96%",
-        top: "2%"
+        top: "2%",
+        marginRight: "-12px"
       }
     },
     handleClasses: handleClassName
@@ -143077,7 +143027,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","outputStackContainer":"styles-module__outputStackContainer--7Y14r","resizeHandleContainer":"styles-module__resizeHandleContainer--FID6p","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","consoleMessageContent":"styles-module__consoleMessageContent--vXp1a","consoleMessageInline":"styles-module__consoleMessageInline--5pNbC","consoleCount":"styles-module__consoleCount--JLMn5","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","visualPanePadding":"styles-module__visualPanePadding--ytRHn","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","outputStackContainer":"styles-module__outputStackContainer--7Y14r","resizeHandleContainer":"styles-module__resizeHandleContainer--FID6p","console":"styles-module__console--B8x1A","consoleMount":"styles-module__consoleMount--1BJWe","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","consoleMessageContent":"styles-module__consoleMessageContent--vXp1a","consoleMessageInline":"styles-module__consoleMessageInline--5pNbC","consoleCount":"styles-module__consoleCount--JLMn5","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","visualPanePadding":"styles-module__visualPanePadding--ytRHn","iframe":"styles-module__iframe--YfQ0V","codeHasBeenRun":"styles-module__codeHasBeenRun--fqiYL","previewSlot":"styles-module__previewSlot--V8txy","previewHost":"styles-module__previewHost--20-DL"});
 
 /***/ }),
 
@@ -143245,7 +143195,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","wrapper":"styles-module__wrapper--NmEQI","header":"styles-module__header--UkMi-","headerBtn":"styles-module__headerBtn--kUJII","gwcLogo":"styles-module__gwcLogo--svs9k","textJamLogo":"styles-module__textJamLogo--dZcnz","btnSvg":"styles-module__btnSvg--Ri2uZ","projectName":"styles-module__projectName--6o3NT","linkButton":"styles-module__linkButton--bj6aP","sharedProject":"styles-module__sharedProject--baj0W","remixBtnContent":"styles-module__remixBtnContent--sJf5m"});
+/* 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","wrapper":"styles-module__wrapper--NmEQI","tooltipAnchor":"styles-module__tooltipAnchor--nyFj4","header":"styles-module__header--UkMi-","headerBtn":"styles-module__headerBtn--kUJII","gwcLogo":"styles-module__gwcLogo--svs9k","textJamLogo":"styles-module__textJamLogo--dZcnz","btnSvg":"styles-module__btnSvg--Ri2uZ","projectName":"styles-module__projectName--6o3NT","linkButton":"styles-module__linkButton--bj6aP","sharedProject":"styles-module__sharedProject--baj0W","remixBtnContent":"styles-module__remixBtnContent--sJf5m"});
 
 /***/ }),
 
@@ -143316,7 +143266,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","toastContainer":"styles-module__toastContainer--SzERA","toastMessage":"styles-module__toastMessage--5Ze6a","errorIcon":"styles-module__errorIcon--v90W6","successIcon":"styles-module__successIcon--gCtAd","closeIcon":"styles-module__closeIcon--iZ9ey","infoIcon":"styles-module__infoIcon--tva-x"});
+/* 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","toastContainer":"styles-module__toastContainer--SzERA","toastMessage":"styles-module__toastMessage--5Ze6a","errorIcon":"styles-module__errorIcon--v90W6","successIcon":"styles-module__successIcon--gCtAd","closeIcon":"styles-module__closeIcon--iZ9ey","toastList":"styles-module__toastList--7K4rT","toast":"styles-module__toast--LJOJf","toastBody":"styles-module__toastBody--0iN2Q","infoIcon":"styles-module__infoIcon--tva-x"});
 
 /***/ }),
 
@@ -143328,7 +143278,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","tooltip":"styles-module__tooltip--7XFyr","visible":"styles-module__visible--wGPCM","position-bottom":"styles-module__position-bottom--Lwi+l","position-fixed":"styles-module__position-fixed--t8yrP"});
+/* 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","tooltip":"styles-module__tooltip--7XFyr","visible":"styles-module__visible--wGPCM","position-bottom":"styles-module__position-bottom--Lwi+l","position-bottom-right":"styles-module__position-bottom-right--SMrip","position-fixed":"styles-module__position-fixed--t8yrP","size-default":"styles-module__size-default--B+ZT4","size-fit":"styles-module__size-fit--ZW8rV"});
 
 /***/ }),
 
@@ -347011,10 +346961,10 @@ __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  Tab: () => (/* reexport */ Tab),
-  TabList: () => (/* reexport */ TabList),
-  TabPanel: () => (/* reexport */ TabPanel),
-  Tabs: () => (/* reexport */ Tabs),
+  Tab: () => (/* reexport */ components_Tab),
+  TabList: () => (/* reexport */ components_TabList),
+  TabPanel: () => (/* reexport */ components_TabPanel),
+  Tabs: () => (/* reexport */ components_Tabs),
   resetIdCounter: () => (/* reexport */ uuid_reset)
 });
 
@@ -347163,13 +347113,6 @@ function count_getTabsCount(children) {
   });
   return tabCount;
 }
-function count_getPanelsCount(children) {
-  var panelCount = 0;
-  childrenDeepMap_deepForEach(children, function (child) {
-    if (elementTypes_isTabPanel(child)) panelCount++;
-  });
-  return panelCount;
-}
 ;// ./node_modules/react-tabs/esm/components/UncontrolledTabs.js
 var _excluded = ["children", "className", "disabledTabClassName", "domRef", "focus", "forceRenderTabPanel", "onSelect", "selectedIndex", "selectedTabClassName", "selectedTabPanelClassName", "environment", "disableUpDownKeys"];
 
@@ -347177,10 +347120,6 @@ function UncontrolledTabs_extends() { UncontrolledTabs_extends = Object.assign |
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
 
 
 
@@ -347216,219 +347155,135 @@ function determineCanUseActiveElement(environment) {
     // Refer to the following resources:
     // http://stackoverflow.com/a/10982960/369687
     // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12733599
+    // istanbul ignore next
     canUseActiveElement = false;
   }
 }
 
-var UncontrolledTabs = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(UncontrolledTabs, _Component);
-
-  function UncontrolledTabs() {
-    var _this;
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
-    _this.tabNodes = [];
-
-    _this.handleKeyDown = function (e) {
-      var _this$props = _this.props,
-          direction = _this$props.direction,
-          disableUpDownKeys = _this$props.disableUpDownKeys;
-
-      if (_this.isTabFromContainer(e.target)) {
-        var index = _this.props.selectedIndex;
-        var preventDefault = false;
-        var useSelectedIndex = false;
-
-        if (e.keyCode === 32 || e.keyCode === 13) {
-          preventDefault = true;
-          useSelectedIndex = false;
-
-          _this.handleClick(e);
-        }
-
-        if (e.keyCode === 37 || !disableUpDownKeys && e.keyCode === 38) {
-          // Select next tab to the left, validate if up arrow is not disabled
-          if (direction === 'rtl') {
-            index = _this.getNextTab(index);
-          } else {
-            index = _this.getPrevTab(index);
-          }
-
-          preventDefault = true;
-          useSelectedIndex = true;
-        } else if (e.keyCode === 39 || !disableUpDownKeys && e.keyCode === 40) {
-          // Select next tab to the right, validate if down arrow is not disabled
-          if (direction === 'rtl') {
-            index = _this.getPrevTab(index);
-          } else {
-            index = _this.getNextTab(index);
-          }
-
-          preventDefault = true;
-          useSelectedIndex = true;
-        } else if (e.keyCode === 35) {
-          // Select last tab (End key)
-          index = _this.getLastTab();
-          preventDefault = true;
-          useSelectedIndex = true;
-        } else if (e.keyCode === 36) {
-          // Select first tab (Home key)
-          index = _this.getFirstTab();
-          preventDefault = true;
-          useSelectedIndex = true;
-        } // This prevents scrollbars from moving around
-
-
-        if (preventDefault) {
-          e.preventDefault();
-        } // Only use the selected index in the state if we're not using the tabbed index
-
-
-        if (useSelectedIndex) {
-          _this.setSelected(index, e);
-        }
-      }
-    };
-
-    _this.handleClick = function (e) {
-      var node = e.target;
-
-      do {
-        if (_this.isTabFromContainer(node)) {
-          if (isTabDisabled(node)) {
-            return;
-          }
-
-          var index = [].slice.call(node.parentNode.children).filter(isTabNode).indexOf(node);
-
-          _this.setSelected(index, e);
-
-          return;
-        }
-      } while ((node = node.parentNode) != null);
-    };
+var defaultProps = {
+  className: 'react-tabs',
+  focus: false
+};
+var propTypes =  false ? 0 : {};
 
-    return _this;
-  }
+var UncontrolledTabs = function UncontrolledTabs(props) {
+  var tabNodes = (0,external_react_.useRef)([]);
+  var tabIds = (0,external_react_.useRef)([]);
+  var panelIds = (0,external_react_.useRef)([]);
 
-  var _proto = UncontrolledTabs.prototype;
+  var _ref = (0,external_react_.useRef)();
 
-  _proto.setSelected = function setSelected(index, event) {
+  function setSelected(index, event) {
     // Check index boundary
-    if (index < 0 || index >= this.getTabsCount()) return;
-    var _this$props2 = this.props,
-        onSelect = _this$props2.onSelect,
-        selectedIndex = _this$props2.selectedIndex; // Call change event handler
+    if (index < 0 || index >= getTabsCount()) return;
+    var onSelect = props.onSelect,
+        selectedIndex = props.selectedIndex; // Call change event handler
 
     onSelect(index, selectedIndex, event);
-  };
+  }
 
-  _proto.getNextTab = function getNextTab(index) {
-    var count = this.getTabsCount(); // Look for non-disabled tab from index to the last tab on the right
+  function getNextTab(index) {
+    var count = getTabsCount(); // Look for non-disabled tab from index to the last tab on the right
 
     for (var i = index + 1; i < count; i++) {
-      if (!isTabDisabled(this.getTab(i))) {
+      if (!isTabDisabled(getTab(i))) {
         return i;
       }
     } // If no tab found, continue searching from first on left to index
 
 
     for (var _i = 0; _i < index; _i++) {
-      if (!isTabDisabled(this.getTab(_i))) {
+      if (!isTabDisabled(getTab(_i))) {
         return _i;
       }
-    } // No tabs are disabled, return index
+    } // All tabs are disabled, return index
+
+    /* istanbul ignore next */
 
 
     return index;
-  };
+  }
 
-  _proto.getPrevTab = function getPrevTab(index) {
+  function getPrevTab(index) {
     var i = index; // Look for non-disabled tab from index to first tab on the left
 
     while (i--) {
-      if (!isTabDisabled(this.getTab(i))) {
+      if (!isTabDisabled(getTab(i))) {
         return i;
       }
     } // If no tab found, continue searching from last tab on right to index
 
 
-    i = this.getTabsCount();
+    i = getTabsCount();
 
     while (i-- > index) {
-      if (!isTabDisabled(this.getTab(i))) {
+      if (!isTabDisabled(getTab(i))) {
         return i;
       }
-    } // No tabs are disabled, return index
+    } // All tabs are disabled, return index
+
+    /* istanbul ignore next */
 
 
     return index;
-  };
+  }
 
-  _proto.getFirstTab = function getFirstTab() {
-    var count = this.getTabsCount(); // Look for non disabled tab from the first tab
+  function getFirstTab() {
+    var count = getTabsCount(); // Look for non disabled tab from the first tab
 
     for (var i = 0; i < count; i++) {
-      if (!isTabDisabled(this.getTab(i))) {
+      if (!isTabDisabled(getTab(i))) {
         return i;
       }
     }
+    /* istanbul ignore next */
+
 
     return null;
-  };
+  }
 
-  _proto.getLastTab = function getLastTab() {
-    var i = this.getTabsCount(); // Look for non disabled tab from the last tab
+  function getLastTab() {
+    var i = getTabsCount(); // Look for non disabled tab from the last tab
 
     while (i--) {
-      if (!isTabDisabled(this.getTab(i))) {
+      if (!isTabDisabled(getTab(i))) {
         return i;
       }
     }
+    /* istanbul ignore next */
+
 
     return null;
-  };
+  }
 
-  _proto.getTabsCount = function getTabsCount() {
-    var children = this.props.children;
+  function getTabsCount() {
+    var children = props.children;
     return count_getTabsCount(children);
-  };
-
-  _proto.getPanelsCount = function getPanelsCount() {
-    var children = this.props.children;
-    return count_getPanelsCount(children);
-  };
-
-  _proto.getTab = function getTab(index) {
-    return this.tabNodes["tabs-" + index];
-  };
+  }
 
-  _proto.getChildren = function getChildren() {
-    var _this2 = this;
+  function getTab(index) {
+    return tabNodes.current["tabs-" + index];
+  }
 
+  function getChildren() {
     var index = 0;
-    var _this$props3 = this.props,
-        children = _this$props3.children,
-        disabledTabClassName = _this$props3.disabledTabClassName,
-        focus = _this$props3.focus,
-        forceRenderTabPanel = _this$props3.forceRenderTabPanel,
-        selectedIndex = _this$props3.selectedIndex,
-        selectedTabClassName = _this$props3.selectedTabClassName,
-        selectedTabPanelClassName = _this$props3.selectedTabPanelClassName,
-        environment = _this$props3.environment;
-    this.tabIds = this.tabIds || [];
-    this.panelIds = this.panelIds || [];
-    var diff = this.tabIds.length - this.getTabsCount(); // Add ids if new tabs have been added
+    var children = props.children,
+        disabledTabClassName = props.disabledTabClassName,
+        focus = props.focus,
+        forceRenderTabPanel = props.forceRenderTabPanel,
+        selectedIndex = props.selectedIndex,
+        selectedTabClassName = props.selectedTabClassName,
+        selectedTabPanelClassName = props.selectedTabPanelClassName,
+        environment = props.environment;
+    tabIds.current = tabIds.current || [];
+    panelIds.current = panelIds.current || [];
+    var diff = tabIds.current.length - getTabsCount(); // Add ids if new tabs have been added
     // Don't bother removing ids, just keep them in case they are added again
     // This is more efficient, and keeps the uuid counter under control
 
     while (diff++ < 0) {
-      this.tabIds.push(uuid());
-      this.panelIds.push(uuid());
+      tabIds.current.push(uuid());
+      panelIds.current.push(uuid());
     } // Map children to dynamically setup refs
 
 
@@ -347445,10 +347300,11 @@ var UncontrolledTabs = /*#__PURE__*/function (_Component) {
           determineCanUseActiveElement(environment);
         }
 
-        if (canUseActiveElement) {
+        var env = environment || (typeof window !== 'undefined' ? window : undefined);
+
+        if (canUseActiveElement && env) {
           wasTabFocused = external_react_["default"].Children.toArray(child.props.children).filter(elementTypes_isTab).some(function (tab, i) {
-            var env = environment || (typeof window !== 'undefined' ? window : undefined);
-            return env && env.document.activeElement === _this2.getTab(i);
+            return env.document.activeElement === getTab(i);
           });
         }
 
@@ -347458,10 +347314,10 @@ var UncontrolledTabs = /*#__PURE__*/function (_Component) {
             var selected = selectedIndex === listIndex;
             var props = {
               tabRef: function tabRef(node) {
-                _this2.tabNodes[key] = node;
+                tabNodes.current[key] = node;
               },
-              id: _this2.tabIds[listIndex],
-              panelId: _this2.panelIds[listIndex],
+              id: tabIds.current[listIndex],
+              panelId: panelIds.current[listIndex],
               selected: selected,
               focus: selected && (focus || wasTabFocused)
             };
@@ -347472,27 +347328,116 @@ var UncontrolledTabs = /*#__PURE__*/function (_Component) {
           })
         });
       } else if (elementTypes_isTabPanel(child)) {
-        var props = {
-          id: _this2.panelIds[index],
-          tabId: _this2.tabIds[index],
+        var _props = {
+          id: panelIds.current[index],
+          tabId: tabIds.current[index],
           selected: selectedIndex === index
         };
-        if (forceRenderTabPanel) props.forceRender = forceRenderTabPanel;
-        if (selectedTabPanelClassName) props.selectedClassName = selectedTabPanelClassName;
+        if (forceRenderTabPanel) _props.forceRender = forceRenderTabPanel;
+        if (selectedTabPanelClassName) _props.selectedClassName = selectedTabPanelClassName;
         index++;
-        result = /*#__PURE__*/(0,external_react_.cloneElement)(child, props);
+        result = /*#__PURE__*/(0,external_react_.cloneElement)(child, _props);
       }
 
       return result;
     });
-  };
+  }
+
+  function handleKeyDown(e) {
+    var direction = props.direction,
+        disableUpDownKeys = props.disableUpDownKeys;
+
+    if (isTabFromContainer(e.target)) {
+      var index = props.selectedIndex;
+      var preventDefault = false;
+      var useSelectedIndex = false;
+
+      if (e.code === 'Space' || e.keyCode === 32
+      /* space */
+      || e.code === 'Enter' || e.keyCode === 13
+      /* enter */
+      ) {
+        preventDefault = true;
+        useSelectedIndex = false;
+        handleClick(e);
+      } // keyCode is deprecated and only used here for IE
+
+
+      if (e.code === 'ArrowLeft' || e.keyCode === 37
+      /* arrow left */
+      || !disableUpDownKeys && (e.keyCode === 38 || e.code === 'ArrowUp')
+      /* arrow up */
+      ) {
+        // Select next tab to the left, validate if up arrow is not disabled
+        if (direction === 'rtl') {
+          index = getNextTab(index);
+        } else {
+          index = getPrevTab(index);
+        }
+
+        preventDefault = true;
+        useSelectedIndex = true;
+      } else if (e.code === 'ArrowRight' || e.keyCode === 39
+      /* arrow right */
+      || !disableUpDownKeys && (e.keyCode === 40 || e.code === 'ArrowDown')
+      /* arrow down */
+      ) {
+        // Select next tab to the right, validate if down arrow is not disabled
+        if (direction === 'rtl') {
+          index = getPrevTab(index);
+        } else {
+          index = getNextTab(index);
+        }
 
+        preventDefault = true;
+        useSelectedIndex = true;
+      } else if (e.keyCode === 35 || e.code === 'End') {
+        // Select last tab (End key)
+        index = getLastTab();
+        preventDefault = true;
+        useSelectedIndex = true;
+      } else if (e.keyCode === 36 || e.code === 'Home') {
+        // Select first tab (Home key)
+        index = getFirstTab();
+        preventDefault = true;
+        useSelectedIndex = true;
+      } // This prevents scrollbars from moving around
+
+
+      if (preventDefault) {
+        e.preventDefault();
+      } // Only use the selected index in the state if we're not using the tabbed index
+
+
+      if (useSelectedIndex) {
+        setSelected(index, e);
+      }
+    }
+  }
+
+  function handleClick(e) {
+    var node = e.target;
+
+    do {
+      if (isTabFromContainer(node)) {
+        if (isTabDisabled(node)) {
+          return;
+        }
+
+        var index = [].slice.call(node.parentNode.children).filter(isTabNode).indexOf(node);
+        setSelected(index, e);
+        return;
+      }
+    } while ((node = node.parentNode) != null);
+  }
   /**
    * Determine if a node from event.target is a Tab element for the current Tabs container.
    * If the clicked element is not a Tab, it returns false.
    * If it finds another Tabs container between the Tab and `this`, it returns false.
    */
-  _proto.isTabFromContainer = function isTabFromContainer(node) {
+
+
+  function isTabFromContainer(node) {
     // return immediately if the clicked element is not a Tab.
     if (!isTabNode(node)) {
       return false;
@@ -347502,62 +347447,45 @@ var UncontrolledTabs = /*#__PURE__*/function (_Component) {
     var nodeAncestor = node.parentElement;
 
     do {
-      if (nodeAncestor === this.node) return true;
+      if (nodeAncestor === _ref.current) return true;
       if (nodeAncestor.getAttribute('data-rttabs')) break;
       nodeAncestor = nodeAncestor.parentElement;
     } while (nodeAncestor);
 
     return false;
-  };
-
-  _proto.render = function render() {
-    var _this3 = this;
-
-    // Delete all known props, so they don't get added to DOM
-    var _this$props4 = this.props,
-        children = _this$props4.children,
-        className = _this$props4.className,
-        disabledTabClassName = _this$props4.disabledTabClassName,
-        domRef = _this$props4.domRef,
-        focus = _this$props4.focus,
-        forceRenderTabPanel = _this$props4.forceRenderTabPanel,
-        onSelect = _this$props4.onSelect,
-        selectedIndex = _this$props4.selectedIndex,
-        selectedTabClassName = _this$props4.selectedTabClassName,
-        selectedTabPanelClassName = _this$props4.selectedTabPanelClassName,
-        environment = _this$props4.environment,
-        disableUpDownKeys = _this$props4.disableUpDownKeys,
-        attributes = _objectWithoutPropertiesLoose(_this$props4, _excluded);
-
-    return /*#__PURE__*/external_react_["default"].createElement("div", UncontrolledTabs_extends({}, attributes, {
-      className: (0,clsx_m/* default */.A)(className),
-      onClick: this.handleClick,
-      onKeyDown: this.handleKeyDown,
-      ref: function ref(node) {
-        _this3.node = node;
-        if (domRef) domRef(node);
-      },
-      "data-rttabs": true
-    }), this.getChildren());
-  };
-
-  return UncontrolledTabs;
-}(external_react_.Component);
+  }
 
-UncontrolledTabs.defaultProps = {
-  className: 'react-tabs',
-  focus: false
+  var children = props.children,
+      className = props.className,
+      disabledTabClassName = props.disabledTabClassName,
+      domRef = props.domRef,
+      focus = props.focus,
+      forceRenderTabPanel = props.forceRenderTabPanel,
+      onSelect = props.onSelect,
+      selectedIndex = props.selectedIndex,
+      selectedTabClassName = props.selectedTabClassName,
+      selectedTabPanelClassName = props.selectedTabPanelClassName,
+      environment = props.environment,
+      disableUpDownKeys = props.disableUpDownKeys,
+      attributes = _objectWithoutPropertiesLoose(props, _excluded);
+
+  return /*#__PURE__*/external_react_["default"].createElement("div", UncontrolledTabs_extends({}, attributes, {
+    className: (0,clsx_m/* default */.A)(className),
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    ref: function ref(node) {
+      _ref.current = node;
+      if (domRef) domRef(node);
+    },
+    "data-rttabs": true
+  }), getChildren());
 };
 
+UncontrolledTabs.defaultProps = defaultProps;
 UncontrolledTabs.propTypes =  false ? 0 : {};
+/* harmony default export */ const components_UncontrolledTabs = (UncontrolledTabs);
 ;// ./node_modules/react-tabs/esm/components/Tabs.js
-var Tabs_excluded = ["children", "defaultIndex", "defaultFocus"];
-
-function Tabs_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function Tabs_inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; Tabs_setPrototypeOf(subClass, superClass); }
-
-function Tabs_setPrototypeOf(o, p) { Tabs_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return Tabs_setPrototypeOf(o, p); }
+function Tabs_extends() { Tabs_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return Tabs_extends.apply(this, arguments); }
 
 
 
@@ -347566,115 +347494,106 @@ function Tabs_setPrototypeOf(o, p) { Tabs_setPrototypeOf = Object.setPrototypeOf
 
 var MODE_CONTROLLED = 0;
 var MODE_UNCONTROLLED = 1;
+var Tabs_propTypes =  false ? 0 : {};
+var Tabs_defaultProps = {
+  defaultFocus: false,
+  focusTabOnClick: true,
+  forceRenderTabPanel: false,
+  selectedIndex: null,
+  defaultIndex: null,
+  environment: null,
+  disableUpDownKeys: false
+};
 
-var Tabs = /*#__PURE__*/function (_Component) {
-  Tabs_inheritsLoose(Tabs, _Component);
+var getModeFromProps = function getModeFromProps(props) {
+  return props.selectedIndex === null ? MODE_UNCONTROLLED : MODE_CONTROLLED;
+};
 
-  function Tabs(props) {
-    var _this;
+var checkForIllegalModeChange = function checkForIllegalModeChange(props, mode) {
+  if (false) {}
+};
+/**
+ * State:
+ *   mode: Initialized only once from props and never changes
+ *   selectedIndex: null if controlled mode, otherwise initialized with prop defaultIndex, changed on selection of tabs, has effect to ensure it never gets out of bound
+ *   focus: Because we never remove focus from the Tabs this state is only used to indicate that we should focus the current tab.
+ *          It is initialized from the prop defaultFocus, and after the first render it is reset back to false. Later it can become true again when using keys to navigate the tabs.
+ */
 
-    _this = _Component.call(this, props) || this;
 
-    _this.handleSelected = function (index, last, event) {
-      var onSelect = _this.props.onSelect;
-      var mode = _this.state.mode; // Call change event handler
+var Tabs = function Tabs(props) {
+  var children = props.children,
+      defaultFocus = props.defaultFocus,
+      defaultIndex = props.defaultIndex,
+      focusTabOnClick = props.focusTabOnClick,
+      onSelect = props.onSelect;
 
-      if (typeof onSelect === 'function') {
-        // Check if the change event handler cancels the tab change
-        if (onSelect(index, last, event) === false) return;
-      }
+  var _useState = (0,external_react_.useState)(defaultFocus),
+      focus = _useState[0],
+      setFocus = _useState[1];
 
-      var state = {
-        // Set focus if the change was triggered from the keyboard
-        focus: event.type === 'keydown'
-      };
+  var _useState2 = (0,external_react_.useState)(getModeFromProps(props)),
+      mode = _useState2[0];
 
-      if (mode === MODE_UNCONTROLLED) {
-        // Update selected index
-        state.selectedIndex = index;
-      }
+  var _useState3 = (0,external_react_.useState)(mode === MODE_UNCONTROLLED ? defaultIndex || 0 : null),
+      selectedIndex = _useState3[0],
+      setSelectedIndex = _useState3[1];
 
-      _this.setState(state);
-    };
+  (0,external_react_.useEffect)(function () {
+    // Reset focus after initial render, see comment above
+    setFocus(false);
+  }, []);
 
-    _this.state = Tabs.copyPropsToState(_this.props, {}, props.defaultFocus);
-    return _this;
+  if (mode === MODE_UNCONTROLLED) {
+    // Ensure that we handle removed tabs and don't let selectedIndex get out of bounds
+    var tabsCount = count_getTabsCount(children);
+    (0,external_react_.useEffect)(function () {
+      if (selectedIndex != null) {
+        var maxTabIndex = Math.max(0, tabsCount - 1);
+        setSelectedIndex(Math.min(selectedIndex, maxTabIndex));
+      }
+    }, [tabsCount]);
   }
 
-  Tabs.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
-    return Tabs.copyPropsToState(props, state);
-  };
+  checkForIllegalModeChange(props, mode);
 
-  Tabs.getModeFromProps = function getModeFromProps(props) {
-    return props.selectedIndex === null ? MODE_UNCONTROLLED : MODE_CONTROLLED;
-  };
-
-  // preserve the existing selectedIndex from state.
-  // If the state has not selectedIndex, default to the defaultIndex or 0
-  Tabs.copyPropsToState = function copyPropsToState(props, state, focus) {
-    if (focus === void 0) {
-      focus = false;
-    }
+  var handleSelected = function handleSelected(index, last, event) {
+    // Call change event handler
+    if (typeof onSelect === 'function') {
+      // Check if the change event handler cancels the tab change
+      if (onSelect(index, last, event) === false) return;
+    } // Always set focus on tabs unless it is disabled
 
-    if (false) {}
-
-    var newState = {
-      focus: focus,
-      mode: Tabs.getModeFromProps(props)
-    };
-
-    if (newState.mode === MODE_UNCONTROLLED) {
-      var maxTabIndex = Math.max(0, count_getTabsCount(props.children) - 1);
-      var selectedIndex = null;
-
-      if (state.selectedIndex != null) {
-        selectedIndex = Math.min(state.selectedIndex, maxTabIndex);
-      } else {
-        selectedIndex = props.defaultIndex || 0;
-      }
 
-      newState.selectedIndex = selectedIndex;
+    if (focusTabOnClick) {
+      setFocus(true);
     }
 
-    return newState;
+    if (mode === MODE_UNCONTROLLED) {
+      // Update selected index
+      setSelectedIndex(index);
+    }
   };
 
-  var _proto = Tabs.prototype;
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        children = _this$props.children,
-        defaultIndex = _this$props.defaultIndex,
-        defaultFocus = _this$props.defaultFocus,
-        props = Tabs_objectWithoutPropertiesLoose(_this$props, Tabs_excluded);
+  var subProps = Tabs_extends({}, props);
 
-    var _this$state = this.state,
-        focus = _this$state.focus,
-        selectedIndex = _this$state.selectedIndex;
-    props.focus = focus;
-    props.onSelect = this.handleSelected;
+  subProps.focus = focus;
+  subProps.onSelect = handleSelected;
 
-    if (selectedIndex != null) {
-      props.selectedIndex = selectedIndex;
-    }
-
-    return /*#__PURE__*/external_react_["default"].createElement(UncontrolledTabs, props, children);
-  };
-
-  return Tabs;
-}(external_react_.Component);
+  if (selectedIndex != null) {
+    subProps.selectedIndex = selectedIndex;
+  }
 
-Tabs.defaultProps = {
-  defaultFocus: false,
-  forceRenderTabPanel: false,
-  selectedIndex: null,
-  defaultIndex: null,
-  environment: null,
-  disableUpDownKeys: false
+  delete subProps.defaultFocus;
+  delete subProps.defaultIndex;
+  delete subProps.focusTabOnClick;
+  return /*#__PURE__*/external_react_["default"].createElement(components_UncontrolledTabs, subProps, children);
 };
 
 Tabs.propTypes =  false ? 0 : {};
+Tabs.defaultProps = Tabs_defaultProps;
 Tabs.tabsRole = 'Tabs';
+/* harmony default export */ const components_Tabs = (Tabs);
 ;// ./node_modules/react-tabs/esm/components/TabList.js
 var TabList_excluded = ["children", "className"];
 
@@ -347682,44 +347601,29 @@ function TabList_extends() { TabList_extends = Object.assign || function (target
 
 function TabList_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function TabList_inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; TabList_setPrototypeOf(subClass, superClass); }
-
-function TabList_setPrototypeOf(o, p) { TabList_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return TabList_setPrototypeOf(o, p); }
-
 
 
 
+var TabList_defaultProps = {
+  className: 'react-tabs__tab-list'
+};
+var TabList_propTypes =  false ? 0 : {};
 
-var TabList = /*#__PURE__*/function (_Component) {
-  TabList_inheritsLoose(TabList, _Component);
-
-  function TabList() {
-    return _Component.apply(this, arguments) || this;
-  }
-
-  var _proto = TabList.prototype;
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        children = _this$props.children,
-        className = _this$props.className,
-        attributes = TabList_objectWithoutPropertiesLoose(_this$props, TabList_excluded);
-
-    return /*#__PURE__*/external_react_["default"].createElement("ul", TabList_extends({}, attributes, {
-      className: (0,clsx_m/* default */.A)(className),
-      role: "tablist"
-    }), children);
-  };
-
-  return TabList;
-}(external_react_.Component);
+var TabList = function TabList(props) {
+  var children = props.children,
+      className = props.className,
+      attributes = TabList_objectWithoutPropertiesLoose(props, TabList_excluded);
 
-TabList.defaultProps = {
-  className: 'react-tabs__tab-list'
+  return /*#__PURE__*/external_react_["default"].createElement("ul", TabList_extends({}, attributes, {
+    className: (0,clsx_m/* default */.A)(className),
+    role: "tablist"
+  }), children);
 };
 
-TabList.propTypes =  false ? 0 : {};
 TabList.tabsRole = 'TabList';
+TabList.propTypes =  false ? 0 : {};
+TabList.defaultProps = TabList_defaultProps;
+/* harmony default export */ const components_TabList = (TabList);
 ;// ./node_modules/react-tabs/esm/components/Tab.js
 var Tab_excluded = ["children", "className", "disabled", "disabledClassName", "focus", "id", "panelId", "selected", "selectedClassName", "tabIndex", "tabRef"];
 
@@ -347727,80 +347631,11 @@ function Tab_extends() { Tab_extends = Object.assign || function (target) { for
 
 function Tab_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function Tab_inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; Tab_setPrototypeOf(subClass, superClass); }
-
-function Tab_setPrototypeOf(o, p) { Tab_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return Tab_setPrototypeOf(o, p); }
-
 
 
 
 var DEFAULT_CLASS = 'react-tabs__tab';
-
-var Tab = /*#__PURE__*/function (_Component) {
-  Tab_inheritsLoose(Tab, _Component);
-
-  function Tab() {
-    return _Component.apply(this, arguments) || this;
-  }
-
-  var _proto = Tab.prototype;
-
-  _proto.componentDidMount = function componentDidMount() {
-    this.checkFocus();
-  };
-
-  _proto.componentDidUpdate = function componentDidUpdate() {
-    this.checkFocus();
-  };
-
-  _proto.checkFocus = function checkFocus() {
-    var _this$props = this.props,
-        selected = _this$props.selected,
-        focus = _this$props.focus;
-
-    if (selected && focus) {
-      this.node.focus();
-    }
-  };
-
-  _proto.render = function render() {
-    var _cx,
-        _this = this;
-
-    var _this$props2 = this.props,
-        children = _this$props2.children,
-        className = _this$props2.className,
-        disabled = _this$props2.disabled,
-        disabledClassName = _this$props2.disabledClassName,
-        focus = _this$props2.focus,
-        id = _this$props2.id,
-        panelId = _this$props2.panelId,
-        selected = _this$props2.selected,
-        selectedClassName = _this$props2.selectedClassName,
-        tabIndex = _this$props2.tabIndex,
-        tabRef = _this$props2.tabRef,
-        attributes = Tab_objectWithoutPropertiesLoose(_this$props2, Tab_excluded);
-
-    return /*#__PURE__*/external_react_["default"].createElement("li", Tab_extends({}, attributes, {
-      className: (0,clsx_m/* default */.A)(className, (_cx = {}, _cx[selectedClassName] = selected, _cx[disabledClassName] = disabled, _cx)),
-      ref: function ref(node) {
-        _this.node = node;
-        if (tabRef) tabRef(node);
-      },
-      role: "tab",
-      id: id,
-      "aria-selected": selected ? 'true' : 'false',
-      "aria-disabled": disabled ? 'true' : 'false',
-      "aria-controls": panelId,
-      tabIndex: tabIndex || (selected ? '0' : null),
-      "data-rttab": true
-    }), children);
-  };
-
-  return Tab;
-}(external_react_.Component);
-
-Tab.defaultProps = {
+var DEFAULT_PROPS = {
   className: DEFAULT_CLASS,
   disabledClassName: DEFAULT_CLASS + "--disabled",
   focus: false,
@@ -347809,9 +347644,51 @@ Tab.defaultProps = {
   selected: false,
   selectedClassName: DEFAULT_CLASS + "--selected"
 };
+var Tab_propTypes =  false ? 0 : {};
+
+var Tab = function Tab(props) {
+  var _cx;
+
+  var nodeRef = (0,external_react_.useRef)();
+
+  var children = props.children,
+      className = props.className,
+      disabled = props.disabled,
+      disabledClassName = props.disabledClassName,
+      focus = props.focus,
+      id = props.id,
+      panelId = props.panelId,
+      selected = props.selected,
+      selectedClassName = props.selectedClassName,
+      tabIndex = props.tabIndex,
+      tabRef = props.tabRef,
+      attributes = Tab_objectWithoutPropertiesLoose(props, Tab_excluded);
+
+  (0,external_react_.useEffect)(function () {
+    if (selected && focus) {
+      nodeRef.current.focus();
+    }
+  }, [selected, focus]);
+  return /*#__PURE__*/external_react_["default"].createElement("li", Tab_extends({}, attributes, {
+    className: (0,clsx_m/* default */.A)(className, (_cx = {}, _cx[selectedClassName] = selected, _cx[disabledClassName] = disabled, _cx)),
+    ref: function ref(node) {
+      nodeRef.current = node;
+      if (tabRef) tabRef(node);
+    },
+    role: "tab",
+    id: id,
+    "aria-selected": selected ? 'true' : 'false',
+    "aria-disabled": disabled ? 'true' : 'false',
+    "aria-controls": panelId,
+    tabIndex: tabIndex || (selected ? '0' : null),
+    "data-rttab": true
+  }), children);
+};
 
 Tab.propTypes =  false ? 0 : {};
 Tab.tabsRole = 'Tab';
+Tab.defaultProps = DEFAULT_PROPS;
+/* harmony default export */ const components_Tab = (Tab);
 ;// ./node_modules/react-tabs/esm/components/TabPanel.js
 var TabPanel_excluded = ["children", "className", "forceRender", "id", "selected", "selectedClassName", "tabId"];
 
@@ -347819,56 +347696,41 @@ function TabPanel_extends() { TabPanel_extends = Object.assign || function (targ
 
 function TabPanel_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function TabPanel_inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; TabPanel_setPrototypeOf(subClass, superClass); }
-
-function TabPanel_setPrototypeOf(o, p) { TabPanel_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return TabPanel_setPrototypeOf(o, p); }
-
 
 
 
 var TabPanel_DEFAULT_CLASS = 'react-tabs__tab-panel';
-
-var TabPanel = /*#__PURE__*/function (_Component) {
-  TabPanel_inheritsLoose(TabPanel, _Component);
-
-  function TabPanel() {
-    return _Component.apply(this, arguments) || this;
-  }
-
-  var _proto = TabPanel.prototype;
-
-  _proto.render = function render() {
-    var _cx;
-
-    var _this$props = this.props,
-        children = _this$props.children,
-        className = _this$props.className,
-        forceRender = _this$props.forceRender,
-        id = _this$props.id,
-        selected = _this$props.selected,
-        selectedClassName = _this$props.selectedClassName,
-        tabId = _this$props.tabId,
-        attributes = TabPanel_objectWithoutPropertiesLoose(_this$props, TabPanel_excluded);
-
-    return /*#__PURE__*/external_react_["default"].createElement("div", TabPanel_extends({}, attributes, {
-      className: (0,clsx_m/* default */.A)(className, (_cx = {}, _cx[selectedClassName] = selected, _cx)),
-      role: "tabpanel",
-      id: id,
-      "aria-labelledby": tabId
-    }), forceRender || selected ? children : null);
-  };
-
-  return TabPanel;
-}(external_react_.Component);
-
-TabPanel.defaultProps = {
+var TabPanel_defaultProps = {
   className: TabPanel_DEFAULT_CLASS,
   forceRender: false,
   selectedClassName: TabPanel_DEFAULT_CLASS + "--selected"
 };
+var TabPanel_propTypes =  false ? 0 : {};
+
+var TabPanel = function TabPanel(props) {
+  var _cx;
+
+  var children = props.children,
+      className = props.className,
+      forceRender = props.forceRender,
+      id = props.id,
+      selected = props.selected,
+      selectedClassName = props.selectedClassName,
+      tabId = props.tabId,
+      attributes = TabPanel_objectWithoutPropertiesLoose(props, TabPanel_excluded);
+
+  return /*#__PURE__*/external_react_["default"].createElement("div", TabPanel_extends({}, attributes, {
+    className: (0,clsx_m/* default */.A)(className, (_cx = {}, _cx[selectedClassName] = selected, _cx)),
+    role: "tabpanel",
+    id: id,
+    "aria-labelledby": tabId
+  }), forceRender || selected ? children : null);
+};
 
-TabPanel.propTypes =  false ? 0 : {};
 TabPanel.tabsRole = 'TabPanel';
+TabPanel.propTypes =  false ? 0 : {};
+TabPanel.defaultProps = TabPanel_defaultProps;
+/* harmony default export */ const components_TabPanel = (TabPanel);
 ;// ./node_modules/react-tabs/esm/index.js
 
 
@@ -369132,7 +368994,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)(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, {
+    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", size: "fit" }), (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 })] }));
 };
@@ -369188,7 +369050,7 @@ const DownloadButton = (props) => {
         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.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" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...hoverProps, style: { position: "relative" }, 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 files", visible: hovered, position: "bottom", size: "fit" })] }));
 };
 exports["default"] = DownloadButton;
 
@@ -369311,19 +369173,15 @@ const EditorInput = () => {
     const isMobile = (0, react_responsive_1.useMediaQuery)({ query: mediaQueryBreakpoints_1.MOBILE_MEDIA_QUERY });
     const [numberOfComponents, setNumberOfComponents] = (0, react_1.useState)(project?.components?.length);
     const [fileNames, setFileNames] = (0, react_1.useState)();
-    const defaultFileName = (0, projectHelpers_1.getDefaultFileName)(project);
-    const defaultFile = project.components.find((component) => component.type === ProjectTypes_1.ProjectComponentType.FILE &&
-        (0, projectHelpers_1.getFullComponentName)(component) === defaultFileName);
-    // Open the default file on first project load only if no file is open yet
+    const defaultFile = (0, react_1.useMemo)(() => (0, projectHelpers_1.resolveDefaultFile)(project), [project]);
+    const defaultFileName = defaultFile?.fullName ?? null;
+    const justLoaded = (0, stores_1.useAppSelector)((state) => state.editor.justLoaded);
     (0, react_1.useEffect)(() => {
-        if (!project?.components)
+        if (!justLoaded || !defaultFile)
             return;
-        const hasOpenFile = unifiedTabs.some((tab) => tab.type === EditorTypes_1.OpenedTabType.FILE);
-        if (!hasOpenFile && defaultFile) {
-            dispatch((0, EditorSlice_1.openFile)({ id: defaultFile.id }));
-        }
+        dispatch((0, EditorSlice_1.openFile)({ id: defaultFile.id }));
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [justLoaded]);
     const onDragStart = (input) => {
         const { source } = input;
         const unifiedIdx = fileOnlyToUnifiedIndex(unifiedTabs, source.index);
@@ -369567,14 +369425,48 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(74848);
+const react_1 = __webpack_require__(51649);
 const classnames_1 = __importDefault(__webpack_require__(46942));
 const styles_module_scss_1 = __importDefault(__webpack_require__(12914));
 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));
+const consoleScroll_1 = __webpack_require__(27955);
 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) => {
+    const containerRef = (0, react_1.useRef)(null);
+    const stickToBottomRef = (0, react_1.useRef)(true);
+    const handleScroll = () => {
+        const el = containerRef.current;
+        if (el)
+            stickToBottomRef.current = (0, consoleScroll_1.isNearBottom)(el);
+    };
+    (0, react_1.useEffect)(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        if (consoleLogs.length === 0) {
+            stickToBottomRef.current = true;
+            return;
+        }
+        if (stickToBottomRef.current) {
+            (0, consoleScroll_1.scrollToBottom)(el);
+        }
+    }, [consoleLogs]);
+    // in full-window the console can be hidden (zero size) while logs stream;
+    // when it becomes visible again, pin it to the bottom
+    (0, react_1.useEffect)(() => {
+        const el = containerRef.current;
+        if (!el || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(() => {
+            if (stickToBottomRef.current)
+                (0, consoleScroll_1.scrollToBottom)(el);
+        });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("pre", { className: (0, classnames_1.default)(styles_module_scss_1.default.console, styles_module_scss_1.default.webConsole), ref: containerRef, onScroll: handleScroll, 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 }))] }), (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.consoleMessageContent, children: (0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.consoleMessageInline, children: [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))), log.count && log.count > 1 && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.consoleCount, children: log.count }))] }) })] }, i));
@@ -370237,6 +370129,7 @@ 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 useIframeHost_1 = __importDefault(__webpack_require__(86970));
 const BROADCAST_CHANNEL = "html_runner_channel";
 var BroadcastMessageType;
 (function (BroadcastMessageType) {
@@ -370257,9 +370150,7 @@ const useHtmlRunner = () => {
     const codeHasBeenRun = (0, stores_1.useAppSelector)((state) => state.editor.codeHasBeenRun);
     const page = (0, stores_1.useAppSelector)((state) => state.editor.page);
     const isPreviewMode = (0, stores_1.useAppSelector)((state) => state.editor.isOutputOnly);
-    const viewMode = (0, stores_1.useAppSelector)((state) => state.editor.viewMode);
     const dispatch = (0, react_redux_1.useDispatch)();
-    const output = (0, react_1.useRef)(null);
     const [searchParams] = (0, react_router_dom_1.useSearchParams)();
     // Using BroadcastChannel to communicate between the main app and the preview tab
     const broadcastChannel = (0, react_1.useRef)(null);
@@ -370269,7 +370160,13 @@ const useHtmlRunner = () => {
     // In the standalone preview tab (and any ?preview=1 URL) the browser's
     // back/forward/refresh buttons must drive page navigation.
     const shouldUseBrowserHistory = isPreviewMode || isPreviewUrl;
-    const [iframeKey, setIframeKey] = (0, react_1.useState)(0);
+    const { output, createIframe, mountPreview } = (0, useIframeHost_1.default)({
+        codeHasBeenRun,
+        error,
+        page,
+        isPreviewMode,
+        onIframeLoad: () => iframeReload(),
+    });
     (0, react_1.useEffect)(() => {
         shouldUseBrowserHistoryRef.current = shouldUseBrowserHistory;
     }, [shouldUseBrowserHistory]);
@@ -370409,8 +370306,8 @@ const useHtmlRunner = () => {
     }, []);
     (0, react_1.useEffect)(() => {
         if (codeRunTriggered) {
-            // Set unique key to force iframe remount
-            setIframeKey((prev) => prev + 1);
+            // Fresh iframe for each run (clean slate); it persists across view switches
+            createIframe();
             runCode();
             if (!isPreviewMode) {
                 broadcastChannel.current?.postMessage({
@@ -370419,19 +370316,6 @@ const useHtmlRunner = () => {
             }
         }
     }, [codeRunTriggered, page, isPreviewMode]);
-    // When viewMode changes, the iframe is unmounted under a
-    // different parent (TabsContainer vs OutputStack), wiping its srcdoc. If the
-    // user had already run the project, re-trigger so the preview is restored
-    const didMountForViewMode = (0, react_1.useRef)(false);
-    (0, react_1.useEffect)(() => {
-        if (!didMountForViewMode.current) {
-            didMountForViewMode.current = true;
-            return;
-        }
-        if (codeHasBeenRun) {
-            dispatch((0, EditorSlice_1.triggerCodeRun)());
-        }
-    }, [viewMode]);
     (0, react_1.useEffect)(() => {
         if (!currentPageParam)
             return;
@@ -370517,8 +370401,9 @@ const useHtmlRunner = () => {
         if (error) {
             return ((0, jsx_runtime_1.jsx)("div", { className: iframeClasses, children: (0, jsx_runtime_1.jsx)(NotFoundPage_1.NotFoundPage, {}) }));
         }
-        return ((0, jsx_runtime_1.jsx)("iframe", { className: iframeClasses, sandbox: "allow-scripts allow-same-origin allow-modals allow-popups allow-popups-to-escape-sandbox", referrerPolicy: "strict-origin-when-cross-origin", allow: "\n          accelerometer 'none';\n          camera 'none';\n          encrypted-media;\n          fullscreen;\n          picture-in-picture;\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, src: "about:blank" }, iframeKey));
-    }, [error, iframeClasses, iframeReload]);
+        // placeholder div - the real iframe is positioned over this
+        return (0, jsx_runtime_1.jsx)("div", { ref: mountPreview, className: styles_module_scss_1.default.previewSlot });
+    }, [error, iframeClasses, mountPreview]);
     const renderConsoleOutput = (0, react_1.useCallback)(() => (0, jsx_runtime_1.jsx)(HtmlConsole_1.default, { consoleLogs: consoleLogs }), [consoleLogs]);
     const outputMeta = {
         [EditorTypes_1.OutputType.VISUAL]: {
@@ -370540,6 +370425,170 @@ const useHtmlRunner = () => {
 exports["default"] = useHtmlRunner;
 
 
+/***/ }),
+
+/***/ 86970:
+/***/ (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 }));
+/* eslint-disable react-hooks/exhaustive-deps */
+const react_1 = __webpack_require__(51649);
+const classnames_1 = __importDefault(__webpack_require__(46942));
+const styles_module_scss_1 = __importDefault(__webpack_require__(12914));
+const IFRAME_ALLOW = `
+  accelerometer 'none';
+  camera 'none';
+  encrypted-media;
+  fullscreen;
+  picture-in-picture;
+  geolocation 'none';
+  gyroscope 'none';
+  magnetometer 'none';
+  microphone 'none';
+  midi 'none';
+  payment 'none';
+  usb 'none';
+`;
+/**
+ * Owns the persistent, body-mounted iframe host and keeps it visually glued to
+ * whichever placeholder slot is currently mounted
+ */
+const useIframeHost = ({ codeHasBeenRun, error, page, isPreviewMode, onIframeLoad, }) => {
+    const output = (0, react_1.useRef)(null);
+    // Refs to the persistent iframe host and the currently active slot
+    const hostRef = (0, react_1.useRef)(null);
+    const slotRef = (0, react_1.useRef)(null);
+    const [slotVersion, setSlotVersion] = (0, react_1.useState)(0);
+    const [hostReady, setHostReady] = (0, react_1.useState)(false);
+    // Latest-value mirrors so the stable callbacks below never read stale state
+    const codeHasBeenRunRef = (0, react_1.useRef)(codeHasBeenRun);
+    const errorRef = (0, react_1.useRef)(error);
+    const iframeReloadRef = (0, react_1.useRef)(onIframeLoad);
+    const applyIframeClass = (0, react_1.useCallback)((iframe) => {
+        iframe.className = (0, classnames_1.default)(styles_module_scss_1.default.iframe, {
+            [styles_module_scss_1.default.codeHasBeenRun]: codeHasBeenRunRef.current,
+        });
+    }, []);
+    // Build a fresh iframe inside the persistent host
+    const createIframe = (0, react_1.useCallback)(() => {
+        const host = hostRef.current;
+        if (!host || typeof document === "undefined")
+            return;
+        // Remove old iframe before building a new one
+        const previous = output.current;
+        if (previous && previous.parentNode === host) {
+            host.removeChild(previous);
+        }
+        const iframe = document.createElement("iframe");
+        iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-modals allow-popups allow-popups-to-escape-sandbox");
+        iframe.setAttribute("referrerpolicy", "strict-origin-when-cross-origin");
+        iframe.setAttribute("allow", IFRAME_ALLOW);
+        iframe.id = "output-frame";
+        iframe.title = "HTML Output Preview";
+        applyIframeClass(iframe);
+        iframe.addEventListener("load", () => iframeReloadRef.current());
+        iframe.src = "about:blank";
+        host.appendChild(iframe);
+        output.current = iframe;
+    }, [applyIframeClass]);
+    // Glue the host to the currently mounted slot; hide it when there is no
+    // visible slot (wrong full-window tab, error state, or unmounted layout)
+    const positionIframe = (0, react_1.useCallback)(() => {
+        const host = hostRef.current;
+        const slot = slotRef.current;
+        if (!host)
+            return;
+        if (!slot || !slot.isConnected || errorRef.current) {
+            host.style.display = "none";
+            return;
+        }
+        const rect = slot.getBoundingClientRect();
+        if (rect.width === 0 && rect.height === 0) {
+            host.style.display = "none";
+            return;
+        }
+        // Match the host to the slot's box. getBoundingClientRect() is
+        // viewport-relative, but the host is position:absolute (document-relative),
+        // so add the scroll offset to convert top/left into document coords —
+        // otherwise the host drifts by the scroll amount.
+        host.style.display = "block";
+        host.style.top = `${rect.top + window.scrollY}px`;
+        host.style.left = `${rect.left + window.scrollX}px`;
+        host.style.width = `${rect.width}px`;
+        host.style.height = `${rect.height}px`;
+    }, []);
+    // Slot ref-callback handed to renderVisualOutput (kept dumb): records the
+    // active slot node and bumps a version so the observer effect re-binds.
+    const mountPreview = (0, react_1.useCallback)((node) => {
+        slotRef.current = node;
+        setSlotVersion((v) => v + 1);
+    }, []);
+    // Create the persistent host + iframe once; tear it down on unmount
+    (0, react_1.useEffect)(() => {
+        if (typeof document === "undefined")
+            return;
+        const host = document.createElement("div");
+        host.className = styles_module_scss_1.default.previewHost;
+        document.body.appendChild(host);
+        hostRef.current = host;
+        createIframe();
+        setHostReady(true);
+        return () => {
+            const iframe = output.current;
+            if (iframe && iframe.parentNode === host)
+                host.removeChild(iframe);
+            if (host.parentNode)
+                document.body.removeChild(host);
+            hostRef.current = null;
+            output.current = null;
+        };
+    }, [createIframe]);
+    // Keep the host aligned with the active slot across resizes/scrolls/switches
+    (0, react_1.useEffect)(() => {
+        if (!hostReady)
+            return;
+        positionIframe();
+        const slot = slotRef.current;
+        const onChange = () => positionIframe();
+        window.addEventListener("resize", onChange);
+        window.addEventListener("scroll", onChange, true);
+        let observer;
+        if (slot && typeof ResizeObserver !== "undefined") {
+            observer = new ResizeObserver(onChange);
+            observer.observe(slot);
+        }
+        return () => {
+            window.removeEventListener("resize", onChange);
+            window.removeEventListener("scroll", onChange, true);
+            observer?.disconnect();
+        };
+    }, [hostReady, slotVersion, positionIframe]);
+    // Re-apply class + reposition when run/error/page state changes
+    (0, react_1.useEffect)(() => {
+        if (output.current)
+            applyIframeClass(output.current);
+        positionIframe();
+    }, [
+        codeHasBeenRun,
+        error,
+        page,
+        isPreviewMode,
+        applyIframeClass,
+        positionIframe,
+    ]);
+    // Keep the latest-value mirrors in sync for the stable iframe callbacks
+    codeHasBeenRunRef.current = codeHasBeenRun;
+    errorRef.current = error;
+    iframeReloadRef.current = onIframeLoad;
+    return { output, hostReady, createIframe, mountPreview };
+};
+exports["default"] = useIframeHost;
+
+
 /***/ }),
 
 /***/ 2996:
@@ -370662,6 +370711,13 @@ const VisualOutputPane = ({ visuals, setVisuals }) => {
         return visual;
     }, []);
     const showVisuals = (0, react_1.useCallback)((visuals, output) => visuals.map((v) => (v.showing ? v : showVisual(v, output))), [showVisual]);
+    // repaint visual output if view switched (2/3 window view - full window view)
+    (0, react_1.useEffect)(() => {
+        if (visuals.length) {
+            setVisuals((vs) => vs.map((v) => ({ ...v, showing: false })));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     (0, react_1.useEffect)(() => {
         if (visuals.length === 0 && output.current) {
             if (output.current) {
@@ -370795,9 +370851,12 @@ exports.SERVICE_WORKER_PROBE_TIMEOUT_MS = 1500;
 /***/ }),
 
 /***/ 65587:
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+/***/ (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.usePyodideRunner = void 0;
 /* eslint-disable react-hooks/exhaustive-deps */
@@ -370813,12 +370872,14 @@ const assetUrls_1 = __webpack_require__(85799);
 const helpers_1 = __webpack_require__(55717);
 const consoleInput_1 = __webpack_require__(35660);
 const consoleOutput_1 = __webpack_require__(98131);
+const consoleScroll_1 = __webpack_require__(27955);
 const fileWrite_1 = __webpack_require__(45230);
 const serviceWorker_1 = __webpack_require__(58158);
 const stdinFallbackMessages_1 = __webpack_require__(94879);
 const tabId_1 = __webpack_require__(95369);
 const usePyodideWorker_1 = __webpack_require__(93895);
 const useStdinServiceWorker_1 = __webpack_require__(86357);
+const styles_module_scss_1 = __importDefault(__webpack_require__(12914));
 /**
  * Top-level coordinator for the Pyodide runner.
  *
@@ -370865,7 +370926,21 @@ const usePyodideRunner = ({ active, packageApiUrl, }) => {
     // -------------------------------------------------------------------------
     // Component-managed state
     // -------------------------------------------------------------------------
+    // create python terminal <pre> element once in order to survive view-mode switches
+    // when switch happens, we move this node between layouts via `mountConsole`
     const output = (0, react_1.useRef)(null);
+    if (output.current === null && typeof document !== "undefined") {
+        const pre = document.createElement("pre");
+        pre.className = styles_module_scss_1.default.console ?? "";
+        output.current = pre;
+    }
+    // re-parent <pre> into the currently mounted layout slot
+    const mountConsole = (0, react_1.useCallback)((container) => {
+        const pre = output.current;
+        if (container && pre && pre.parentNode !== container) {
+            container.appendChild(pre); // move <pre> into the new layout's slot
+        }
+    }, []);
     const [visuals, setVisuals] = (0, react_1.useState)([]);
     // -------------------------------------------------------------------------
     // Local helpers
@@ -370935,6 +371010,8 @@ const usePyodideRunner = ({ active, packageApiUrl, }) => {
         }
         const outputPane = output.current;
         outputPane?.appendChild((0, consoleInput_1.inputSpan)());
+        // Always scroll the input prompt into view, even if user scrolled up
+        (0, consoleScroll_1.scrollToBottom)(outputPane);
         const element = (0, consoleInput_1.getInputElement)();
         if (!element) {
             return;
@@ -371259,6 +371336,7 @@ const usePyodideRunner = ({ active, packageApiUrl, }) => {
     }, [codeRunStopped]);
     return {
         output,
+        mountConsole,
         visuals,
         setVisuals,
         workerInitialized: Boolean(pyodideWorker),
@@ -371614,21 +371692,29 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.appendConsoleLine = void 0;
 const classnames_1 = __importDefault(__webpack_require__(46942));
 const styles_module_scss_1 = __importDefault(__webpack_require__(12914));
+const consoleScroll_1 = __webpack_require__(27955);
 /**
  * Append a line of Python stdout/stderr to the console `pre` element.
  *
  * The element's innerHTML is set via `new Option(...).innerHTML` to escape
  * any HTML control characters in the worker's output.
+ *
+ * Auto-scroll follows a "stick to bottom" rule: we only chase the newest line
+ * if the user was already at the bottom. If the user scrolled up to read
+ * earlier output, we leave its position as-is.
  */
 const appendConsoleLine = (outputElement, stream, content) => {
     if (!outputElement) {
         return;
     }
+    const stick = (0, consoleScroll_1.isNearBottom)(outputElement);
     const span = document.createElement("span");
     span.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"]);
     span.innerHTML = new Option(content || " ").innerHTML + "\n";
     outputElement.appendChild(span);
-    outputElement.scrollTop = outputElement.scrollHeight;
+    if (stick) {
+        (0, consoleScroll_1.scrollToBottom)(outputElement);
+    }
 };
 exports.appendConsoleLine = appendConsoleLine;
 
@@ -371741,40 +371827,42 @@ const waitForServiceWorkerControl = (timeoutMs = constants_1.SERVICE_WORKER_CONT
 });
 exports.waitForServiceWorkerControl = waitForServiceWorkerControl;
 /**
- * Probe the stdin Service Worker fetch route to confirm it's actually
- * intercepting requests. The SW is configured to return HTTP 400 for probes
- * that omit runId/requestId/clientId, so anything else means the route isn't
- * wired up yet.
+ * Probe the stdin Service Worker via postMessage to confirm it's actually
+ * intercepting messages. The SW replies with PYODIDE_STDIN_PROBE_ACK when it
+ * receives a PYODIDE_STDIN_PROBE message. Using postMessage avoids the HTTP
+ * 400 probe response appearing in the browser's DevTools console.
  */
-const verifyStdinServiceWorkerRoute = async () => {
+const verifyStdinServiceWorkerRoute = (timeoutMs = constants_1.SERVICE_WORKER_PROBE_TIMEOUT_MS) => {
     if (typeof window === "undefined") {
-        return false;
+        return Promise.resolve(false);
     }
     if (!("serviceWorker" in navigator)) {
-        return false;
+        return Promise.resolve(false);
     }
     if (!navigator.serviceWorker.controller) {
-        return false;
+        return Promise.resolve(false);
     }
-    const probeController = new AbortController();
-    const timeoutId = window.setTimeout(() => probeController.abort(), constants_1.SERVICE_WORKER_PROBE_TIMEOUT_MS);
-    try {
-        const probeUrl = new URL(constants_1.PYODIDE_STDIN_ENDPOINT, window.location.origin);
-        probeUrl.searchParams.set("probe", "1");
-        const response = await fetch(probeUrl.toString(), {
-            method: "GET",
-            cache: "no-store",
-            signal: probeController.signal,
+    return new Promise((resolve) => {
+        let settled = false;
+        const finish = (result) => {
+            if (settled)
+                return;
+            settled = true;
+            window.clearTimeout(timeoutId);
+            navigator.serviceWorker.removeEventListener("message", onMessage);
+            resolve(result);
+        };
+        const onMessage = (event) => {
+            if (event.data?.type === "PYODIDE_STDIN_PROBE_ACK") {
+                finish(true);
+            }
+        };
+        const timeoutId = window.setTimeout(() => finish(false), timeoutMs);
+        navigator.serviceWorker.addEventListener("message", onMessage);
+        navigator.serviceWorker.controller.postMessage({
+            type: "PYODIDE_STDIN_PROBE",
         });
-        // SW returns 400 for probe requests without runId/requestId/clientId.
-        return response.status === 400;
-    }
-    catch (_) {
-        return false;
-    }
-    finally {
-        window.clearTimeout(timeoutId);
-    }
+    });
 };
 exports.verifyStdinServiceWorkerRoute = verifyStdinServiceWorkerRoute;
 /**
@@ -371950,7 +372038,7 @@ const consoleInput_1 = __webpack_require__(35660);
 const usePythonRunner = ({ active, packageApiUrl, }) => {
     const dispatch = (0, react_redux_1.useDispatch)();
     const activeRunner = (0, stores_1.useAppSelector)((state) => state.editor.activeRunner);
-    const { output, visuals, setVisuals } = (0, usePyodideRunner_1.usePyodideRunner)({
+    const { mountConsole, visuals, setVisuals } = (0, usePyodideRunner_1.usePyodideRunner)({
         active,
         packageApiUrl,
     });
@@ -371959,7 +372047,7 @@ const usePythonRunner = ({ active, packageApiUrl, }) => {
             dispatch((0, EditorSlice_1.loadingRunner)(EditorTypes_1.RunnerType.PYODIDE));
         }
     }, [active, activeRunner, dispatch]);
-    const renderConsoleOutput = (0, react_1.useCallback)(() => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { 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 })] })), [output]);
+    const renderConsoleOutput = (0, react_1.useCallback)(() => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ErrorMessage_1.default, {}), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.consoleMount, onClick: consoleInput_1.shiftFocusToInput, ref: mountConsole })] })), [mountConsole]);
     const renderVisualOutput = (0, react_1.useCallback)(() => ((0, jsx_runtime_1.jsx)(VisualOutputPane_1.default, { visuals: visuals, setVisuals: setVisuals })), [visuals, setVisuals]);
     const outputMeta = {
         [EditorTypes_1.OutputType.VISUAL]: { label: "VNC", icon: preview_svg_1.default },
@@ -371974,6 +372062,28 @@ const usePythonRunner = ({ active, packageApiUrl, }) => {
 exports["default"] = usePythonRunner;
 
 
+/***/ }),
+
+/***/ 27955:
+/***/ ((__unused_webpack_module, exports) => {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.scrollToBottom = exports.isNearBottom = exports.STICK_THRESHOLD = void 0;
+// How many px are counted as "at the bottom"
+exports.STICK_THRESHOLD = 24;
+// True when the element is scrolled to (or within the threshold of) the bottom
+const isNearBottom = (el) => el.scrollHeight - el.scrollTop - el.clientHeight <= exports.STICK_THRESHOLD;
+exports.isNearBottom = isNearBottom;
+// Jump an element to its newest content
+const scrollToBottom = (el) => {
+    if (el) {
+        el.scrollTop = el.scrollHeight;
+    }
+};
+exports.scrollToBottom = scrollToBottom;
+
+
 /***/ }),
 
 /***/ 71274:
@@ -372428,7 +372538,7 @@ const Dropdown = (props) => {
     const [isOpen, setOpen] = (0, react_1.useState)(false);
     const buttonRef = (0, react_1.useRef)(null);
     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 })] }));
+    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", size: "fit" }), (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;
 
@@ -372511,7 +372621,7 @@ const FileTreeActions = ({ hasExpandedNodes, }) => {
     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 })] }))] }));
+    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", size: "fit" })] })) : ((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", size: "fit" })] })), (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", size: "fit" })] }), (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", size: "fit" })] }), (0, jsx_runtime_1.jsx)(ImportButton_1.ImportButton, { importFiles: importFiles, importFolder: importFolder })] }))] }));
 };
 exports.FileTreeActions = FileTreeActions;
 
@@ -373391,7 +373501,7 @@ const getSidebarOptions = (initials, homeAction, isCodeVisible) => [
             {
                 name: "user",
                 buttonText: initials,
-                title: "User account",
+                title: "Your Profile",
                 position: "bottom",
             },
         ]
@@ -373453,12 +373563,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(74848);
+const classnames_1 = __importDefault(__webpack_require__(46942));
 const react_1 = __webpack_require__(51649);
 const stores_1 = __webpack_require__(32132);
 const Button_1 = __importDefault(__webpack_require__(79428));
-const classnames_1 = __importDefault(__webpack_require__(46942));
-const styles_module_scss_1 = __importDefault(__webpack_require__(21852));
 const UserMenu_1 = __importDefault(__webpack_require__(2957));
+const styles_module_scss_1 = __importDefault(__webpack_require__(21852));
 const backgroundColors = [
     "D7F9F4",
     "43D6B9",
@@ -373846,8 +373956,11 @@ const ViewSwitcher_1 = __webpack_require__(59859);
 const stores_1 = __webpack_require__(32132);
 const types_2 = __webpack_require__(92932);
 const SpinnerDotted_1 = __webpack_require__(79458);
+const Tooltip_1 = __importDefault(__webpack_require__(26982));
+const useHover_1 = __webpack_require__(78556);
 const SharedProjectBar = () => {
     const dispatch = (0, react_redux_1.useDispatch)();
+    const { hovered, hoverProps } = (0, useHover_1.useHover)();
     const isCodeVisible = (0, stores_1.useAppSelector)((state) => state.editor.isCodeVisible);
     const saving = (0, stores_1.useAppSelector)((state) => state.editor.saving);
     const userId = (0, stores_1.useAppSelector)((state) => state.user.userId);
@@ -373875,7 +373988,7 @@ const SharedProjectBar = () => {
             },
         }));
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.header, styles_module_scss_1.default.sharedProject), children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.wrapper, children: [(0, jsx_runtime_1.jsx)(gwc_logo_svg_1.default, { className: styles_module_scss_1.default.gwcLogo }), (0, jsx_runtime_1.jsx)(text_jam_logo_svg_1.default, { className: styles_module_scss_1.default.textJamLogo })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, styles_module_scss_1.default.projectName), children: (0, jsx_runtime_1.jsx)(SharedProjectName_1.default, {}) }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.wrapper, children: [isCodeVisible && userId && ((0, jsx_runtime_1.jsx)(Button_1.default, { ButtonIcon: remixButtonIcon, buttonText: remixButtonText, className: styles_module_scss_1.default.headerBtn, variant: "secondary", onClickHandler: handleOpenRemixModal, disabled: isSaving })), (0, jsx_runtime_1.jsx)(RunBar_1.default, {})] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.wrapper, children: (0, jsx_runtime_1.jsx)(Button_1.default, { className: (0, classnames_1.default)(styles_module_scss_1.default.linkButton, styles_module_scss_1.default.btnSvg), variant: "tertiary", ButtonIcon: () => (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: link_svg_1.default, size: 24 }), onClickHandler: handleOpenShareModal }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.wrapper, children: (0, jsx_runtime_1.jsx)(ViewSwitcher_1.ViewSwitcher, {}) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.header, styles_module_scss_1.default.sharedProject), children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.wrapper, children: [(0, jsx_runtime_1.jsx)(gwc_logo_svg_1.default, { className: styles_module_scss_1.default.gwcLogo }), (0, jsx_runtime_1.jsx)(text_jam_logo_svg_1.default, { className: styles_module_scss_1.default.textJamLogo })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, styles_module_scss_1.default.projectName), children: (0, jsx_runtime_1.jsx)(SharedProjectName_1.default, {}) }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.wrapper, children: [isCodeVisible && userId && ((0, jsx_runtime_1.jsx)(Button_1.default, { ButtonIcon: remixButtonIcon, buttonText: remixButtonText, className: styles_module_scss_1.default.headerBtn, variant: "secondary", onClickHandler: handleOpenRemixModal, disabled: isSaving })), (0, jsx_runtime_1.jsx)(RunBar_1.default, {})] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, styles_module_scss_1.default.tooltipAnchor), ...hoverProps, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { className: (0, classnames_1.default)(styles_module_scss_1.default.linkButton, styles_module_scss_1.default.btnSvg), variant: "tertiary", ButtonIcon: () => (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: link_svg_1.default, size: 24 }), onClickHandler: handleOpenShareModal }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Share this project", visible: hovered, position: "bottom", size: "fit" })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.wrapper, children: (0, jsx_runtime_1.jsx)(ViewSwitcher_1.ViewSwitcher, {}) })] }));
 };
 exports.SharedProjectBar = SharedProjectBar;
 
@@ -373978,7 +374091,7 @@ const ShareButton = (props) => {
     }, [dispatch, shareLinks]);
     const canShare = Boolean(shareLinks);
     const { hovered, hoverProps } = (0, useHover_1.useHover)();
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.shareButtonWrapper, ...hoverProps, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "To share your project, please save it first.", visible: hovered && !canShare, position: "bottom" }), (0, jsx_runtime_1.jsx)(Button_1.default, { disabled: !canShare, variant: "tertiary", ButtonIcon: () => (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: share_svg_1.default, size: 24 }), onClickHandler: onClickShare, ...props })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.shareButtonWrapper, ...hoverProps, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "To share your project, please save it first.", visible: hovered && !canShare, position: "bottom" }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Share this project", visible: hovered && canShare, position: "bottom", size: "fit" }), (0, jsx_runtime_1.jsx)(Button_1.default, { disabled: !canShare, variant: "tertiary", ButtonIcon: () => (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: share_svg_1.default, size: 24 }), onClickHandler: onClickShare, ...props })] }));
 };
 exports["default"] = ShareButton;
 
@@ -374068,15 +374181,19 @@ exports.ToastItem = ToastItem;
 /***/ }),
 
 /***/ 6459:
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+/***/ (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.ToastMessagesProvider = void 0;
 const jsx_runtime_1 = __webpack_require__(74848);
 const react_toastify_1 = __webpack_require__(21241);
+const styles_module_scss_1 = __importDefault(__webpack_require__(27112));
 const ToastMessagesProvider = () => {
-    return ((0, jsx_runtime_1.jsx)(react_toastify_1.ToastContainer, { theme: "colored", position: "bottom-right", hideProgressBar: true, icon: false, closeButton: false, closeOnClick: false }));
+    return ((0, jsx_runtime_1.jsx)(react_toastify_1.ToastContainer, { theme: "colored", position: "bottom-right", hideProgressBar: true, icon: false, closeButton: false, closeOnClick: false, pauseOnHover: true, toastClassName: styles_module_scss_1.default.toast, bodyClassName: styles_module_scss_1.default.toastBody, className: styles_module_scss_1.default.toastList }));
 };
 exports.ToastMessagesProvider = ToastMessagesProvider;
 
@@ -374125,10 +374242,10 @@ 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__(28188));
-const Tooltip = ({ message, visible = false, position = "bottom", className, style, }) => {
+const Tooltip = ({ message, visible = false, position = "bottom", size = "default", className, style, }) => {
     if (!visible)
         return null;
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.tooltip, position && styles_module_scss_1.default[`position-${position}`], visible && styles_module_scss_1.default.visible, className), role: "tooltip", style: style, children: message }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.tooltip, position && styles_module_scss_1.default[`position-${position}`], styles_module_scss_1.default[`size-${size}`], visible && styles_module_scss_1.default.visible, className), role: "tooltip", style: style, children: message }));
 };
 exports["default"] = Tooltip;
 
@@ -374286,6 +374403,7 @@ const useProject_1 = __webpack_require__(54095);
 const useProjectPersistence_1 = __webpack_require__(72300);
 const useProjectRemix_1 = __webpack_require__(35602);
 const useProjectTabSync_1 = __webpack_require__(17299);
+const useRevertNotifications_1 = __webpack_require__(57484);
 const settings_1 = __webpack_require__(62161);
 const ErrorModal_1 = __importDefault(__webpack_require__(15382));
 __webpack_require__(7703);
@@ -374380,6 +374498,7 @@ const WebComponentLoader = (props) => {
         projectKey: projectIdentifier,
         enabled: !isPreviewMode && !isSharedProject,
     });
+    (0, useRevertNotifications_1.useRevertNotifications)();
     (0, react_1.useEffect)(() => {
         dispatch((0, EditorSlice_1.setReadOnly)(readOnly));
     }, [readOnly, dispatch]);
@@ -375880,6 +375999,74 @@ const useProjectTabSync = ({ projectKey, enabled = true, }) => {
 exports.useProjectTabSync = useProjectTabSync;
 
 
+/***/ }),
+
+/***/ 57484:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.useRevertNotifications = void 0;
+const jsx_runtime_1 = __webpack_require__(74848);
+const react_1 = __webpack_require__(51649);
+const react_redux_1 = __webpack_require__(14062);
+const EditorSlice_1 = __webpack_require__(68512);
+const types_1 = __webpack_require__(92932);
+const stores_1 = __webpack_require__(32132);
+const sendToast_1 = __webpack_require__(50068);
+const SUCCESS_MESSAGE = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["All set! Your project is back to the old version.", (0, jsx_runtime_1.jsx)("br", {}), "Click ", (0, jsx_runtime_1.jsx)("b", { children: "Save" }), " to apply changes to server."] }));
+const ERROR_MESSAGE = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Oops! The version couldn't be restored.", (0, jsx_runtime_1.jsx)("br", {}), "Please try again."] }));
+/**
+ * Fires a success or error toast when a user-triggered version revert completes.
+ * Should be called from a persistently mounted component (e.g. WebComponentLoader).
+ *
+ * Two resolution paths:
+ *  1. loading reaches SUCCESS/FAILED → normal terminal state.
+ *  2. isLoadingCommit goes true→false while loading is still non-terminal
+ *     (e.g. commit fetch was canceled or failed upstream) → treated as failure
+ *     so revertPending never gets stuck.
+ */
+const useRevertNotifications = () => {
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const revertPending = (0, stores_1.useAppSelector)((state) => state.editor.revertPending);
+    const loading = (0, stores_1.useAppSelector)((state) => state.editor.loading);
+    const isLoadingCommit = (0, stores_1.useAppSelector)((state) => state.editor.isLoadingCommit);
+    const prevLoadingRef = (0, react_1.useRef)(loading);
+    const prevIsLoadingCommitRef = (0, react_1.useRef)(isLoadingCommit);
+    (0, react_1.useEffect)(() => {
+        const prevLoading = prevLoadingRef.current;
+        const prevIsLoadingCommit = prevIsLoadingCommitRef.current;
+        prevLoadingRef.current = loading;
+        prevIsLoadingCommitRef.current = isLoadingCommit;
+        if (!revertPending)
+            return;
+        // Path 1: loading reached a terminal state
+        if (loading === types_1.LoadingState.SUCCESS &&
+            prevLoading !== types_1.LoadingState.SUCCESS) {
+            (0, sendToast_1.showSuccess)(SUCCESS_MESSAGE);
+            dispatch((0, EditorSlice_1.setRevertPending)(false));
+            return;
+        }
+        if (loading === types_1.LoadingState.FAILED &&
+            prevLoading !== types_1.LoadingState.FAILED) {
+            (0, sendToast_1.showError)(ERROR_MESSAGE);
+            dispatch((0, EditorSlice_1.setRevertPending)(false));
+            return;
+        }
+        // Path 2 (fallback): commit load finished but loading never became terminal.
+        // Clear the pending flag so it can't trigger a false toast on a later
+        // unrelated loading transition.
+        const commitLoadJustFinished = prevIsLoadingCommit && !isLoadingCommit;
+        const loadingIsNonTerminal = loading !== types_1.LoadingState.SUCCESS && loading !== types_1.LoadingState.FAILED;
+        if (commitLoadJustFinished && loadingIsNonTerminal) {
+            (0, sendToast_1.showError)(ERROR_MESSAGE);
+            dispatch((0, EditorSlice_1.setRevertPending)(false));
+        }
+    }, [loading, isLoadingCommit, revertPending, dispatch]);
+};
+exports.useRevertNotifications = useRevertNotifications;
+
+
 /***/ }),
 
 /***/ 83289:
@@ -375994,7 +376181,7 @@ exports.useUnsavedDraftResolution = useUnsavedDraftResolution;
 var _a;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.setRemixTriggered = exports.setIsLoadingCommit = exports.setCommitIdLoadTriggered = exports.setShareLinks = exports.setCommits = exports.setSharedStatus = exports.setViewMode = exports.setCodeVisibility = exports.applyComponentsPatch = exports.setSaving = exports.disableTheming = exports.hideSidebar = exports.showSidebar = exports.closeModal = exports.showModal = exports.closeErrorModal = exports.showErrorModal = exports.updateProjectName = exports.setProjectNameDraft = exports.setSaveTriggered = exports.triggerDraw = exports.triggerCodeRun = exports.stopDraw = exports.stopCodeRun = exports.setLoading = exports.setReadOnly = exports.updateProjectIdentifier = exports.updateProjectCommits = exports.updateProjectSnapshot = exports.setProject = exports.setHasShownSavePrompt = exports.setError = exports.setCascadeUpdate = exports.setIsOutputOnly = exports.setAutorunEnabled = exports.setPage = exports.setFocussedFileIndex = exports.setOpenedTabs = 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.revertProject = void 0;
+exports.queueBinaryWrites = exports.setRevertPending = exports.revertProject = void 0;
 const toolkit_1 = __webpack_require__(12069);
 const ProjectTypes_1 = __webpack_require__(27130);
 const types_1 = __webpack_require__(92932);
@@ -376014,6 +376201,7 @@ exports.editorInitialState = {
     saveSuccess: null,
     commitIdLoadTriggered: null,
     isLoadingCommit: false,
+    revertPending: false,
     loading: types_1.LoadingState.IDLE,
     justLoaded: false,
     hasShownSavePrompt: false,
@@ -376182,8 +376370,12 @@ exports.EditorSlice = (0, toolkit_1.createSlice)({
             state.commitIdLoadTriggered = action.payload.commitId;
             if (action.payload.resetProject) {
                 state.loading = types_1.LoadingState.IDLE;
+                state.revertPending = true;
             }
         },
+        setRevertPending: (state, action) => {
+            state.revertPending = action.payload;
+        },
         setCommitIdLoadTriggered: (state, action) => {
             state.commitIdLoadTriggered = action.payload;
         },
@@ -376329,7 +376521,7 @@ exports.EditorSlice = (0, toolkit_1.createSlice)({
     },
 });
 // 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.setOpenedTabs = _a.setOpenedTabs, 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.updateProjectSnapshot = _a.updateProjectSnapshot, exports.updateProjectCommits = _a.updateProjectCommits, exports.updateProjectIdentifier = _a.updateProjectIdentifier, 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.setProjectNameDraft = _a.setProjectNameDraft, 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.setCodeVisibility = _a.setCodeVisibility, exports.setViewMode = _a.setViewMode, exports.setSharedStatus = _a.setSharedStatus, exports.setCommits = _a.setCommits, exports.setShareLinks = _a.setShareLinks, exports.setCommitIdLoadTriggered = _a.setCommitIdLoadTriggered, exports.setIsLoadingCommit = _a.setIsLoadingCommit, exports.setRemixTriggered = _a.setRemixTriggered, exports.revertProject = _a.revertProject;
+_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.setOpenedTabs = _a.setOpenedTabs, 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.updateProjectSnapshot = _a.updateProjectSnapshot, exports.updateProjectCommits = _a.updateProjectCommits, exports.updateProjectIdentifier = _a.updateProjectIdentifier, 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.setProjectNameDraft = _a.setProjectNameDraft, 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.setCodeVisibility = _a.setCodeVisibility, exports.setViewMode = _a.setViewMode, exports.setSharedStatus = _a.setSharedStatus, exports.setCommits = _a.setCommits, exports.setShareLinks = _a.setShareLinks, exports.setCommitIdLoadTriggered = _a.setCommitIdLoadTriggered, exports.setIsLoadingCommit = _a.setIsLoadingCommit, exports.setRemixTriggered = _a.setRemixTriggered, exports.revertProject = _a.revertProject, exports.setRevertPending = _a.setRevertPending;
 exports.queueBinaryWrites = (0, toolkit_1.createAction)("editor/queueBinaryWrites");
 exports["default"] = exports.EditorSlice.reducer;
 
@@ -376556,13 +376748,13 @@ const fsImportFiles = ({ files, parentId }) => async (dispatch, getState) => {
         (0, sendToast_1.showError)(error.reason);
     }
     if (validFiles.length > 0) {
-        (0, sendToast_1.showSuccess)(`Selected files uploaded successfully. ${validFiles.length} of ${importableFiles.length} file(s) uploaded.`);
+        (0, sendToast_1.showSuccess)(`Selected files uploaded successfully.\n${validFiles.length} of ${importableFiles.length} file(s) uploaded.`);
         if (hasDuplicates) {
             (0, sendToast_1.showInfo)(DUPLICATE_UPLOAD_TOAST);
         }
     }
     else {
-        (0, sendToast_1.showError)(`Selected files couldn’t be uploaded. ${importableFiles.length} file(s) failed to upload.`);
+        (0, sendToast_1.showError)(`Selected files couldn’t be uploaded.\n${importableFiles.length} file(s) failed to upload.`);
         return;
     }
     const componentsMap = (0, utils_1.buildComponentsById)(components);
@@ -376594,13 +376786,13 @@ const fsImportFolder = ({ files, parentId }) => async (dispatch, getState) => {
         (0, sendToast_1.showError)(error.reason);
     }
     if (validFiles.length > 0) {
-        (0, sendToast_1.showSuccess)(`Folder '${folderName}' upload complete. ${validFiles.length} of ${importableFiles.length} file(s) uploaded successfully.`);
+        (0, sendToast_1.showSuccess)(`Folder '${folderName}' upload complete.\n${validFiles.length} of ${importableFiles.length} file(s) uploaded successfully.`);
         if (hasDuplicates) {
             (0, sendToast_1.showInfo)(DUPLICATE_UPLOAD_TOAST);
         }
     }
     else {
-        (0, sendToast_1.showError)(`'${folderName}' folder couldn't be uploaded. ${importableFiles.length} file(s) failed to upload.`);
+        (0, sendToast_1.showError)(`'${folderName}' folder couldn't be uploaded.\n${importableFiles.length} file(s) failed to upload.`);
         return;
     }
     const componentsMap = (0, utils_1.buildComponentsById)(components);
@@ -377719,20 +377911,35 @@ async function removeBinaryIdsFromProjectIndex(projectKey, fileIds) {
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.getAuthorName = exports.truncateFileName = exports.sortChildren = exports.parseComponentPath = exports.getFullComponentName = exports.parseFileName = exports.isOwner = exports.isFileClosable = exports.getDefaultFileName = void 0;
+exports.getAuthorName = exports.truncateFileName = exports.sortChildren = exports.parseComponentPath = exports.getFullComponentName = exports.parseFileName = exports.isOwner = exports.isFileClosable = exports.getDefaultFileName = exports.resolveDefaultFile = void 0;
 exports.getInsertChildIndex = getInsertChildIndex;
 const ProjectTypes_1 = __webpack_require__(27130);
-/**
- * The project's default file can never be closed. Returns its full name if a
- * matching file exists in the project, otherwise null.
- */
-const getDefaultFileName = (project) => {
-    const { defaultFileName } = project;
-    if (!defaultFileName)
+const DEFAULT_FILE_BY_TYPE = {
+    [ProjectTypes_1.ProjectType.WEB]: "index.html",
+    [ProjectTypes_1.ProjectType.PYTHON]: "main.py",
+};
+const resolveDefaultFile = (project) => {
+    if (!project)
         return null;
-    const exists = (project.components ?? []).some((component) => component.type === ProjectTypes_1.ProjectComponentType.FILE &&
-        (0, exports.getFullComponentName)(component) === defaultFileName);
-    return exists ? defaultFileName : null;
+    const candidates = [
+        project.defaultFileName,
+        project.project_type
+            ? DEFAULT_FILE_BY_TYPE[project.project_type]
+            : undefined,
+    ].filter((name) => Boolean(name));
+    const files = (project.components ?? []).filter((component) => component.type === ProjectTypes_1.ProjectComponentType.FILE);
+    for (const candidate of candidates) {
+        const target = candidate.toLowerCase();
+        const match = files.find((file) => (0, exports.getFullComponentName)(file).toLowerCase() === target);
+        if (match) {
+            return { id: match.id, fullName: (0, exports.getFullComponentName)(match) };
+        }
+    }
+    return null;
+};
+exports.resolveDefaultFile = resolveDefaultFile;
+const getDefaultFileName = (project) => {
+    return (0, exports.resolveDefaultFile)(project)?.fullName ?? null;
 };
 exports.getDefaultFileName = getDefaultFileName;
 const isFileClosable = (fileFullName, defaultFileName) => fileFullName !== defaultFileName;