gwchq-textjam 0.3.6 → 0.3.8

package/dist/index.js

@@ -68492,8 +68492,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var _Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(89379);
-/* harmony import */ var _Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(53986);
+/* harmony import */ var _Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(89379);
+/* harmony import */ var _Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(53986);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(14062);
 /* harmony import */ var _redux_EditorSlice__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(68512);
@@ -68514,7 +68514,7 @@ var DraggableTab = _ref => {
       draggableId,
       onTabClick
     } = _ref,
-    otherProps = (0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .A)(_ref, _excluded);
+    otherProps = (0,_Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .A)(_ref, _excluded);
   var openedTabs = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(state => state.editor.openedTabs);
   var openFilesCount = openedTabs.filter(t => t && t.type === "file").length || 1;
   var dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useDispatch)();
@@ -68532,7 +68532,7 @@ var DraggableTab = _ref => {
       switchToFileTab((fileIndex + openFilesCount - 1) % openFilesCount);
     }
   };
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Tabs_DraggableTabWrapper__WEBPACK_IMPORTED_MODULE_5__["default"], (0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A)((0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A)({
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Tabs_DraggableTabWrapper__WEBPACK_IMPORTED_MODULE_5__["default"], (0,_Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A)((0,_Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A)({
     draggableId: draggableId,
     index: fileIndex,
     onClick: e => {
@@ -68556,8 +68556,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var _Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(89379);
-/* harmony import */ var _Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(53986);
+/* harmony import */ var _Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(89379);
+/* harmony import */ var _Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(53986);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
 /* harmony import */ var _hello_pangea_dnd__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(98850);
 /* harmony import */ var react_tabs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(39243);
@@ -68576,8 +68576,8 @@ var DroppableTabList = _ref => {
       children: _children,
       index
     } = _ref,
-    otherProps = (0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)(_ref, _excluded);
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_tabs__WEBPACK_IMPORTED_MODULE_1__.TabList, (0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({}, otherProps), {}, {
+    otherProps = (0,_Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)(_ref, _excluded);
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_tabs__WEBPACK_IMPORTED_MODULE_1__.TabList, (0,_Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,_Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({}, otherProps), {}, {
     children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_hello_pangea_dnd__WEBPACK_IMPORTED_MODULE_6__.Droppable, {
       direction: "horizontal",
       droppableId: index.toString(),
@@ -68587,7 +68587,7 @@ var DroppableTabList = _ref => {
           droppableProps,
           placeholder
         } = _ref2;
-        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", (0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({
+        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", (0,_Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,_Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({
           className: "droppable-tab-list"
         }, droppableProps), {}, {
           ref: innerRef,
@@ -103160,7 +103160,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var _Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(89379);
+/* harmony import */ var _Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(89379);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(14062);
 /* harmony import */ var _redux_EditorSlice__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(68512);
@@ -103276,7 +103276,7 @@ var ProjectName = _ref => {
       id: "project_name_label",
       className: _styles_module_scss__WEBPACK_IMPORTED_MODULE_3__["default"].projectLabel,
       children: "Project Name"
-    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", (0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", (0,_Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,_Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
       className: classnames__WEBPACK_IMPORTED_MODULE_2___default()(_styles_module_scss__WEBPACK_IMPORTED_MODULE_3__["default"].projectName, className)
     }, hoverProps), {}, {
       children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)((components_Tooltip_Tooltip__WEBPACK_IMPORTED_MODULE_8___default()), {
@@ -103399,6 +103399,9 @@ var RunButton = _ref => {
   };
   var isButtonDisabled = !activeRunner || activeRunner !== loadedRunner || codeRunLoading;
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", (0,objectSpread2/* default */.A)((0,objectSpread2/* default */.A)({}, hoverProps), {}, {
+    style: {
+      position: "relative"
+    },
     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,
@@ -142977,7 +142980,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","tabbedPanel":"styles-module__tabbedPanel--Sovmr","viewOnlyBanner":"styles-module__viewOnlyBanner--vSOaw","scrollWrapper":"styles-module__scrollWrapper--Q8zaL","closeBtn":"styles-module__closeBtn--g8-AM","readOnlyContainer":"styles-module__readOnlyContainer--QCiv0","readOnlyContainerLeft":"styles-module__readOnlyContainerLeft--hLSxp","readOnlyBanner":"styles-module__readOnlyBanner--Mla6L"});
+/* 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","tabbedPanel":"styles-module__tabbedPanel--Sovmr","viewOnlyBanner":"styles-module__viewOnlyBanner--vSOaw","scrollWrapper":"styles-module__scrollWrapper--Q8zaL","closeBtn":"styles-module__closeBtn--g8-AM","tabTooltip":"styles-module__tabTooltip--DO-Hr"});
 
 /***/ }),
 
@@ -143017,6 +143020,18 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
+/***/ 37049:
+/***/ ((__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","readOnlyContainer":"styles-module__readOnlyContainer--GooG6","readOnlyContainerLeft":"styles-module__readOnlyContainerLeft--D6yHv","readOnlyBanner":"styles-module__readOnlyBanner--b4PPC"});
+
+/***/ }),
+
 /***/ 38231:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -143288,7 +143303,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"grey-rpi-grey-15":"#d5d7dc","grey-rpi-grey-40":"#9497a4","grey-rpi-grey-5":"#f1f2f3","grey-rpi-grey-70":"#4a4d59","grey-rpf-white":"#fff","tooltip":"styles-module__tooltip--7XFyr","visible":"styles-module__visible--wGPCM","position-bottom":"styles-module__position-bottom--Lwi+l","position-bottom-right":"styles-module__position-bottom-right--SMrip","position-fixed":"styles-module__position-fixed--t8yrP","size-default":"styles-module__size-default--B+ZT4","size-fit":"styles-module__size-fit--ZW8rV"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"grey-rpi-grey-15":"#d5d7dc","grey-rpi-grey-40":"#9497a4","grey-rpi-grey-5":"#f1f2f3","grey-rpi-grey-70":"#4a4d59","grey-rpf-white":"#fff","tooltip":"styles-module__tooltip--7XFyr","visible":"styles-module__visible--wGPCM","strategy-absolute":"styles-module__strategy-absolute--ZGcl2","strategy-fixed":"styles-module__strategy-fixed--QkvjL","position-absolute-bottom":"styles-module__position-absolute-bottom--TqoQ8","position-absolute-bottom-right":"styles-module__position-absolute-bottom-right--WBFHf","position-fixed-bottom":"styles-module__position-fixed-bottom--zWfUJ","size-default":"styles-module__size-default--B+ZT4","size-fit":"styles-module__size-fit--ZW8rV"});
 
 /***/ }),
 
@@ -369047,12 +369062,12 @@ const jsx_runtime_1 = __webpack_require__(74848);
 const file_saver_1 = __importDefault(__webpack_require__(4213));
 const js_convert_case_1 = __webpack_require__(61647);
 const download_svg_1 = __importDefault(__webpack_require__(63279));
-const stores_1 = __webpack_require__(32132);
 const SvgIcon_1 = __webpack_require__(82917);
-const Button_1 = __importDefault(__webpack_require__(79428));
-const createProjectArchive_1 = __webpack_require__(24133);
 const Tooltip_1 = __importDefault(__webpack_require__(26982));
+const stores_1 = __webpack_require__(32132);
 const useHover_1 = __webpack_require__(78556);
+const createProjectArchive_1 = __webpack_require__(24133);
+const Button_1 = __importDefault(__webpack_require__(79428));
 const DownloadButton = (props) => {
     const project = (0, stores_1.useAppSelector)((state) => state.editor.project);
     const { hovered, hoverProps } = (0, useHover_1.useHover)();
@@ -369071,173 +369086,288 @@ exports["default"] = DownloadButton;
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 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 = __importStar(__webpack_require__(51649));
 const dnd_1 = __webpack_require__(98850);
-const react_redux_1 = __webpack_require__(14062);
-const react_tabs_1 = __webpack_require__(39243);
+const react_1 = __webpack_require__(51649);
 const react_responsive_1 = __webpack_require__(17988);
-const EditorSlice_1 = __webpack_require__(68512);
+const react_tabs_1 = __webpack_require__(39243);
 const Button_1 = __importDefault(__webpack_require__(79428));
-const EditorPanel_1 = __importDefault(__webpack_require__(82467));
 const DraggableTab_1 = __importDefault(__webpack_require__(74215));
 const DroppableTabList_1 = __importDefault(__webpack_require__(48339));
-const RunnerControls_1 = __importDefault(__webpack_require__(80263));
-const mediaQueryBreakpoints_1 = __webpack_require__(22554);
-const CloseIcon_1 = __importDefault(__webpack_require__(61193));
+const EditorPanel_1 = __importDefault(__webpack_require__(82467));
 const FileIcon_1 = __importDefault(__webpack_require__(94028));
-const ReadOnlyBanner_1 = __importDefault(__webpack_require__(94501));
-const styles_module_scss_1 = __importDefault(__webpack_require__(44502));
+const Tooltip_1 = __importDefault(__webpack_require__(26982));
+const CloseIcon_1 = __importDefault(__webpack_require__(61193));
+const mediaQueryBreakpoints_1 = __webpack_require__(22554);
+const RunnerControls_1 = __importDefault(__webpack_require__(80263));
+const ReadOnlyBanner_1 = __importDefault(__webpack_require__(47918));
+const Text_1 = __webpack_require__(82803);
 const stores_1 = __webpack_require__(32132);
-const ProjectTypes_1 = __webpack_require__(27130);
 const EditorTypes_1 = __webpack_require__(42108);
+const ProjectTypes_1 = __webpack_require__(27130);
 const projectHelpers_1 = __webpack_require__(2610);
-const Text_1 = __webpack_require__(82803);
-// Helpers to translate between unified tab indices (used by Redux focussedFileIndex)
-// and file-only indices (used inside EditorInput for rendering and drag-drop).
-const unifiedToFileOnlyIndex = (panel, unifiedIdx) => {
-    const tab = panel[unifiedIdx];
-    if (!tab || tab.type !== EditorTypes_1.OpenedTabType.FILE)
+const tabIndexing_1 = __webpack_require__(57550);
+const hooks_1 = __webpack_require__(68856);
+const useTabTooltip_1 = __importDefault(__webpack_require__(58149));
+const styles_module_scss_1 = __importDefault(__webpack_require__(44502));
+const EditorInput = () => {
+    const project = (0, stores_1.useAppSelector)((state) => state.editor.project);
+    const projectFiles = (0, react_1.useMemo)(() => {
+        if (!project?.components)
+            return [];
+        return (project?.components.filter((component) => component.type === ProjectTypes_1.ProjectComponentType.FILE) || []);
+    }, [project]);
+    const unifiedTabs = (0, stores_1.useAppSelector)((state) => state.editor.openedTabs);
+    const openedFiles = (0, react_1.useMemo)(() => unifiedTabs.flatMap((tab, openedTabIndex) => {
+        if (tab.type !== EditorTypes_1.OpenedTabType.FILE)
+            return [];
+        const file = projectFiles.find((f) => f.id === tab.id);
+        return file
+            ? [{ ...file, fullName: (0, projectHelpers_1.getFullComponentName)(file), openedTabIndex }]
+            : [];
+    }), [projectFiles, unifiedTabs]);
+    const renderedFileOpenedIndices = (0, react_1.useMemo)(() => openedFiles.map((file) => file.openedTabIndex), [openedFiles]);
+    const focussedFileIndex = (0, stores_1.useAppSelector)((state) => state.editor.focussedFileIndex);
+    const fileTabFocusIndex = (0, react_1.useMemo)(() => {
+        const renderedIndex = renderedFileOpenedIndices.indexOf(focussedFileIndex);
+        if (renderedIndex >= 0)
+            return renderedIndex;
+        return Math.min((0, tabIndexing_1.openedTabIndexToFileTabIndex)(unifiedTabs, focussedFileIndex), Math.max(openedFiles.length - 1, 0));
+    }, [
+        focussedFileIndex,
+        openedFiles.length,
+        renderedFileOpenedIndices,
+        unifiedTabs,
+    ]);
+    const isMobile = (0, react_responsive_1.useMediaQuery)({ query: mediaQueryBreakpoints_1.MOBILE_MEDIA_QUERY });
+    const justLoaded = (0, stores_1.useAppSelector)((state) => state.editor.justLoaded);
+    const { tabTooltip, showTabTooltip, hideTabTooltip } = (0, useTabTooltip_1.default)();
+    const defaultFile = (0, react_1.useMemo)(() => (0, projectHelpers_1.resolveDefaultFile)(project), [project]);
+    const defaultFileName = defaultFile?.fullName ?? null;
+    (0, hooks_1.useDefaultFileTab)(justLoaded, defaultFile);
+    const { onDragStart, onDragEnd, selectFileTab, closeFileTab } = (0, hooks_1.useFileTabActions)(unifiedTabs, renderedFileOpenedIndices);
+    const tabRefs = (0, hooks_1.useFileTabRefs)(projectFiles, unifiedTabs, focussedFileIndex);
+    if (!project || !project.components) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(dnd_1.DragDropContext, { onDragStart: (input) => onDragStart(input), onDragEnd: (result) => onDragEnd(result), children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.tabbedPanel, children: (0, jsx_runtime_1.jsxs)(react_tabs_1.Tabs, { selectedIndex: fileTabFocusIndex, onSelect: selectFileTab, children: [(0, jsx_runtime_1.jsxs)("div", { className: "tabContainer", children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.scrollWrapper, children: (0, jsx_runtime_1.jsx)(DroppableTabList_1.default, { index: 0, children: openedFiles.map((file, fileIndex) => ((0, jsx_runtime_1.jsxs)(DraggableTab_1.default, { draggableId: `file-${file.id}`, fileIndex: fileIndex, onTabClick: selectFileTab, onMouseEnter: showTabTooltip(file.path), onMouseLeave: hideTabTooltip, "aria-label": file.fullName, children: [(0, jsx_runtime_1.jsxs)(Text_1.Text, { size: 12, weight: "medium", className: "tabText", ref: tabRefs.current[projectFiles.findIndex((projectFile) => projectFile.id === file.id)], children: [(0, jsx_runtime_1.jsx)(FileIcon_1.default, { ext: file.extension }), (0, projectHelpers_1.truncateFileName)(file.fullName)] }), (0, projectHelpers_1.isFileClosable)(file.fullName, defaultFileName) && ((0, jsx_runtime_1.jsx)(Button_1.default, { className: styles_module_scss_1.default.closeBtn, label: "close", onClickHandler: (e) => closeFileTab(e, file), ButtonIcon: () => (0, jsx_runtime_1.jsx)(CloseIcon_1.default, { scaleFactor: 0.85 }) }))] }, file.id))) }) }), isMobile && (0, jsx_runtime_1.jsx)(RunnerControls_1.default, {})] }), openedFiles.map((file) => ((0, jsx_runtime_1.jsxs)(react_tabs_1.TabPanel, { children: [(0, jsx_runtime_1.jsx)(ReadOnlyBanner_1.default, {}), (0, jsx_runtime_1.jsx)(EditorPanel_1.default, { file: file }, file.id)] }, file.id)))] }) }), tabTooltip && ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { className: styles_module_scss_1.default.tabTooltip, message: tabTooltip.message, position: "bottom", strategy: "fixed", visible: true, style: {
+                    top: tabTooltip.top,
+                    left: tabTooltip.left,
+                    transform: "translateX(-50%)",
+                } }))] }));
+};
+exports["default"] = EditorInput;
+
+
+/***/ }),
+
+/***/ 57550:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.fileTabIndexToInsertionIndex = exports.fileTabIndexToOpenedTabIndex = exports.openedTabIndexToFileTabIndex = void 0;
+const EditorTypes_1 = __webpack_require__(42108);
+const openedTabIndexToFileTabIndex = (panel, openedTabIndex) => {
+    const tab = panel[openedTabIndex];
+    if (!tab)
+        return 0;
+    const fileCount = panel.filter((t) => t.type === EditorTypes_1.OpenedTabType.FILE).length;
+    if (fileCount === 0)
         return 0;
-    return panel.slice(0, unifiedIdx).filter((t) => t.type === EditorTypes_1.OpenedTabType.FILE)
-        .length;
+    const fileTabIndex = panel
+        .slice(0, openedTabIndex)
+        .filter((t) => t.type === EditorTypes_1.OpenedTabType.FILE).length;
+    return Math.min(fileTabIndex, fileCount - 1);
 };
