gwchq-textjam 0.1.89 → 0.1.91

package/dist/index.js

@@ -65157,6 +65157,34 @@ function SvgGifFile(props) {
 
 /***/ }),
 
+/***/ 93113:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
+var _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+
+function SvgHistory(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
+    viewBox: "0 0 20 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M3.01 11.542a8.1 8.1 0 101.916-8.424L.75 7.042m0 0h4.5m-4.5 0v-4.5m9.9 1.8v5.4l3.601 1.8",
+    stroke: "currentColor",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })));
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgHistory);
+
+/***/ }),
+
 /***/ 69046:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -65713,6 +65741,35 @@ function SvgRemix(props) {
 
 /***/ }),
 
+/***/ 503:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
+var _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+
+function SvgRestore(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
+    width: 32,
+    height: 32,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M7.012 19.589A10.8 10.8 0 109.568 8.356L4 13.59m0 0h6m-6 0v-6m13.2 2.4v7.2l4.801 2.4",
+    stroke: "#003046",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })));
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgRestore);
+
+/***/ }),
+
 /***/ 48268:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -101791,7 +101848,7 @@ var EditorPanel = _ref => {
 
 /***/ }),
 
-/***/ 56123:
+/***/ 69118:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 // ESM COMPAT FLAG
@@ -101814,301 +101871,9 @@ var lib = __webpack_require__(13323);
 // EXTERNAL MODULE: ./src/components/Editor/Output/Output.tsx
 var Output = __webpack_require__(95148);
 var Output_default = /*#__PURE__*/__webpack_require__.n(Output);
-// EXTERNAL MODULE: ./src/assets/gwc-logo.svg
-var gwc_logo = __webpack_require__(72865);
-// EXTERNAL MODULE: ./src/assets/text_jam_logo.svg
-var text_jam_logo = __webpack_require__(97552);
-// EXTERNAL MODULE: ./src/redux/EditorSlice.ts
-var EditorSlice = __webpack_require__(68512);
-// EXTERNAL MODULE: ./node_modules/classnames/index.js
-var classnames = __webpack_require__(46942);
-var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
-// EXTERNAL MODULE: ./src/components/ProjectName/styles.module.scss
-var styles_module = __webpack_require__(32026);
-// EXTERNAL MODULE: ./node_modules/react/jsx-runtime.js
-var jsx_runtime = __webpack_require__(74848);
-;// ./src/components/ProjectName/ProjectName.jsx
-
-
-
-
-
-
-var ProjectName = _ref => {
-  var {
-    className = null,
-    showLabel = false,
-    editable = true
-  } = _ref;
-  var project = (0,external_react_redux_.useSelector)(state => state.editor.project, external_react_redux_.shallowEqual);
-  var dispatch = (0,external_react_redux_.useDispatch)();
-  var nameInput = (0,external_react_.useRef)(null);
-  var [isEditing, setEditing] = (0,external_react_.useState)(false);
-  var [name, setName] = (0,external_react_.useState)(project.name || "New project");
-  (0,external_react_.useEffect)(() => {
-    setName(project.name);
-  }, [project.name]);
-  (0,external_react_.useEffect)(() => {
-    if (isEditing) {
-      var _nameInput$current, _nameInput$current2;
-      (_nameInput$current = nameInput.current) === null || _nameInput$current === void 0 || _nameInput$current.focus();
-      (_nameInput$current2 = nameInput.current) === null || _nameInput$current2 === void 0 || _nameInput$current2.select();
-    }
-  }, [isEditing]);
-  var startEditing = () => {
-    if (!editable) return;
-    setEditing(true);
-  };
-  var saveName = () => {
-    var newName = nameInput.current.value.trim();
-    if (newName && newName !== project.name) {
-      dispatch((0,EditorSlice.updateProjectName)(newName));
-    }
-    setEditing(false);
-  };
-  var cancelEditing = () => {
-    setName(project.name);
-    setEditing(false);
-  };
-  var handleOnChange = () => {
-    setName(nameInput.current.value);
-  };
-  var handleKeyDown = event => {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      saveName();
-    } else if (event.key === "Escape") {
-      cancelEditing();
-    }
-  };
-  var handleOnBlur = () => {
-    saveName();
-  };
-  return /*#__PURE__*/(0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
-    children: [showLabel && /*#__PURE__*/(0,jsx_runtime.jsx)("label", {
-      htmlFor: "project_name",
-      id: "project_name_label",
-      className: styles_module["default"].projectLabel,
-      children: "Project Name"
-    }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-      className: classnames_default()(styles_module["default"].projectName, className),
-      children: /*#__PURE__*/(0,jsx_runtime.jsx)("input", {
-        id: "project_name",
-        ref: nameInput,
-        type: "text",
-        "aria-labelledby": "project_name_label",
-        onFocus: startEditing,
-        onClick: startEditing,
-        onKeyDown: handleKeyDown,
-        value: name,
-        readOnly: !isEditing,
-        onChange: handleOnChange,
-        onBlur: handleOnBlur,
-        className: classnames_default()(styles_module["default"].projectInput, {
-          [styles_module["default"].editing]: isEditing
-        })
-      })
-    })]
-  });
-};
-/* harmony default export */ const ProjectName_ProjectName = (ProjectName);
-// EXTERNAL MODULE: ./src/components/DownloadButton/DownloadButton.tsx
-var DownloadButton = __webpack_require__(2492);
-var DownloadButton_default = /*#__PURE__*/__webpack_require__.n(DownloadButton);
-// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/objectSpread2.js
-var objectSpread2 = __webpack_require__(89379);
-;// ./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js
-function asyncGeneratorStep(n, t, e, r, o, a, c) {
-  try {
-    var i = n[a](c),
-      u = i.value;
-  } catch (n) {
-    return void e(n);
-  }
-  i.done ? t(u) : Promise.resolve(u).then(r, o);
-}
-function _asyncToGenerator(n) {
-  return function () {
-    var t = this,
-      e = arguments;
-    return new Promise(function (r, o) {
-      var a = n.apply(t, e);
-      function _next(n) {
-        asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
-      }
-      function _throw(n) {
-        asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
-      }
-      _next(void 0);
-    });
-  };
-}
-
-;// ./src/assets/icons/save.svg
-var _path;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-
-function SvgSave(props) {
-  return /*#__PURE__*/external_react_.createElement("svg", _extends({
-    width: 24,
-    height: 24,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path || (_path = /*#__PURE__*/external_react_.createElement("path", {
-    d: "M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2v16z",
-    stroke: "#003046",
-    strokeWidth: 1.5,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  })));
-}
-/* harmony default export */ const save = (SvgSave);
-// EXTERNAL MODULE: ./src/components/Button/Button.jsx + 1 modules
-var Button = __webpack_require__(60232);
-// EXTERNAL MODULE: ./src/redux/types.ts
-var types = __webpack_require__(92932);
-// EXTERNAL MODULE: ./src/components/SpinnerDotted/SpinnerDotted.tsx
-var SpinnerDotted = __webpack_require__(79458);
-;// ./src/components/SaveButton/styles.module.scss
-// extracted by mini-css-extract-plugin
-/* harmony default export */ const SaveButton_styles_module = ({"content":"styles-module__content--Cgvxl"});
-;// ./src/components/SaveButton/SaveButton.jsx
-
-
-
-
-
-
-
-
-
-
-
-var SaveButton = props => {
-  var dispatch = (0,external_react_redux_.useDispatch)();
-  var loading = (0,external_react_redux_.useSelector)(state => state.editor.loading);
-  var saving = (0,external_react_redux_.useSelector)(state => state.editor.saving);
-  var onClickSave = (0,external_react_.useCallback)(/*#__PURE__*/_asyncToGenerator(function* () {
-    dispatch((0,EditorSlice.setSaveTriggered)(true));
-  }), [dispatch]);
-  var isSaving = saving === types.SavingState.PROCESS;
-  var buttonIcon = isSaving ? null : save;
-  var buttonText = isSaving ? /*#__PURE__*/(0,jsx_runtime.jsxs)("span", {
-    className: SaveButton_styles_module.content,
-    children: [/*#__PURE__*/(0,jsx_runtime.jsx)(SpinnerDotted.SpinnerDotted, {}), " Saving..."]
-  }) : "Save";
-  return loading === types.LoadingState.SUCCESS && /*#__PURE__*/(0,jsx_runtime.jsx)(Button["default"], (0,objectSpread2/* default */.A)({
-    buttonText: buttonText,
-    ButtonIcon: buttonIcon,
-    buttonIconPosition: "left",
-    variant: "secondary",
-    onClickHandler: onClickSave,
-    disabled: saving === types.SavingState.PROCESS
-  }, props));
-};
-/* harmony default export */ const SaveButton_SaveButton = (SaveButton);
-// EXTERNAL MODULE: ./src/components/ShareButton/ShareButton.tsx
-var ShareButton = __webpack_require__(21422);
-var ShareButton_default = /*#__PURE__*/__webpack_require__.n(ShareButton);
-;// ./src/assets/icons/history.svg
-var history_path;
-function history_extends() { return history_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, history_extends.apply(null, arguments); }
-
-function SvgHistory(props) {
-  return /*#__PURE__*/external_react_.createElement("svg", history_extends({
-    width: 20,
-    height: 18,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), history_path || (history_path = /*#__PURE__*/external_react_.createElement("path", {
-    d: "M3.01 11.542a8.1 8.1 0 101.916-8.424L.75 7.042m0 0h4.5m-4.5 0v-4.5m9.9 1.8v5.4l3.601 1.8",
-    stroke: "#003046",
-    strokeWidth: 1.5,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  })));
-}
-/* harmony default export */ const icons_history = (SvgHistory);
-;// ./src/components/HistoryButton/HistoryButton.jsx
-
-
-
-
-
-
-
-
-var HistoryButton = props => {
-  var dispatch = (0,external_react_redux_.useDispatch)();
-  var onClickHistory = () => {
-    dispatch((0,EditorSlice.showModal)({
-      modal: types.ModalType.PROJECT_HISTORY
-    }));
-  };
-  return /*#__PURE__*/(0,jsx_runtime.jsx)(Button["default"], (0,objectSpread2/* default */.A)({
-    variant: "tertiary",
-    ButtonIcon: icons_history,
-    onClickHandler: onClickHistory
-  }, props));
-};
-/* harmony default export */ const HistoryButton_HistoryButton = (HistoryButton);
-// EXTERNAL MODULE: ./src/components/RunButton/RunBar.jsx
-var RunBar = __webpack_require__(78176);
-// EXTERNAL MODULE: ./src/components/ProjectBar/styles.module.scss
-var ProjectBar_styles_module = __webpack_require__(19436);
-;// ./src/components/ProjectBar/ProjectBar.jsx
-
-
-
-
-
-
-
-
-
-
-
-
-var ProjectBar = _ref => {
-  var {
-    nameEditable = true
-  } = _ref;
-  var loading = (0,external_react_redux_.useSelector)(state => state.editor.loading);
-  var saving = (0,external_react_redux_.useSelector)(state => state.editor.saving);
-  var lastSavedTime = (0,external_react_redux_.useSelector)(state => state.editor.lastSavedTime);
-  var readOnly = (0,external_react_redux_.useSelector)(state => state.editor.readOnly);
-  return loading === "success" && /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-    className: ProjectBar_styles_module["default"].header,
-    children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-      className: ProjectBar_styles_module["default"].wrapper,
-      children: [/*#__PURE__*/(0,jsx_runtime.jsx)(gwc_logo["default"], {
-        className: ProjectBar_styles_module["default"].gwcLogo,
-        alt: "GWC Logo"
-      }), /*#__PURE__*/(0,jsx_runtime.jsx)(text_jam_logo["default"], {
-        className: ProjectBar_styles_module["default"].textJamLogo,
-        alt: "TextJam logo"
-      })]
-    }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-      className: ProjectBar_styles_module["default"].wrapper,
-      children: [loading === "success" && /*#__PURE__*/(0,jsx_runtime.jsx)(ProjectName_ProjectName, {
-        editable: !readOnly && nameEditable,
-        showLabel: true
-      }), /*#__PURE__*/(0,jsx_runtime.jsx)(HistoryButton_HistoryButton, {
-        className: ProjectBar_styles_module["default"].btnSvg
-      }), loading === "success" && !readOnly && /*#__PURE__*/(0,jsx_runtime.jsx)(SaveButton_SaveButton, {
-        className: ProjectBar_styles_module["default"].headerBtn
-      })]
-    }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-      className: ProjectBar_styles_module["default"].wrapper,
-      children: [/*#__PURE__*/(0,jsx_runtime.jsx)(RunBar["default"], {}), loading === "success" && /*#__PURE__*/(0,jsx_runtime.jsx)((DownloadButton_default()), {
-        className: ProjectBar_styles_module["default"].btnSvg
-      }), /*#__PURE__*/(0,jsx_runtime.jsx)((ShareButton_default()), {
-        className: ProjectBar_styles_module["default"].btnSvg
-      })]
-    })]
-  });
-};
-/* harmony default export */ const ProjectBar_ProjectBar = (ProjectBar);
+// EXTERNAL MODULE: ./src/components/ProjectBar/ProjectBar.tsx
+var ProjectBar = __webpack_require__(75724);
+var ProjectBar_default = /*#__PURE__*/__webpack_require__.n(ProjectBar);
 // EXTERNAL MODULE: ./src/components/Menus/Sidebar/Sidebar.tsx
 var Sidebar = __webpack_require__(20791);
 var Sidebar_default = /*#__PURE__*/__webpack_require__.n(Sidebar);
