gwchq-textjam 0.4.2 → 0.4.3

package/dist/index.js

@@ -68435,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 _Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(89379);
-/* harmony import */ var _Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(53986);
+/* harmony import */ var _Users_ruslanmatkovskyi_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_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);
@@ -68460,7 +68460,7 @@ var DraggableTab = _ref => {
       panelIndex,
       fileIndex
     } = _ref,
-    otherProps = (0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)(_ref, _excluded);
+    otherProps = (0,_Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)(_ref, _excluded);
   var openFiles = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(state => state.editor.openedFiles);
   var openFilesCount = openFiles[panelIndex].length;
   var dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useDispatch)();
@@ -68477,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,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
+  var InnerTab = () => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(react_tabs__WEBPACK_IMPORTED_MODULE_2__.Tab, (0,_Users_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)({
     onClick: e => {
       e.stopPropagation();
       switchToFileTab(panelIndex, fileIndex);
@@ -68495,7 +68495,7 @@ var DraggableTab = _ref => {
         draggableProps,
         dragHandleProps
       } = _ref2;
-      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", (0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,_Users_valeriya_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
+      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", (0,_Users_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)((0,_Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
         className: "draggable-tab",
         ref: innerRef
       }, draggableProps), dragHandleProps), {}, {
@@ -68517,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 _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);
@@ -68537,8 +68537,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(),
@@ -68548,7 +68548,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,
@@ -101966,7 +101966,13 @@ var EditorPanel = _ref => {
     });
     var startState = EditorState.create({
       doc: code,
-      extensions: [basicSetup, dist_keymap.of([dist_defaultKeymap, indentWithTab]), mode, label, onUpdate, editorTheme, indentationMarkers(), indentUnit.of(customIndentUnit), EditorView.editable.of(!readOnly), EditorView.lineWrapping, limitCharacters]
+      extensions: [basicSetup,
+      // Escape releases the Tab key so keyboard users can move focus out of
+      // the editor instead of being trapped by indentWithTab (WCAG 2.1.2).
+      dist_keymap.of([{
+        key: "Escape",
+        run: temporarilySetTabFocusMode
+      }]), dist_keymap.of([dist_defaultKeymap, indentWithTab]), mode, label, onUpdate, editorTheme, indentationMarkers(), indentUnit.of(customIndentUnit), EditorView.editable.of(!readOnly), EditorView.lineWrapping, limitCharacters]
     });
     var view = new EditorView({
       state: startState,
@@ -102113,8 +102119,8 @@ var Sidebar_default = /*#__PURE__*/__webpack_require__.n(Sidebar);
 // EXTERNAL MODULE: ./src/components/Editor/EditorInput/EditorInput.tsx
 var EditorInput = __webpack_require__(99692);
 var EditorInput_default = /*#__PURE__*/__webpack_require__.n(EditorInput);
-// EXTERNAL MODULE: ./src/utils/ResizableWithHandle.js + 3 modules
-var ResizableWithHandle = __webpack_require__(51535);
+// EXTERNAL MODULE: ./src/utils/ResizableWithHandle.js + 4 modules
+var ResizableWithHandle = __webpack_require__(32694);
 ;// ./src/utils/containerQueries.js
 var projContainer = {
   "width-larger-than-720": {
@@ -102187,6 +102193,8 @@ var Project = props => {
         ref: containerRef,
         children: !loading && /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
           className: styles_module.projEditorWrapper,
+          role: "group",
+          "aria-label": "Code editor and output",
           children: [isCodeVisible && /*#__PURE__*/(0,jsx_runtime.jsx)(ResizableWithHandle["default"], {
             "data-testid": "proj-editor-container",
             className: styles_module.projEditorContainer,
@@ -102256,7 +102264,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
-/* harmony import */ var _utils_ResizableWithHandle__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(51535);
+/* harmony import */ var _utils_ResizableWithHandle__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(32694);
 /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(46942);
 /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _utils_mediaQueryBreakpoints__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(22554);
@@ -102280,7 +102288,8 @@ var SidebarPanel = props => {
     panelContentClassName,
     buttons = [],
     defaultWidth = "270px",
-    maxWidth = "600px"
+    maxWidth = "600px",
+    resizable = true
   } = props;
   var isMobile = (0,react_responsive__WEBPACK_IMPORTED_MODULE_4__.useMediaQuery)({
     query: _utils_mediaQueryBreakpoints__WEBPACK_IMPORTED_MODULE_5__.MOBILE_MEDIA_QUERY
@@ -102303,7 +102312,7 @@ var SidebarPanel = props => {
       children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Footer, {})
     })]
   });
-  return isMobile ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", {
+  return isMobile || !resizable ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", {
     "data-testid": "sidebar__panel",
     className: classnames__WEBPACK_IMPORTED_MODULE_1___default()(_styles_module_scss__WEBPACK_IMPORTED_MODULE_2__["default"].panel, className, Footer && _styles_module_scss__WEBPACK_IMPORTED_MODULE_2__["default"].panelWithFooter),
     children: panelContent
@@ -103136,7 +103145,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);
@@ -103250,7 +103259,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()), {
@@ -106407,7 +106416,7 @@ var defaultMZCriteria = {
 
 /***/ }),
 
-/***/ 51535:
+/***/ 32694:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 // ESM COMPAT FLAG
@@ -107258,6 +107267,233 @@ var Resizable = /** @class */ (function (_super) {
 }(external_react_.PureComponent));
 
 
+;// ./src/hooks/useResizableSeparator.js
+
+
+
+// Minimum keyboard step, and how many steps span the whole resize range.
+var MIN_STEP_PX = 16;
+var STEPS_PER_RANGE = 20;
+
+// The arrow that grows the panel points toward the edge the handle sits on
+// (dragging that edge outward enlarges the panel), so the keys depend on the
+// handle position, not just the axis.
+var ARROW_KEYS = {
+  right: {
+    increase: "ArrowRight",
+    decrease: "ArrowLeft"
+  },
+  left: {
+    increase: "ArrowLeft",
+    decrease: "ArrowRight"
+  },
+  bottom: {
+    increase: "ArrowDown",
+    decrease: "ArrowUp"
+  },
+  top: {
+    increase: "ArrowUp",
+    decrease: "ArrowDown"
+  }
+};
+var useResizableSeparator_clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+
+// Resolve a re-resizable size bound ("250px", "25%", 300, undefined) to pixels.
+// Percentages are relative to the parent along the resize axis; px/unitless are
+// taken as-is. Returns `fallback` when the value is absent or unparseable.
+var toPixels = (value, parentSize, fallback) => {
+  if (value == null) return fallback;
+  if (typeof value === "number") return value;
+  var text = String(value).trim();
+  var number = parseFloat(text);
+  if (Number.isNaN(number)) return fallback;
+  return text.endsWith("%") ? number / 100 * parentSize : number;
+};
+
+// Owns the resize state for ResizableWithHandle and exposes an accessible,
+// keyboard-operable separator (WCAG 2.1.1). A vertical handle bar (right/left)
+// resizes width; a horizontal bar (top/bottom) resizes height. All resizing is
+// done in pixels against the consumer's own min/max bounds, so it works both
+// for percentage splits (code/output) and fixed panels (the file sidebar).
+//
+// Width can optionally be CONTROLLED by the consumer: pass `controlledWidth`
+// plus `onWidthChange` and the hook stops owning the width — it renders the
+// consumer's value and reports drag/keyboard changes through the callback. The
+// internal "keep the manual size across default changes" logic is bypassed for
+// that axis, so a parent that drives the width programmatically (e.g. an
+// expand/collapse toggle) always wins, even after a manual drag.
+var useResizableSeparator = _ref => {
+  var {
+    handleDirection,
+    defaultWidth,
+    defaultHeight,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    controlledWidth,
+    onWidthChange
+  } = _ref;
+  var isWidthControlled = controlledWidth !== undefined;
+  var [internalWidth, setInternalWidth] = (0,external_react_.useState)(defaultWidth !== null && defaultWidth !== void 0 ? defaultWidth : "auto");
+  var [height, setHeight] = (0,external_react_.useState)(defaultHeight !== null && defaultHeight !== void 0 ? defaultHeight : "auto");
+  // Position within the allowed range, 0 (min) – 100 (max), for aria-valuenow.
+  var [valueNow, setValueNow] = (0,external_react_.useState)(50);
+
+  // Effective width and setter route to the consumer when width is controlled.
+  var width = isWidthControlled ? controlledWidth : internalWidth;
+  var setWidth = (0,external_react_.useCallback)(next => {
+    if (isWidthControlled) {
+      if (onWidthChange) onWidthChange(next);
+    } else {
+      setInternalWidth(next);
+    }
+  }, [isWidthControlled, onWidthChange]);
+  var resizableRef = (0,external_react_.useRef)(null);
+  var isVerticalHandle = ["right", "left"].includes(handleDirection);
+
+  // True once the user drags/keys the draggable axis; keeps their size on resize.
+  var hasManuallyResizedRef = (0,external_react_.useRef)(false);
+
+  // Current pixel size plus the pixel bounds for the active axis.
+  var getMetrics = (0,external_react_.useCallback)(() => {
+    var _instance$resizable;
+    var instance = resizableRef.current;
+    var parent = instance === null || instance === void 0 || (_instance$resizable = instance.resizable) === null || _instance$resizable === void 0 ? void 0 : _instance$resizable.parentElement;
+    if (!instance || !parent) return null;
+    var parentSize = isVerticalHandle ? parent.clientWidth : parent.clientHeight;
+    if (!parentSize) return null;
+    var currentPx = isVerticalHandle ? instance.size.width : instance.size.height;
+    var minPx = toPixels(isVerticalHandle ? minWidth : minHeight, parentSize, 0);
+    var maxPx = toPixels(isVerticalHandle ? maxWidth : maxHeight, parentSize, parentSize);
+    return {
+      currentPx,
+      minPx,
+      maxPx
+    };
+  }, [isVerticalHandle, minWidth, maxWidth, minHeight, maxHeight]);
+  var positionPercent = _ref2 => {
+    var {
+      currentPx,
+      minPx,
+      maxPx
+    } = _ref2;
+    return maxPx <= minPx ? 100 : useResizableSeparator_clamp(Math.round((currentPx - minPx) / (maxPx - minPx) * 100), 0, 100);
+  };
+
+  // Keep aria-valuenow in sync whenever the rendered size changes (drag included).
+  (0,external_react_.useEffect)(() => {
+    var metrics = getMetrics();
+    if (metrics) setValueNow(positionPercent(metrics));
+  }, [getMetrics, width, height]);
+  var applyPixels = (0,external_react_.useCallback)((px, metrics) => {
+    var clamped = Math.round(useResizableSeparator_clamp(px, metrics.minPx, metrics.maxPx));
+    if (isVerticalHandle) setWidth(clamped);else setHeight(clamped);
+    setValueNow(positionPercent((0,objectSpread2/* default */.A)((0,objectSpread2/* default */.A)({}, metrics), {}, {
+      currentPx: clamped
+    })));
+  }, [isVerticalHandle, setWidth]);
+
+  // When the draggable axis flips (e.g. the editor's right/bottom handle at the
+  // 720px breakpoint), forget the manual size so the new layout gets its default
+  // split. Declared before the sync effects so the reset wins that same render.
+  (0,external_react_.useEffect)(() => {
+    hasManuallyResizedRef.current = false;
+  }, [isVerticalHandle]);
+
+  // Sync each axis with its default when that default changes (breakpoint or
+  // window resize). If the user has dragged the draggable axis, keep their size
+  // and just re-clamp it; otherwise follow the default. Skipped for a controlled
+  // width — the consumer owns it entirely.
+  (0,external_react_.useEffect)(() => {
+    if (isWidthControlled) return;
+    if (isVerticalHandle && hasManuallyResizedRef.current) {
+      var metrics = getMetrics();
+      if (metrics) applyPixels(metrics.currentPx, metrics);
+    } else {
+      setInternalWidth(defaultWidth !== null && defaultWidth !== void 0 ? defaultWidth : "auto");
+    }
+  }, [defaultWidth, isVerticalHandle, getMetrics, applyPixels, isWidthControlled]);
+  (0,external_react_.useEffect)(() => {
+    if (!isVerticalHandle && hasManuallyResizedRef.current) {
+      var metrics = getMetrics();
+      if (metrics) applyPixels(metrics.currentPx, metrics);
+    } else {
+      setHeight(defaultHeight !== null && defaultHeight !== void 0 ? defaultHeight : "auto");
+    }
+  }, [defaultHeight, isVerticalHandle, getMetrics, applyPixels]);
+
+  // On drag end, persist the real rendered size (px) of the resized axis only,
+  // leaving the other axis at its default (e.g. height "100%").
+  var onResizeStop = () => {
+    var metrics = getMetrics();
+    if (!metrics) return;
+    hasManuallyResizedRef.current = true;
+    if (isVerticalHandle) setWidth(metrics.currentPx);else setHeight(metrics.currentPx);
+  };
+
+  // Explicit reset (double-click / Enter / Space): back to default, resume tracking.
+  var resetSize = () => {
+    hasManuallyResizedRef.current = false;
+    if (isVerticalHandle) setWidth(defaultWidth);else setHeight(defaultHeight);
+  };
+  var onKeyDown = event => {
+    var _ARROW_KEYS$handleDir;
+    var metrics = getMetrics();
+    if (!metrics) return;
+    var {
+      increase,
+      decrease
+    } = (_ARROW_KEYS$handleDir = ARROW_KEYS[handleDirection]) !== null && _ARROW_KEYS$handleDir !== void 0 ? _ARROW_KEYS$handleDir : {};
+    var step = Math.max(MIN_STEP_PX, Math.round((metrics.maxPx - metrics.minPx) / STEPS_PER_RANGE));
+    var nextPx;
+    switch (event.key) {
+      case decrease:
+        nextPx = metrics.currentPx - step;
+        break;
+      case increase:
+        nextPx = metrics.currentPx + step;
+        break;
+      case "Home":
+        nextPx = metrics.minPx;
+        break;
+      case "End":
+        nextPx = metrics.maxPx;
+        break;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        resetSize();
+        return;
+      default:
+        return;
+    }
+    event.preventDefault();
+    hasManuallyResizedRef.current = true;
+    applyPixels(nextPx, metrics);
+  };
+  var separatorProps = {
+    role: "separator",
+    tabIndex: 0,
+    "aria-label": "Resize panels",
+    "aria-orientation": isVerticalHandle ? "vertical" : "horizontal",
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    "aria-valuenow": valueNow,
+    "aria-valuetext": "".concat(valueNow, "%"),
+    onKeyDown,
+    onDoubleClick: resetSize
+  };
+  return {
+    resizableRef,
+    size: {
+      width,
+      height
+    },
+    onResizeStop,
+    separatorProps
+  };
+};
 ;// ./src/assets/stylesheets/ResizableWithHandle.scss
 // extracted by mini-css-extract-plugin
 
@@ -107266,87 +107502,50 @@ var jsx_runtime = __webpack_require__(74848);
 ;// ./src/utils/ResizableWithHandle.js
 
 
-var _excluded = ["children", "defaultWidth", "defaultHeight", "handleDirection", "handleClassName"];
+var _excluded = ["children", "defaultWidth", "defaultHeight", "handleDirection", "handleClassName", "width", "onWidthChange"];
 
 
 
 
-var VerticalHandle = _ref => {
-  var {
-    className
-  } = _ref;
-  return /*#__PURE__*/(0,jsx_runtime.jsx)("svg", {
-    "data-testid": "verticalHandle",
-    width: "44",
-    height: "56",
-    viewBox: "0 0 44 56",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className: className,
-    children: /*#__PURE__*/(0,jsx_runtime.jsx)("rect", {
-      x: "20",
-      width: "4",
-      height: "56",
-      rx: "2",
-      fill: "#616575"
-    })
-  });
-};
-var HorizontalHandle = _ref2 => {
-  var {
-    className
-  } = _ref2;
-  return /*#__PURE__*/(0,jsx_runtime.jsx)("svg", {
-    "data-testid": "horizontalHandle",
-    width: "56",
-    height: "44",
-    viewBox: "0 0 56 44",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className: className,
-    children: /*#__PURE__*/(0,jsx_runtime.jsx)("rect", {
-      x: "56",
-      y: "20",
-      width: "4",
-      height: "56",
-      rx: "2",
-      transform: "rotate(90 56 20)",
-      fill: "#616575"
-    })
-  });
-};
 var ResizableWithHandle = props => {
   var {
       children,
       defaultWidth,
       defaultHeight,
       handleDirection,
-      handleClassName
+      handleClassName,
+      // Optional controlled width: when `width` is provided the consumer owns it
+      // and receives drag/keyboard changes via `onWidthChange`. Destructured out
+      // so they never leak onto <Resizable> through ...rest.
+      width: controlledWidth,
+      onWidthChange
     } = props,
     rest = (0,objectWithoutProperties/* default */.A)(props, _excluded);
-  var [width, setWidth] = (0,external_react_.useState)("auto");
-  var [height, setHeight] = (0,external_react_.useState)("auto");
-  (0,external_react_.useMemo)(() => setWidth(defaultWidth), [defaultWidth]);
-  (0,external_react_.useMemo)(() => setHeight(defaultHeight), [defaultHeight]);
-  var onResizeStop = function onResizeStop() {
-    for (var _len = arguments.length, _ref3 = new Array(_len), _key = 0; _key < _len; _key++) {
-      _ref3[_key] = arguments[_key];
-    }
-    var [,,, d] = _ref3;
-    setWidth(width + d.width);
-    setHeight(height + d.height);
-  };
-  var handleComponent = ["right", "left"].includes(handleDirection) ? {
-    [handleDirection]: /*#__PURE__*/(0,jsx_runtime.jsx)(VerticalHandle, {
-      className: handleClassName
-    })
-  } : ["top", "bottom"].includes(handleDirection) ? {
-    [handleDirection]: /*#__PURE__*/(0,jsx_runtime.jsx)(HorizontalHandle, {
-      className: handleClassName
-    })
-  } : {};
+  var {
+    resizableRef,
+    size,
+    onResizeStop,
+    separatorProps
+  } = useResizableSeparator({
+    handleDirection,
+    defaultWidth,
+    defaultHeight,
+    // min/max bounds are also forwarded to <Resizable> via ...rest for drag.
+    minWidth: rest.minWidth,
+    maxWidth: rest.maxWidth,
+    minHeight: rest.minHeight,
+    maxHeight: rest.maxHeight,
+    controlledWidth,
+    onWidthChange
+  });
   var handleWrapperClass = "resizable-with-handle__handle resizable-with-handle__handle--".concat(handleDirection);
+  var handleComponent = {
+    [handleDirection]: /*#__PURE__*/(0,jsx_runtime.jsx)("span", (0,objectSpread2/* default */.A)({
+      className: "resizable-with-handle__bar resizable-with-handle__bar--".concat(handleDirection)
+    }, separatorProps))
+  };
   return /*#__PURE__*/(0,jsx_runtime.jsx)(Resizable, (0,objectSpread2/* default */.A)((0,objectSpread2/* default */.A)({
+    ref: resizableRef,
     enable: (0,objectSpread2/* default */.A)({
       top: false,
       right: false,
@@ -107355,20 +107554,21 @@ var ResizableWithHandle = props => {
     }, {
       [handleDirection]: true
     }),
-    handleComponent: handleComponent,
     handleWrapperClass: handleWrapperClass,
     onResizeStop: onResizeStop,
-    size: {
-      width: width,
-      height: height
-    },
+    size: size,
     handleStyles: {
+      top: {
+        top: "-10px"
+      },
       right: {
         height: "96%",
-        top: "2%"
+        top: "2%",
+        marginRight: "-13px"
       }
     },
-    handleClasses: handleClassName
+    handleClasses: handleClassName,
+    handleComponent: handleComponent
   }, rest), {}, {
     children: children
   }));
@@ -143054,7 +143254,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"grey-rpi-grey-15":"#d5d7dc","grey-rpi-grey-40":"#9497a4","grey-rpi-grey-5":"#f1f2f3","grey-rpi-grey-70":"#4a4d59","grey-rpf-white":"#fff","pythonrunnerContainer":"styles-module__pythonrunnerContainer---nPGz","htmlrunnerContainer":"styles-module__htmlrunnerContainer--KPi8D","resizeHandleContainer":"styles-module__resizeHandleContainer--FID6p","console":"styles-module__console--B8x1A","pythonGraphic":"styles-module__pythonGraphic--V+du6","pyodiderunner":"styles-module__pyodiderunner--DKTtB","active":"styles-module__active--bKVnT","visualOutput":"styles-module__visualOutput--WLaca","outputPanel":"styles-module__outputPanel--W1TnW","pythonConsoleLine":"styles-module__pythonConsoleLine--bwFQC","stderr":"styles-module__stderr--PIyhL","pythonrunnerInput":"styles-module__pythonrunnerInput--dOXEa","webConsole":"styles-module__webConsole--MTdnk","webConsoleLine":"styles-module__webConsoleLine--j31U1","consoleMessageContent":"styles-module__consoleMessageContent--vXp1a","consoleMessageInline":"styles-module__consoleMessageInline--5pNbC","consoleCount":"styles-module__consoleCount--JLMn5","string":"styles-module__string--YDxWc","stringInsideStructure":"styles-module__stringInsideStructure--KJtZp","number":"styles-module__number--7h5TG","boolean":"styles-module__boolean--WYb4I","null":"styles-module__null--BZCmR","undefined":"styles-module__undefined--nQkol","key":"styles-module__key--ZZTlD","error":"styles-module__error--RL5Lt","errorIcon":"styles-module__errorIcon--Gnn4-","warn":"styles-module__warn--B+MPR","warnIcon":"styles-module__warnIcon--Q82Y5","timestamp":"styles-module__timestamp--HDZxD","details":"styles-module__details--W1bGT","summary":"styles-module__summary--vms5d","nestedEntry":"styles-module__nestedEntry--OU25X","previewLink":"styles-module__previewLink--rWLII","previewHtml":"styles-module__previewHtml--oWG28","iframe":"styles-module__iframe--YfQ0V","codeHasBeenRun":"styles-module__codeHasBeenRun--fqiYL"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"grey-rpi-grey-15":"#d5d7dc","grey-rpi-grey-40":"#9497a4","grey-rpi-grey-5":"#f1f2f3","grey-rpi-grey-70":"#4a4d59","grey-rpf-white":"#fff","pythonrunnerContainer":"styles-module__pythonrunnerContainer---nPGz","htmlrunnerContainer":"styles-module__htmlrunnerContainer--KPi8D","resizeHandleContainer":"styles-module__resizeHandleContainer--FID6p","console":"styles-module__console--B8x1A","pythonGraphic":"styles-module__pythonGraphic--V+du6","pyodiderunner":"styles-module__pyodiderunner--DKTtB","active":"styles-module__active--bKVnT","visualOutput":"styles-module__visualOutput--WLaca","outputPanel":"styles-module__outputPanel--W1TnW","pythonConsoleLine":"styles-module__pythonConsoleLine--bwFQC","stderr":"styles-module__stderr--PIyhL","pythonrunnerInput":"styles-module__pythonrunnerInput--dOXEa","webConsole":"styles-module__webConsole--MTdnk","webConsoleLine":"styles-module__webConsoleLine--j31U1","consoleMessageContent":"styles-module__consoleMessageContent--vXp1a","consoleMessageInline":"styles-module__consoleMessageInline--5pNbC","consoleCount":"styles-module__consoleCount--JLMn5","string":"styles-module__string--YDxWc","stringInsideStructure":"styles-module__stringInsideStructure--KJtZp","number":"styles-module__number--7h5TG","boolean":"styles-module__boolean--WYb4I","null":"styles-module__null--BZCmR","undefined":"styles-module__undefined--nQkol","key":"styles-module__key--ZZTlD","error":"styles-module__error--RL5Lt","errorIcon":"styles-module__errorIcon--Gnn4-","warn":"styles-module__warn--B+MPR","warnIcon":"styles-module__warnIcon--Q82Y5","timestamp":"styles-module__timestamp--HDZxD","details":"styles-module__details--W1bGT","summary":"styles-module__summary--vms5d","nestedEntry":"styles-module__nestedEntry--OU25X","previewLink":"styles-module__previewLink--rWLII","previewHtml":"styles-module__previewHtml--oWG28","iframe":"styles-module__iframe--YfQ0V","codeHasBeenRun":"styles-module__codeHasBeenRun--fqiYL","focused":"styles-module__focused--a+AT8"});
 
 /***/ }),
 
@@ -143126,7 +143326,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","row":"styles-module__row--XtAJr","treeItem":"styles-module__treeItem--kbyYk","itemContent":"styles-module__itemContent--663gn","itemButton":"styles-module__itemButton--oB91C","itemTitle":"styles-module__itemTitle--a6Liw","itemFocused":"styles-module__itemFocused--SmUbE","level-0":"styles-module__level-0--5PVOR","level-1":"styles-module__level-1--vTMYv","level-2":"styles-module__level-2--Xx8Ie","level-3":"styles-module__level-3--ySuP4","level-4":"styles-module__level-4--7uciy","level-5":"styles-module__level-5--AEspR","level-6":"styles-module__level-6--c28W9","level-7":"styles-module__level-7--gU++Q","level-8":"styles-module__level-8--dmg5P","level-9":"styles-module__level-9--X73V0","level-10":"styles-module__level-10--VAKPI","level-11":"styles-module__level-11--5rqim","level-12":"styles-module__level-12--8cLBy","level-13":"styles-module__level-13--qlzYN","level-14":"styles-module__level-14--Q7bCT","level-15":"styles-module__level-15---1KaW","level-16":"styles-module__level-16--BCkZb","level-17":"styles-module__level-17--tM3Ht","level-18":"styles-module__level-18--GkyjF","level-19":"styles-module__level-19--kxLhM","level-20":"styles-module__level-20--sIjDn","itemContentEdit":"styles-module__itemContentEdit--cNmeE","inputError":"styles-module__inputError--zb21a","errorMessage":"styles-module__errorMessage--IT3hQ"});
+/* 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","row":"styles-module__row--XtAJr","treeItem":"styles-module__treeItem--kbyYk","itemContent":"styles-module__itemContent--663gn","itemTitle":"styles-module__itemTitle--a6Liw","itemButton":"styles-module__itemButton--oB91C","itemFocused":"styles-module__itemFocused--SmUbE","level-0":"styles-module__level-0--5PVOR","level-1":"styles-module__level-1--vTMYv","level-2":"styles-module__level-2--Xx8Ie","level-3":"styles-module__level-3--ySuP4","level-4":"styles-module__level-4--7uciy","level-5":"styles-module__level-5--AEspR","level-6":"styles-module__level-6--c28W9","level-7":"styles-module__level-7--gU++Q","level-8":"styles-module__level-8--dmg5P","level-9":"styles-module__level-9--X73V0","level-10":"styles-module__level-10--VAKPI","level-11":"styles-module__level-11--5rqim","level-12":"styles-module__level-12--8cLBy","level-13":"styles-module__level-13--qlzYN","level-14":"styles-module__level-14--Q7bCT","level-15":"styles-module__level-15---1KaW","level-16":"styles-module__level-16--BCkZb","level-17":"styles-module__level-17--tM3Ht","level-18":"styles-module__level-18--GkyjF","level-19":"styles-module__level-19--kxLhM","level-20":"styles-module__level-20--sIjDn","itemContentEdit":"styles-module__itemContentEdit--cNmeE","inputError":"styles-module__inputError--zb21a","errorMessage":"styles-module__errorMessage--IT3hQ"});
 
 /***/ }),
 