-const fileOnlyToUnifiedIndex = (panel, fileOnlyIdx) => {
+exports.openedTabIndexToFileTabIndex = openedTabIndexToFileTabIndex;
+const fileTabIndexToOpenedTabIndex = (panel, fileTabIndex) => {
     let count = 0;
     for (let i = 0; i < panel.length; i++) {
         const tab = panel[i];
         if (tab && tab.type === EditorTypes_1.OpenedTabType.FILE) {
-            if (count === fileOnlyIdx)
+            if (count === fileTabIndex)
                 return i;
             count++;
         }
     }
     return -1;
 };
-// Like fileOnlyToUnifiedIndex but for insertion: when fileOnlyIdx is past the
-// last existing file (i.e. dropping at the end), return panel.length so a
-// subsequent splice appends.
-const fileOnlyToInsertionIndex = (panel, fileOnlyIdx) => {
-    const idx = fileOnlyToUnifiedIndex(panel, fileOnlyIdx);
+exports.fileTabIndexToOpenedTabIndex = fileTabIndexToOpenedTabIndex;
+const fileTabIndexToInsertionIndex = (panel, fileTabIndex) => {
+    const idx = (0, exports.fileTabIndexToOpenedTabIndex)(panel, fileTabIndex);
     return idx === -1 ? panel.length : idx;
 };
-const EditorInput = () => {
-    const project = (0, stores_1.useAppSelector)((state) => state.editor.project);
-    const projectFiles = (0, react_1.useMemo)(() => {
-        if (!project?.components)
-            return [];
-        return (project?.components.filter((component) => component.type === ProjectTypes_1.ProjectComponentType.FILE) || []);
-    }, [project]);
-    const unifiedTabs = (0, stores_1.useAppSelector)((state) => state.editor.openedTabs);
-    // File-only tabs: filter output tabs out so EditorInput's react-tabs and
-    // drag-drop work in sequential file-only indices.
-    const fileOnlyTabs = (0, react_1.useMemo)(() => unifiedTabs.filter((tab) => tab.type === EditorTypes_1.OpenedTabType.FILE), [unifiedTabs]);
-    const openedFiles = (0, react_1.useMemo)(() => fileOnlyTabs.map((tab) => {
-        const file = projectFiles.find((f) => f.id === tab.id);
-        return {
-            ...file,
-            fullName: file ? (0, projectHelpers_1.getFullComponentName)(file) : "",
-        };
-    }), [fileOnlyTabs, projectFiles]);
-    const focussedFileIndex = (0, stores_1.useAppSelector)((state) => state.editor.focussedFileIndex);
-    // Translate unified focus index to file-only for react-tabs selectedIndex.
-    const fileOnlyFocusIndex = (0, react_1.useMemo)(() => unifiedToFileOnlyIndex(unifiedTabs, focussedFileIndex), [unifiedTabs, focussedFileIndex]);
+exports.fileTabIndexToInsertionIndex = fileTabIndexToInsertionIndex;
+
+
+/***/ }),
+
+/***/ 68856:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.useFileTabRefs = exports.useFileTabActions = exports.useDefaultFileTab = void 0;
+var useDefaultFileTab_1 = __webpack_require__(16417);
+Object.defineProperty(exports, "useDefaultFileTab", ({ enumerable: true, get: function () { return useDefaultFileTab_1.useDefaultFileTab; } }));
+var useFileTabActions_1 = __webpack_require__(31303);
+Object.defineProperty(exports, "useFileTabActions", ({ enumerable: true, get: function () { return useFileTabActions_1.useFileTabActions; } }));
+var useFileTabRefs_1 = __webpack_require__(66828);
+Object.defineProperty(exports, "useFileTabRefs", ({ enumerable: true, get: function () { return useFileTabRefs_1.useFileTabRefs; } }));
+
+
+/***/ }),
+
+/***/ 16417:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.useDefaultFileTab = void 0;
+const react_1 = __webpack_require__(51649);
+const react_redux_1 = __webpack_require__(14062);
+const EditorSlice_1 = __webpack_require__(68512);
+const useDefaultFileTab = (justLoaded, defaultFile) => {
     const dispatch = (0, react_redux_1.useDispatch)();
-    const isMobile = (0, react_responsive_1.useMediaQuery)({ query: mediaQueryBreakpoints_1.MOBILE_MEDIA_QUERY });
-    const [numberOfComponents, setNumberOfComponents] = (0, react_1.useState)(project?.components?.length);
-    const [fileNames, setFileNames] = (0, react_1.useState)();
-    const defaultFile = (0, react_1.useMemo)(() => (0, projectHelpers_1.resolveDefaultFile)(project), [project]);
-    const defaultFileName = defaultFile?.fullName ?? null;
-    const justLoaded = (0, stores_1.useAppSelector)((state) => state.editor.justLoaded);
     (0, react_1.useEffect)(() => {
         if (!justLoaded || !defaultFile)
             return;
         dispatch((0, EditorSlice_1.openFile)({ id: defaultFile.id }));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [justLoaded]);
-    const onDragStart = (input) => {
+};
+exports.useDefaultFileTab = useDefaultFileTab;
+
+
+/***/ }),
+
+/***/ 31303:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.useFileTabActions = void 0;
+const react_1 = __webpack_require__(51649);
+const react_redux_1 = __webpack_require__(14062);
+const EditorSlice_1 = __webpack_require__(68512);
+const tabIndexing_1 = __webpack_require__(57550);
+const defaultFileIndexToOpenedTabIndex = (unifiedTabs, fileIndex) => (0, tabIndexing_1.fileTabIndexToOpenedTabIndex)(unifiedTabs, fileIndex);
+const defaultFileIndexToInsertionIndex = (panel, fileIndex) => (0, tabIndexing_1.fileTabIndexToInsertionIndex)(panel, fileIndex);
+const useFileTabActions = (unifiedTabs, renderedFileOpenedIndices) => {
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const fileIndexToOpenedTabIndex = (0, react_1.useCallback)((fileIndex) => renderedFileOpenedIndices?.[fileIndex] ??
+        defaultFileIndexToOpenedTabIndex(unifiedTabs, fileIndex), [renderedFileOpenedIndices, unifiedTabs]);
+    const onDragStart = (0, react_1.useCallback)((input) => {
         const { source } = input;
-        const unifiedIdx = fileOnlyToUnifiedIndex(unifiedTabs, source.index);
+        const unifiedIdx = fileIndexToOpenedTabIndex(source.index);
         if (unifiedIdx < 0)
             return;
         dispatch((0, EditorSlice_1.setFocussedFileIndex)(unifiedIdx));
-    };
-    const onDragEnd = (result) => {
+    }, [dispatch, fileIndexToOpenedTabIndex]);
+    const onDragEnd = (0, react_1.useCallback)((result) => {
         const { source, destination } = result;
         if (!destination)
             return;
         const nextTabs = [...unifiedTabs];
-        const srcUnifiedIdx = fileOnlyToUnifiedIndex(nextTabs, source.index);
+        const srcUnifiedIdx = fileIndexToOpenedTabIndex(source.index);
         if (srcUnifiedIdx < 0)
             return;
         const removed = nextTabs.splice(srcUnifiedIdx, 1)[0];
         if (!removed)
             return;
-        const dstUnifiedIdx = fileOnlyToInsertionIndex(nextTabs, destination.index);
+        const nextRenderedFileOpenedIndices = renderedFileOpenedIndices
+            ?.filter((_, index) => index !== source.index)
+            .map((openedTabIndex) => openedTabIndex > srcUnifiedIdx ? openedTabIndex - 1 : openedTabIndex);
+        const dstUnifiedIdx = nextRenderedFileOpenedIndices
+            ? nextRenderedFileOpenedIndices[destination.index] ?? nextTabs.length
+            : defaultFileIndexToInsertionIndex(nextTabs, destination.index);
         nextTabs.splice(dstUnifiedIdx, 0, removed);
         dispatch((0, EditorSlice_1.setOpenedTabs)(nextTabs));
         dispatch((0, EditorSlice_1.setFocussedFileIndex)(dstUnifiedIdx));
-    };
-    const closeFileTab = (e, file) => {
+    }, [
+        dispatch,
+        fileIndexToOpenedTabIndex,
+        renderedFileOpenedIndices,
+        unifiedTabs,
+    ]);
+    const selectFileTab = (0, react_1.useCallback)((fileIndex) => {
+        const unifiedIdx = fileIndexToOpenedTabIndex(fileIndex);
+        if (unifiedIdx >= 0) {
+            dispatch((0, EditorSlice_1.setFocussedFileIndex)(unifiedIdx));
+        }
+    }, [dispatch, fileIndexToOpenedTabIndex]);
+    const closeFileTab = (0, react_1.useCallback)((e, file) => {
         e.stopPropagation();
         dispatch((0, EditorSlice_1.closeFile)({ id: file.id }));
+    }, [dispatch]);
+    return {
+        onDragStart,
+        onDragEnd,
+        selectFileTab,
+        closeFileTab,
     };
+};
+exports.useFileTabActions = useFileTabActions;
+
+
+/***/ }),
+
+/***/ 66828:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.useFileTabRefs = void 0;
+const react_1 = __importStar(__webpack_require__(51649));
+const EditorTypes_1 = __webpack_require__(42108);
+const useFileTabRefs = (projectFiles, unifiedTabs, focussedFileIndex) => {
     const tabRefs = (0, react_1.useRef)(projectFiles.map(() => (0, react_1.createRef)()));
+    const [numberOfFileRefs, setNumberOfFileRefs] = (0, react_1.useState)(tabRefs.current.length);
     (0, react_1.useEffect)(() => {
-        if (!project?.components)
-            return;
-        setNumberOfComponents(project.components.length);
-        for (let i = 0; i < project.components.length; i++) {
+        for (let i = 0; i < projectFiles.length; i++) {
             tabRefs.current[i] = tabRefs.current[i] || react_1.default.createRef();
         }
-    }, [project.components]);
+        setNumberOfFileRefs(projectFiles.length);
+    }, [projectFiles.length]);
     (0, react_1.useEffect)(() => {
-        const projectFiles = project.components.filter((component) => component.type === ProjectTypes_1.ProjectComponentType.FILE);
-        const newFileNames = projectFiles.map((file) => (0, projectHelpers_1.getFullComponentName)(file));
-        if (newFileNames.join() !== fileNames?.join()) {
-            setFileNames(newFileNames);
-        }
-    }, [fileNames, project.components]);
-    (0, react_1.useEffect)(() => {
-        if (!projectFiles)
-            return;
         const tab = unifiedTabs[focussedFileIndex];
         const fileId = tab?.type === EditorTypes_1.OpenedTabType.FILE ? tab.id : undefined;
         const componentIndex = projectFiles.findIndex((file) => file.id === fileId);
@@ -369245,54 +369375,40 @@ const EditorInput = () => {
         if (fileRef && fileRef.current) {
             fileRef.current.parentElement?.scrollIntoView();
         }
-    }, [focussedFileIndex, unifiedTabs, numberOfComponents, projectFiles]);
-    if (!project || !project.components) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsx)(dnd_1.DragDropContext, { onDragStart: (input) => onDragStart(input), onDragEnd: (result) => onDragEnd(result), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.tabbedPanel, children: (0, jsx_runtime_1.jsxs)(react_tabs_1.Tabs, { selectedIndex: fileOnlyFocusIndex, children: [(0, jsx_runtime_1.jsxs)("div", { className: "tabContainer", children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.scrollWrapper, children: (0, jsx_runtime_1.jsx)(DroppableTabList_1.default, { index: 0, children: openedFiles.map((file, fileIndex) => file && ((0, jsx_runtime_1.jsxs)(DraggableTab_1.default, { draggableId: `file-${file.id}`, fileIndex: fileIndex, onTabClick: () => {
-                                            const unifiedIdx = fileOnlyToUnifiedIndex(unifiedTabs, fileIndex);
-                                            if (unifiedIdx >= 0) {
-                                                dispatch((0, EditorSlice_1.setFocussedFileIndex)(unifiedIdx));
-                                            }
-                                        }, children: [(0, jsx_runtime_1.jsxs)(Text_1.Text, { size: 12, weight: "medium", className: "tabText", tooltip: file.fullName, ref: tabRefs.current[projectFiles.findIndex((projectFile) => projectFile.id === file.id)], children: [(0, jsx_runtime_1.jsx)(FileIcon_1.default, { ext: file.extension }), (0, projectHelpers_1.truncateFileName)(file.fullName)] }), (0, projectHelpers_1.isFileClosable)(file.fullName, defaultFileName) && ((0, jsx_runtime_1.jsx)(Button_1.default, { className: styles_module_scss_1.default.closeBtn, label: "close", onClickHandler: (e) => closeFileTab(e, file), ButtonIcon: () => (0, jsx_runtime_1.jsx)(CloseIcon_1.default, { scaleFactor: 0.85 }) }))] }, file.id))) }) }), isMobile && (0, jsx_runtime_1.jsx)(RunnerControls_1.default, {})] }), openedFiles.map((file) => file ? ((0, jsx_runtime_1.jsxs)(react_tabs_1.TabPanel, { children: [(0, jsx_runtime_1.jsx)(ReadOnlyBanner_1.default, {}), (0, jsx_runtime_1.jsx)(EditorPanel_1.default, { file: file }, file.id)] }, file.id)) : null)] }) }) }));
+    }, [focussedFileIndex, unifiedTabs, numberOfFileRefs, projectFiles]);
+    return tabRefs;
 };
