chuijs 4.0.2 → 4.0.4

package/framework/components/chui_notification/notification.js

@@ -1,10 +1,10 @@
-const {Animation} = require('../../modules/chui_animations/animations');
-const {setStyles, markdownToHtml, getTime, getDayKey, optionOr} = require('../../modules/chui_functions');
-const {LAYOUT_ROLE, requireLayoutNode} = require('../../modules/chui_layout/chui_layout');
-const {Icon, Icons} = require('../chui_icons/icons');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { Animation } = require("../../modules/chui_animations/animations");
+const { setStyles, markdownToHtml, getTime, getDayKey, optionOr } = require("../../modules/chui_functions");
+const { LAYOUT_ROLE, requireLayoutNode } = require("../../modules/chui_layout/chui_layout");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 // Плашка значка состояния — общая на всё семейство карточек уведомлений
-const {setStatusPlate} = require("./status_plate");
+const { setStatusPlate } = require("./status_plate");
 
 /**
  * Карточка уведомления в панели: значок состояния, заголовок с отметкой времени, текст,
@@ -33,51 +33,56 @@ class Notification {
     #id = require("randomstring").generate();
     #time = 5000;
     #notification = document.createElement(`notification`);
-    #notification_icon = document.createElement("notification_icon");
-    #notification_content = document.createElement("notification_content");
-    #notification_header = document.createElement("notification_header");
-    #notification_title = document.createElement("notification_title");
-    #notification_date = document.createElement("notification_date");
-    #notification_text = document.createElement("notification_text")
-    #notification_progress = document.createElement("notification_progress");
-    #notification_close = document.createElement("button");
+    #notificationIcon = document.createElement("notification_icon");
+    #notificationContent = document.createElement("notification_content");
+    #notificationHeader = document.createElement("notification_header");
+    #notificationTitle = document.createElement("notification_title");
+    #notificationDate = document.createElement("notification_date");
+    #notificationText = document.createElement("notification_text");
+    #notificationProgress = document.createElement("notification_progress");
+    #notificationClose = document.createElement("button");
     // Отсчёт автоскрытия: таймер, дедлайн и остаток — чтобы пауза не теряла время
     #timer = undefined;
     #deadline = 0;
     #remaining = 0;
     #dismissed = false;
 
-    constructor(options = {
-        title: String(), markdownTitle: String(),
-        text: String(), markdownText: String(),
-        style: undefined, showTime: Number()
-    }) {
-        setStyles(__dirname + "/styles.css", 'chUiJS_Notification');
+    constructor(
+        options = {
+            title: String(),
+            markdownTitle: String(),
+            text: String(),
+            markdownText: String(),
+            style: undefined,
+            showTime: Number(),
+        }
+    ) {
+        setStyles(__dirname + "/styles.css", "chUiJS_Notification");
         // Время показа — только настоящее число: заготовка `Number()` из описания опций
         // раньше доезжала как значение и карточка без опций исчезала мгновенно
-        const show_time = Number(options.showTime);
-        if (Number.isFinite(show_time)) this.#time = show_time;
+        const showTime = Number(options.showTime);
+        if (Number.isFinite(showTime)) this.#time = showTime;
         this.#notification.id = this.#id;
         // Пустая заготовка опции равносильна отсутствующей: иначе обе опции читались как заданные
         const title = optionOr(options.title, undefined);
-        const markdown_title = optionOr(options.markdownTitle, undefined);
+        const markdownTitle = optionOr(options.markdownTitle, undefined);
         const text = optionOr(options.text, undefined);
-        const markdown_text = optionOr(options.markdownText, undefined);
+        const markdownText = optionOr(options.markdownText, undefined);
         // Стили заголовка уведомления
-        if (title !== undefined && markdown_title !== undefined) {
+        if (title !== undefined && markdownTitle !== undefined) {
             throw new Error("Должна быть установлена одна опция title или markdownTitle");
         } else {
-            if (title !== undefined) this.#notification_title.innerText = title;
-            if (markdown_title !== undefined) this.#notification_title.innerHTML = markdownToHtml(markdown_title);
+            if (title !== undefined) this.#notificationTitle.innerText = title;
+            if (markdownTitle !== undefined) this.#notificationTitle.innerHTML = markdownToHtml(markdownTitle);
         }
         // Стили текста уведомления
-        if (text !== undefined && markdown_text !== undefined) {
+        if (text !== undefined && markdownText !== undefined) {
             throw new Error("Должна быть установлена одна опция text или markdownText");
         } else {
-            if (text !== undefined) this.#notification_text.innerText = text;
-            if (markdown_text !== undefined) this.#notification_text.innerHTML = markdownToHtml(markdown_text);
+            if (text !== undefined) this.#notificationText.innerText = text;
+            if (markdownText !== undefined) this.#notificationText.innerHTML = markdownToHtml(markdownText);
         }
-        this.#notification_date.innerHTML = getTime();
+        this.#notificationDate.innerHTML = getTime();
         // Ключ дня для группировки истории в ящике: подпись группы («Сегодня», «Вчера»,
         // дата) считает ящик, карточке достаточно самого ключа. Записи приходят
         // непрочитанными — ящик снимает отметку, когда его открыли.
@@ -86,31 +91,37 @@ class Notification {
         //
         const style = optionOr(options.style, undefined);
         if (style !== undefined) this.#notification.classList.add(style);
+        // Карточка появляется сама, без фокуса, поэтому о ней сообщает роль: ошибку
+        // объявляем сразу, остальное — вежливо (то же правило, что у `Toast`)
+        this.#notification.setAttribute("role", style === Notification.STYLE.ERROR ? "alert" : "status");
         // Иконка состояния — украшение: стиль читается и по тексту уведомления.
         // Цвет и глиф плашки выбирает общий помощник семейства — по ключу стиля
-        this.#notification_icon.setAttribute("aria-hidden", "true");
-        setStatusPlate(this.#notification_icon, typeof style === "string" ? style.replace("notification_", "") : undefined);
+        this.#notificationIcon.setAttribute("aria-hidden", "true");
+        setStatusPlate(
+            this.#notificationIcon,
+            typeof style === "string" ? style.replace("notification_", "") : undefined
+        );
         // Закрытие — настоящая кнопка: доступна мышью, с клавиатуры и скринридеру
-        this.#notification_close.className = "notification_close";
-        this.#notification_close.type = "button";
-        this.#notification_close.setAttribute("aria-label", I18n.t("a11y.closeNotification"));
-        this.#notification_close.setAttribute("title", I18n.t("common.close"));
-        this.#notification_close.innerHTML = new Icon(Icons.NAVIGATION.CLOSE, "16px").getHTML();
+        this.#notificationClose.className = "notification_close";
+        this.#notificationClose.type = "button";
+        this.#notificationClose.setAttribute("aria-label", I18n.t("a11y.closeNotification"));
+        this.#notificationClose.setAttribute("title", I18n.t("common.close"));
+        this.#notificationClose.innerHTML = new Icon(Icons.NAVIGATION.CLOSE, "16px").getHTML();
         //
-        this.#notification_header.appendChild(this.#notification_title)
-        this.#notification_header.appendChild(this.#notification_date)
+        this.#notificationHeader.appendChild(this.#notificationTitle);
+        this.#notificationHeader.appendChild(this.#notificationDate);
         //
-        this.#notification_content.appendChild(this.#notification_header)
-        this.#notification_content.appendChild(this.#notification_text)
-        this.#notification.appendChild(this.#notification_icon)
-        this.#notification.appendChild(this.#notification_content)
-        this.#notification.appendChild(this.#notification_close)
+        this.#notificationContent.appendChild(this.#notificationHeader);
+        this.#notificationContent.appendChild(this.#notificationText);
+        this.#notification.appendChild(this.#notificationIcon);
+        this.#notification.appendChild(this.#notificationContent);
+        this.#notification.appendChild(this.#notificationClose);
         // Полоса отсчёта нужна только тем уведомлениям, которые закрываются сами
         if (this.#time > 0) {
-            this.#notification_progress.style.animationDuration = `${this.#time}ms`;
+            this.#notificationProgress.style.animationDuration = `${this.#time}ms`;
             // Отсчёт стартует вместе с таймером, а не с появлением узла в DOM
-            this.#notification_progress.style.animationPlayState = "paused";
-            this.#notification.appendChild(this.#notification_progress);
+            this.#notificationProgress.style.animationPlayState = "paused";
+            this.#notification.appendChild(this.#notificationProgress);
         }
         // Курсор или фокус внутри карточки останавливают отсчёт
         this.#notification.addEventListener("mouseenter", () => this.pause());
@@ -128,12 +139,17 @@ class Notification {
         panel.appendChild(this.#notification);
         new Animation(this.#notification).slideRightIn();
         // animationend прилетает и от детей (полоса отсчёта) — отсчёт запускаем только по своему
-        this.#notification.addEventListener('animationend', (event) => {
+        this.#notification.addEventListener("animationend", (event) => {
             if (event.target !== this.#notification) return;
             this.#start(this.#time);
         });
         this.#notification.addEventListener("click", () => this.dismiss());
-        if (showOnSystem) require("electron").ipcRenderer.send("show_system_notification", this.#notification_title.innerText, this.#notification_text.innerText);
+        if (showOnSystem)
+            require("electron").ipcRenderer.send(
+                "show_system_notification",
+                this.#notificationTitle.innerText,
+                this.#notificationText.innerText
+            );
         return this;
     }
 
@@ -144,7 +160,7 @@ class Notification {
         clearTimeout(this.#timer);
         this.#timer = undefined;
         this.#remaining = Math.max(0, this.#deadline - Date.now());
-        this.#notification_progress.style.animationPlayState = "paused";
+        this.#notificationProgress.style.animationPlayState = "paused";
         return this;
     }
 
@@ -166,7 +182,7 @@ class Notification {
         this.#dismissed = true;
         this.#clearTimer();
         // Полоса отсчёта больше не нужна: её animationend мог бы прилететь во время ухода
-        this.#notification_progress.remove();
+        this.#notificationProgress.remove();
         this.#removeNotification(this.#notification);
         return this;
     }
@@ -176,7 +192,7 @@ class Notification {
         this.#remaining = duration;
         this.#deadline = Date.now() + duration;
         this.#timer = setTimeout(() => this.dismiss(), duration);
-        this.#notification_progress.style.animationPlayState = "running";
+        this.#notificationProgress.style.animationPlayState = "running";
         return this;
     }
 
@@ -188,32 +204,54 @@ class Notification {
 
     #removeNotification(notification) {
         // Анимация ухода требует уже заданного animationName — у невидимого уведомления его нет
-        if (notification.style.animationName === "") notification.style.animationName = "slide-right-in";
+        if (notification.style.animationName === "") {
+            notification.style.animationName = "slide-right-in";
+            notification.dataset.motion = "enter";
+        }
         new Animation(notification).slideRightOutAndRemove();
-        notification.addEventListener("animationend", (event) => {
+        // Въезд в ящик — событие одноразовое: сняв себя после своего кадра, обработчик больше
+        // не трогает карточку. Без снятия его ловил любой конец кадра — включая кадр уборки:
+        // запись переселялась в начало списка и кадр начинался заново
+        const land = (event) => {
             if (event.target !== notification) return;
-            // Точечный сброс следов анимации: `removeAttribute("style")` снёс бы и чужие
-            // инлайновые значения (в карточке их несколько — отсчёт, отклик на наведение)
+            notification.removeEventListener("animationend", land);
+            // Следы кадра ухода снимаем точечно: `removeAttribute("style")` снёс бы и чужие
+            // инлайновые значения (в карточке их несколько — отсчёт, отклик на наведение).
+            // Вид ухода держит конечное состояние (`fill-mode: both`), а инлайновое имя кадра
+            // перебило бы любой следующий: без этого въезд записи не проигрался бы
             notification.style.removeProperty("animation-name");
+            notification.removeAttribute("data-motion");
             notification.style.removeProperty("transition");
-            notification.style.display = 'flex';
-            notification.style.width = '-webkit-fill-available';
-            notification.style.opacity = "0"
-            notification.style.transform = "translateX(100%)"
             // В ящике карточка — запись истории: полоса отсчёта и закрытие там лишние
             notification.classList.add("notification_in_box");
             const box = requireLayoutNode(LAYOUT_ROLE.NOTIFICATION_BOX_MAIN, notification);
             // Новые записи идут сверху: история читается от свежего к старому, и группы дней
             // (их расставляет NotificationBox) ложатся в том же порядке — «Сегодня» первой.
-            box.prepend(notification)
-            setTimeout(() => {
-                notification.style.opacity = "1"
-                notification.style.transform = "translateX(0)"
-            }, 500)
-        })
+            box.prepend(notification);
+            /*
+             * Запись встаёт на место тем же кадром, каким пришёл тост: она только что уехала вправо,
+             * поэтому и возвращается оттуда. Прежде карточка ставилась инлайновыми `opacity`
+             * и `transform` и ждала 500 мс — и слайд не проигрывался вовсе: вид `exit` держит
+             * `transform` вне переходов (`[data-motion]`), поэтому запись просто вспыхивала
+             * на месте. Кадр ведёт драйвер: время и кривую берёт вид `enter` из токенов темы.
+             */
+            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);
     }
 
