gwchq-textjam 0.5.10 → 0.5.12

package/dist/index.js

@@ -62996,7 +62996,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","itemTitle":"styles-module__itemTitle--a6Liw","itemButton":"styles-module__itemButton--oB91C","itemSelected":"styles-module__itemSelected--JLLW5","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","itemTooltip":"styles-module__itemTooltip--c5oiY"});
+/* 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","itemSelected":"styles-module__itemSelected--JLLW5","itemButtonVisible":"styles-module__itemButtonVisible--KAm3+","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","itemTooltip":"styles-module__itemTooltip--c5oiY"});
 
 /***/ }),
 
@@ -82757,7 +82757,7 @@ const Dropdown = (props) => {
     const [isOpen, setOpen] = (0, react_1.useState)(false);
     const buttonRef = (0, react_1.useRef)(null);
     const { hovered, hoverProps } = (0, useHover_1.useHover)();
-    return ((0, jsx_runtime_1.jsxs)("div", { ...hoverProps, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", "aria-label": ariaLabel, className: (0, classnames_1.default)(buttonClassname, isOpen && styles_module_scss_1.default.buttonActive), onClick: () => setOpen((prev) => !prev), ref: buttonRef, children: [ButtonIcon && ((0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: ButtonIcon, size: 16, "aria-hidden": "true", focusable: "false" })), (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { className: (0, classnames_1.default)(styles_module_scss_1.default.arrowIcon, isOpen && styles_module_scss_1.default.arrowIconOpen), style: { rotate: `${isOpen ? "-" : ""}90deg` }, SvgElement: arrow_right_svg_1.default, size: 8, "aria-hidden": "true", focusable: "false" })] }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Upload files", visible: hovered && !isOpen, position: "bottom", strategy: "fixed", size: "fit" }), (0, jsx_runtime_1.jsx)(ContextMenu_1.default, { anchorRef: buttonRef, menuOptions: menuOptions, opened: isOpen, onClose: () => setOpen(false), align: align, direction: direction, gap: 4 })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...hoverProps, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", "aria-label": ariaLabel, "aria-haspopup": "menu", "aria-expanded": isOpen, className: (0, classnames_1.default)(buttonClassname, isOpen && styles_module_scss_1.default.buttonActive), onClick: () => setOpen((prev) => !prev), ref: buttonRef, children: [ButtonIcon && ((0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: ButtonIcon, size: 16, "aria-hidden": "true", focusable: "false" })), (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { className: (0, classnames_1.default)(styles_module_scss_1.default.arrowIcon, isOpen && styles_module_scss_1.default.arrowIconOpen), style: { rotate: `${isOpen ? "-" : ""}90deg` }, SvgElement: arrow_right_svg_1.default, size: 8, "aria-hidden": "true", focusable: "false" })] }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Upload files", visible: hovered && !isOpen, position: "bottom", strategy: "fixed", size: "fit" }), (0, jsx_runtime_1.jsx)(ContextMenu_1.default, { anchorRef: buttonRef, menuOptions: menuOptions, opened: isOpen, onClose: () => setOpen(false), align: align, direction: direction, gap: 4 })] }));
 };
 exports["default"] = Dropdown;
 
@@ -82882,6 +82882,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.BasicItemContent = void 0;
 const jsx_runtime_1 = __webpack_require__(71178);
+const classnames_1 = __importDefault(__webpack_require__(46942));
 const button_dots_svg_1 = __importDefault(__webpack_require__(61995));
 const SvgIcon_1 = __webpack_require__(82917);
 const Text_1 = __webpack_require__(82803);
@@ -82891,7 +82892,7 @@ const useHover_1 = __webpack_require__(78556);
 const ItemEdit_1 = __webpack_require__(61576);
 const ItemIcon_1 = __webpack_require__(3427);
 const styles_module_scss_1 = __importDefault(__webpack_require__(10614));
