gwchq-textjam 0.5.9 → 0.5.11

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","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","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"});
 
 /***/ }),
 
@@ -82856,13 +82856,16 @@ const Text_1 = __webpack_require__(82803);
 const stores_1 = __webpack_require__(32132);
 const Tooltip_1 = __importDefault(__webpack_require__(26982));
 const useHover_1 = __webpack_require__(78556);
-const FileTreeActions = ({ hasExpandedNodes, }) => {
+const FileTreeActions = ({ hasExpandedNodes, treeId, }) => {
     const { expandAll, collapseAll, createComponent, importFiles, importFolder } = (0, react_1.useContext)(FileTreeContext_1.TreeContext);
     const isReadOnly = (0, stores_1.useAppSelector)((state) => state.editor.readOnly);
     const { hovered: toggleHovered, hoverProps: toggleHoverProps } = (0, useHover_1.useHover)();
     const { hovered: addFolderHovered, hoverProps: addFolderHoverProps } = (0, useHover_1.useHover)();
     const { hovered: addFileHovered, hoverProps: addFileHoverProps } = (0, useHover_1.useHover)();
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.fileTreeActions, children: [hasExpandedNodes ? ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.tooltipWrapper, ...toggleHoverProps, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Collapse all folders", onClick: collapseAll, className: styles_module_scss_1.default.iconButton, children: (0, jsx_runtime_1.jsx)(minus_circle_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Collapse all folders", visible: toggleHovered, position: "bottom", strategy: "fixed", size: "fit" })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.tooltipWrapper, ...toggleHoverProps, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Expand all folders", onClick: expandAll, className: styles_module_scss_1.default.iconButton, children: (0, jsx_runtime_1.jsx)(plus_circle_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Expand all folders", visible: toggleHovered, position: "bottom", strategy: "fixed", size: "fit" })] })), (0, jsx_runtime_1.jsx)(Text_1.Text, { size: 12, weight: "medium", className: styles_module_scss_1.default.fileTreeActionsLabel, children: "Project files" }), !isReadOnly && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.tooltipWrapper, ...addFolderHoverProps, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Add folder", onClick: () => createComponent(ProjectTypes_1.ProjectComponentType.DIR), className: (0, classnames_1.default)([styles_module_scss_1.default.iconButtonFilled, styles_module_scss_1.default.iconButton]), children: (0, jsx_runtime_1.jsx)(add_folder_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Add folder", visible: addFolderHovered, position: "bottom", strategy: "fixed", size: "fit" })] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.tooltipWrapper, ...addFileHoverProps, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Add file", onClick: () => createComponent(ProjectTypes_1.ProjectComponentType.FILE), className: (0, classnames_1.default)([styles_module_scss_1.default.iconButtonFilled, styles_module_scss_1.default.iconButton]), children: (0, jsx_runtime_1.jsx)(add_file_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Add file", visible: addFileHovered, position: "bottom", strategy: "fixed", size: "fit" })] }), (0, jsx_runtime_1.jsx)(ImportButton_1.ImportButton, { importFiles: importFiles, importFolder: importFolder })] }))] }));
+    const toggleLabel = hasExpandedNodes
+        ? "Collapse all folders"
+        : "Expand all folders";
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.fileTreeActions, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.tooltipWrapper, ...toggleHoverProps, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": toggleLabel, "aria-expanded": hasExpandedNodes, "aria-controls": treeId, onClick: hasExpandedNodes ? collapseAll : expandAll, className: styles_module_scss_1.default.iconButton, children: hasExpandedNodes ? ((0, jsx_runtime_1.jsx)(minus_circle_svg_1.default, { "aria-hidden": "true", focusable: "false" })) : ((0, jsx_runtime_1.jsx)(plus_circle_svg_1.default, { "aria-hidden": "true", focusable: "false" })) }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: toggleLabel, visible: toggleHovered, position: "bottom", strategy: "fixed", size: "fit" })] }), (0, jsx_runtime_1.jsx)(Text_1.Text, { size: 12, weight: "medium", className: styles_module_scss_1.default.fileTreeActionsLabel, children: "Project files" }), !isReadOnly && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.tooltipWrapper, ...addFolderHoverProps, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Add folder", onClick: () => createComponent(ProjectTypes_1.ProjectComponentType.DIR), className: (0, classnames_1.default)([styles_module_scss_1.default.iconButtonFilled, styles_module_scss_1.default.iconButton]), children: (0, jsx_runtime_1.jsx)(add_folder_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Add folder", visible: addFolderHovered, position: "bottom", strategy: "fixed", size: "fit" })] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.tooltipWrapper, ...addFileHoverProps, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Add file", onClick: () => createComponent(ProjectTypes_1.ProjectComponentType.FILE), className: (0, classnames_1.default)([styles_module_scss_1.default.iconButtonFilled, styles_module_scss_1.default.iconButton]), children: (0, jsx_runtime_1.jsx)(add_file_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "Add file", visible: addFileHovered, position: "bottom", strategy: "fixed", size: "fit" })] }), (0, jsx_runtime_1.jsx)(ImportButton_1.ImportButton, { importFiles: importFiles, importFolder: importFolder })] }))] }));
 };
 exports.FileTreeActions = FileTreeActions;
 
