gwchq-textjam 0.4.0 → 0.4.1

package/dist/index.js

@@ -64668,6 +64668,35 @@ function SvgGwcLogo(props) {
 
 /***/ }),
 
+/***/ 50424:
+/***/ ((__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 SvgActivity(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
+    width: 24,
+    height: 24,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M12 7a4 4 0 014-4h5a1 1 0 011 1v13a1 1 0 01-1 1h-6a3 3 0 00-3 3m0-14v14m0-14a4 4 0 00-4-4H3a1 1 0 00-1 1v13a1 1 0 001 1h6a3 3 0 013 3m0-14v14",
+    stroke: "#33625E",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })));
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgActivity);
+
+/***/ }),
+
 /***/ 41625:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -64833,6 +64862,35 @@ function SvgButtonDots(props) {
 
 /***/ }),
 
+/***/ 62284:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
+var _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+
+function SvgCheckbox(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
+    width: 8,
+    height: 6,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M.75 2.75l2 2 4-4",
+    stroke: "#33625E",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })));
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgCheckbox);
+
+/***/ }),
+
 /***/ 16882:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -65494,6 +65552,35 @@ function SvgMinusCircle(props) {
 
 /***/ }),
 
+/***/ 36311:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
+var _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+
+function SvgMonitor(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
+    width: 32,
+    height: 32,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M10.8 28h10.4M16 22.667V28M5.6 4h20.8C27.836 4 29 5.194 29 6.667V20c0 1.473-1.164 2.667-2.6 2.667H5.6C4.164 22.667 3 21.473 3 20V6.667C3 5.194 4.164 4 5.6 4z",
+    stroke: "#003046",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })));
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgMonitor);
+
+/***/ }),
+
 /***/ 97512:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -68348,8 +68435,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(89379);
-/* harmony import */ var D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(53986);
+/* harmony import */ var C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(89379);
+/* harmony import */ var C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(53986);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
 /* harmony import */ var _hello_pangea_dnd__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(98850);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(14062);
@@ -68373,7 +68460,7 @@ var DraggableTab = _ref => {
       panelIndex,
       fileIndex
     } = _ref,
-    otherProps = (0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)(_ref, _excluded);
+    otherProps = (0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)(_ref, _excluded);
   var openFiles = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(state => state.editor.openedFiles);
   var openFilesCount = openFiles[panelIndex].length;
   var dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useDispatch)();
@@ -68390,7 +68477,7 @@ var DraggableTab = _ref => {
       switchToFileTab(panelIndex, (fileIndex + openFilesCount - 1) % openFilesCount);
     }
   };