@@ -102128,9 +101893,11 @@ var projContainer = {
 };
 ;// ./src/components/Editor/Project/styles.module.scss
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const Project_styles_module = ({"grey-rpi-grey-15":"#d5d7dc","grey-rpi-grey-40":"#9497a4","grey-rpi-grey-5":"#f1f2f3","grey-rpi-grey-70":"#4a4d59","grey-rpf-white":"#fff","proj":"styles-module__proj--ZFm0o","projContainer":"styles-module__projContainer--foKo4","projectWrapper":"styles-module__projectWrapper--Yq8Yr","projEditorWrapper":"styles-module__projEditorWrapper--SISJR","projEditorContainer":"styles-module__projEditorContainer--jWAlR","react-tabs__tab-panel--selected":"styles-module__react-tabs__tab-panel--selected--RwR-m","react-tabs__tab-list":"styles-module__react-tabs__tab-list--gM7uT","react-tabs__tab-container":"styles-module__react-tabs__tab-container--ycENl","btn--run":"styles-module__btn--run--u9TgZ","btn--stop":"styles-module__btn--stop--gJCsY"});
+/* harmony default export */ const styles_module = ({"grey-rpi-grey-15":"#d5d7dc","grey-rpi-grey-40":"#9497a4","grey-rpi-grey-5":"#f1f2f3","grey-rpi-grey-70":"#4a4d59","grey-rpf-white":"#fff","proj":"styles-module__proj--ZFm0o","projContainer":"styles-module__projContainer--foKo4","projectWrapper":"styles-module__projectWrapper--Yq8Yr","projEditorWrapper":"styles-module__projEditorWrapper--SISJR","projEditorContainer":"styles-module__projEditorContainer--jWAlR","react-tabs__tab-panel--selected":"styles-module__react-tabs__tab-panel--selected--RwR-m","react-tabs__tab-list":"styles-module__react-tabs__tab-list--gM7uT","react-tabs__tab-container":"styles-module__react-tabs__tab-container--ycENl","btn--run":"styles-module__btn--run--u9TgZ","btn--stop":"styles-module__btn--stop--gJCsY"});
 // EXTERNAL MODULE: ./src/components/ProjectBar/SharedProjectBar.tsx
 var SharedProjectBar = __webpack_require__(42375);
+// EXTERNAL MODULE: ./node_modules/react/jsx-runtime.js
+var jsx_runtime = __webpack_require__(74848);
 ;// ./src/components/Editor/Project/Project.jsx
 /* eslint-disable react-hooks/exhaustive-deps */
 
@@ -102172,22 +101939,22 @@ var Project = props => {
     setLoading(false);
   }, []);
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-    className: Project_styles_module.proj,
+    className: styles_module.proj,
     "data-testid": "project",
