chuijs 4.0.2 → 4.0.4

package/framework/appLayout/default/chui_app_layout.js

@@ -1,42 +1,43 @@
-const {Animation} = require('../../modules/chui_animations/animations');
-const {Icon, Icons} = require('../../components/chui_icons/icons');
-const {Button} = require("../../components/chui_button/button");
+const { Animation } = require("../../modules/chui_animations/animations");
+const { reducedMotion, tokenTime } = require("../../modules/chui_animations/motion");
+const { Icon, Icons } = require("../../components/chui_icons/icons");
+const { Button } = require("../../components/chui_button/button");
 // НАСТРОЙКИ
-const {Dialog} = require("../../components/chui_modal/modal");
-const {Label} = require("../../components/chui_label/label");
-const {ContentBlock} = require("../../components/chui_content_block/content_block");
-const {Popup} = require("../../components/chui_popups/popups");
-const {UpdateNotification} = require("../../components/chui_notification/notification_update");
-const {ipcRenderer} = require("electron");
-const chui_functions = require('../../modules/chui_functions');
-const {DownloadNotification} = require("../../components/chui_notification/notification_download");
-const {Log} = require("../../../framework/modules/chui_logger/chui_logger");
-const {MenuKeyboard, makeKeyboardButton} = require('../../modules/chui_a11y/chui_a11y');
-const {LAYOUT_ROLE, LayoutRefs, registerLayout, requireLayoutNode} = require('../../modules/chui_layout/chui_layout');
-const {BRIDGE_CHANNELS} = require('../../modules/chui_services/chui_channels');
-const {OverlayScrollbars} = require('../../modules/chui_scrollbar/chui_scrollbar');
-const {MenuBar} = require('../../components/chui_menu_bar/menu_bar');
-const {Avatar} = require('../../components/chui_avatar/avatar');
-const {EmptyState} = require('../../components/chui_empty_state/empty_state');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { Dialog } = require("../../components/chui_modal/modal");
+const { Label } = require("../../components/chui_label/label");
+const { ContentBlock } = require("../../components/chui_content_block/content_block");
+const { Popup } = require("../../components/chui_popups/popups");
+const { UpdateNotification } = require("../../components/chui_notification/notification_update");
+const { ipcRenderer } = require("electron");
+const chuiFunctions = require("../../modules/chui_functions");
+const { DownloadNotification } = require("../../components/chui_notification/notification_download");
+const { Log } = require("../../../framework/modules/chui_logger/chui_logger");
+const { MenuKeyboard, makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
+const { LAYOUT_ROLE, LayoutRefs, registerLayout, requireLayoutNode } = require("../../modules/chui_layout/chui_layout");
+const { BRIDGE_CHANNELS } = require("../../modules/chui_services/chui_channels");
+const { OverlayScrollbars } = require("../../modules/chui_scrollbar/chui_scrollbar");
+const { MenuBar } = require("../../components/chui_menu_bar/menu_bar");
+const { Avatar } = require("../../components/chui_avatar/avatar");
+const { EmptyState } = require("../../components/chui_empty_state/empty_state");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 const fs = require("fs");
 
 // Глобальные обработчики ошибок renderer-процесса вешаются один раз на процесс
-let app_error_handlers_installed = false;
+let appErrorHandlersInstalled = false;
 
 class Events {
-    #route_event = undefined;
+    #routeEvent = undefined;
     constructor() {}
     route(page) {
-        this.#route_event = new CustomEvent("route_event_"+page.constructor.name, {
+        this.#routeEvent = new CustomEvent("route_event_" + page.constructor.name, {
             bubbles: true,
             detail: {
                 class: page.constructor.name,
                 title: page.getTitle(),
-                page: page
+                page: page,
             },
         });
-        document.dispatchEvent(this.#route_event)
+        document.dispatchEvent(this.#routeEvent);
     }
 }
 
@@ -52,19 +53,19 @@ const USER_DROPDOWN_EDGE = 8;
  * а рядом висело название страницы. Класс на шапке прячет page_name — см. global_style.css.
  */
 function applyPageMenuBar(header, menuBar) {
-    const page_name = requireLayoutNode(LAYOUT_ROLE.PAGE_NAME);
+    const pageName = requireLayoutNode(LAYOUT_ROLE.PAGE_NAME);
     const previous = header.querySelector("chui_menu_bar_main");
     // Панели выпадающих списков живут в body (у шапки свой backdrop-filter), а не в полосе,
     // поэтому снятие полосы обязано убирать и их: иначе на каждой смене страницы в body
     // оставалась бы пачка невидимых панелей. Своя же полоса, вернувшаяся на место, не трогается.
     if (previous !== null && previous !== menuBar) MenuBar.destroy(previous);
     if (previous !== null) previous.remove();
-    const has_menu_bar = menuBar !== undefined && menuBar !== null;
-    header.classList.toggle(HEADER_WITH_MENU_BAR_CLASS, has_menu_bar);
-    if (!has_menu_bar) return;
+    const hasMenuBar = menuBar !== undefined && menuBar !== null;
+    header.classList.toggle(HEADER_WITH_MENU_BAR_CLASS, hasMenuBar);
+    if (!hasMenuBar) return;
     new Animation(menuBar).fadeIn();
     // Полоса встаёт туда же, где стояло название — сразу за кнопкой меню маршрутов
-    page_name.after(menuBar);
+    pageName.after(menuBar);
 }
 
 /**
@@ -75,9 +76,9 @@ function applyPageMenuBar(header, menuBar) {
  * многоточием (см. `page_name` в global_style.css), и прочитать его целиком можно только так.
  */
 function setPageName(title = String()) {
-    const page_name = requireLayoutNode(LAYOUT_ROLE.PAGE_NAME);
-    page_name.innerHTML = String(title);
-    page_name.setAttribute("title", page_name.innerText);
+    const pageName = requireLayoutNode(LAYOUT_ROLE.PAGE_NAME);
+    pageName.innerHTML = String(title);
+    pageName.setAttribute("title", pageName.innerText);
 }
 
 class Route extends Events {
@@ -85,24 +86,24 @@ class Route extends Events {
         super();
     }
     go(page) {
-        let center = requireLayoutNode(LAYOUT_ROLE.CENTER);
+        const center = requireLayoutNode(LAYOUT_ROLE.CENTER);
         //
         setPageName(page.getTitle());
-        center.innerHTML = '';
+        center.innerHTML = "";
         // Содержимое собирает сама страница (`Page#render`), оболочка в него не подмешивает
         // ничего: узел `page_title` (был здесь) дублировал заголовок, который страница
         // рисует сама, а `Page#render` отдаёт один и тот же узел — повторный переход на тот
         // же экземпляр страницы (кнопка «Назад» из `Page#setBackButton`) добавлял второй
         // заголовок. Место названия — шапка (`setPageName`).
         center.appendChild(page.render());
-        const _page = center.querySelector('page');
+        const _page = center.querySelector("page");
         new Animation(_page).fadeIn();
         // Стирания `center.removeAttribute("style")` здесь больше нет: инлайновых
         // стилей на `center` не ставит ни одна часть оболочки, а стирать чужое
         // (если появится) — это ловушка, на которой уже терялись `display: flex`
         applyPageMenuBar(requireLayoutNode(LAYOUT_ROLE.HEADER), page.getMenuBar());
 
-        this.route(page)
+        this.route(page);
     }
 }
 
@@ -132,22 +133,22 @@ function makeHeaderButtonBox(options = { title: undefined, icon: undefined, reve
     const button = document.createElement("header_button");
     const title = document.createElement("header_button_title");
     const icon = document.createElement("header_button_icon");
-    const has_title = options.title !== undefined && options.title !== null && options.title !== "";
-    const has_icon = options.icon !== undefined && options.icon !== null;
-    if (has_title) title.innerText = options.title;
-    if (has_icon) icon.innerHTML = new Icon(options.icon, "var(--header_icon_size)").getHTML();
-    if (has_title && has_icon) {
+    const hasTitle = options.title !== undefined && options.title !== null && options.title !== "";
+    const hasIcon = options.icon !== undefined && options.icon !== null;
+    if (hasTitle) title.innerText = options.title;
+    if (hasIcon) icon.innerHTML = new Icon(options.icon, "var(--header_icon_size)").getHTML();
+    if (hasTitle && hasIcon) {
         // `reverse` — значок перед подписью; зазор 6 px в обоих случаях держит сам значок
         icon.style[options.reverse ? "marginRight" : "marginLeft"] = "6px";
         button.appendChild(options.reverse ? icon : title);
         button.appendChild(options.reverse ? title : icon);
-    } else if (has_title) {
+    } else if (hasTitle) {
         button.appendChild(title);
-    } else if (has_icon) {
+    } else if (hasIcon) {
         // Отступы квадратной кнопки держит CSS по признаку «подписи нет»
         button.appendChild(icon);
     }
-    makeHeaderButton(button, has_icon ? icon : undefined, has_title ? undefined : options.label);
+    makeHeaderButton(button, hasIcon ? icon : undefined, hasTitle ? undefined : options.label);
     return button;
 }
 
@@ -161,23 +162,26 @@ function makeHeaderButtonBox(options = { title: undefined, icon: undefined, reve
  * подобраны под вид набора; цвет наследуется от кнопки через `currentColor`.
  */
 const WINDOW_ICONS = {
-    minimize: '<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M4.5 7.5 L10 12.5 L15.5 7.5" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>',
-    maximize: '<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M4.5 12.5 L10 7.5 L15.5 12.5" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>',
-    restore: '<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M10 5 L15 10 L10 15 L5 10 Z" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+    minimize:
+        '<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M4.5 7.5 L10 12.5 L15.5 7.5" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+    maximize:
+        '<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M4.5 12.5 L10 7.5 L15.5 12.5" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+    restore:
+        '<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M10 5 L15 10 L10 15 L5 10 Z" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>',
     close: '<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M5 5 L15 15 M15 5 L5 15" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>',
 };
 
 class WindowControls {
     // Управление кнопками
-    #box = document.createElement("wc_box")
-    #close = document.createElement("wc_close")
-    #maximize = document.createElement("wc_maximize")
-    #minimize = document.createElement("wc_minimize")
+    #box = document.createElement("wc_box");
+    #close = document.createElement("wc_close");
+    #maximize = document.createElement("wc_maximize");
+    #minimize = document.createElement("wc_minimize");
     // Подписка на нересайзящееся окно: set() вызывается и из конструктора Header, и из
     // addWC(), поэтому в set() слушатель ipcRenderer накапливался.
-    #resizable_false_event = () => this.#maximize.remove();
+    #resizableFalseEvent = () => this.#maximize.remove();
     // Номер запроса состояния гасит ответы, пришедшие не в том порядке
-    #sync_request = 0;
+    #syncRequest = 0;
     constructor() {
         // Скрипт окна может быть preload'ом и выполняться до документа: здесь документ уже настоящий,
         // поэтому `dir`/`lang` (и зеркалирование логических свойств CSS) встают гарантированно
@@ -188,15 +192,15 @@ class WindowControls {
         this.#setButton(this.#minimize, I18n.t("appLayout.window.minimize"), "minimize");
         // «Развернуть» — шеврон вверх, зеркало «свернуть»: пара читается как одна ось
         this.#setButton(this.#maximize, I18n.t("appLayout.window.maximize"), "maximize");
-        this.#close.addEventListener("click", () => this.#windowAction("close"))
-        this.#minimize.addEventListener("click", () => this.#windowAction("minimize"))
+        this.#close.addEventListener("click", () => this.#windowAction("close"));
+        this.#minimize.addEventListener("click", () => this.#windowAction("minimize"));
         // Разворот и восстановление — одно действие: решение принимает окно, а не кнопка
-        this.#maximize.addEventListener("click", () => this.#windowAction("toggle-maximize"))
+        this.#maximize.addEventListener("click", () => this.#windowAction("toggle-maximize"));
         // Разворот приходит не только от нашей кнопки (двойной клик по полосе, меню окна),
         // поэтому состояние читаем по факту изменения размера окна
-        window.addEventListener("resize", this.#sync_maximized_event)
-        this.#syncMaximized()
-        ipcRenderer.on("chui_resizable_false", this.#resizable_false_event)
+        window.addEventListener("resize", this.#syncMaximizedEvent);
+        this.#syncMaximized();
+        ipcRenderer.on("chui_resizable_false", this.#resizableFalseEvent);
     }
     /** Кнопка окна — значок с именем для скринридера, фокусом и активацией с клавиатуры.
      *  Значок рисуется линиями (`WINDOW_ICONS`), размер задаёт CSS (см. global_style.css) */
@@ -233,9 +237,9 @@ class WindowControls {
     // Состояние приходит асинхронно, поэтому ответ устаревшего запроса отбрасывается по номеру:
     // иначе быстрая пара «развернуть/восстановить» могла бы применить ответ в обратном порядке
     #syncMaximized() {
-        const request = ++this.#sync_request;
+        const request = ++this.#syncRequest;
         this.#windowState().then((state) => {
-            if (request !== this.#sync_request) return;
+            if (request !== this.#syncRequest) return;
             const maximized = state.isMaximized === true;
             const label = maximized ? I18n.t("appLayout.window.restore") : I18n.t("appLayout.window.maximize");
             this.#maximize.classList.toggle("wc_maximized", maximized);
@@ -244,39 +248,39 @@ class WindowControls {
             this.#maximize.setAttribute("aria-label", label);
         });
     }
-    #sync_maximized_event = () => this.#syncMaximized();
-    set(pos_bool = Boolean()) {
-        if (pos_bool) {
-            this.#box.appendChild(this.#close)
-            this.#box.appendChild(this.#maximize)
-            this.#box.appendChild(this.#minimize)
+    #syncMaximizedEvent = () => this.#syncMaximized();
+    set(isEnabled = Boolean()) {
+        if (isEnabled) {
+            this.#box.appendChild(this.#close);
+            this.#box.appendChild(this.#maximize);
+            this.#box.appendChild(this.#minimize);
         } else {
-            this.#box.appendChild(this.#minimize)
-            this.#box.appendChild(this.#maximize)
-            this.#box.appendChild(this.#close)
+            this.#box.appendChild(this.#minimize);
+            this.#box.appendChild(this.#maximize);
+            this.#box.appendChild(this.#close);
         }
         return this.#box;
     }
 }
 
 class Header {
-    #wc_box = new WindowControls();
+    #wcBox = new WindowControls();
     #header = document.createElement("header");
-    #header_main = document.createElement("header_main");
-    #header_left_box = document.createElement("header_left_box");
-    #header_right_box = document.createElement("header_right_box");
+    #headerMain = document.createElement("header_main");
+    #headerLeftBox = document.createElement("header_left_box");
+    #headerRightBox = document.createElement("header_right_box");
     // Высота полосы измеряется, а не предполагается — см. #observeHeight
-    #height_observer = undefined;
-    #height_frame = 0;
-    #published_height = 0;
+    #heightObserver = undefined;
+    #heightFrame = 0;
+    #publishedHeight = 0;
     constructor(layout) {
         layout.set(LAYOUT_ROLE.HEADER, this.#header);
         this.#header.id = "header";
-        this.#header_main.id = "header_main";
-        this.#header_main.appendChild(this.#header_left_box);
-        this.#header_main.appendChild(this.#header_right_box);
-        this.#header_main.appendChild(this.#wc_box.set(false));
-        this.#header.appendChild(this.#header_main)
+        this.#headerMain.id = "header_main";
+        this.#headerMain.appendChild(this.#headerLeftBox);
+        this.#headerMain.appendChild(this.#headerRightBox);
+        this.#headerMain.appendChild(this.#wcBox.set(false));
+        this.#header.appendChild(this.#headerMain);
         this.#observeHeight();
     }
     /*
@@ -289,8 +293,8 @@ class Header {
      * Теперь высота измеряется и публикуется, поэтому токен верен при любой полосе.
      */
     #observeHeight() {
-        this.#height_observer = new ResizeObserver(() => this.#publishHeight());
-        this.#height_observer.observe(this.#header);
+        this.#heightObserver = new ResizeObserver(() => this.#publishHeight());
+        this.#heightObserver.observe(this.#header);
         this.#publishHeight();
     }
     /*
@@ -302,40 +306,41 @@ class Header {
      * записи без проверки крутят пересчёт на ровном месте.
      */
     #publishHeight() {
-        if (this.#height_frame !== 0) return;
-        this.#height_frame = requestAnimationFrame(() => {
-            this.#height_frame = 0;
+        if (this.#heightFrame !== 0) return;
+        this.#heightFrame = requestAnimationFrame(() => {
+            this.#heightFrame = 0;
             // offsetHeight включает черту снизу: она принадлежит полосе, от неё и считается отступ
             const height = this.#header.offsetHeight;
-            if (height === 0 || height === this.#published_height) return;
-            this.#published_height = height;
+            if (height === 0 || height === this.#publishedHeight) return;
+            this.#publishedHeight = height;
             document.documentElement.style.setProperty("--header_height", `${height}px`);
         });
     }
     addWC(boolean = Boolean()) {
-        this.#header_main.insertBefore(this.#wc_box.set(boolean), this.#header_main.firstChild);
+        this.#headerMain.insertBefore(this.#wcBox.set(boolean), this.#headerMain.firstChild);
     }
     addToLeftBeforeTitle(...components) {
-        for (let component of components) this.#header_left_box.insertBefore(component, this.#header_left_box.firstChild);
+        for (const component of components) this.#headerLeftBox.insertBefore(component, this.#headerLeftBox.firstChild);
     }
     /** Прежнее имя с опечаткой (`Tittle`): оставлено синонимом, чтобы не ломать чужие вызовы */
     addToLeftBeforeTittle(...components) {
         this.addToLeftBeforeTitle(...components);
     }
     addToLeft(...components) {
-        for (let component of components) {
-            this.#header_left_box.appendChild(component)
+        for (const component of components) {
+            this.#headerLeftBox.appendChild(component);
         }
     }
     addToRight(...components) {
-        for (let component of components) this.#header_right_box.insertBefore(component, this.#header_right_box.firstChild);
+        for (const component of components)
+            this.#headerRightBox.insertBefore(component, this.#headerRightBox.firstChild);
     }
     removeToRight(...components) {
-        for (let component of components) {
+        for (const component of components) {
             // У меню профиля панель лежит в body, а не в шапке (см. UserProfile),
             // поэтому снятие кнопки обязано убирать и панель: иначе в body копились бы невидимые меню
             UserProfile.destroy(component);
-            this.#header_right_box.removeChild(component);
+            this.#headerRightBox.removeChild(component);
         }
     }
     set() {
@@ -344,7 +349,7 @@ class Header {
 }
 
 class Center {
-    #center = document.createElement('center');
+    #center = document.createElement("center");
     constructor(layout) {
         this.#center.id = "center";
         layout.set(LAYOUT_ROLE.CENTER, this.#center);
@@ -356,30 +361,32 @@ class Center {
 
 class AppMenu {
     #routeList = [];
-    #appMenu = document.createElement('app_menu');
+    #appMenu = document.createElement("app_menu");
     #appMenuWidth = 400;
     #appMenuOffset = 25;
-    get #appMenuSlide() { return this.#appMenuWidth + this.#appMenuOffset; }
-    #routeViews = document.createElement('route_views');
-    #appMenuButton = document.createElement('app_menu_button');
+    get #appMenuSlide() {
+        return this.#appMenuWidth + this.#appMenuOffset;
+    }
+    #routeViews = document.createElement("route_views");
+    #appMenuButton = document.createElement("app_menu_button");
     // Шапка панели: плитка со значком и заголовок — панель читается выдвижным ящиком
-    #app_menu_header = document.createElement("app_menu_header");
-    #app_menu_header_icon = document.createElement("app_menu_header_icon");
-    #app_menu_header_title = document.createElement("app_menu_header_title");
+    #appMenuHeader = document.createElement("app_menu_header");
+    #appMenuHeaderIcon = document.createElement("app_menu_header_icon");
+    #appMenuHeaderTitle = document.createElement("app_menu_header_title");
     // Блок поиска: своя поверхность со значком, а не одинокий ввод на фоне панели
-    #app_menu_search_main = document.createElement("app_menu_search_main");
-    #app_menu_search_box = document.createElement("app_menu_search_box");
-    #app_menu_search_icon = document.createElement("app_menu_search_icon");
-    #app_menu_search_input = document.createElement("input");
+    #appMenuSearchMain = document.createElement("app_menu_search_main");
+    #appMenuSearchBox = document.createElement("app_menu_search_box");
+    #appMenuSearchIcon = document.createElement("app_menu_search_icon");
+    #appMenuSearchInput = document.createElement("input");
     // Подсказка, когда фильтр не нашёл ни одного пункта
-    #app_menu_empty = document.createElement("app_menu_empty");
+    #appMenuEmpty = document.createElement("app_menu_empty");
     // ===
-    #auto_close = false;
-    #search_enabled = false;
+    #autoClose = false;
+    #searchEnabled = false;
     #routeKeyboard = undefined;
     #header = undefined;
     #center = undefined;
-    #page_name = document.createElement('page_name');
+    #pageName = document.createElement("page_name");
     constructor(header, center, layout) {
         this.#header = header;
         this.#center = center;
@@ -389,9 +396,9 @@ class AppMenu {
         this.#appMenu.style.width = `${this.#appMenuWidth}px`;
         this.#appMenu.style.left = `calc(-${this.#appMenuSlide}px)`;
         //
-        this.#appMenuButton.id = "appMenuButton"
+        this.#appMenuButton.id = "appMenuButton";
         // Список пунктов — тот узел, которым управляет кнопка: `aria-controls` ссылается на него
-        this.#routeViews.id = "chui_app_menu"
+        this.#routeViews.id = "chui_app_menu";
         // Значок — украшение: без подписи имя кнопки складывалось из лигатуры («menu»)
         this.#appMenuButton.setAttribute("aria-label", I18n.t("appLayout.menu"));
         this.#appMenuButton.setAttribute("title", I18n.t("appLayout.menu"));
@@ -399,37 +406,37 @@ class AppMenu {
         this.#appMenuButton.addEventListener("click", () => {
             if (this.#appMenuButton.classList.contains("app_menu_button_active")) this.#close();
             else this.#open();
-        })
-        header.set().addEventListener('click', (e) => {
+        });
+        header.set().addEventListener("click", (e) => {
             if (e.target !== this.#appMenuButton) this.#close();
-        })
-        center.addEventListener('click', (e) => {
+        });
+        center.addEventListener("click", (e) => {
             if (!this.#appMenu.contains(e.target)) {
                 if (this.#appMenu.style.transform === `translateX(${this.#appMenuSlide}px)`) this.#close();
             }
-        })
-        this.#page_name.id = "page_name"
-        layout.set(LAYOUT_ROLE.PAGE_NAME, this.#page_name);
-        header.addToLeft(this.#appMenuButton, this.#page_name);
-        this.#app_menu_header_icon.appendChild(new Icon(Icons.NAVIGATION.MENU_OPEN, "16px").set());
+        });
+        this.#pageName.id = "page_name";
+        layout.set(LAYOUT_ROLE.PAGE_NAME, this.#pageName);
+        header.addToLeft(this.#appMenuButton, this.#pageName);
+        this.#appMenuHeaderIcon.appendChild(new Icon(Icons.NAVIGATION.MENU_OPEN, "16px").set());
         // Плитка и значок в ней — украшение: имя панели уже есть в заголовке
-        this.#app_menu_header_icon.setAttribute("aria-hidden", "true");
-        this.#app_menu_header_title.innerText = I18n.t("appLayout.menu");
+        this.#appMenuHeaderIcon.setAttribute("aria-hidden", "true");
+        this.#appMenuHeaderTitle.innerText = I18n.t("appLayout.menu");
         // Список пунктов назван головкой панели: скринридер читает «Меню», а не безымянный список
-        this.#app_menu_header_title.id = "chui_app_menu_title";
-        this.#routeViews.setAttribute("aria-labelledby", this.#app_menu_header_title.id);
-        this.#app_menu_header.appendChild(this.#app_menu_header_icon)
-        this.#app_menu_header.appendChild(this.#app_menu_header_title)
-        this.#app_menu_empty.innerText = I18n.t("appLayout.search.empty");
+        this.#appMenuHeaderTitle.id = "chui_app_menu_title";
+        this.#routeViews.setAttribute("aria-labelledby", this.#appMenuHeaderTitle.id);
+        this.#appMenuHeader.appendChild(this.#appMenuHeaderIcon);
+        this.#appMenuHeader.appendChild(this.#appMenuHeaderTitle);
+        this.#appMenuEmpty.innerText = I18n.t("appLayout.search.empty");
         // Подсказка лежит внутри списка, но пунктом не является: клавиатура меню её не видит (itemSelector "route")
-        this.#routeViews.appendChild(this.#app_menu_empty)
-        this.#appMenu.appendChild(this.#app_menu_header)
-        this.#appMenu.appendChild(this.#routeViews)
+        this.#routeViews.appendChild(this.#appMenuEmpty);
+        this.#appMenu.appendChild(this.#appMenuHeader);
+        this.#appMenu.appendChild(this.#routeViews);
         // Клавиатура и aria меню маршрутов: стрелки по пунктам, Escape закрывает и возвращает фокус на кнопку
         this.#routeKeyboard = new MenuKeyboard(this.#routeViews, {
             itemSelector: "route",
             onEscape: () => this.#close(),
-            trigger: this.#appMenuButton
+            trigger: this.#appMenuButton,
         });
         makeKeyboardButton(this.#appMenuButton);
         // Закрытая панель объявляется закрытой сразу: иначе у кнопки не было бы aria-expanded,
@@ -464,20 +471,20 @@ class AppMenu {
         this.#routeKeyboard.setExpanded(false);
     }
     enableSearchInput() {
-        if (this.#search_enabled) return;
-        this.#search_enabled = true;
-        this.#app_menu_search_input.classList.add("app_menu_search_input")
-        this.#app_menu_search_input.placeholder = I18n.t("appLayout.search.placeholder")
-        this.#app_menu_search_input.setAttribute("aria-label", I18n.t("appLayout.search.sections"))
+        if (this.#searchEnabled) return;
+        this.#searchEnabled = true;
+        this.#appMenuSearchInput.classList.add("app_menu_search_input");
+        this.#appMenuSearchInput.placeholder = I18n.t("appLayout.search.placeholder");
+        this.#appMenuSearchInput.setAttribute("aria-label", I18n.t("appLayout.search.sections"));
         // Подсветку поля даёт :focus-within на поверхности поиска — инлайновых стилей больше нет
-        this.#app_menu_search_input.addEventListener("input", (event) => {
-            this.#filterRoutes(event.target.value)
-        })
-        this.#app_menu_search_icon.innerHTML = new Icon(Icons.ACTIONS.SEARCH, "15px").getHTML();
-        this.#app_menu_search_box.appendChild(this.#app_menu_search_icon)
-        this.#app_menu_search_box.appendChild(this.#app_menu_search_input)
-        this.#app_menu_search_main.appendChild(this.#app_menu_search_box)
-        this.#appMenu.insertBefore(this.#app_menu_search_main, this.#routeViews)
+        this.#appMenuSearchInput.addEventListener("input", (event) => {
+            this.#filterRoutes(event.target.value);
+        });
+        this.#appMenuSearchIcon.innerHTML = new Icon(Icons.ACTIONS.SEARCH, "15px").getHTML();
+        this.#appMenuSearchBox.appendChild(this.#appMenuSearchIcon);
+        this.#appMenuSearchBox.appendChild(this.#appMenuSearchInput);
+        this.#appMenuSearchMain.appendChild(this.#appMenuSearchBox);
+        this.#appMenu.insertBefore(this.#appMenuSearchMain, this.#routeViews);
     }
     // Пункты списка: подсказка о пустом результате лежит там же, поэтому фильтруем по тегу
     #routes() {
@@ -493,15 +500,15 @@ class AppMenu {
             item.style.display = matches ? "" : "none";
             if (matches) visible++;
         }
-        this.#app_menu_empty.classList.toggle("app_menu_empty_visible", visible === 0);
+        this.#appMenuEmpty.classList.toggle("app_menu_empty_visible", visible === 0);
     }
     go(page) {
-        let center = this.#center;
+        const center = this.#center;
         //
         setPageName(page.getTitle());
-        center.innerHTML = '';
+        center.innerHTML = "";
         center.appendChild(page.render());
-        const _page = center.querySelector('page');
+        const _page = center.querySelector("page");
         new Animation(_page).fadeIn();
         // Стирания `center.removeAttribute("style")` здесь больше нет: инлайновых
         // стилей на `center` не ставит ни одна часть оболочки, а стирать чужое
@@ -510,33 +517,33 @@ class AppMenu {
     }
     setRouteTest(page) {
         this.#routeList.push(page);
-        let test = this.#routeList.filter(route => route.getTitle().includes(page.getTitle()));
+        const test = this.#routeList.filter((route) => route.getTitle().includes(page.getTitle()));
         if (test.length === 1) {
-            let button_route = document.createElement('route');
-            let icon_menu = document.createElement('route_icon');
-            icon_menu.innerHTML = page.getIcon();
-            let title_menu = document.createElement('route_title');
-            title_menu.innerHTML = page.getTitle();
+            const buttonRoute = document.createElement("route");
+            const iconMenu = document.createElement("route_icon");
+            iconMenu.innerHTML = page.getIcon();
+            const titleMenu = document.createElement("route_title");
+            titleMenu.innerHTML = page.getTitle();
             if (page.getMain()) {
                 this.go(page);
-                button_route.classList.add("route_active");
+                buttonRoute.classList.add("route_active");
             }
-            button_route.addEventListener('click', () => {
-                const eventAwesome = new CustomEvent("route_event_"+page.constructor.name, {
+            buttonRoute.addEventListener("click", () => {
+                const eventAwesome = new CustomEvent("route_event_" + page.constructor.name, {
                     bubbles: true,
                     detail: {
                         class: page.constructor.name,
                         title: page.getTitle(),
-                        page: page
+                        page: page,
                     },
                 });
-                document.dispatchEvent(eventAwesome)
+                document.dispatchEvent(eventAwesome);
 
-                if (!button_route.classList.contains('route_active')) {
-                    for (const act of this.#routes()) act.classList.remove('route_active');
+                if (!buttonRoute.classList.contains("route_active")) {
+                    for (const act of this.#routes()) act.classList.remove("route_active");
                     this.go(page);
-                    button_route.classList.add("route_active");
-                    if (this.#auto_close) {
+                    buttonRoute.classList.add("route_active");
+                    if (this.#autoClose) {
                         // Панель закрывается после перехода: состояние и значок меняет тот же код,
                         // что и по Escape — иначе у кнопки осталось бы открытое aria-expanded
                         if (this.#appMenu.style.transform === `translateX(${this.#appMenuSlide}px)`) this.#close();
@@ -544,19 +551,19 @@ class AppMenu {
                 }
             });
             if (page.getIcon() !== undefined) {
-                button_route.appendChild(icon_menu)
+                buttonRoute.appendChild(iconMenu);
             }
-            button_route.appendChild(title_menu)
-            this.#routeViews.appendChild(button_route)
+            buttonRoute.appendChild(titleMenu);
+            this.#routeViews.appendChild(buttonRoute);
             this.#routeKeyboard.refresh();
             // Новый пункт мог не пройти уже введённый фильтр — список и подсказка пересобираются
-            this.#filterRoutes(this.#app_menu_search_input.value);
+            this.#filterRoutes(this.#appMenuSearchInput.value);
         } else {
-            Log.error(I18n.t("appLayout.search.alreadyAdded", {title: page.getTitle()}))
+            Log.error(I18n.t("appLayout.search.alreadyAdded", { title: page.getTitle() }));
         }
     }
     setAutoClose() {
-        this.#auto_close = true;
+        this.#autoClose = true;
     }
     getMenu() {
         return this.#appMenu;
@@ -564,125 +571,128 @@ class AppMenu {
 }
 
 class NotificationBox {
-    #notification_box = document.createElement('notification_box');
-    #notification_box_main = document.createElement("notification_box_main");
+    #notificationBox = document.createElement("notification_box");
+    #notificationBoxMain = document.createElement("notification_box_main");
     // Шапка ящика: заголовок со счётчиком истории и действие «Очистить»
-    #notification_box_header = document.createElement("notification_box_header");
-    #notification_box_header_text = document.createElement("notification_box_header_text");
-    #notification_box_title = document.createElement("notification_box_title");
-    #notification_box_count = document.createElement("notification_box_count");
-    #notification_box_empty = document.createElement("notification_box_empty");
-    #empty_state = undefined;
-    #clear_button = document.createElement("button");
+    #notificationBoxHeader = document.createElement("notification_box_header");
+    #notificationBoxHeaderText = document.createElement("notification_box_header_text");
+    #notificationBoxTitle = document.createElement("notification_box_title");
+    #notificationBoxCount = document.createElement("notification_box_count");
+    #notificationBoxEmpty = document.createElement("notification_box_empty");
+    // Идёт каскад очистки: подписи дней и пустое состояние ждут его конца
+    #clearing = false;
+    #emptyState = undefined;
+    #clearButton = document.createElement("button");
     // Состав ящика меняет Notification — за списком следит observer
     #observer = undefined;
-    #notification_box_width = 400;
-    #notification_box_width_test = 425;
-    #notification_button = document.createElement('notification_button');
+    #notificationBoxWidth = 400;
+    #notificationBoxWidthTest = 425;
+    #notificationButton = document.createElement("notification_button");
     constructor(header, center, layout) {
-        layout.set(LAYOUT_ROLE.NOTIFICATION_BOX, this.#notification_box);
-        layout.set(LAYOUT_ROLE.NOTIFICATION_BOX_MAIN, this.#notification_box_main);
-        this.#notification_box_main.id = 'chui_notification_box';
+        layout.set(LAYOUT_ROLE.NOTIFICATION_BOX, this.#notificationBox);
+        layout.set(LAYOUT_ROLE.NOTIFICATION_BOX_MAIN, this.#notificationBoxMain);
+        this.#notificationBoxMain.id = "chui_notification_box";
         // Шапка: заголовок, счётчик записей и очистка списка
-        this.#notification_box_title.innerText = I18n.t("appLayout.notifications.title");
-        this.#notification_box_count.setAttribute("aria-hidden", "true");
-        this.#notification_box_header_text.appendChild(this.#notification_box_title)
-        this.#notification_box_header_text.appendChild(this.#notification_box_count)
+        this.#notificationBoxTitle.innerText = I18n.t("appLayout.notifications.title");
+        this.#notificationBoxCount.setAttribute("aria-hidden", "true");
+        this.#notificationBoxHeaderText.appendChild(this.#notificationBoxTitle);
+        this.#notificationBoxHeaderText.appendChild(this.#notificationBoxCount);
         // Очистка — обычная кнопка-действие, а не Button: в шапке нужна тихая ссылка-действие
-        this.#clear_button.className = "notification_box_clear";
-        this.#clear_button.type = "button";
-        this.#clear_button.setAttribute("aria-label", I18n.t("appLayout.notifications.clearAll"));
-        this.#clear_button.setAttribute("title", I18n.t("appLayout.notifications.clear"));
-        this.#clear_button.appendChild(new Icon(Icons.ACTIONS.DELETE, "14px").set());
-        const clear_title = document.createElement("span");
-        clear_title.innerText = I18n.t("appLayout.notifications.clear");
-        this.#clear_button.appendChild(clear_title)
-        this.#clear_button.addEventListener("click", () => this.#clearAll());
-        this.#notification_box_header.appendChild(this.#notification_box_header_text)
-        this.#notification_box_header.appendChild(this.#clear_button)
+        this.#clearButton.className = "notification_box_clear";
+        this.#clearButton.type = "button";
+        this.#clearButton.setAttribute("aria-label", I18n.t("appLayout.notifications.clearAll"));
+        this.#clearButton.setAttribute("title", I18n.t("appLayout.notifications.clear"));
+        this.#clearButton.appendChild(new Icon(Icons.ACTIONS.DELETE, "14px").set());
+        const clearTitle = document.createElement("span");
+        clearTitle.innerText = I18n.t("appLayout.notifications.clear");
+        this.#clearButton.appendChild(clearTitle);
+        this.#clearButton.addEventListener("click", () => this.#clearAll());
+        this.#notificationBoxHeader.appendChild(this.#notificationBoxHeaderText);
+        this.#notificationBoxHeader.appendChild(this.#clearButton);
         // Пустое состояние — общий компонент, а не своя разметка из значка и подписи: это был
         // третий вариант одного и того же блока (здесь, в поиске меню, в таблицах). Заодно он
         // объявляется скринридеру (role="status"), а прежняя заглушка молчала
-        this.#empty_state = new EmptyState({
+        this.#emptyState = new EmptyState({
             icon: Icons.SOCIAL.NOTIFICATIONS_OFF,
             title: I18n.t("appLayout.notifications.empty"),
-            compact: true
+            compact: true,
         });
-        this.#notification_box_empty.appendChild(this.#empty_state.set())
-        this.#notification_box_main.appendChild(this.#notification_box_empty)
-        this.#notification_box.appendChild(this.#notification_box_header)
-        this.#notification_box.appendChild(this.#notification_box_main)
+        this.#notificationBoxEmpty.appendChild(this.#emptyState.set());
+        this.#notificationBoxMain.appendChild(this.#notificationBoxEmpty);
+        this.#notificationBox.appendChild(this.#notificationBoxHeader);
+        this.#notificationBox.appendChild(this.#notificationBoxMain);
         // Карточки кладёт снаружи Notification, поэтому счётчик, группы и пустое состояние
         // следим по списку. Разделители дней ящик вставляет сам: на них реакция не нужна,
         // иначе пересборка дёргала бы сама себя без конца
         this.#observer = new MutationObserver((records) => this.#onBoxMutated(records));
-        this.#observer.observe(this.#notification_box_main, { childList: true });
+        this.#observer.observe(this.#notificationBoxMain, { childList: true });
         this.#syncState();
-        this.#notification_box.style.width = `${this.#notification_box_width}px`;
-        this.#notification_box.style.right = `calc(-${this.#notification_box_width_test}px)`;
-        this.#notification_button.addEventListener("click", () => {
-            if (this.#notification_button.classList.contains("notification_button_active")) this.#closePanel();
+        this.#notificationBox.style.width = `${this.#notificationBoxWidth}px`;
+        this.#notificationBox.style.right = `calc(-${this.#notificationBoxWidthTest}px)`;
+        this.#notificationButton.addEventListener("click", () => {
+            if (this.#notificationButton.classList.contains("notification_button_active")) this.#closePanel();
             else this.#openPanel();
-        })
+        });
         // Значок — украшение: без подписи имя кнопки складывалось из лигатуры («notifications»)
-        const notification_glyph = new Icon(Icons.SOCIAL.NOTIFICATIONS, "var(--header_icon_size)").set();
-        notification_glyph.setAttribute("aria-hidden", "true");
-        this.#notification_button.appendChild(notification_glyph);
+        const notificationGlyph = new Icon(Icons.SOCIAL.NOTIFICATIONS, "var(--header_icon_size)").set();
+        notificationGlyph.setAttribute("aria-hidden", "true");
+        this.#notificationButton.appendChild(notificationGlyph);
         // Имя кнопки — в том числе «непрочитанных: N» — держит #syncUnread: одно место
         // Клавиатура и aria панели уведомлений
-        makeKeyboardButton(this.#notification_button);
-        this.#notification_button.setAttribute("aria-haspopup", "true");
-        this.#notification_button.setAttribute("aria-expanded", "false");
-        this.#notification_button.setAttribute("aria-controls", "chui_notification_box");
-        this.#notification_box.setAttribute("role", "region");
-        this.#notification_box.setAttribute("aria-label", I18n.t("appLayout.notifications.title"));
-        this.#notification_box.addEventListener("keydown", (event) => {
+        makeKeyboardButton(this.#notificationButton);
+        this.#notificationButton.setAttribute("aria-haspopup", "true");
+        this.#notificationButton.setAttribute("aria-expanded", "false");
+        this.#notificationButton.setAttribute("aria-controls", "chui_notification_box");
+        this.#notificationBox.setAttribute("role", "region");
+        this.#notificationBox.setAttribute("aria-label", I18n.t("appLayout.notifications.title"));
+        this.#notificationBox.addEventListener("keydown", (event) => {
             if (event.key !== "Escape") return;
             event.preventDefault();
             this.#closePanel();
-            this.#notification_button.focus();
+            this.#notificationButton.focus();
         });
         // Панель открывается с кнопки, и фокус остаётся на ней же — Escape обязан закрывать
         // ящик и оттуда, иначе выйти с клавиатуры можно было только Tab'ом внутрь панели
-        this.#notification_button.addEventListener("keydown", (event) => {
+        this.#notificationButton.addEventListener("keydown", (event) => {
             if (event.key !== "Escape") return;
             event.preventDefault();
             this.#closePanel();
         });
-        header.set().addEventListener('click', (e) => {
-            if (e.target !== this.#notification_button) this.#closePanel();
-        })
-        center.addEventListener('click', (e) => {
-            if (!this.#notification_box.contains(e.target)) {
-                if (this.#notification_box.style.transform === `translateX(-${this.#notification_box_width_test}px)`) this.#closePanel();
+        header.set().addEventListener("click", (e) => {
+            if (e.target !== this.#notificationButton) this.#closePanel();
+        });
+        center.addEventListener("click", (e) => {
+            if (!this.#notificationBox.contains(e.target)) {
+                if (this.#notificationBox.style.transform === `translateX(-${this.#notificationBoxWidthTest}px)`)
+                    this.#closePanel();
             }
-        })
+        });
         center.onscroll = () => {
             // Прокрутка меняет материал шапки: плотнее фон и тень. Класс, а не инлайновые стили:
             // вид полосы целиком описан в global_style.css
             header.set().classList.toggle("header_scrolled", center.scrollTop > 15);
         };
-        header.addToRight(this.#notification_button)
+        header.addToRight(this.#notificationButton);
     }
     #openPanel() {
-        this.#notification_box.style.transform = `translateX(-${this.#notification_box_width_test}px)`;
-        this.#notification_button.classList.add("notification_button_active");
-        this.#notification_button.setAttribute("aria-expanded", "true");
+        this.#notificationBox.style.transform = `translateX(-${this.#notificationBoxWidthTest}px)`;
+        this.#notificationButton.classList.add("notification_button_active");
+        this.#notificationButton.setAttribute("aria-expanded", "true");
         // Открытый ящик — значит прочитанный: отметки снимаются все сразу, а не по одной
         this.#markRead();
     }
     #closePanel() {
-        this.#notification_box.style.transform = `translateX(${this.#notification_box_width}px)`;
-        this.#notification_button.classList.remove("notification_button_active");
-        this.#notification_button.setAttribute("aria-expanded", "false");
+        this.#notificationBox.style.transform = `translateX(${this.#notificationBoxWidth}px)`;
+        this.#notificationButton.classList.remove("notification_button_active");
+        this.#notificationButton.setAttribute("aria-expanded", "false");
     }
     // Записи истории: карточки в ящик кладёт Notification, поэтому состав читаем из DOM
     #notifications() {
-        return [...this.#notification_box_main.children].filter((child) => child.tagName === "NOTIFICATION");
+        return [...this.#notificationBoxMain.children].filter((child) => child.tagName === "NOTIFICATION");
     }
     // Разделители дней — тоже прямые дети списка, но записями не являются
     #groups() {
-        return [...this.#notification_box_main.children].filter((child) => child.tagName === "NOTIFICATION_GROUP");
+        return [...this.#notificationBoxMain.children].filter((child) => child.tagName === "NOTIFICATION_GROUP");
     }
     /*
      * Реакция на изменение состава ящика.
@@ -693,17 +703,19 @@ class NotificationBox {
      */
     #onBoxMutated(records = []) {
         const changed = records.some((record) =>
-            [...record.addedNodes, ...record.removedNodes].some((node) => node.tagName === "NOTIFICATION"));
+            [...record.addedNodes, ...record.removedNodes].some((node) => node.tagName === "NOTIFICATION")
+        );
         if (changed) this.#syncState();
     }
     // Счётчик, пустое состояние, группы дней и доступность кнопки согласованы с составом ящика
     #syncState() {
         const notifications = this.#notifications();
         const count = notifications.length;
-        this.#notification_box_count.innerText = String(count);
-        this.#notification_box_count.style.display = count === 0 ? "none" : "flex";
-        this.#clear_button.disabled = count === 0;
-        this.#notification_box_empty.classList.toggle("notification_box_empty_visible", count === 0);
+        this.#notificationBoxCount.innerText = String(count);
+        this.#notificationBoxCount.style.display = count === 0 ? "none" : "flex";
+        // Пока идёт каскад, чистить нечего: кнопка ждёт его конца
+        this.#clearButton.disabled = count === 0 || this.#clearing;
+        this.#notificationBoxEmpty.classList.toggle("notification_box_empty_visible", count === 0);
         this.#group(notifications);
         this.#syncUnread(notifications);
     }
@@ -716,12 +728,15 @@ class NotificationBox {
      * по тегу (счётчик, очистка), работает без изменений.
      */
     #group(notifications = []) {
+        // Идёт каскад уборки: подписи уже гаснут своим кадром, а пересборка заменила бы их
+        // новыми и вернула бы рывок, который каскад и убирает
+        if (this.#clearing) return;
         for (const separator of this.#groups()) separator.remove();
         let day = undefined;
         for (const notification of notifications) {
             if (notification.dataset.day === day) continue;
             day = notification.dataset.day;
-            this.#notification_box_main.insertBefore(this.#makeGroup(day), notification);
+            this.#notificationBoxMain.insertBefore(this.#makeGroup(day), notification);
         }
     }
     /** Подпись дня: сегодня и вчера — словами, раньше — датой */
@@ -729,8 +744,9 @@ class NotificationBox {
         const yesterday = new Date();
         yesterday.setDate(yesterday.getDate() - 1);
         const group = document.createElement("notification_group");
-        if (day === chui_functions.getDayKey()) group.innerText = I18n.t("appLayout.notifications.today");
-        else if (day === chui_functions.getDayKey(yesterday)) group.innerText = I18n.t("appLayout.notifications.yesterday");
+        if (day === chuiFunctions.getDayKey()) group.innerText = I18n.t("appLayout.notifications.today");
+        else if (day === chuiFunctions.getDayKey(yesterday))
+            group.innerText = I18n.t("appLayout.notifications.yesterday");
         else {
             // Ключ хранится как ГГГГ-ММ-ДД, а в подписи порядок привычный: ДД.ММ.ГГГГ
             const [year, month, date] = String(day).split("-");
@@ -747,26 +763,79 @@ class NotificationBox {
      */
     #syncUnread(notifications = []) {
         const unread = notifications.filter((notification) => notification.dataset.unread === "true").length;
-        this.#notification_button.classList.toggle("notification_button_unread", unread > 0);
-        const label = unread === 0
-            ? I18n.t("appLayout.notifications.title")
-            : I18n.t("appLayout.notifications.unreadCount", {count: unread});
-        this.#notification_button.setAttribute("aria-label", label);
-        this.#notification_button.setAttribute("title", label);
+        this.#notificationButton.classList.toggle("notification_button_unread", unread > 0);
+        const label =
+            unread === 0
+                ? I18n.t("appLayout.notifications.title")
+                : I18n.t("appLayout.notifications.unreadCount", { count: unread });
+        this.#notificationButton.setAttribute("aria-label", label);
+        this.#notificationButton.setAttribute("title", label);
     }
     #markRead() {
         for (const notification of this.#notifications()) notification.dataset.unread = "false";
         this.#syncUnread(this.#notifications());
     }
+    /*
+     * Очистка истории.
+     *
+     * Карточки уходят каскадом: номер в очереди задаёт `--notification_clear_index`, а шаг —
+     * доля токена движения, поэтому весь список читается как рассыпающийся, а не как
+     * выключенный одним щелчком. Подписи дней гаснут вместе с ним, пустое состояние
+     * и счётчик появляются после последнего кадра.
+     *
+     * Конец каскада считает срок из тех же токенов движения, а не ждёт `animationend`:
+     * у карточки, которую браузер не отрисовывает (скрытая панель, `display: none`), кадр
+     * вообще не проигрывается, и событие не придёт — уборка осталась бы висеть
+     * незавершённой вместе с погашенными подписями.
+     */
     #clearAll() {
-        for (const notification of this.#notifications()) {
-            notification.style.transform = "translateX(100%)"
-            notification.style.opacity = "0"
-            setTimeout(() => notification.remove(), 300)
+        // Повторное нажатие на ходу нача́ло бы второй каскад и перезапустило кадры
+        if (this.#clearing) return;
+        const notifications = this.#notifications();
+        if (notifications.length === 0) return;
+        // Уменьшенное движение: история очищается сразу — каскад только задерживал бы
+        if (reducedMotion()) {
+            for (const notification of notifications) notification.remove();
+            this.#syncState();
+            return;
         }
+        this.#clearing = true;
+        this.#clearButton.disabled = true;
+        notifications.forEach((notification, index) => {
+            // Следы кадра прихода снимаем: инлайновое имя кадра сильнее класса, а вид движения
+            // спорит с ним по весу — без этого запись, только что вставшая в ящик, проиграла бы
+            // не кадр уборки, а свой въезд
+            notification.style.removeProperty("animation-name");
+            notification.removeAttribute("data-motion");
+            notification.style.setProperty("--notification_clear_index", String(index));
+            notification.classList.add("notification_clearing");
+        });
+        // Подписи дней гаснут вместе с карточками, а убираются только по концу каскада:
+        // иначе строка пропала бы из-под ещё уезжающих карточек
+        for (const group of this.#groups()) group.classList.add("notification_group_leaving");
+        const step = tokenTime("--motion_fast") / 4;
+        const frame = tokenTime("--motion_fast");
+        // Запас — ещё один шаг: кадр задерживается ещё и на запуск
+        const deadline = frame + step * notifications.length;
+        setTimeout(() => this.#finishClearing(notifications), deadline);
+    }
+    /*
+     * Конец каскада: убираем только те карточки, которые и были в очереди (за время уборки
+     * могла прийти новая — её очистка не касается), затем согласуем подписи, счётчик и подсказку
+     * по настоящему составу ящика.
+     */
+    #finishClearing(notifications = []) {
+        this.#clearing = false;
+        for (const notification of notifications) {
+            notification.classList.remove("notification_clearing");
+            notification.style.removeProperty("--notification_clear_index");
+            notification.remove();
+        }
+        for (const group of this.#groups()) group.remove();
+        this.#syncState();
     }
     getBox() {
-        return this.#notification_box;
+        return this.#notificationBox;
     }
 }
 
@@ -776,7 +845,7 @@ class AppLayout {
     #center = new Center(this.#layout).set();
     #appMenu = new AppMenu(this.#header, this.#center, this.#layout);
     #notificationBox = new NotificationBox(this.#header, this.#center, this.#layout);
-    #notificationPanel = document.createElement('notification_panel');
+    #notificationPanel = document.createElement("notification_panel");
     // Текущие уведомления: ipc-обработчики регистрируются один раз и работают с последним
     #downloadNotification = undefined;
     #updateNotificationLoad = undefined;
@@ -785,18 +854,22 @@ class AppLayout {
     // Слушатели живут весь процесс — обработчик ошибок обязан быть на месте всегда.
     #onWindowError = (event) => {
         const place = event.filename === undefined ? "" : ` (${event.filename}:${event.lineno})`;
-        this.#logError(I18n.t("appLayout.error.uncaught"), event.error === undefined ? event.message : event.error, place)
-    }
+        this.#logError(
+            I18n.t("appLayout.error.uncaught"),
+            event.error === undefined ? event.message : event.error,
+            place
+        );
+    };
     #onUnhandledRejection = (event) => {
-        this.#logError(I18n.t("appLayout.error.unhandledRejection"), event.reason)
-    }
+        this.#logError(I18n.t("appLayout.error.unhandledRejection"), event.reason);
+    };
     #logError(prefix, value, place = "") {
         const text = `${prefix}: ${AppLayout.#formatError(value)}${place}`;
         try {
-            Log.error(text)
+            Log.error(text);
         } catch (e) {
             // Сам обработчик ошибок падать не должен (например, ipcRenderer уже недоступен при закрытии окна)
-            console.error(text, e)
+            console.error(text, e);
         }
     }
     static #formatError(value) {
@@ -805,24 +878,24 @@ class AppLayout {
         return String(value);
     }
     constructor() {
-        require('../../modules/chui_fonts').install();
+        require("../../modules/chui_fonts").install();
         // Глобальные стили
-        chui_functions.setStyles(__dirname + `/global_style.css`, 'chUiJS_Global_App')
-        chui_functions.setStyles(__dirname + `/main_theme_style.css`, 'chUiJS_Main_Theme')
+        chuiFunctions.setStyles(__dirname + `/global_style.css`, "chUiJS_Global_App");
+        chuiFunctions.setStyles(__dirname + `/main_theme_style.css`, "chUiJS_Main_Theme");
         // Необработанные ошибки и reject’ы renderer-процесса — один раз на процесс
-        if (app_error_handlers_installed === false) {
-            app_error_handlers_installed = true;
+        if (appErrorHandlersInstalled === false) {
+            appErrorHandlersInstalled = true;
             window.addEventListener("error", this.#onWindowError);
             window.addEventListener("unhandledrejection", this.#onUnhandledRejection);
         }
         //if (process.platform !== "darwin") document.body.style.border = "1px solid var(--border_color)";
         // ===
 
-        document.body.appendChild(this.#header.set())
-        document.body.appendChild(this.#center)
-        document.body.appendChild(this.#appMenu.getMenu())
-        document.body.appendChild(this.#notificationBox.getBox())
-        document.body.appendChild(this.#notificationPanel)
+        document.body.appendChild(this.#header.set());
+        document.body.appendChild(this.#center);
+        document.body.appendChild(this.#appMenu.getMenu());
+        document.body.appendChild(this.#notificationBox.getBox());
+        document.body.appendChild(this.#notificationPanel);
         // Части layout'а зарегистрированы: уведомления и Route ищут свои узлы по ролям, а не по id
         this.#layout.set(LAYOUT_ROLE.NOTIFICATION_PANEL, this.#notificationPanel);
         registerLayout(this.#layout);
@@ -837,41 +910,43 @@ class AppLayout {
         ipcRenderer.on("sendNotificationDownload", (e, text, body) => {
             this.#downloadNotification = new DownloadNotification({ title: text, text: body });
             this.#downloadNotification.show();
-        })
+        });
         ipcRenderer.on("sendNotificationDownloadUpdate", (e, title, text) => {
             if (this.#downloadNotification !== undefined) this.#downloadNotification.update(title, text);
-        })
+        });
         ipcRenderer.on("sendNotificationDownloadComplete", () => {
             if (this.#downloadNotification !== undefined) this.#downloadNotification.done();
-        })
+        });
         ipcRenderer.on("sendNotificationDownloadError", () => {
             if (this.#downloadNotification !== undefined) this.#downloadNotification.error();
-        })
+        });
         //
         ipcRenderer.on("sendNotificationUpdateLoad", (e, text, body) => {
             this.#updateNotificationLoad = new UpdateNotification({ title: text, text: body, spinner: true });
             this.#updateNotificationLoad.show(true);
-        })
+        });
         ipcRenderer.on("sendNotificationUpdateLoadClose", () => {
             if (this.#updateNotificationLoad !== undefined) this.#updateNotificationLoad.hide();
-        })
+        });
         ipcRenderer.on("sendNotificationUpdate", (e, text, body) => {
             this.#updateNotification = new UpdateNotification({ title: text, text: body, spinner: false });
             this.#updateNotification.show(true);
-        })
+        });
         ipcRenderer.on("sendNotificationUpdateClose", () => {
             if (this.#updateNotification !== undefined) this.#updateNotification.hide();
-        })
-        let popup = new Popup();
+        });
+        const popup = new Popup();
         ipcRenderer.once("checkUpdatesTrue", async (e, check, version) => {
             if (check) {
-                let confirm_res = await popup.confirm({
-                    title: I18n.t("appLayout.update.available", {version: version}), message: I18n.t("appLayout.update.question"),
-                    cancelText: I18n.t("appLayout.update.cancel"), okText: I18n.t("appLayout.update.install")
+                const confirmRes = await popup.confirm({
+                    title: I18n.t("appLayout.update.available", { version: version }),
+                    message: I18n.t("appLayout.update.question"),
+                    cancelText: I18n.t("appLayout.update.cancel"),
+                    okText: I18n.t("appLayout.update.install"),
                 });
-                e.sender.send("updateInstallConfirm", confirm_res)
+                e.sender.send("updateInstallConfirm", confirmRes);
             }
-        })
+        });
     }
     setWindowControlsLeft() {
         this.#header.addWC(true);
@@ -898,83 +973,103 @@ class AppLayout {
         this.#header.addToLeftBeforeTitle(...headerLeft);
     }
     disableAppMenu() {
-        this.#layout.get(LAYOUT_ROLE.APP_MENU_BUTTON).remove()
+        this.#layout.get(LAYOUT_ROLE.APP_MENU_BUTTON).remove();
         // Отступ имени страницы считает CSS: `.page_name_no_menu` в global_style.css
-        this.#layout.get(LAYOUT_ROLE.PAGE_NAME).classList.add("page_name_no_menu")
+        this.#layout.get(LAYOUT_ROLE.PAGE_NAME).classList.add("page_name_no_menu");
     }
     setScript(pathToJS = String(), id = String()) {
-        let data = fs.readFileSync(pathToJS, 'utf8');
-        let script = document.createElement('script');
+        const data = fs.readFileSync(pathToJS, "utf8");
+        const script = document.createElement("script");
         script.innerHTML = String(data);
-        script.setAttribute('id', id);
+        script.setAttribute("id", id);
         // Скрипт подключается в сам документ (не узел компонента), поэтому проверка по id и document
         if (document.querySelector(`script[id="${id}"]`) === null) document.body.appendChild(script);
     }
-    static TABS(options = {
-        width: String(),
-        default: Number(),
-        tabs: []
-    }) { return new HeaderTabs(options).set(); }
-    static BUTTON(options = {
-        title: String(),
-        icon: undefined,
-        reverse: Boolean(),
-        clickEvent: () => {}
-    }) { return new HeaderButton(options).set(); }
-    static USER_PROFILE(options = {
-        username: String(),
-        image: { noImage: Boolean(), imageLink: String(), imageBase64: String(), path: String() },
-        items: []
-    }) { return new UserProfile(options).set(); }
-    static USER_PROFILE_ITEM(options = {
-        title: String(),
-        icon: undefined,
-        clickEvent: () => {}
-    }) { return new UserDDItem(options).set(); }
-    static DIALOG(options = {
-        title: String(),
-        icon: undefined,
-        reverse: Boolean(),
-        label: String(),
-        dialogOptions: {
+    static TABS(
+        options = {
+            width: String(),
+            default: Number(),
+            tabs: [],
+        }
+    ) {
+        return new HeaderTabs(options).set();
+    }
+    static BUTTON(
+        options = {
+            title: String(),
+            icon: undefined,
+            reverse: Boolean(),
+            clickEvent: () => {},
+        }
+    ) {
+        return new HeaderButton(options).set();
+    }
+    static USER_PROFILE(
+        options = {
+            username: String(),
+            image: { noImage: Boolean(), imageLink: String(), imageBase64: String(), path: String() },
+            items: [],
+        }
+    ) {
+        return new UserProfile(options).set();
+    }
+    static USER_PROFILE_ITEM(
+        options = {
+            title: String(),
+            icon: undefined,
+            clickEvent: () => {},
+        }
+    ) {
+        return new UserDDItem(options).set();
+    }
+    static DIALOG(
+        options = {
             title: String(),
-            closeOutSideClick: Boolean(),
-            style: {
-                width: String(),
-                height: String(),
-                direction: String(),
-                wrap: String(),
-                align: String(),
-                justify: String(),
+            icon: undefined,
+            reverse: Boolean(),
+            label: String(),
+            dialogOptions: {
+                title: String(),
+                closeOutSideClick: Boolean(),
+                style: {
+                    width: String(),
+                    height: String(),
+                    direction: String(),
+                    wrap: String(),
+                    align: String(),
+                    justify: String(),
+                },
+                components: [],
             },
-            components: []
         }
-    }) { return new HeaderDialog(options).set(); }
+    ) {
+        return new HeaderDialog(options).set();
+    }
 }
 
 class HeaderTabs {
-    #id_list = require("randomstring").generate();
-    #header_tabs_list = undefined;
-    #header_tabs = document.createElement('header_tabs');
-    #keydown_event = (event) => this.#onKeydown(event);
+    #idList = require("randomstring").generate();
+    #headerTabsList = undefined;
+    #headerTabs = document.createElement("header_tabs");
+    #keydownEvent = (event) => this.#onKeydown(event);
     constructor(options = { width: String(), default: Number(), tabs: [] }) {
-        this.#header_tabs_list = options.tabs;
-        this.#header_tabs.id = this.#id_list;
+        this.#headerTabsList = options.tabs;
+        this.#headerTabs.id = this.#idList;
         // Полоса вкладок — не меню: у неё свои роли (`tablist`/`tab`) и свои клавиши (см. #onKeydown).
         // `role="button"` и `tabindex="0"` каждой вкладке уже поставил makeKeyboardButton, поэтому
         // роли и порядок обхода переопределяем здесь: остановка Tab в полосе должна быть ровно одна
-        this.#header_tabs.setAttribute("role", "tablist");
-        for (let item of this.#header_tabs_list) {
+        this.#headerTabs.setAttribute("role", "tablist");
+        for (const item of this.#headerTabsList) {
             item.setAttribute("role", "tab");
             item.setAttribute("tabindex", "-1");
-            this.#header_tabs.appendChild(item);
-            item.addEventListener('click', (event) => {
+            this.#headerTabs.appendChild(item);
+            item.addEventListener("click", (event) => {
                 if (event.target.tagName === "HEADER_BUTTON_ICON" || event.target.tagName === "HEADER_BUTTON_TITLE") {
-                    this.#setActive(event.target.parentNode)
+                    this.#setActive(event.target.parentNode);
                 } else {
-                    this.#setActive(event.target)
+                    this.#setActive(event.target);
                 }
-            })
+            });
         }
         // Клик по выбранной вкладке не переигрывает её действие — как у пункта меню текущего
         // раздела (`route_active`, который тоже не переходит повторно). Раньше клик до вкладки
@@ -982,40 +1077,44 @@ class HeaderTabs {
         // кликом он снимал у неё и курсор-указатель, и ховер, которых у соседних кнопок шапки
         // нет. Слушатель ловит клик в фазе перехвата: действие вкладки и `#setActive` висят
         // на самом элементе и иначе сработали бы первыми
-        this.#header_tabs.addEventListener("click", (event) => {
-            const tab = event.target.closest === undefined ? null : event.target.closest("header_button");
-            if (tab === null || tab.getAttribute("active") === null) return;
-            event.stopImmediatePropagation();
-        }, true);
+        this.#headerTabs.addEventListener(
+            "click",
+            (event) => {
+                const tab = event.target.closest === undefined ? null : event.target.closest("header_button");
+                if (tab === null || tab.getAttribute("active") === null) return;
+                event.stopImmediatePropagation();
+            },
+            true
+        );
         // Пока ни одна вкладка не выбрана, остановкой обхода становится первая по счёту:
         // иначе в полосу нельзя было бы войти с клавиатуры вообще
-        const default_tab = this.#header_tabs_list[options.default === undefined ? 0 : options.default];
-        if (default_tab !== undefined) default_tab.setAttribute("tabindex", "0");
-        this.#header_tabs.addEventListener("keydown", this.#keydown_event);
-        if (options.width !== undefined) this.#header_tabs.style.width = options.width;
-        for (let item of this.#header_tabs_list) {
-            if (this.#header_tabs_list.indexOf(item) === options.default) {
+        const defaultTab = this.#headerTabsList[options.default === undefined ? 0 : options.default];
+        if (defaultTab !== undefined) defaultTab.setAttribute("tabindex", "0");
+        this.#headerTabs.addEventListener("keydown", this.#keydownEvent);
+        if (options.width !== undefined) this.#headerTabs.style.width = options.width;
+        for (const item of this.#headerTabsList) {
+            if (this.#headerTabsList.indexOf(item) === options.default) {
                 setTimeout(() => {
-                    item.click()
+                    item.click();
                     //this.#setActive(item)
-                }, 250)
+                }, 250);
             }
         }
     }
     set() {
-        return this.#header_tabs;
+        return this.#headerTabs;
     }
     #setActive(target) {
         if (target.getAttribute("active") === null) {
             // `children`, а не `childNodes`: в `childNodes` попадают и текстовые узлы, у которых нет classList.
             // `children` — HTMLCollection, поэтому перебираем копию
-            [...this.#header_tabs.children].forEach(child => {
+            [...this.#headerTabs.children].forEach((child) => {
                 child.removeAttribute("active");
                 child.removeAttribute("aria-current");
                 child.removeAttribute("aria-selected");
                 child.setAttribute("tabindex", "-1");
-                child.classList.remove("header_tab_active")
-            })
+                child.classList.remove("header_tab_active");
+            });
             target.setAttribute("active", true);
             // Вкладка без `active` была только подсвечена классом: скринридер о выборе не знал (как у пункта меню маршрутов)
             target.setAttribute("aria-current", "page");
@@ -1023,7 +1122,7 @@ class HeaderTabs {
             target.setAttribute("aria-selected", "true");
             // Выбранная вкладка — единственная остановка Tab в полосе вкладок
             target.setAttribute("tabindex", "0");
-            target.classList.add("header_tab_active")
+            target.classList.add("header_tab_active");
         }
     }
     /*
@@ -1036,11 +1135,11 @@ class HeaderTabs {
      * `makeKeyboardButton` (клик по выбранной вкладке гасит перехватчик выше).
      */
     #onKeydown(event) {
-        const tabs = [...this.#header_tabs.children];
+        const tabs = [...this.#headerTabs.children];
         if (tabs.length === 0) return;
         const focused = tabs.indexOf(document.activeElement);
         // Фокус мог быть не в полосе: тогда считаем от вкладки с остановкой обхода
-        const from = focused === -1 ? tabs.findIndex(tab => tab.getAttribute("tabindex") === "0") : focused;
+        const from = focused === -1 ? tabs.findIndex((tab) => tab.getAttribute("tabindex") === "0") : focused;
         const start = from === -1 ? 0 : from;
         const last = tabs.length - 1;
         let next;
@@ -1059,12 +1158,12 @@ class UserProfile {
     // находится по узлу обёртки — так же, как у MenuBar, и по нему его снимает тот,
     // кто убирает профиль из шапки (`Header.removeToRight`)
     static #instances = new WeakMap();
-    #user_main = document.createElement("user_main");
-    #user_button = document.createElement("user_button");
-    #user_dropdown = document.createElement("user_dropdown");
-    #is_open = false;
+    #userMain = document.createElement("user_main");
+    #userButton = document.createElement("user_button");
+    #userDropdown = document.createElement("user_dropdown");
+    #isOpen = false;
     //
-    #user_dd_image_main = document.createElement("user_dd_image_main");
+    #userDdImageMain = document.createElement("user_dd_image_main");
     // Аватар — компонент Avatar: инициалы, картинка из адреса/base64/файла
     #avatar = undefined;
     #username = undefined;
@@ -1072,35 +1171,37 @@ class UserProfile {
     // Слушатель window нужен только пока меню открыто: иначе он копился на каждый профиль.
     // Закрывает меню только по клику СНАРУЖИ: раньше сравнивался прямой родитель цели,
     // поэтому клик по аватару или пустому месту внутри меню тоже его закрывал
-    #window_click_event = (event) => {
-        if (this.#user_main.contains(event.target) || this.#user_dropdown.contains(event.target)) return;
+    #windowClickEvent = (event) => {
+        if (this.#userMain.contains(event.target) || this.#userDropdown.contains(event.target)) return;
         this.#closeMenu();
-    }
+    };
     // Выбор пункта закрывает меню. Обработчик на списке, а не на каждом пункте: пункты
     // приходят из UserDDItem и могут быть добавлены кем угодно снаружи
-    #dropdown_click_event = (event) => {
+    #dropdownClickEvent = (event) => {
         const item = event.target.closest === undefined ? null : event.target.closest("user_item");
-        if (item === null || !this.#user_dropdown.contains(item)) return;
+        if (item === null || !this.#userDropdown.contains(item)) return;
         this.#closeMenu();
-    }
+    };
     //
-    constructor(options = {
-        username: String(),
-        image: { noImage: Boolean(), imageLink: String(), imageBase64: String(), path: String() },
-        items: []
-    }) {
+    constructor(
+        options = {
+            username: String(),
+            image: { noImage: Boolean(), imageLink: String(), imageBase64: String(), path: String() },
+            items: [],
+        }
+    ) {
         this.#username = options.username;
-        this.#user_button.innerText = options.username;
-        this.#user_main.appendChild(this.#user_button)
-        UserProfile.#instances.set(this.#user_main, this);
+        this.#userButton.innerText = options.username;
+        this.#userMain.appendChild(this.#userButton);
+        UserProfile.#instances.set(this.#userMain, this);
         // Панель — слой в body: внутри шапки (у неё свой backdrop-filter) её blur не работал бы,
         // а выдвижные слои оболочки перекрывали бы её. Идентификатор нужен для aria-controls
-        this.#user_dropdown.id = require("randomstring").generate();
-        document.body.appendChild(this.#user_dropdown);
-        this.#user_button.addEventListener("click", () => {
-            if (this.#is_open) this.#closeMenu();
+        this.#userDropdown.id = require("randomstring").generate();
+        document.body.appendChild(this.#userDropdown);
+        this.#userButton.addEventListener("click", () => {
+            if (this.#isOpen) this.#closeMenu();
             else this.#openMenu();
-        })
+        });
         //
         if (options.image !== undefined) {
             // Имя пользователя уже есть в кнопке и в пунктах меню, поэтому аватар — украшение
@@ -1108,24 +1209,24 @@ class UserProfile {
                 name: options.username,
                 image: options.image,
                 size: "80px",
-                decorative: true
+                decorative: true,
             });
-            this.#user_dd_image_main.appendChild(this.#avatar.set());
-            this.#user_dropdown.appendChild(this.#user_dd_image_main);
+            this.#userDdImageMain.appendChild(this.#avatar.set());
+            this.#userDropdown.appendChild(this.#userDdImageMain);
         }
         //
-        for (let item of options.items) this.#user_dropdown.appendChild(item);
-        this.#user_dropdown.addEventListener("click", this.#dropdown_click_event);
+        for (const item of options.items) this.#userDropdown.appendChild(item);
+        this.#userDropdown.addEventListener("click", this.#dropdownClickEvent);
         // Клавиатура и aria меню профиля: стрелки по пунктам, Escape закрывает и возвращает фокус
-        this.#menuKeyboard = new MenuKeyboard(this.#user_dropdown, {
+        this.#menuKeyboard = new MenuKeyboard(this.#userDropdown, {
             itemSelector: "user_item",
             onEscape: () => this.#closeMenu(),
-            trigger: this.#user_button
+            trigger: this.#userButton,
         });
-        makeKeyboardButton(this.#user_button);
+        makeKeyboardButton(this.#userButton);
         // Закрытое меню объявляется закрытым сразу: иначе у кнопки не было бы aria-expanded
         this.#menuKeyboard.setExpanded(false);
-        this.#user_button.addEventListener("keydown", (event) => {
+        this.#userButton.addEventListener("keydown", (event) => {
             if (event.key === "ArrowDown" || event.key === "ArrowUp") {
                 event.preventDefault();
                 this.#openMenu();
@@ -1134,40 +1235,40 @@ class UserProfile {
         });
     }
     #openMenu() {
-        this.#is_open = true;
+        this.#isOpen = true;
         // Панель живёт в body: если её снимал `unmount`, возвращаем на место
-        if (document.body.contains(this.#user_dropdown) === false) document.body.appendChild(this.#user_dropdown);
-        this.#user_button.classList.add(USER_PROFILE_ACTIVE_CLASS);
+        if (document.body.contains(this.#userDropdown) === false) document.body.appendChild(this.#userDropdown);
+        this.#userButton.classList.add(USER_PROFILE_ACTIVE_CLASS);
         // fadeIn показывает панель (display: flex), и только после этого её можно измерить
-        new Animation(this.#user_dropdown).fadeIn();
+        new Animation(this.#userDropdown).fadeIn();
         this.#positionDropdown();
-        window.addEventListener("click", this.#window_click_event);
-        window.addEventListener("resize", this.#position_dropdown_event);
+        window.addEventListener("click", this.#windowClickEvent);
+        window.addEventListener("resize", this.#positionDropdownEvent);
         this.#menuKeyboard.setExpanded(true);
     }
     #closeMenu() {
-        if (!this.#is_open) return;
-        this.#is_open = false;
-        this.#user_button.classList.remove(USER_PROFILE_ACTIVE_CLASS);
-        new Animation(this.#user_dropdown).fadeOut();
-        window.removeEventListener("click", this.#window_click_event);
-        window.removeEventListener("resize", this.#position_dropdown_event);
+        if (!this.#isOpen) return;
+        this.#isOpen = false;
+        this.#userButton.classList.remove(USER_PROFILE_ACTIVE_CLASS);
+        new Animation(this.#userDropdown).fadeOut();
+        window.removeEventListener("click", this.#windowClickEvent);
+        window.removeEventListener("resize", this.#positionDropdownEvent);
         this.#menuKeyboard.setExpanded(false);
     }
     // position: fixed — координаты считаются от окна, поэтому панель пересчитывается и на resize.
     // Логический `inset-inline-end` держит выравнивание по кнопке и в RTL
     #positionDropdown() {
-        const button = this.#user_button.getBoundingClientRect();
-        const dropdown = this.#user_dropdown.getBoundingClientRect();
+        const button = this.#userButton.getBoundingClientRect();
+        const dropdown = this.#userDropdown.getBoundingClientRect();
         let end = window.innerWidth - button.right;
         if (end + dropdown.width > window.innerWidth - USER_DROPDOWN_EDGE) {
             end = window.innerWidth - USER_DROPDOWN_EDGE - dropdown.width;
         }
         if (end < USER_DROPDOWN_EDGE) end = USER_DROPDOWN_EDGE;
-        this.#user_dropdown.style.insetInlineEnd = `${Math.round(end)}px`;
-        this.#user_dropdown.style.top = `${Math.round(button.bottom + USER_DROPDOWN_GAP)}px`;
+        this.#userDropdown.style.insetInlineEnd = `${Math.round(end)}px`;
+        this.#userDropdown.style.top = `${Math.round(button.bottom + USER_DROPDOWN_GAP)}px`;
     }
-    #position_dropdown_event = () => this.#positionDropdown();
+    #positionDropdownEvent = () => this.#positionDropdown();
 
     getUsername() {
         return this.#username;
@@ -1185,8 +1286,8 @@ class UserProfile {
      */
     unmount() {
         this.#closeMenu();
-        this.#user_dropdown.remove();
-        UserProfile.#instances.delete(this.#user_main);
+        this.#userDropdown.remove();
+        UserProfile.#instances.delete(this.#userMain);
         return this;
     }
     /** Полное удаление: панель больше не нужна — снять клавиатуру и убрать панель из body */
@@ -1206,144 +1307,149 @@ class UserProfile {
     }
 
     set() {
-        return this.#user_main;
+        return this.#userMain;
     }
 }
 
 class UserDDItem {
-    #user_item = document.createElement("user_item");
+    #userItem = document.createElement("user_item");
 
-    constructor(options = {
-        title: String(),
-        icon: undefined,
-        clickEvent: () => {}
-    }) {
+    constructor(
+        options = {
+            title: String(),
+            icon: undefined,
+            clickEvent: () => {},
+        }
+    ) {
         if (options.title !== undefined && options.icon !== undefined) {
-            this.#user_item.innerText = options.title;
+            this.#userItem.innerText = options.title;
             // Значок ведёт строку — как в пунктах context_menu_item и выпадающих списков
             // меню-бара. Дописанный в конец, он прилипал к подписи, и пункт меню профиля
             // выбивался из семьи меню (в остальных меню значок стоит перед текстом)
-            this.#user_item.insertAdjacentHTML("afterbegin", new Icon(options.icon).getHTML());
+            this.#userItem.insertAdjacentHTML("afterbegin", new Icon(options.icon).getHTML());
         } else if (options.title !== undefined) {
-            this.#user_item.innerText = options.title;
+            this.#userItem.innerText = options.title;
         } else if (options.icon !== undefined) {
-            this.#user_item.innerHTML = new Icon(options.icon).getHTML();
+            this.#userItem.innerHTML = new Icon(options.icon).getHTML();
         }
-        this.#user_item.addEventListener("click", options.clickEvent)
+        this.#userItem.addEventListener("click", options.clickEvent);
     }
 
     set() {
-        return this.#user_item;
+        return this.#userItem;
     }
 }
 
 class HeaderDialog {
-    #header_button = undefined;
-    constructor(options = {
-        title: String(),
-        icon: undefined,
-        reverse: Boolean(),
-        label: String(),
-        dialogOptions: {
+    #headerButton = undefined;
+    constructor(
+        options = {
             title: String(),
-            closeOutSideClick: Boolean(),
-            style: {
-                width: String(),
-                height: String(),
-                direction: String(),
-                wrap: String(),
-                align: String(),
-                justify: String(),
+            icon: undefined,
+            reverse: Boolean(),
+            label: String(),
+            dialogOptions: {
+                title: String(),
+                closeOutSideClick: Boolean(),
+                style: {
+                    width: String(),
+                    height: String(),
+                    direction: String(),
+                    wrap: String(),
+                    align: String(),
+                    justify: String(),
+                },
+                components: [],
             },
-            components: []
         }
-    }) {
+    ) {
         // Неполные `dialogOptions` сборку не роняют: `style` и `components` — необязательные
         // части опции, а прямое обращение к ним давало TypeError при создании кнопки
         // («Cannot read properties of undefined») ещё до первого открытия слоя
-        const dialog_options = options.dialogOptions === undefined ? {} : options.dialogOptions;
-        const dialog_style = dialog_options.style === undefined ? {} : dialog_options.style;
-        const dialog_components = dialog_options.components === undefined ? [] : dialog_options.components;
+        const dialogOptions = options.dialogOptions === undefined ? {} : options.dialogOptions;
+        const dialogStyle = dialogOptions.style === undefined ? {} : dialogOptions.style;
+        const dialogComponents = dialogOptions.components === undefined ? [] : dialogOptions.components;
         // Пустой заголовок остаётся пустым: заготовка опции рисовала бы слово «undefined»
-        const dialog_title = dialog_options.title === undefined || dialog_options.title === null
-            ? "" : dialog_options.title;
-        let dialog = new Dialog({
-            width: dialog_style.width,
-            height: dialog_style.height,
-            closeOutSideClick: dialog_options.closeOutSideClick,
+        const dialogTitle =
+            dialogOptions.title === undefined || dialogOptions.title === null ? "" : dialogOptions.title;
+        const dialog = new Dialog({
+            width: dialogStyle.width,
+            height: dialogStyle.height,
+            closeOutSideClick: dialogOptions.closeOutSideClick,
             // Имя модального слоя для скринридера: без него диалог объявлялся бы безымянным
-            title: dialog_title
-        })
+            title: dialogTitle,
+        });
         // HEADER
-        let header_dialog = new ContentBlock({
+        const headerDialog = new ContentBlock({
             direction: "row",
             wrap: "nowrap",
             align: "center",
             justify: "space-between",
-            disableMarginChild: true
+            disableMarginChild: true,
         });
-        header_dialog.setWidth("-webkit-fill-available");
+        headerDialog.setWidth("-webkit-fill-available");
         // Заголовок — как у заголовков панелей оболочки (размер `--font_default_size`, вес 500
         // даёт `strong`): отдельные 14 pt в диалоге спорили с его содержимым
-        let title = new Label({
-            markdownText: `**${dialog_title}**`,
+        const title = new Label({
+            markdownText: `**${dialogTitle}**`,
             wordBreak: "normal",
-            width: "max-content"
-        })
-        let close_button = new Button({
+            width: "max-content",
+        });
+        const closeButton = new Button({
             icon: Icons.NAVIGATION.CLOSE,
             label: I18n.t("common.close"),
             reverse: true,
-            clickEvent: () => dialog.close()
+            clickEvent: () => dialog.close(),
         });
-        header_dialog.add(title, close_button);
-        dialog.addToHeader(header_dialog);
+        headerDialog.add(title, closeButton);
+        dialog.addToHeader(headerDialog);
         // BODY
-        let body_dialog = new ContentBlock({
-            direction: dialog_style.direction,
-            wrap: dialog_style.wrap,
-            align: dialog_style.align,
-            justify: dialog_style.justify
+        const bodyDialog = new ContentBlock({
+            direction: dialogStyle.direction,
+            wrap: dialogStyle.wrap,
+            align: dialogStyle.align,
+            justify: dialogStyle.justify,
         });
-        body_dialog.setWidth("-webkit-fill-available");
-        body_dialog.add(...dialog_components)
-        dialog.addToBody(body_dialog);
+        bodyDialog.setWidth("-webkit-fill-available");
+        bodyDialog.add(...dialogComponents);
+        dialog.addToBody(bodyDialog);
         // FOOTER
 
         //
-        this.#header_button = makeHeaderButtonBox(options);
+        this.#headerButton = makeHeaderButtonBox(options);
         // Слой идёт в body при первом открытии, а не при сборке: заранее созданный
         // невидимый диалог оставался бы в документе на всё время жизни кнопки
-        this.#header_button.addEventListener("click", () => {
+        this.#headerButton.addEventListener("click", () => {
             if (document.body.contains(dialog.set()) === false) document.body.appendChild(dialog.set());
             dialog.open();
         });
     }
 
     set() {
-        return this.#header_button;
+        return this.#headerButton;
     }
 }
 
 class HeaderButton {
-    #header_button = undefined;
+    #headerButton = undefined;
 
-    constructor(options = {
-        title: String(),
-        icon: undefined,
-        reverse: Boolean(),
-        label: String(),
-        clickEvent: () => {
+    constructor(
+        options = {
+            title: String(),
+            icon: undefined,
+            reverse: Boolean(),
+            label: String(),
+            clickEvent: () => {},
         }
-    }) {
-        this.#header_button = makeHeaderButtonBox(options);
-        this.#header_button.addEventListener("click", options.clickEvent);
+    ) {
+        this.#headerButton = makeHeaderButtonBox(options);
+        this.#headerButton.addEventListener("click", options.clickEvent);
     }
 
     set() {
-        return this.#header_button;
+        return this.#headerButton;
     }
 }
 
-exports.AppLayout = AppLayout
-exports.Route = Route
+exports.AppLayout = AppLayout;
+exports.Route = Route;