chuijs 4.0.3 → 4.0.4

package/framework/components/chui_notification/notification_download.js

@@ -1,97 +1,42 @@
-const { Animation } = require("../../modules/chui_animations/animations");
-const { setStyles, getTime, optionOr } = require("../../modules/chui_functions");
-const { LAYOUT_ROLE, requireLayoutNode } = require("../../modules/chui_layout/chui_layout");
+const { optionOr } = require("../../modules/chui_functions");
 const { Icons } = require("../chui_icons/icons");
-// Плашка значка — общая на всё семейство карточек уведомлений
-const { createStatusPlate, setStatusPlate } = require("./status_plate");
+// Каркас карточки загрузки — общий с `DownloadProgressNotification` (см. модуль)
+const { createDownloadCard, showDownloadCard, finishDownloadCard } = require("./notification_download_card");
 
+/**
+ * Уведомление о загрузке файла: название, текст хода и итог (`done`/`error`).
+ *
+ * Тело — одна строка текста, поэтому в общий каркас она не входит: у карточки с прогрессом
+ * тело другое (дорожка и счётчик), и общим остаётся только каркас с шапкой и статусом.
+ */
 class DownloadNotification {
-    #id = require("randomstring").generate();
-    #download_notification = document.createElement(`download_notification`);
-    #download_notification_icon = undefined;
-    #download_notification_content = document.createElement("download_notification_content");
-    #download_notification_header = document.createElement("download_notification_header");
-    #download_notification_title = document.createElement("download_notification_title");
-    #download_notification_date = document.createElement("download_notification_date");
-    #download_notification_body = document.createElement("download_notification_body");
-    #download_notification_text = document.createElement("download_notification_text");
+    #card;
+    #text = document.createElement("download_notification_text");
     constructor(options = { title: String(), text: String(), type: String() }) {
-        setStyles(__dirname + "/styles_download.css", "chUiJS_downloadNotification");
-        this.#download_notification.id = this.#id;
-        // Ход загрузки объявляется вежливо; итог с ошибкой меняет роль в `#renderTest()`
-        this.#download_notification.setAttribute("role", "status");
-        // Пустая заготовка опции равносильна отсутствующей: пустое уведомление не собирается
-        const title = optionOr(options.title, undefined);
+        this.#card = createDownloadCard({
+            tag: "download_notification",
+            styles: { file: "styles_download.css", id: "chUiJS_downloadNotification" },
+            glyph: Icons.FILE.DOWNLOAD_FOR_OFFLINE,
+            title: options.title,
+        });
+        // Пустая заготовка опции равносильна отсутствующей: текст хода обязателен
         const text = optionOr(options.text, undefined);