@@ -143150,7 +143350,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","sidebar":"styles-module__sidebar--Fu5Qi","bar":"styles-module__bar--fOlLf","optionsTop":"styles-module__optionsTop--2jNbs","optionsBottom":"styles-module__optionsBottom--PtwF4","option":"styles-module__option--MOGCu","userOption":"styles-module__userOption--qGt5j","selected":"styles-module__selected--avjSK","panel":"styles-module__panel--bHhSv","panelWithFooter":"styles-module__panelWithFooter--5ItsY","panelHeading":"styles-module__panelHeading--GRNt0","panelHeader":"styles-module__panelHeader--bAHfN","panelContent":"styles-module__panelContent--X7kot","panelButtons":"styles-module__panelButtons---y4S-","panelFooter":"styles-module__panelFooter--T1y-s"});
+/* 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","sidebar":"styles-module__sidebar--Fu5Qi","bar":"styles-module__bar--fOlLf","optionsTop":"styles-module__optionsTop--2jNbs","optionsBottom":"styles-module__optionsBottom--PtwF4","option":"styles-module__option--MOGCu","userOption":"styles-module__userOption--qGt5j","selected":"styles-module__selected--avjSK","panel":"styles-module__panel--bHhSv","panelsColumn":"styles-module__panelsColumn--3qf+3","panelsColumnTop":"styles-module__panelsColumnTop--OKT+V","panelsColumnFill":"styles-module__panelsColumnFill--v+VWp","panelWithFooter":"styles-module__panelWithFooter--5ItsY","panelHeading":"styles-module__panelHeading--GRNt0","panelHeader":"styles-module__panelHeader--bAHfN","panelContent":"styles-module__panelContent--X7kot","panelButtons":"styles-module__panelButtons---y4S-","panelFooter":"styles-module__panelFooter--T1y-s"});
 
 /***/ }),
 