-exports["default"] = EditorInput;
+exports.useFileTabRefs = useFileTabRefs;
 
 
 /***/ }),
 
-/***/ 94501:
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+/***/ 58149:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-const jsx_runtime_1 = __webpack_require__(74848);
 const react_1 = __webpack_require__(51649);
-const classnames_1 = __importDefault(__webpack_require__(46942));
-const stores_1 = __webpack_require__(32132);
-const SvgIcon_1 = __webpack_require__(82917);
-const Tooltip_1 = __importDefault(__webpack_require__(26982));
-const useHover_1 = __webpack_require__(78556);
-const readonly_svg_1 = __importDefault(__webpack_require__(19297));
-const styles_module_scss_1 = __importDefault(__webpack_require__(44502));
-const ReadOnlyBanner = ({ align = "right", }) => {
-    const readOnly = (0, stores_1.useAppSelector)((state) => state.editor.readOnly);
-    const { hovered, hoverProps } = (0, useHover_1.useHover)();
-    const readonlyRef = (0, react_1.useRef)(null);
-    if (!readOnly)
-        return null;
-    const rect = readonlyRef.current?.getBoundingClientRect();
-    const readonlyTooltipTop = rect?.top ?? 0;
-    const readonlyTooltipLeft = rect ? rect.left + rect.width / 2 : 0;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.readOnlyContainer, align === "left" && styles_module_scss_1.default.readOnlyContainerLeft), children: [(0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "View mode. Remix to edit.", visible: hovered, position: "fixed", style: {
-                    top: readonlyTooltipTop,
-                    left: readonlyTooltipLeft,
-                } }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.readOnlyBanner, ref: readonlyRef, ...hoverProps, children: [(0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { size: 12, SvgElement: readonly_svg_1.default }), (0, jsx_runtime_1.jsx)("span", { children: "Read Only" })] })] }));
+const useTabTooltip = () => {
+    const [tabTooltip, setTabTooltip] = (0, react_1.useState)(null);
+    const showTabTooltip = (0, react_1.useCallback)((filePath) => (e) => {
+        if (!filePath)
+            return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        setTabTooltip({
+            message: filePath,
+            top: rect.bottom,
+            left: rect.left + rect.width / 2,
+        });
+    }, []);
+    const hideTabTooltip = (0, react_1.useCallback)(() => setTabTooltip(null), []);
+    return {
+        tabTooltip,
+        showTabTooltip,
+        hideTabTooltip,
+    };
 };
