chuijs 4.0.3 → 4.0.4

package/framework/components/chui_message_bar/styles.css

@@ -0,0 +1,248 @@
+/* ── MessageBar — лента сообщений ───────────────────────────── */
+chui_message_bar {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: -webkit-fill-available;
+    height: max-content;
+    margin: var(--block_margin);
+    overflow: hidden;
+    border-radius: var(--radius_sm);
+    background: var(--element_background);
+    border: 1px solid var(--border_color);
+    font-size: var(--font_default_size);
+    color: var(--text_color);
+}
+
+/* Лента и кнопка «Новые сообщения» живут в одной коробке: кнопка лежит поверх нижнего края,
+   а не под лентой, — поэтому она и попадает в поле зрения, и не отнимает высоту у сообщений */
+message_bar_view {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: var(--message_bar_height, 320px);
+    min-height: 0;
+}
+
+/* Лента прокручивается сама: страница под ней не растёт. Сообщения лежат отдельным слоем —
+   за его размером следит `ResizeObserver`, чтобы лента осталась у нижнего края, когда стили
+   доехали, окно изменило ширину или догрузилась картинка */
+message_bar_feed {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    box-sizing: border-box;
+    padding: var(--control_padding);
+    overflow-y: auto;
+    overflow-x: hidden;
+    background: var(--element_background_2);
+    /* Кольцо фокуса рисует общее правило темы, а смещает его внутрь общий список
+       обрезанных коробок (`message_bar_feed` рядом с `chat_log` в global_style.css):
+       лента лежит в коробке с `overflow: hidden`, внешний контур срезался бы */
+}
+
+message_bar_content {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    gap: 6px;
+    min-height: 0;
+}
+
+message_bar_empty {
+    margin: auto;
+    padding: var(--control_padding);
+    color: var(--text_color_disabled);
+    font-size: var(--font_labels_size);
+    text-align: center;
+}
+
+message_bar_empty[hidden] {
+    display: none;
+}
+
+/* Кнопка «Новые сообщения»/«К низу»: показ и уборка идут переходом, поэтому кнопка
+   не мигает и в скрытом состоянии не перехватывает щелчки (видимость снимается целиком) */
+.message_bar_jump {
+    position: absolute;
+    inset-block-end: var(--control_padding);
+    inset-inline-start: 50%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+    box-sizing: border-box;
+    padding: 4px var(--control_padding);
+    border: none;
+    border-radius: var(--radius_pill);
+    background: var(--blue_prime_background);
+    color: var(--text_color_hover);
+    font-family: inherit;
+    font-size: var(--font_labels_size);
+    font-weight: 500;
+    cursor: pointer;
+    box-shadow: var(--box_shadow_main);
+    visibility: hidden;
+    opacity: 0;
+    transform: translateX(-50%) translateY(4px);
+    transition:
+        opacity var(--motion_fast) var(--motion_ease),
+        transform var(--motion_fast) var(--motion_ease),
+        visibility var(--motion_fast);
+}
+
+.message_bar_jump[data-visible="true"] {
+    visibility: visible;
+    opacity: 1;
+    transform: translateX(-50%);
+}
+
+.message_bar_jump:hover {
+    background: var(--blue_prime_background_tint_strong);
+}
+
+.message_bar_jump_icon {
+    display: flex;
+    align-items: center;
+}
+
+.message_bar_jump chui_icon {
+    color: inherit;
+}
+
+/* Разделитель дня: подпись-пилюля по центру ленты */
+message_bar_day {
+    display: flex;
+    justify-content: center;
+    padding: 2px 0;
+}
+
+message_bar_day_label {
+    padding: 2px var(--control_padding);
+    border-radius: var(--radius_sm);
+    background: var(--element_background);
+    border: 1px solid var(--border_color);
+    color: var(--text_color_disabled);
+    font-size: var(--font_labels_size);
+}
+
+/* Группа сообщений одного автора одного дня: аватар и стопка пузырей */
+message_bar_group {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    gap: 8px;
+}
+
+message_bar_group[data-own="true"] {
+    flex-direction: row-reverse;
+}
+
+message_bar_bubbles {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    max-width: 78%;
+    min-width: 0;
+}
+
+message_bar_bubble {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 8px 10px;
+    border-radius: var(--radius_sm);
+    background: var(--element_background);
+    border: 1px solid var(--border_color);
+    color: var(--text_color);
+    /* Новое сообщение встаёт на место: кадр общий — см. `chui_appear_up` в global_style.css */
+    animation: chui_appear_up var(--motion_base) var(--motion_ease);
+}
+
+/* Хвостик стопки: у последнего пузыря угол со стороны автора скруглён меньше — по нему
+   видно, где стопка кончается */
+message_bar_bubble[data-last="true"][data-own="false"] {
+    border-end-start-radius: calc(var(--radius_sm) / 2);
+}
+
+message_bar_bubble[data-last="true"][data-own="true"] {
+    border-end-end-radius: calc(var(--radius_sm) / 2);
+}
+
+/* Свои сообщения — акцентом и справа */
+message_bar_bubble[data-own="true"] {
+    background: var(--blue_prime_background);
+    border-color: var(--blue_prime_background);
+    color: var(--text_color_hover);
+}
+
+message_bar_author {
+    display: block;
+    font-size: var(--font_labels_size);
+    font-weight: 600;
+    color: var(--blue_prime_background);
+}
+
+message_bar_text {
+    display: block;
+    white-space: pre-wrap;
+    word-break: break-word;
+    line-height: 1.35;
+}
+
+message_bar_attachment {
+    display: block;
+    margin-block-start: 2px;
+    font-size: var(--font_labels_size);
+    text-decoration: underline;
+}
+
+message_bar_attachment a {
+    color: inherit;
+}
+
+message_bar_meta {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+    align-self: flex-end;
+    color: var(--text_color_disabled);
+    font-size: var(--font_labels_size);
+}
+
+message_bar_bubble[data-own="true"] message_bar_meta {
+    color: var(--text_color_hover_disabled);
+}
+
+message_bar_status {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+message_bar_status chui_icon {
+    color: inherit;
+    font-size: var(--font_labels_size);
+}
+
+message_bar_status[data-status="failed"] {
+    color: var(--red_prime_background);
+}
+
+/* Строка «печатает…»: на контейнерной ступени под лентой, как у чата */
+message_bar_typing {
+    padding: var(--control_padding) var(--block_padding);
+    color: var(--text_color_disabled);
+    font-size: var(--font_labels_size);
+    animation: chui_appear_up var(--motion_base) var(--motion_ease);
+}
+
+.message_bar_typing_leaving {
+    animation: chui_leave_up var(--motion_fast) var(--motion_ease) forwards;
+}
+
+message_bar_typing[hidden] {
+    display: none;
+}

package/framework/components/chui_modal/modal.js

@@ -14,7 +14,9 @@ class Dialog {
     #footer = document.createElement("dialog_footer");
     //
     #a11y = undefined;
-    #outside_click_bound = false;
+    #outsideClickBound = false;
+    // Место, откуда слой открыли: туда он вернётся после ухода
+    #origin = undefined;
     isOpen = false;
 
     constructor(
@@ -44,26 +46,43 @@ class Dialog {
 
         if (options.closeOutSideClick) {
             this.#dialog.addEventListener("animationend", (evt) => {
-                if (evt.animationName === "fade-in" && !this.#outside_click_bound) {
-                    this.#outside_click_bound = true;
+                if (evt.animationName === "fade-in" && !this.#outsideClickBound) {
+                    this.#outsideClickBound = true;
                     window.addEventListener("click", this.#closeOutsideEvent);
                 }
             });
         }
+        // Слой возвращается на место после ухода и снимает занавес из документа
+        this.#dialog.addEventListener("animationend", this.#returnHome);
         //ADDS
         this.#dialog.appendChild(this.#body);
     }
 
     #closeOutsideEvent = (event) => {
         if (!this.#dialog.contains(event.target)) {
-            if (this.#outside_click_bound) {
-                this.#outside_click_bound = false;
+            if (this.#outsideClickBound) {
+                this.#outsideClickBound = false;
                 window.removeEventListener("click", this.#closeOutsideEvent);
             }
             this.close();
         }
     };
 
+    /**
+     * Уход доигран: диалог возвращается туда, откуда открывался, а занавес убирается из
+     * документа — закрытому слою в body делать нечего (карточку, из которой его открыли,
+     * могли уже снести), при следующем открытии занавес встанет заново.
+     * Слушатель висит постоянно: вход (`fade-in`) и чужие кадры внутри диалога пропускаем.
+     */
+    #returnHome = (event) => {
+        if (event.target !== this.#dialog || event.animationName !== "fade-out" || this.isOpen) return;
+        this.#scrim.remove();
+        const origin = this.#origin;
+        if (origin === undefined || origin === null || origin === document.body) return;
+        if (origin.isConnected === false) return;
+        origin.appendChild(this.#dialog);
+    };
+
     #resizeEvent = () => {
         if (!document.contains(this.#dialog)) return;
         this.#setCenter(this.#dialog, window);
@@ -71,28 +90,28 @@ class Dialog {
 
     addToHeader(...components) {
         this.#dialog.insertBefore(this.#header, this.#body);
-        for (let component of components) this.#header.appendChild(component.set());
+        for (const component of components) this.#header.appendChild(component.set());
     }
 
     addToBody(...components) {
-        for (let component of components) this.#body.appendChild(component.set());
+        for (const component of components) this.#body.appendChild(component.set());
     }
 
     addToFooter(...components) {
         this.#dialog.appendChild(this.#footer);
-        for (let component of components) this.#footer.appendChild(component.set());
+        for (const component of components) this.#footer.appendChild(component.set());
     }
 
     removeFromHeader(...components) {
-        for (let component of components) new Animation(component.set()).fadeOutAndRemove();
+        for (const component of components) new Animation(component.set()).fadeOutAndRemove();
     }
 
     removeFromBody(...components) {
-        for (let component of components) new Animation(component.set()).fadeOutAndRemove();
+        for (const component of components) new Animation(component.set()).fadeOutAndRemove();
     }
 
     removeFromFooter(...components) {
-        for (let component of components) new Animation(component.set()).fadeOutAndRemove();
+        for (const component of components) new Animation(component.set()).fadeOutAndRemove();
     }
 
     open() {
@@ -108,6 +127,11 @@ class Dialog {
         // }
 
         window.addEventListener("resize", this.#resizeEvent);
+        // Слой встаёт в body — рядом с занавесом и шапкой окна: у обоих `backdrop-filter` и
+        // `z-index`, а внутри карточки Chromium собирает такой слой отдельной поверхностью и
+        // рисует её под слоями из body — занавес закрывал диалог целиком
+        this.#origin = this.#dialog.parentElement;
+        if (this.#dialog.parentElement !== document.body) document.body.appendChild(this.#dialog);
         // Занавес нужен только открытому слою
         if (document.body.contains(this.#scrim) === false) document.body.appendChild(this.#scrim);
         new Animation(this.#dialog).fadeIn();
@@ -132,8 +156,8 @@ class Dialog {
     }
 
     close() {
-        if (this.#outside_click_bound) {
-            this.#outside_click_bound = false;
+        if (this.#outsideClickBound) {
+            this.#outsideClickBound = false;
             window.removeEventListener("click", this.#closeOutsideEvent);
         }
         window.removeEventListener("resize", this.#resizeEvent);

package/framework/components/chui_notification/notification.js

@@ -33,14 +33,14 @@ 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;
@@ -60,29 +60,29 @@ class Notification {
         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();
         // Ключ дня для группировки истории в ящике: подпись группы («Сегодня», «Вчера»,
         // дата) считает ящик, карточке достаточно самого ключа. Записи приходят
         // непрочитанными — ящик снимает отметку, когда его открыли.
@@ -96,32 +96,32 @@ class Notification {
         this.#notification.setAttribute("role", style === Notification.STYLE.ERROR ? "alert" : "status");
         // Иконка состояния — украшение: стиль читается и по тексту уведомления.
         // Цвет и глиф плашки выбирает общий помощник семейства — по ключу стиля
-        this.#notification_icon.setAttribute("aria-hidden", "true");
+        this.#notificationIcon.setAttribute("aria-hidden", "true");
         setStatusPlate(
-            this.#notification_icon,
+            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());
@@ -147,8 +147,8 @@ class Notification {
         if (showOnSystem)
             require("electron").ipcRenderer.send(
                 "show_system_notification",
-                this.#notification_title.innerText,
-                this.#notification_text.innerText
+                this.#notificationTitle.innerText,
+                this.#notificationText.innerText
             );
         return this;
     }
@@ -160,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;
     }
 
@@ -182,7 +182,7 @@ class Notification {
         this.#dismissed = true;
         this.#clearTimer();
         // Полоса отсчёта больше не нужна: её animationend мог бы прилететь во время ухода
-        this.#notification_progress.remove();
+        this.#notificationProgress.remove();
         this.#removeNotification(this.#notification);
         return this;
     }
@@ -192,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;
     }
 
@@ -204,29 +204,51 @@ 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);
-        });
+            /*
+             * Запись встаёт на место тем же кадром, каким пришёл тост: она только что уехала вправо,
+             * поэтому и возвращается оттуда. Прежде карточка ставилась инлайновыми `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" };