@@ -82898,7 +82901,7 @@ 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", 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: -1, className: styles_module_scss_1.default.itemButton, "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.
@@ -83233,16 +83236,35 @@ const FileTreeItem = ({ item, guides, activeLevel, isContextMenuAvailable, }) =>
     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).
+        // 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).
         requestAnimationFrame(() => {
             const active = document.activeElement;
             if (!active || active === document.body) {
-                triggerRef.current?.focus();
+                item.setFocused();
+                item.getElement()?.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: {
+    // Keyboard route to the ⋯ menu, which is out of the tab order.
+    const handleKeyDown = (e) => {
+        const isMenuKey = e.key === "ContextMenu" ||
+            (e.shiftKey && e.key === "F10") ||
+            (e.altKey && e.key === "ArrowDown");
+        if (!isMenuKey)
+            return;
+        if (e.target !== e.currentTarget)
+            return; // the row itself, not a child
+        // no ⋯ button rendered, no keyboard menu either
+        const trigger = triggerRef.current;
+        if (!trigger)
+            return;
+        e.preventDefault();
+        item.setFocused();
+        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: {
             ["--guides-bg"]: layers.join(","),
             ["--guides-pos"]: positions.join(","),
             ["--guides-size"]: sizes.join(","),
@@ -83413,12 +83435,9 @@ const useFileTree = ({ projectFiles, onRename, onDrop, onOpenFile, rootId, readO
         itemInstance: {
             getProps: ({ item, prev }) => {
                 const isFolder = item.isFolder();
-                const state = item.isExpanded() ? "expanded" : "collapsed";
                 return {
                     ...prev?.(),
-                    ...(isFolder && {
-                        "aria-label": `${item.getItemName()}, ${state}`,
-                    }),
+                    ...(isFolder && { "aria-expanded": item.isExpanded() }),
                     onClick: () => {
                         item.setFocused();
                         item.primaryAction();
@@ -83511,6 +83530,7 @@ const EditorTypes_1 = __webpack_require__(42108);
 const projectHelpers_1 = __webpack_require__(2610);
 const ProjectTypes_1 = __webpack_require__(27130);
 const stores_1 = __webpack_require__(32132);
+const announce_1 = __webpack_require__(29331);
 const downloadContent_1 = __webpack_require__(9879);
 const editorFsThunks_1 = __webpack_require__(71862);
 /** Custom hook for action handlers on top headless-tree functionality */
@@ -83522,6 +83542,8 @@ const useFileTreeActions = () => {
     const dispatch = (0, react_redux_1.useDispatch)();
     // Creating component draft is local-only, not persisted in Redux
     const [draft, setDraft] = (0, react_1.useState)(null);
+    // A created item still waiting to be focused, once it renders in place.
+    const [pendingFocusId, setPendingFocusId] = (0, react_1.useState)(null);
     const openTreeFile = (0, react_1.useCallback)((id) => {
         const isTab = (tab) => tab.type === EditorTypes_1.OpenedTabType.FILE && tab.id === id;
         const fileIndex = openedTabs.findIndex(isTab);
@@ -83649,13 +83671,37 @@ const useFileTreeActions = () => {
         const item = tree.getRenamingItem();
         if (!item)
             return;
+        const id = item.getId();
+        const isDraft = Boolean(draft && draft.id === id);
         // If any draft that is being created
-        if (draft && draft.id === item.getId()) {
+        if (draft && isDraft) {
             const data = item.getItemData();
             saveNewComponent(data, draft.parentId);
         }
         tree.completeRenaming();
-    }, [tree, draft, saveNewComponent]);
+        if (isDraft) {
+            setPendingFocusId(id);
+            return;
+        }
+        setFocusedItem(id);
+        const renamedRow = tree.getItemInstance(id)?.getElement();
+        if (renamedRow)
+            (0, announce_1.describeFocusTarget)(renamedRow);
+    }, [tree, draft, saveNewComponent, setFocusedItem]);
+    // Runs on the render that first places a created item in its sorted position.
+    (0, react_1.useEffect)(() => {
+        if (!pendingFocusId)
+            return;
+        const element = tree.getItemInstance(pendingFocusId)?.getElement();
+        if (!element?.isConnected)
+            return;
+        setPendingFocusId(null);
+        setFocusedItem(pendingFocusId);
+        if (document.activeElement === element)
+            element.blur();
+        (0, announce_1.describeFocusTarget)(element);
+        element.focus();
+    }, [pendingFocusId, projectComponents, tree, setFocusedItem]);
     const removeComponent = (0, react_1.useCallback)((id) => {
         const item = tree.getItemInstance(id);
         if (!item)
@@ -83701,6 +83747,7 @@ const FileTreeContext_1 = __webpack_require__(5323);
 const treeGuides_1 = __webpack_require__(35258);
 const EmptyStateMessage_1 = __webpack_require__(34898);
 const FileTree = () => {
+    const treeId = (0, react_1.useId)();
     const projectComponents = (0, stores_1.useAppSelector)((state) => state.editor.project.components);
     const focussedFileIndex = (0, stores_1.useAppSelector)((state) => state.editor.focussedFileIndex);
     const openFiles = (0, stores_1.useAppSelector)((state) => state.editor.openedTabs);
@@ -83709,19 +83756,42 @@ const FileTree = () => {
     const treeItems = tree.getItems();
     const guidesByIndex = (0, treeGuides_1.getGuidesByIndex)(treeItems);
     const activeLevel = (0, treeGuides_1.getActiveLevel)(treeItems.find((it) => it.getId() === focusedItem) ?? null);
-    // Sync focused file in editor with focused item in tree
+    // Selection, not focus: focus carries the tree's single tab stop, so pointing
+    // it at the open file would make Tab land there instead of at the top.
     (0, react_1.useEffect)(() => {
         if (!openFiles || focussedFileIndex === undefined)
             return;
         const tab = openFiles[focussedFileIndex];
-        const focusedFileId = tab?.type === EditorTypes_1.OpenedTabType.FILE ? tab.id : undefined;
-        const projectFile = projectComponents.find((c) => c.id === focusedFileId);
-        if (projectFile && projectFile.id !== focusedItem) {
-            setFocusedItem(projectFile.id);
-        }
+        const openFileId = tab?.type === EditorTypes_1.OpenedTabType.FILE ? tab.id : undefined;
+        const projectFile = projectComponents.find((c) => c.id === openFileId);
+        tree.setSelectedItems(projectFile ? [projectFile.id] : []);
         // react only to focussedFileIndex and openFiles changes
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [focussedFileIndex, openFiles, setFocusedItem]);
+    }, [focussedFileIndex, openFiles]);
+    // Collapsing a folder hides whatever was focused inside it, and a focusedItem
+    // matching no rendered row drops the whole tree out of the tab order.
+    (0, react_1.useEffect)(() => {
+        if (focusedItem === null)
+            return;
+        if (treeItems.some((item) => item.getId() === focusedItem))
+            return;
+        setFocusedItem(null);
+    }, [treeItems, focusedItem, setFocusedItem]);
+    // The tab stop lives on focusedItem, which is remembered — so without this
+    // every entry after the first lands on the focused item, not first one.
+    const handleFocusLeavingTree = (event) => {
+        const movedTo = event.relatedTarget;
+        if (movedTo && event.currentTarget.contains(movedTo))
+            return; // still inside
+        // A missing relatedTarget can also mean the rename input just unmounted, so
+        // wait a frame and clear only if focus really landed outside the tree.
+        const container = event.currentTarget;
+        requestAnimationFrame(() => {
+            if (container.contains(document.activeElement))
+                return;
+            setFocusedItem(null);
+        });
+    };
     const treeCtx = {
         createComponent,
         cancelRenaming,
@@ -83736,7 +83806,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("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, {}))] }));
+    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), treeId: treeItems.length > 0 ? treeId : undefined }), treeItems.length > 0 ? ((0, jsx_runtime_1.jsxs)("div", { ...tree.getContainerProps("Project files"), id: treeId, onBlur: handleFocusLeavingTree, 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;
 
@@ -86445,10 +86515,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)(() => {
@@ -86503,6 +86576,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;
 
@@ -87350,6 +87433,7 @@ exports["default"] = exports.UserSlice.reducer;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.fsImportFolder = exports.fsImportFiles = exports.fsRemove = exports.fsAdd = exports.fsMove = exports.fsRename = void 0;
 const sendToast_1 = __webpack_require__(50068);
+const announce_1 = __webpack_require__(29331);
 const fileValidation_1 = __webpack_require__(59615);
 const planners_1 = __webpack_require__(5819);
 const utils_1 = __webpack_require__(33321);
@@ -87357,6 +87441,7 @@ const constants_1 = __webpack_require__(16287);
 const EditorTypes_1 = __webpack_require__(42108);
 const ProjectTypes_1 = __webpack_require__(27130);
 const macSystemFiles_1 = __webpack_require__(18213);
+const projectHelpers_1 = __webpack_require__(2610);
 const EditorSlice_1 = __webpack_require__(68512);
 const selectComponents = (state) => {
     return state.editor.project.components ?? [];
@@ -87370,6 +87455,30 @@ const DELETE_SUCCESS_TOAST = {
     [ProjectTypes_1.ProjectComponentType.DIR]: "The folder has been successfully deleted.",
     [ProjectTypes_1.ProjectComponentType.FILE]: "The file has been successfully deleted.",
 };
+// Screen-reader copy: shorter and single-line than the toasts.
+const kindOf = (component) => component.type === ProjectTypes_1.ProjectComponentType.DIR ? "Folder" : "File";
+const fileCount = (count) => `${count} ${count === 1 ? "file" : "files"}`;
+const withDuplicates = (summary, hasDuplicates) => hasDuplicates ? `${summary} Duplicate names were renamed.` : summary;
+const filesUploadedMessage = (uploaded, total, hasDuplicates, singleName) => {
+    if (uploaded === 0) {
+        return `Upload failed. ${fileCount(total)} could not be uploaded.`;
+    }
+    if (uploaded < total) {
+        return withDuplicates(`${uploaded} of ${fileCount(total)} uploaded, ${total - uploaded} failed.`, hasDuplicates);
+    }
+    const summary = uploaded === 1 && singleName
+        ? `${singleName} uploaded.`
+        : `${fileCount(uploaded)} uploaded.`;
+    return withDuplicates(summary, hasDuplicates);
+};
+const folderUploadedMessage = (folderName, uploaded, total, hasDuplicates) => {
+    if (uploaded === 0)
+        return `Folder ${folderName} could not be uploaded.`;
+    const summary = uploaded === total
+        ? `Folder ${folderName} uploaded with ${fileCount(uploaded)}.`
+        : `Folder ${folderName} uploaded with ${uploaded} of ${fileCount(total)}, ${total - uploaded} failed.`;
+    return withDuplicates(summary, hasDuplicates);
+};
 const hasCaseInsensitiveDuplicateNames = (files) => {
     const seen = new Set();
     for (const file of files) {
@@ -87385,8 +87494,16 @@ const fsRename = ({ id, parentId, newName, }) => (dispatch, getState) => {
     const state = getState();
     const components = selectComponents(state);
     const componentsMap = (0, utils_1.buildComponentsById)(components);
+    const component = componentsMap.get(id);
     const patch = (0, planners_1.planRename)(id, parentId, newName, componentsMap);
     dispatch((0, EditorSlice_1.applyComponentsPatch)(patch));
+    if (!component)
+        return;
+    // The tree creates items nameless and names them through this rename, so an
+    // empty previous name means a create.
+    (0, announce_1.announce)(component.name
+        ? `${(0, projectHelpers_1.getFullComponentName)(component)} renamed to ${newName}`
+        : `${kindOf(component)} ${newName} created`);
 };
 exports.fsRename = fsRename;
 const fsMove = ({ id, parentId }) => (dispatch, getState) => {
@@ -87394,8 +87511,15 @@ const fsMove = ({ id, parentId }) => (dispatch, getState) => {
     const components = selectComponents(state);
     const componentsMap = (0, utils_1.buildComponentsById)(components);
     const parentByChildId = (0, utils_1.buildParentByChildId)(components);
+    const destination = componentsMap.get(parentId);
     const patch = (0, planners_1.planMove)(id, parentId, componentsMap, parentByChildId);
     dispatch((0, EditorSlice_1.applyComponentsPatch)(patch));
+    // Absent from the patch means nothing moved. Use the planned name: it may
+    // have been made unique in the new parent.
+    const moved = patch.upsert.find((component) => component.id === id);
+    if (moved && destination) {
+        (0, announce_1.announce)(`${(0, projectHelpers_1.getFullComponentName)(moved)} moved to ${destination.name || "the project root"}`);
+    }
 };
 exports.fsMove = fsMove;
 const fsAdd = ({ component, parentId, }) => (dispatch, getState) => {
@@ -87404,6 +87528,7 @@ const fsAdd = ({ component, parentId, }) => (dispatch, getState) => {
     if (component.type === ProjectTypes_1.ProjectComponentType.FILE &&
         !(0, utils_1.validateProjectFilesCount)(components, 1)) {
         (0, sendToast_1.showError)(filesCountErrorMessage);
+        (0, announce_1.announce)(filesCountErrorMessage);
         return;
     }
     const componentsMap = (0, utils_1.buildComponentsById)(components);
@@ -87412,6 +87537,7 @@ const fsAdd = ({ component, parentId, }) => (dispatch, getState) => {
     if (component.type === ProjectTypes_1.ProjectComponentType.FILE) {
         dispatch((0, EditorSlice_1.openFile)({ id: component.id }));
     }
+    // Silent: the draft is nameless here, and fsRename announces the create.
 };
 exports.fsAdd = fsAdd;
 const fsRemove = (id) => (dispatch, getState) => {
@@ -87429,8 +87555,10 @@ const fsRemove = (id) => (dispatch, getState) => {
         dispatch((0, EditorSlice_1.closeFile)({ id }));
     });
     dispatch((0, EditorSlice_1.applyComponentsPatch)(patch));
-    if (component)
+    if (component) {
         (0, sendToast_1.showSuccess)(DELETE_SUCCESS_TOAST[component.type]);
+        (0, announce_1.announce)(`${kindOf(component)} ${(0, projectHelpers_1.getFullComponentName)(component)} deleted`);
+    }
 };
 exports.fsRemove = fsRemove;
 const fsImportFiles = ({ files, parentId }) => async (dispatch, getState) => {
@@ -87442,10 +87570,12 @@ const fsImportFiles = ({ files, parentId }) => async (dispatch, getState) => {
         return;
     if (!(0, utils_1.validateProjectFilesCount)(components, importableFiles.length)) {
         (0, sendToast_1.showError)(filesCountErrorMessage);
+        (0, announce_1.announce)(filesCountErrorMessage);
         return;
     }
     const { validFiles, importErrors } = (0, fileValidation_1.validateFiles)(importableFiles);
     const hasDuplicates = hasCaseInsensitiveDuplicateNames(validFiles);
+    const summary = filesUploadedMessage(validFiles.length, importableFiles.length, hasDuplicates, validFiles[0]?.name);
     if (validFiles.length > 0) {
         (0, sendToast_1.showSuccess)(`Selected files uploaded successfully.\n${validFiles.length} of ${importableFiles.length} file(s) uploaded.`);
         if (hasDuplicates) {
@@ -87454,6 +87584,7 @@ const fsImportFiles = ({ files, parentId }) => async (dispatch, getState) => {
     }
     else {
         (0, sendToast_1.showError)(`Selected files couldn’t be uploaded.\n${importableFiles.length} file(s) failed to upload.`);
+        (0, announce_1.announce)(summary);
     }
     for (const error of importErrors) {
         (0, sendToast_1.showError)(error.reason);
@@ -87468,6 +87599,7 @@ const fsImportFiles = ({ files, parentId }) => async (dispatch, getState) => {
     dispatch((0, EditorSlice_1.queueBinaryWrites)({
         writes: binaryWrites,
     }));
+    (0, announce_1.announce)(summary);
 };
 exports.fsImportFiles = fsImportFiles;
 const fsImportFolder = ({ files, parentId }) => async (dispatch, getState) => {
@@ -87481,11 +87613,13 @@ const fsImportFolder = ({ files, parentId }) => async (dispatch, getState) => {
         return;
     if (!(0, utils_1.validateProjectFilesCount)(components, importableFiles.length)) {
         (0, sendToast_1.showError)(filesCountErrorMessage);
+        (0, announce_1.announce)(filesCountErrorMessage);
         return;
     }
     const folderName = importableFiles[0]?.webkitRelativePath?.split("/")[0];
     const { validFiles, importErrors } = (0, fileValidation_1.validateFiles)(importableFiles);
     const hasDuplicates = hasCaseInsensitiveDuplicateNames(validFiles);
+    const summary = folderUploadedMessage(folderName ?? "", validFiles.length, importableFiles.length, hasDuplicates);
     if (validFiles.length > 0) {
         (0, sendToast_1.showSuccess)(`Folder '${folderName}' upload complete.\n${validFiles.length} of ${importableFiles.length} file(s) uploaded successfully.`);
         if (hasDuplicates) {
@@ -87494,6 +87628,7 @@ const fsImportFolder = ({ files, parentId }) => async (dispatch, getState) => {
     }
     else {
         (0, sendToast_1.showError)(`'${folderName}' folder couldn't be uploaded.\n${importableFiles.length} file(s) failed to upload.`);
+        (0, announce_1.announce)(summary);
     }
     for (const error of importErrors) {
         (0, sendToast_1.showError)(error.reason);
@@ -87511,6 +87646,7 @@ const fsImportFolder = ({ files, parentId }) => async (dispatch, getState) => {
     dispatch((0, EditorSlice_1.queueBinaryWrites)({
         writes: binaryWrites,
     }));
+    (0, announce_1.announce)(summary);
 };
 exports.fsImportFolder = fsImportFolder;
 
@@ -88042,6 +88178,115 @@ class LeaveGuardController {
 exports.LeaveGuardController = LeaveGuardController;
 
 
+/***/ }),
+
+/***/ 29331:
+/***/ ((__unused_webpack_module, exports) => {
+
+
+/**
+ * Screen-reader status messages. Two rules: a message must
+ * be a node inserted into a region already on the page, and a live region is
+ * never heard while focus moves - hence describeFocusTarget().
+ */
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.resetAnnouncements = exports.describeFocusTarget = exports.announce = exports.FOCUS_SETTLE_MS = void 0;
+// How long a message waits for a focus target to claim it.
+exports.FOCUS_SETTLE_MS = 150;
+// How long a message stays in the DOM once read.
+const MESSAGE_TTL_MS = 5000;
+const HIDDEN_STYLE = "position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;" +
+    "overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0";
+let live = null;
+// Not a live region: holds text referenced by aria-describedby.
+let descriptions = null;
+let pending = null;
+let claimable = null;
+let descriptionCount = 0;
+const mount = () => {
+    if (live)
+        return;
+    const host = document.createElement("div");
+    host.setAttribute("style", HIDDEN_STYLE);
+    live = document.createElement("div");
+    live.setAttribute("role", "alert");
+    live.setAttribute("aria-live", "assertive");
+    descriptions = document.createElement("div");
+    host.append(live, descriptions);
+    document.body.appendChild(host);
+};
+if (typeof document !== "undefined") {
+    if (document.body)
+        mount();
+    else
+        document.addEventListener("DOMContentLoaded", mount, { once: true });
+}
+const announce = (message) => {
+    const text = message.replace(/\s+/g, " ").trim();
+    if (!text)
+        return;
+    claimable = text;
+    if (pending)
+        clearTimeout(pending);
+    pending = setTimeout(() => {
+        pending = null;
+        if (claimable === null || !live)
+            return;
+        const node = document.createElement("div");
+        node.textContent = claimable;
+        claimable = null;
+        live.appendChild(node);
+        setTimeout(() => node.remove(), MESSAGE_TTL_MS);
+    }, exports.FOCUS_SETTLE_MS);
+};
+exports.announce = announce;
+const describeFocusTarget = (element) => {
+    if (claimable === null || !descriptions)
+        return;
+    const text = claimable;
+    claimable = null;
+    if (pending) {
+        clearTimeout(pending);
+        pending = null;
+    }
+    const id = `textjam-status-${(descriptionCount += 1)}`;
+    const node = document.createElement("div");
+    node.id = id;
+    node.textContent = text;
+    descriptions.appendChild(node);
+    element.setAttribute("aria-describedby", [element.getAttribute("aria-describedby"), id].filter(Boolean).join(" "));
+    // Only describes the action just taken, so drop it on blur.
+    const cleanup = () => {
+        if (!node.isConnected)
+            return;
+        element.removeEventListener("blur", cleanup);
+        const next = (element.getAttribute("aria-describedby") ?? "")
+            .split(/\s+/)
+            .filter(Boolean)
+            .filter((token) => token !== id)
+            .join(" ");
+        if (next)
+            element.setAttribute("aria-describedby", next);
+        else
+            element.removeAttribute("aria-describedby");
+        node.remove();
+    };
+    element.addEventListener("blur", cleanup);
+    setTimeout(cleanup, MESSAGE_TTL_MS);
+};
+exports.describeFocusTarget = describeFocusTarget;
+/** Test helper: empties the regions and drops any pending message. */
+const resetAnnouncements = () => {
+    if (pending)
+        clearTimeout(pending);
+    pending = null;
+    claimable = null;
+    live?.replaceChildren();
+    descriptions?.replaceChildren();
+};
+exports.resetAnnouncements = resetAnnouncements;
+
+
 /***/ }),
 
 /***/ 5060:

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__itemFocused--SmUbE .styles-module__itemContent--663gn{background-color:#c5ffe8}.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__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__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.9",
+  "version": "0.5.11",
   "license": "Apache-2.0",
   "homepage": "https://github.com/GirlsFirst/gwchq-textjam",
   "author": "Girls Who Code HQ",