-exports["default"] = ReadOnlyBanner;
+exports["default"] = useTabTooltip;
 
 
 /***/ }),
@@ -369424,6 +369540,42 @@ const Output = ({ packageApiUrl }) => {
 exports["default"] = Output;
 
 
+/***/ }),
+
+/***/ 47918:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+const jsx_runtime_1 = __webpack_require__(74848);
+const react_1 = __webpack_require__(51649);
+const classnames_1 = __importDefault(__webpack_require__(46942));
+const stores_1 = __webpack_require__(32132);
+const SvgIcon_1 = __webpack_require__(82917);
+const Tooltip_1 = __importDefault(__webpack_require__(26982));
+const useHover_1 = __webpack_require__(78556);
+const readonly_svg_1 = __importDefault(__webpack_require__(19297));
+const styles_module_scss_1 = __importDefault(__webpack_require__(37049));
+const ReadOnlyBanner = ({ align = "right", }) => {
+    const readOnly = (0, stores_1.useAppSelector)((state) => state.editor.readOnly);
+    const { hovered, hoverProps } = (0, useHover_1.useHover)();
+    const readonlyRef = (0, react_1.useRef)(null);
+    if (!readOnly)
+        return null;
+    const rect = readonlyRef.current?.getBoundingClientRect();
+    const readonlyTooltipTop = rect?.top ?? 0;
+    const readonlyTooltipLeft = rect ? rect.left + rect.width / 2 : 0;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.readOnlyContainer, align === "left" && styles_module_scss_1.default.readOnlyContainerLeft), children: [(0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "View mode. Remix to edit.", visible: hovered, position: "bottom", strategy: "fixed", style: {
+                    top: readonlyTooltipTop,
+                    left: readonlyTooltipLeft,
+                } }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.readOnlyBanner, ref: readonlyRef, ...hoverProps, children: [(0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { size: 12, SvgElement: readonly_svg_1.default }), (0, jsx_runtime_1.jsx)("span", { children: "Read Only" })] })] }));
+};
+exports["default"] = ReadOnlyBanner;
+
+
 /***/ }),
 
 /***/ 55339:
