chuijs 4.0.2 → 4.0.4

package/framework/appLayout/default/global_style.css

@@ -37,7 +37,11 @@
        он дорого (композитинг всего, что под слоем). Насыщенность оставлена: она и даёт
        ощущение стекла, а не серой плёнки. */
     --global_blur: saturate(180%) blur(20px);
+    /* Отступ поверхности (карточка, панель, список): 8px по вертикали, 13px по горизонтали.
+       Значение держит прежнее имя --main_padding, новое --block_padding читает его:
+       чужие стили правят ключ по имени, и переименование не должно их отключать. */
     --main_padding: calc(8px * var(--density)) calc(13px * var(--density));
+    --block_padding: var(--main_padding);
     /* Отступ внутри контрола — 8px по всем сторонам: пара к --control_width.
        Прежнее имя --test_padding оставлено псевдонимом: оно попало в документацию и в
        чужие проекты, поэтому убираем его отдельным шагом, а не молча ломаем вёрстку. */
@@ -46,10 +50,11 @@
 
     /* Компактный шаг контрола — для кнопки и полей ввода. 5px по вертикали дают 29px высоты
        (строка 17 + отступы 10 + 2 черты при `box-sizing: border-box`), то есть тот же шаг,
-       что у кнопок шапки (30px). Общие --main_padding/--control_padding трогать нельзя:
+       что у кнопок шапки (30px). Общие --block_padding/--control_padding трогать нельзя:
        их берут ещё 43 файла поверхностей и списков, где 8px и есть нужная плотность,
        поэтому контролы задают себе компактные значения локально у своего корня. */
     --main_padding_sm: calc(5px * var(--density)) calc(11px * var(--density));
+    --block_padding_sm: var(--main_padding_sm);
     --control_padding_sm: calc(5px * var(--density));
     /* Высота контрола одним числом: её берут те поля, у которых высота не следует
        из содержимого (chips, color_picker, hotkey, masked, date, time) */
@@ -61,17 +66,18 @@
        До неё плееры держали числа у себя (30/36 px у кнопки, 24/30 px у глифов) */
     --player_control_size: calc(32px * var(--density));
     --player_play_size: calc(36px * var(--density));
-    /* Глифы панели: глиф меньше кнопки — кнопка читается площадкой, а не рамкой значка */
+    /* Глифы панели: глиф меньше кнопки — кнопка читается площадкой, а не рамкой значка.
+       Размер берут стили плееров (`font-size` у кнопки), а значок его наследует: одно число
+       на оба плеера. Прежде оно было вписано числом в код (пять мест) */
     --player_icon_size: 18px;
     /* Высота полосы прогресса и дорожки громкости */
     --player_track_height: 4px;
-    --player_row_height: calc(34px * var(--density));
-    /* Ползунок дорожек: белый круг в обеих схемах — он лежит и на акцентной заливке,
-       и на серой дорожке, а цвет подложки на нём пропадал (в тёмной схеме — чёрный блоб) */
-    --player_thumb_background: #ffffff;
     --header_icon_size: 13pt;
     --font_default_size: 14px;
     --font_labels_size: 12px;
+    /* Моно-шрифт: семейство ставит `chui_fonts.installMono()`. Ключ общий, потому что
+       код рисуют несколько компонентов (вставка кода, редакторы, примеры в подписях) */
+    --font_mono: "chui_mono", monospace;
     /* Дубль размера подписи: уведомление читается тем же кеглем. Алиас разрешается
        на `:root`, поэтому локальное переопределение `--font_labels_size` его не меняет */
     --font_notification_size: var(--font_labels_size);
@@ -84,7 +90,10 @@
     --font_lead_size: 18px;
     --font_display_size: 30px;
     --button_text_color: var(--text_color);
+    /* Отступ между блоками. Значение держит прежнее имя --margin, новое --block_margin
+       читает его — по той же причине, что и у отступа поверхности. */
     --margin: calc(6px * var(--density));