@@ -369222,11 +369422,33 @@ const EditorInput = () => {
             }));
         }
     };
+    // Panel whose tab was just closed; used to restore keyboard focus to the
+    // newly-selected tab after re-render so focus is never dropped to <body>
+    // (WCAG 2.4.3 Focus Order).
+    const pendingFocusPanel = (0, react_1.useRef)(null);
     const closeFileTab = (e, file) => {
         e.stopPropagation();
+        pendingFocusPanel.current = openedFilesIdsPanels.findIndex((ids) => ids.includes(file.id));
         dispatch((0, EditorSlice_1.closeFile)({ id: file.id }));
     };
     const tabRefs = (0, react_1.useRef)(projectFiles.map(() => (0, react_1.createRef)()));
+    // After a tab closes, move focus to the tab that becomes selected.
+    (0, react_1.useEffect)(() => {
+        const panelIndex = pendingFocusPanel.current;
+        if (panelIndex === null || panelIndex < 0)
+            return;
+        pendingFocusPanel.current = null;
+        const panel = openedFilesIdsPanels[panelIndex];
+        if (!panel || panel.length === 0)
+            return;
+        const focusIndex = focussedFileIndices[panelIndex] ?? 0;
+        const fileId = panel[focusIndex];
+        if (!fileId)
+            return;
+        const refIndex = projectFiles.findIndex((file) => file.id === fileId);
+        const tabElement = tabRefs.current[refIndex]?.current?.closest('[role="tab"]');
+        tabElement?.focus();
+    }, [openedFilesIdsPanels, focussedFileIndices, projectFiles]);
     (0, react_1.useEffect)(() => {
         if (!project?.components)
             return;
@@ -369265,8 +369487,8 @@ const EditorInput = () => {
     const readonlyTooltipTop = (readonlyRef.current?.offsetTop ?? 0) +
         (readonlyRef.current?.offsetHeight ?? 0);
     const readonlyTooltipRight = readonlyRef.current?.offsetLeft ?? 0;
-    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.editorInput, children: openedFiles.map((panel, panelIndex) => ((0, jsx_runtime_1.jsxs)(react_tabs_1.Tabs, { selectedIndex: focussedFileIndices[panelIndex], 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: panelIndex, children: panel.map((file, fileIndex) => file && ((0, jsx_runtime_1.jsxs)(DraggableTab_1.default, { fileIndex: fileIndex, panelIndex: panelIndex, 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)] }), defaultFileName &&
-                                                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, {})] }), panel.map((file, i) => file ? ((0, jsx_runtime_1.jsxs)(react_tabs_1.TabPanel, { children: [readOnly && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.readOnlyContainer, ...hoverProps, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "View mode. Remix to edit.", visible: hovered, position: "fixed", style: {
+    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.editorInput, role: "region", "aria-label": "Code editor", children: openedFiles.map((panel, panelIndex) => ((0, jsx_runtime_1.jsxs)(react_tabs_1.Tabs, { selectedIndex: focussedFileIndices[panelIndex], 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: panelIndex, children: panel.map((file, fileIndex) => file && ((0, jsx_runtime_1.jsxs)(DraggableTab_1.default, { fileIndex: fileIndex, panelIndex: panelIndex, 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)] }), defaultFileName &&
+                                                file.fullName !== defaultFileName && ((0, jsx_runtime_1.jsx)(Button_1.default, { className: styles_module_scss_1.default.closeBtn, label: `Close ${file.fullName}`, 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, {})] }), panel.map((file, i) => file ? ((0, jsx_runtime_1.jsxs)(react_tabs_1.TabPanel, { children: [readOnly && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.readOnlyContainer, ...hoverProps, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "View mode. Remix to edit.", visible: hovered, position: "fixed", style: {
                                             top: readonlyTooltipTop,
                                             right: readonlyTooltipRight,
                                         } }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.readOnlyBanner, ref: readonlyRef, 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" })] })] })), (0, jsx_runtime_1.jsx)(EditorPanel_1.default, { file: file }, file.id)] }, file.id)) : null)] }, panelIndex))) }) }));
@@ -369350,7 +369572,7 @@ const ErrorMessage = () => {
     }, [error]);
     if (!error)
         return null;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, children: [(0, jsx_runtime_1.jsx)("pre", { ref: ref, className: styles_module_scss_1.default.message }), (0, jsx_runtime_1.jsx)(ErrorDetails_1.ErrorDetails, {})] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, role: "alert", "aria-label": "Run error", children: [(0, jsx_runtime_1.jsx)("pre", { ref: ref, className: styles_module_scss_1.default.message }), (0, jsx_runtime_1.jsx)(ErrorDetails_1.ErrorDetails, {})] }));
 };
 exports["default"] = ErrorMessage;
 
@@ -369394,7 +369616,7 @@ const styles_module_scss_1 = __importDefault(__webpack_require__(39412));
 const stores_1 = __webpack_require__(32132);
 const Output = ({ packageApiUrl }) => {
     const project = (0, stores_1.useAppSelector)((state) => state.editor.project);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ExternalFiles_1.default, {}), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.projRunnerContainer, "data-testid": "output", children: (0, jsx_runtime_1.jsx)(RunnerFactory_1.default, { projectType: project.project_type, packageApiUrl: packageApiUrl }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ExternalFiles_1.default, {}), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.projRunnerContainer, "data-testid": "output", role: "region", "aria-label": "Output", children: (0, jsx_runtime_1.jsx)(RunnerFactory_1.default, { projectType: project.project_type, packageApiUrl: packageApiUrl }) })] }));
 };
 exports["default"] = Output;
 
@@ -369417,7 +369639,7 @@ const SvgIcon_1 = __webpack_require__(82917);
 const alert_svg_1 = __importDefault(__webpack_require__(11367));
 const alertTriangle_svg_1 = __importDefault(__webpack_require__(30103));
 function HtmlConsole({ consoleLogs, }) {
-    return ((0, jsx_runtime_1.jsx)("pre", { className: (0, classnames_1.default)(styles_module_scss_1.default.console, styles_module_scss_1.default.webConsole), children: consoleLogs.length === 0 ? ((0, jsx_runtime_1.jsx)("span", { children: "No logs received yet" })) : (consoleLogs.map((log, i) => {
+    return ((0, jsx_runtime_1.jsx)("pre", { className: (0, classnames_1.default)(styles_module_scss_1.default.console, styles_module_scss_1.default.webConsole), role: "log", "aria-live": "polite", "aria-label": "Console output", children: consoleLogs.length === 0 ? ((0, jsx_runtime_1.jsx)("span", { children: "No logs received yet" })) : (consoleLogs.map((log, i) => {
             return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.webConsoleLine, styles_module_scss_1.default[log.method]), children: [(0, jsx_runtime_1.jsxs)("span", { children: [(log.method === "error" || log.method === "warn") && ((0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: log.method === "error" ? alert_svg_1.default : alertTriangle_svg_1.default, size: 12, className: log.method === "error"
                                     ? styles_module_scss_1.default.errorIcon
                                     : styles_module_scss_1.default.warnIcon })), log.timestamp && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.timestamp, children: log.timestamp }))] }), (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.consoleMessageContent, children: (0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.consoleMessageInline, children: [log.data?.map((node, idx) => ((0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)(LogRenderer_1.default, { node: node }), log.data && idx < log.data.length - 1 && " "] }, idx))), log.count && log.count > 1 && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.consoleCount, children: log.count }))] }) })] }, i));
@@ -369460,7 +369682,7 @@ const scripts_1 = __webpack_require__(57621);
 const Errors_1 = __webpack_require__(20339);
 const NotFoundPage_1 = __webpack_require__(87931);
 const HtmlConsole_1 = __importDefault(__webpack_require__(55339));
-const ResizableWithHandle_1 = __importDefault(__webpack_require__(51535));
+const ResizableWithHandle_1 = __importDefault(__webpack_require__(32694));
 const BROADCAST_CHANNEL = "html_runner_channel";
 var BroadcastMessageType;
 (function (BroadcastMessageType) {
@@ -369494,6 +369716,9 @@ function HtmlRunner() {
     // back/forward/refresh buttons must drive page navigation.
     const shouldUseBrowserHistory = isPreviewMode || isPreviewUrl;
     const [iframeKey, setIframeKey] = (0, react_1.useState)(0);
+    // Chrome does not apply `:focus` to an iframe element (focus is delegated
+    // into its document), so track focus via events to show a visible ring.
+    const [iframeFocused, setIframeFocused] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
         shouldUseBrowserHistoryRef.current = shouldUseBrowserHistory;
     }, [shouldUseBrowserHistory]);
@@ -369723,8 +369948,9 @@ function HtmlRunner() {
     const openInNewTabLink = ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.previewLink, onClick: () => openPreview(runningFilePath), children: (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: open_in_new_tab_svg_1.default, size: 16 }) }));
     const iframeClasses = (0, classnames_1.default)(styles_module_scss_1.default.iframe, {
         [styles_module_scss_1.default.codeHasBeenRun]: codeHasBeenRun,
+        [styles_module_scss_1.default.focused]: iframeFocused,
     });
