chuijs 4.0.1 → 4.0.3

package/framework/components/chui_data_grid/styles.css

@@ -14,7 +14,8 @@ chui_data_grid {
        серого: так полоса шапки читается, но не превращается в яркую ленту */
     --data_grid_surface: color-mix(in srgb, var(--element_background) 60%, transparent);
     --data_grid_body: linear-gradient(var(--data_grid_surface), var(--data_grid_surface)), var(--element_background_2);
-    --data_grid_head: linear-gradient(var(--element_background), var(--element_background)),
+    --data_grid_head:
+        linear-gradient(var(--element_background), var(--element_background)),
         linear-gradient(var(--data_grid_surface), var(--data_grid_surface)), var(--element_background_2);
     /* Выделение — мягкая тонировка акцента: плотный токен (0.26 в тёмной схеме) читался
        тяжёлым синим блоком во всю строку */
@@ -56,7 +57,8 @@ data_grid_error {
     box-sizing: border-box;
     width: 100%;
     margin-bottom: 6px;
-    padding-block: 6px 6px; padding-inline: 12px 12px;
+    padding-block: 6px 6px;
+    padding-inline: 12px 12px;
     border: 1px solid var(--badge_error_back);
     border-radius: var(--border_radius);
     background: var(--element_background_2);
@@ -106,15 +108,14 @@ data_grid_cell.data_grid_cell_pinned_last {
 /* Наведение на строку: у закреплённой ячейки свой непрозрачный фон, поэтому заливку
    строки она перекрывает — плотность поднимаем её же слоями */
 chui_data_grid data_grid_body data_grid_row:hover data_grid_cell.data_grid_cell_pinned {
-    background: linear-gradient(var(--element_background_hover), var(--element_background_hover)),
-        var(--data_grid_body);
+    background:
+        linear-gradient(var(--element_background_hover), var(--element_background_hover)), var(--data_grid_body);
 }
 
 chui_data_grid data_grid_row[aria-selected="true"] data_grid_cell.data_grid_cell_pinned {
     /* Тонировка выделения поверх непрозрачной поверхности — закреплённая ячейка и в выделенной
        строке не просвечивает прокрученным содержимым */
-    background: linear-gradient(var(--data_grid_selection), var(--data_grid_selection)),
-        var(--data_grid_body);
+    background: linear-gradient(var(--data_grid_selection), var(--data_grid_selection)), var(--data_grid_body);
 }
 
 /* Полоса выделения — на первой ячейке: закреплённая ячейка перекрывает фон строки,
@@ -422,7 +423,8 @@ data_grid_cell.data_grid_cell_editing {
     /* Отступ снимаем: у своих редакторов-компонентов он свой (`margin: var(--margin)`),
        и поле съезжало в ячейке */
     margin: 0;
-    padding-block: 0 0; padding-inline: 8px 8px;
+    padding-block: 0 0;
+    padding-inline: 8px 8px;
     border: 1px solid var(--blue_prime_background);
     border-radius: var(--border_radius);
     /* Приподнятая непрозрачная поверхность — та же, что у полей фреймворка: непрозрачная,
@@ -467,7 +469,7 @@ data_grid_row:has(data_grid_cell.data_grid_cell_editing) {
 }
 
 /* Крутилка числа — системная: значение правят клавишами, поэтому вид у поля свой */
-input[type=number].data_grid_editor::-webkit-inner-spin-button {
+input[type="number"].data_grid_editor::-webkit-inner-spin-button {
     -webkit-appearance: none;
 }
 

package/framework/components/chui_descriptions/descriptions.js

@@ -1,5 +1,5 @@
-const {setStyles, optionOr} = require('../../modules/chui_functions');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Список свойств: пары «подпись — значение» одной таблицей — для панели свойств, карточки
@@ -34,11 +34,11 @@ const {I18n} = require('../../modules/chui_i18n/chui_i18n');
 class Descriptions {
     static LAYOUT = {
         HORIZONTAL: "horizontal",
-        VERTICAL: "vertical"
+        VERTICAL: "vertical",
     };
     static SIZE = {
         DEFAULT: "default",
-        SMALL: "small"
+        SMALL: "small",
     };
     static #counter = 0;
     static #MAX_COLUMNS = 4;
@@ -52,11 +52,18 @@ class Descriptions {
     #columns = 1;
     #bordered = false;
 
-    constructor(options = {
-        id: String(), title: String(), items: [],
-        columns: Number(), bordered: Boolean(),
-        layout: String(), size: String(), label: String()
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            title: String(),
+            items: [],
+            columns: Number(),
+            bordered: Boolean(),
+            layout: String(),
+            size: String(),
+            label: String(),
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Descriptions");
         Descriptions.#counter += 1;
         this.#id = optionOr(options.id, `chui_descriptions_${Descriptions.#counter}`);
@@ -93,7 +100,7 @@ class Descriptions {
         return this.#entries.map((entry) => ({
             label: entry.label,
             value: entry.value,
-            span: Math.min(entry.span, this.#columns)
+            span: Math.min(entry.span, this.#columns),
         }));
     }
 
@@ -149,14 +156,16 @@ class Descriptions {
 
     /** Раскладка пары: подпись слева от значения или над ним */
     setLayout(layout = String()) {
-        const known = layout === Descriptions.LAYOUT.VERTICAL ? Descriptions.LAYOUT.VERTICAL : Descriptions.LAYOUT.HORIZONTAL;
+        const known =
+            layout === Descriptions.LAYOUT.VERTICAL ? Descriptions.LAYOUT.VERTICAL : Descriptions.LAYOUT.HORIZONTAL;
         this.#root.dataset.layout = known;
         return this;
     }
 
     /** Размер строк: `Descriptions.SIZE.{DEFAULT, SMALL}` */
     setSize(size = String()) {
-        this.#root.dataset.size = size === Descriptions.SIZE.SMALL ? Descriptions.SIZE.SMALL : Descriptions.SIZE.DEFAULT;
+        this.#root.dataset.size =
+            size === Descriptions.SIZE.SMALL ? Descriptions.SIZE.SMALL : Descriptions.SIZE.DEFAULT;
         return this;
     }
 
@@ -197,10 +206,18 @@ class Descriptions {
     #push(item = undefined) {
         if (item === undefined || item === null) return;
         const label = item.label === undefined ? "" : String(item.label);
-        const span = Number.isFinite(Number(item.span)) && Math.floor(Number(item.span)) >= 1
-            ? Math.floor(Number(item.span))
-            : 1;
-        this.#entries.push({label: label, value: item.value, span: span, node: undefined, term: undefined, value_node: undefined});
+        const span =
+            Number.isFinite(Number(item.span)) && Math.floor(Number(item.span)) >= 1
+                ? Math.floor(Number(item.span))
+                : 1;
+        this.#entries.push({
+            label: label,
+            value: item.value,
+            span: span,
+            node: undefined,
+            term: undefined,
+            value_node: undefined,
+        });
     }
 
     #render() {
@@ -250,4 +267,4 @@ class Descriptions {
     }
 }
 
-exports.Descriptions = Descriptions
+exports.Descriptions = Descriptions;

package/framework/components/chui_details/details.js

@@ -1,6 +1,6 @@
-const {Icon, Icons} = require("../chui_icons/icons");
+const { Icon, Icons } = require("../chui_icons/icons");
 
-const {makeKeyboardButton} = require("../../modules/chui_a11y/chui_a11y");
+const { makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
 
 /** Идентификаторы для aria-controls у раскрывающихся панелей */
 let disclosure_panel_counter = 0;
@@ -9,23 +9,29 @@ class Details {
     #name = require("randomstring").generate();
     #chui_details = document.createElement(`chui_details`);
     //
-    #ab = document.createElement('details_button')
-    #bt = document.createElement('details_button_text')
-    #barrow = document.createElement('details_button_arrow')
+    #ab = document.createElement("details_button");
+    #bt = document.createElement("details_button_text");
+    #barrow = document.createElement("details_button_arrow");
     //
-    #ap = document.createElement('details_panel')
-    #html = document.createElement('details_panel_html')
+    #ap = document.createElement("details_panel");
+    #html = document.createElement("details_panel_html");
     #direction;
     #wrap;
     #align;
     #justify;
     #width;
-    constructor(options = {
-        title: String(), contenteditable: Boolean(),
-        direction: String(), wrap: String(), align: String(),
-        justify: String(), width: String()
-    }) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Details');
+    constructor(
+        options = {
+            title: String(),
+            contenteditable: Boolean(),
+            direction: String(),
+            wrap: String(),
+            align: String(),
+            justify: String(),
+            width: String(),
+        }
+    ) {
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Details");
         this.#direction = options.direction;
         this.#wrap = options.wrap;
         this.#align = options.align;
@@ -33,7 +39,7 @@ class Details {
         this.#width = options.width;
         // Заготовка опции (`Boolean()`) равносильна незаданной: без проверки в разметке оставался
         // `contenteditable="undefined"` — посторонний атрибут на каждой панели
-        if (options.contenteditable !== undefined) this.#html.setAttribute('contenteditable', options.contenteditable);
+        if (options.contenteditable !== undefined) this.#html.setAttribute("contenteditable", options.contenteditable);
 
         if (this.#direction !== undefined) this.#html.style.flexDirection = this.#direction;
         if (this.#wrap !== undefined) this.#html.style.flexWrap = this.#wrap;
@@ -46,23 +52,23 @@ class Details {
             this.#html.style.width = this.#width;
         }
 
-        this.#ab.setAttribute('name', this.#name)
+        this.#ab.setAttribute("name", this.#name);
         // Пустая заготовка (`title: String()` в описании опций) — это «заголовка нет»,
         // а не текст «undefined» в кнопке раскрытия
         this.#bt.innerText = options.title === undefined || options.title === null ? "" : String(options.title);
         this.#barrow.innerHTML = new Icon(Icons.HARDWARE.KEYBOARD_ARROW_DOWN).getHTML();
-        this.#ab.appendChild(this.#bt)
-        this.#ab.appendChild(this.#barrow)
-        this.#ap.appendChild(this.#html)
-        this.#chui_details.appendChild(this.#ab)
-        this.#chui_details.appendChild(this.#ap)
+        this.#ab.appendChild(this.#bt);
+        this.#ab.appendChild(this.#barrow);
+        this.#ap.appendChild(this.#html);
+        this.#chui_details.appendChild(this.#ab);
+        this.#chui_details.appendChild(this.#ap);
 
         //ФУНКЦИИ
         let test = this.#chui_details.children;
         let i;
         for (i = 0; i < test.length; i++) {
             let elem = test[i];
-            if (elem.tagName === 'DETAILS_BUTTON') {
+            if (elem.tagName === "DETAILS_BUTTON") {
                 let panel = elem.nextElementSibling;
                 // Доступность: кнопка раскрытия — role=button с состоянием, панель — отдельный регион
                 panel.id = "chui_details_panel_" + (disclosure_panel_counter += 1);
@@ -73,8 +79,8 @@ class Details {
                 // Tab и в дереве доступности — поэтому свёрнутая панель помечается инерт
                 panel.inert = true;
                 makeKeyboardButton(elem);
-                elem.addEventListener('click', () => {
-                    elem.classList.toggle('details_active')
+                elem.addEventListener("click", () => {
+                    elem.classList.toggle("details_active");
                     let panel = elem.nextElementSibling;
                     // Стрелка и углы кнопки зависят от `aria-expanded` — их ведёт CSS,
                     // а инлайном остаётся только измеренная высота панели
@@ -85,8 +91,8 @@ class Details {
                         panel.inert = false;
                         panel.style.maxHeight = panel.scrollHeight + "px";
                     }
-                    elem.setAttribute("aria-expanded", elem.classList.contains('details_active') ? "true" : "false");
-                })
+                    elem.setAttribute("aria-expanded", elem.classList.contains("details_active") ? "true" : "false");
+                });
             }
         }
     }
@@ -100,4 +106,4 @@ class Details {
     }
 }
 
-exports.Details = Details
+exports.Details = Details;

package/framework/components/chui_details/styles.css

@@ -7,7 +7,7 @@ chui_details {
     width: -webkit-fill-available;
     margin: var(--margin);
     font-size: var(--font_default_size);
-    font-weight:400;
+    font-weight: 400;
     border-radius: var(--border_radius);
     border: none;
 }
@@ -52,7 +52,7 @@ details_panel {
 details_panel_html {
     padding: 8px 0;
     width: -webkit-fill-available;
-    display: flex
+    display: flex;
 }
 
 details_button:hover {
@@ -60,7 +60,8 @@ details_button:hover {
 }
 
 details_button:active {
-    background: var(--element_background_prime); color: var(--text_color_hover);
+    background: var(--element_background_prime);
+    color: var(--text_color_hover);
 }
 
 details_button:hover details_button_text {
@@ -98,4 +99,4 @@ details_button[aria-expanded="true"] details_button_arrow chui_icon {
 
 details_button[aria-expanded="false"] details_button_arrow chui_icon {
     transform: rotate(0deg);
-}
+}

package/framework/components/chui_diff_viewer/diff_viewer.js

@@ -1,5 +1,5 @@
-const {setStyles} = require("../../modules/chui_functions");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
+const { setStyles } = require("../../modules/chui_functions");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /** Типы строк модели сравнения */
 const EQUAL = "equal";
@@ -46,8 +46,8 @@ const GAP = "gap";
  * Слушателей вне своих узлов нет, поэтому `destroy()` не нужен.
  */
 class DiffViewer {
-    static MODE = {SIDE_BY_SIDE: "side", UNIFIED: "unified"};
-    static ROW = {EQUAL: EQUAL, INSERT: INSERT, DELETE: DELETE, REPLACE: REPLACE, GAP: GAP};
+    static MODE = { SIDE_BY_SIDE: "side", UNIFIED: "unified" };
+    static ROW = { EQUAL: EQUAL, INSERT: INSERT, DELETE: DELETE, REPLACE: REPLACE, GAP: GAP };
     /** Предел таблицы LCS (ячеек): больше — середина расхождения показывается одним блоком */
     static LCS_LIMIT = 250000;
     static #counter = 0;
@@ -79,26 +79,28 @@ class DiffViewer {
     #label_text = undefined;
     #empty_text = undefined;
     #rows = [];
-    #stats_data = {equal: 0, added: 0, removed: 0, changed: 0, groups: 0};
+    #stats_data = { equal: 0, added: 0, removed: 0, changed: 0, groups: 0 };
     #approximate = false;
     #expanded = [];
     #active_index = undefined;
     #focus_index = undefined;
 
-    constructor(options = {
-        id: String(),
-        title: String(),
-        label: String(),
-        left: String(),
-        right: String(),
-        leftTitle: String(),
-        rightTitle: String(),
-        mode: String(),
-        context: Number(),
-        lineNumbers: Boolean(),
-        height: String(),
-        emptyText: String()
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            title: String(),
+            label: String(),
+            left: String(),
+            right: String(),
+            leftTitle: String(),
+            rightTitle: String(),
+            mode: String(),
+            context: Number(),
+            lineNumbers: Boolean(),
+            height: String(),
+            emptyText: String(),
+        }
+    ) {
         require("../../modules/chui_fonts").installMono();
         setStyles(__dirname + "/styles.css", "chUiJS_DiffViewer");
         DiffViewer.#counter += 1;
@@ -196,14 +198,16 @@ class DiffViewer {
 
     /** Строки с учётом свёрнутых участков: у пропуска `{type: "gap", from, to}` (индексы модели) */
     getVisibleRows() {
-        return this.#visibleRows().map((entry) => (entry.type === GAP
-            ? {type: GAP, from: entry.from, to: entry.to}
-            : DiffViewer.#describe(entry.row)));
+        return this.#visibleRows().map((entry) =>
+            entry.type === GAP ? { type: GAP, from: entry.from, to: entry.to } : DiffViewer.#describe(entry.row)
+        );
     }
 
     /** Показан ли хоть один пропуск */
     getGaps() {
-        return this.#visibleRows().filter((entry) => entry.type === GAP).map((entry) => ({from: entry.from, to: entry.to}));
+        return this.#visibleRows()
+            .filter((entry) => entry.type === GAP)
+            .map((entry) => ({ from: entry.from, to: entry.to }));
     }
 
     getContext() {
@@ -317,7 +321,7 @@ class DiffViewer {
 
     /** Раскрыть пропуск по индексам модели (как кнопка «Показать N строк») */
     expandRange(from = Number(), to = Number()) {
-        this.#expanded.push({from: Number(from), to: Number(to)});
+        this.#expanded.push({ from: Number(from), to: Number(to) });
         this.#focus_index = Number(from);
         this.#render();
         return this;
@@ -380,9 +384,9 @@ class DiffViewer {
     }
 
     static #describe(row = Object()) {
-        const descriptor = {type: row.type};
-        if (row.left !== undefined) descriptor.left = {number: row.left.number, text: row.left.text};
-        if (row.right !== undefined) descriptor.right = {number: row.right.number, text: row.right.text};
+        const descriptor = { type: row.type };
+        if (row.left !== undefined) descriptor.left = { number: row.left.number, text: row.left.text };
+        if (row.right !== undefined) descriptor.right = { number: row.right.number, text: row.right.text };
         return descriptor;
     }
 
@@ -394,9 +398,10 @@ class DiffViewer {
         const table = new Int32Array((rows + 1) * width);
         for (let i = rows - 1; i >= 0; i -= 1) {
             for (let j = columns - 1; j >= 0; j -= 1) {
-                table[i * width + j] = left[i] === right[j]
-                    ? table[(i + 1) * width + (j + 1)] + 1
-                    : Math.max(table[(i + 1) * width + j], table[i * width + (j + 1)]);
+                table[i * width + j] =
+                    left[i] === right[j]
+                        ? table[(i + 1) * width + (j + 1)] + 1
+                        : Math.max(table[(i + 1) * width + j], table[i * width + (j + 1)]);
             }
         }
         const pairs = [];
@@ -419,14 +424,14 @@ class DiffViewer {
         let li = 0;
         let ri = 0;
         for (const [i, j] of DiffViewer.#pairs(left, right)) {
-            if (i > li) operations.push({type: DELETE, from: li, to: i});
-            if (j > ri) operations.push({type: INSERT, from: ri, to: j});
-            operations.push({type: EQUAL, i: i, j: j});
+            if (i > li) operations.push({ type: DELETE, from: li, to: i });
+            if (j > ri) operations.push({ type: INSERT, from: ri, to: j });
+            operations.push({ type: EQUAL, i: i, j: j });
             li = i + 1;
             ri = j + 1;
         }
-        if (li < left.length) operations.push({type: DELETE, from: li, to: left.length});
-        if (ri < right.length) operations.push({type: INSERT, from: ri, to: right.length});
+        if (li < left.length) operations.push({ type: DELETE, from: li, to: left.length });
+        if (ri < right.length) operations.push({ type: INSERT, from: ri, to: right.length });
         return operations;
     }
 
@@ -435,8 +440,12 @@ class DiffViewer {
         let prefix = 0;
         while (prefix < left.length && prefix < right.length && left[prefix] === right[prefix]) prefix += 1;
         let suffix = 0;
-        while (suffix < left.length - prefix && suffix < right.length - prefix &&
-        left[left.length - 1 - suffix] === right[right.length - 1 - suffix]) suffix += 1;
+        while (
+            suffix < left.length - prefix &&
+            suffix < right.length - prefix &&
+            left[left.length - 1 - suffix] === right[right.length - 1 - suffix]
+        )
+            suffix += 1;
         const rows = [];
         for (let i = 0; i < prefix; i += 1) rows.push(DiffViewer.#equalRow(left[i], i + 1, right[i], i + 1));
         const mid_left = left.slice(prefix, left.length - suffix);
@@ -447,8 +456,8 @@ class DiffViewer {
                 // Предел алгоритма: вместо честного (но не помещающегося) LCS показываем один блок
                 this.#approximate = true;
                 operations = [];
-                if (mid_left.length > 0) operations.push({type: DELETE, from: 0, to: mid_left.length});
-                if (mid_right.length > 0) operations.push({type: INSERT, from: 0, to: mid_right.length});
+                if (mid_left.length > 0) operations.push({ type: DELETE, from: 0, to: mid_left.length });
+                if (mid_right.length > 0) operations.push({ type: INSERT, from: 0, to: mid_right.length });
             } else {
                 operations = DiffViewer.#operations(mid_left, mid_right);
             }
@@ -465,8 +474,8 @@ class DiffViewer {
     static #equalRow(left_text = String(), left_number = Number(), right_text = String(), right_number = Number()) {
         return {
             type: EQUAL,
-            left: {number: left_number, text: left_text},
-            right: {number: right_number, text: right_text}
+            left: { number: left_number, text: left_text },
+            right: { number: right_number, text: right_text },
         };
     }
 
@@ -485,28 +494,37 @@ class DiffViewer {
                     const has_right = ri < next.to;
                     rows.push({
                         type: has_left && has_right ? REPLACE : has_left ? DELETE : INSERT,
-                        left: has_left ? {number: offset + li + 1, text: left[li]} : undefined,
-                        right: has_right ? {number: offset + ri + 1, text: right[ri]} : undefined
+                        left: has_left ? { number: offset + li + 1, text: left[li] } : undefined,
+                        right: has_right ? { number: offset + ri + 1, text: right[ri] } : undefined,
                     });
                 }
                 index += 1;
                 continue;
             }
             if (operation.type === EQUAL) {
-                rows.push(DiffViewer.#equalRow(left[operation.i], offset + operation.i + 1, right[operation.j], offset + operation.j + 1));
+                rows.push(
+                    DiffViewer.#equalRow(
+                        left[operation.i],
+                        offset + operation.i + 1,
+                        right[operation.j],
+                        offset + operation.j + 1
+                    )
+                );
                 continue;
             }
             for (let i = operation.from; i < operation.to; i += 1) {
-                rows.push(operation.type === DELETE
-                    ? {type: DELETE, left: {number: offset + i + 1, text: left[i]}, right: undefined}
-                    : {type: INSERT, left: undefined, right: {number: offset + i + 1, text: right[i]}});
+                rows.push(
+                    operation.type === DELETE
+                        ? { type: DELETE, left: { number: offset + i + 1, text: left[i] }, right: undefined }
+                        : { type: INSERT, left: undefined, right: { number: offset + i + 1, text: right[i] } }
+                );
             }
         }
         return rows;
     }
 
     #collectStats() {
-        const stats = {equal: 0, added: 0, removed: 0, changed: 0, groups: 0};
+        const stats = { equal: 0, added: 0, removed: 0, changed: 0, groups: 0 };
         for (const row of this.#rows) {
             if (row.type === EQUAL) stats.equal += 1;
             if (row.type === INSERT) stats.added += 1;
@@ -538,7 +556,8 @@ class DiffViewer {
         const total = this.#rows.length;
         const list = [];
         if (this.#context === Infinity || this.#stats_data.groups === 0) {
-            for (let index = 0; index < total; index += 1) list.push({type: this.#rows[index].type, row: this.#rows[index], index: index});
+            for (let index = 0; index < total; index += 1)
+                list.push({ type: this.#rows[index].type, row: this.#rows[index], index: index });
             return list;
         }
         const context = Number.isFinite(this.#context) ? Math.max(0, Math.floor(this.#context)) : 0;
@@ -553,16 +572,16 @@ class DiffViewer {
         for (let index = 0; index < total; index += 1) {
             if (keep[index] || this.#isExpanded(index)) {
                 if (gap !== undefined) {
-                    list.push({type: GAP, from: gap.from, to: gap.to});
+                    list.push({ type: GAP, from: gap.from, to: gap.to });
                     gap = undefined;
                 }
-                list.push({type: this.#rows[index].type, row: this.#rows[index], index: index});
+                list.push({ type: this.#rows[index].type, row: this.#rows[index], index: index });
                 continue;
             }
-            if (gap === undefined) gap = {from: index, to: index};
+            if (gap === undefined) gap = { from: index, to: index };
             else gap.to = index;
         }
-        if (gap !== undefined) list.push({type: GAP, from: gap.from, to: gap.to});
+        if (gap !== undefined) list.push({ type: GAP, from: gap.from, to: gap.to });
         return list;
     }
 
@@ -612,9 +631,9 @@ class DiffViewer {
 
     // Вид изменения словами: номер строки берётся из «своей» версии текста
     #rowLabel(row = Object()) {
-        if (row.type === INSERT) return I18n.t("diffViewer.lineAdded", {number: row.right.number});
-        if (row.type === DELETE) return I18n.t("diffViewer.lineRemoved", {number: row.left.number});
-        if (row.type === REPLACE) return I18n.t("diffViewer.lineChanged", {number: row.left.number});
+        if (row.type === INSERT) return I18n.t("diffViewer.lineAdded", { number: row.right.number });
+        if (row.type === DELETE) return I18n.t("diffViewer.lineRemoved", { number: row.left.number });
+        if (row.type === REPLACE) return I18n.t("diffViewer.lineChanged", { number: row.left.number });
         return undefined;
     }
 
@@ -696,7 +715,7 @@ class DiffViewer {
         button.className = "diff_viewer_expand";
         button.dataset.from = String(entry.from);
         button.dataset.to = String(entry.to);
-        button.innerText = I18n.t("diffViewer.showLines", {count: count});
+        button.innerText = I18n.t("diffViewer.showLines", { count: count });
         cell.appendChild(button);
         node.appendChild(cell);
         return node;
@@ -720,7 +739,10 @@ class DiffViewer {
             return this;
         }
         this.#status.innerText = I18n.t("diffViewer.summary", {
-            groups: stats.groups, added: stats.added, removed: stats.removed, changed: stats.changed
+            groups: stats.groups,
+            added: stats.added,
+            removed: stats.removed,
+            changed: stats.changed,
         });
         return this;
     }
@@ -732,9 +754,10 @@ class DiffViewer {
         if (focused !== null && focused.dataset.index !== undefined) this.#focus_index = Number(focused.dataset.index);
         this.#head_row.innerHTML = "";
         this.#body.innerHTML = "";
-        const titles = this.#mode === DiffViewer.MODE.UNIFIED
-            ? [I18n.t("diffViewer.changes")]
-            : [this.#left_title, this.#right_title];
+        const titles =
+            this.#mode === DiffViewer.MODE.UNIFIED
+                ? [I18n.t("diffViewer.changes")]
+                : [this.#left_title, this.#right_title];
         for (const title of titles) {
             const cell = document.createElement("div");
             cell.className = "diff_viewer_head_cell";
@@ -745,7 +768,8 @@ class DiffViewer {
         this.#grid.setAttribute("aria-colcount", String(titles.length));
         this.#grid.classList.toggle("diff_viewer_grid_unified", this.#mode === DiffViewer.MODE.UNIFIED);
         const list = this.#visibleRows();
-        for (const entry of list) this.#body.appendChild(entry.type === GAP ? this.#gapNode(entry) : this.#rowNode(entry));
+        for (const entry of list)
+            this.#body.appendChild(entry.type === GAP ? this.#gapNode(entry) : this.#rowNode(entry));
         this.#grid.setAttribute("aria-rowcount", String(list.length + 1));
         this.#grid.hidden = this.#rows.length === 0;
         this.#empty.hidden = this.#stats_data.groups !== 0;
@@ -784,11 +808,12 @@ class DiffViewer {
     }
 
     #focusIndexAt(index = Number()) {
-        const row = [...this.#body.querySelectorAll(".diff_viewer_row")]
-            .find((node) => Number(node.dataset.index) === Number(index));
+        const row = [...this.#body.querySelectorAll(".diff_viewer_row")].find(
+            (node) => Number(node.dataset.index) === Number(index)
+        );
         if (row === undefined) return this;
         this.#focusRow(row);
-        row.scrollIntoView({block: "nearest"});
+        row.scrollIntoView({ block: "nearest" });
         return this;
     }
 
@@ -864,4 +889,4 @@ class DiffViewer {
     };
 }
 
-exports.DiffViewer = DiffViewer
+exports.DiffViewer = DiffViewer;

package/framework/components/chui_diff_viewer/styles.css

@@ -13,7 +13,7 @@ chui_diff_viewer {
     border-radius: var(--border_radius);
     background: var(--element_background);
     color: var(--text_color);
-    font-family: 'chui_mono', monospace;
+    font-family: "chui_mono", monospace;
     font-size: var(--font_default_size);
 }