chuijs 4.0.3 → 4.0.4

package/framework/components/chui_graphs/graphs.js

@@ -1,19 +1,21 @@
 const { Notification } = require("../chui_notification/notification");
 const { setStyles, optionOr } = require("../../modules/chui_functions");
 const { I18n } = require("../../modules/chui_i18n/chui_i18n");
+const { animate } = require("../../modules/chui_animations/motion");
+const { paletteColor } = require("../../modules/chui_palette/palette");
 
 const STYLES_ID = "chUiJS_Canvas";
-const AXIS_COLOR = "#8e8e93";
+const AXIS_COLOR = paletteColor("gray");
 const LABEL_FONT = "bold 14px Arial";
 const Y_AXIS_STEPS = 4;
 const PLOT_HEIGHT = 240;
 const CATEGORY_WIDTH = 150;
 const BAR_WIDTH = 75;
-const BAR_FALLBACK_COLOR = "#1676f3";
+const BAR_FALLBACK_COLOR = paletteColor("blue");
 const PADDING = { top: 20, right: 20, bottom: 50, left: 50 };
 const PIE_SIZE = 400;
-const GRID_COLOR = "rgba(142, 142, 147, 0.25)";
-const LINE_FALLBACK_COLOR = "#1676f3";
+const GRID_COLOR = paletteColor("gray", { alpha: 0.25 });
+const LINE_FALLBACK_COLOR = paletteColor("blue");
 const LINE_POINT_RADIUS = 4;
 const POINT_HOVER_DISTANCE = 30;
 const SCATTER_PLOT_WIDTH = 460;
@@ -24,9 +26,9 @@ const GAUGE_THICKNESS = 20;
 const GAUGE_START_ANGLE = 135;
 const GAUGE_SWEEP = 270;
 const GAUGE_TICKS = 6;
-const GAUGE_FALLBACK_COLOR = "#1676f3";
-const GAUGE_TRACK_COLOR = "rgba(142, 142, 147, 0.25)";
-const GAUGE_THRESHOLD_COLORS = ["#34c759", "#ff9f0a", "#ff3b30"];
+const GAUGE_FALLBACK_COLOR = paletteColor("blue");
+const GAUGE_TRACK_COLOR = paletteColor("gray", { alpha: 0.25 });
+const GAUGE_THRESHOLD_COLORS = [paletteColor("green"), paletteColor("orange"), paletteColor("red")];
 const SPARKLINE_WIDTH = 160;
 const SPARKLINE_HEIGHT = 40;
 const SPARKLINE_INSET = 3;
@@ -42,7 +44,7 @@ const HEATMAP_GAP = 4;
 const HEATMAP_LABEL_WIDTH = 70;
 const HEATMAP_LABEL_HEIGHT = 24;
 const HEATMAP_PADDING = 10;
-const HEATMAP_EMPTY_COLOR = "rgba(142, 142, 147, 0.18)";
+const HEATMAP_EMPTY_COLOR = paletteColor("gray", { alpha: 0.18 });
 // Самая бледная клетка с данными: пустая заливка остаётся светлее
 const HEATMAP_ALPHA_MIN = 0.2;
 
@@ -139,16 +141,31 @@ function createTooltip(container) {
         element: tooltip,
         show(text, x, y) {
             tooltip.innerText = text;
+            // Незавершённый уход отменяется: подсказка снова на месте
+            tooltip.classList.remove("chui_chart_tooltip_leaving");
             tooltip.style.display = "block";
             tooltip.style.left = Math.round(x) + "px";
             tooltip.style.top = Math.round(y) + "px";
         },
         hide() {
-            tooltip.style.display = "none";
+            // Уход — движением: подсказка гаснет, а узел прячется по концу кадра
+            if (getComputedStyle(tooltip).display === "none") return;
+            if (tooltip.classList.contains("chui_chart_tooltip_leaving")) return;
+            tooltip.classList.add("chui_chart_tooltip_leaving");
+            const done = (event) => {
+                if (event.target !== tooltip) return;
+                tooltip.removeEventListener("animationend", done);
+                // Показ за время ухода — узел остаётся на месте
+                if (tooltip.classList.contains("chui_chart_tooltip_leaving") === false) return;
+                tooltip.classList.remove("chui_chart_tooltip_leaving");
+                tooltip.style.display = "none";
+            };
+            tooltip.addEventListener("animationend", done);
         },
     };
 }
 