-    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: "\n            accelerometer 'none';\n            camera 'none';\n            encrypted-media;\n            fullscreen;\n            picture-in-picture;\n            geolocation 'none';\n            gyroscope 'none';\n            magnetometer 'none';\n            microphone 'none';\n            midi 'none';\n            payment 'none';\n            usb 'none';\n          ", id: "output-frame", title: "HTML Output Preview", ref: output, onLoad: iframeReload, src: "about:blank" }, iframeKey)) }), !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: "\n            accelerometer 'none';\n            camera 'none';\n            encrypted-media;\n            fullscreen;\n            picture-in-picture;\n            geolocation 'none';\n            gyroscope 'none';\n            magnetometer 'none';\n            microphone 'none';\n            midi 'none';\n            payment 'none';\n            usb 'none';\n          ", id: "output-frame", title: "HTML Output Preview", ref: output, onLoad: iframeReload, onFocus: () => setIframeFocused(true), onBlur: () => setIframeFocused(false), 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;
 
@@ -370373,7 +370599,11 @@ const OutputTabPanel = ({ title, icon: Icon, readOnly, children, outputWrapperCl
     if (outputOnly) {
         return children;
     }
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.outputPanel, outputWrapperClassName), children: (0, jsx_runtime_1.jsxs)(react_tabs_1.Tabs, { forceRenderTabPanel: true, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("tabContainer", { readOnly: readOnly }), children: (0, jsx_runtime_1.jsx)(react_tabs_1.TabList, { className: (0, classnames_1.default)("react-tabs__tab-list", { readOnly: readOnly }), children: (0, jsx_runtime_1.jsx)(react_tabs_1.Tab, { className: (0, classnames_1.default)("react-tabs__tab", { readOnly: readOnly }), children: (0, jsx_runtime_1.jsxs)(Text_1.Text, { size: 12, weight: "medium", className: "tabText", children: [(0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: Icon, size: 18 }), title, extraTabContent] }) }, 0) }) }), (0, jsx_runtime_1.jsx)(react_tabs_1.TabPanel, { className: (0, classnames_1.default)("react-tabs__tab-panel", tabPanelClassName), children: children }, 0)] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.outputPanel, outputWrapperClassName), children: (0, jsx_runtime_1.jsxs)(react_tabs_1.Tabs, { forceRenderTabPanel: true, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("tabContainer", { readOnly: readOnly }), children: (0, jsx_runtime_1.jsx)(react_tabs_1.TabList, { className: (0, classnames_1.default)("react-tabs__tab-list", { readOnly: readOnly }), children: (0, jsx_runtime_1.jsx)(react_tabs_1.Tab, { className: (0, classnames_1.default)("react-tabs__tab", { readOnly: readOnly }), 
+                            // A single, non-switchable output tab is a label, not an
+                            // interactive control — keep it out of the keyboard tab order so
+                            // focus does not land on an unlabelled, invisible stop.
+                            tabIndex: "-1", children: (0, jsx_runtime_1.jsxs)(Text_1.Text, { size: 12, weight: "medium", className: "tabText", children: [(0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: Icon, size: 18 }), title, extraTabContent] }) }, 0) }) }), (0, jsx_runtime_1.jsx)(react_tabs_1.TabPanel, { className: (0, classnames_1.default)("react-tabs__tab-panel", tabPanelClassName), children: children }, 0)] }) }));
 };
 exports.OutputTabPanel = OutputTabPanel;
 