-const BasicItemContent = ({ item, onOpenMenu, isMenuOpen, triggerRef, }) => {
+const BasicItemContent = ({ item, onOpenMenu, isMenuOpen, triggerRef, isTriggerVisible, isTriggerTabbable, }) => {
     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);
@@ -82901,7 +82902,9 @@ const BasicItemContent = ({ item, onOpenMenu, isMenuOpen, triggerRef, }) => {
     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", tabIndex: -1, className: styles_module_scss_1.default.itemButton, "aria-label": `More actions for ${item.getItemName()}`, "aria-haspopup": "menu", "aria-expanded": isMenuOpen, onClick: (e) => {
+                }, 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", tabIndex: isTriggerTabbable ? 0 : -1, className: (0, classnames_1.default)(styles_module_scss_1.default.itemButton, {
+                            [styles_module_scss_1.default.itemButtonVisible]: isTriggerVisible,
+                        }), "aria-label": `More actions for ${item.getItemName()}`, "aria-haspopup": "menu", "aria-expanded": isMenuOpen, onClick: (e) => {
                             e.stopPropagation();
                             // Anchor to the button's box, not the click point: a keyboard
                             // activation reports clientX/Y of 0.
@@ -82923,8 +82926,8 @@ exports.FileItem = void 0;
 const jsx_runtime_1 = __webpack_require__(71178);
 const BasicItemContent_1 = __webpack_require__(34071);
 const ItemContextMenu_1 = __webpack_require__(54035);
-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 })] }));
+const FileItem = ({ item, onOpenMenu, isContextMenuOpen, contextMenuPosition, onCloseContextMenu, triggerRef, isTriggerVisible, isTriggerTabbable, }) => {
+    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, isTriggerVisible: isTriggerVisible, isTriggerTabbable: isTriggerTabbable }), (0, jsx_runtime_1.jsx)(ItemContextMenu_1.ItemContextMenu, { item: item, menuPosition: contextMenuPosition, isOpened: isContextMenuOpen, onClose: onCloseContextMenu })] }));
 };
 exports.FileItem = FileItem;
 
@@ -82946,12 +82949,12 @@ const arrow_right_svg_1 = __importDefault(__webpack_require__(75668));
 const ItemContextMenu_1 = __webpack_require__(54035);
 const BasicItemContent_1 = __webpack_require__(34071);
 const SvgIcon_1 = __webpack_require__(82917);
-const FolderItem = ({ item, onOpenMenu, onCloseContextMenu, isContextMenuOpen, onImport, contextMenuPosition, triggerRef, }) => {
+const FolderItem = ({ item, onOpenMenu, onCloseContextMenu, isContextMenuOpen, onImport, contextMenuPosition, triggerRef, isTriggerVisible, isTriggerTabbable, }) => {
     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, 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 })) })] }));