-  var InnerTab = () => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(react_tabs__WEBPACK_IMPORTED_MODULE_2__.Tab, (0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
+  var InnerTab = () => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(react_tabs__WEBPACK_IMPORTED_MODULE_2__.Tab, (0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
     onClick: e => {
       e.stopPropagation();
       switchToFileTab(panelIndex, fileIndex);
@@ -68408,7 +68495,7 @@ var DraggableTab = _ref => {
         draggableProps,
         dragHandleProps
       } = _ref2;
-      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", (0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
+      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", (0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
         className: "draggable-tab",
         ref: innerRef
       }, draggableProps), dragHandleProps), {}, {
@@ -68430,8 +68517,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(89379);
-/* harmony import */ var D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(53986);
+/* harmony import */ var C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(89379);
+/* harmony import */ var C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(53986);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
 /* harmony import */ var _hello_pangea_dnd__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(98850);
 /* harmony import */ var react_tabs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(39243);
@@ -68450,8 +68537,8 @@ var DroppableTabList = _ref => {
       children: _children,
       index
     } = _ref,
-    otherProps = (0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)(_ref, _excluded);
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_tabs__WEBPACK_IMPORTED_MODULE_1__.TabList, (0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({}, otherProps), {}, {
+    otherProps = (0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)(_ref, _excluded);
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_tabs__WEBPACK_IMPORTED_MODULE_1__.TabList, (0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({}, otherProps), {}, {
     children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_hello_pangea_dnd__WEBPACK_IMPORTED_MODULE_6__.Droppable, {
       direction: "horizontal",
       droppableId: index.toString(),
@@ -68461,7 +68548,7 @@ var DroppableTabList = _ref => {
           droppableProps,
           placeholder
         } = _ref2;
-        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", (0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({
+        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", (0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({
           className: "droppable-tab-list"
         }, droppableProps), {}, {
           ref: innerRef,
@@ -101805,8 +101892,10 @@ var editorLightTheme = EditorView.theme({
 var utils_settings = __webpack_require__(62161);
 // EXTERNAL MODULE: ./src/redux/stores/index.ts
 var stores = __webpack_require__(32132);
-// EXTERNAL MODULE: ./src/components/AssetPreview/index.tsx
-var AssetPreview = __webpack_require__(91078);
+// EXTERNAL MODULE: ./src/components/Editor/EditorStatistic/EditorStatistic.tsx
+var EditorStatistic = __webpack_require__(47272);
+// EXTERNAL MODULE: ./src/components/AssetPreviewPanel/index.tsx
+var AssetPreviewPanel = __webpack_require__(66360);
 ;// ./src/components/Editor/EditorPanel/EditorPanel.jsx
 
 /* eslint-disable react-hooks/exhaustive-deps */
@@ -101829,6 +101918,8 @@ var AssetPreview = __webpack_require__(91078);
 
 
 
+
+
 
 
 
@@ -101847,6 +101938,8 @@ var EditorPanel = _ref => {
   } = (0,es.useTranslation)();
   var settings = (0,external_react_.useContext)(utils_settings.SettingsContext);
   var [characterLimitExceeded, setCharacterLimitExceeded] = (0,external_react_.useState)(false);
+  var [line, setLine] = (0,external_react_.useState)(0);
+  var [position, setPosition] = (0,external_react_.useState)(0);
   var updateStoredProject = c(content => {
     dispatch((0,EditorSlice.updateProjectComponent)((0,objectSpread2/* default */.A)((0,objectSpread2/* default */.A)({}, file), {}, {
       content
@@ -101912,7 +102005,7 @@ var EditorPanel = _ref => {
   }, [file, cascadeUpdate, editorViewRef]);
   if (!file) return null;
   if (file.isBinary) {
-    return /*#__PURE__*/(0,jsx_runtime.jsx)(AssetPreview/* AssetPreview */.n, {
+    return /*#__PURE__*/(0,jsx_runtime.jsx)(AssetPreviewPanel.AssetPreviewPanel, {
       file: file
     });
   }
@@ -101924,20 +102017,31 @@ var EditorPanel = _ref => {
       updateStoredProject(viewUpdate.state.doc.toString());
     }
   });
-  var getMode = () => {
-    switch (file.extension) {
-      case "html":
-        return html();
-      case "css":
-        return css();
-      case "py":
-        return python();
-      case "js":
-        return javascript();
-      default:
-        return html();
+  var fileModes = {
+    html: {
+      title: "HTML",
+      renderer: html()
+    },
+    css: {
+      title: "CSS",
+      renderer: css()
+    },
+    py: {
+      title: "Python",
+      renderer: python()
+    },
+    js: {
+      title: "JavaScript",
+      renderer: javascript()
     }
   };
+  var getMode = () => {
+    return !!fileModes[file.extension] ? fileModes[file.extension].renderer : fileModes["html"].renderer;
+  };
+  var getModeTitle = () => {
+    return !!fileModes[file.extension] ? fileModes[file.extension].title : file.extension;
+  };
+
   // const isDarkMode =
   //   cookies.theme === "dark" ||
   //   (!cookies.theme &&
@@ -101946,11 +102050,24 @@ var EditorPanel = _ref => {
 
   // setting hardcode light theme for TextJam phase 1
   var editorTheme = editorLightTheme;
+  var getCaretPosition = () => {
+    var _editorViewRef$curren, _editorViewRef$curren2;
+    var pos = (_editorViewRef$curren = editorViewRef.current) === null || _editorViewRef$curren === void 0 || (_editorViewRef$curren = _editorViewRef$curren.state) === null || _editorViewRef$curren === void 0 || (_editorViewRef$curren = _editorViewRef$curren.selection) === null || _editorViewRef$curren === void 0 || (_editorViewRef$curren = _editorViewRef$curren.main) === null || _editorViewRef$curren === void 0 ? void 0 : _editorViewRef$curren.head;
+    var line = (_editorViewRef$curren2 = editorViewRef.current) === null || _editorViewRef$curren2 === void 0 ? void 0 : _editorViewRef$curren2.state.doc.lineAt(pos);
+    setLine(line.number);
+    setPosition(pos - line.from + 1);
+  };
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
     className: "editor-wrapper",
     children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", {
       className: "editor editor--".concat(settings.fontSize),
-      ref: editor
+      ref: editor,
+      onKeyUp: getCaretPosition,
+      onClick: getCaretPosition
+    }), /*#__PURE__*/(0,jsx_runtime.jsx)(EditorStatistic.EditorStatistic, {
+      line: line,
+      position: position,
+      title: getModeTitle()
     }), characterLimitExceeded && /*#__PURE__*/(0,jsx_runtime.jsx)(er, {
       title: t("editorPanel.characterLimitError"),
       type: "error",
@@ -102034,7 +102151,8 @@ var Project = props => {
   var {
     nameEditable = true,
     sidebarOptions = [],
-    packageApiUrl
+    packageApiUrl,
+    curriculumComponent
   } = props;
   var isSharedProject = (0,external_react_redux_.useSelector)(state => state.editor.isSharedProject);
   var isCodeVisible = (0,external_react_redux_.useSelector)(state => state.editor.isCodeVisible);
@@ -102062,7 +102180,8 @@ var Project = props => {
     }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
       className: styles_module.projContainer,
       children: [/*#__PURE__*/(0,jsx_runtime.jsx)((Sidebar_default()), {
-        options: sidebarOptions
+        options: sidebarOptions,
+        curriculumComponent: curriculumComponent
       }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
         className: styles_module.projectWrapper,
         ref: containerRef,
@@ -102158,8 +102277,10 @@ var SidebarPanel = props => {
     heading,
     Footer,
     className,
+    panelContentClassName,
     buttons = [],
-    defaultWidth = "270px"
+    defaultWidth = "270px",
+    maxWidth = "600px"
   } = props;
   var isMobile = (0,react_responsive__WEBPACK_IMPORTED_MODULE_4__.useMediaQuery)({
     query: _utils_mediaQueryBreakpoints__WEBPACK_IMPORTED_MODULE_5__.MOBILE_MEDIA_QUERY
@@ -102175,7 +102296,7 @@ var SidebarPanel = props => {
         children: buttons
       })]
     }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", {
-      className: _styles_module_scss__WEBPACK_IMPORTED_MODULE_2__["default"].panelContent,
+      className: classnames__WEBPACK_IMPORTED_MODULE_1___default()(_styles_module_scss__WEBPACK_IMPORTED_MODULE_2__["default"].panelContent, panelContentClassName),
       children: children
     }), Footer && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", {
       className: _styles_module_scss__WEBPACK_IMPORTED_MODULE_2__["default"].panelFooter,
@@ -102193,7 +102314,7 @@ var SidebarPanel = props => {
     defaultHeight: "100%",
     handleDirection: "right",
     minWidth: "250px",
-    maxWidth: "600px",
+    maxWidth: maxWidth,
     children: panelContent
   });
 };
@@ -103015,7 +103136,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(89379);
+/* harmony import */ var C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(89379);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(14062);
 /* harmony import */ var _redux_EditorSlice__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(68512);
@@ -103129,7 +103250,7 @@ var ProjectName = _ref => {
       id: "project_name_label",
       className: _styles_module_scss__WEBPACK_IMPORTED_MODULE_3__["default"].projectLabel,
       children: "Project Name"
-    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", (0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", (0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
       className: classnames__WEBPACK_IMPORTED_MODULE_2___default()(_styles_module_scss__WEBPACK_IMPORTED_MODULE_3__["default"].projectName, className)
     }, hoverProps), {}, {
       children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)((components_Tooltip_Tooltip__WEBPACK_IMPORTED_MODULE_8___default()), {
@@ -103147,6 +103268,7 @@ var ProjectName = _ref => {
         onKeyUp: handleKeyUp,
         value: name,
         readOnly: !isEditing,
+        maxLength: 255,
         onChange: handleOnChange,
         onBlur: handleOnBlur,
         className: classnames__WEBPACK_IMPORTED_MODULE_2___default()(_styles_module_scss__WEBPACK_IMPORTED_MODULE_3__["default"].projectInput, {
@@ -103213,6 +103335,11 @@ var Button = __webpack_require__(79428);
 var external_react_redux_ = __webpack_require__(14062);
 // EXTERNAL MODULE: ./src/redux/EditorSlice.ts
 var EditorSlice = __webpack_require__(68512);
+// EXTERNAL MODULE: ./src/components/Tooltip/Tooltip.tsx
+var Tooltip = __webpack_require__(26982);
+var Tooltip_default = /*#__PURE__*/__webpack_require__.n(Tooltip);
+// EXTERNAL MODULE: ./src/hooks/useHover.ts
+var useHover = __webpack_require__(78556);
 // EXTERNAL MODULE: ./node_modules/react/jsx-runtime.js
 var jsx_runtime = __webpack_require__(74848);
 ;// ./src/components/RunButton/RunButton.jsx
@@ -103224,6 +103351,8 @@ var _excluded = ["className"];
 
 
 
+
+
 var RunButton = _ref => {
   var {
       className
@@ -103233,15 +103362,26 @@ var RunButton = _ref => {
   var activeRunner = (0,external_react_redux_.useSelector)(state => state.editor.activeRunner);
   var loadedRunner = (0,external_react_redux_.useSelector)(state => state.editor.loadedRunner);
   var dispatch = (0,external_react_redux_.useDispatch)();
+  var {
+    hovered,
+    hoverProps
+  } = (0,useHover.useHover)();
   var onClickRun = () => {
     dispatch((0,EditorSlice.triggerCodeRun)());
     // reset page when running code to ensure it starts from the beginning
     dispatch((0,EditorSlice.setPage)(null));
   };
-  return /*#__PURE__*/(0,jsx_runtime.jsx)(Button["default"], (0,objectSpread2/* default */.A)({
-    disabled: !activeRunner || activeRunner !== loadedRunner || codeRunLoading,
-    onClickHandler: onClickRun
-  }, props));
+  var isButtonDisabled = !activeRunner || activeRunner !== loadedRunner || codeRunLoading;
+  return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", (0,objectSpread2/* default */.A)((0,objectSpread2/* default */.A)({}, hoverProps), {}, {
+    children: [/*#__PURE__*/(0,jsx_runtime.jsx)((Tooltip_default()), {
+      message: "We\u2019re still loading what you need to run your code. Try again in a moment!",
+      visible: hovered && isButtonDisabled,
+      position: "bottom"
+    }), /*#__PURE__*/(0,jsx_runtime.jsx)(Button["default"], (0,objectSpread2/* default */.A)({
+      disabled: isButtonDisabled,
+      onClickHandler: onClickRun
+    }, props))]
+  }));
 };
 /* harmony default export */ const RunButton_RunButton = (RunButton);
 // EXTERNAL MODULE: ./node_modules/classnames/index.js
@@ -103460,6 +103600,7 @@ var jsx_runtime = __webpack_require__(74848);
 
 
 var NO_CHANGES_TO_SAVE_MESSAGE = "No new changes to save!";
+var DEFAULT_TOOLTIP = "Save project";
 var SaveButton = props => {
   var dispatch = (0,external_react_redux_.useDispatch)();
   var {
@@ -103489,8 +103630,8 @@ var SaveButton = props => {
     className: styles_module.wrapper
   }, hoverProps), {}, {
     children: [/*#__PURE__*/(0,jsx_runtime.jsx)((Tooltip_default()), {
-      message: NO_CHANGES_TO_SAVE_MESSAGE,
-      visible: !hasChangesToSave && hovered,
+      message: DEFAULT_TOOLTIP + (hasChangesToSave ? "" : "\n" + NO_CHANGES_TO_SAVE_MESSAGE),
+      visible: hovered,
       position: "bottom"
     }), /*#__PURE__*/(0,jsx_runtime.jsx)(Button["default"], (0,objectSpread2/* default */.A)({
       buttonText: buttonText,
@@ -106198,6 +106339,14 @@ instance.use(es.initReactI18next)
 
   interpolation: {
     escapeValue: false // not needed for react!!
+  },
+  // Disable Suspense integration in react-i18next so that translation
+  // loads (initial + i18n.changeLanguage) never throw promises that would
+  // bubble to the root <Suspense fallback={<Loading />}> in App.tsx and
+  // remount the Loading component (restarting the GIF / dot animation).
+  // The visible loading state is driven by redux in WebComponentLoader.
+  react: {
+    useSuspense: false
   }
 });
 /* harmony default export */ const i18n = (instance);
@@ -142811,6 +142960,18 @@ __webpack_require__.r(__webpack_exports__);
 // extracted by mini-css-extract-plugin
 
 
+/***/ }),
+
+/***/ 22401:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+// extracted by mini-css-extract-plugin
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"previewContainer":"styles-module__previewContainer--gHB-N"});
+
 /***/ }),
 
 /***/ 63724:
@@ -142837,6 +142998,18 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
+/***/ 89464:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+// extracted by mini-css-extract-plugin
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"grey-rpi-grey-15":"#d5d7dc","grey-rpi-grey-40":"#9497a4","grey-rpi-grey-5":"#f1f2f3","grey-rpi-grey-70":"#4a4d59","grey-rpf-white":"#fff","editorStatistic":"styles-module__editorStatistic--EyK0S","contentType":"styles-module__contentType--Sb4eE"});
+
+/***/ }),
+
 /***/ 71244:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -142861,6 +143034,18 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
+/***/ 38231:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+// extracted by mini-css-extract-plugin
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"grey-rpi-grey-15":"#d5d7dc","grey-rpi-grey-40":"#9497a4","grey-rpi-grey-5":"#f1f2f3","grey-rpi-grey-70":"#4a4d59","grey-rpf-white":"#fff","container":"styles-module__container--cs4+2","title":"styles-module__title--7NEra"});
+
+/***/ }),
+
 /***/ 12914:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -142909,6 +143094,18 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
+/***/ 99016:
+/***/ ((__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__ = ({"curriculumPanel":"styles-module__curriculumPanel--UARP0","panelContent":"styles-module__panelContent--eZsVv"});
+
+/***/ }),
+
 /***/ 52160:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -142941,7 +143138,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"grey-rpi-grey-15":"#d5d7dc","grey-rpi-grey-40":"#9497a4","grey-rpi-grey-5":"#f1f2f3","grey-rpi-grey-70":"#4a4d59","grey-rpf-white":"#fff","tree":"styles-module__tree--KziAJ","fileTreeActions":"styles-module__fileTreeActions--k+Wsd","fileTreeActionsLabel":"styles-module__fileTreeActionsLabel--dPZp4","importButton":"styles-module__importButton--rcLUm","importArrowIcon":"styles-module__importArrowIcon--3eOLN","label":"styles-module__label--WY51f","iconButton":"styles-module__iconButton--6UIVe","iconButtonFilled":"styles-module__iconButtonFilled--w2vJC","dragline":"styles-module__dragline--RXmTT","emptyStateContainer":"styles-module__emptyStateContainer--AnTAm","emptyStateIcon":"styles-module__emptyStateIcon--sDlxK","emptyStateMessage":"styles-module__emptyStateMessage--OkPax"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"grey-rpi-grey-15":"#d5d7dc","grey-rpi-grey-40":"#9497a4","grey-rpi-grey-5":"#f1f2f3","grey-rpi-grey-70":"#4a4d59","grey-rpf-white":"#fff","tree":"styles-module__tree--KziAJ","fileTreeActions":"styles-module__fileTreeActions--k+Wsd","tooltipWrapper":"styles-module__tooltipWrapper--wltXE","fileTreeActionsLabel":"styles-module__fileTreeActionsLabel--dPZp4","importButton":"styles-module__importButton--rcLUm","importArrowIcon":"styles-module__importArrowIcon--3eOLN","label":"styles-module__label--WY51f","iconButton":"styles-module__iconButton--6UIVe","iconButtonFilled":"styles-module__iconButtonFilled--w2vJC","dragline":"styles-module__dragline--RXmTT","emptyStateContainer":"styles-module__emptyStateContainer--AnTAm","emptyStateIcon":"styles-module__emptyStateIcon--sDlxK","emptyStateMessage":"styles-module__emptyStateMessage--OkPax"});
 
 /***/ }),
 
@@ -368642,9 +368839,14 @@ const AuthContext_1 = __webpack_require__(55471);
 __webpack_require__(41527);
 const editorListener_1 = __webpack_require__(41824);
 const Loading_1 = __importDefault(__webpack_require__(34466));
+const types_1 = __webpack_require__(92932);
 const LeaveGuardController_1 = __webpack_require__(65240);
 (0, editorListener_1.registerEditorListeners)();
-const TextJamEditor = ({ onLogoutClick = () => { }, onViewProfileClick = () => { }, onHomeClick = () => { }, saveProject, isSaving, projectContent = null, starterCodeContent = null, template, shareLinks = null, navigationGuardCoordinator, ...componentProps }) => {
+const DEFAULT_CURRICULUM = {
+    curriculumContent: null,
+    curriculumDisplayMode: types_1.CurriculumDisplayMode.HIDDEN,
+};
+const TextJamEditor = ({ onLogoutClick = () => { }, onViewProfileClick = () => { }, onHomeClick = () => { }, saveProject, isSaving, projectContent = null, starterCodeContent = null, template, shareLinks = null, navigationGuardCoordinator, curriculum = DEFAULT_CURRICULUM, ...componentProps }) => {
     // Default props that match the previous web-component defaults
     const defaultProps = {
         sidebarOptions: [
@@ -368668,6 +368870,7 @@ const TextJamEditor = ({ onLogoutClick = () => { }, onViewProfileClick = () => {
         starterCodeContent,
         template,
         shareLinks,
+        curriculum,
     };
     const store = (0, react_1.useMemo)(() => (0, stores_1.createAppStore)(), []);
     (0, react_1.useEffect)(() => {
@@ -368685,15 +368888,34 @@ const TextJamEditor = ({ onLogoutClick = () => { }, onViewProfileClick = () => {
 exports.TextJamEditor = TextJamEditor;
 
 
+/***/ }),
+
+/***/ 66360:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.AssetPreviewPanel = void 0;
+const jsx_runtime_1 = __webpack_require__(74848);
+const styles_module_scss_1 = __importDefault(__webpack_require__(22401));
+const AssetPreview_1 = __webpack_require__(91078);
+const AssetPreviewPanel = ({ file, }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.previewContainer, children: (0, jsx_runtime_1.jsx)(AssetPreview_1.AssetPreview, { file: file }) }));
+};
+exports.AssetPreviewPanel = AssetPreviewPanel;
+
+
 /***/ }),
 
 /***/ 91078:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
-var __webpack_unused_export__;
 
-__webpack_unused_export__ = ({ value: true });
-exports.n = void 0;
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.AssetPreview = void 0;
 const jsx_runtime_1 = __webpack_require__(74848);
 const react_1 = __webpack_require__(51649);
 const binaryStore_1 = __webpack_require__(5060);
@@ -368720,7 +368942,7 @@ const AssetPreview = ({ file }) => {
     if (!url)
         return null;
     if (file.mimeType?.startsWith("image/")) {
-        return ((0, jsx_runtime_1.jsx)("img", { src: url, alt: file.name || "Asset preview", style: { maxWidth: "100%" } }));
+        return ((0, jsx_runtime_1.jsx)("img", { src: url, alt: file.name || "Asset preview", style: { width: "fit-content", maxWidth: "100%" } }));
     }
     if (file.mimeType?.startsWith("audio/")) {
         return (0, jsx_runtime_1.jsx)("audio", { src: url, controls: true, style: { margin: 20 } });
@@ -368733,7 +368955,7 @@ const AssetPreview = ({ file }) => {
     }
     return (0, jsx_runtime_1.jsxs)("div", { children: ["File: ", file.name] });
 };
-exports.n = AssetPreview;
+exports.AssetPreview = AssetPreview;
 
 
 /***/ }),
@@ -368805,7 +369027,7 @@ const HistoryButton = ({ className }) => {
     const handleClick = () => {
         setIsContextOpen((prev) => !prev);
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.btnContainer, ...hoverProps, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Nothing here yet! Once you save your work, versions will appear here so you can restore them.", visible: hovered && !commits?.length, position: "bottom" }), (0, jsx_runtime_1.jsx)(Button_1.default, { buttonRef: ref, className: (0, classnames_1.default)(styles_module_scss_1.default.historyButton, className, {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.btnContainer, ...hoverProps, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Nothing here yet! Once you save your work, versions will appear here so you can restore them.", visible: hovered && !commits?.length, position: "bottom" }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Load previous versions", visible: hovered && !!commits?.length, position: "bottom" }), (0, jsx_runtime_1.jsx)(Button_1.default, { buttonRef: ref, className: (0, classnames_1.default)(styles_module_scss_1.default.historyButton, className, {
                             [styles_module_scss_1.default.historyActive]: isContextOpen,
                         }), variant: "tertiary", onClickHandler: handleClick, ButtonIcon: () => (0, SvgIcon_1.SvgIcon)({ SvgElement: history_svg_1.default, size: 24 }), disabled: !commits?.length })] }), (0, jsx_runtime_1.jsx)(CommitHistoryMenu_1.CommitHistoryMenu, { isOpen: isContextOpen, onClose: () => setIsContextOpen(false), commits: commits, btnRef: ref, activeCommitId: project.commitId ?? undefined })] }));
 };