@@ -370397,7 +370627,7 @@ const stores_1 = __webpack_require__(32132);
 const OutputTabPanel_1 = __webpack_require__(25931);
 const console_svg_1 = __importDefault(__webpack_require__(20602));
 const preview_svg_1 = __importDefault(__webpack_require__(80417));
-const ResizableWithHandle_1 = __importDefault(__webpack_require__(51535));
+const ResizableWithHandle_1 = __importDefault(__webpack_require__(32694));
 const usePyodideRunner_1 = __webpack_require__(65587);
 const consoleInput_1 = __webpack_require__(35660);
 /**
@@ -370418,7 +370648,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: "VNC", 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, role: "log", "aria-live": "polite", "aria-label": "Program output terminal" })] }), (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;
 
@@ -370500,7 +370730,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: 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, {})) }));
+    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, role: "region", "aria-label": "Visual program output" })) : ((0, jsx_runtime_1.jsx)(VisualOutputPaneEmpty_1.default, {})) }));
 };
 const elementFromProps = (map) => {
     const tag = map.get("tag");
@@ -371966,27 +372196,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(74848);
-const react_1 = __webpack_require__(51649);
 const 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 }));
+    return ((0, jsx_runtime_1.jsx)(SidebarPanel_1.default, { resizable: false, panelContentClassName: styles_module_scss_1.default.panelContent, className: styles_module_scss_1.default.curriculumPanel, children: curriculumContent }));
 };
 exports["default"] = CurriculumPanel;
 
@@ -372005,13 +372221,13 @@ const jsx_runtime_1 = __webpack_require__(74848);
 const SidebarPanel_1 = __importDefault(__webpack_require__(83617));
 const FileTree_1 = __webpack_require__(88675);
 const stores_1 = __webpack_require__(32132);
-const FilePanel = () => {
+const FilePanel = ({ resizable = true, }) => {
     const project = (0, stores_1.useAppSelector)((state) => state.editor.project);
     const projectComponents = (0, stores_1.useAppSelector)((state) => state.editor.project.components);
     if (!project || !project.components) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(SidebarPanel_1.default, { children: projectComponents?.length > 0 && (0, jsx_runtime_1.jsx)(FileTree_1.FileTree, {}) }));
+    return ((0, jsx_runtime_1.jsx)(SidebarPanel_1.default, { resizable: resizable, children: projectComponents?.length > 0 && (0, jsx_runtime_1.jsx)(FileTree_1.FileTree, {}) }));
 };
 exports["default"] = FilePanel;
 
@@ -372095,17 +372311,23 @@ const useHover_1 = __webpack_require__(78556);
 const button_dots_svg_1 = __importDefault(__webpack_require__(80054));
 const SvgIcon_1 = __webpack_require__(82917);
 const stores_1 = __webpack_require__(32132);
-const BasicItemContent = ({ item, onContextMenu, }) => {
+const BasicItemContent = ({ item, onOpenMenu, isMenuOpen, triggerRef, }) => {
     const itemData = item.getItemData();
     const isSharedProject = (0, stores_1.useAppSelector)((state) => state.editor.isSharedProject);
     const { hovered, hoverProps } = (0, useHover_1.useHover)(useHover_1.TOOLTIP_SHOW_DELAY_MS);
     if (item.isRenaming()) {
         return (0, jsx_runtime_1.jsx)(ItemEdit_1.ItemEdit, { item: item });
     }
-    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);
+    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: (e) => {
+                    e.preventDefault();
+                    onOpenMenu({ x: e.clientX, y: e.clientY });
+                }, 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)("button", { ref: triggerRef, type: "button", className: styles_module_scss_1.default.itemButton, "aria-label": `More actions for ${item.getItemName()}`, "aria-haspopup": "menu", "aria-expanded": isMenuOpen, onClick: (e) => {
                             e.stopPropagation();
-                        } }))] }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: item.getItemName(), visible: hovered, position: "bottom" })] }));
+                            // Anchor to the button's box, not the click point: a keyboard
+                            // activation reports clientX/Y of 0.
+                            const rect = e.currentTarget.getBoundingClientRect();
+                            onOpenMenu({ x: rect.left, y: rect.bottom });
+                        }, children: (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { size: 16, SvgElement: button_dots_svg_1.default, "aria-hidden": "true", focusable: "false" }) }))] }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: item.getItemName(), visible: hovered, position: "bottom" })] }));
 };
 exports.BasicItemContent = BasicItemContent;
 
@@ -372121,8 +372343,8 @@ exports.FileItem = void 0;
 const jsx_runtime_1 = __webpack_require__(74848);
 const BasicItemContent_1 = __webpack_require__(34071);
 const ItemContextMenu_1 = __webpack_require__(54035);
-const FileItem = ({ item, onContextMenu, isContextMenuOpen, contextMenuPosition, onCloseContextMenu, }) => {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(BasicItemContent_1.BasicItemContent, { item: item, onContextMenu: onContextMenu }), (0, jsx_runtime_1.jsx)(ItemContextMenu_1.ItemContextMenu, { item: item, menuPosition: contextMenuPosition, isOpened: isContextMenuOpen, onClose: onCloseContextMenu })] }));
+const FileItem = ({ item, onOpenMenu, isContextMenuOpen, contextMenuPosition, onCloseContextMenu, triggerRef, }) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(BasicItemContent_1.BasicItemContent, { item: item, onOpenMenu: onOpenMenu, isMenuOpen: isContextMenuOpen, triggerRef: triggerRef }), (0, jsx_runtime_1.jsx)(ItemContextMenu_1.ItemContextMenu, { item: item, menuPosition: contextMenuPosition, isOpened: isContextMenuOpen, onClose: onCloseContextMenu })] }));
 };
 exports.FileItem = FileItem;
 
@@ -372144,12 +372366,12 @@ const arrow_right_svg_1 = __importDefault(__webpack_require__(17297));
 const ItemContextMenu_1 = __webpack_require__(54035);
 const BasicItemContent_1 = __webpack_require__(34071);
 const SvgIcon_1 = __webpack_require__(82917);
-const FolderItem = ({ item, onContextMenu, onCloseContextMenu, isContextMenuOpen, onImport, contextMenuPosition, }) => {
-    const arrowIcon = item.isExpanded() ? ((0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { style: { rotate: "90deg" }, SvgElement: arrow_right_svg_1.default, size: 16, "aria-hidden": "true", focusable: "false" })) : ((0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: arrow_right_svg_1.default, size: 16, "aria-hidden": "true", focusable: "false" }));
+const FolderItem = ({ item, onOpenMenu, onCloseContextMenu, isContextMenuOpen, onImport, contextMenuPosition, triggerRef, }) => {
+    const arrowIcon = ((0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { style: item.isExpanded() ? { rotate: "90deg" } : undefined, SvgElement: arrow_right_svg_1.default, size: 16, "aria-hidden": "true", focusable: "false" }));
     const handleFileImport = (files) => {
         onImport(files, item);
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [arrowIcon, (0, jsx_runtime_1.jsx)(BasicItemContent_1.BasicItemContent, { item: item, onContextMenu: onContextMenu }), (0, jsx_runtime_1.jsx)(FileImport_1.FileImport, { onFilesUpload: handleFileImport, allowMultiple: true, children: (openImportFileDialog) => ((0, jsx_runtime_1.jsx)(ItemContextMenu_1.ItemContextMenu, { item: item, menuPosition: contextMenuPosition, isOpened: isContextMenuOpen, onClose: onCloseContextMenu, openImportFileDialog: openImportFileDialog })) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [arrowIcon, (0, jsx_runtime_1.jsx)(BasicItemContent_1.BasicItemContent, { item: item, onOpenMenu: onOpenMenu, isMenuOpen: isContextMenuOpen, triggerRef: triggerRef }), (0, jsx_runtime_1.jsx)(FileImport_1.FileImport, { onFilesUpload: handleFileImport, allowMultiple: true, children: (openImportFileDialog) => ((0, jsx_runtime_1.jsx)(ItemContextMenu_1.ItemContextMenu, { item: item, menuPosition: contextMenuPosition, isOpened: isContextMenuOpen, onClose: onCloseContextMenu, openImportFileDialog: openImportFileDialog })) })] }));
 };
 exports.FolderItem = FolderItem;
 
@@ -372319,6 +372541,7 @@ exports.ItemEdit = void 0;
 const jsx_runtime_1 = __webpack_require__(74848);
 const react_1 = __webpack_require__(51649);
 const classnames_1 = __importDefault(__webpack_require__(46942));
+const ProjectTypes_1 = __webpack_require__(27130);
 const styles_module_scss_1 = __importDefault(__webpack_require__(10614));
 const FileTreeContext_1 = __webpack_require__(5323);
 const SvgIcon_1 = __webpack_require__(82917);
@@ -372332,6 +372555,13 @@ const ItemEdit = ({ item }) => {
     const { id, type } = item.getItemData();
     const children = item.getParent()?.getChildren() || [];
     const { onChange, ...restTreeInputProps } = item.getRenameInputProps();
+    const kind = type === ProjectTypes_1.ProjectComponentType.DIR ? "folder" : "file";
+    const currentName = item.getItemName();
+    // Empty name means this is a freshly created draft, not a rename.
+    const inputLabel = currentName
+        ? `Rename ${kind} ${currentName}`
+        : `Name for new ${kind}`;
+    const errorId = `rename-error-${id}`;
     const handleRenameSubmission = (value) => {
         const initialValue = item.getItemName();
         const hasValueChanged = initialValue !== value.trim();
@@ -372361,7 +372591,7 @@ const ItemEdit = ({ item }) => {
     };
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.itemContentEdit, {
             [styles_module_scss_1.default.inputError]: !!error,
-        }), children: [(0, jsx_runtime_1.jsx)(ItemIcon_1.ItemIcon, { itemData: item.getItemData() }), (0, jsx_runtime_1.jsx)("input", { name: "Item name", "aria-label": "Rename file or folder", onChange: handleChange, onKeyDown: handleKeyDown, ...restTreeInputProps, onBlur: handleBlur }), error && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.errorMessage, children: [(0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: alert_svg_1.default, size: 16 }), (0, jsx_runtime_1.jsx)(Text_1.Text, { size: 12, children: error })] }))] }));
+        }), children: [(0, jsx_runtime_1.jsx)(ItemIcon_1.ItemIcon, { itemData: item.getItemData() }), (0, jsx_runtime_1.jsx)("input", { name: "Item name", "aria-label": inputLabel, "aria-invalid": !!error, "aria-describedby": error ? errorId : undefined, onChange: handleChange, onKeyDown: handleKeyDown, ...restTreeInputProps, onBlur: handleBlur }), error && ((0, jsx_runtime_1.jsxs)("div", { id: errorId, role: "alert", className: styles_module_scss_1.default.errorMessage, children: [(0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: alert_svg_1.default, size: 16, "aria-hidden": "true", focusable: "false" }), (0, jsx_runtime_1.jsx)(Text_1.Text, { size: 12, children: error })] }))] }));
 };
 exports.ItemEdit = ItemEdit;
 
@@ -372384,7 +372614,7 @@ const ProjectTypes_1 = __webpack_require__(27130);
 const SvgIcon_1 = __webpack_require__(82917);
 const ItemIcon = ({ itemData }) => {
     if (itemData.type === ProjectTypes_1.ProjectComponentType.DIR) {
-        return (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: folder_svg_1.default, size: 18 });
+        return ((0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: folder_svg_1.default, size: 18, "aria-hidden": "true", focusable: "false" }));
     }
     return (0, jsx_runtime_1.jsx)(FileIcon_1.default, { ext: itemData.extension });
 };
@@ -372416,16 +372646,24 @@ const FileTreeItem = ({ item, guides, activeLevel, isContextMenuAvailable, }) =>
     const { layers, positions, sizes } = (0, treeGuides_1.getItemGuidesStyles)(guides, activeLevel);
     const [isContextMenuOpen, setIsContextMenuOpen] = (0, react_1.useState)(false);
     const [contextMenuPosition, setContextMenuPosition] = (0, react_1.useState)({ x: 0, y: 0 });
-    const handleOpenContextMenu = (e) => {
+    const triggerRef = (0, react_1.useRef)(null);
+    const handleOpenContextMenu = (position) => {
         if (!isContextMenuAvailable)
             return;
-        e.preventDefault();
         setIsContextMenuOpen(true);
-        setContextMenuPosition({ x: e.clientX, y: e.clientY });
+        setContextMenuPosition(position);
     };
     const handleCloseContextMenu = () => {
         setIsContextMenuOpen(false);
         setContextMenuPosition({ x: 0, y: 0 });
+        // On close, return focus to the trigger button — but only if focus was
+        // lost (e.g. Escape), not when an action moved it (rename input, modal).
+        requestAnimationFrame(() => {
+            const active = document.activeElement;
+            if (!active || active === document.body) {
+                triggerRef.current?.focus();
+            }
+        });
     };
     return ((0, jsx_runtime_1.jsx)("div", { ...item.getProps(), className: (0, classnames_1.default)(styles_module_scss_1.default.row, styles_module_scss_1.default[`level-${level}`]), style: {
             ["--guides-bg"]: layers.join(","),
@@ -372436,7 +372674,7 @@ const FileTreeItem = ({ item, guides, activeLevel, isContextMenuAvailable, }) =>
                 [styles_module_scss_1.default.itemExpanded]: item.isExpanded(),
                 [styles_module_scss_1.default.itemSelected]: item.isSelected(),
                 [styles_module_scss_1.default.itemFolder]: item.isFolder(),
-            }), children: item.isFolder() ? ((0, jsx_runtime_1.jsx)(FolderItem_1.FolderItem, { item: item, onContextMenu: handleOpenContextMenu, onCloseContextMenu: handleCloseContextMenu, isContextMenuOpen: isContextMenuOpen, onImport: importFiles, contextMenuPosition: contextMenuPosition })) : ((0, jsx_runtime_1.jsx)(FileItem_1.FileItem, { item: item, onContextMenu: handleOpenContextMenu, isContextMenuOpen: isContextMenuOpen, contextMenuPosition: contextMenuPosition, onCloseContextMenu: handleCloseContextMenu })) }) }));
+            }), children: item.isFolder() ? ((0, jsx_runtime_1.jsx)(FolderItem_1.FolderItem, { item: item, onOpenMenu: handleOpenContextMenu, onCloseContextMenu: handleCloseContextMenu, isContextMenuOpen: isContextMenuOpen, onImport: importFiles, contextMenuPosition: contextMenuPosition, triggerRef: triggerRef })) : ((0, jsx_runtime_1.jsx)(FileItem_1.FileItem, { item: item, onOpenMenu: handleOpenContextMenu, isContextMenuOpen: isContextMenuOpen, contextMenuPosition: contextMenuPosition, onCloseContextMenu: handleCloseContextMenu, triggerRef: triggerRef })) }) }));
 };
 exports.FileTreeItem = FileTreeItem;
 
@@ -372580,31 +372818,41 @@ const stub = (id) => ({
  */
 const useFileTree = ({ projectFiles, onRename, onDrop, onOpenFile, rootId, readOnly = false, }) => {
     const [focusedItem, setFocusedItem] = (0, react_2.useState)(null);
+    // Shared activation logic for both mouse (click) and keyboard (Enter/Space).
+    const handlePrimaryAction = (item) => {
+        // handle files
+        if (!item.isFolder() && !item.isRenaming()) {
+            onOpenFile(item.getId());
+            return;
+        }
+        // handle folders
+        item.isExpanded() ? item.collapse() : item.expand();
+    };
+    // Only activate when a tree row holds focus, so Enter/Space aren't stolen
+    // from focusable children like the "more actions" button.
+    const isTreeItemFocused = () => document.activeElement?.getAttribute("role") === "treeitem";
+    const canActivate = (tree) => isTreeItemFocused() && !tree.isRenamingItem() && !tree.getState().dnd;
     const customClickBehavior = {
         itemInstance: {
-            getProps: ({ tree, item, prev }) => ({
-                ...prev?.(),
-                onClick: (e) => {
-                    item.primaryAction();
-                    item.setFocused();
-                    if (!item.isFolder() && !item.isRenaming()) {
-                        onOpenFile(item.getId());
-                        return;
-                    }
-                    if (item.isExpanded()) {
-                        item.collapse();
-                    }
-                    else {
-                        item.expand();
-                    }
-                },
-                onDoubleClick: () => {
-                    item.primaryAction();
-                    if (!readOnly) {
-                        item.startRenaming();
-                    }
-                },
-            }),
+            getProps: ({ item, prev }) => {
+                const isFolder = item.isFolder();
+                const state = item.isExpanded() ? "expanded" : "collapsed";
+                return {
+                    ...prev?.(),
+                    ...(isFolder && {
+                        "aria-label": `${item.getItemName()}, ${state}`,
+                    }),
+                    onClick: () => {
+                        item.setFocused();
+                        item.primaryAction();
+                    },
+                    onDoubleClick: () => {
+                        if (!readOnly) {
+                            item.startRenaming();
+                        }
+                    },
+                };
+            },
         },
     };
     const tree = (0, react_1.useTree)({
@@ -372614,6 +372862,23 @@ const useFileTree = ({ projectFiles, onRename, onDrop, onOpenFile, rootId, readO
         getItemName: (item) => (0, projectHelpers_1.getFullComponentName)(item.getItemData()),
         isItemFolder: (item) => item.getItemData().type === ProjectTypes_1.ProjectComponentType.DIR,
         onRename,
+        onPrimaryAction: handlePrimaryAction,
+        ignoreHotkeysOnInputs: true,
+        // Bind Enter/Space to primaryAction so keyboard users can open files and
+        // expand/collapse folders. Guarded so they don't fire on renaming/dragging.
+        hotkeys: {
+            customActivateItem: {
+                hotkey: "Enter",
+                isEnabled: (tree) => canActivate(tree) && !!tree.getFocusedItem(),
+                handler: (_e, tree) => tree.getFocusedItem()?.primaryAction(),
+            },
+            customActivateItemWithSpace: {
+                hotkey: "Space",
+                preventDefault: true,
+                isEnabled: (tree) => canActivate(tree) && !!tree.getFocusedItem(),
+                handler: (_e, tree) => tree.getFocusedItem()?.primaryAction(),
+            },
+        },
         dataLoader: {
             getItem: (itemId) => {
                 const item = projectFiles.find((item) => item.id === itemId);
@@ -372633,6 +372898,7 @@ const useFileTree = ({ projectFiles, onRename, onDrop, onOpenFile, rootId, readO
         features: [
             core_1.syncDataLoaderFeature,
             core_1.selectionFeature,
+            core_1.hotkeysCoreFeature,
             core_1.expandAllFeature,
             customClickBehavior,
             core_1.dragAndDropFeature,
@@ -372894,7 +373160,7 @@ const FileTree = () => {
         removeComponent,
         importFolder,
     };
-    return ((0, jsx_runtime_1.jsxs)(FileTreeContext_1.TreeContext.Provider, { value: treeCtx, children: [(0, jsx_runtime_1.jsx)(FileTreeActions_1.FileTreeActions, { hasExpandedNodes: Boolean(tree.getState().expandedItems.length) }), treeItems.length > 0 ? ((0, jsx_runtime_1.jsxs)("div", { ...tree.getContainerProps(), className: styles_module_scss_1.default.tree, children: [treeItems.map((item, i) => ((0, jsx_runtime_1.jsx)(FileTreeItem_1.FileTreeItem, { item: item, guides: guidesByIndex[i], activeLevel: activeLevel, isContextMenuAvailable: !isReadOnly }, item.getId()))), (0, jsx_runtime_1.jsx)("div", { style: tree.getDragLineStyle(), className: styles_module_scss_1.default.dragline })] })) : ((0, jsx_runtime_1.jsx)(EmptyStateMessage_1.EmptyStateMessage, {}))] }));
+    return ((0, jsx_runtime_1.jsxs)(FileTreeContext_1.TreeContext.Provider, { value: treeCtx, children: [(0, jsx_runtime_1.jsx)(FileTreeActions_1.FileTreeActions, { hasExpandedNodes: Boolean(tree.getState().expandedItems.length) }), treeItems.length > 0 ? ((0, jsx_runtime_1.jsxs)("div", { ...tree.getContainerProps("Project files"), className: styles_module_scss_1.default.tree, children: [treeItems.map((item, i) => ((0, jsx_runtime_1.jsx)(FileTreeItem_1.FileTreeItem, { item: item, guides: guidesByIndex[i], activeLevel: activeLevel, isContextMenuAvailable: !isReadOnly }, item.getId()))), (0, jsx_runtime_1.jsx)("div", { style: tree.getDragLineStyle(), className: styles_module_scss_1.default.dragline })] })) : ((0, jsx_runtime_1.jsx)(EmptyStateMessage_1.EmptyStateMessage, {}))] }));
 };
 exports.FileTree = FileTree;
 
@@ -372915,6 +373181,7 @@ const stores_1 = __webpack_require__(32132);
 const classnames_1 = __importDefault(__webpack_require__(46942));
 const FilePanel_1 = __importDefault(__webpack_require__(7802));
 const SidebarBar_1 = __importDefault(__webpack_require__(26624));
+const SidebarPanelsColumn_1 = __importDefault(__webpack_require__(91592));
 const SvgIcon_1 = __webpack_require__(82917);
 const folder_svg_1 = __importDefault(__webpack_require__(97091));
 const home_svg_1 = __importDefault(__webpack_require__(69046));
@@ -372950,7 +373217,7 @@ const getSidebarOptions = (initials, homeAction, isCodeVisible, curriculumCompon
                 icon: () => (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: folder_svg_1.default, size: 24 }),
                 title: "Files",
                 position: "top",
-                panel: FilePanel_1.default,
+                panel: ({ resizable }) => ((0, jsx_runtime_1.jsx)(FilePanel_1.default, { resizable: resizable })),
             },
         ]
         : []),
@@ -372961,7 +373228,8 @@ const getSidebarOptions = (initials, homeAction, isCodeVisible, curriculumCompon
                 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 })),
+                fillsColumn: true,
+                panel: (_layout) => ((0, jsx_runtime_1.jsx)(CurriculumPanel_1.default, { curriculumContent: curriculumComponent })),
             },
         ]
         : []),
@@ -372984,33 +373252,38 @@ const Sidebar = ({ options = [], curriculumComponent = null, }) => {
     const { onHome } = (0, AuthContext_1.useAuthActions)();
     const sideBarOptions = getSidebarOptions(initials, onHome, isCodeVisible, curriculumComponent);
     const menuOptions = sideBarOptions.filter((option) => options.includes(option.name));
-    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));
-            }
+    // Panels are multi-select: files and curriculum can be open at the same time
+    const [openPanels, setOpenPanels] = (0, react_1.useState)(curriculumDisplayMode !== types_1.CurriculumDisplayMode.HIDDEN
+        ? [PanelNames.CURRICULUM]
+        : []);
+    const toggleOption = (name) => {
+        const option = menuOptions.find((opt) => opt.name === name);
+        // only options with a panel can be toggled open
+        if (!option?.panel) {
+            return;
         }
-        else {
-            setOption(newOption);
+        const panelName = option.name;
+        setOpenPanels((prev) => {
+            const isOpen = prev.includes(panelName);
             // 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));
-            }
-        }
+            if (panelName === PanelNames.CURRICULUM) {
+                dispatch((0, EditorSlice_1.setCurriculumDisplayMode)(isOpen
+                    ? types_1.CurriculumDisplayMode.HIDDEN
+                    : types_1.CurriculumDisplayMode.NORMAL));
+            }
+            return isOpen
+                ? prev.filter((panel) => panel !== panelName)
+                : [...prev, panelName];
+        });
     };