-    children: [isSharedProject ? /*#__PURE__*/(0,jsx_runtime.jsx)(SharedProjectBar.SharedProjectBar, {}) : /*#__PURE__*/(0,jsx_runtime.jsx)(ProjectBar_ProjectBar, {
+    children: [isSharedProject ? /*#__PURE__*/(0,jsx_runtime.jsx)(SharedProjectBar.SharedProjectBar, {}) : /*#__PURE__*/(0,jsx_runtime.jsx)((ProjectBar_default()), {
       nameEditable: nameEditable
     }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-      className: Project_styles_module.projContainer,
+      className: styles_module.projContainer,
       children: [/*#__PURE__*/(0,jsx_runtime.jsx)((Sidebar_default()), {
         options: sidebarOptions
       }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-        className: Project_styles_module.projectWrapper,
+        className: styles_module.projectWrapper,
         ref: containerRef,
         children: !loading && /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-          className: Project_styles_module.projEditorWrapper,
+          className: styles_module.projEditorWrapper,
           children: [isCodeVisible && /*#__PURE__*/(0,jsx_runtime.jsx)(ResizableWithHandle/* default */.A, {
             "data-testid": "proj-editor-container",
-            className: Project_styles_module.projEditorContainer,
+            className: styles_module.projEditorContainer,
             defaultWidth: defaultWidth,
             defaultHeight: defaultHeight,
             handleDirection: handleDirection,
@@ -102496,131 +102263,6 @@ var ErrorModal = _ref => {
 
 /***/ }),
 
-/***/ 2468:
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  "default": () => (/* binding */ ProjectHistoryModal_ProjectHistoryModal)
-});
-
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(51649);
-;// ./src/components/Modals/ProjectHistoryModal/styles.module.scss
-// extracted by mini-css-extract-plugin
-/* harmony default export */ const styles_module = ({"grey-rpi-grey-15":"#d5d7dc","grey-rpi-grey-40":"#9497a4","grey-rpi-grey-5":"#f1f2f3","grey-rpi-grey-70":"#4a4d59","grey-rpf-white":"#fff","content":"styles-module__content--vm091","headerText":"styles-module__headerText--O4YZK","headerIcon":"styles-module__headerIcon--F-+Vd","containerBox":"styles-module__containerBox--HK-4z","versionDate":"styles-module__versionDate--OLHbO","messageContainer":"styles-module__messageContainer--PVpY+","buttonsContainer":"styles-module__buttonsContainer--dWeY9"});
-// EXTERNAL MODULE: ./src/components/Modals/BaseModal/styles.module.scss
-var BaseModal_styles_module = __webpack_require__(41809);
-// EXTERNAL MODULE: ./src/redux/EditorSlice.ts
-var EditorSlice = __webpack_require__(68512);
-// EXTERNAL MODULE: ./src/redux/types.ts
-var types = __webpack_require__(92932);
-// EXTERNAL MODULE: external "react-redux"
-var external_react_redux_ = __webpack_require__(14062);
-// EXTERNAL MODULE: ./src/components/Modals/BaseModal/BaseModal.jsx
-var BaseModal = __webpack_require__(94738);
-;// ./src/assets/icons/restore.svg
-var _path;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-
-function SvgRestore(props) {
-  return /*#__PURE__*/external_react_.createElement("svg", _extends({
-    width: 32,
-    height: 32,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path || (_path = /*#__PURE__*/external_react_.createElement("path", {
-    d: "M7.012 19.589A10.8 10.8 0 109.568 8.356L4 13.59m0 0h6m-6 0v-6m13.2 2.4v7.2l4.801 2.4",
-    stroke: "#003046",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  })));
-}
-/* harmony default export */ const restore = (SvgRestore);
-// EXTERNAL MODULE: ./src/assets/icons/alert.svg
-var icons_alert = __webpack_require__(11367);
-// EXTERNAL MODULE: ./src/components/Button/Button.jsx + 1 modules
-var Button = __webpack_require__(60232);
-// EXTERNAL MODULE: ./src/components/shared/SvgIcon/index.tsx
-var SvgIcon = __webpack_require__(82917);
-// EXTERNAL MODULE: ./src/assets/icons/close.svg
-var icons_close = __webpack_require__(80181);
-// EXTERNAL MODULE: ./node_modules/react/jsx-runtime.js
-var jsx_runtime = __webpack_require__(74848);
-;// ./src/components/Modals/ProjectHistoryModal/ProjectHistoryModal.jsx
-
-
-
-
-
-
-
-
-
-
-
-
-
-var ProjectHistoryModal = () => {
-  var dispatch = (0,external_react_redux_.useDispatch)();
-  var isModalOpen = (0,external_react_redux_.useSelector)(state => state.editor.modalWindowShowing === types.ModalType.PROJECT_HISTORY);
-  var handleClose = () => dispatch((0,EditorSlice.closeModal)());
-  return /*#__PURE__*/(0,jsx_runtime.jsx)(BaseModal["default"], {
-    isOpen: isModalOpen,
-    closeModal: handleClose,
-    withCloseButton: true,
-    closeIcon: icons_close["default"],
-    externalClasses: styles_module,
-    heading: "",
-    buttons: [/*#__PURE__*/(0,jsx_runtime.jsx)(Button["default"], {
-      variant: "secondary",
-      buttonText: "Restore",
-      onClickHandler: () => {}
-    }, "delete"), /*#__PURE__*/(0,jsx_runtime.jsx)(Button["default"], {
-      variant: "tertiaryGray",
-      buttonText: "Cancel",
-      onClickHandler: handleClose
-    }, "cancel")],
-    children: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-      children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-        className: BaseModal_styles_module["default"].headerContainer,
-        children: [/*#__PURE__*/(0,jsx_runtime.jsx)(SvgIcon.SvgIcon, {
-          size: 32,
-          SvgElement: restore,
-          className: "".concat(BaseModal_styles_module["default"].headerText, " ").concat(styles_module.headerIcon)
-        }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-          className: "".concat(BaseModal_styles_module["default"].headerText, " ").concat(styles_module.headerText),
-          children: "Restore Version"
-        })]
-      }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-        className: styles_module.containerBox,
-        children: ["You are about to restore the version from:", /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-          className: styles_module.versionDate,
-          children: "Today 4:00 PM"
-        }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-          className: styles_module.messageContainer,
-          children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-            children: /*#__PURE__*/(0,jsx_runtime.jsx)(SvgIcon.SvgIcon, {
-              size: 18,
-              SvgElement: icons_alert["default"],
-              className: "".concat(BaseModal_styles_module["default"].headerText, " ").concat(styles_module.headerIcon)
-            })
-          }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-            children: "Restoring a version of a file is non-destructive. The restored content will become a new version at the top of history. You can always go back to the version you just had."
-          })]
-        })]
-      })]
-    })
-  });
-};
-/* harmony default export */ const ProjectHistoryModal_ProjectHistoryModal = (ProjectHistoryModal);
-
-/***/ }),
-
 /***/ 45829:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -103152,6 +102794,107 @@ var UploadSizeLimitModal = () => {
 
 /***/ }),
 