@@ -368852,13 +369074,16 @@ const stores_1 = __webpack_require__(32132);
 const SvgIcon_1 = __webpack_require__(82917);
 const Button_1 = __importDefault(__webpack_require__(79428));
 const createProjectArchive_1 = __webpack_require__(46514);
+const Tooltip_1 = __importDefault(__webpack_require__(26982));
+const useHover_1 = __webpack_require__(78556);
 const DownloadButton = (props) => {
     const project = (0, stores_1.useAppSelector)((state) => state.editor.project);
+    const { hovered, hoverProps } = (0, useHover_1.useHover)();
     const onClickDownload = async () => {
         const { zipBlob: content } = await (0, createProjectArchive_1.createProjectArchive)(project);
         file_saver_1.default.saveAs(content, `${(0, js_convert_case_1.toSnakeCase)(project.name || "untitled_project")}.zip`);
     };
-    return ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "tertiary", ButtonIcon: () => (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: download_svg_1.default, size: 24 }), onClickHandler: onClickDownload, ...props }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...hoverProps, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { variant: "tertiary", ButtonIcon: () => (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: download_svg_1.default, size: 24 }), onClickHandler: onClickDownload, ...props }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Download project", visible: hovered, position: "bottom" })] }));
 };
 exports["default"] = DownloadButton;
 
@@ -369049,6 +369274,28 @@ const EditorInput = () => {
 exports["default"] = EditorInput;
 
 
+/***/ }),
+
+/***/ 47272:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.EditorStatistic = void 0;
+const jsx_runtime_1 = __webpack_require__(74848);
+const SvgIcon_1 = __webpack_require__(82917);
+const checkbox_svg_1 = __importDefault(__webpack_require__(62284));
+const styles_module_scss_1 = __importDefault(__webpack_require__(89464));
+const EditorStatistic = (props) => {
+    const TAB_SIZE = 2;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.editorStatistic, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentType, children: ["{", (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { size: 6, SvgElement: checkbox_svg_1.default }), "} ", props.title] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentStatistic, children: ["Ln ", props.line, ", Col ", props.position, " * Spaces ", TAB_SIZE] })] }));
+};
+exports.EditorStatistic = EditorStatistic;
+
+
 /***/ }),
 
 /***/ 80335:
@@ -369197,7 +369444,6 @@ const node_html_parser_1 = __webpack_require__(36192);
 const classnames_1 = __importDefault(__webpack_require__(46942));
 const react_router_dom_1 = __webpack_require__(92648);
 const EditorSlice_1 = __webpack_require__(68512);
-const externalLinkHelper_1 = __webpack_require__(31615);
 const open_in_new_tab_svg_1 = __importDefault(__webpack_require__(86936));
 const stores_1 = __webpack_require__(32132);
 const ProjectTypes_1 = __webpack_require__(27130);
@@ -369208,6 +369454,7 @@ const preview_svg_1 = __importDefault(__webpack_require__(80417));
 const OutputTabPanel_1 = __webpack_require__(25931);
 const styles_module_scss_1 = __importDefault(__webpack_require__(12914));
 const helpers_1 = __webpack_require__(1108);
+const projectPath_1 = __webpack_require__(95506);
 const fileParsers_1 = __webpack_require__(26683);
 const scripts_1 = __webpack_require__(57621);
 const Errors_1 = __webpack_require__(20339);
@@ -369223,6 +369470,8 @@ const getConsoleKey = (message) => JSON.stringify({
     method: message.method,
     data: message.data,
 });