-    const activeOption = menuOptions.find((opt) => opt.name === option);
-    // Use CustomSidebarPanel only for non-curriculum panels. The curriculum panel
-    // must be rendered as <CurriculumPanel> directly (a stable component type)
-    // rather than through an anonymous arrow function stored in getSidebarOptions.
-    // An anonymous function creates a NEW component type on every Sidebar render.
-    const CustomSidebarPanel = activeOption?.panel || (() => null);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.sidebar), children: [(0, jsx_runtime_1.jsx)(SidebarBar_1.default, { menuOptions: menuOptions, option: option, toggleOption: toggleOption }), option === PanelNames.CURRICULUM ? ((0, jsx_runtime_1.jsx)(CurriculumPanel_1.default, { curriculumContent: curriculumComponent })) : (option && (0, jsx_runtime_1.jsx)(CustomSidebarPanel, {}))] }));
+    const openPanelOptions = menuOptions.filter((opt) => opt.panel && openPanels.includes(opt.name));
+    // A fillsColumn panel forces the column layout (others stack above it).
+    const useColumn = openPanelOptions.some((opt) => opt.fillsColumn);
+    const columnPanels = [
+        ...openPanelOptions.filter((opt) => !opt.fillsColumn),
+        ...openPanelOptions.filter((opt) => opt.fillsColumn),
+    ];
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.sidebar), children: [(0, jsx_runtime_1.jsx)(SidebarBar_1.default, { menuOptions: menuOptions, openPanels: openPanels, toggleOption: toggleOption }), useColumn ? ((0, jsx_runtime_1.jsx)(SidebarPanelsColumn_1.default, { expanded: curriculumDisplayMode === types_1.CurriculumDisplayMode.EXPANDED, panels: columnPanels.map((opt) => opt.panel?.({ resizable: false })) })) : (openPanelOptions[0]?.panel?.({ resizable: true }) ?? null)] }));
 };
 exports["default"] = Sidebar;
 