@@ -370252,18 +370404,18 @@ const useHtmlRunner = () => {
         };
     }, [shouldUseBrowserHistory]);
     (0, react_1.useEffect)(() => {
-        if (isPreviewMode) {
-            const handleMessage = (event) => {
-                if (event.data.type === BroadcastMessageType.RELOAD_PROJECT) {
-                    // Trigger a reload of a preview page
-                    window.location.reload();
-                }
-            };
-            broadcastChannel.current?.addEventListener("message", handleMessage);
-            return () => {
-                broadcastChannel.current?.removeEventListener("message", handleMessage);
-            };
-        }
+        if (!isPreviewMode)
+            return;
+        const handleMessage = (event) => {
+            if (event.data.type === BroadcastMessageType.RELOAD_PROJECT) {
+                // Trigger a reload of a preview page
+                window.location.reload();
+            }
+        };
+        broadcastChannel.current?.addEventListener("message", handleMessage);
+        return () => {
+            broadcastChannel.current?.removeEventListener("message", handleMessage);
+        };
     }, [isPreviewMode]);
     (0, react_1.useEffect)(() => {
         const handleReloadMessage = (event) => {
@@ -370315,15 +370467,15 @@ const useHtmlRunner = () => {
         dispatch((0, EditorSlice_1.setLoadedRunner)(EditorTypes_1.RunnerType.HTML));
     }, []);
     (0, react_1.useEffect)(() => {
-        if (codeRunTriggered) {
-            // Fresh iframe for each run (clean slate); it persists across view switches
-            createIframe();
-            runCode();
-            if (!isPreviewMode) {
-                broadcastChannel.current?.postMessage({
-                    type: BroadcastMessageType.RELOAD_PROJECT,
-                });
-            }
+        if (!codeRunTriggered)
+            return;
+        // Fresh iframe for each run (clean slate); it persists across view switches
+        createIframe();
+        runCode();
+        if (!isPreviewMode) {
+            broadcastChannel.current?.postMessage({
+                type: BroadcastMessageType.RELOAD_PROJECT,
+            });
         }
     }, [codeRunTriggered, page, isPreviewMode]);
     (0, react_1.useEffect)(() => {
@@ -370537,7 +370689,7 @@ const useIframeHost = ({ codeHasBeenRun, error, page, isPreviewMode, onIframeLoa
         slotRef.current = node;
         setSlotVersion((v) => v + 1);
     }, []);
-    // Create the persistent host + iframe once; tear it down on unmount
+    // Create the persistent host + iframe once; tear it down on unmount.
     (0, react_1.useEffect)(() => {
         if (typeof document === "undefined")
             return;
@@ -370555,6 +370707,7 @@ const useIframeHost = ({ codeHasBeenRun, error, page, isPreviewMode, onIframeLoa
                 document.body.removeChild(host);
             hostRef.current = null;
             output.current = null;
+            setHostReady(false);
         };
     }, [createIframe]);
     // Keep the host aligned with the active slot across resizes/scrolls/switches
@@ -370902,7 +371055,7 @@ const styles_module_scss_1 = __importDefault(__webpack_require__(12914));
  * The React component itself stays free of any worker plumbing — it just
  * consumes the values returned here to drive its JSX.
  */
-const usePyodideRunner = ({ active, packageApiUrl, }) => {
+const usePyodideRunner = ({ packageApiUrl, }) => {
     const dispatch = (0, react_redux_1.useDispatch)();
     // -------------------------------------------------------------------------
     // Redux selectors
@@ -371067,7 +371220,11 @@ const usePyodideRunner = ({ active, packageApiUrl, }) => {
     const handleError = (0, react_1.useCallback)((file, line, mistake, type, info) => {
         let errorMessage;
         if (type === "KeyboardInterrupt") {
-            errorMessage = "Execution interrupted";
+            errorMessage = info || "Execution interrupted";
+        }
+        else if (type === "InputUnavailableError") {
+            errorMessage =
+                info || "Input timed out. Rerun your code and try again.";
         }
         else {
             const message = [type, info].filter((s) => s).join(": ");
@@ -371142,7 +371299,6 @@ const usePyodideRunner = ({ active, packageApiUrl, }) => {
         handleVisual,
     ]);
     const { worker: pyodideWorker, recreateWorker } = (0, usePyodideWorker_1.usePyodideWorker)({
-        active,
         projectIdentifier: project.identifier,
         onMessage: handleMessage,
         onBeforeRecreate: handleBeforeRecreate,
@@ -371170,7 +371326,6 @@ const usePyodideRunner = ({ active, packageApiUrl, }) => {
         recreateWorker();
     }, [recreateWorker]);
     const { ensureInputServiceWorker, registerStdinClient } = (0, useStdinServiceWorker_1.useStdinServiceWorker)({
-        active,
         tabIdRef,
         onStdinRequest: handleStdinRequest,
         onControllerChange: handleControllerChange,
@@ -371334,13 +371489,13 @@ const usePyodideRunner = ({ active, packageApiUrl, }) => {
     }, [pyodideWorker, ensureInputServiceWorker, packageApiUrl]);
     // Kick off a run when the Redux flag flips on.
     (0, react_1.useEffect)(() => {
-        if (codeRunTriggered && active && output.current) {
+        if (codeRunTriggered && output.current) {
             handleRun();
         }
     }, [codeRunTriggered, output.current]);
     // Stop a run when the Redux flag flips on.
     (0, react_1.useEffect)(() => {
-        if (codeRunStopped && active) {
+        if (codeRunStopped) {
             handleStop();
         }
     }, [codeRunStopped]);
@@ -371369,7 +371524,7 @@ const assetUrls_1 = __webpack_require__(85799);
  * Owns the lifecycle of the Pyodide Web Worker.
  *
  * Responsibilities:
- *   - Create the worker once the runner becomes active.
+ *   - Create the worker on mount.
  *   - Re-create the worker whenever the project identifier changes (each
  *     project starts from a clean Python environment).
  *   - Expose an imperative `recreateWorker` for callers that need to force a
@@ -371379,7 +371534,7 @@ const assetUrls_1 = __webpack_require__(85799);
  * Posting messages and decoding incoming messages is the orchestrator's job —
  * this hook just hands the worker over and forwards messages.
  */
-const usePyodideWorker = ({ active, projectIdentifier, onMessage, onBeforeRecreate, }) => {
+const usePyodideWorker = ({ projectIdentifier, onMessage, onBeforeRecreate, }) => {
     const [worker, setWorker] = (0, react_1.useState)(null);
     // The onMessage callback closes over orchestrator state, so we route through
     // a ref to avoid rebuilding the worker every render.
@@ -371407,22 +371562,14 @@ const usePyodideWorker = ({ active, projectIdentifier, onMessage, onBeforeRecrea
             return createWorker();
         });
     }, [createWorker]);
-    // First-mount creation: only when active and no worker exists yet.
+    // First-mount creation: only when no worker exists yet.
     (0, react_1.useEffect)(() => {
         if (worker)
             return;
-        if (!active)
-            return;
         setWorker(createWorker());
-    }, [active, worker, createWorker]);
-    // Project changes always reset the worker — but only when this runner is
-    // the active one. Without this gate the hook would spin up a Pyodide
-    // worker for HTML projects too, since the runner factory now calls
-    // usePythonRunner unconditionally and only skips its side effects via
-    // `active`.
+    }, [worker, createWorker]);
+    // Project changes always reset the worker.
     (0, react_1.useEffect)(() => {
-        if (!active)
-            return;
         recreateWorker();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [projectIdentifier]);
@@ -371462,7 +371609,7 @@ const serviceWorker_1 = __webpack_require__(58158);
  * Returns helpers (`ensureInputServiceWorker`, `registerStdinClient`) the
  * orchestrator calls from `run` and from `init`.
  */
-const useStdinServiceWorker = ({ active, tabIdRef, onStdinRequest, onControllerChange, }) => {
+const useStdinServiceWorker = ({ tabIdRef, onStdinRequest, onControllerChange, }) => {
     // Keep latest callbacks in refs so the event listener effects don't need to
     // re-subscribe whenever the parent re-renders with a new closure.
     const onStdinRequestRef = (0, react_1.useRef)(onStdinRequest);
@@ -371566,9 +371713,6 @@ const useStdinServiceWorker = ({ active, tabIdRef, onStdinRequest, onControllerC
     // Re-register stdin client and notify the orchestrator whenever the page
     // gains a new SW controller (e.g. after first registration or a SW update).
     (0, react_1.useEffect)(() => {
-        if (!active) {
-            return;
-        }
         if (!("serviceWorker" in navigator)) {
             return;
         }
@@ -371583,7 +371727,7 @@ const useStdinServiceWorker = ({ active, tabIdRef, onStdinRequest, onControllerC
         return () => {
             navigator.serviceWorker.removeEventListener("controllerchange", handleControllerChange);
         };
-    }, [active, registerStdinClient]);
+    }, [registerStdinClient]);
     return { ensureInputServiceWorker, registerStdinClient };
 };
 exports.useStdinServiceWorker = useStdinServiceWorker;
@@ -372045,18 +372189,17 @@ const styles_module_scss_1 = __importDefault(__webpack_require__(12914));
 const VisualOutputPane_1 = __importDefault(__webpack_require__(39626));
 const usePyodideRunner_1 = __webpack_require__(65587);
 const consoleInput_1 = __webpack_require__(35660);
-const usePythonRunner = ({ active, packageApiUrl, }) => {
+const usePythonRunner = ({ packageApiUrl, }) => {
     const dispatch = (0, react_redux_1.useDispatch)();
     const activeRunner = (0, stores_1.useAppSelector)((state) => state.editor.activeRunner);
     const { mountConsole, visuals, setVisuals } = (0, usePyodideRunner_1.usePyodideRunner)({
-        active,
         packageApiUrl,
     });
     (0, react_1.useEffect)(() => {
-        if (active && activeRunner !== EditorTypes_1.RunnerType.PYODIDE) {
+        if (activeRunner !== EditorTypes_1.RunnerType.PYODIDE) {
             dispatch((0, EditorSlice_1.loadingRunner)(EditorTypes_1.RunnerType.PYODIDE));
         }
-    }, [active, activeRunner, dispatch]);
+    }, [activeRunner, dispatch]);
     const renderConsoleOutput = (0, react_1.useCallback)(() => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ErrorMessage_1.default, {}), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.consoleMount, onClick: consoleInput_1.shiftFocusToInput, ref: mountConsole })] })), [mountConsole]);
     const renderVisualOutput = (0, react_1.useCallback)(() => ((0, jsx_runtime_1.jsx)(VisualOutputPane_1.default, { visuals: visuals, setVisuals: setVisuals })), [visuals, setVisuals]);
     const outputMeta = {
@@ -372112,9 +372255,9 @@ const ProjectTypes_1 = __webpack_require__(27130);
 const EditorTypes_1 = __webpack_require__(42108);
 const useRunnerFactory = ({ projectType, packageApiUrl, }) => {
     const isWeb = projectType === ProjectTypes_1.ProjectType.WEB;
-    const htmlRunner = (0, useHtmlRunner_1.default)();
-    const pythonRunner = (0, usePythonRunner_1.default)({ active: !isWeb, packageApiUrl });
-    const { renderVisualOutput, renderConsoleOutput, outputMeta, panelOrder } = isWeb ? htmlRunner : pythonRunner;
+    const { renderVisualOutput, renderConsoleOutput, outputMeta, panelOrder } = 
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    isWeb ? (0, useHtmlRunner_1.default)() : (0, usePythonRunner_1.default)({ packageApiUrl });
     // The output-type → renderer mapping is identical across runners, so compose
     // the public renderOutput here rather than duplicating it in each hook.
     const renderOutput = (0, react_1.useCallback)((outputType) => outputType === EditorTypes_1.OutputType.VISUAL
@@ -372155,7 +372298,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(74848);
 const EditorPanel_1 = __importDefault(__webpack_require__(82467));
-const ReadOnlyBanner_1 = __importDefault(__webpack_require__(94501));
+const ReadOnlyBanner_1 = __importDefault(__webpack_require__(47918));
 const FileTabContent = ({ file }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ReadOnlyBanner_1.default, { align: "left" }), (0, jsx_runtime_1.jsx)(EditorPanel_1.default, { file: file })] }));
 exports["default"] = FileTabContent;
 
@@ -372548,7 +372691,7 @@ const Dropdown = (props) => {
     const [isOpen, setOpen] = (0, react_1.useState)(false);
     const buttonRef = (0, react_1.useRef)(null);
     const { hovered, hoverProps } = (0, useHover_1.useHover)();
-    return ((0, jsx_runtime_1.jsxs)("div", { ...hoverProps, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", "aria-label": ariaLabel, className: (0, classnames_1.default)(buttonClassname, isOpen && styles_module_scss_1.default.buttonActive), onClick: () => setOpen((prev) => !prev), ref: buttonRef, children: [ButtonIcon && ((0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: ButtonIcon, size: 16, "aria-hidden": "true", focusable: "false" })), (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { className: (0, classnames_1.default)(styles_module_scss_1.default.arrowIcon, isOpen && styles_module_scss_1.default.arrowIconOpen), style: { rotate: `${isOpen ? "-" : ""}90deg` }, SvgElement: arrow_right_svg_1.default, size: 8, "aria-hidden": "true", focusable: "false" })] }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Upload files", visible: hovered && !isOpen, position: "fixed", size: "fit" }), (0, jsx_runtime_1.jsx)(ContextMenu_1.default, { anchorRef: buttonRef, menuOptions: menuOptions, opened: isOpen, onClose: () => setOpen(false), align: align, direction: direction, gap: 4 })] }));
+    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: "bottom", strategy: "fixed", size: "fit" }), (0, jsx_runtime_1.jsx)(ContextMenu_1.default, { anchorRef: buttonRef, menuOptions: menuOptions, opened: isOpen, onClose: () => setOpen(false), align: align, direction: direction, gap: 4 })] }));
 };
 exports["default"] = Dropdown;
 
@@ -372631,7 +372774,7 @@ const FileTreeActions = ({ hasExpandedNodes, }) => {
     const { hovered: toggleHovered, hoverProps: toggleHoverProps } = (0, useHover_1.useHover)();
     const { hovered: addFolderHovered, hoverProps: addFolderHoverProps } = (0, useHover_1.useHover)();
     const { hovered: addFileHovered, hoverProps: addFileHoverProps } = (0, useHover_1.useHover)();
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.fileTreeActions, children: [hasExpandedNodes ? ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.tooltipWrapper, ...toggleHoverProps, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Collapse all folders", onClick: collapseAll, className: styles_module_scss_1.default.iconButton, children: (0, jsx_runtime_1.jsx)(minus_circle_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Collapse all folders", visible: toggleHovered, position: "fixed", size: "fit" })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.tooltipWrapper, ...toggleHoverProps, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Expand all folders", onClick: expandAll, className: styles_module_scss_1.default.iconButton, children: (0, jsx_runtime_1.jsx)(plus_circle_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Expand all folders", visible: toggleHovered, position: "fixed", size: "fit" })] })), (0, jsx_runtime_1.jsx)(Text_1.Text, { size: 12, weight: "medium", className: styles_module_scss_1.default.fileTreeActionsLabel, children: "Project files" }), !isReadOnly && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.tooltipWrapper, ...addFolderHoverProps, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Add folder", onClick: () => createComponent(ProjectTypes_1.ProjectComponentType.DIR), className: (0, classnames_1.default)([styles_module_scss_1.default.iconButtonFilled, styles_module_scss_1.default.iconButton]), children: (0, jsx_runtime_1.jsx)(add_folder_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Add folder", visible: addFolderHovered, position: "fixed", size: "fit" })] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.tooltipWrapper, ...addFileHoverProps, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Add file", onClick: () => createComponent(ProjectTypes_1.ProjectComponentType.FILE), className: (0, classnames_1.default)([styles_module_scss_1.default.iconButtonFilled, styles_module_scss_1.default.iconButton]), children: (0, jsx_runtime_1.jsx)(add_file_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Add file", visible: addFileHovered, position: "fixed", size: "fit" })] }), (0, jsx_runtime_1.jsx)(ImportButton_1.ImportButton, { importFiles: importFiles, importFolder: importFolder })] }))] }));
+    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: "bottom", strategy: "fixed", size: "fit" })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.tooltipWrapper, ...toggleHoverProps, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Expand all folders", onClick: expandAll, className: styles_module_scss_1.default.iconButton, children: (0, jsx_runtime_1.jsx)(plus_circle_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Expand all folders", visible: toggleHovered, position: "bottom", strategy: "fixed", size: "fit" })] })), (0, jsx_runtime_1.jsx)(Text_1.Text, { size: 12, weight: "medium", className: styles_module_scss_1.default.fileTreeActionsLabel, children: "Project files" }), !isReadOnly && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.tooltipWrapper, ...addFolderHoverProps, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Add folder", onClick: () => createComponent(ProjectTypes_1.ProjectComponentType.DIR), className: (0, classnames_1.default)([styles_module_scss_1.default.iconButtonFilled, styles_module_scss_1.default.iconButton]), children: (0, jsx_runtime_1.jsx)(add_folder_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Add folder", visible: addFolderHovered, position: "bottom", strategy: "fixed", size: "fit" })] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.tooltipWrapper, ...addFileHoverProps, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Add file", onClick: () => createComponent(ProjectTypes_1.ProjectComponentType.FILE), className: (0, classnames_1.default)([styles_module_scss_1.default.iconButtonFilled, styles_module_scss_1.default.iconButton]), children: (0, jsx_runtime_1.jsx)(add_file_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Add file", visible: addFileHovered, position: "bottom", strategy: "fixed", size: "fit" })] }), (0, jsx_runtime_1.jsx)(ImportButton_1.ImportButton, { importFiles: importFiles, importFolder: importFolder })] }))] }));
 };
 exports.FileTreeActions = FileTreeActions;
 