-        if (title !== undefined) {
-            this.#download_notification_title.innerText = title;
-        } else {
-            throw new Error("Должна быть установлена опция title");
-        }
-        this.#download_notification_body.style.width = "-webkit-fill-available";
-        this.#download_notification_date.innerHTML = getTime();
-        if (text !== undefined) {
-            this.#download_notification_text.innerText = text;
-        } else {
-            throw new Error("Должна быть установлена опция text");
-        }
-        this.#download_notification_header.appendChild(this.#download_notification_title);
-        this.#download_notification_header.appendChild(this.#download_notification_date);
-        this.#download_notification_content.appendChild(this.#download_notification_header);
-        this.#download_notification_body.appendChild(this.#download_notification_text);
-        this.#download_notification_content.appendChild(this.#download_notification_body);
-        // Значок состояния — в плашке слева, как у Notification
-        this.#download_notification_icon = createStatusPlate(undefined, Icons.FILE.DOWNLOAD_FOR_OFFLINE);
-        this.#download_notification.appendChild(this.#download_notification_icon);
-        this.#download_notification.appendChild(this.#download_notification_content);
+        if (text === undefined) throw new Error("Должна быть установлена опция text");
+        this.#text.innerText = text;
+        this.#card.body.appendChild(this.#text);
     }
     update(title = String(), text = String()) {
-        this.#download_notification_title.innerText = title;
-        this.#download_notification_text.innerText = text;
+        this.#card.title.innerText = title;
+        this.#text.innerText = text;
     }
     show() {
-        // Панель и ящик — части layout'а: у каждого окна свои
-        const panel = requireLayoutNode(LAYOUT_ROLE.NOTIFICATION_PANEL, this.#download_notification);
-        panel.appendChild(this.#download_notification);
-        new Animation(this.#download_notification).slideRightIn();
-        this.#download_notification.addEventListener("click", () =>
-            this.#hideNotification(this.#download_notification)
-        );
+        showDownloadCard(this.#card);
     }
     done() {
-        this.#renderTest("download_notification_success", "success");
+        finishDownloadCard(this.#card, "success");
     }
     error() {
-        this.#renderTest("download_notification_error", "error");
-    }
-    /** Итог загрузки: цвет статуса несут класс карточки и плашка значка */
-    #renderTest(className, status) {
-        const notification = this.#download_notification;
-        notification.className = className;
-        // Ошибку объявляем сразу, успех — вежливо (как у `Toast`)
-        notification.setAttribute("role", status === "error" ? "alert" : "status");
-        setStatusPlate(this.#download_notification_icon, status);
-        setTimeout(() => this.#hideNotification(notification), 2000);
-    }
-    #hideNotification(notification) {
-        new Animation(notification).slideRightOutAndRemove();
-        notification.addEventListener("animationend", () => {
-            // Точечный сброс следов анимации вместо стирания всего атрибута `style`
-            notification.style.removeProperty("animation-name");
-            notification.style.removeProperty("transition");
-            notification.style.display = "flex";
-            notification.style.width = "-webkit-fill-available";
-            notification.style.opacity = "0";
-            notification.style.transform = "translateX(100%)";
-            let box = requireLayoutNode(LAYOUT_ROLE.NOTIFICATION_BOX_MAIN, notification);
-            // В истории запись плоская и без курсора: класс снимает стекло, тень и отклик на наведение
-            notification.classList.add("notification_in_box");
-            box.appendChild(notification);
-            setTimeout(() => {
-                notification.style.opacity = "1";
-                notification.style.transform = "translateX(0)";
-            }, 500);
-        });
+        finishDownloadCard(this.#card, "error");
     }
 }
 

package/framework/components/chui_notification/notification_download_card.js

@@ -0,0 +1,115 @@
+const { Animation } = require("../../modules/chui_animations/animations");
+const { setStyles, getTime, optionOr } = require("../../modules/chui_functions");
+const { LAYOUT_ROLE, requireLayoutNode } = require("../../modules/chui_layout/chui_layout");
+// Плашка значка — общая на всё семейство карточек уведомлений
+const { createStatusPlate, setStatusPlate } = require("./status_plate");
+
+/**
+ * Каркас карточки загрузки: шапка, плашка значка и жизненный цикл (`show`, `done`, `error`,
+ * уход в историю). Одно решение на две карточки — `DownloadNotification` и
+ * `DownloadProgressNotification`: тела у них разные (строка текста против дорожки прогресса)
+ * и таблицы стилей свои, а шапка с датой, статус и поведение совпадают.
+ *
+ * Прежде это были две почти дословные копии (`diff` находил только имя экспорта), из-за чего
+ * правка в одной не доходила до второй: `update(title, text)` и `update(title, text, value, max)`
+ * разошлись, а статус с уходом в историю пришлось бы править дважды.
+ *
+ * Карточка — обычный объект с узлами, а не класс с наследованием: приватные поля базового
+ * класса наследнику не видны, и ради узлов, которые компонент всё равно строит сам, пришлось бы
+ * открывать наружу геттеры. По той же причине рядом живёт модуль плашки (`status_plate.js`).
+ */
+function createDownloadCard(options = { tag: String(), styles: Object(), glyph: undefined, title: String() }) {
+    setStyles(__dirname + "/" + options.styles.file, options.styles.id);
+    // Пустая заготовка опции равносильна отсутствующей: карточка без названия не собирается
+    const title = optionOr(options.title, undefined);
+    if (title === undefined) throw new Error("Должна быть установлена опция title");
+
+    const root = document.createElement(options.tag);
+    root.id = require("randomstring").generate();
+    // Ход загрузки объявляется вежливо; итог с ошибкой меняет роль в `finishDownloadCard()`
+    root.setAttribute("role", "status");
+
+    const content = document.createElement("download_notification_content");
+    const header = document.createElement("download_notification_header");
+    const titleNode = document.createElement("download_notification_title");
+    const body = document.createElement("download_notification_body");
+    titleNode.innerText = title;
+    body.style.width = "-webkit-fill-available";
+    header.appendChild(titleNode);
+    header.appendChild(createDateNode());
+    content.appendChild(header);
+    content.appendChild(body);
+    // Значок состояния — в плашке слева, как у Notification
+    const plate = createStatusPlate(undefined, options.glyph);
+    root.appendChild(plate);
+    root.appendChild(content);
+    return { root, body, title: titleNode, plate };
+}
+
+/** Дата карточки в истории: время постановки в очередь загрузок */
+function createDateNode() {
+    const date = document.createElement("download_notification_date");
+    date.innerHTML = getTime();
+    return date;
+}
+
+/** Показать карточку в панели уведомлений; клик по карточке убирает её */
+function showDownloadCard(card = Object()) {
+    // Панель и ящик — части layout'а: у каждого окна свои
+    const panel = requireLayoutNode(LAYOUT_ROLE.NOTIFICATION_PANEL, card.root);
+    panel.appendChild(card.root);
+    new Animation(card.root).slideRightIn();
+    card.root.addEventListener("click", () => hideDownloadCard(card.root));
+}
+
+/**
+ * Итог загрузки: цвет статуса несут класс карточки и плашка значка. Класс собирается из статуса
+ * (`download_notification_success` / `download_notification_error`) — прежде он приходил
+ * отдельным первым аргументом, хотя всегда был его же производной.
+ */
+function finishDownloadCard(card = Object(), status = String()) {
+    const notification = card.root;
+    notification.className = `download_notification_${status}`;
+    // Ошибку объявляем сразу, успех — вежливо (как у `Toast`)
+    notification.setAttribute("role", status === "error" ? "alert" : "status");
+    setStatusPlate(card.plate, status);
+    setTimeout(() => hideDownloadCard(notification), 2000);
+}
+
+/** Убрать карточку: она уезжает в ящик уведомлений плоской записью истории */
+function hideDownloadCard(notification = undefined) {
+    new Animation(notification).slideRightOutAndRemove();
+    // Въезд в ящик — событие одноразовое: сняв себя после своего кадра, обработчик не трогает
+    // карточку дальше. Иначе он ловил бы любой конец кадра — включая кадр уборки — и переселял бы
+    // запись в начало списка, начиная её кадр заново
+    const land = (event) => {
+        if (event.target !== notification) return;
+        notification.removeEventListener("animationend", land);
+        // Точечный сброс следов анимации вместо стирания всего атрибута `style`:
+        // вид ухода держит конечное состояние, а инлайновое имя кадра перебило бы следующий
+        notification.style.removeProperty("animation-name");
+        notification.removeAttribute("data-motion");
+        notification.style.removeProperty("transition");
+        const box = requireLayoutNode(LAYOUT_ROLE.NOTIFICATION_BOX_MAIN, notification);
+        // В истории запись плоская и без курсора: класс снимает стекло, тень и отклик на наведение
+        notification.classList.add("notification_in_box");
+        box.appendChild(notification);
+        // Запись встаёт на место кадром прихода — тем же, каким въехала в панель
+        new Animation(notification).slideRightIn();
+        notification.addEventListener(
+            "animationend",
+            (event) => {
+                if (event.target !== notification) return;
+                notification.style.removeProperty("animation-name");
+                notification.removeAttribute("data-motion");
+            },
+            { once: true }
+        );
+    };
+    notification.addEventListener("animationend", land);
+}
+
+exports.createDownloadCard = createDownloadCard;
+exports.showDownloadCard = showDownloadCard;
+exports.finishDownloadCard = finishDownloadCard;
+exports.hideDownloadCard = hideDownloadCard;

package/framework/components/chui_notification/notification_download_progress.css

@@ -8,7 +8,7 @@ notification_download_progress {
     box-sizing: border-box;
     /* Тот же материал и ритм, что у карточки Notification */
     border-radius: var(--radius_md);
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-size: var(--font_default_size);
     padding: 12px 14px;
     background: var(--header_background);
@@ -130,7 +130,7 @@ download_progress_count {
 }
 
 .download_progress_bar::-webkit-progress-bar {
-    background: var(--ap_main_background);
+    background: var(--player_background);
     border-radius: var(--radius_pill);
     border: none;
 }

package/framework/components/chui_notification/notification_download_progress.js

@@ -1,122 +1,84 @@
-const { Animation } = require("../../modules/chui_animations/animations");
-const { setStyles, getTime, optionOr } = require("../../modules/chui_functions");
-const { LAYOUT_ROLE, requireLayoutNode } = require("../../modules/chui_layout/chui_layout");
 const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 const { Icons } = require("../chui_icons/icons");
-// Плашка значка — общая на всё семейство карточек уведомлений
-const { createStatusPlate, setStatusPlate } = require("./status_plate");
+// Каркас карточки загрузки — общий с `DownloadNotification` (см. модуль)
+const { createDownloadCard, showDownloadCard, finishDownloadCard } = require("./notification_download_card");
 
-class DownloadProgressNotification {
-    #id = require("randomstring").generate();
-    #download_notification = document.createElement(`notification_download_progress`);
-    #download_notification_icon = undefined;
-    #download_notification_content = document.createElement("download_notification_content");
-    #download_notification_header = document.createElement("download_notification_header");
-    #id_download_notification_title = require("randomstring").generate();
-    #download_notification_title = document.createElement("download_notification_title");
-    #download_notification_date = document.createElement("download_notification_date");
-    #download_notification_body = document.createElement("download_notification_body");
-    //
-    #id_progress = require("randomstring").generate();
-    #ProgressBar = document.createElement(`progress`);
-    #main = document.createElement("download_progress_block");
-    #progress_text_block = document.createElement("download_progress_text_block");
-    #id_progress_count = require("randomstring").generate();
-    #progress_count = document.createElement("download_progress_count");
-    #id_progress_text = require("randomstring").generate();
-    #progress_text = document.createElement("download_progress_text");
-    constructor(options = { title: String(), text: String(), type: String() }) {
-        setStyles(__dirname + "/notification_download_progress.css", "chUiJS_downloadProgressNotification");
-        this.#download_notification.id = this.#id;
-        // Ход загрузки объявляется вежливо; итог с ошибкой меняет роль в `#renderTest()`
-        this.#download_notification.setAttribute("role", "status");
-        this.#download_notification_title.id = this.#id_download_notification_title;
-        // Пустая заготовка опции равносильна отсутствующей
-        if (optionOr(options.title, undefined) !== undefined) {
-            this.#download_notification_title.innerText = options.title;
-        } else {
-            throw new Error("Должна быть установлена опция title");
-        }
-        this.#download_notification_body.style.width = "-webkit-fill-available";
-        this.#download_notification_date.innerHTML = getTime();
-        this.#download_notification_header.appendChild(this.#download_notification_title);
-        this.#download_notification_header.appendChild(this.#download_notification_date);
-        this.#download_notification_content.appendChild(this.#download_notification_header);
-        this.#download_notification_content.appendChild(this.#download_notification_body);
-        // Значок состояния — в плашке слева, как у Notification
-        this.#download_notification_icon = createStatusPlate(undefined, Icons.FILE.DOWNLOADING);
-        this.#download_notification.appendChild(this.#download_notification_icon);
-        this.#download_notification.appendChild(this.#download_notification_content);
-
-        //
-        if (options.max !== undefined) this.#ProgressBar.max = options.max;
-        this.#ProgressBar.id = this.#id_progress;
-        this.#ProgressBar.className = "download_progress_bar";
-        this.#progress_count.id = this.#id_progress_count;
-        this.#progress_count.setAttribute("for", this.#id_progress);
-        this.#progress_text.id = this.#id_progress_text;
-        this.#progress_text.setAttribute("for", this.#id_progress);
-        this.#progress_text_block.appendChild(this.#progress_text);
-        this.#progress_text_block.appendChild(this.#progress_count);
+/**
+ * Число для дорожки прогресса. `<progress>` не принимает `NaN` (бросает `TypeError`), а в счётчике
+ * он печатался бы как «NaN из NaN». Поэтому нечисловое значение читается как «не передали»:
+ * шкала и счётчик остаются на прежнем месте.
+ */
+function countValue(raw = undefined) {
+    const value = Number(raw);
+    return Number.isFinite(value) ? value : undefined;
+}
 
-        this.#main.appendChild(this.#progress_text_block);
-        this.#main.appendChild(this.#ProgressBar);
-        //
-        this.#main.style.width = "-webkit-fill-available";
-        this.#progress_text.innerText = "...";
-        this.#progress_count.innerText = I18n.t("feedback.progressCount", { value: 0, max: 0 });
-        this.#ProgressBar.value = 0;
-        this.#download_notification_body.appendChild(this.#main);
+/**
+ * Уведомление о загрузке с дорожкой прогресса: название, текст, счётчик «N из M» и итог.
+ *
+ * Тело — дорожка со счётчиком, поэтому оно не входит в общий каркас: у карточек общими
+ * остаются шапка с датой, статус и уход в историю (см. `notification_download_card.js`).
+ */
+class DownloadProgressNotification {
+    #card;
+    #progress = document.createElement("progress");
+    #text = document.createElement("download_progress_text");
+    #count = document.createElement("download_progress_count");
+    constructor(options = { title: String(), text: String(), type: String(), max: Number() }) {
+        this.#card = createDownloadCard({
+            tag: "notification_download_progress",
+            styles: { file: "notification_download_progress.css", id: "chUiJS_downloadProgressNotification" },
+            glyph: Icons.FILE.DOWNLOADING,
+            title: options.title,
+        });
+        // Шкала объявляет себя скринридеру сама; подписи связаны с ней по `for`
+        this.#progress.id = require("randomstring").generate();
+        this.#progress.className = "download_progress_bar";
+        const max = countValue(options.max);
+        if (max !== undefined && max > 0) this.#progress.max = max;
+        this.#text.id = require("randomstring").generate();
+        this.#text.setAttribute("for", this.#progress.id);
+        this.#count.id = require("randomstring").generate();
+        this.#count.setAttribute("for", this.#progress.id);
+        this.#text.innerText = "...";
+        this.#count.innerText = I18n.t("feedback.progressCount", { value: 0, max: 0 });
+        this.#progress.value = 0;
+        const textBlock = document.createElement("download_progress_text_block");
+        textBlock.appendChild(this.#text);
+        textBlock.appendChild(this.#count);
+        const block = document.createElement("download_progress_block");
+        block.appendChild(textBlock);
+        block.appendChild(this.#progress);
+        block.style.width = "-webkit-fill-available";
+        this.#card.body.appendChild(block);
     }
-    update(title = String(), text = String(), value = Number(), max = Number()) {
-        this.#download_notification_title.innerText = title;
-        this.#progress_text.innerText = text;
-        this.#progress_count.innerText = I18n.t("feedback.progressCount", { value: value, max: max });
-        this.#ProgressBar.value = value;
-        this.#ProgressBar.max = max;
+    /**
+     * Обновление хода загрузки.
+     *
+     * Числа могут не прийти (загрузка без известного размера) или быть нечисловыми — тогда
+     * шкала и счётчик остаются на прежнем месте. Прежде умолчаниями стояли `Number()`: вызов
+     * `update(title, text)` обнулял шкалу и менял `max` (ноль браузер молча заменяет единицей),
+     * а нечисловое значение бросало `TypeError` прямо в обработчике хода загрузки.
+     */
+    update(title = String(), text = String(), value = undefined, max = undefined) {
+        this.#card.title.innerText = title;
+        this.#text.innerText = text;
+        const total = countValue(max);
+        const done = countValue(value);
+        if (total !== undefined && total > 0) this.#progress.max = total;
+        if (done !== undefined) this.#progress.value = Math.max(0, done);
+        if (done !== undefined && total !== undefined) {
+            this.#count.innerText = I18n.t("feedback.progressCount", { value: done, max: total });
+        }
     }
     show() {
-        const panel = requireLayoutNode(LAYOUT_ROLE.NOTIFICATION_PANEL, this.#download_notification);
-        panel.appendChild(this.#download_notification);
-        new Animation(this.#download_notification).slideRightIn();
-        this.#download_notification.addEventListener("click", () =>
-            this.#hideNotification(this.#download_notification)
-        );
+        showDownloadCard(this.#card);
     }
     done() {
-        this.#renderTest("download_notification_success", "success");
+        finishDownloadCard(this.#card, "success");
     }
     error() {
-        this.#renderTest("download_notification_error", "error");
-    }
-    /** Итог загрузки: цвет статуса несут класс карточки и плашка значка */
-    #renderTest(className, status) {
-        const notification = this.#download_notification;
-        notification.className = className;
-        // Ошибку объявляем сразу, успех — вежливо (как у `Toast`)
-        notification.setAttribute("role", status === "error" ? "alert" : "status");
-        setStatusPlate(this.#download_notification_icon, status);
-        setTimeout(() => this.#hideNotification(notification), 2000);
-    }
-    #hideNotification(notification) {
-        new Animation(notification).slideRightOutAndRemove();
-        notification.addEventListener("animationend", () => {
-            // Точечный сброс следов анимации вместо стирания всего атрибута `style`
-            notification.style.removeProperty("animation-name");
-            notification.style.removeProperty("transition");
-            notification.style.display = "flex";
-            notification.style.width = "-webkit-fill-available";
-            notification.style.opacity = "0";
-            notification.style.transform = "translateX(100%)";
-            let box = requireLayoutNode(LAYOUT_ROLE.NOTIFICATION_BOX_MAIN, notification);
-            // В истории запись плоская и без курсора: класс снимает стекло, тень и отклик на наведение
-            notification.classList.add("notification_in_box");
-            box.appendChild(notification);
-            setTimeout(() => {
-                notification.style.opacity = "1";
-                notification.style.transform = "translateX(0)";
-            }, 500);
-        });
+        finishDownloadCard(this.#card, "error");
     }
 }
 

package/framework/components/chui_notification/notification_update.js

@@ -8,76 +8,76 @@ const { createStatusPlate } = require("./status_plate");
 
 class UpdateNotification {
     #id = require("randomstring").generate();
-    #update_notification = document.createElement(`update_notification`);
-    #update_notification_icon = undefined;
-    #update_notification_content = document.createElement("update_notification_content");
-    #update_notification_header = document.createElement("update_notification_header");
-    #update_notification_title = document.createElement("update_notification_title");
-    #update_notification_date = document.createElement("update_notification_date");
-    #update_notification_body = document.createElement("update_notification_body");
-    #update_notification_text = document.createElement("update_notification_text");
+    #updateNotification = document.createElement(`update_notification`);
+    #updateNotificationIcon = undefined;
+    #updateNotificationContent = document.createElement("update_notification_content");
+    #updateNotificationHeader = document.createElement("update_notification_header");
+    #updateNotificationTitle = document.createElement("update_notification_title");
+    #updateNotificationDate = document.createElement("update_notification_date");
+    #updateNotificationBody = document.createElement("update_notification_body");
+    #updateNotificationText = document.createElement("update_notification_text");
     constructor(options = { title: String(), text: String(), spinner: Boolean() }) {
         setStyles(__dirname + "/styles_update.css", "chUiJS_UpdateNotification");
-        this.#update_notification.id = this.#id;
+        this.#updateNotification.id = this.#id;
         // Карточка обновления живёт в ящике и меняется на месте — объявляем вежливо
-        this.#update_notification.setAttribute("role", "status");
+        this.#updateNotification.setAttribute("role", "status");
         // Пустая заготовка опции равносильна отсутствующей: пустое уведомление не собирается
         const title = optionOr(options.title, undefined);
         const text = optionOr(options.text, undefined);
         // Стили заголовка уведомления
         if (title !== undefined) {
-            this.#update_notification_title.innerText = title;
+            this.#updateNotificationTitle.innerText = title;
         } else {
             throw new Error("Должна быть установлена опция title");
         }
         // Стили текста уведомления
         if (text !== undefined) {
-            this.#update_notification_text.innerText = text;
+            this.#updateNotificationText.innerText = text;
         } else {
             throw new Error("Должна быть установлена опция text");
         }
-        this.#update_notification_date.innerHTML = getTime();
+        this.#updateNotificationDate.innerHTML = getTime();
         //
-        this.#update_notification_header.appendChild(this.#update_notification_title);
-        this.#update_notification_header.appendChild(this.#update_notification_date);
+        this.#updateNotificationHeader.appendChild(this.#updateNotificationTitle);
+        this.#updateNotificationHeader.appendChild(this.#updateNotificationDate);
         //
-        this.#update_notification_content.appendChild(this.#update_notification_header);
+        this.#updateNotificationContent.appendChild(this.#updateNotificationHeader);
         // Значок и спиннер делят одно место — плашку слева: карточка остаётся ровной,
         // а текст не отъезжает вбок под вращающимся кольцом
-        this.#update_notification_icon = createStatusPlate(undefined, Icons.NOTIFICATION.SYSTEM_UPDATE);
+        this.#updateNotificationIcon = createStatusPlate(undefined, Icons.NOTIFICATION.SYSTEM_UPDATE);
         if (options.spinner) {
             // Под кольцом заливки нет: плашка держит только место значка, иначе серая подложка
             // читалась вторым фоном вокруг тонкого индикатора
-            this.#update_notification_icon.classList.add("notification_icon_plain");
-            this.#update_notification_icon.innerHTML = "";
-            this.#update_notification_icon.appendChild(new Spinner(Spinner.SIZE.V_SMALL, "0").set());
+            this.#updateNotificationIcon.classList.add("notification_icon_plain");
+            this.#updateNotificationIcon.innerHTML = "";
+            this.#updateNotificationIcon.appendChild(new Spinner(Spinner.SIZE.V_SMALL, "0").set());
         }
-        this.#update_notification_body.appendChild(this.#update_notification_text);
-        this.#update_notification_content.appendChild(this.#update_notification_body);
-        this.#update_notification.appendChild(this.#update_notification_icon);
-        this.#update_notification.appendChild(this.#update_notification_content);
+        this.#updateNotificationBody.appendChild(this.#updateNotificationText);
+        this.#updateNotificationContent.appendChild(this.#updateNotificationBody);
+        this.#updateNotification.appendChild(this.#updateNotificationIcon);
+        this.#updateNotification.appendChild(this.#updateNotificationContent);
     }
     show(showOnSystem = Boolean()) {
-        const panel = requireLayoutNode(LAYOUT_ROLE.NOTIFICATION_PANEL, this.#update_notification);
-        panel.appendChild(this.#update_notification);
-        new Animation(this.#update_notification).slideRightIn();
+        const panel = requireLayoutNode(LAYOUT_ROLE.NOTIFICATION_PANEL, this.#updateNotification);
+        panel.appendChild(this.#updateNotification);
+        new Animation(this.#updateNotification).slideRightIn();
         //notification.addEventListener("click", () => this.hide(notification));
         if (showOnSystem)
             require("electron").ipcRenderer.send(
                 "show_system_notification",
-                this.#update_notification_title.innerText,
-                this.#update_notification_text.innerText
+                this.#updateNotificationTitle.innerText,
+                this.#updateNotificationText.innerText
             );
     }
     hide() {
-        const notification = this.#update_notification;
+        const notification = this.#updateNotification;
         // Карточка обновления не уезжает в ящик истории: после анимации её убираем совсем.
         // Без этого невидимый узел копился в панели уведомлений на каждое объявление
         notification.addEventListener("animationend", (event) => {
             if (event.target !== notification) return;
             notification.remove();
         });
-        new Animation(this.#update_notification).slideRightOutAndRemove();
+        new Animation(this.#updateNotification).slideRightOutAndRemove();
         // Карточку ещё не показывали — анимации не будет, но узел в панели остался бы висеть
         if (notification.style.animationName === "" && document.body.contains(notification)) notification.remove();
     }

package/framework/components/chui_notification/status_plate.css

@@ -22,17 +22,17 @@ notification_icon chui_icon {
 }
 
 notification_icon.notification_icon_success {
-    background: var(--badge_success_back);
+    background: var(--badge_success_background);
     color: var(--badge_success_text);
 }
 
 notification_icon.notification_icon_warning {
-    background: var(--badge_warning_back);
+    background: var(--badge_warning_background);
     color: var(--badge_warning_text);
 }
 
 notification_icon.notification_icon_error {
-    background: var(--badge_error_back);
+    background: var(--badge_error_background);
     color: var(--badge_error_text);
 }
 

package/framework/components/chui_notification/styles.css

@@ -9,7 +9,7 @@ notification {
        Статус несёт не акцентная полоса слева (устаревший приём «предупредительной
        рамки»), а плашка значка и цветной волосяной край `border-color` ниже. */
     border-radius: var(--radius_md);
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-size: var(--font_default_size);
     padding: 12px 14px;
     background: var(--header_background);
@@ -128,7 +128,12 @@ notification_progress {
 
 /* Плоская поверхность списка: записи истории не «всплывают» над панелью и не размывают её */
 .notification_in_box {
+    /* Вид записи истории и показывает карточку: вне ящика `notification` скрыт (`display: none`),
+       поэтому запись показывает себя сама — инлайновый `display` из JS ушёл вместе с ручной
+       уборкой следов кадра */
+    display: flex;
     /* в списке истории карточка тянется по ширине ящика, а не держит ширину тоста */
+    width: -webkit-fill-available;
     min-width: 0;
     max-width: -webkit-fill-available;
     margin: 4px 2px;

package/framework/components/chui_notification/styles_download.css

@@ -7,7 +7,7 @@ download_notification {
     box-sizing: border-box;
     /* Тот же материал и ритм, что у карточки Notification */
     border-radius: var(--radius_md);
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-size: var(--font_default_size);
     padding: 12px 14px;
     background: var(--header_background);

package/framework/components/chui_notification/styles_update.css

@@ -8,7 +8,7 @@ update_notification {
     /* Тот же материал и тот же ритм, что у карточки Notification: стеклянная
        поверхность, радиус, волосяной край и отступы 12/14 */
     border-radius: var(--radius_md);
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-size: var(--font_default_size);
     padding: 12px 14px;
     background: var(--header_background);
@@ -27,7 +27,7 @@ update_notification_body {
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: var(--margin);
+    gap: var(--block_margin);
 }
 
 update_notification_content {