+    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, isTriggerVisible: isTriggerVisible, isTriggerTabbable: isTriggerTabbable }), (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;
 
@@ -83226,6 +83229,8 @@ 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 [hasKeyboardFocus, setHasKeyboardFocus] = (0, react_1.useState)(false);
+    const pointerFocusRef = (0, react_1.useRef)(false);
     const triggerRef = (0, react_1.useRef)(null);
     const handleOpenContextMenu = (position) => {
         if (!isContextMenuAvailable)
@@ -83236,8 +83241,7 @@ const FileTreeItem = ({ item, guides, activeLevel, isContextMenuAvailable, }) =>
     const handleCloseContextMenu = () => {
         setIsContextMenuOpen(false);
         setContextMenuPosition({ x: 0, y: 0 });
-        // Back to the row, not the ⋯ button, which is outside the tab order — but
-        // only if focus was lost (Escape), not moved on purpose (rename, modal).
+        // Back to the row, not the hidden ⋯ button, and only if focus was lost.
         requestAnimationFrame(() => {
             const active = document.activeElement;
             if (!active || active === document.body) {
@@ -83246,7 +83250,24 @@ const FileTreeItem = ({ item, guides, activeLevel, isContextMenuAvailable, }) =>
             }
         });
     };
-    // Keyboard route to the ⋯ menu, which is out of the tab order.
+    // Only keyboard focus counts: the pointer already has hover.
+    const isTriggerVisible = hasKeyboardFocus || isContextMenuOpen;
+    const isTriggerTabbable = isContextMenuAvailable && isTriggerVisible;
+    const handleRowPointerDown = (e) => {
+        if (e.button !== 0)
+            return; // a right-click ends with Escape, back on the row
+        pointerFocusRef.current = true;
+    };
+    // Cleared on blur, not here: focus can be reported twice for one row.
+    const handleRowFocus = () => setHasKeyboardFocus(!pointerFocusRef.current);
+    const handleRowBlur = (e) => {
+        const movedTo = e.relatedTarget;
+        if (movedTo && e.currentTarget.contains(movedTo))
+            return; // still in the row
+        pointerFocusRef.current = false;
+        setHasKeyboardFocus(false);
+    };
+    // Keyboard route to the ⋯ menu, for anyone who does not Tab to it.
     const handleKeyDown = (e) => {
         const isMenuKey = e.key === "ContextMenu" ||
             (e.shiftKey && e.key === "F10") ||
@@ -83264,16 +83285,15 @@ const FileTreeItem = ({ item, guides, activeLevel, isContextMenuAvailable, }) =>
         const rect = trigger.getBoundingClientRect();
         handleOpenContextMenu({ x: rect.left, y: rect.bottom });
     };
-    return ((0, jsx_runtime_1.jsx)("div", { ...item.getProps(), onKeyDown: handleKeyDown, className: (0, classnames_1.default)(styles_module_scss_1.default.row, styles_module_scss_1.default[`level-${level}`]), style: {
+    return ((0, jsx_runtime_1.jsx)("div", { ...item.getProps(), onKeyDown: handleKeyDown, onMouseDown: handleRowPointerDown, onFocus: handleRowFocus, onBlur: handleRowBlur, className: (0, classnames_1.default)(styles_module_scss_1.default.row, styles_module_scss_1.default[`level-${level}`]), style: {
             ["--guides-bg"]: layers.join(","),
             ["--guides-pos"]: positions.join(","),
             ["--guides-size"]: sizes.join(","),
         }, children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.treeItem, {
-                [styles_module_scss_1.default.itemFocused]: item.isFocused(),
                 [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, 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 })) }) }));
+            }), 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, isTriggerVisible: isTriggerVisible, isTriggerTabbable: isTriggerTabbable })) : ((0, jsx_runtime_1.jsx)(FileItem_1.FileItem, { item: item, onOpenMenu: handleOpenContextMenu, isContextMenuOpen: isContextMenuOpen, contextMenuPosition: contextMenuPosition, onCloseContextMenu: handleCloseContextMenu, triggerRef: triggerRef, isTriggerVisible: isTriggerVisible, isTriggerTabbable: isTriggerTabbable })) }) }));
 };
 exports.FileTreeItem = FileTreeItem;
 
@@ -86515,10 +86535,13 @@ const react_redux_1 = __webpack_require__(14062);
 const EditorSlice_1 = __webpack_require__(68512);
 const stores_1 = __webpack_require__(32132);
 const createProjectArchive_1 = __webpack_require__(24133);