+/***/ 23559:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
+/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(14062);
+/* harmony import */ var _redux_EditorSlice__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(68512);
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(46942);
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _styles_module_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(32026);
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(74848);
+
+
+
+
+
+
+var ProjectName = _ref => {
+  var {
+    className = null,
+    showLabel = false,
+    editable = true
+  } = _ref;
+  var project = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(state => state.editor.project, react_redux__WEBPACK_IMPORTED_MODULE_1__.shallowEqual);
+  var dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useDispatch)();
+  var nameInput = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+  var [isEditing, setEditing] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
+  var [name, setName] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(project.name || "New project");
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    setName(project.name);
+  }, [project.name]);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    if (isEditing) {
+      var _nameInput$current, _nameInput$current2;
+      (_nameInput$current = nameInput.current) === null || _nameInput$current === void 0 || _nameInput$current.focus();
+      (_nameInput$current2 = nameInput.current) === null || _nameInput$current2 === void 0 || _nameInput$current2.select();
+    }
+  }, [isEditing]);
+  var startEditing = () => {
+    if (!editable) return;
+    setEditing(true);
+  };
+  var saveName = () => {
+    var newName = nameInput.current.value.trim();
+    if (newName && newName !== project.name) {
+      dispatch((0,_redux_EditorSlice__WEBPACK_IMPORTED_MODULE_5__.updateProjectName)(newName));
+    }
+    setEditing(false);
+  };
+  var cancelEditing = () => {
+    setName(project.name);
+    setEditing(false);
+  };
+  var handleOnChange = () => {
+    setName(nameInput.current.value);
+  };
+  var handleKeyDown = event => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      saveName();
+    } else if (event.key === "Escape") {
+      cancelEditing();
+    }
+  };
+  var handleOnBlur = () => {
+    saveName();
+  };
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.Fragment, {
+    children: [showLabel && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("label", {
+      htmlFor: "project_name",
+      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__.jsx)("div", {
+      className: classnames__WEBPACK_IMPORTED_MODULE_2___default()(_styles_module_scss__WEBPACK_IMPORTED_MODULE_3__["default"].projectName, className),
+      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("input", {
+        id: "project_name",
+        ref: nameInput,
+        type: "text",
+        "aria-labelledby": "project_name_label",
+        onFocus: startEditing,
+        onClick: startEditing,
+        onKeyDown: handleKeyDown,
+        value: name,
+        readOnly: !isEditing,
+        onChange: handleOnChange,
+        onBlur: handleOnBlur,
+        className: classnames__WEBPACK_IMPORTED_MODULE_2___default()(_styles_module_scss__WEBPACK_IMPORTED_MODULE_3__["default"].projectInput, {
+          [_styles_module_scss__WEBPACK_IMPORTED_MODULE_3__["default"].editing]: isEditing
+        })
+      })
+    })]
+  });
+};
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ProjectName);
+
+/***/ }),
+
 /***/ 78176:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -103367,6 +103110,120 @@ var RunnerControls = _ref => {
 
 /***/ }),
 
+/***/ 24771:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (/* binding */ SaveButton_SaveButton)
+});
+
+// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/objectSpread2.js
+var objectSpread2 = __webpack_require__(89379);
+;// ./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js
+function asyncGeneratorStep(n, t, e, r, o, a, c) {
+  try {
+    var i = n[a](c),
+      u = i.value;
+  } catch (n) {
+    return void e(n);
+  }
+  i.done ? t(u) : Promise.resolve(u).then(r, o);
+}
+function _asyncToGenerator(n) {
+  return function () {
+    var t = this,
+      e = arguments;
+    return new Promise(function (r, o) {
+      var a = n.apply(t, e);
+      function _next(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
+      }
+      function _throw(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
+      }
+      _next(void 0);
+    });
+  };
+}
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(51649);
+// EXTERNAL MODULE: external "react-redux"
+var external_react_redux_ = __webpack_require__(14062);
+;// ./src/assets/icons/save.svg
+var _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+
+function SvgSave(props) {
+  return /*#__PURE__*/external_react_.createElement("svg", _extends({
+    width: 24,
+    height: 24,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/external_react_.createElement("path", {
+    d: "M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2v16z",
+    stroke: "#003046",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })));
+}
+/* harmony default export */ const save = (SvgSave);
+// EXTERNAL MODULE: ./src/components/Button/Button.jsx + 1 modules
+var Button = __webpack_require__(60232);
+// EXTERNAL MODULE: ./src/redux/EditorSlice.ts
+var EditorSlice = __webpack_require__(68512);
+// EXTERNAL MODULE: ./src/redux/types.ts
+var types = __webpack_require__(92932);
+// EXTERNAL MODULE: ./src/components/SpinnerDotted/SpinnerDotted.tsx
+var SpinnerDotted = __webpack_require__(79458);
+;// ./src/components/SaveButton/styles.module.scss
+// extracted by mini-css-extract-plugin
+/* harmony default export */ const styles_module = ({"content":"styles-module__content--Cgvxl"});
+// EXTERNAL MODULE: ./node_modules/react/jsx-runtime.js
+var jsx_runtime = __webpack_require__(74848);
+;// ./src/components/SaveButton/SaveButton.jsx
+
+
+
+
+
+
+
+
+
+
+
+var SaveButton = props => {
+  var dispatch = (0,external_react_redux_.useDispatch)();
+  var loading = (0,external_react_redux_.useSelector)(state => state.editor.loading);
+  var saving = (0,external_react_redux_.useSelector)(state => state.editor.saving);
+  var onClickSave = (0,external_react_.useCallback)(/*#__PURE__*/_asyncToGenerator(function* () {
+    dispatch((0,EditorSlice.setSaveTriggered)(true));
+  }), [dispatch]);
+  var isSaving = saving === types.SavingState.PROCESS;
+  var buttonIcon = isSaving ? null : save;
+  var buttonText = isSaving ? /*#__PURE__*/(0,jsx_runtime.jsxs)("span", {
+    className: styles_module.content,
+    children: [/*#__PURE__*/(0,jsx_runtime.jsx)(SpinnerDotted.SpinnerDotted, {}), " Saving..."]
+  }) : "Save";
+  return loading === types.LoadingState.SUCCESS && /*#__PURE__*/(0,jsx_runtime.jsx)(Button["default"], (0,objectSpread2/* default */.A)({
+    buttonText: buttonText,
+    ButtonIcon: buttonIcon,
+    buttonIconPosition: "left",
+    variant: "secondary",
+    onClickHandler: onClickSave,
+    disabled: saving === types.SavingState.PROCESS
+  }, props));
+};
+/* harmony default export */ const SaveButton_SaveButton = (SaveButton);
+
+/***/ }),
+
 /***/ 30272:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -142652,6 +142509,18 @@ __webpack_require__.r(__webpack_exports__);
 // extracted by mini-css-extract-plugin
 
 
+/***/ }),
+
+/***/ 87383:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+// extracted by mini-css-extract-plugin
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"grey-rpi-grey-15":"#d5d7dc","grey-rpi-grey-40":"#9497a4","grey-rpi-grey-5":"#f1f2f3","grey-rpi-grey-70":"#4a4d59","grey-rpf-white":"#fff","historyActive":"styles-module__historyActive--aOVxD","historyButton":"styles-module__historyButton--LInbn","commitHoverElement":"styles-module__commitHoverElement--foGWE","btnContainer":"styles-module__btnContainer--OlkJ2"});
+
 /***/ }),
 
 /***/ 50271:
@@ -142722,7 +142591,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","contextMenu":"styles-module__contextMenu--HNX6Z","contextItem":"styles-module__contextItem--9nzMH"});
+/* 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","contextMenu":"styles-module__contextMenu--HNX6Z","hoverElement":"styles-module__hoverElement--GLCJ0","contextItem":"styles-module__contextItem--9nzMH","optionContent":"styles-module__optionContent--3E8Zt","contextItemActive":"styles-module__contextItemActive--KkppO","contextHeader":"styles-module__contextHeader--jA59O","withDivider":"styles-module__withDivider--X54Sw","visibleScrollbar":"styles-module__visibleScrollbar--PEea9"});
 
 /***/ }),
 
@@ -142798,6 +142667,18 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
+/***/ 49871:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+// extracted by mini-css-extract-plugin
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"grey-rpi-grey-15":"#d5d7dc","grey-rpi-grey-40":"#9497a4","grey-rpi-grey-5":"#f1f2f3","grey-rpi-grey-70":"#4a4d59","grey-rpf-white":"#fff","content":"styles-module__content--vm091","headerText":"styles-module__headerText--O4YZK","headerIcon":"styles-module__headerIcon--F-+Vd","containerBox":"styles-module__containerBox--HK-4z","versionDate":"styles-module__versionDate--OLHbO","messageContainer":"styles-module__messageContainer--PVpY+","buttonsContainer":"styles-module__buttonsContainer--dWeY9"});
+
+/***/ }),
+
 /***/ 79354:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -142877,7 +142758,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__ = ({"text":"styles-module__text--w++5r","code":"styles-module__code--E-a9Y","size-12":"styles-module__size-12--hY0wv","size-14":"styles-module__size-14--WSVwD","size-16":"styles-module__size-16--6hjvA","size-18":"styles-module__size-18--P7XJw","size-20":"styles-module__size-20--py7l4","size-24":"styles-module__size-24--tYu3W","weight-regular":"styles-module__weight-regular--S9vrI","weight-medium":"styles-module__weight-medium--JN8TI","weight-bold":"styles-module__weight-bold--JgpDo"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"text":"styles-module__text--w++5r","code":"styles-module__code--E-a9Y","size-10":"styles-module__size-10--vObQm","size-12":"styles-module__size-12--hY0wv","size-14":"styles-module__size-14--WSVwD","size-16":"styles-module__size-16--6hjvA","size-18":"styles-module__size-18--P7XJw","size-20":"styles-module__size-20--py7l4","size-24":"styles-module__size-24--tYu3W","weight-regular":"styles-module__weight-regular--S9vrI","weight-medium":"styles-module__weight-medium--JN8TI","weight-bold":"styles-module__weight-bold--JgpDo"});
 
 /***/ }),
 