+    --block_margin: var(--margin);
     /* Высота шапки: одна точка правды. От неё считаются отступ содержимого, положение
        и отступы выдвижных панелей — раньше то же число было вписано в четырёх местах
        (47px, 46px, 65px), и правка одного значения уводила панели.
@@ -93,31 +102,23 @@
        47px = кнопка 30px + отступы 8px сверху и снизу + черта 1px. */
     --header_height: calc(47px * var(--density));
     /* Вертикальный отступ содержимого полосы: 30px кнопка + 8 сверху и снизу = 46px полосы.
-       Горизонтальные зазоры шапки — общий --margin. */
+       Горизонтальные зазоры шапки — общий --block_margin. */
     --header_margin: calc(8px * var(--density));
 
     /* Скругления: контролы — radius_sm, поверхности — radius_md, капсулы — pill.
        Отдельного «среднего» значения больше нет: 10px рядом с 8 и 12 не читались как
        система, а выглядели как случайный набор. */
-    --border_radius: var(--radius_sm);
     --radius_sm: 8px;
     --radius_md: 12px;
     --radius_pill: 999px;
     --radius_circle: 50%;
+    /* Прежнее имя малого скругления: было --border_radius без шкалы в названии. Внутри
+       стили читают --radius_sm, чужой ключ остаётся псевдонимом и уйдёт отдельным шагом. */
+    --border_radius: var(--radius_sm);
 
     /* Ширина управляющих элементов */
     --control_width: 200px;
 
-    /* Тени: три уровня — контактный (main), всплывающий (drop) и модальный (modal).
-       Форма одна на всю оболочку: два слоя с большим разлётом и малым процентом — тень
-       читается как мягкое затемнение под элементом, а не как обводка. Одиночный слой с
-       малым разлётом читался именно обводкой, а резкие тени (20–40%) — как грязь на карточках.
-       В тёмной схеме та же форма с большими процентами: чёрная тень на почти чёрной
-       подложке иначе не видна (см. main_theme_style.css). */
-    --box_shadow_main: 0 1px 2px rgb(0 0 0 / 4%), 0 3px 10px rgb(0 0 0 / 5%);
-    --box_shadow_drop: 0 2px 6px rgb(0 0 0 / 5%), 0 14px 36px rgb(0 0 0 / 9%);
-    --box_shadow_modal: 0 4px 12px rgb(0 0 0 / 6%), 0 28px 72px rgb(0 0 0 / 14%);
-
     /* Фокус. Кольцо одно на всю оболочку: `--focus_outline` для обычных
        элементов и `--focus_outline_offset_inset` — для тех, кого обрезает
        контейнер (ячейка сетки, журнал чата, строки листа действий). */
@@ -125,11 +126,26 @@
     --focus_outline_offset: 2px;
     --focus_outline_offset_inset: -2px;
 