@@ -373029,10 +373302,10 @@ const jsx_runtime_1 = __webpack_require__(74848);
 const styles_module_scss_1 = __importDefault(__webpack_require__(21852));
 const SidebarBarOption_1 = __importDefault(__webpack_require__(19371));
 const SidebarBar = (props) => {
-    const { menuOptions, option, toggleOption } = props;
+    const { menuOptions, openPanels = [], toggleOption } = props;
     const topMenuOptions = menuOptions.filter((menuOption) => menuOption.position === "top");
     const bottomMenuOptions = menuOptions.filter((menuOption) => menuOption.position === "bottom");
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.bar, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.optionsTop, children: topMenuOptions.map((menuOption, i) => ((0, jsx_runtime_1.jsx)(SidebarBarOption_1.default, { Icon: menuOption.icon, title: menuOption.title, isActive: option === menuOption.name, toggleOption: toggleOption, name: menuOption.name, action: menuOption.action }, i))) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.optionsBottom, children: bottomMenuOptions.map((menuOption, i) => ((0, jsx_runtime_1.jsx)(SidebarBarOption_1.default, { Icon: menuOption.icon, title: menuOption.title, isActive: option === menuOption.name, toggleOption: toggleOption, name: menuOption.name, buttonText: menuOption.buttonText, isUser: menuOption.name === "user" }, i))) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.bar, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.optionsTop, children: topMenuOptions.map((menuOption, i) => ((0, jsx_runtime_1.jsx)(SidebarBarOption_1.default, { Icon: menuOption.icon, title: menuOption.title, isActive: openPanels.includes(menuOption.name), toggleOption: toggleOption, name: menuOption.name, action: menuOption.action }, i))) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.optionsBottom, children: bottomMenuOptions.map((menuOption, i) => ((0, jsx_runtime_1.jsx)(SidebarBarOption_1.default, { Icon: menuOption.icon, title: menuOption.title, isActive: openPanels.includes(menuOption.name), toggleOption: toggleOption, name: menuOption.name, buttonText: menuOption.buttonText, isUser: menuOption.name === "user" }, i))) })] }));
 };
 exports["default"] = SidebarBar;
 