+/** Уменьшенное движение: диаграмма строится сразу, без роста */
 class BarGraph {
     #canvas = document.createElement("canvas");
     #main = document.createElement("chui_bar_graph");
@@ -162,13 +179,13 @@ class BarGraph {
         this.#options = options;
         this.#main.appendChild(this.#canvas);
         this.#tooltip = createTooltip(this.#main);
-        this.#draw();
+        animate((growth) => this.#draw(growth));
         this.#bindPointer();
         // Доступная альтернатива канвасу: та же таблица данных рядом с графиком
         this.#main.appendChild(buildDataTable(this.#options.data || {}));
     }
 
-    #draw() {
+    #draw(growth = 1) {
         const data = this.#options.data || {};
         const colors = this.#options.colors || [];
         const labels = Object.keys(data);
@@ -181,10 +198,10 @@ class BarGraph {
         const ctx = prepareCanvas(this.#canvas, cssWidth, cssHeight);
 
         drawAxesGrid(ctx, plotWidth, scale);
-        this.#drawBars(ctx, labels, values, scale, colors);
+        this.#drawBars(ctx, labels, values, scale, colors, growth);
     }
 
-    #drawBars(ctx, labels, values, scale, colors) {
+    #drawBars(ctx, labels, values, scale, colors, growth = 1) {
         const bottomY = PADDING.top + PLOT_HEIGHT;
         this.#bars = [];
         ctx.textAlign = "center";
@@ -192,7 +209,7 @@ class BarGraph {
         for (let i = 0; i < labels.length; i++) {
             // Отрицательное значение — это ноль на оси, которая начинается с нуля:
             // иначе столбец уходил бы вниз, на подписи категорий (как у RadarGraph и HeatmapGraph)
-            const barHeight = Math.max(0, (values[i] / scale.max) * PLOT_HEIGHT);
+            const barHeight = Math.max(0, (values[i] / scale.max) * PLOT_HEIGHT * growth);
             const x = PADDING.left + i * CATEGORY_WIDTH + (CATEGORY_WIDTH - BAR_WIDTH) / 2;
             const bar = { index: i, x: x, y: bottomY - barHeight, w: BAR_WIDTH, h: barHeight };
             this.#bars.push(bar);
@@ -282,7 +299,7 @@ class BarGraph {
         const rect = this.#canvas.getBoundingClientRect();
         const x = event.clientX - rect.left;
         const y = event.clientY - rect.top;
-        for (let bar of this.#bars) {
+        for (const bar of this.#bars) {
             if (x >= bar.x && x <= bar.x + bar.w && y >= bar.y && y <= bar.y + bar.h) return bar;
         }
         return null;
@@ -294,24 +311,28 @@ class BarGraph {
 }
 
 class PieGraph {
-    #chui_piechart = document.createElement("chui_piechart");
+    #chuiPiechart = document.createElement("chui_piechart");
     #canvas = document.createElement("canvas");
     #options = undefined;
 
     constructor(options = {}) {
         setStyles(__dirname + "/styles.css", STYLES_ID);
         this.#options = options;
-        const ctx = prepareCanvas(this.#canvas, PIE_SIZE, PIE_SIZE);
-        this.#drawSlices(ctx);
+        animate((growth) => this.#draw(growth));
         this.#canvas.setAttribute("role", "img");
         this.#canvas.setAttribute("aria-label", describeData(I18n.t("graphics.pieChart"), options.data || {}));
-        this.#chui_piechart.appendChild(this.#canvas);
-        if (options.legend) this.#chui_piechart.appendChild(this.#buildLegend());
+        this.#chuiPiechart.appendChild(this.#canvas);
+        if (options.legend) this.#chuiPiechart.appendChild(this.#buildLegend());
         // Доступная альтернатива канвасу: та же таблица данных рядом с графиком
-        this.#chui_piechart.appendChild(buildDataTable(options.data || {}));
+        this.#chuiPiechart.appendChild(buildDataTable(options.data || {}));
+    }
+
+    #draw(growth = 1) {
+        const ctx = prepareCanvas(this.#canvas, PIE_SIZE, PIE_SIZE);
+        this.#drawSlices(ctx, growth);
     }
 
-    #drawSlices(ctx) {
+    #drawSlices(ctx, growth = 1) {
         const data = this.#options.data || {};
         const colors = this.#options.colors || [];
         const labels = Object.keys(data);
@@ -322,12 +343,17 @@ class PieGraph {
         if (total <= 0) return;
 
         const center = PIE_SIZE / 2;
+        // Построение: секторы прочерчиваются по кругу. Подписи процентов встают на место,
+        // когда круг замкнулся, — иначе они ехали бы вслед за незакрытым сектором
+        const limit = 2 * Math.PI * growth;
         let startAngle = 0;
         for (let i = 0; i < labels.length; i++) {
             const value = values[i];
-            const sliceAngle = (2 * Math.PI * value) / total;
+            const remainder = limit - startAngle;
+            if (remainder <= 0) break;
+            const sliceAngle = Math.min((2 * Math.PI * value) / total, remainder);
             drawPieSlice(ctx, center, center, center, startAngle, startAngle + sliceAngle, colors[i % colors.length]);
-            this.#drawPercentage(ctx, center, startAngle, sliceAngle, value, total);
+            if (growth >= 1) this.#drawPercentage(ctx, center, startAngle, sliceAngle, value, total);
             startAngle += sliceAngle;
         }
         this.#drawDoughnutHole(ctx, center);
@@ -368,7 +394,7 @@ class PieGraph {
     }
 
     set() {
-        return this.#chui_piechart;
+        return this.#chuiPiechart;
     }
 }
 
@@ -385,7 +411,7 @@ class LineGraph {
         this.#options = options;
         this.#main.appendChild(this.#canvas);
         this.#tooltip = createTooltip(this.#main);
-        this.#draw();
+        animate((growth) => this.#draw(growth));
         this.#bindPointer();
         // Доступная альтернатива канвасу
         this.#main.appendChild(buildDataTable(options.data || {}));
@@ -395,7 +421,7 @@ class LineGraph {
         return (this.#options.colors || [])[0] || LINE_FALLBACK_COLOR;
     }
 
-    #draw() {
+    #draw(growth = 1) {
         const data = this.#options.data || {};
         const labels = Object.keys(data);
         const values = labels.map((label) => Number(data[label]) || 0);
@@ -416,6 +442,11 @@ class LineGraph {
         }));
 
         // Заливка под линией (AreaGraph): градиент только для hex-цветов
+        // Построение: линия прочерчивается слева направо — поле приоткрывается по мере роста
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(0, 0, PADDING.left + plotWidth * growth, cssHeight);
+        ctx.clip();
         if (this.#options.area === true && this.#points.length > 0) {
             ctx.fillStyle = this.#color;
             if (this.#color.startsWith("#")) {
@@ -461,6 +492,7 @@ class LineGraph {
             ctx.textBaseline = "top";
             ctx.fillText(labels[point.index], point.x, bottomY + 10);
         }
+        ctx.restore();
     }
 
     #bindPointer() {
@@ -603,7 +635,7 @@ class ScatterGraph {
         this.#series = ScatterGraph.#normalize(options.series, options.colors);
         this.#main.appendChild(this.#canvas);
         this.#tooltip = createTooltip(this.#main);
-        this.#draw();
+        animate((growth) => this.#draw(growth));
         // Легенда нужна только когда серий больше одной: у одной подпись есть в подсказке
         if (options.legend !== false && this.#series.length > 1) {
             this.#main.appendChild(
@@ -669,7 +701,7 @@ class ScatterGraph {
         return rows;
     }
 
-    #draw() {
+    #draw(growth = 1) {
         const points = this.#series.reduce((list, serie) => list.concat(serie.points), []);
         const xs = points.map((point) => point.x);
         const ys = points.map((point) => point.y);
@@ -784,7 +816,8 @@ class ScatterGraph {
                 });
                 ctx.fillStyle = serie.color;
                 ctx.beginPath();
-                ctx.arc(x, y, SCATTER_POINT_RADIUS, 0, 2 * Math.PI);
+                // Точки растут из нуля: появление серии читается, как её набор
+                ctx.arc(x, y, Math.max(0.5, SCATTER_POINT_RADIUS * growth), 0, 2 * Math.PI);
                 ctx.fill();
                 if (index === this.#active) {
                     ctx.strokeStyle = serie.color;
@@ -922,7 +955,7 @@ class Gauge {
 
     #root = document.createElement("chui_gauge");
     #canvas = document.createElement("canvas");
-    #value_text = document.createElement("gauge_value");
+    #valueText = document.createElement("gauge_value");
     #status = document.createElement("chui_gauge_status");
     #id = undefined;
     #value = 0;
@@ -931,10 +964,10 @@ class Gauge {
     #unit = "";
     #label = I18n.t("graphics.gauge");
     #format = undefined;
-    #show_value = true;
+    #showValue = true;
     #size = GAUGE_SIZE;
     #thickness = GAUGE_THICKNESS;
-    #start_angle = GAUGE_START_ANGLE;
+    #startAngle = GAUGE_START_ANGLE;
     #sweep = GAUGE_SWEEP;
     #ticks = GAUGE_TICKS;
     #color = undefined;
@@ -947,13 +980,13 @@ class Gauge {
         this.#root.id = this.#id;
         this.#root.setAttribute("role", "meter");
         this.#canvas.setAttribute("aria-hidden", "true");
-        this.#value_text.className = "gauge_value";
-        this.#value_text.setAttribute("aria-hidden", "true");
+        this.#valueText.className = "gauge_value";
+        this.#valueText.setAttribute("aria-hidden", "true");
         this.#status.className = "gauge_status chui_visually_hidden";
         this.#status.setAttribute("role", "status");
         this.#status.setAttribute("aria-live", "polite");
         this.#root.appendChild(this.#canvas);
-        this.#root.appendChild(this.#value_text);
+        this.#root.appendChild(this.#valueText);
         this.#root.appendChild(this.#status);
         if (options.min !== undefined) this.#min = Number(options.min) || 0;
         if (options.max !== undefined) this.#max = Number(options.max) || 0;
@@ -961,18 +994,20 @@ class Gauge {
         if (options.unit !== undefined) this.#unit = String(options.unit);
         if (options.size !== undefined) this.#size = Number(options.size) || GAUGE_SIZE;
         if (options.thickness !== undefined) this.#thickness = Number(options.thickness) || GAUGE_THICKNESS;
-        if (options.startAngle !== undefined) this.#start_angle = Number(options.startAngle) || 0;
+        if (options.startAngle !== undefined) this.#startAngle = Number(options.startAngle) || 0;
         if (options.sweep !== undefined) this.#sweep = Number(options.sweep) || GAUGE_SWEEP;
         if (options.ticks !== undefined) this.#ticks = Math.max(1, Number(options.ticks) || GAUGE_TICKS);
         if (options.color !== undefined) this.#color = String(options.color);
         this.#format = options.format;
-        this.#show_value = options.showValue !== false;
+        this.#showValue = options.showValue !== false;
         this.setLabel(optionOr(options.label, I18n.t("graphics.gauge")));
         if (options.thresholds !== undefined)
             this.#thresholds = Gauge.#normalizeThresholds(options.thresholds, this.#max);
         // Значение ставим последним: оно уже знает про min/max и пороги
         this.#value = this.#min;
         this.setValue(options.value === undefined ? this.#min : options.value, true);
+        // Построение: дуга идёт от начала шкалы к значению
+        animate((growth) => this.#render(growth));
     }
 
     // GET
@@ -1031,7 +1066,7 @@ class Gauge {
     }
 
     isValueVisible() {
-        return this.#show_value;
+        return this.#showValue;
     }
 
     // SET
@@ -1101,7 +1136,7 @@ class Gauge {
 
     /** Показывать ли значение в центре шкалы */
     setShowValue(visible = Boolean()) {
-        this.#show_value = visible === true;
+        this.#showValue = visible === true;
         return this.#render();
     }
 
@@ -1143,10 +1178,11 @@ class Gauge {
         return this.#color === undefined ? GAUGE_FALLBACK_COLOR : this.#color;
     }
 
-    #render() {
-        const start = (this.#start_angle * Math.PI) / 180;
-        const end = ((this.#start_angle + this.#sweep) * Math.PI) / 180;
-        const ratio = Math.max(0, Math.min(1, this.getRatio()));
+    #render(growth = 1) {
+        const start = (this.#startAngle * Math.PI) / 180;
+        const end = ((this.#startAngle + this.#sweep) * Math.PI) / 180;
+        // Рост — только у построения: смена значения и настроек рисуется полной дугой
+        const ratio = Math.max(0, Math.min(1, this.getRatio())) * growth;
         const color = this.#zoneColor();
         // Размер шкалы виден и подписи значения: её кегль считается от него в CSS
         this.#root.style.setProperty("--gauge_size", `${this.#size}px`);
@@ -1207,8 +1243,8 @@ class Gauge {
         ctx.arc(center, center, 5, 0, 2 * Math.PI);
         ctx.fill();
 
-        this.#value_text.hidden = !this.#show_value;
-        this.#value_text.innerText = this.#show_value ? this.getValueText() : "";
+        this.#valueText.hidden = !this.#showValue;
+        this.#valueText.innerText = this.#showValue ? this.getValueText() : "";
         this.#root.setAttribute("aria-valuemin", String(this.#min));
         this.#root.setAttribute("aria-valuemax", String(this.#max));
         this.#root.setAttribute("aria-valuenow", String(this.#value));

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);
 }
 
 /* Обёртка диаграммы рассеяния: канвас, легенда серий и скрытая таблица данных */

package/framework/components/chui_hero/hero.js

@@ -1,8 +1,27 @@
 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;
@@ -22,19 +41,19 @@ class Hero {
         }
     ) {
         require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Hero");
-        if (options.id !== undefined) this.#chui_hero.id = options.id;
+        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;
+        return this.#chuiHero.id;
     }
     getTitle() {
         return this.#title === undefined ? "" : this.#title.innerText;
@@ -44,18 +63,18 @@ class Hero {
     }
     // SET
     setId(id = String()) {
-        this.#chui_hero.id = id;
+        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.#chui_hero.style.width = width;
+        this.#chuiHero.style.width = width;
     }
     setHeight(height = String()) {
-        this.#chui_hero.style.height = height;
+        this.#chuiHero.style.height = height;
     }
     setIcon(icon = String()) {
         if (this.#badge === undefined) {
@@ -80,13 +99,37 @@ 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 = "";
@@ -95,7 +138,7 @@ class Hero {
     #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;
     }
@@ -109,13 +152,13 @@ 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;
+        return this.#chuiHero;
     }
 }