@@ -368604,6 +368485,104 @@ const AssetPreview = ({ file }) => {
 exports.n = AssetPreview;
 
 
+/***/ }),
+
+/***/ 46175:
+/***/ (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.CommitHistoryMenu = void 0;
+const jsx_runtime_1 = __webpack_require__(74848);
+const react_1 = __webpack_require__(51649);
+const ContextMenu_1 = __importDefault(__webpack_require__(39179));
+const MenuCommitElement_1 = __webpack_require__(78281);
+const EditorSlice_1 = __webpack_require__(68512);
+const types_1 = __webpack_require__(92932);
+const react_redux_1 = __webpack_require__(14062);
+const CommitHistoryMenu = ({ isOpen, onClose, commits, btnRef, activeCommitId, }) => {
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const handleCommitClick = (0, react_1.useCallback)((commitId) => {
+        dispatch((0, EditorSlice_1.showModal)({
+            modal: types_1.ModalType.RESTORE_VERSION,
+            args: { type: types_1.ModalType.RESTORE_VERSION, commitId },
+        }));
+    }, [dispatch]);
+    const menuOptions = (0, react_1.useMemo)(() => commits?.map((commit) => ({
+        id: commit.id,
+        text: commit.createdAtFormatted,
+        action: () => handleCommitClick(commit.id),
+    })), [handleCommitClick, commits]);
+    if (!isOpen) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(ContextMenu_1.default, { opened: isOpen, onClose: onClose, menuOptions: menuOptions ?? [], hoverElement: (0, jsx_runtime_1.jsx)(MenuCommitElement_1.CommitHoverElement, {}), menuHeight: 270, title: "Version History", align: "end", direction: "bottom", anchorRef: btnRef, gap: 6, activeItemId: activeCommitId, showDivider: false }));
+};
+exports.CommitHistoryMenu = CommitHistoryMenu;
+
+
+/***/ }),
+
+/***/ 21091:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+const jsx_runtime_1 = __webpack_require__(74848);
+const react_1 = __webpack_require__(51649);
+const classnames_1 = __importDefault(__webpack_require__(46942));
+const history_svg_1 = __importDefault(__webpack_require__(93113));
+const Button_1 = __importDefault(__webpack_require__(60232));
+const stores_1 = __webpack_require__(32132);
+const styles_module_scss_1 = __importDefault(__webpack_require__(87383));
+const SvgIcon_1 = __webpack_require__(82917);
+const CommitHistoryMenu_1 = __webpack_require__(46175);
+const Tooltip_1 = __importDefault(__webpack_require__(26982));
+const useHover_1 = __webpack_require__(78556);
+const HistoryButton = ({ className }) => {
+    const project = (0, stores_1.useAppSelector)((state) => state.editor.project);
+    const commits = (0, stores_1.useAppSelector)((state) => state.editor.commits);
+    const ref = (0, react_1.useRef)(null);
+    const { hovered, hoverProps } = (0, useHover_1.useHover)();
+    const [isContextOpen, setIsContextOpen] = (0, react_1.useState)(false);
+    const handleClick = () => {
+        setIsContextOpen((prev) => !prev);
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.btnContainer, ...hoverProps, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Nothing here yet! Once you save your work, versions will appear here so you can restore them.", visible: hovered && !commits?.length, position: "bottom" }), (0, jsx_runtime_1.jsx)(Button_1.default, { buttonRef: ref, className: (0, classnames_1.default)(styles_module_scss_1.default.historyButton, className, {
+                            [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 })] }));
+};
+exports["default"] = HistoryButton;
+
+
+/***/ }),
+
+/***/ 78281:
+/***/ (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.CommitHoverElement = void 0;
+const jsx_runtime_1 = __webpack_require__(74848);
+const SvgIcon_1 = __webpack_require__(82917);
+const Text_1 = __webpack_require__(82803);
+const history_svg_1 = __importDefault(__webpack_require__(93113));
+const styles_module_scss_1 = __importDefault(__webpack_require__(87383));
+const CommitHoverElement = () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.commitHoverElement, children: [(0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: history_svg_1.default, size: 18 }), (0, jsx_runtime_1.jsx)(Text_1.Text, { size: 10, weight: "medium", children: "Restore" })] }));
+};
+exports.CommitHoverElement = CommitHoverElement;
+
+
 /***/ }),
 
 /***/ 2492:
@@ -368727,7 +368706,8 @@ const EditorInput = () => {
         if (!project?.components)
             return;
         const defaultFile = project.components.find((component) => component.type === ProjectTypes_1.ProjectComponentType.FILE &&
-            (0, projectHelpers_1.getFullComponentName)(component) === defaultFileName);
+            (0, projectHelpers_1.getFullComponentName)(component) ===
+                (project.defaultFileName ?? defaultFileName));
         if (defaultFile) {
             dispatch((0, EditorSlice_1.openFile)({ id: defaultFile.id }));
         }
@@ -370493,17 +370473,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(74848);
 const react_menu_1 = __webpack_require__(71231);
+const classnames_1 = __importDefault(__webpack_require__(46942));
 const styles_module_scss_1 = __importDefault(__webpack_require__(29707));
 const ContextMenu = (props) => {
-    const { align, direction, menuOptions, menuWidth, opened, anchorRef, onClose, anchorPoint, gap, } = props;
+    const { align, direction, menuOptions, menuWidth, menuHeight, opened, anchorRef, onClose, anchorPoint, gap, hoverElement, title, activeItemId, showDivider = true, } = props;
     const portalTarget = document.getElementById("textjam-root") || document.body;
-    return ((0, jsx_runtime_1.jsx)(react_menu_1.ControlledMenu, { transition: true, align: align, direction: direction, menuStyle: { width: menuWidth ? `${menuWidth}px` : "fit-content" }, position: "anchor", viewScroll: "initial", portal: {
+    return ((0, jsx_runtime_1.jsxs)(react_menu_1.ControlledMenu, { transition: true, align: align, direction: direction, menuStyle: {
+            width: menuWidth ? `${menuWidth}px` : "fit-content",
+            maxHeight: menuHeight ? `${menuHeight}px` : "fit-content",
+        }, position: "anchor", viewScroll: "initial", overflow: "auto", portal: {
             target: portalTarget,
-        }, menuClassName: styles_module_scss_1.default.contextMenu, menuItemFocus: { position: "first" }, state: opened ? "open" : "closed", anchorRef: anchorRef, onClose: onClose, anchorPoint: anchorPoint, gap: gap, children: menuOptions.map((option, i) => ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contextItem, onClick: (e) => {
-                e.stopPropagation();
-                option.action?.();
-                onClose();
-            }, children: [option.icon ?? null, option.text] }, i))) }));
+        }, menuClassName: `${styles_module_scss_1.default.contextMenu} ${styles_module_scss_1.default.visibleScrollbar}`, menuItemFocus: { position: "first" }, state: opened ? "open" : "closed", anchorRef: anchorRef, onClose: onClose, anchorPoint: anchorPoint, gap: gap, children: [title && ((0, jsx_runtime_1.jsx)(react_menu_1.MenuHeader, { className: styles_module_scss_1.default.contextHeader, children: title })), menuOptions.map((option, i) => ((0, jsx_runtime_1.jsxs)(react_menu_1.MenuItem, { className: (0, classnames_1.default)(styles_module_scss_1.default.contextItem, {
+                    [styles_module_scss_1.default.contextItemActive]: option.id && option.id === activeItemId,
+                    [styles_module_scss_1.default.withDivider]: showDivider && i !== menuOptions.length - 1,
+                }), onClick: (e) => {
+                    e.stopPropagation = true;
+                    option.action?.();
+                    onClose();
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.optionContent, children: [option.icon ?? null, option.text] }), hoverElement && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.hoverElement, children: hoverElement }))] }, option.id ?? i)))] }));
 };
 exports["default"] = ContextMenu;
 