+// A standalone preview view is flagged by `?preview=1` in the URL.
+const isPreviewSearch = (params) => params.get("preview") === "1";
 function HtmlRunner() {
     const [consoleLogs, setConsoleLogs] = (0, react_1.useState)([]);
     const project = (0, stores_1.useAppSelector)((state) => state.editor.project);
@@ -369235,9 +369484,19 @@ function HtmlRunner() {
     const isPreviewMode = (0, stores_1.useAppSelector)((state) => state.editor.isOutputOnly);
     const dispatch = (0, react_redux_1.useDispatch)();
     const output = (0, react_1.useRef)(null);
-    const [searchParams, setSearchParams] = (0, react_router_dom_1.useSearchParams)();
+    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);
+    const shouldUseBrowserHistoryRef = (0, react_1.useRef)(false);
+    const currentPageParam = searchParams.get("page");
+    const isPreviewUrl = isPreviewSearch(searchParams);
+    // 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);
+    (0, react_1.useEffect)(() => {
+        shouldUseBrowserHistoryRef.current = shouldUseBrowserHistory;
+    }, [shouldUseBrowserHistory]);
     (0, react_1.useEffect)(() => {
         broadcastChannel.current = new BroadcastChannel(BROADCAST_CHANNEL);
         return () => {
@@ -369257,18 +369516,58 @@ function HtmlRunner() {
         defaultPreviewFilePath = page;
     }
     const [runningFilePath, setRunningFilePath] = (0, react_1.useState)(defaultPreviewFilePath);
+    const writePreviewUrlToHistory = (path, replace = false) => {
+        const normalizedPath = (0, projectPath_1.normalizePath)(path);
+        const url = new URL(window.location.href);
+        if (url.searchParams.get("page") === normalizedPath) {
+            return false;
+        }
+        url.searchParams.set("preview", "1");
+        url.searchParams.set("page", normalizedPath);
+        if (replace) {
+            window.history.replaceState({ __textJamPreview: true, page: normalizedPath }, "", url.toString());
+        }
+        else {
+            window.history.pushState({ __textJamPreview: true, page: normalizedPath }, "", url.toString());
+        }
+        return true;
+    };
+    // Sync the initial preview page into the URL and kick off the first run.
     (0, react_1.useEffect)(() => {
-        if (isPreviewMode) {
-            dispatch((0, EditorSlice_1.triggerCodeRun)());
-            if (page) {
-                setSearchParams((prevParams) => {
-                    const updatedParams = new URLSearchParams(prevParams);
-                    updatedParams.set("page", page);
-                    return updatedParams;
-                }, { replace: true });
-            }
+        if (!shouldUseBrowserHistory)
+            return;
+        const url = new URL(window.location.href);
+        const pageFromUrl = url.searchParams.get("page");
+        const initialPage = (0, projectPath_1.normalizePath)(pageFromUrl ?? page ?? helpers_1.DEFAULT_ENTRY_FILE_PATH);
+        if (!pageFromUrl) {
+            writePreviewUrlToHistory(initialPage, true);
+        }
+        else {
+            const normalizedUrl = new URL(window.location.href);
+            normalizedUrl.searchParams.set("page", initialPage);
+            window.history.replaceState({ __textJamPreview: true, page: initialPage }, "", normalizedUrl.toString());
         }
-    }, [isPreviewMode, page, setSearchParams]);
+        dispatch((0, EditorSlice_1.setPage)(initialPage));
+        dispatch((0, EditorSlice_1.triggerCodeRun)());
+    }, [shouldUseBrowserHistory]);
+    // Browser back/forward: re-run the page encoded in the URL.
+    (0, react_1.useEffect)(() => {
+        if (!shouldUseBrowserHistory)
+            return;
+        const handlePopState = () => {
+            const url = new URL(window.location.href);
+            const pageFromUrl = url.searchParams.get("page");
+            if (!pageFromUrl)
+                return;
+            const normalizedPage = (0, projectPath_1.normalizePath)(pageFromUrl);
+            dispatch((0, EditorSlice_1.setPage)(normalizedPage));
+            dispatch((0, EditorSlice_1.triggerCodeRun)());
+        };
+        window.addEventListener("popstate", handlePopState);
+        return () => {
+            window.removeEventListener("popstate", handlePopState);
+        };
+    }, [shouldUseBrowserHistory]);
     (0, react_1.useEffect)(() => {
         if (isPreviewMode) {
             const handleMessage = (event) => {
@@ -369283,29 +369582,29 @@ function HtmlRunner() {
             };
         }
     }, [isPreviewMode]);
-    const showModal = () => {
-        dispatch((0, EditorSlice_1.showErrorModal)());
-        eventListener();
-    };
-    const { externalLink, setExternalLink, handleAllowedExternalLink, handleRegularExternalLink, handleExternalLinkError, } = (0, externalLinkHelper_1.useExternalLinkState)(showModal);
-    const eventListener = () => {
-        window.addEventListener("message", (event) => {
-            if (typeof event.data?.msg === "string") {
-                if (event.data?.msg === "ERROR: External link") {
-                    handleExternalLinkError();
-                }
-                else if (event.data?.msg === "Allowed external link") {
-                    handleAllowedExternalLink(event.data.payload.linkTo);
-                }
-                else {
-                    handleRegularExternalLink(event.data.payload.linkTo);
-                }
-            }
-        });
-    };
+    (0, react_1.useEffect)(() => {
+        const handleReloadMessage = (event) => {
+            if (event.data?.msg !== "RELOAD")
+                return;
+            const nextPage = event.data?.payload?.linkTo;
+            if (typeof nextPage !== "string")
+                return;
+            const normalizedPage = (0, projectPath_1.normalizePath)(nextPage);
+            // Push the navigation onto the browser history stack so the native
+            // back/forward buttons (and refresh) navigate preview pages.
+            if (shouldUseBrowserHistoryRef.current ||
+                isPreviewSearch(new URL(window.location.href).searchParams)) {
+                writePreviewUrlToHistory(normalizedPage);
+            }
+            dispatch((0, EditorSlice_1.setPage)(normalizedPage));
+            dispatch((0, EditorSlice_1.triggerCodeRun)());
+        };
+        window.addEventListener("message", handleReloadMessage);
+        return () => window.removeEventListener("message", handleReloadMessage);
+    }, [dispatch]);
     const iframeReload = () => {
         const iframe = output.current?.contentDocument;
-        const filePath = (0, helpers_1.getFilenameFromIFrame)(iframe) ?? externalLink;
+        const filePath = (0, helpers_1.getFilenameFromIFrame)(iframe);
         if (runningFilePath !== filePath) {
             setRunningFilePath(filePath);
         }
@@ -369315,9 +369614,11 @@ function HtmlRunner() {
                 linkElement.addEventListener("click", (e) => {
                     const href = linkElement.getAttribute("href");
                     const target = linkElement.getAttribute("target");
-                    // block in-iframe navigation for links with target="_blank" and .html href
+                    if (!href || target !== "_blank" || (0, helpers_1.isExternalUrl)(href))
+                        return;
+                    // block in-iframe navigation for internal html links with target="_blank"
                     // and open them in a preview tab
-                    if (target === "_blank" && href?.includes(".html")) {
+                    if (href?.includes(".html")) {
                         e.preventDefault();
                         e.stopImmediatePropagation();
                         openPreview(`/${href}`);
@@ -369325,15 +369626,15 @@ function HtmlRunner() {
                 }, true);
             });
         }
-        setExternalLink(null);
     };
     (0, react_1.useEffect)(() => {
-        eventListener();
         dispatch((0, EditorSlice_1.loadingRunner)(EditorTypes_1.RunnerType.HTML));
         dispatch((0, EditorSlice_1.setLoadedRunner)(EditorTypes_1.RunnerType.HTML));
     }, []);
     (0, react_1.useEffect)(() => {
         if (codeRunTriggered) {
+            // Set unique key to force iframe remount
+            setIframeKey((prev) => prev + 1);
             runCode();
             if (!isPreviewMode) {
                 broadcastChannel.current?.postMessage({
@@ -369342,50 +369643,48 @@ function HtmlRunner() {
             }
         }
     }, [codeRunTriggered, page, isPreviewMode]);
-    const currentPageParam = searchParams.get("page");
     (0, react_1.useEffect)(() => {
-        if (currentPageParam) {
-            dispatch((0, EditorSlice_1.setPage)(currentPageParam));
-        }
-    }, [currentPageParam, dispatch]);
+        if (!currentPageParam)
+            return;
+        // In preview mode page changes are driven by the browser history flow
+        // (popstate); in regular editor mode keep Redux page in sync with the URL.
+        if (shouldUseBrowserHistory)
+            return;
+        dispatch((0, EditorSlice_1.setPage)(currentPageParam));
+    }, [currentPageParam, shouldUseBrowserHistory, dispatch]);
     const runCode = async () => {
         setConsoleLogs([]);
         const fileToRun = page ?? defaultPreviewFilePath;
         setRunningFilePath(fileToRun);
         dispatch((0, EditorSlice_1.setError)(null));
-        if (!externalLink) {
-            const entryPoint = (0, helpers_1.getEntryPoint)(projectComponents, fileToRun);
-            if (!entryPoint) {
-                dispatch((0, EditorSlice_1.setError)(fileToRun === helpers_1.DEFAULT_ENTRY_FILE_PATH && !isPreviewMode
-                    ? {
-                        type: Errors_1.ErrorType.ENTRY_FILE_NOT_FOUND,
-                        details: {
-                            fileName: helpers_1.DEFAULT_ENTRY_FILE_NAME,
-                        },
-                    }
-                    : {
-                        type: Errors_1.ErrorType.PAGE_NOT_FOUND,
-                    }));
-                dispatch((0, EditorSlice_1.codeRunHandled)());
-                return;
-            }
-            const indexPage = (0, node_html_parser_1.parse)(entryPoint.content);
-            const body = indexPage.querySelector("body") || indexPage;
-            const htmlRoot = indexPage.querySelector("html") ?? indexPage;
-            body.insertAdjacentHTML("afterbegin", scripts_1.disableLocalStorageScript);
-            htmlRoot.insertAdjacentHTML("afterbegin", scripts_1.consoleOverrideScript);
-            const { content } = await (0, fileParsers_1.resolveAndRewriteHtmlImports)(indexPage.toString(), projectComponents, entryPoint.path, page ?? entryPoint.path);
-            if (output.current) {
-                output.current.srcdoc = content;
-            }
-            if (codeRunTriggered) {
-                dispatch((0, EditorSlice_1.codeRunHandled)());
-            }
+        const entryPoint = (0, helpers_1.getEntryPoint)(projectComponents, fileToRun);
+        if (!entryPoint) {
+            dispatch((0, EditorSlice_1.setError)(fileToRun === helpers_1.DEFAULT_ENTRY_FILE_PATH && !isPreviewMode
+                ? {
+                    type: Errors_1.ErrorType.ENTRY_FILE_NOT_FOUND,
+                    details: {
+                        fileName: helpers_1.DEFAULT_ENTRY_FILE_NAME,
+                    },
+                }
+                : {
+                    type: Errors_1.ErrorType.PAGE_NOT_FOUND,
+                }));
+            dispatch((0, EditorSlice_1.codeRunHandled)());
+            return;
         }
-        else {
-            if (output.current) {
-                output.current.src = externalLink;
-            }
+        const indexPage = (0, node_html_parser_1.parse)(entryPoint.content);
+        const body = indexPage.querySelector("body") || indexPage;
+        const htmlRoot = indexPage.querySelector("html") ?? indexPage;
+        body.insertAdjacentHTML("afterbegin", scripts_1.disableLocalStorageScript);
+        htmlRoot.insertAdjacentHTML("afterbegin", scripts_1.consoleOverrideScript);
+        const { content } = await (0, fileParsers_1.resolveAndRewriteHtmlImports)(indexPage.toString(), projectComponents, entryPoint.path, page ?? entryPoint.path);
+        if (output.current?.contentWindow?.document) {
+            const doc = output.current.contentWindow.document;
+            doc.open();
+            doc.write(content);
+            doc.close();
+        }
+        if (codeRunTriggered) {
             dispatch((0, EditorSlice_1.codeRunHandled)());
         }
     };
@@ -369425,7 +369724,7 @@ function HtmlRunner() {
     const iframeClasses = (0, classnames_1.default)(styles_module_scss_1.default.iframe, {
         [styles_module_scss_1.default.codeHasBeenRun]: codeHasBeenRun,
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.htmlrunnerContainer, children: [(0, jsx_runtime_1.jsx)(OutputTabPanel_1.OutputTabPanel, { title: "Preview", icon: preview_svg_1.default, readOnly: readOnly, extraTabContent: codeHasBeenRun && openInNewTabLink, tabPanelClassName: styles_module_scss_1.default.previewHtml, children: error ? ((0, jsx_runtime_1.jsx)("div", { className: iframeClasses, children: (0, jsx_runtime_1.jsx)(NotFoundPage_1.NotFoundPage, {}) })) : ((0, jsx_runtime_1.jsx)("iframe", { className: iframeClasses, sandbox: "allow-scripts allow-same-origin allow-modals allow-popups", referrerPolicy: "strict-origin-when-cross-origin", allow: "\r\n            accelerometer 'none';\r\n            camera 'none';\r\n            encrypted-media;\r\n            fullscreen;\r\n            picture-in-picture;\r\n            geolocation 'none';\r\n            gyroscope 'none';\r\n            magnetometer 'none';\r\n            microphone 'none';\r\n            midi 'none';\r\n            payment 'none';\r\n            usb 'none';\r\n          ", id: "output-frame", title: "HTML Output Preview", ref: output, onLoad: iframeReload })) }), !isPreviewMode && ((0, jsx_runtime_1.jsx)(ResizableWithHandle_1.default, { "data-testid": "proj-console-container", handleDirection: "top", defaultHeight: "50%", className: styles_module_scss_1.default.resizeContainer, handleClassName: styles_module_scss_1.default.resizeHandleContainer, children: (0, jsx_runtime_1.jsx)(OutputTabPanel_1.OutputTabPanel, { title: "Console", icon: console_svg_1.default, readOnly: readOnly, children: (0, jsx_runtime_1.jsx)(HtmlConsole_1.default, { consoleLogs: consoleLogs }) }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.htmlrunnerContainer, children: [(0, jsx_runtime_1.jsx)(OutputTabPanel_1.OutputTabPanel, { title: "Preview", icon: preview_svg_1.default, readOnly: readOnly, extraTabContent: codeHasBeenRun && openInNewTabLink, tabPanelClassName: styles_module_scss_1.default.previewHtml, children: error ? ((0, jsx_runtime_1.jsx)("div", { className: iframeClasses, children: (0, jsx_runtime_1.jsx)(NotFoundPage_1.NotFoundPage, {}) })) : ((0, jsx_runtime_1.jsx)("iframe", { className: iframeClasses, sandbox: "allow-scripts allow-same-origin allow-modals allow-popups allow-popups-to-escape-sandbox", referrerPolicy: "strict-origin-when-cross-origin", allow: "\r\n            accelerometer 'none';\r\n            camera 'none';\r\n            encrypted-media;\r\n            fullscreen;\r\n            picture-in-picture;\r\n            geolocation 'none';\r\n            gyroscope 'none';\r\n            magnetometer 'none';\r\n            microphone 'none';\r\n            midi 'none';\r\n            payment 'none';\r\n            usb 'none';\r\n          ", id: "output-frame", title: "HTML Output Preview", ref: output, onLoad: iframeReload, src: "about:blank" }, iframeKey)) }), !isPreviewMode && ((0, jsx_runtime_1.jsx)(ResizableWithHandle_1.default, { "data-testid": "proj-console-container", handleDirection: "top", defaultHeight: "50%", className: styles_module_scss_1.default.resizeContainer, handleClassName: styles_module_scss_1.default.resizeHandleContainer, children: (0, jsx_runtime_1.jsx)(OutputTabPanel_1.OutputTabPanel, { title: "Console", icon: console_svg_1.default, readOnly: readOnly, children: (0, jsx_runtime_1.jsx)(HtmlConsole_1.default, { consoleLogs: consoleLogs }) }) }))] }));
 }
 exports["default"] = HtmlRunner;
 
@@ -369504,6 +369803,7 @@ const node_html_parser_1 = __webpack_require__(36192);
 const ProjectTypes_1 = __webpack_require__(27130);
 const binaryStore_1 = __webpack_require__(5060);
 const projectHelpers_1 = __webpack_require__(2610);
+const helpers_1 = __webpack_require__(1108);
 /** Normalizes CSS paths
  * Treats paths without leading / or ./ or ../ as relative to current file
  * E.g. 'image.png' will be treated as './image.png'
@@ -369557,9 +369857,7 @@ const getMimeType = (filePath, fallback = "application/octet-stream") => {
 };
 /** Check if a URL is external, blob, or data */
 const isExternalOrDataUrl = (url) => {
-    return (url.startsWith("blob:") ||
-        /^(https?:)?\/\//.test(url) ||
-        url.startsWith("data:"));
+    return (url.startsWith("blob:") || (0, helpers_1.isExternalUrl)(url) || url.startsWith("data:"));
 };
 async function replaceAsync(input, regex, replacer) {
     let result = "";
@@ -369736,7 +370034,12 @@ async function rewriteSources(indexPage, components, baseFilePath, propName, blo
     const nodes = indexPage.querySelectorAll(`[${propName}]`);
     for (const node of nodes) {
         const raw = node.getAttribute(propName);
-        if (!raw || isExternalOrDataUrl(raw))
+        if (!raw)
+            continue;
+        // For external links with target="_blank", add noopener and noreferrer for security
+        if ((0, helpers_1.isExternalUrl)(raw) && node.getAttribute("target") === "_blank")
+            node.setAttribute("rel", "noopener noreferrer");
+        if (isExternalOrDataUrl(raw))
             continue;
         if ((0, projectHelpers_1.parseFileName)(raw).extension === ProjectTypes_1.ProjectFileExtension.HTML &&
             propName === "href") {
@@ -369789,7 +370092,7 @@ async function resolveAndRewriteHtmlImports(html, projectComponents, baseFilePat
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.getFilenameFromIFrame = exports.getEntryPoint = exports.DEFAULT_ENTRY_FILE_PATH = exports.DEFAULT_ENTRY_FILE_NAME = void 0;
+exports.isExternalUrl = exports.getFilenameFromIFrame = exports.getEntryPoint = exports.DEFAULT_ENTRY_FILE_PATH = exports.DEFAULT_ENTRY_FILE_NAME = void 0;
 const ProjectTypes_1 = __webpack_require__(27130);
 exports.DEFAULT_ENTRY_FILE_NAME = "index.html";
 exports.DEFAULT_ENTRY_FILE_PATH = `/${exports.DEFAULT_ENTRY_FILE_NAME}`;
@@ -369800,6 +370103,10 @@ const getEntryPoint = (components, filePath) => {
 exports.getEntryPoint = getEntryPoint;
 const getFilenameFromIFrame = (iframe) => iframe?.querySelector("meta[filename]")?.getAttribute("filename") ?? null;
 exports.getFilenameFromIFrame = getFilenameFromIFrame;
+const isExternalUrl = (url) => {
+    return /^(https?:)?\/\//.test(url);
+};
+exports.isExternalUrl = isExternalUrl;
 
 
 /***/ }),
@@ -370111,7 +370418,7 @@ const PyodideRunner = ({ active, packageApiUrl, }) => {
         console.warn("PyodideWorker is not initialized");
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.pythonrunnerContainer, styles_module_scss_1.default.pyodiderunner, active && styles_module_scss_1.default.active), children: [(0, jsx_runtime_1.jsxs)(OutputTabPanel_1.OutputTabPanel, { title: "Terminal", icon: console_svg_1.default, readOnly: readOnly, children: [(0, jsx_runtime_1.jsx)(ErrorMessage_1.default, {}), (0, jsx_runtime_1.jsx)("pre", { className: styles_module_scss_1.default.console, onClick: consoleInput_1.shiftFocusToInput, ref: output })] }), (0, jsx_runtime_1.jsx)(ResizableWithHandle_1.default, { "data-testid": "proj-console-container", handleDirection: "top", defaultHeight: "50%", className: styles_module_scss_1.default.resizeContainer, handleClassName: styles_module_scss_1.default.resizeHandleContainer, children: (0, jsx_runtime_1.jsx)(OutputTabPanel_1.OutputTabPanel, { title: "Visual output", icon: preview_svg_1.default, readOnly: readOnly, children: (0, jsx_runtime_1.jsx)(VisualOutputPane_1.default, { visuals: visuals, setVisuals: setVisuals }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.pythonrunnerContainer, styles_module_scss_1.default.pyodiderunner, active && styles_module_scss_1.default.active), children: [(0, jsx_runtime_1.jsxs)(OutputTabPanel_1.OutputTabPanel, { title: "Terminal", icon: console_svg_1.default, readOnly: readOnly, children: [(0, jsx_runtime_1.jsx)(ErrorMessage_1.default, {}), (0, jsx_runtime_1.jsx)("pre", { className: styles_module_scss_1.default.console, onClick: consoleInput_1.shiftFocusToInput, ref: output })] }), (0, jsx_runtime_1.jsx)(ResizableWithHandle_1.default, { "data-testid": "proj-console-container", handleDirection: "top", defaultHeight: "50%", className: styles_module_scss_1.default.resizeContainer, handleClassName: styles_module_scss_1.default.resizeHandleContainer, children: (0, jsx_runtime_1.jsx)(OutputTabPanel_1.OutputTabPanel, { title: "VNC", icon: preview_svg_1.default, readOnly: readOnly, children: (0, jsx_runtime_1.jsx)(VisualOutputPane_1.default, { visuals: visuals, setVisuals: setVisuals }) }) })] }));
 };
 exports["default"] = PyodideRunner;
 
@@ -370131,6 +370438,7 @@ const react_1 = __webpack_require__(51649);
 const highcharts_1 = __importDefault(__webpack_require__(14783));
 const plotly_js_1 = __importDefault(__webpack_require__(28850));
 const styles_module_scss_1 = __importDefault(__webpack_require__(12914));
+const VisualOutputPaneEmpty_1 = __importDefault(__webpack_require__(93290));
 const VisualOutputPane = ({ visuals, setVisuals }) => {
     const output = (0, react_1.useRef)(null);
     const showVisual = (0, react_1.useCallback)((visual, output) => {
@@ -370192,7 +370500,7 @@ const VisualOutputPane = ({ visuals, setVisuals }) => {
             setVisuals((visuals) => showVisuals(visuals, output));
         }
     }, [visuals, setVisuals, showVisuals]);
-    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.visualOutput, children: (0, jsx_runtime_1.jsx)("div", { ref: output, className: styles_module_scss_1.default.pythonGraphic }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.visualOutput, children: visuals.length !== 0 ? ((0, jsx_runtime_1.jsx)("div", { ref: output, className: styles_module_scss_1.default.pythonGraphic })) : ((0, jsx_runtime_1.jsx)(VisualOutputPaneEmpty_1.default, {})) }));
 };
 const elementFromProps = (map) => {
     const tag = map.get("tag");
@@ -370211,6 +370519,27 @@ const elementFromProps = (map) => {
 exports["default"] = VisualOutputPane;
 
 
+/***/ }),
+
+/***/ 93290:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+const jsx_runtime_1 = __webpack_require__(74848);
+const styles_module_scss_1 = __importDefault(__webpack_require__(38231));
+const monitor_svg_1 = __importDefault(__webpack_require__(36311));
+const SvgIcon_1 = __webpack_require__(82917);
+const Text_1 = __webpack_require__(82803);
+const VisualOutputPaneEmpty = () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, children: [(0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: monitor_svg_1.default, size: 32, "aria-hidden": "true", focusable: "false" }), (0, jsx_runtime_1.jsx)(Text_1.Text, { size: 20, className: styles_module_scss_1.default.title, weight: "bold", children: "View your app\u2019s desktop screen output" }), (0, jsx_runtime_1.jsx)(Text_1.Text, { size: 12, children: "No VNC browser is currently running with compatible ports available to view." })] }));
+};
+exports["default"] = VisualOutputPaneEmpty;
+
+
 /***/ }),
 
 /***/ 85799:
@@ -371613,16 +371942,55 @@ const SvgIcon_1 = __webpack_require__(82917);
 const arrow_right_svg_1 = __importDefault(__webpack_require__(17297));
 const styles_module_scss_1 = __importDefault(__webpack_require__(51191));
 const ContextMenu_1 = __importDefault(__webpack_require__(39179));
+const Tooltip_1 = __importDefault(__webpack_require__(26982));
+const useHover_1 = __webpack_require__(78556);
 const Dropdown = (props) => {
     const { ButtonIcon, buttonClassname, menuOptions, menuPosition, ariaLabel } = props;
     const { direction = "bottom", align = "center" } = menuPosition || {};
     const [isOpen, setOpen] = (0, react_1.useState)(false);
     const buttonRef = (0, react_1.useRef)(null);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", "aria-label": ariaLabel, className: (0, classnames_1.default)(buttonClassname, isOpen && styles_module_scss_1.default.buttonActive), onClick: () => setOpen((prev) => !prev), ref: buttonRef, children: [ButtonIcon && ((0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: ButtonIcon, size: 16, "aria-hidden": "true", focusable: "false" })), (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { className: (0, classnames_1.default)(styles_module_scss_1.default.arrowIcon, isOpen && styles_module_scss_1.default.arrowIconOpen), style: { rotate: `${isOpen ? "-" : ""}90deg` }, SvgElement: arrow_right_svg_1.default, size: 8, "aria-hidden": "true", focusable: "false" })] }), (0, jsx_runtime_1.jsx)(ContextMenu_1.default, { anchorRef: buttonRef, menuOptions: menuOptions, opened: isOpen, onClose: () => setOpen(false), align: align, direction: direction, gap: 4 })] }));
+    const { hovered, hoverProps } = (0, useHover_1.useHover)();
+    return ((0, jsx_runtime_1.jsxs)("div", { ...hoverProps, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", "aria-label": ariaLabel, className: (0, classnames_1.default)(buttonClassname, isOpen && styles_module_scss_1.default.buttonActive), onClick: () => setOpen((prev) => !prev), ref: buttonRef, children: [ButtonIcon && ((0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: ButtonIcon, size: 16, "aria-hidden": "true", focusable: "false" })), (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { className: (0, classnames_1.default)(styles_module_scss_1.default.arrowIcon, isOpen && styles_module_scss_1.default.arrowIconOpen), style: { rotate: `${isOpen ? "-" : ""}90deg` }, SvgElement: arrow_right_svg_1.default, size: 8, "aria-hidden": "true", focusable: "false" })] }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Upload files", visible: hovered && !isOpen, position: "fixed" }), (0, jsx_runtime_1.jsx)(ContextMenu_1.default, { anchorRef: buttonRef, menuOptions: menuOptions, opened: isOpen, onClose: () => setOpen(false), align: align, direction: direction, gap: 4 })] }));
 };
 exports["default"] = Dropdown;
 
 
+/***/ }),
+
+/***/ 20186:
+/***/ (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 SidebarPanel_1 = __importDefault(__webpack_require__(83617));
+const styles_module_scss_1 = __importDefault(__webpack_require__(99016));
+const PANEL_FRACTION = 0.33;
+const getPanelWidth = () => `${Math.round(window.innerWidth * PANEL_FRACTION)}px`;
+const getMaxPanelWidth = () => `${Math.round(window.innerWidth * 2 * PANEL_FRACTION)}px`;
+const CurriculumPanel = ({ curriculumContent, }) => {
+    const [defaultWidth, setDefaultWidth] = (0, react_1.useState)(getPanelWidth);
+    const [maxWidth, setMaxWidth] = (0, react_1.useState)(getMaxPanelWidth);
+    (0, react_1.useEffect)(() => {
+        const update = () => {
+            setDefaultWidth(getPanelWidth());
+            setMaxWidth(getMaxPanelWidth());
+        };
+        window.addEventListener("resize", update);
+        return () => window.removeEventListener("resize", update);
+    }, []);
+    if (!curriculumContent) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(SidebarPanel_1.default, { panelContentClassName: styles_module_scss_1.default.panelContent, className: styles_module_scss_1.default.curriculumPanel, defaultWidth: defaultWidth, maxWidth: maxWidth, children: curriculumContent }));
+};
+exports["default"] = CurriculumPanel;
+
+
 /***/ }),
 
 /***/ 7802:
@@ -371693,10 +372061,15 @@ const FileTreeContext_1 = __webpack_require__(5323);
 const ProjectTypes_1 = __webpack_require__(27130);
 const Text_1 = __webpack_require__(82803);
 const stores_1 = __webpack_require__(32132);
+const Tooltip_1 = __importDefault(__webpack_require__(26982));
+const useHover_1 = __webpack_require__(78556);
 const FileTreeActions = ({ hasExpandedNodes, }) => {
     const { expandAll, collapseAll, createComponent, importFiles, importFolder } = (0, react_1.useContext)(FileTreeContext_1.TreeContext);
     const isReadOnly = (0, stores_1.useAppSelector)((state) => state.editor.readOnly);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.fileTreeActions, children: [hasExpandedNodes ? ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Collapse all folders", onClick: collapseAll, className: styles_module_scss_1.default.iconButton, children: (0, jsx_runtime_1.jsx)(minus_circle_svg_1.default, { "aria-hidden": "true", focusable: "false" }) })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Expand all folders", onClick: expandAll, className: styles_module_scss_1.default.iconButton, children: (0, jsx_runtime_1.jsx)(plus_circle_svg_1.default, { "aria-hidden": "true", focusable: "false" }) })), (0, jsx_runtime_1.jsx)(Text_1.Text, { size: 12, weight: "medium", className: styles_module_scss_1.default.fileTreeActionsLabel, children: "Project files" }), !isReadOnly && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Add folder", onClick: () => createComponent(ProjectTypes_1.ProjectComponentType.DIR), className: (0, classnames_1.default)([styles_module_scss_1.default.iconButtonFilled, styles_module_scss_1.default.iconButton]), children: (0, jsx_runtime_1.jsx)(add_folder_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Add file", onClick: () => createComponent(ProjectTypes_1.ProjectComponentType.FILE), className: (0, classnames_1.default)([styles_module_scss_1.default.iconButtonFilled, styles_module_scss_1.default.iconButton]), children: (0, jsx_runtime_1.jsx)(add_file_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)(ImportButton_1.ImportButton, { importFiles: importFiles, importFolder: importFolder })] }))] }));