-    /* Тайминг анимаций */
-    --transition_time: .165s;
-    /* Кривая движения: быстрый старт, мягкое торможение — «выезд» панели читается
-       как отклик, а не как линейный сдвиг. Отскока нет намеренно. */
-    --ease_out: cubic-bezier(.2, .8, .2, 1);
+    /* Движение: три длительности и три кривые — один набор на всё приложение.
+       Длительность выбирается по роли, а не «на глаз»: состояния (наведение, нажатие,
+       фокус) быстрые, появление и перемещение — базовые, крупные поверхности (ящик,
+       шторка, полоса меню) медленные. Уход короче входа: покачивание на выходе задерживало
+       бы следующий экран.
+       Кривые: `--motion_ease` тормозит к покою (вход и перемещение читаются как отклик),
+       `--motion_ease_in_out` — для обратимых ходов (высота раскрытия, уход карточки),
+       `--motion_spring` даёт лёгкий перелёт на отклике (появление меню и диалога).
+       Прежние имена оставлены псевдонимами: они разошлись по стилям и документации. */
+    --motion_fast: 0.15s;
+    --motion_base: 0.25s;
+    --motion_slow: 0.4s;
+    --motion_ease: cubic-bezier(0.32, 0.72, 0, 1);
+    --motion_ease_in_out: cubic-bezier(0.4, 0, 0.2, 1);
+    --motion_spring: cubic-bezier(0.34, 1.4, 0.64, 1);
+    /* Переключатель состояния без движения: у `visibility` время нулевое, а всё движение
+       несёт соседнее свойство — так узел появляется сразу, а исчезает только после ухода */
+    --motion_none: 0s;
+    --transition_time: var(--motion_fast);
+    --ease_out: var(--motion_ease);
 
     /* Схема нативных частей: палитры приложения разложены по prefers-color-scheme,
        поэтому браузер должен рисовать и родные части (каретка, выделение, системные
@@ -149,6 +165,67 @@ html {
     background: var(--main_background);
 }
 
+/* Вложенная поверхность. Контейнерные поверхности носят заливку карточки — и карточка тоже:
+   внутри карточки контейнер сливался с хозяином, и разделяла их только граница (шаг светлоты 0;
+   так в витрине выглядели SidebarNav, List, Toolbar, CodeEditor и остальные). Вложенный
+   контейнер берёт нейтральную заливку: на карточке это шаг светлоты 8.4 в тёмной схеме и 5.6
+   в светлой — не меньше, чем между подложкой и карточкой (7.7 и 4.4), а числа печатает
+   `npm run palette:check`. В обоих списках — контейнерные поверхности: то, что носит заливку
+   карточки и может оказаться внутри другого такого же. Своя заливка у контейнера остаётся:
+   на подложке он читается как карточка, и лишь вложенность опускает его на нейтральную ступень. */
+:is(
+        chui_card,
+        chui_list,
+        chui_sidebar_nav,
+        chui_toolbar,
+        chui_status_bar,
+        chui_shortcut_help,
+        chui_clipboard_history,
+        chui_code_editor,
+        chui_json_viewer,
+        chui_tree_view,
+        chui_gantt,
+        chui_scheduler,
+        chui_splitter,
+        chui_drop_zone,
+        chui_statistic,
+        chui_alert,
+        chui_banner,
+        chui_actions_bar,
+        chui_user_bar,
+        write_bar_row,
+        chui_editor_controls,
+        .chui_code,
+        .settings_section
+    )
+    :is(
+        chui_card,
+        chui_list,
+        chui_sidebar_nav,
+        chui_toolbar,
+        chui_status_bar,
+        chui_shortcut_help,
+        chui_clipboard_history,
+        chui_code_editor,
+        chui_json_viewer,
+        chui_tree_view,
+        chui_gantt,
+        chui_scheduler,
+        chui_splitter,
+        chui_drop_zone,
+        chui_statistic,
+        chui_alert,
+        chui_banner,
+        chui_actions_bar,
+        chui_user_bar,
+        write_bar_row,
+        chui_editor_controls,
+        .chui_code,
+        .settings_section
+    ) {
+    background: var(--element_background);
+}
+
 /* Коробки полей ввода. У внутреннего `input` своей рамки нет, а общее правило фокуса его
    намеренно исключает (`:not(input)` — у полей рисуется системная рамка), поэтому активное
    поле было видно только по карету. Наведение и фокус описаны одним правилом на список
@@ -263,7 +340,7 @@ chui_error_message {
     display: block;
     color: var(--red_prime_background);
     font-size: var(--font_labels_size);
-    margin: var(--margin);
+    margin: var(--block_margin);
 }
 
 /* Активный пункт меню/опции при навигации с клавиатуры — совпадает с :hover.
@@ -279,51 +356,81 @@ chui_error_message {
 }
 
 * {
-    font-family: 'chui_I';
+    font-family: "chui_I";
     font-style: normal;
     user-select: none;
     outline: none;
-    transition: background-color var(--transition_time) ease,
-    color var(--transition_time) ease,
-    border-color var(--transition_time) ease,
-    box-shadow var(--transition_time) ease,
-    opacity var(--transition_time) ease,
-    transform var(--transition_time) ease;
-    animation-duration: var(--transition_time);
+    /* Движение по умолчанию: цвет, тень и яркость — быстрые состояния, прозрачность и
+       перемещение — базовые. Кривая одна (торможение к покою), поэтому один и тот же жест
+       в разных местах читается одинаково, а свои списки ниже только уточняют его */
+    transition:
+        background-color var(--motion_fast) var(--motion_ease),
+        color var(--motion_fast) var(--motion_ease),
+        border-color var(--motion_fast) var(--motion_ease),
+        box-shadow var(--motion_fast) var(--motion_ease),
+        filter var(--motion_fast) var(--motion_ease),
+        opacity var(--motion_base) var(--motion_ease),
+        transform var(--motion_base) var(--motion_ease);
+    animation-duration: var(--motion_base);
     position: relative;
     font-size: var(--font_default_size);
     line-height: normal;
 }
 
 *:before {
-    font-family: 'chui_I';
+    font-family: "chui_I";
     font-style: normal;
     user-select: none;
     outline: none;
-    transition: background-color var(--transition_time) ease,
-    color var(--transition_time) ease,
-    border-color var(--transition_time) ease,
-    box-shadow var(--transition_time) ease,
-    opacity var(--transition_time) ease,
-    transform var(--transition_time) ease;
-    animation-duration: var(--transition_time);
+    transition:
+        background-color var(--motion_fast) var(--motion_ease),
+        color var(--motion_fast) var(--motion_ease),
+        border-color var(--motion_fast) var(--motion_ease),
+        box-shadow var(--motion_fast) var(--motion_ease),
+        filter var(--motion_fast) var(--motion_ease),
+        opacity var(--motion_base) var(--motion_ease),
+        transform var(--motion_base) var(--motion_ease);
+    animation-duration: var(--motion_base);
     position: relative;
     font-size: var(--font_default_size);
     line-height: normal;
 }
 
