chuijs 4.0.2 → 4.0.4

package/framework/components/chui_graphs/styles.css

@@ -2,8 +2,8 @@ canvas {
     background: var(--element_background_2);
     height: max-content;
     width: max-content;
-    border-radius: var(--border_radius);
-    margin: var(--margin);
+    border-radius: var(--radius_sm);
+    margin: var(--block_margin);
 }
 
 /* Курсор «можно нажать» ставит компонент классом, когда вешает обработчик указателя:
@@ -19,6 +19,27 @@ chui_bar_graph {
     flex-wrap: wrap;
 }
 
+/* Построение графика читается появлением: полотно встаёт на место, а не вспыхивает.
+   Рост столбцов и прорисовку линии кадром не задать — их рисует канвас по данным,
+   для этого кадр должен считаться в самом рисовании (следующий шаг для графиков) */
+chui_bar_graph,
+chui_line_graph,
+chui_piechart,
+chui_scatter_graph,
+chui_gauge {
+    animation: chui_appear_up var(--motion_base) var(--motion_ease);
+}
+
+/* Подсказка графика: появляется и гаснет движения — иначе она перескакивала бы с
+   одного столбца на другой рывком (кадр ухода общий, время — быстрое) */
+chui_chart_tooltip {
+    animation: chui_appear_up var(--motion_fast) var(--motion_ease);
+}
+
+.chui_chart_tooltip_leaving {
+    animation: chui_leave_up var(--motion_fast) var(--motion_ease) forwards;
+}
+
 /* Обёртка линейного графика и графика с заливкой */
 chui_line_graph {
     position: relative;
@@ -33,7 +54,7 @@ chui_chart_tooltip {
     z-index: 2;
     transform: translate(-50%, -130%);
     padding: var(--control_padding);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--header_background);
     backdrop-filter: var(--global_blur);
     color: var(--text_color);
@@ -65,13 +86,13 @@ legend_color {
     width: 20px;
     height: 20px;
     flex-shrink: 0;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
 }
 
 legend_label {
     color: var(--text_color);
     font-weight: 400;
-    margin: var(--margin);
+    margin: var(--block_margin);
 }
 
 /* Обёртка диаграммы рассеяния: канвас, легенда серий и скрытая таблица данных */
@@ -140,4 +161,4 @@ chui_heatmap_graph {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-}
+}

package/framework/components/chui_hero/hero.js

@@ -1,48 +1,81 @@
-const {Icon} = require("../chui_icons/icons");
-const {optionOr} = require("../../modules/chui_functions");
+const { Icon } = require("../chui_icons/icons");
+const { optionOr } = require("../../modules/chui_functions");
+const { animate, tokenTime } = require("../../modules/chui_animations/motion");
 