+    const { hovered: toggleHovered, hoverProps: toggleHoverProps } = (0, useHover_1.useHover)();
+    const { hovered: addFolderHovered, hoverProps: addFolderHoverProps } = (0, useHover_1.useHover)();
+    const { hovered: addFileHovered, hoverProps: addFileHoverProps } = (0, useHover_1.useHover)();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.fileTreeActions, children: [hasExpandedNodes ? ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.tooltipWrapper, ...toggleHoverProps, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Collapse all folders", onClick: collapseAll, className: styles_module_scss_1.default.iconButton, children: (0, jsx_runtime_1.jsx)(minus_circle_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Collapse all folders", visible: toggleHovered, position: "fixed" })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.tooltipWrapper, ...toggleHoverProps, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Expand all folders", onClick: expandAll, className: styles_module_scss_1.default.iconButton, children: (0, jsx_runtime_1.jsx)(plus_circle_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Expand all folders", visible: toggleHovered, position: "fixed" })] })), (0, jsx_runtime_1.jsx)(Text_1.Text, { size: 12, weight: "medium", className: styles_module_scss_1.default.fileTreeActionsLabel, children: "Project files" }), !isReadOnly && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.tooltipWrapper, ...addFolderHoverProps, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Add folder", onClick: () => createComponent(ProjectTypes_1.ProjectComponentType.DIR), className: (0, classnames_1.default)([styles_module_scss_1.default.iconButtonFilled, styles_module_scss_1.default.iconButton]), children: (0, jsx_runtime_1.jsx)(add_folder_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Add folder", visible: addFolderHovered, position: "fixed" })] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.tooltipWrapper, ...addFileHoverProps, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Add file", onClick: () => createComponent(ProjectTypes_1.ProjectComponentType.FILE), className: (0, classnames_1.default)([styles_module_scss_1.default.iconButtonFilled, styles_module_scss_1.default.iconButton]), children: (0, jsx_runtime_1.jsx)(add_file_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Add file", visible: addFileHovered, position: "fixed" })] }), (0, jsx_runtime_1.jsx)(ImportButton_1.ImportButton, { importFiles: importFiles, importFolder: importFolder })] }))] }));
 };
 exports.FileTreeActions = FileTreeActions;
 