+/* Смена темы — кроссфейдом: браузер снимает страницу до и после смены и переводит один кадр
+   в другой (ведёт его служба темы, `crossFade` в `chui_animations/motion`). Своим переходом
+   смену схемы не показать: цвет приходит сменой `prefers-color-scheme`, а переходы на такое
+   изменение браузер не запускает (проверено замером — цвет подложки менялся кадром, хотя
+   класс с временем перехода на корне уже стоял). Время и кривая — из токенов движения:
+   смена схемы меняет цвет всего окна сразу, это крупная поверхность. При уменьшенном
+   движении кроссфейд не запускается вовсе — это решает JS. */
+::view-transition-old(root),
+::view-transition-new(root) {
+    animation-duration: var(--motion_slow, 0.4s);
+    animation-timing-function: var(--motion_ease, ease-out);
+}
+
 :root *:focus-visible:not(input):not(textarea):not(select):not([contenteditable="true"]) {
     outline: var(--focus_outline);
     outline-offset: var(--focus_outline_offset);
 }
-
 /* Кольцо изнутри — там, где внешний контур срезает край контейнера с
    `overflow: hidden` или прокруткой: ячейка сетки уезжает под закреплённые
    колонки, журнал чата и строки листа действий лежат в обрезанной коробке.
    Селектор повторяет вес общего правила: `:where` специфичности не добавляет,
    а без повтора исключение проиграло бы — общее правило весит больше любого
    компонентного (0,6,0 против 0,2,0). */