+/**
+ * Шапка страницы: значок, заголовок, описание и строка статистики.
+ *
+ * Подложка — нейтральная заливка с свечением акцентов, сверху акцентная линия, а знак
+ * залит градиентом двух акцентов палитры: цвет не заведён мимо таблицы, поэтому обе схемы
+ * работают сами. Плитки статистики берут акценты по кругу (`STAT_ACCENTS`) — ряд читается
+ * цветным без настройки каждой плитки; цвет идёт заливкой, рамкой и полосой, а число —
+ * цветом темы, иначе акцентный текст на тинте дал бы контраст ниже 3.
+ *
+ * Движение — по системе движения: шапка приходит кадром появления, линия сверху
+ * прочерчивается, знак встаёт с перелётом и выпускает кольцо, заголовок → описание → плитки
+ * идут по очереди, полосы плиток растут, числа догоняют значения, а замыкает блик по подложке.
+ * Все кадры одиночные: у шапки нет задачи ждать — непрерывное движение в ней было бы
+ * обещанием процесса, которого нет. При уменьшенном движении всё сжимается общим правилом темы.
+ */
 class Hero {
-    #chui_hero = document.createElement("chui_hero");
+    /** Акценты плиток по кругу: порядок задаёт сам компонент, а не вызывающий код */
+    static STAT_ACCENTS = ["blue", "purple", "green", "orange"];
+
+    #chuiHero = document.createElement("chui_hero");
     #head;
     #badge;
     #titles;
     #title;
     #description;
     #stats;
-    constructor(options = {
-        id: String(),
-        title: String(),
-        description: String(),
-        icon: String(),
-        stats: [],
-        style: String(),
-        width: String(),
-        height: String()
-    }) {
-        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", 'chUiJS_Hero');
-        if (options.id !== undefined) this.#chui_hero.id = options.id;
+    constructor(
+        options = {
+            id: String(),
+            title: String(),
+            description: String(),
+            icon: String(),
+            stats: [],
+            style: String(),
+            width: String(),
+            height: String(),
+        }
+    ) {
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Hero");
+        if (options.id !== undefined) this.#chuiHero.id = options.id;
         const style = optionOr(options.style, undefined);
-        if (style !== undefined) this.#chui_hero.classList.add(style);
-        if (options.width !== undefined) this.#chui_hero.style.width = options.width;
-        if (options.height !== undefined) this.#chui_hero.style.height = options.height;
+        if (style !== undefined) this.#chuiHero.classList.add(style);
+        if (options.width !== undefined) this.#chuiHero.style.width = options.width;
+        if (options.height !== undefined) this.#chuiHero.style.height = options.height;
         if (options.icon !== undefined) this.setIcon(options.icon);
         if (options.title !== undefined) this.setTitle(options.title);
         if (options.description !== undefined) this.setDescription(options.description);
-        if (options.stats !== undefined) for (let stat of options.stats) this.addStat(stat.value, stat.label);
+        if (options.stats !== undefined) for (const stat of options.stats) this.addStat(stat.value, stat.label);
     }
     // GET
-    getId() { return this.#chui_hero.id; }
-    getTitle() { return this.#title === undefined ? "" : this.#title.innerText; }
-    getDescription() { return this.#description === undefined ? "" : this.#description.innerText; }
+    getId() {
+        return this.#chuiHero.id;
+    }
+    getTitle() {
+        return this.#title === undefined ? "" : this.#title.innerText;
+    }
+    getDescription() {
+        return this.#description === undefined ? "" : this.#description.innerText;
+    }
     // SET
-    setId(id = String()) { this.#chui_hero.id = id; }
+    setId(id = String()) {
+        this.#chuiHero.id = id;
+    }
     // Пустая строка — «не задана»: `classList.add("")` бросает исключение
     setStyle(style = String()) {
         const known = optionOr(style, undefined);
-        if (known !== undefined) this.#chui_hero.classList.add(known);
+        if (known !== undefined) this.#chuiHero.classList.add(known);
+    }
+    setWidth(width = String()) {
+        this.#chuiHero.style.width = width;
+    }
+    setHeight(height = String()) {
+        this.#chuiHero.style.height = height;
     }
-    setWidth(width = String()) { this.#chui_hero.style.width = width; }
-    setHeight(height = String()) { this.#chui_hero.style.height = height; }
     setIcon(icon = String()) {
         if (this.#badge === undefined) {
             this.#badge = document.createElement("hero_badge");
@@ -66,20 +99,46 @@ class Hero {
     }
     // FUNCTIONS
     addStat(value = String(), label = String()) {
-        let stat = document.createElement("hero_stat");
-        let stat_value = document.createElement("hero_stat_value");
-        let stat_label = document.createElement("hero_stat_label");
-        stat_value.innerText = value;
-        stat_label.innerText = label;
-        stat.append(stat_value, stat_label);
+        const stat = document.createElement("hero_stat");
+        const statValue = document.createElement("hero_stat_value");
+        const statLabel = document.createElement("hero_stat_label");
+        // Акцент — по числу уже стоящих плиток: ряд разукрашивается сам, без настройки.
+        // Тот же номер даёт ступеньку задержки в CSS (`--hero_stat_index`)
+        const index = this.#statsNode().children.length;
+        stat.dataset.accent = Hero.STAT_ACCENTS[index % Hero.STAT_ACCENTS.length];
+        stat.style.setProperty("--hero_stat_index", String(index));
+        statValue.innerText = value;
+        statLabel.innerText = label;
+        stat.append(statValue, statLabel);
         this.#statsNode().appendChild(stat);
+        this.#countUp(statValue, value, index);
+    }
+
+    /**
+     * Число догоняет значение. Шаг считает общий движок движения (`animate` в
+     * `chui_animations/motion`), поэтому время — токен темы, а при уменьшенном движении значение
+     * встаёт сразу. Плитка появляется со ступенькой, и счёт начинается той же ступенькой,
+     * иначе число менялось бы в уже стоящей плитке. Значение, которое не разбирается как число
+     * («12 %», «1,2 тыс.» или текст), остаётся как есть.
+     */
+    #countUp(node, value, index) {
+        const normalized = String(value).trim().replace(/\s/g, "").replace(",", ".");
+        const target = Number(normalized);
+        if (normalized === "" || Number.isFinite(target) === false) return;
+        // Знаков после запятой столько же, сколько в значении: целое не показываем с десятыми
+        const decimals = normalized.includes(".") ? normalized.split(".")[1].length : 0;
+        const frame = (growth) => (node.innerText = (target * growth).toFixed(decimals));
+        node.innerText = (0).toFixed(decimals);
+        setTimeout(() => animate(frame), tokenTime("--motion_base") + tokenTime("--motion_fast") * index);
+    }
+    clearStats() {
+        this.#statsNode().innerHTML = "";
     }
-    clearStats() { this.#statsNode().innerHTML = ""; }
     // Шапка и статистика создаются при первом обращении, шапка всегда стоит выше
     #headNode() {
         if (this.#head === undefined) {
             this.#head = document.createElement("hero_head");
-            this.#chui_hero.prepend(this.#head);
+            this.#chuiHero.prepend(this.#head);
         }
         return this.#head;
     }
@@ -93,12 +152,14 @@ class Hero {
     #statsNode() {
         if (this.#stats === undefined) {
             this.#stats = document.createElement("hero_stats");
-            this.#chui_hero.appendChild(this.#stats);
+            this.#chuiHero.appendChild(this.#stats);
         }
         return this.#stats;
     }
     // RENDER
-    set() { return this.#chui_hero; }
+    set() {
+        return this.#chuiHero;
+    }
 }
 
-exports.Hero = Hero
+exports.Hero = Hero;

package/framework/components/chui_hero/styles.css

@@ -1,17 +1,94 @@
+/* Шапка страницы: значок, заголовок, описание и строка статистики.
+   Украшение — из акцентов палитры, смешанных с нейтральной заливкой и рамкой
+   (`color-mix` над токенами), поэтому мимо таблицы цвет не заведён и обе схемы работают
+   сами. Движение — по системе движения: шапка приходит кадром появления из
+   `global_style.css`, знак и плитки встают со ступенькой задержки, а по подложке один
+   раз проходит блик. Непрерывных кадров нет намеренно: шапка — не индикатор ожидания,
+   а неподвижная поверхность, по которой не должно бегать движение. */
 chui_hero {
+    position: relative;
     display: flex;
     flex-direction: column;
     gap: 16px;
     box-sizing: border-box;
     width: -webkit-fill-available;
     padding: 20px 22px;
+    /* Блик проходит по подложке и уходит за край — его и обрезает коробка */
+    overflow: hidden;
     border: 1px solid var(--border_color);
     border-radius: var(--radius_md);
-    background: var(--element_background);
+    /* Свечение акцентов лежит на нейтральной заливке: она читается и на карточке,
+       и на подложке (вложенная поверхность), а свечение даёт цвет там, где его не хватает */
+    background:
+        radial-gradient(
+            120% 100% at 100% 0%,
+            color-mix(in srgb, var(--blue_prime_background) 18%, transparent),
+            transparent 62%
+        ),
+        radial-gradient(
+            100% 90% at 0% 100%,
+            color-mix(in srgb, var(--teal_prime_background) 16%, transparent),
+            transparent 66%
+        ),
+        var(--element_background);
     box-shadow: var(--box_shadow_main);
     font-size: var(--font_default_size);
     color: var(--text_color);
     text-align: start;
+    animation: chui_appear_up var(--motion_base) var(--motion_ease) both;
+}
+
+/* Акцентная линия сверху: три акцента палитры одним градиентом — синий, циан, мята.
+   Без неё шапка читалась бы обычной карточкой. Линия не появляется готовой, а прочерчивается
+   слева направо: это первый кадр шапки, и он задаёт направление всему появлению */
+chui_hero::before {
+    content: "";
+    position: absolute;
+    inset-inline: 0;
+    top: 0;
+    height: 3px;
+    background: linear-gradient(
+        90deg,
+        var(--blue_prime_background),
+        var(--cyan_prime_background) 55%,
+        var(--mint_prime_background)
+    );
+    transform-origin: left center;
+    animation: hero_line_in var(--motion_slow) var(--motion_ease) both;
+}
+
+@keyframes hero_line_in {
+    from {
+        transform: scaleX(0);
+    }
+    to {
+        transform: scaleX(1);
+    }
+}
+
+/* Блик: один раз проходит по подложке и уходит за край. Цвет берётся из текста темы —
+   белая полоса на светлой схеме не видна вовсе */
+chui_hero::after {
+    content: "";
+    position: absolute;
+    top: -20%;
+    bottom: -20%;
+    width: 42%;
+    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text_color) 7%, transparent), transparent);
+    transform: translateX(-140%) skewX(-14deg);
+    pointer-events: none;
+    /* `both` держит конечное положение — блик остаётся за краем, а не возвращается назад.
+   Идёт последним: подложка к этому времени уже собралась, и блик не спорит с появлением */
+    animation: hero_shine var(--motion_slow) var(--motion_ease) calc(var(--motion_fast) * 2) both;
+}
+
+@keyframes hero_shine {
+    from {
+        transform: translateX(-140%) skewX(-14deg);
+    }
+    to {
+        transform: translateX(240%) skewX(-14deg);
+    }
 }
 
 chui_hero hero_head {
@@ -28,8 +105,46 @@ chui_hero hero_badge {
     width: 54px;
     height: 54px;
     border-radius: var(--radius_md);
-    background: var(--blue_prime_background);
-    box-shadow: var(--box_shadow_main);
+    /* Знак — единственная заливка во весь цвет: он и держит акцент, когда текст
+       читается цветом темы */
+    background: linear-gradient(135deg, var(--blue_prime_background), var(--indigo_prime_background));
+    box-shadow: 0 6px 18px color-mix(in srgb, var(--blue_prime_background) 35%, transparent);
+    animation: hero_badge_in var(--motion_base) var(--motion_spring) both;
+}
+
+/* Знак встаёт с лёгким перелётом и поворотом: он приходит первым в шапке */
+@keyframes hero_badge_in {
+    from {
+        opacity: 0;
+        transform: scale(0.82) rotate(-8deg);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) rotate(0deg);
+    }
+}
+
+/* Отклик знака: от него один раз расходится кольцо — знак «встал на место».
+   Не по кругу: шапка — не индикатор ожидания, и непрерывного движения в ней быть не должно */
+chui_hero hero_badge::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border: 2px solid var(--blue_prime_background);
+    border-radius: var(--radius_md);
+    pointer-events: none;
+    animation: hero_badge_ring var(--motion_slow) var(--motion_ease) var(--motion_fast) both;
+}
+
+@keyframes hero_badge_ring {
+    from {
+        opacity: 0.45;
+        transform: scale(0.86);
+    }
+    to {
+        opacity: 0;
+        transform: scale(1.5);
+    }
 }
 
 chui_hero hero_badge chui_icon {
@@ -51,7 +166,12 @@ chui_hero hero_title {
     font-size: var(--font_title_size);
     font-weight: 600;
     letter-spacing: -0.02em;
+    /* Заголовок переносится по смыслу, а не по длине строки */
+    text-wrap: balance;
     color: var(--text_color);
+    /* Ступенька: линия — знак — заголовок и дальше. Шаг — доля токена движения,
+       а не своё число */
+    animation: chui_appear_up var(--motion_base) var(--motion_ease) calc(var(--motion_fast) / 2) both;
 }
 
 chui_hero hero_description {
@@ -63,6 +183,7 @@ chui_hero hero_description {
     /* Описание героя — обычный текст (было 13px, размера вне шкалы) */
     font-size: var(--font_default_size);
     color: var(--text_color_disabled);
+    animation: chui_appear_up var(--motion_base) var(--motion_ease) var(--motion_fast) both;
 }
 
 chui_hero hero_stats {
@@ -71,21 +192,69 @@ chui_hero hero_stats {
     gap: 10px;
 }
 
+/* Плитка статистики. Свой акцент задаёт `data-accent` (его ставит компонент, ведя список
+   по кругу): цвет идёт заливкой, рамкой и полосой, а число читается цветом темы —
+   акцентный текст на тинте дал бы контраст ниже 3 даже для крупной строки */
 chui_hero hero_stat {
+    --hero_accent: var(--blue_prime_background);
+    position: relative;
     display: flex;
     flex-direction: column;
     gap: 1px;
     min-width: 104px;
-    padding: 8px 14px;
-    border: 1px solid var(--border_color);
+    padding: 8px 14px 8px 18px;
+    border: 1px solid color-mix(in srgb, var(--hero_accent) 34%, var(--border_color));
     border-radius: var(--radius_md);
-    background: var(--element_background_2);
+    background: color-mix(in srgb, var(--hero_accent) 12%, var(--element_background_2));
+    /* Плитки встают по очереди: номер ставит компонент переменной `--hero_stat_index`,
+       а ступенька считается от той же задержки, что у описания, поэтому порядок
+       появления один: линия, знак, заголовок, описание, плитки, блик */
+    animation: chui_appear_up var(--motion_base) var(--motion_ease) both;
+    animation-delay: calc(var(--motion_base) + var(--motion_fast) * var(--hero_stat_index, 0));
+}
+
+/* Акцентная полоса слева: даже когда плиток много, их ряд читается цветным.
+   Она прочерчивается сверху вниз вместе с приходом своей плитки */
+chui_hero hero_stat::before {
+    content: "";
+    position: absolute;
+    inset-block: 8px;
+    inset-inline-start: 8px;
+    width: 3px;
+    border-radius: var(--radius_pill);
+    background: var(--hero_accent);
+    transform-origin: top center;
+    animation: hero_stat_bar_in var(--motion_base) var(--motion_ease) both;
+    animation-delay: calc(var(--motion_base) + var(--motion_fast) * var(--hero_stat_index, 0));
+}
+
+@keyframes hero_stat_bar_in {
+    from {
+        transform: scaleY(0);
+    }
+    to {
+        transform: scaleY(1);
+    }
+}
+
+chui_hero hero_stat[data-accent="purple"] {
+    --hero_accent: var(--purple_prime_background);
+}
+
+chui_hero hero_stat[data-accent="green"] {
+    --hero_accent: var(--green_prime_background);
+}
+
+chui_hero hero_stat[data-accent="orange"] {
+    --hero_accent: var(--orange_prime_background);
 }
 
 chui_hero hero_stat_value {
     font-size: var(--font_lead_size);
     font-weight: 600;
-    color: var(--blue_prime_background);
+    /* Числа не "плывут" при смене значения: ширины цифр равны */
+    font-variant-numeric: tabular-nums;
+    color: var(--text_color);
 }
 
 chui_hero hero_stat_label {

package/framework/components/chui_html_block/html_block.js

@@ -1,17 +1,17 @@
 class HtmlBlock {
-    #id = require("randomstring").generate()
-    #html_block = document.createElement('chui_html_block')
+    #id = require("randomstring").generate();
+    #htmlBlock = document.createElement("chui_html_block");
     constructor(width = String()) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_HtmlBlock');
-        this.#html_block.setAttribute('id', this.#id)
-        this.#html_block.style.width = width;
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_HtmlBlock");
+        this.#htmlBlock.setAttribute("id", this.#id);
+        this.#htmlBlock.style.width = width;
     }
     setHtml(html) {
-        this.#html_block.innerHTML = html;
+        this.#htmlBlock.innerHTML = html;
     }
     set() {
-        return this.#html_block
+        return this.#htmlBlock;
     }
 }
 
-exports.HtmlBlock = HtmlBlock
+exports.HtmlBlock = HtmlBlock;

package/framework/components/chui_html_block/styles.css

@@ -1,6 +1,6 @@
 chui_html_block {
     display: block;
     color: var(--text_color);
-    margin: var(--margin);
-    height: max-content
-}
+    margin: var(--block_margin);
+    height: max-content;
+}

package/framework/components/chui_hx/hx.js

@@ -1,8 +1,8 @@
 class H {
     #h = undefined;
     constructor(num = Number(), text = String()) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_HX');
-        this.#h = document.createElement(`h${H.#level(num)}`)
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_HX");
+        this.#h = document.createElement(`h${H.#level(num)}`);
         this.#h.innerText = text === undefined || text === null ? "" : String(text);
     }
     /** Уровень заголовка: целое 1…6, иначе — понятная ошибка вместо несуществующего тега `h0`.
@@ -27,4 +27,4 @@ class H {
     }
 }
 
-exports.H = H
+exports.H = H;

package/framework/components/chui_hx/styles.css

@@ -1,20 +1,27 @@
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     height: max-content;
     /* Ширина по контейнеру: с max-content длинный заголовок не переносился,
-       а с margin: var(--margin) уезжал вправо за край родителя */
+       а с margin: var(--block_margin) уезжал вправо за край родителя */
     width: -webkit-fill-available;
     /* Слово шире строки разрывается, а не вылезает за заголовок */
     overflow-wrap: break-word;
     color: var(--text_color);
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-weight: 500;
 }
 
-h1, h2 {
+h1,
+h2 {
     padding: 12px 6px;
 }
 
-h3, h4 {
+h3,
+h4 {
     padding: 10px 6px;
 }
 
@@ -40,4 +47,4 @@ h4 {
 
 h5 {
     font-size: 1.2rem;
-}
+}