+const types_1 = __webpack_require__(92932);
 const useProjectRemix = ({ projectData, saveProject, }) => {
     const project = (0, stores_1.useAppSelector)((state) => state.editor.project);
+    const saving = (0, stores_1.useAppSelector)((state) => state.editor.saving);
     const remixTriggered = (0, stores_1.useAppSelector)((state) => state.editor.remixTriggered);
     const codeRunTriggered = (0, stores_1.useAppSelector)((state) => state.editor.codeRunTriggered);
+    const prevSavingRef = (0, react_1.useRef)(saving);
     const dispatch = (0, react_redux_1.useDispatch)();
     const remixStartedRef = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(() => {
@@ -86573,6 +86596,16 @@ const useProjectRemix = ({ projectData, saveProject, }) => {
         dispatch((0, EditorSlice_1.setRemixTriggered)(false));
         remixStartedRef.current = false;
     }, [dispatch, remixTriggered, project?.identifier, projectData?.identifier]);
+    (0, react_1.useEffect)(() => {
+        const prevSaving = prevSavingRef.current;
+        prevSavingRef.current = saving;
+        if (remixTriggered &&
+            prevSaving !== types_1.SavingState.FAILED &&
+            saving === types_1.SavingState.FAILED) {
+            dispatch((0, EditorSlice_1.setRemixTriggered)(false));
+            remixStartedRef.current = false;
+        }
+    }, [remixTriggered, saving, dispatch]);
 };
 exports.useProjectRemix = useProjectRemix;
 

package/dist/style.css

@@ -690,7 +690,7 @@
 :root{--rpf-white: #ffffff}.styles-module__wrapper--NmEQI{display:flex;align-items:center;gap:calc(.5rem*var(--scale-factor, 1))}.styles-module__tooltipAnchor--nyFj4{position:relative}.styles-module__header--UkMi-{display:flex;align-items:center;justify-content:space-between;font-size:12px;block-size:62px;padding:calc(.625rem*var(--scale-factor, 1)) calc(1rem*var(--scale-factor, 1)) calc(.5rem*var(--scale-factor, 1)) calc(1.25rem*var(--scale-factor, 1));flex-shrink:0;z-index:699}.styles-module__headerBtn--kUJII{font-size:calc(.875rem*var(--scale-factor, 1));line-height:calc(1.25rem*var(--scale-factor, 1));font-weight:500;block-size:44px;padding:calc(.625rem*var(--scale-factor, 1)) calc(1.25rem*var(--scale-factor, 1));gap:7px}.styles-module__gwcLogo--svs9k{inline-size:calc(2.75rem*var(--scale-factor, 1))}.styles-module__textJamLogo--dZcnz{inline-size:150px;block-size:36px;margin-inline-start:calc(.75rem*var(--scale-factor, 1))}.styles-module__btnSvg--Ri2uZ{inline-size:44px;block-size:44px}.styles-module__projectName--6o3NT{flex-grow:1;min-inline-size:0;padding-inline-start:calc(1rem*var(--scale-factor, 1))}.styles-module__linkButton--bj6aP{color:#003046}.styles-module__sharedProject--baj0W{gap:calc(2rem*var(--scale-factor, 1))}.styles-module__remixBtnContent--sJf5m{display:flex;gap:calc(.5rem*var(--scale-factor, 1))}
 .resizable-with-handle__handle>div{position:relative;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0) !important}.resizable-with-handle__bar{display:block;background:var(--editor-color-text-secondary);border-radius:999px;pointer-events:auto}.resizable-with-handle__bar:focus{outline:none}.resizable-with-handle__bar:focus-visible{outline:2px auto Highlight;outline:2px auto -webkit-focus-ring-color;outline-offset:-1px}.resizable-with-handle__handle--right>div{inset-inline-end:3px !important}.resizable-with-handle__bar--right,.resizable-with-handle__bar--left{inline-size:4px;block-size:128px}.resizable-with-handle__handle--bottom>div{inset-block-end:3px !important}.resizable-with-handle__bar--bottom,.resizable-with-handle__bar--top{inline-size:128px;block-size:4px}
 :root{--rpf-white: #ffffff}.styles-module__sidebar--Fu5Qi{display:flex;position:relative;scrollbar-width:none}.styles-module__bar--fOlLf{display:flex;flex-direction:column;justify-content:space-between;margin:calc(1.5rem*var(--scale-factor, 1)) calc(1.25rem*var(--scale-factor, 1)) calc(.625rem*var(--scale-factor, 1)) calc(1.25rem*var(--scale-factor, 1))}.styles-module__optionsTop--2jNbs,.styles-module__optionsBottom--PtwF4{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(2rem*var(--scale-factor, 1))}.styles-module__option--MOGCu{display:flex;align-items:center;justify-content:center;box-sizing:border-box;inline-size:calc(2.75rem*var(--scale-factor, 1));block-size:calc(2.75rem*var(--scale-factor, 1));margin:0}.styles-module__option--MOGCu.styles-module__userOption--qGt5j{inline-size:calc(2.5rem*var(--scale-factor, 1));block-size:calc(2.5rem*var(--scale-factor, 1));border-radius:50%;color:#003046;font-weight:500;background-color:#fff;cursor:pointer}.styles-module__option--MOGCu.styles-module__userOption--qGt5j:hover{background-color:#fff}.styles-module__option--MOGCu svg{margin:0;color:#003046}.styles-module__option--MOGCu:hover{background-color:#cbcbcb}.styles-module__option--MOGCu.styles-module__selected--avjSK{background-color:#fff}.styles-module__option--MOGCu.styles-module__selected--avjSK:hover{background-color:#fff}.styles-module__optionTooltipWrapper--7BqNv{position:relative}.styles-module__optionTooltip--wNPIN{inset-block-start:50%;inset-inline-start:100%;margin-inline-start:calc(.5rem*var(--scale-factor, 1));transform:translateY(-50%)}.styles-module__panel--bHhSv{display:flex;flex-direction:column;border-radius:calc(.5rem*var(--scale-factor, 1));box-shadow:0px 4px 20px 0px rgba(0,0,0,.15);margin-inline-end:calc(.625rem*var(--scale-factor, 1));inline-size:inherit;background:var(--sidebar-panel-background)}.styles-module__panelsColumn--3qf\+3{display:flex;flex-direction:column;margin-inline-end:calc(.625rem*var(--scale-factor, 1))}.styles-module__panelsColumn--3qf\+3 .styles-module__panel--bHhSv{margin-inline-end:0;inline-size:100%;block-size:100%;min-block-size:0}.styles-module__panelsColumnTop--OKT\+V{min-block-size:0;margin-block-end:calc(.625rem*var(--scale-factor, 1))}.styles-module__panelsColumnTop--OKT\+V .resizable-with-handle__handle--bottom>div{inset-block-end:calc(-1*calc(0.625rem * var(--scale-factor, 1))) !important}.styles-module__panelsColumnFill--v\+VWp{display:flex;flex-direction:column;flex:1;min-block-size:0}.styles-module__panelWithFooter--5ItsY{padding-block-end:calc(2rem*var(--scale-factor, 1))}.styles-module__panelHeading--GRNt0{margin:0;font-size:calc(1.5rem*var(--scale-factor, 1));line-height:calc(2rem*var(--scale-factor, 1))}.styles-module__panelHeader--bAHfN{display:flex;flex-direction:column;gap:calc(1rem*var(--scale-factor, 1));padding-block-end:calc(1rem*var(--scale-factor, 1));margin-inline:calc(1rem*var(--scale-factor, 1));border-block-end:1px solid var(--sidebar-border)}.styles-module__panelContent--X7kot{flex:1;padding:calc(.75rem*var(--scale-factor, 1)) calc(1rem*var(--scale-factor, 1));overflow-y:auto;scrollbar-width:thin}.styles-module__panelButtons---y4S-{display:flex;flex-direction:column;gap:calc(1rem*var(--scale-factor, 1))}.styles-module__panelFooter--T1y-s{border-block-start:1px solid #d5d7dc;inset-block-end:0px;inline-size:100%;inline-size:-moz-available;inline-size:-webkit-stretch;inline-size:stretch;padding-inline:calc(1rem*var(--scale-factor, 1));background-color:#fff;border-end-end-radius:8px}
-:root{--rpf-white: #ffffff}.styles-module__row--XtAJr{position:relative;margin-block-end:calc(.25rem*var(--scale-factor, 1));--strong-guide-color: #33625e;--normal-guide-color: #e5e5e5;padding:1px}.styles-module__row--XtAJr::before{content:"";position:absolute;inset:calc(-1*.125rem*var(--scale-factor, 1));pointer-events:none;background-image:var(--guides-bg);background-position:var(--guides-pos);background-size:var(--guides-size);background-repeat:no-repeat}.styles-module__treeItem--kbyYk{display:flex;align-items:center;gap:calc(.5rem*var(--scale-factor, 1));text-align:start;position:relative;cursor:pointer}.styles-module__itemContent--663gn{inline-size:100%;border-radius:4px;display:flex;align-items:center;gap:calc(.5rem*var(--scale-factor, 1));text-align:start;padding:calc(.25rem*var(--scale-factor, 1)) calc(.5rem*var(--scale-factor, 1))}.styles-module__itemContent--663gn:hover{background:#e5f6f1}.styles-module__itemTitle--a6Liw{inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.styles-module__itemButton--oB91C{display:none;padding:0;border:none;background:none;color:inherit;cursor:pointer}.styles-module__itemButton--oB91C:focus-visible{outline:none}.styles-module__itemSelected--JLLW5 .styles-module__itemContent--663gn{background-color:#c5ffe8}.styles-module__itemSelected--JLLW5 .styles-module__itemButton--oB91C,.styles-module__itemFocused--SmUbE .styles-module__itemButton--oB91C{display:flex}.styles-module__itemContent--663gn:hover .styles-module__itemButton--oB91C,.styles-module__itemContent--663gn:focus-within .styles-module__itemButton--oB91C{display:flex}.styles-module__level-0--5PVOR{padding-inline-start:0px}.styles-module__level-1--vTMYv{padding-inline-start:20px}.styles-module__level-2--Xx8Ie{padding-inline-start:40px}.styles-module__level-3--ySuP4{padding-inline-start:60px}.styles-module__level-4--7uciy{padding-inline-start:80px}.styles-module__level-5--AEspR{padding-inline-start:100px}.styles-module__level-6--c28W9{padding-inline-start:120px}.styles-module__level-7--gU\+\+Q{padding-inline-start:140px}.styles-module__level-8--dmg5P{padding-inline-start:160px}.styles-module__level-9--X73V0{padding-inline-start:180px}.styles-module__level-10--VAKPI{padding-inline-start:200px}.styles-module__level-11--5rqim{padding-inline-start:220px}.styles-module__level-12--8cLBy{padding-inline-start:240px}.styles-module__level-13--qlzYN{padding-inline-start:260px}.styles-module__level-14--Q7bCT{padding-inline-start:280px}.styles-module__level-15---1KaW{padding-inline-start:300px}.styles-module__level-16--BCkZb{padding-inline-start:320px}.styles-module__level-17--tM3Ht{padding-inline-start:340px}.styles-module__level-18--GkyjF{padding-inline-start:360px}.styles-module__level-19--kxLhM{padding-inline-start:380px}.styles-module__level-20--sIjDn{padding-inline-start:400px}.styles-module__itemContentEdit--cNmeE{--border-width: 1px;inline-size:100%;display:flex;align-items:center;gap:calc(.5rem*var(--scale-factor, 1));text-align:start;padding:calc(.25rem*var(--scale-factor, 1) - var(--border-width)) calc(.5rem*var(--scale-factor, 1) - var(--border-width));border-radius:4px;border:var(--border-width) solid #43d6b9}.styles-module__itemContentEdit--cNmeE input{border:none;font-size:calc(.75rem*var(--scale-factor, 1));line-height:calc(1rem*var(--scale-factor, 1))}.styles-module__itemContentEdit--cNmeE input:focus,.styles-module__itemContentEdit--cNmeE input:focus-visible{outline:none}.styles-module__inputError--zb21a{border-color:#e0201c}.styles-module__errorMessage--IT3hQ{position:absolute;inset-block-start:100%;inset-inline-start:0;inline-size:100%;padding:calc(.5rem*var(--scale-factor, 1));margin-block-start:calc(.25rem*var(--scale-factor, 1));border:1px solid #e0201c;border-radius:8px;background-color:#ffd5ce;color:#242424;z-index:650;display:flex;align-items:flex-start;gap:calc(.5rem*var(--scale-factor, 1))}.styles-module__errorMessage--IT3hQ svg{color:#e0201c}.styles-module__itemTooltip--c5oiY{min-inline-size:auto}
+:root{--rpf-white: #ffffff}.styles-module__row--XtAJr{position:relative;margin-block-end:calc(.25rem*var(--scale-factor, 1));--strong-guide-color: #33625e;--normal-guide-color: #e5e5e5;padding:1px}.styles-module__row--XtAJr::before{content:"";position:absolute;inset:calc(-1*.125rem*var(--scale-factor, 1));pointer-events:none;background-image:var(--guides-bg);background-position:var(--guides-pos);background-size:var(--guides-size);background-repeat:no-repeat}.styles-module__treeItem--kbyYk{display:flex;align-items:center;gap:calc(.5rem*var(--scale-factor, 1));text-align:start;position:relative;cursor:pointer}.styles-module__itemContent--663gn{inline-size:100%;border-radius:4px;display:flex;align-items:center;gap:calc(.5rem*var(--scale-factor, 1));text-align:start;padding:calc(.25rem*var(--scale-factor, 1)) calc(.5rem*var(--scale-factor, 1))}.styles-module__itemContent--663gn:hover{background:#e5f6f1}.styles-module__itemTitle--a6Liw{inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.styles-module__itemButton--oB91C{display:none;padding:0;border:none;background:none;color:inherit;cursor:pointer}.styles-module__itemSelected--JLLW5 .styles-module__itemContent--663gn{background-color:#c5ffe8}.styles-module__itemContent--663gn:hover .styles-module__itemButton--oB91C,.styles-module__itemButtonVisible--KAm3\+{display:flex}.styles-module__level-0--5PVOR{padding-inline-start:0px}.styles-module__level-1--vTMYv{padding-inline-start:20px}.styles-module__level-2--Xx8Ie{padding-inline-start:40px}.styles-module__level-3--ySuP4{padding-inline-start:60px}.styles-module__level-4--7uciy{padding-inline-start:80px}.styles-module__level-5--AEspR{padding-inline-start:100px}.styles-module__level-6--c28W9{padding-inline-start:120px}.styles-module__level-7--gU\+\+Q{padding-inline-start:140px}.styles-module__level-8--dmg5P{padding-inline-start:160px}.styles-module__level-9--X73V0{padding-inline-start:180px}.styles-module__level-10--VAKPI{padding-inline-start:200px}.styles-module__level-11--5rqim{padding-inline-start:220px}.styles-module__level-12--8cLBy{padding-inline-start:240px}.styles-module__level-13--qlzYN{padding-inline-start:260px}.styles-module__level-14--Q7bCT{padding-inline-start:280px}.styles-module__level-15---1KaW{padding-inline-start:300px}.styles-module__level-16--BCkZb{padding-inline-start:320px}.styles-module__level-17--tM3Ht{padding-inline-start:340px}.styles-module__level-18--GkyjF{padding-inline-start:360px}.styles-module__level-19--kxLhM{padding-inline-start:380px}.styles-module__level-20--sIjDn{padding-inline-start:400px}.styles-module__itemContentEdit--cNmeE{--border-width: 1px;inline-size:100%;display:flex;align-items:center;gap:calc(.5rem*var(--scale-factor, 1));text-align:start;padding:calc(.25rem*var(--scale-factor, 1) - var(--border-width)) calc(.5rem*var(--scale-factor, 1) - var(--border-width));border-radius:4px;border:var(--border-width) solid #43d6b9}.styles-module__itemContentEdit--cNmeE input{border:none;font-size:calc(.75rem*var(--scale-factor, 1));line-height:calc(1rem*var(--scale-factor, 1))}.styles-module__itemContentEdit--cNmeE input:focus,.styles-module__itemContentEdit--cNmeE input:focus-visible{outline:none}.styles-module__inputError--zb21a{border-color:#e0201c}.styles-module__errorMessage--IT3hQ{position:absolute;inset-block-start:100%;inset-inline-start:0;inline-size:100%;padding:calc(.5rem*var(--scale-factor, 1));margin-block-start:calc(.25rem*var(--scale-factor, 1));border:1px solid #e0201c;border-radius:8px;background-color:#ffd5ce;color:#242424;z-index:650;display:flex;align-items:flex-start;gap:calc(.5rem*var(--scale-factor, 1))}.styles-module__errorMessage--IT3hQ svg{color:#e0201c}.styles-module__itemTooltip--c5oiY{min-inline-size:auto}
 :root{--rpf-white: #ffffff}.styles-module__textDelete--9Qu4T{color:#e0201c}
 :root{--rpf-white: #ffffff}.styles-module__toastContainer--SzERA{display:flex;align-items:flex-start;gap:calc(.875rem*var(--scale-factor, 1));color:#003046;font-size:calc(.875rem*var(--scale-factor, 1));line-height:calc(1.25rem*var(--scale-factor, 1));font-weight:500;overflow-wrap:anywhere}.styles-module__toastMessage--5Ze6a{flex-grow:1;white-space:pre-line}.styles-module__errorIcon--v90W6{color:#e0201c}.styles-module__successIcon--gCtAd{color:#527d7a}.styles-module__closeIcon--iZ9ey{color:#003046;cursor:pointer;flex-shrink:0}.styles-module__toastList--7K4rT{display:flex;flex-direction:column-reverse;block-size:calc(100vh - 62px - 1em);max-block-size:calc(100vh - 62px - 1em);overflow-y:auto;overscroll-behavior:contain;padding-inline-end:calc(.25rem*var(--scale-factor, 1));scrollbar-color:rgba(0,48,70,.2) rgba(0,0,0,0);scrollbar-width:thin}.styles-module__toastList--7K4rT::-webkit-scrollbar{inline-size:calc(.5rem*var(--scale-factor, 1))}.styles-module__toastList--7K4rT::-webkit-scrollbar-track{background:rgba(0,0,0,0)}.styles-module__toastList--7K4rT::-webkit-scrollbar-thumb{background-color:rgba(0,48,70,.2);border-radius:calc(.25rem*var(--scale-factor, 1))}.styles-module__toastList--7K4rT:hover .Toastify__progress-bar{animation-play-state:paused !important}.styles-module__toast--LJOJf{flex-shrink:0;max-block-size:none;overflow:visible;padding:calc(1.125rem*var(--scale-factor, 1)) !important}.styles-module__toastBody--0iN2Q{align-items:flex-start;margin:0}.styles-module__infoIcon--tva-x{color:#0d47a1}
 :root{--rpf-white: #ffffff}.styles-module__tree--KziAJ{max-inline-size:100%;min-block-size:100px;color:#33625e}.styles-module__fileTreeActions--k\+Wsd{display:flex;gap:calc(.5rem*var(--scale-factor, 1));align-items:center;margin-block-end:calc(1rem*var(--scale-factor, 1))}.styles-module__tooltipWrapper--wltXE{position:relative;z-index:650}.styles-module__fileTreeActionsLabel--dPZp4{flex-grow:1;color:#69746d}.styles-module__importButton--rcLUm{inline-size:calc(2.5rem*var(--scale-factor, 1))}.styles-module__importArrowIcon--3eOLN{margin-inline-start:calc(.25rem*var(--scale-factor, 1))}.styles-module__label--WY51f{margin:0;flex-grow:1}.styles-module__iconButton--6UIVe{border:none;display:flex;justify-content:center;align-items:center;cursor:pointer}.styles-module__iconButtonFilled--w2vJC{background-color:#e5f6f1;border-radius:calc(.5rem*var(--scale-factor, 1));min-inline-size:calc(2rem*var(--scale-factor, 1));block-size:calc(2rem*var(--scale-factor, 1));transition:background-color .2s ease-in-out}.styles-module__iconButtonFilled--w2vJC:hover{background-color:#d7e7e3}.styles-module__iconButtonFilled--w2vJC:active{background-color:rgba(0,0,0,0)}.styles-module__dragline--RXmTT{block-size:2px;margin-block-start:-1px;background-color:#003046}.styles-module__dragline--RXmTT ::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:-3px;block-size:4px;inline-size:4px;background:#fff;border:2px solid #003046;border-radius:99px}.styles-module__emptyStateContainer--AnTAm{padding:calc(.75rem*var(--scale-factor, 1));display:flex;flex-direction:column;align-items:center;text-align:center;font-size:calc(.75rem*var(--scale-factor, 1));line-height:calc(1rem*var(--scale-factor, 1));font-weight:400;color:#69746d;gap:calc(.25rem*var(--scale-factor, 1))}.styles-module__emptyStateIcon--sDlxK{inline-size:calc(1.5rem*var(--scale-factor, 1));block-size:calc(1.5rem*var(--scale-factor, 1))}.styles-module__emptyStateMessage--OkPax{font-weight:700}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gwchq-textjam",
   "description": "Embeddable React editor used in Raspberry Pi text-based projects.",
-  "version": "0.5.10",
+  "version": "0.5.12",
   "license": "Apache-2.0",
   "homepage": "https://github.com/GirlsFirst/gwchq-textjam",
   "author": "Girls Who Code HQ",