-    static STYLE = { ERROR: 'notification_error', SUCCESS: 'notification_success', WARNING: 'notification_warning' }
+    static STYLE = { ERROR: "notification_error", SUCCESS: "notification_success", WARNING: "notification_warning" };
 }
 
-exports.Notification = Notification
+exports.Notification = Notification;

package/framework/components/chui_notification/notification_download.js

@@ -1,92 +1,43 @@
-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 {Icons} = require("../chui_icons/icons");
-// Плашка значка — общая на всё семейство карточек уведомлений
-const {createStatusPlate, setStatusPlate} = require("./status_plate");
+const { optionOr } = require("../../modules/chui_functions");
+const { Icons } = require("../chui_icons/icons");
+// Каркас карточки загрузки — общий с `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;
-        // Пустая заготовка опции равносильна отсутствующей: пустое уведомление не собирается
-        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;
-        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");
     }
 }
 
-exports.DownloadNotification = DownloadNotification
+exports.DownloadNotification = DownloadNotification;

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);
@@ -108,7 +108,8 @@ download_progress_text_block {
     margin: 0 0 4px;
 }
 
-download_progress_text, download_progress_count {
+download_progress_text,
+download_progress_count {
     font-size: var(--font_notification_size);
 }
 
@@ -129,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;
 }
@@ -137,4 +138,4 @@ download_progress_count {
 .download_progress_bar::-webkit-progress-value {
     background: var(--blue_prime_background);
     border-radius: var(--radius_pill);
-}
+}