-:root *:focus-visible:not(input):not(textarea):not(select):not([contenteditable="true"]):where(data_grid_cell, chat_log, chat_input, time_option, action_sheet_action, action_sheet_cancel) {
+:root
+    *:focus-visible:not(input):not(textarea):not(select):not([contenteditable="true"]):where(
+        data_grid_cell,
+        chat_log,
+        chat_input,
+        message_bar_feed,
+        user_list_bar_item,
+        chui_user_bar,
+        time_option,
+        action_sheet_action,
+        action_sheet_cancel
+    ) {
     outline-offset: var(--focus_outline_offset_inset);
 }
 
@@ -459,7 +566,7 @@ header {
        логическими свойствами, поэтому в RTL скругление зеркалится; верхние углы прямые —
        их срезал бы композитор. */
     align-items: start;
-    background-color: var(--header_background);
+    background-color: var(--bar_background);
     backdrop-filter: var(--global_blur);
     justify-content: space-between;
     border-bottom: 1px solid var(--border_color);
@@ -523,7 +630,7 @@ notification_panel {
     position: fixed;
     top: calc(var(--header_height) - 1px);
     inset-inline-end: 0;
-    padding: var(--margin);
+    padding: var(--block_margin);
     align-items: flex-end;
     justify-content: flex-start;
     z-index: 1001;
@@ -533,8 +640,10 @@ notification_panel {
        chui_notification/styles.css): у всплывающей тени разлёт больше, и её обрезало бы
        краем панели в серый прямоугольник под карточками. */
     overflow: hidden auto;
-    max-height: calc(100% - var(--header_height) - 18px - (var(--margin) * 2));
-    transition: max-height var(--transition_time) ease-in-out;
+    max-height: calc(100% - var(--header_height) - 18px - (var(--block_margin) * 2));
+    /* Раскрытие панели — обратимый ход по высоте, поэтому базовая длительность и мягкая кривая
+       с обеих сторон, а не быстрая кривая состояний */
+    transition: max-height var(--motion_base) var(--motion_ease_in_out);
 }
 
 app_menu {
@@ -544,10 +653,12 @@ app_menu {
     justify-content: flex-start;
     align-items: flex-start;
     z-index: 1000;
-    margin: calc(var(--header_height) + (var(--margin) * 2)) calc(var(--margin) * 2) calc(var(--margin) * 2) calc(var(--margin) * 2);
+    margin: calc(var(--header_height) + (var(--block_margin) * 2)) calc(var(--block_margin) * 2)
+        calc(var(--block_margin) * 2) calc(var(--block_margin) * 2);
     border-radius: var(--radius_md);
     box-shadow: var(--box_shadow_drop);
-    background: var(--header_background);
+    /* Меню маршрутов — полоса оболочки: заливка — цвет подложки, а не карточки */
+    background: var(--bar_background);
     backdrop-filter: var(--global_blur);
     height: -webkit-fill-available;
     width: -webkit-fill-available;
@@ -562,26 +673,29 @@ notification_box {
     align-items: flex-start;
     height: -webkit-fill-available;
     z-index: 1000;
-    margin: calc(var(--header_height) + (var(--margin) * 2)) calc(var(--margin) * 2) calc(var(--margin) * 2) calc(var(--margin) * 2);
+    margin: calc(var(--header_height) + (var(--block_margin) * 2)) calc(var(--block_margin) * 2)
+        calc(var(--block_margin) * 2) calc(var(--block_margin) * 2);
     border-radius: var(--radius_md);
     box-shadow: var(--box_shadow_drop);
-    background: var(--header_background);
+    /* Ящик уведомлений — тоже полоса оболочки: заливка — цвет подложки */
+    background: var(--bar_background);
     backdrop-filter: var(--global_blur);
     width: -webkit-fill-available;
     border: 1px solid var(--border_color);
 }
 
-/* Панели выезжают сдвигом (transform ставит JS), поэтому движение задано здесь явно и с
-   кривой --ease_out: выезд читается как отклик, а не как линейный сдвиг. Остальные свойства
-   переходят как у всех элементов. */
+/* Панели выезжают сдвигом (transform ставит JS), поэтому движение задано здесь явно и
+   с кривой --motion_ease: выезд читается как отклик, а не как линейный сдвиг. Остальные
+   свойства переходят как у всех элементов, но с быстрой длительностью — это состояния. */
 app_menu,
 notification_box {
-    transition: transform var(--transition_time) var(--ease_out),
-    background-color var(--transition_time) ease,
-    color var(--transition_time) ease,
-    border-color var(--transition_time) ease,
-    box-shadow var(--transition_time) ease,
-    opacity var(--transition_time) ease;
+    transition:
+        transform var(--motion_base) var(--motion_ease),
+        background-color var(--motion_fast) var(--motion_ease),
+        color var(--motion_fast) var(--motion_ease),
+        border-color var(--motion_fast) var(--motion_ease),
+        box-shadow var(--motion_fast) var(--motion_ease),
+        opacity var(--motion_fast) var(--motion_ease);
 }
 
 /* Шапка ящика уведомлений: заголовок со счётчиком истории и действие «Очистить». */
@@ -590,9 +704,10 @@ notification_box_header {
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    gap: var(--margin);
+    gap: var(--block_margin);
     width: -webkit-fill-available;
-    padding-block: 10px 10px; padding-inline: 14px 10px;
+    padding-block: 10px 10px;
+    padding-inline: 14px 10px;
     box-shadow: inset 0 -1px 0 var(--border_color);
 }
 
@@ -687,8 +802,10 @@ route_views > * {
 }
 
 /* Разделитель дней в истории: липнет к верху списка, пока видна его группа, поэтому день
-   остаётся названным и в середине длинной истории. Материал тот же, что у ящика: под
-   подписью проезжают карточки, и без фона текст наложился бы на них. */
+   остаётся названным и в середине длинной истории. Подпись прозрачная полностью — ни заливки,
+   ни размытия: она не рисует полосу поверх списка, а только называет день. Текст — по центру
+   ящика. Из-за этого карточки при прокрутке проходят под подписью: это цена прозрачности,
+   прежде её закрывала заливка материала. */
 notification_group {
     position: sticky;
     top: 0;
@@ -696,11 +813,12 @@ notification_group {
     flex: none;
     width: -webkit-fill-available;
     padding: 8px 6px 6px;
-    background: var(--header_background);
-    backdrop-filter: var(--global_blur);
+    background: transparent;
+    backdrop-filter: none;
     color: var(--text_color_disabled);
     font-size: var(--font_notification_size);
     font-weight: 500;
+    text-align: center;
 }
 
 /* Отметка непрочитанного: точка в углу записи, пока ящик не открывали. Абсолютная, а не
@@ -732,6 +850,35 @@ notification_box_empty {
 
 .notification_box_empty_visible {
     display: flex;
+    /* Подсказка приходит движением: класс включает `display`, поэтому общий кадр
+       появления проигрывается заново, а не вспыхивает после очистки */
+    animation: chui_appear_up var(--motion_base) var(--motion_ease);
+}
+
+/*
+ * Очистка истории. Карточки уходят каскадом: номер в очереди ставит JS
+ * (`--notification_clear_index`), шаг — доля токена движения, поэтому весь список
+ * читается как рассыпающийся, а не выключенный одним щелчком. `forwards` держит
+ * конечное состояние, пока узел ещё в разметке: узел убирают по концу кадра.
+ */
+.notification_clearing {
+    animation: notification_clear var(--motion_fast) var(--motion_ease) forwards;
+    animation-delay: calc(var(--motion_fast) / 4 * var(--notification_clear_index, 0));
+    /* Уезжающая карточка уже не цель: иначе её можно было бы нажать на ходу */
+    pointer-events: none;
+}
+
+@keyframes notification_clear {
+    to {
+        opacity: 0;
+        transform: translateX(100%);
+    }
+}
+
+/* Уход подписи дня: она гаснет вместе с карточками, а не пропадает из-под них */
+.notification_group_leaving {
+    animation: chui_leave_up var(--motion_fast) var(--motion_ease) forwards;
+    pointer-events: none;
 }
 
 /* Кнопки шапки — одна высота и один вертикальный отступ: 30 + 8 + 8 = 46px полосы.
@@ -754,17 +901,16 @@ notification_button {
        высоты) — пилюля наведения казалась узкой. */
     width: 30px;
     border: none;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     padding: 0;
     margin-block: var(--header_margin) var(--header_margin);
     /* Отступ справа такой же, как слева: справа от кнопки уведомлений стоит группа
        кнопок окна с разделительной чертой (см. wc_box), и без своего отступа черта
        прилипала к значку */
-    margin-inline: var(--margin) var(--margin);
+    margin-inline: var(--block_margin) var(--block_margin);
     background: transparent;
     color: var(--text_color);
     -webkit-app-region: no-drag;
-    transition: background-color var(--transition_time) ease, color var(--transition_time) ease;
 }
 
 notification_button:hover {
@@ -772,7 +918,8 @@ notification_button:hover {
 }
 
 notification_button:active {
-    background: var(--element_background_prime); color: var(--text_color_hover);
+    background: var(--element_background_prime);
+    color: var(--text_color_hover);
 }
 
 /* Открытый ящик уведомлений: тонировка акцента, а не ховер и не заливка во весь цвет */
@@ -814,14 +961,13 @@ app_menu_button {
     height: 30px;
     width: 30px;
     border: none;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     padding: 0;
     margin-block: var(--header_margin) var(--header_margin);
-    margin-inline: var(--margin) var(--margin);
+    margin-inline: var(--block_margin) var(--block_margin);
     background: transparent;
     color: var(--text_color);
     -webkit-app-region: no-drag;
-    transition: background-color var(--transition_time) ease, color var(--transition_time) ease;
 }
 
 app_menu_button:hover {
@@ -829,7 +975,8 @@ app_menu_button:hover {
 }
 
 app_menu_button:active {
-    background: var(--element_background_prime); color: var(--text_color_hover);
+    background: var(--element_background_prime);
+    color: var(--text_color_hover);
 }
 
 /* Открытое меню маршрутов: та же тонировка акцента, что и у пунктов внутри */
@@ -904,11 +1051,12 @@ page_name {
     border: none;
     border-radius: var(--radius_pill);
     padding: 0 12px;
-    margin-block: var(--header_margin) var(--header_margin); margin-inline: 0 var(--margin);
+    margin-block: var(--header_margin) var(--header_margin);
+    margin-inline: 0 var(--block_margin);
     font-size: var(--font_default_size);
     font-weight: 500;
     background: var(--element_background_disabled);
-    color: var(--text_color)
+    color: var(--text_color);
 }
 
 /* Пустое название не занимает места: до выбора страницы шапка не должна держать пустую капсулу */
@@ -952,7 +1100,8 @@ route:hover {
 }
 
 route:active {
-    background: var(--element_background_prime); color: var(--text_color_hover);
+    background: var(--element_background_prime);
+    color: var(--text_color_hover);
 }
 
 route_title {
@@ -1034,7 +1183,7 @@ blockquote {
     margin: 1.5em 10px;
     padding: 9px 14px;
     color: var(--text_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     display: flex;
 }
 
@@ -1043,7 +1192,7 @@ header_left_box {
     min-width: 0;
     overflow: hidden;
     width: -webkit-fill-available;
-    align-items: center
+    align-items: center;
 }
 
 header_right_box {
@@ -1070,9 +1219,10 @@ user_button {
     width: max-content;
     border: none;
     color: var(--text_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     padding: 5px 13px;
-    margin-block: var(--header_margin) var(--header_margin); margin-inline: var(--margin) 0;
+    margin-block: var(--header_margin) var(--header_margin);
+    margin-inline: var(--block_margin) 0;
     font-size: var(--font_default_size);
     background: transparent;
     font-weight: 500;
@@ -1087,7 +1237,8 @@ user_button:hover {
 }
 
 user_button:active {
-    background: var(--element_background_prime); color: var(--text_color_hover);
+    background: var(--element_background_prime);
+    color: var(--text_color_hover);
 }
 
 /* Открытое меню: тонировка акцента — та же, что у открытых кнопок шапки.
@@ -1114,7 +1265,7 @@ user_dropdown {
     z-index: 1002;
     flex-direction: column;
     min-width: 165px;
-    padding: var(--margin);
+    padding: var(--block_margin);
     background: var(--header_background);
     color: var(--text_color);
     border: 1px solid var(--border_color);
@@ -1125,7 +1276,7 @@ user_dropdown {
 }
 
 /* Пункт — плоская строка в стиле context_menu_item / пункта меню-бара: синяя заливка
-   ховера одна на всю семью меню, а размеры строки берутся из --main_padding. */
+   ховера одна на всю семью меню, а размеры строки берутся из --block_padding. */
 user_dropdown user_item {
     color: var(--text_color);
     display: flex;
@@ -1135,8 +1286,8 @@ user_dropdown user_item {
     cursor: pointer;
     text-align: start;
     width: -webkit-fill-available;
-    padding: var(--main_padding);
-    border-radius: var(--border_radius)
+    padding: var(--block_padding);
+    border-radius: var(--radius_sm);
 }
 
 user_dropdown user_item:hover {
@@ -1170,7 +1321,7 @@ user_dd_image_main {
     align-items: center;
     justify-content: center;
     flex-wrap: nowrap;
-    margin-bottom: 6px
+    margin-bottom: 6px;
 }
 
 /* chUiJS_HeaderButton */
@@ -1181,9 +1332,10 @@ header_button {
     height: calc(30px * var(--density));
     width: max-content;
     border: none;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     padding: 5px 13px;
-    margin-block: var(--header_margin) var(--header_margin); margin-inline: var(--margin) 0;
+    margin-block: var(--header_margin) var(--header_margin);
+    margin-inline: var(--block_margin) 0;
     font-size: var(--font_default_size);
     background: transparent;
     color: var(--text_color);
@@ -1192,7 +1344,6 @@ header_button {
     flex-direction: row;
     align-items: center;
     -webkit-app-region: no-drag;
-    transition: background-color var(--transition_time) ease, color var(--transition_time) ease;
 }
 
 header_button header_button_title {
@@ -1210,7 +1361,8 @@ header_button:hover {
 }
 
 header_button:active {
-    background: var(--element_background_prime); color: var(--text_color_hover);
+    background: var(--element_background_prime);
+    color: var(--text_color_hover);
 }
 
 /*Управление окном — те же кнопки-иконки, что и остальные в шапке, но приглушённые:
@@ -1243,7 +1395,9 @@ wc_box:not(:first-child) {
     box-shadow: inset 1px 0 0 var(--border_color);
 }
 
-wc_close, wc_maximize, wc_minimize {
+wc_close,
+wc_maximize,
+wc_minimize {
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -1255,7 +1409,6 @@ wc_close, wc_maximize, wc_minimize {
     border-radius: var(--radius_sm);
     background: transparent;
     color: var(--text_color_disabled);
-    transition: background-color var(--transition_time) ease, color var(--transition_time) ease;
 }
 
 /* Значки кнопок окна нарисованы линиями (SVG), а не взяты из шрифта иконок: три системные
@@ -1273,12 +1426,15 @@ wc_minimize svg {
     color: var(--text_color_disabled);
 }
 
-wc_maximize:hover, wc_minimize:hover {
+wc_maximize:hover,
+wc_minimize:hover {
     background: var(--element_background_hover);
 }
 
-wc_maximize:active, wc_minimize:active {
-    background: var(--element_background_prime); color: var(--text_color_hover);
+wc_maximize:active,
+wc_minimize:active {
+    background: var(--element_background_prime);
+    color: var(--text_color_hover);
 }
 
 wc_maximize:hover svg,
@@ -1303,7 +1459,9 @@ wc_close:active svg {
     color: var(--text_color);
 }
 
-wc_close:focus-visible, wc_maximize:focus-visible, wc_minimize:focus-visible {
+wc_close:focus-visible,
+wc_maximize:focus-visible,
+wc_minimize:focus-visible {
     outline: var(--focus_outline);
     outline-offset: var(--focus_outline_offset);
 }
@@ -1333,4 +1491,37 @@ header_tabs {
 
 .header_tab_active header_button_icon chui_icon {
     color: var(--link_color);
-}
+}
+
+/* ── Появление строки в списке ─────────────────────────────── */
+/* Списки, которые наполняются по одной (журнал, чат, буфер обмена, лента), читаются
+   растущим документом, если строка встаёт на место, а не возникает рывком. Кадр общий:
+   одно движение на все списки, а время и кривая — из токенов движения */
+@keyframes chui_appear_up {
+    from {
+        opacity: 0;
+        transform: translateY(6px);
+    }
+}
+
+/* Уход строки или слоя: гаснет и сходит вверх. Пара к `chui_appear_up`: узел убирается
+   по концу кадра, а `forwards` держит конечное состояние, пока он ещё в документе */
+@keyframes chui_leave_up {
+    to {
+        opacity: 0;
+        transform: translateY(-6px);
+    }
+}
+
+/* ── Появление всплывающей панели у триггера ───────────────── */
+/* Выпадающий список, меню и поповер читаются раскрывшимися у своего триггера, если панель
+   приходит сверху вниз и чуть вырастает. Прежний `fade-in` менял только прозрачность —
+   открытие получалось рывком.
+   Конечное состояние не объявлено: панель возвращается к своим стилям, и вычисленный
+   `transform` на ней не остаётся (иначе панель стала бы содержащим блоком для детей). */
+@keyframes chui_panel_in {
+    from {
+        opacity: 0;
+        transform: translateY(-4px) scale(0.97);
+    }
+}