@@ -371841,9 +372214,15 @@ const DeleteOption_1 = __webpack_require__(50185);
 const react_redux_1 = __webpack_require__(14062);
 const EditorSlice_1 = __webpack_require__(68512);
 const types_1 = __webpack_require__(92932);
+const createProjectArchive_1 = __webpack_require__(46514);
+const js_convert_case_1 = __webpack_require__(61647);
+const stores_1 = __webpack_require__(32132);
+const file_saver_1 = __importDefault(__webpack_require__(4213));
+const sendToast_1 = __webpack_require__(50068);
 const ItemContextMenu = ({ item, menuPosition, isOpened, onClose, openImportFileDialog, }) => {
     const dispatch = (0, react_redux_1.useDispatch)();
     const { startRenaming, createComponent, downloadFile, removeComponent } = (0, react_1.useContext)(FileTreeContext_1.TreeContext);
+    const project = (0, stores_1.useAppSelector)((state) => state.editor.project);
     const handleDelete = ({ isFolder }) => {
         dispatch((0, EditorSlice_1.showModal)({
             modal: types_1.ModalType.REMOVE_ITEM,
@@ -371877,6 +372256,25 @@ const ItemContextMenu = ({ item, menuPosition, isOpened, onClose, openImportFile
             icon: (0, jsx_runtime_1.jsx)(OptionIcon_1.OptionIcon, { icon: upload_file_svg_1.default }),
             action: openImportFileDialog,
         },
+        {
+            text: "Download Folder",
+            icon: (0, jsx_runtime_1.jsx)(OptionIcon_1.OptionIcon, { icon: download_svg_1.default }),
+            // Sync action that fires-and-handles its own async work. `ContextMenu`
+            // calls `option.action?.()` without awaiting, so we must catch errors
+            // here ourselves to avoid an unhandled promise rejection.
+            action: () => {
+                const folder = item.getItemData();
+                const fileName = `${(0, js_convert_case_1.toSnakeCase)(project.name || "untitled_project")}_${(0, js_convert_case_1.toSnakeCase)(folder.name || "folder")}.zip`;
+                const downloadFolder = async () => {
+                    const { zipBlob: content } = await (0, createProjectArchive_1.createProjectArchive)(project, folder);
+                    file_saver_1.default.saveAs(content, fileName);
+                };
+                downloadFolder().catch((err) => {
+                    console.error("Download Folder failed:", err);
+                    (0, sendToast_1.showError)(`Failed to download folder "${folder.name}".`);
+                });
+            },
+        },
         {
             text: (0, jsx_runtime_1.jsx)(DeleteOption_1.DeleteOption, {}),
             action: () => handleDelete({ isFolder: true }),
@@ -372523,12 +372921,21 @@ const home_svg_1 = __importDefault(__webpack_require__(69046));
 const AuthContext_1 = __webpack_require__(55471);
 // commented out for now as it should be introduced in the later phases
 // import SettingsPanel from "./SettingsPanel/SettingsPanel";
-// import ActivityIcon from "../../../assets/icons/activity.svg";
+const activity_svg_1 = __importDefault(__webpack_require__(50424));
 // import FontIcon from "../../../assets/icons/font.svg";
 // import PlaygroundIcon from "../../../assets/icons/playground.svg";
 // import ThemeIcon from "../../../assets/icons/theme.svg";
 const styles_module_scss_1 = __importDefault(__webpack_require__(21852));
-const getSidebarOptions = (initials, homeAction, isCodeVisible) => [
+const CurriculumPanel_1 = __importDefault(__webpack_require__(20186));
+const types_1 = __webpack_require__(92932);
+const EditorSlice_1 = __webpack_require__(68512);
+const react_redux_1 = __webpack_require__(14062);
+var PanelNames;
+(function (PanelNames) {
+    PanelNames["FILES"] = "files";
+    PanelNames["CURRICULUM"] = "activity";
+})(PanelNames || (PanelNames = {}));
+const getSidebarOptions = (initials, homeAction, isCodeVisible, curriculumComponent) => [
     {
         name: "home",
         icon: () => (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: home_svg_1.default, size: 22 }),
@@ -372539,7 +372946,7 @@ const getSidebarOptions = (initials, homeAction, isCodeVisible) => [
     ...(isCodeVisible
         ? [
             {
-                name: "files",
+                name: PanelNames.FILES,
                 icon: () => (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: folder_svg_1.default, size: 24 }),
                 title: "Files",
                 position: "top",
@@ -372547,6 +372954,17 @@ const getSidebarOptions = (initials, homeAction, isCodeVisible) => [
             },
         ]
         : []),
+    ...(!!curriculumComponent
+        ? [
+            {
+                name: PanelNames.CURRICULUM,
+                icon: () => (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: activity_svg_1.default, size: 24 }),
+                title: "Curriculum",
+                position: "top",
+                panel: () => ((0, jsx_runtime_1.jsx)(CurriculumPanel_1.default, { curriculumContent: curriculumComponent })),
+            },
+        ]
+        : []),
     ...(initials?.length
         ? [
             {
@@ -372558,20 +372976,32 @@ const getSidebarOptions = (initials, homeAction, isCodeVisible) => [
         ]
         : []),
 ];
-const Sidebar = ({ options = [] }) => {
+const Sidebar = ({ options = [], curriculumComponent = null, }) => {
+    const dispatch = (0, react_redux_1.useDispatch)();
     const initials = (0, stores_1.useAppSelector)((state) => state.user.initials);
     const isCodeVisible = (0, stores_1.useAppSelector)((state) => state.editor.isCodeVisible);
+    const curriculumDisplayMode = (0, stores_1.useAppSelector)((state) => state.editor.curriculumDisplayMode);
     const { onHome } = (0, AuthContext_1.useAuthActions)();
-    const sideBarOptions = getSidebarOptions(initials, onHome, isCodeVisible);
+    const sideBarOptions = getSidebarOptions(initials, onHome, isCodeVisible, curriculumComponent);
     const menuOptions = sideBarOptions.filter((option) => options.includes(option.name));
-    const [option, setOption] = (0, react_1.useState)(null);
+    const [option, setOption] = (0, react_1.useState)(curriculumDisplayMode !== types_1.CurriculumDisplayMode.HIDDEN
+        ? PanelNames.CURRICULUM
+        : null);
     const toggleOption = (newOption) => {
         // when toggle the same option, close panel
         if (option === newOption) {
             setOption(null);
+            // State of curriculum control must be set because it can be changed from contentSection option
+            if (newOption === PanelNames.CURRICULUM) {
+                dispatch((0, EditorSlice_1.setCurriculumDisplayMode)(types_1.CurriculumDisplayMode.HIDDEN));
+            }
         }
         else {
             setOption(newOption);
+            // State of curriculum control must be set because it can be changed from contentSection option
+            if (newOption === PanelNames.CURRICULUM) {
+                dispatch((0, EditorSlice_1.setCurriculumDisplayMode)(types_1.CurriculumDisplayMode.NORMAL));
+            }
         }
     };
     const activeOption = menuOptions.find((opt) => opt.name === option);
@@ -372621,20 +373051,27 @@ const classnames_1 = __importDefault(__webpack_require__(46942));
 const styles_module_scss_1 = __importDefault(__webpack_require__(21852));
 const UserMenu_1 = __importDefault(__webpack_require__(2957));
 const backgroundColors = [
-    'D7F9F4', '43D6B9',
-    '0D9C90', 'E5F8FF',
-    'FEEFEE', 'F37C6F',
-    'FFF3E8', 'F9B88C',
-    'FA7815', 'FCE688'
+    "D7F9F4",
+    "43D6B9",
+    "0D9C90",
+    "E5F8FF",
+    "FEEFEE",
+    "F37C6F",
+    "FFF3E8",
+    "F9B88C",
+    "FA7815",
+    "FCE688",
 ];
 const SidebarBarOption = (props) => {
-    const { Icon, isActive, name, title, toggleOption, buttonText, isUser, action } = props;
+    const { Icon, isActive, name, title, toggleOption, buttonText, isUser, action, } = props;
     const userId = (0, stores_1.useAppSelector)((state) => state.user.userId);
     const isFacilitator = (0, stores_1.useAppSelector)((state) => state.user.isFacilitator);
     const avatarSrc = (0, stores_1.useAppSelector)((state) => state.user.avatarSrc);
     const avatarStyle = isUser
         ? isFacilitator
-            ? { background: 'linear-gradient(90deg,#d7f9f4,#fff9e2,#fff3e8,#e5f8ff,#d7f9f4)' }
+            ? {
+                background: "linear-gradient(90deg,#d7f9f4,#fff9e2,#fff3e8,#e5f8ff,#d7f9f4)",
+            }
             : { backgroundColor: `#${backgroundColors[(userId ?? 0) % 10]}` }
         : null;
     const [isMenuOpen, setIsMenuOpen] = (0, react_1.useState)(false);
@@ -373267,7 +373704,7 @@ const DefaultMZCriteria_1 = __webpack_require__(29441);
 const WebComponentCustomEvents_1 = __webpack_require__(53841);
 const styles_module_scss_1 = __importDefault(__webpack_require__(93105));
 const stores_1 = __webpack_require__(32132);
-const WebComponentProject = ({ nameEditable = false, sidebarOptions = [], packageApiUrl, }) => {
+const WebComponentProject = ({ nameEditable = false, sidebarOptions = [], packageApiUrl, curriculumComponent = null, }) => {
     const loading = (0, stores_1.useAppSelector)((state) => state.editor.loading);
     const project = (0, stores_1.useAppSelector)((state) => state.editor.project);
     const outputOnly = (0, stores_1.useAppSelector)((state) => state.editor.isOutputOnly);
@@ -373303,7 +373740,7 @@ const WebComponentProject = ({ nameEditable = false, sidebarOptions = [], packag
             document.dispatchEvent((0, WebComponentCustomEvents_1.runCompletedEvent)(payload));
         }
     }, [codeRunTriggered, codeHasRun, outputOnly, error]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: outputOnly ? ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.outputPreview, children: loading === "success" && (0, jsx_runtime_1.jsx)(Output_1.default, { packageApiUrl: packageApiUrl }) })) : ((0, jsx_runtime_1.jsx)(Project_1.default, { nameEditable: nameEditable, sidebarOptions: sidebarOptions, packageApiUrl: packageApiUrl })) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: outputOnly ? ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.outputPreview, children: loading === "success" && (0, jsx_runtime_1.jsx)(Output_1.default, { packageApiUrl: packageApiUrl }) })) : ((0, jsx_runtime_1.jsx)(Project_1.default, { curriculumComponent: curriculumComponent, nameEditable: nameEditable, sidebarOptions: sidebarOptions, packageApiUrl: packageApiUrl })) }));
 };
 exports["default"] = WebComponentProject;
 
@@ -373415,7 +373852,7 @@ const stores_1 = __webpack_require__(32132);
 const SaveBeforeLeave_1 = __webpack_require__(47318);
 const selectors_1 = __webpack_require__(43551);
 const WebComponentLoader = (props) => {
-    const { locale = "en", projectNameEditable = true, readOnly = false, sidebarOptions = [], project: projectData, saveProject, isSaving, loadProjectContent, projectContent = null, starterCodeContent = null, isLoading = false, packageApiUrl, user, isCodeVisible = true, isSharedProject = false, shareLinks, isContentLoaded = null, isSaveSuccess = null, loadTemplateProjectData, isTemplateDataLoaded = false, } = props;
+    const { locale = "en", projectNameEditable = true, readOnly = false, sidebarOptions = [], project: projectData, saveProject, isSaving, loadProjectContent, projectContent = null, starterCodeContent = null, isLoading = false, packageApiUrl, user, isCodeVisible = true, isSharedProject = false, shareLinks, isContentLoaded = null, isSaveSuccess = null, loadTemplateProjectData, isTemplateDataLoaded = false, curriculum, } = props;
     const dispatch = (0, react_redux_1.useDispatch)();
     const { t } = (0, react_i18next_1.useTranslation)();
     const [searchParams] = (0, react_router_dom_1.useSearchParams)();
@@ -373505,6 +373942,9 @@ const WebComponentLoader = (props) => {
     (0, react_1.useEffect)(() => {
         dispatch((0, EditorSlice_1.setReadOnly)(readOnly));
     }, [readOnly, dispatch]);
+    (0, react_1.useEffect)(() => {
+        dispatch((0, EditorSlice_1.setCurriculumDisplayMode)(curriculum?.curriculumDisplayMode ?? types_1.CurriculumDisplayMode.HIDDEN));
+    }, [curriculum, dispatch]);
     (0, react_1.useEffect)(() => {
         if (isCodeVisible !== undefined) {
             dispatch((0, EditorSlice_1.setCodeVisibility)({ isVisible: isCodeVisible }));
@@ -373555,18 +373995,11 @@ const WebComponentLoader = (props) => {
     const renderSuccessState = () => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(settings_1.SettingsContext.Provider, { value: {
                 theme: themeDefault,
                 fontSize: "small",
-            }, children: [(0, jsx_runtime_1.jsx)(ToastMessages_1.ToastMessagesProvider, {}), (0, jsx_runtime_1.jsxs)("div", { id: "textjam-root", className: `editor-shell --${themeDefault}`, children: [(0, jsx_runtime_1.jsx)(WebComponentProject_1.default, { nameEditable: projectNameEditable, sidebarOptions: sidebarOptions, packageApiUrl: packageApiUrl }), errorModalShowing && (0, jsx_runtime_1.jsx)(ErrorModal_1.default, {}), modal, shouldBlockNavigation && (0, jsx_runtime_1.jsx)(SaveBeforeLeave_1.SaveBeforeLeaveModal, {})] })] }) }));
+            }, children: [(0, jsx_runtime_1.jsx)(ToastMessages_1.ToastMessagesProvider, {}), (0, jsx_runtime_1.jsxs)("div", { id: "textjam-root", className: `editor-shell --${themeDefault}`, children: [(0, jsx_runtime_1.jsx)(WebComponentProject_1.default, { curriculumComponent: curriculum?.curriculumContent ?? null, nameEditable: projectNameEditable, sidebarOptions: sidebarOptions, packageApiUrl: packageApiUrl }), errorModalShowing && (0, jsx_runtime_1.jsx)(ErrorModal_1.default, {}), modal, shouldBlockNavigation && (0, jsx_runtime_1.jsx)(SaveBeforeLeave_1.SaveBeforeLeaveModal, {})] })] }) }));
     const renderFailedState = () => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("p", { children: t("webComponent.failed") }) }));
     const renderLoadingState = () => (0, jsx_runtime_1.jsx)(Loading_1.default, {});