@@ -373102,6 +373375,59 @@ const SidebarBarOption = (props) => {
 exports["default"] = SidebarBarOption;
 
 
+/***/ }),
+
+/***/ 91592:
+/***/ (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 ResizableWithHandle_1 = __importDefault(__webpack_require__(32694));
+const styles_module_scss_1 = __importDefault(__webpack_require__(21852));
+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 SidebarPanelsColumn = ({ panels, expanded = false, }) => {
+    // The column owns its width so the expand/collapse toggle is always authoritative:
+    // toggling forces the preset, dragging updates the same value, and a viewport
+    // resize re-applies the preset unless the user has dragged. Keeping width here
+    // (rather than inside ResizableWithHandle) means a prior manual drag can never
+    // suppress a programmatic width change.
+    const presetWidth = (0, react_1.useCallback)(() => (expanded ? getMaxPanelWidth() : getPanelWidth()), [expanded]);
+    const [width, setWidth] = (0, react_1.useState)(presetWidth);
+    const [maxWidth, setMaxWidth] = (0, react_1.useState)(getMaxPanelWidth);
+    const manuallyResizedRef = (0, react_1.useRef)(false);
+    // Expand/collapse is a deliberate mode switch: force the preset and drop any
+    // manual size so the toggle always resizes the column.
+    (0, react_1.useEffect)(() => {
+        manuallyResizedRef.current = false;
+        setWidth(presetWidth());
+    }, [expanded, presetWidth]);
+    // On viewport resize keep the presets current; re-apply to the column only
+    // when the user has not manually dragged it.
+    (0, react_1.useEffect)(() => {
+        const onResize = () => {
+            setMaxWidth(getMaxPanelWidth());
+            if (!manuallyResizedRef.current)
+                setWidth(presetWidth());
+        };
+        window.addEventListener("resize", onResize);
+        return () => window.removeEventListener("resize", onResize);
+    }, [presetWidth]);
+    const handleWidthChange = (0, react_1.useCallback)((next) => {
+        manuallyResizedRef.current = true;
+        setWidth(next);
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(ResizableWithHandle_1.default, { "data-testid": "sidebar__panels-column", className: styles_module_scss_1.default.panelsColumn, defaultWidth: typeof width === "number" ? `${width}px` : width, defaultHeight: "100%", handleDirection: "right", minWidth: "250px", maxWidth: maxWidth, width: width, onWidthChange: handleWidthChange, children: [panels.slice(0, -1).map((panel, index) => ((0, jsx_runtime_1.jsx)(ResizableWithHandle_1.default, { className: styles_module_scss_1.default.panelsColumnTop, defaultWidth: "100%", defaultHeight: "35%", handleDirection: "bottom", minHeight: "150px", maxHeight: "75%", children: panel }, index))), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.panelsColumnFill, children: panels[panels.length - 1] })] }));
+};
+exports["default"] = SidebarPanelsColumn;
+
+
 /***/ }),
 
 /***/ 2957:
@@ -373793,7 +374119,7 @@ const extToIconMap = {
 };
 const FileIcon = ({ ext = "" }) => {
     const Icon = extToIconMap[ext] ?? file_svg_1.default;
-    return (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { size: 18, SvgElement: Icon });
+    return ((0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { size: 18, SvgElement: Icon, "aria-hidden": "true", focusable: "false" }));
 };
 exports["default"] = FileIcon;
 
@@ -374671,6 +374997,44 @@ const validateProjectFilesCount = (components, newFilesCount) => {
 exports.validateProjectFilesCount = validateProjectFilesCount;
 
 
+/***/ }),
+
+/***/ 87170:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+var __webpack_unused_export__;
+
+__webpack_unused_export__ = ({ value: true });
+exports.s = void 0;
+const react_1 = __webpack_require__(51649);
+const react_redux_1 = __webpack_require__(14062);
+const stores_1 = __webpack_require__(32132);
+const EditorSlice_1 = __webpack_require__(68512);
+/**
+ * Public hook for host apps to read and control the curriculum panel's display
+ * mode. Intended for driving the width of the already-open panel — i.e.
+ * toggling between `NORMAL` and `EXPANDED` from a control in the curriculum
+ * header.
+ *
+ * The host renders its curriculum content inside this library's Redux Provider,
+ * so calling this hook from within that content dispatches to the library store
+ * without depending on the store's shape.
+ *
+ * Note: opening/closing the panel is owned by the sidebar's own curriculum
+ * control. Setting `HIDDEN` through this hook updates the mode but does not
+ * close an already-mounted panel, so prefer it for the NORMAL↔EXPANDED toggle.
+ */
+const useCurriculumDisplayMode = () => {
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const mode = (0, stores_1.useAppSelector)((state) => state.editor.curriculumDisplayMode);
+    const setMode = (0, react_1.useCallback)((next) => {
+        dispatch((0, EditorSlice_1.setCurriculumDisplayMode)(next));
+    }, [dispatch]);
+    return [mode, setMode];
+};
+exports.s = useCurriculumDisplayMode;
+
+
 /***/ }),
 
 /***/ 78556:
@@ -376464,6 +376828,7 @@ var CurriculumDisplayMode;
 (function (CurriculumDisplayMode) {
     CurriculumDisplayMode["HIDDEN"] = "hidden";
     CurriculumDisplayMode["NORMAL"] = "normal";
+    CurriculumDisplayMode["EXPANDED"] = "expanded";
 })(CurriculumDisplayMode || (exports.CurriculumDisplayMode = CurriculumDisplayMode = {}));
 
 
@@ -395131,10 +395496,18 @@ module.exports = /*#__PURE__*/JSON.parse('{"application/1d-interleaved-parityfec
 /************************************************************************/
 var __webpack_exports__ = {};
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   $: () => (/* reexport safe */ _App_tsx__WEBPACK_IMPORTED_MODULE_0__.TextJamEditor)
+/* harmony export */   $C: () => (/* reexport safe */ _App_tsx__WEBPACK_IMPORTED_MODULE_0__.TextJamEditor),
+/* harmony export */   r8: () => (/* reexport safe */ _redux_types__WEBPACK_IMPORTED_MODULE_1__.CurriculumDisplayMode),
+/* harmony export */   sD: () => (/* reexport safe */ _hooks_useCurriculumDisplayMode__WEBPACK_IMPORTED_MODULE_2__.s)
 /* harmony export */ });
 /* harmony import */ var _App_tsx__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(78577);
 /* harmony import */ var _App_tsx__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_App_tsx__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _redux_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(92932);
+/* harmony import */ var _hooks_useCurriculumDisplayMode__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(87170);
+
+
 
-var __webpack_exports__TextJamEditor = __webpack_exports__.$;
-export { __webpack_exports__TextJamEditor as TextJamEditor };
+var __webpack_exports__CurriculumDisplayMode = __webpack_exports__.r8;
+var __webpack_exports__TextJamEditor = __webpack_exports__.$C;
+var __webpack_exports__useCurriculumDisplayMode = __webpack_exports__.sD;
+export { __webpack_exports__CurriculumDisplayMode as CurriculumDisplayMode, __webpack_exports__TextJamEditor as TextJamEditor, __webpack_exports__useCurriculumDisplayMode as useCurriculumDisplayMode };