@@ -372667,7 +372810,7 @@ const BasicItemContent = ({ item, onContextMenu, }) => {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.itemContent, onContextMenu: onContextMenu, children: [(0, jsx_runtime_1.jsx)(ItemIcon_1.ItemIcon, { itemData: itemData }), (0, jsx_runtime_1.jsx)(Text_1.Text, { className: styles_module_scss_1.default.itemTitle, size: 12, draggable: true, ...hoverProps, children: item.getItemName() }), !isSharedProject && ((0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { className: styles_module_scss_1.default.itemButton, size: 16, SvgElement: button_dots_svg_1.default, onClick: (e) => {
                             onContextMenu(e);
                             e.stopPropagation();
-                        } }))] }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: item.getItemName(), visible: hovered, position: "bottom" })] }));
+                        } }))] }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: item.getItemName(), visible: hovered, position: "bottom", strategy: "fixed" })] }));
 };
 exports.BasicItemContent = BasicItemContent;
 
@@ -374255,10 +374398,10 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(74848);
 const classnames_1 = __importDefault(__webpack_require__(46942));
 const styles_module_scss_1 = __importDefault(__webpack_require__(28188));
-const Tooltip = ({ message, visible = false, position = "bottom", size = "default", className, style, }) => {
+const Tooltip = ({ message, visible = false, position = "bottom", strategy = "absolute", size = "default", className, style, }) => {
     if (!visible)
         return null;
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.tooltip, position && styles_module_scss_1.default[`position-${position}`], styles_module_scss_1.default[`size-${size}`], visible && styles_module_scss_1.default.visible, className), role: "tooltip", style: style, children: message }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.tooltip, styles_module_scss_1.default[`strategy-${strategy}`], position && styles_module_scss_1.default[`position-${strategy}-${position}`], styles_module_scss_1.default[`size-${size}`], visible && styles_module_scss_1.default.visible, className), role: "tooltip", style: style, children: message }));
 };
 exports["default"] = Tooltip;
 
@@ -385732,7 +385875,7 @@ module.exports = webpackAsyncContext;
 /***/ 24427:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
-module.exports = __webpack_require__.p + "assets/PyodideWorkerb1409749c37aedc47dc8.js";
+module.exports = __webpack_require__.p + "assets/PyodideWorkereba24d5259c22fbe422a.js";
 
 /***/ }),