@@ -371560,6 +371547,58 @@ const UserMenu = (props) => {
 exports["default"] = UserMenu;
 
 
+/***/ }),
+
+/***/ 39345:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+const jsx_runtime_1 = __webpack_require__(74848);
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+const styles_module_scss_1 = __importDefault(__webpack_require__(49871));
+const styles_module_scss_2 = __importDefault(__webpack_require__(41809));
+const EditorSlice_1 = __webpack_require__(68512);
+const types_1 = __webpack_require__(92932);
+const react_redux_1 = __webpack_require__(14062);
+const BaseModal_1 = __importDefault(__webpack_require__(94738));
+const restore_svg_1 = __importDefault(__webpack_require__(503));
+const alert_svg_1 = __importDefault(__webpack_require__(11367));
+const Button_1 = __importDefault(__webpack_require__(60232));
+const SvgIcon_1 = __webpack_require__(82917);
+const close_svg_1 = __importDefault(__webpack_require__(80181));
+const stores_1 = __webpack_require__(32132);
+const ProjectHistoryModal = () => {
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const isModalOpen = (0, stores_1.useAppSelector)((state) => state.editor.modalWindowShowing === types_1.ModalType.RESTORE_VERSION);
+    const commits = (0, stores_1.useAppSelector)((state) => state.editor.commits);
+    const args = (0, stores_1.useAppSelector)((state) => state.editor.modalWindowArgs);
+    const handleClose = () => dispatch((0, EditorSlice_1.closeModal)());
+    const handleRevert = () => {
+        if (args?.type === types_1.ModalType.RESTORE_VERSION && args.commitId) {
+            dispatch((0, EditorSlice_1.setCommitIdLoadTriggered)(args.commitId));
+            dispatch((0, EditorSlice_1.setLoading)(types_1.LoadingState.IDLE));
+        }
+        dispatch((0, EditorSlice_1.closeModal)());
+    };
+    const commitTimestamp = args?.type === types_1.ModalType.RESTORE_VERSION
+        ? commits?.find((c) => c.id === args.commitId)?.createdAtFormatted
+        : undefined;
+    return ((0, jsx_runtime_1.jsx)(BaseModal_1.default, { isOpen: isModalOpen, closeModal: handleClose, withCloseButton: true, 
+        // @ts-ignore
+        closeIcon: close_svg_1.default, externalClasses: styles_module_scss_1.default, heading: "", buttons: [
+            // @ts-ignore
+            (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "secondary", buttonText: "Restore", onClickHandler: handleRevert }, "delete"),
+            // @ts-ignore
+            (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "tertiaryGray", buttonText: "Cancel", onClickHandler: handleClose }, "cancel"),
+        ], children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_2.default.headerContainer, children: [(0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { size: 32, SvgElement: restore_svg_1.default, className: `${styles_module_scss_2.default.headerText} ${styles_module_scss_1.default.headerIcon}` }), (0, jsx_runtime_1.jsx)("div", { className: `${styles_module_scss_2.default.headerText} ${styles_module_scss_1.default.headerText}`, children: "Restore Version" })] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.containerBox, children: ["You are about to restore the version from:", (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.versionDate, children: commitTimestamp }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.messageContainer, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { size: 18, SvgElement: alert_svg_1.default, className: `${styles_module_scss_2.default.headerText} ${styles_module_scss_1.default.headerIcon}` }) }), (0, jsx_runtime_1.jsx)("div", { children: "Restoring a version of a file is non-destructive. The restored content will become a new version at the top of history. You can always go back to the version you just had." })] })] })] }) }));
+};
+exports["default"] = ProjectHistoryModal;
+
+
 /***/ }),
 
 /***/ 9825:
@@ -371630,7 +371669,7 @@ exports.ModalTypeToComponentMap = void 0;
 const jsx_runtime_1 = __webpack_require__(74848);
 const types_1 = __webpack_require__(92932);
 const ShareProjectModal_1 = __importDefault(__webpack_require__(58052));
-const ProjectHistoryModal_1 = __importDefault(__webpack_require__(2468));
+const ProjectHistoryModal_1 = __importDefault(__webpack_require__(39345));
 const RemoveItemModal_1 = __importDefault(__webpack_require__(3985));
 const SaveProjectReminderModal_1 = __importDefault(__webpack_require__(66536));
 const UploadSizeLimitModal_1 = __importDefault(__webpack_require__(16893));
@@ -371639,7 +371678,7 @@ const RemixProjectModal_1 = __importDefault(__webpack_require__(45829));
 exports.ModalTypeToComponentMap = {
     [types_1.ModalType.SHARE_PROJECT]: (0, jsx_runtime_1.jsx)(ShareProjectModal_1.default, {}),
     [types_1.ModalType.REMOVE_ITEM]: (0, jsx_runtime_1.jsx)(RemoveItemModal_1.default, {}),
-    [types_1.ModalType.PROJECT_HISTORY]: (0, jsx_runtime_1.jsx)(ProjectHistoryModal_1.default, {}),
+    [types_1.ModalType.RESTORE_VERSION]: (0, jsx_runtime_1.jsx)(ProjectHistoryModal_1.default, {}),
     [types_1.ModalType.SAVE_PROJECT_REMINDER]: (0, jsx_runtime_1.jsx)(SaveProjectReminderModal_1.default, {}),
     [types_1.ModalType.UPLOAD_SIZE_LIMIT]: (0, jsx_runtime_1.jsx)(UploadSizeLimitModal_1.default, {}),
     [types_1.ModalType.UPLOAD_FILES]: (0, jsx_runtime_1.jsx)(UploadFilesModal_1.default, {}),
@@ -371647,6 +371686,38 @@ exports.ModalTypeToComponentMap = {
 };
 
 
+/***/ }),
+
+/***/ 75724:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+const jsx_runtime_1 = __webpack_require__(74848);
+const gwc_logo_svg_1 = __importDefault(__webpack_require__(72865));
+const text_jam_logo_svg_1 = __importDefault(__webpack_require__(97552));
+const ProjectName_1 = __importDefault(__webpack_require__(23559));
+const DownloadButton_1 = __importDefault(__webpack_require__(2492));
+const SaveButton_1 = __importDefault(__webpack_require__(24771));
+const ShareButton_1 = __importDefault(__webpack_require__(21422));
+const HistoryButton_1 = __importDefault(__webpack_require__(21091));
+const RunBar_1 = __importDefault(__webpack_require__(78176));
+const styles_module_scss_1 = __importDefault(__webpack_require__(19436));
+const stores_1 = __webpack_require__(32132);
+const types_1 = __webpack_require__(92932);
+const ProjectBar = ({ nameEditable = true, }) => {
+    const loading = (0, stores_1.useAppSelector)((state) => state.editor.loading);
+    if (loading !== types_1.LoadingState.SUCCESS) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, 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, role: "img", "aria-labelledby": "GWC Logo" }), (0, jsx_runtime_1.jsx)(text_jam_logo_svg_1.default, { className: styles_module_scss_1.default.textJamLogo, role: "img", "aria-labelledby": "TextJam logo" })] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.wrapper, children: [(0, jsx_runtime_1.jsx)(ProjectName_1.default, { editable: nameEditable, showLabel: true }), (0, jsx_runtime_1.jsx)(HistoryButton_1.default, { className: styles_module_scss_1.default.btnSvg }), (0, jsx_runtime_1.jsx)(SaveButton_1.default, { className: styles_module_scss_1.default.headerBtn })] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.wrapper, children: [(0, jsx_runtime_1.jsx)(RunBar_1.default, {}), (0, jsx_runtime_1.jsx)(DownloadButton_1.default, { className: styles_module_scss_1.default.btnSvg }), (0, jsx_runtime_1.jsx)(ShareButton_1.default, { className: styles_module_scss_1.default.btnSvg })] })] }));
+};
+exports["default"] = ProjectBar;
+
+
 /***/ }),
 
 /***/ 42375:
@@ -371909,7 +371980,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(74848);
 const react_1 = __webpack_require__(51649);
 const marked_1 = __webpack_require__(6709);
-const Project_1 = __importDefault(__webpack_require__(56123));
+const Project_1 = __importDefault(__webpack_require__(69118));
 const Output_1 = __importDefault(__webpack_require__(95148));
 const DefaultMZCriteria_1 = __webpack_require__(98748);
 const WebComponentCustomEvents_1 = __webpack_require__(30272);
@@ -372058,7 +372129,7 @@ const createProjectArchive_1 = __webpack_require__(46514);
 const Loading_1 = __importDefault(__webpack_require__(34466));
 const stores_1 = __webpack_require__(32132);
 const WebComponentLoader = (props) => {
-    const { locale = "en", projectNameEditable = true, readOnly = false, sidebarOptions = [], project: projectData, saveProject, isSaving, loadProjectContent, projectContent = null, isLoading = false, packageApiUrl, user, isCodeVisible = true, isSharedProject = false, shareLinks, isContentLoaded = null, isSaveSuccess = null, } = props;
+    const { locale = "en", projectNameEditable = true, readOnly = false, sidebarOptions = [], project: projectData, saveProject, isSaving, loadProjectContent, projectContent = null, isLoading = false, packageApiUrl, user, isCodeVisible = true, isSharedProject = false, shareLinks, isContentLoaded = null, isSaveSuccess = null, loadTemplateProjectData, isTemplateDataLoaded = false, } = props;
     const dispatch = (0, react_redux_1.useDispatch)();
     const { t } = (0, react_i18next_1.useTranslation)();
     const [searchParams] = (0, react_router_dom_1.useSearchParams)();
@@ -372120,6 +372191,8 @@ const WebComponentLoader = (props) => {
         isContentLoaded,
         projectContent,
         loadProjectContent,
+        loadTemplateProjectData,
+        isTemplateDataLoaded,
     });
     const onSave = async () => {
         if (!project?.components?.length)
@@ -372802,11 +372875,12 @@ const useIsMounted_1 = __webpack_require__(76314);
 const useProjectCache_1 = __webpack_require__(69557);
 const helpers_1 = __webpack_require__(59578);
 const isFinalLoadingState = (state) => state === types_1.LoadingState.SUCCESS || state === types_1.LoadingState.FAILED;
-const useProject = ({ projectData, projectContent = null, isContentLoaded = null, isLoading = false, loadProjectContent, }) => {
+const useProject = ({ projectData, projectContent = null, isContentLoaded = null, isLoading = false, loadProjectContent, loadTemplateProjectData, isTemplateDataLoaded, }) => {
     const project = (0, stores_1.useAppSelector)((state) => state.editor.project);
     const loadingState = (0, stores_1.useAppSelector)((state) => state.editor.loading);
     const isPreview = (0, stores_1.useAppSelector)((state) => state.editor.isOutputOnly);
-    const isContentLoadTriggered = (0, stores_1.useAppSelector)((state) => state.editor.isContentLoadTriggered);
+    const commitIdLoadTriggered = (0, stores_1.useAppSelector)((state) => state.editor.commitIdLoadTriggered);
+    const isLoadingCommit = (0, stores_1.useAppSelector)((state) => state.editor.isLoadingCommit);
     const isMounted = (0, useIsMounted_1.useIsMounted)();
     const dispatch = (0, react_redux_1.useDispatch)();
     const cacheKey = project.identifier ?? projectData?.identifier;
@@ -372837,7 +372911,7 @@ const useProject = ({ projectData, projectContent = null, isContentLoaded = null
         if (isLoading ||
             isLoadingCache ||
             (!isCacheLoaded && cacheKey) ||
-            isContentLoadTriggered)
+            commitIdLoadTriggered)
             return;
         if (isFinalLoadingState(loadingState))
             return;
@@ -372846,26 +372920,29 @@ const useProject = ({ projectData, projectContent = null, isContentLoaded = null
         // eslint-disable-next-line eqeqeq
         const isCurrentOutdated = cachedProject?.commitId != projectData?.commitId;
         // if no local data found or it's outdated, and commitId provided, try to load from commit
-        if ((hasNoData || isCurrentOutdated) &&
-            projectData?.commitId &&
-            loadProjectContent) {
+        if ((hasNoData || isCurrentOutdated) && projectData?.commitId) {
             // if we need to load content, but the loading is failed, set failed state and stop
             if (isContentLoaded === false) {
                 dispatch((0, EditorSlice_1.setLoading)(types_1.LoadingState.FAILED));
                 return;
             }
-            dispatch((0, EditorSlice_1.setIsContentLoadTriggered)(true));
-            loadProjectContent?.(projectData.commitId);
-            return;
-        }
-        // if no specific commitId provided and not preview, set default data
-        if (!projectData?.commitId && !isPreview) {
-            setProjectDataFromTemplate(projectData);
+            dispatch((0, EditorSlice_1.setCommitIdLoadTriggered)(projectData.commitId));
             return;
         }
         // if cached data found and it's not outdated, load from cache
         if (cachedProject && !isCurrentOutdated) {
             dispatch((0, EditorSlice_1.setProject)(cachedProject));
+            dispatch((0, EditorSlice_1.setCommits)({ commits: projectData?.commits ?? [] }));
+            return;
+        }
+        // if no specific commitId provided and not preview, set default data
+        if (!projectData?.commitId && !isPreview) {
+            if (!loadTemplateProjectData || isTemplateDataLoaded) {
+                setProjectDataFromTemplate(projectData);
+            }
+            else {
+                loadTemplateProjectData?.();
+            }
             return;
         }
         // if no flows above applied, set failed loading status
@@ -372881,18 +372958,33 @@ const useProject = ({ projectData, projectContent = null, isContentLoaded = null
         setProjectDataFromTemplate,
         isCacheLoaded,
         dispatch,
-        isContentLoadTriggered,
+        commitIdLoadTriggered,
         isPreview,
         cacheKey,
         isContentLoaded,
+        loadTemplateProjectData,
+        isTemplateDataLoaded,
     ]);
+    // Load commit data when commitIdLoadTriggered is set
+    (0, react_1.useEffect)(() => {
+        // if already loading a commit or no commit load triggered, do nothing
+        if (isLoadingCommit || !commitIdLoadTriggered)
+            return;
+        if (!loadProjectContent) {
+            console.warn("loadProjectContent function is not provided, cannot load project content.");
+            dispatch((0, EditorSlice_1.setCommitIdLoadTriggered)(null));
+            return;
+        }
+        loadProjectContent(commitIdLoadTriggered);
+        dispatch((0, EditorSlice_1.setIsLoadingCommit)(true));
+    }, [commitIdLoadTriggered, loadProjectContent, dispatch, isLoadingCommit]);
     // handle project content loading
     (0, react_1.useEffect)(() => {
-        if (!isContentLoadTriggered || isLoading || !projectData)
+        if (!commitIdLoadTriggered || isLoading || !projectData)
             return;
         if (isContentLoaded === false) {
             // if no data and not loading, stop waiting for content
-            dispatch((0, EditorSlice_1.setIsContentLoadTriggered)(false));
+            dispatch((0, EditorSlice_1.setIsLoadingCommit)(false));
             return;
         }
         if (!projectContent)
@@ -372909,11 +373001,14 @@ const useProject = ({ projectData, projectContent = null, isContentLoaded = null
             // ensure this is the latest load call to avoid race conditions
             if (projectLoadCallIdRef.current !== callId)
                 return;
+            const { commits, ...rest } = projectData;
             dispatch((0, EditorSlice_1.setProject)({
-                ...projectData,
+                ...rest,
+                commitId: commitIdLoadTriggered,
                 components: loadedProject.components,
                 rootDirId: loadedProject.rootDirId,
             }));
+            dispatch((0, EditorSlice_1.setCommits)({ commits: commits ?? [] }));
         })
             .catch((error) => {
             console.error("Error loading project from zip:", error);
@@ -372921,14 +373016,15 @@ const useProject = ({ projectData, projectContent = null, isContentLoaded = null
             .finally(() => {
             if (!isMounted.current)
                 return;
-            dispatch((0, EditorSlice_1.setIsContentLoadTriggered)(false));
+            dispatch((0, EditorSlice_1.setIsLoadingCommit)(false));
         });
+        // trigger only on incoming data change
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         dispatch,
         isMounted,
         projectContent,
         projectData,
-        isContentLoadTriggered,
         isContentLoaded,
         isLoading,
     ]);
@@ -373051,8 +373147,7 @@ const useProjectPersistence = ({ user, projectData, hasShownSavePrompt, onSave,
         const isCommitDifferent = projectData.commitId &&
             project.commitId &&
             project.commitId !== projectData.commitId;
-        const isSaveCurrentChanges = isCommitDifferent && project.commitId === commits[1]?.id;
-        if (!isFirstSave && !isSaveCurrentChanges)
+        if (!isFirstSave && !isCommitDifferent)
             return;
         dispatch((0, EditorSlice_1.updateProjectCommits)({ commitId: projectData.commitId, commits }));
         // remove old cached project on the first save
@@ -373118,7 +373213,7 @@ exports.useProjectPersistence = useProjectPersistence;
 
 var _a;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.queueBinaryWrites = exports.setIsContentLoadTriggered = exports.setShareLinks = exports.setCommits = exports.setSharedStatus = exports.setCodeVisibility = exports.applyComponentsPatch = exports.setSaving = exports.disableTheming = exports.hideSidebar = exports.showSidebar = exports.closeModal = exports.showModal = exports.closeErrorModal = exports.showErrorModal = exports.updateProjectName = exports.setSaveTriggered = exports.triggerDraw = exports.triggerCodeRun = exports.stopDraw = exports.stopCodeRun = exports.setLoading = exports.setReadOnly = exports.updateProjectIdentifier = exports.updateProjectCommits = exports.setProject = exports.setHasShownSavePrompt = exports.setError = exports.setCascadeUpdate = exports.setIsOutputOnly = exports.setAutorunEnabled = exports.setPage = exports.setFocussedFileIndex = exports.addFilePanel = exports.setOpenedFiles = exports.openFile = exports.closeFile = exports.expireJustLoaded = exports.codeRunHandled = exports.resetRunner = exports.setLoadedRunner = exports.loadingRunner = exports.updateProjectComponent = exports.addProjectComponent = exports.resetState = exports.EditorSlice = exports.editorInitialState = void 0;
+exports.queueBinaryWrites = exports.setIsLoadingCommit = exports.setCommitIdLoadTriggered = exports.setShareLinks = exports.setCommits = exports.setSharedStatus = exports.setCodeVisibility = exports.applyComponentsPatch = exports.setSaving = exports.disableTheming = exports.hideSidebar = exports.showSidebar = exports.closeModal = exports.showModal = exports.closeErrorModal = exports.showErrorModal = exports.updateProjectName = exports.setSaveTriggered = exports.triggerDraw = exports.triggerCodeRun = exports.stopDraw = exports.stopCodeRun = exports.setLoading = exports.setReadOnly = exports.updateProjectIdentifier = exports.updateProjectCommits = exports.setProject = exports.setHasShownSavePrompt = exports.setError = exports.setCascadeUpdate = exports.setIsOutputOnly = exports.setAutorunEnabled = exports.setPage = exports.setFocussedFileIndex = exports.addFilePanel = exports.setOpenedFiles = exports.openFile = exports.closeFile = exports.expireJustLoaded = exports.codeRunHandled = exports.resetRunner = exports.setLoadedRunner = exports.loadingRunner = exports.updateProjectComponent = exports.addProjectComponent = exports.resetState = exports.EditorSlice = exports.editorInitialState = void 0;
 const toolkit_1 = __webpack_require__(12069);
 const ProjectTypes_1 = __webpack_require__(27130);
 const types_1 = __webpack_require__(92932);
@@ -373129,7 +373224,8 @@ exports.editorInitialState = {
     saveTriggered: false,
     saving: types_1.SavingState.IDLE,
     saveSuccess: null,
-    isContentLoadTriggered: false,
+    commitIdLoadTriggered: null,
+    isLoadingCommit: false,
     loading: types_1.LoadingState.IDLE,
     justLoaded: false,
     hasShownSavePrompt: false,
@@ -373255,7 +373351,7 @@ exports.EditorSlice = (0, toolkit_1.createSlice)({
         },
         updateProjectCommits: (state, action) => {
             state.project.commitId = action.payload.commitId;
-            state.project.commits = action.payload.commits;
+            state.commits = action.payload.commits;
         },
         updateProjectIdentifier: (state, action) => {
             state.project.identifier = action.payload;
@@ -373278,8 +373374,14 @@ exports.EditorSlice = (0, toolkit_1.createSlice)({
                 state.saving = types_1.SavingState.IDLE;
             }
         },
-        setIsContentLoadTriggered: (state, action) => {
-            state.isContentLoadTriggered = action.payload;
+        setCommitIdLoadTriggered: (state, action) => {
+            state.commitIdLoadTriggered = action.payload;
+        },
+        setIsLoadingCommit: (state, action) => {
+            state.isLoadingCommit = action.payload;
+            if (action.payload === false) {
+                state.commitIdLoadTriggered = null;
+            }
         },
         setSaving: (state, action) => {
             state.saving = action.payload;
@@ -373390,7 +373492,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.setOpenedFiles = _a.setOpenedFiles, exports.addFilePanel = _a.addFilePanel, exports.setFocussedFileIndex = _a.setFocussedFileIndex, exports.setPage = _a.setPage, exports.setAutorunEnabled = _a.setAutorunEnabled, exports.setIsOutputOnly = _a.setIsOutputOnly, exports.setCascadeUpdate = _a.setCascadeUpdate, exports.setError = _a.setError, exports.setHasShownSavePrompt = _a.setHasShownSavePrompt, exports.setProject = _a.setProject, exports.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.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.setSharedStatus = _a.setSharedStatus, exports.setCommits = _a.setCommits, exports.setShareLinks = _a.setShareLinks, exports.setIsContentLoadTriggered = _a.setIsContentLoadTriggered;
+_a = exports.EditorSlice.actions, exports.resetState = _a.resetState, exports.addProjectComponent = _a.addProjectComponent, exports.updateProjectComponent = _a.updateProjectComponent, exports.loadingRunner = _a.loadingRunner, exports.setLoadedRunner = _a.setLoadedRunner, exports.resetRunner = _a.resetRunner, exports.codeRunHandled = _a.codeRunHandled, exports.expireJustLoaded = _a.expireJustLoaded, exports.closeFile = _a.closeFile, exports.openFile = _a.openFile, exports.setOpenedFiles = _a.setOpenedFiles, exports.addFilePanel = _a.addFilePanel, exports.setFocussedFileIndex = _a.setFocussedFileIndex, exports.setPage = _a.setPage, exports.setAutorunEnabled = _a.setAutorunEnabled, exports.setIsOutputOnly = _a.setIsOutputOnly, exports.setCascadeUpdate = _a.setCascadeUpdate, exports.setError = _a.setError, exports.setHasShownSavePrompt = _a.setHasShownSavePrompt, exports.setProject = _a.setProject, exports.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.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.setSharedStatus = _a.setSharedStatus, exports.setCommits = _a.setCommits, exports.setShareLinks = _a.setShareLinks, exports.setCommitIdLoadTriggered = _a.setCommitIdLoadTriggered, exports.setIsLoadingCommit = _a.setIsLoadingCommit;
 exports.queueBinaryWrites = (0, toolkit_1.createAction)("editor/queueBinaryWrites");
 exports["default"] = exports.EditorSlice.reducer;
 
@@ -373638,7 +373740,7 @@ var ModalType;
 (function (ModalType) {
     ModalType["SHARE_PROJECT"] = "shareProject";
     ModalType["REMOVE_ITEM"] = "removeItem";
-    ModalType["PROJECT_HISTORY"] = "projectHistory";
+    ModalType["RESTORE_VERSION"] = "restoreVersion";
     ModalType["SAVE_PROJECT_REMINDER"] = "saveProjectReminder";
     ModalType["UPLOAD_SIZE_LIMIT"] = "uploadSizeLimit";
     ModalType["UPLOAD_FILES"] = "uploadFiles";