-    if (loading === types_1.LoadingState.SUCCESS) {
-        return renderSuccessState();
-    }
-    else if (loading === types_1.LoadingState.FAILED) {
-        return renderFailedState();
-    }
-    else {
-        return renderLoadingState();
-    }
+    const isLoadingState = ![types_1.LoadingState.SUCCESS, types_1.LoadingState.FAILED].includes(loading);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [loading === types_1.LoadingState.SUCCESS && renderSuccessState(), loading === types_1.LoadingState.FAILED && renderFailedState(), isLoadingState && renderLoadingState()] }));
 };
 exports["default"] = WebComponentLoader;
 
@@ -374179,10 +374612,10 @@ const getUniqueNameFromItem = (childrenNames, baseName, extension = "") => {
     // if there is a conflict, use canonical lowercase for the duplicate
     const normalizedBaseName = baseName.toLowerCase();
     let counter = 1;
-    let candidate = `${normalizedBaseName}(${counter})`;
+    let candidate = `${normalizedBaseName} (${counter})`;
     while (existingNamesLower.has(fullName(candidate).toLowerCase())) {
         counter++;
-        candidate = `${normalizedBaseName}(${counter})`;
+        candidate = `${normalizedBaseName} (${counter})`;
     }
     return candidate;
 };
@@ -375242,7 +375675,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.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.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.revertProject = exports.setShouldBypassCachedDraft = void 0;
+exports.queueBinaryWrites = exports.setCurriculumDisplayMode = exports.revertProject = exports.setShouldBypassCachedDraft = void 0;
 const toolkit_1 = __webpack_require__(12069);
 const ProjectTypes_1 = __webpack_require__(27130);
 const types_1 = __webpack_require__(92932);
@@ -375291,6 +375724,7 @@ exports.editorInitialState = {
     shareLinks: null,
     remixTriggered: false,
     projectNameDraft: null,
+    curriculumDisplayMode: types_1.CurriculumDisplayMode.HIDDEN,
     shouldBypassCachedDraft: false,
 };
 exports.EditorSlice = (0, toolkit_1.createSlice)({
@@ -375414,6 +375848,9 @@ exports.EditorSlice = (0, toolkit_1.createSlice)({
         expireJustLoaded: (state) => {
             state.justLoaded = false;
         },
+        setCurriculumDisplayMode: (state, action) => {
+            state.curriculumDisplayMode = action.payload;
+        },
         setReadOnly: (state, action) => {
             state.readOnly = action.payload;
         },
@@ -375580,7 +376017,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.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.setSharedStatus = _a.setSharedStatus, exports.setCommits = _a.setCommits, exports.setShareLinks = _a.setShareLinks, exports.setCommitIdLoadTriggered = _a.setCommitIdLoadTriggered, exports.setIsLoadingCommit = _a.setIsLoadingCommit, exports.setRemixTriggered = _a.setRemixTriggered, exports.setShouldBypassCachedDraft = _a.setShouldBypassCachedDraft, 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.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.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.setSharedStatus = _a.setSharedStatus, exports.setCommits = _a.setCommits, exports.setShareLinks = _a.setShareLinks, exports.setCommitIdLoadTriggered = _a.setCommitIdLoadTriggered, exports.setIsLoadingCommit = _a.setIsLoadingCommit, exports.setRemixTriggered = _a.setRemixTriggered, exports.setShouldBypassCachedDraft = _a.setShouldBypassCachedDraft, exports.revertProject = _a.revertProject, exports.setCurriculumDisplayMode = _a.setCurriculumDisplayMode;
 exports.queueBinaryWrites = (0, toolkit_1.createAction)("editor/queueBinaryWrites");
 exports["default"] = exports.EditorSlice.reducer;
 
@@ -375720,6 +376157,7 @@ const utils_1 = __webpack_require__(33321);
 const sendToast_1 = __webpack_require__(50068);
 const constants_1 = __webpack_require__(16287);
 const fileValidation_1 = __webpack_require__(59615);
+const macSystemFiles_1 = __webpack_require__(18213);
 const selectComponents = (state) => {
     return state.editor.project.components ?? [];
 };
@@ -375791,23 +376229,27 @@ exports.fsRemove = fsRemove;
 const fsImportFiles = ({ files, parentId }) => async (dispatch, getState) => {
     const state = getState();
     const components = selectComponents(state);
-    if (!(0, utils_1.validateProjectFilesCount)(components, files.length)) {
+    // Ignore macOS system files (__MACOSX/, .DS_Store)
+    const importableFiles = (0, macSystemFiles_1.filterOutMacSystemFiles)(files);
+    if (importableFiles.length === 0)
+        return;
+    if (!(0, utils_1.validateProjectFilesCount)(components, importableFiles.length)) {
         (0, sendToast_1.showError)(filesCountErrorMessage);
         return;
     }
-    const { validFiles, importErrors } = (0, fileValidation_1.validateFiles)(files);
+    const { validFiles, importErrors } = (0, fileValidation_1.validateFiles)(importableFiles);
     const hasDuplicates = hasCaseInsensitiveDuplicateNames(validFiles);
     for (const error of importErrors) {
         (0, sendToast_1.showError)(error.reason);
     }
     if (validFiles.length > 0) {
-        (0, sendToast_1.showSuccess)(`Selected files uploaded successfully. ${validFiles.length} of ${files.length} file(s) uploaded.`);
+        (0, sendToast_1.showSuccess)(`Selected files uploaded successfully. ${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. ${files.length} file(s) failed to upload.`);
+        (0, sendToast_1.showError)(`Selected files couldn’t be uploaded. ${importableFiles.length} file(s) failed to upload.`);
         return;
     }
     const componentsMap = (0, utils_1.buildComponentsById)(components);
@@ -375824,24 +376266,28 @@ const fsImportFolder = ({ files, parentId }) => async (dispatch, getState) => {
         return;
     const state = getState();
     const components = selectComponents(state);
-    if (!(0, utils_1.validateProjectFilesCount)(components, files.length)) {
+    // Ignore macOS system files (__MACOSX/, .DS_Store)
+    const importableFiles = (0, macSystemFiles_1.filterOutMacSystemFiles)(files);
+    if (importableFiles.length === 0)
+        return;
+    if (!(0, utils_1.validateProjectFilesCount)(components, importableFiles.length)) {
         (0, sendToast_1.showError)(filesCountErrorMessage);
         return;
     }
-    const folderName = files[0]?.webkitRelativePath?.split("/")[0];
-    const { validFiles, importErrors } = (0, fileValidation_1.validateFiles)(files);
+    const folderName = importableFiles[0]?.webkitRelativePath?.split("/")[0];
+    const { validFiles, importErrors } = (0, fileValidation_1.validateFiles)(importableFiles);
     const hasDuplicates = hasCaseInsensitiveDuplicateNames(validFiles);
     for (const error of importErrors) {
         (0, sendToast_1.showError)(error.reason);
     }
     if (validFiles.length > 0) {
-        (0, sendToast_1.showSuccess)(`Folder '${folderName}' upload complete. ${validFiles.length} of ${files.length} file(s) uploaded successfully.`);
+        (0, sendToast_1.showSuccess)(`Folder '${folderName}' upload complete. ${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. ${files.length} file(s) failed to upload.`);
+        (0, sendToast_1.showError)(`'${folderName}' folder couldn't be uploaded. ${importableFiles.length} file(s) failed to upload.`);
         return;
     }
     const componentsMap = (0, utils_1.buildComponentsById)(components);
@@ -375985,7 +376431,7 @@ exports.useAppSelector = react_redux_1.useSelector;
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.LoadingState = exports.SavingState = exports.ModalType = void 0;
+exports.CurriculumDisplayMode = exports.LoadingState = exports.SavingState = exports.ModalType = void 0;
 var ModalType;
 (function (ModalType) {
     ModalType["SHARE_PROJECT"] = "shareProject";
@@ -376010,6 +376456,11 @@ var LoadingState;
     LoadingState["SUCCESS"] = "success";
     LoadingState["FAILED"] = "failed";
 })(LoadingState || (exports.LoadingState = LoadingState = {}));
+var CurriculumDisplayMode;
+(function (CurriculumDisplayMode) {
+    CurriculumDisplayMode["HIDDEN"] = "hidden";
+    CurriculumDisplayMode["NORMAL"] = "normal";
+})(CurriculumDisplayMode || (exports.CurriculumDisplayMode = CurriculumDisplayMode = {}));
 
 
 /***/ }),
@@ -376568,20 +377019,39 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.createProjectArchive = createProjectArchive;
-const jszip_1 = __importDefault(__webpack_require__(71710));
 const ProjectTypes_1 = __webpack_require__(27130);
+const jszip_1 = __importDefault(__webpack_require__(71710));
 const binaryStore_1 = __webpack_require__(5060);
-async function createProjectArchive(project) {
+const projectPath_1 = __webpack_require__(95506);
+async function createProjectArchive(project, folder) {
     let unzipSize = 0;
     const zip = new jszip_1.default();
     await Promise.all(project.components.map(async (component) => {
         if (component.type !== ProjectTypes_1.ProjectComponentType.FILE)
             return;
         const file = component;
-        // remove leading slash for windows compatibility
-        const safePath = file.path.startsWith("/")
-            ? file.path.slice(1)
-            : file.path;
+        // Normalize once; we decide between "everything" and "scope to a
+        // subfolder" by inspecting the normalized folder path.
+        const normalizedFile = (0, projectPath_1.normalizePath)(file.path);
+        const normalizedFolder = folder ? (0, projectPath_1.normalizePath)(folder.path) : null;
+        let safePath;
+        if (normalizedFolder && normalizedFolder !== "/") {
+            // Scoped to a non-root subfolder: include only files within it,
+            // with paths relative to that folder. `stripTopFolder` returns null
+            // when the file is outside the folder and "" when the file path
+            // equals the folder path (skip both).
+            const relative = (0, projectPath_1.stripTopFolder)(normalizedFile, normalizedFolder);
+            if (relative === null || relative === "")
+                return;
+            safePath = relative;
+        }
+        else {
+            // Whole project (no folder, or the root folder "/"). Emit
+            // Windows-friendly entries without a leading "/".
+            if (normalizedFile === "/")
+                return;
+            safePath = normalizedFile.slice(1);
+        }
         const blob = (await binaryStore_1.binaryStore.get(file.id)) ??
             new Blob([file.content], { type: file.mimeType || "text/plain" });
         unzipSize += blob.size;
@@ -376710,57 +377180,6 @@ const downloadProjectFile = async (file, fileName) => {
 exports.downloadProjectFile = downloadProjectFile;
 
 
-/***/ }),
-
-/***/ 31615:
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
-
-
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.matchingRegexes = exports.allowedInternalLinks = exports.allowedExternalLinks = exports.useExternalLinkState = void 0;
-const react_1 = __webpack_require__(51649);
-const react_redux_1 = __webpack_require__(14062);
-const EditorSlice_1 = __webpack_require__(68512);
-const Errors_1 = __webpack_require__(20339);
-const domain = "https://rpf.io/";
-const host = window?.location?.origin || "http://localhost:3011";
-const rpfDomain = new RegExp(`^${domain}`);
-const hostDomain = new RegExp(`^${host}`);
-const allowedInternalLinks = [new RegExp(`^#[a-zA-Z0-9]+`)];
-exports.allowedInternalLinks = allowedInternalLinks;
-const allowedExternalLinks = [rpfDomain, hostDomain];
-exports.allowedExternalLinks = allowedExternalLinks;
-const useExternalLinkState = (showModal) => {
-    const dispatch = (0, react_redux_1.useDispatch)();
-    const [externalLink, setExternalLink] = (0, react_1.useState)(null);
-    const handleAllowedExternalLink = (linkTo) => {
-        setExternalLink(linkTo);
-        dispatch((0, EditorSlice_1.triggerCodeRun)());
-    };
-    const handleRegularExternalLink = (linkTo) => {
-        setExternalLink(null);
-        dispatch((0, EditorSlice_1.setPage)(linkTo));
-        dispatch((0, EditorSlice_1.triggerCodeRun)());
-    };
-    const handleExternalLinkError = () => {
-        dispatch((0, EditorSlice_1.setError)({ type: Errors_1.ErrorType.EXTERNAL_LINK }));
-        showModal();
-    };
-    return {
-        externalLink,
-        setExternalLink,
-        handleAllowedExternalLink,
-        handleRegularExternalLink,
-        handleExternalLinkError,
-    };
-};
-exports.useExternalLinkState = useExternalLinkState;
-const matchingRegexes = (regexArray, testString) => {
-    return regexArray.some((reg) => reg.test(testString));
-};
-exports.matchingRegexes = matchingRegexes;
-
-
 /***/ }),
 
 /***/ 65404:
@@ -376778,6 +377197,7 @@ const ProjectTypes_1 = __webpack_require__(27130);
 const projectHelpers_1 = __webpack_require__(2610);
 const binaryStore_1 = __webpack_require__(5060);
 const projectBinaryIndex_1 = __webpack_require__(3044);
+const macSystemFiles_1 = __webpack_require__(18213);
 function normPath(p) {
     let s = (p || "").replace(/\\/g, "/").replace(/^\/+/, "");
     // remove extra folder in zipball zip
@@ -376804,7 +377224,7 @@ function pushChild(parent, childId) {
         parent.children.push(childId);
 }
 function getCommonRootFolder(entries) {
-    const fileEntries = entries.filter((entry) => !entry.dir);
+    const fileEntries = entries.filter((entry) => !entry.dir && !(0, macSystemFiles_1.isMacSystemFilePath)(entry.name));
     const [firstFileEntry] = fileEntries;
     if (!firstFileEntry)
         return "";
@@ -376839,10 +377259,13 @@ async function loadProjectFromZip(opts) {
     for (const entry of entries) {
         if (entry.dir)
             continue;
-        const normalizedEntryName = normPath(entry.name);
-        const raw = rootPath
-            ? normPath(normalizedEntryName.slice(rootPath.length))
-            : normalizedEntryName;
+        // skip mac system files (__MACOSX/, .DS_Store)
+        if ((0, macSystemFiles_1.isMacSystemFilePath)(entry.name))
+            continue;
+        const normalized = normPath(entry.name);
+        const raw = rootPath && normalized.startsWith(rootPath)
+            ? normalized.slice(rootPath.length)
+            : normalized;
         if (!raw)
             continue;
         const parts = raw.split("/").filter(Boolean);
@@ -376902,6 +377325,34 @@ async function loadProjectFromZip(opts) {
 }
 
 
+/***/ }),
+
+/***/ 18213:
+/***/ ((__unused_webpack_module, exports) => {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.filterOutMacSystemFiles = exports.isMacSystemFilePath = void 0;
+const normalizeSlashes = (p) => (p || "").replace(/\\/g, "/").trim();
+const isMacSystemFilePath = (rawEntryPath) => {
+    const path = normalizeSlashes(rawEntryPath);
+    if (!path)
+        return false;
+    const fileName = path.split("/").filter(Boolean).pop() || "";
+    // skip mac system files
+    if (path.startsWith("__MACOSX/") || path.includes("/__MACOSX/"))
+        return true;
+    if (fileName === ".DS_Store")
+        return true;
+    if (fileName.startsWith("._"))
+        return true;
+    return false;
+};
+exports.isMacSystemFilePath = isMacSystemFilePath;
+const filterOutMacSystemFiles = (files) => Array.from(files).filter((file) => !(0, exports.isMacSystemFilePath)(file.webkitRelativePath?.trim() || file.name));
+exports.filterOutMacSystemFiles = filterOutMacSystemFiles;
+
+
 /***/ }),
 
 /***/ 3044: