chuijs 4.0.2 → 4.0.4

package/framework/components/chui_tree_view/tree_view.js

@@ -1,9 +1,9 @@
-const {Icon, Icons} = require("../chui_icons/icons");
-const {makeKeyboardButton} = require("../../modules/chui_a11y/chui_a11y");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /** Идентификаторы панелей дерева для aria-controls */
-let tree_panel_counter = 0;
+let treePanelCounter = 0;
 
 /** Классы состояния узлов дерева */
 const SELECTED_CLASS = "tree_view_button_selected";
@@ -11,7 +11,7 @@ const DRAGGING_CLASS = "tree_view_button_dragging";
 const DROP_CLASSES = {
     before: "tree_view_button_drop_before",
     after: "tree_view_button_drop_after",
-    inside: "tree_view_button_drop_inside"
+    inside: "tree_view_button_drop_inside",
 };
 
 /**
@@ -58,28 +58,28 @@ class TreeView {
     static SELECTION = {
         NONE: "none",
         SINGLE: "single",
-        MULTIPLE: "multiple"
+        MULTIPLE: "multiple",
     };
     static DROP = {
         BEFORE: "before",
         AFTER: "after",
-        INSIDE: "inside"
+        INSIDE: "inside",
     };
     // Узел → описание из фабрики: коллбэки и getSelected() отдают то же, что вернул TreeView.Button
     static #registry = new WeakMap();
     static #HIDDEN_CLASS = "tree_view_search_hidden";
 
-    #chui_tree_view = document.createElement(`chui_tree_view`);
-    #main_test = undefined;
-    #selection_mode = TreeView.SELECTION.NONE;
+    #chuiTreeView = document.createElement(`chui_tree_view`);
+    #mainTest = undefined;
+    #selectionMode = TreeView.SELECTION.NONE;
     #selected = new Set();
     #anchor = undefined;
     #draggable = false;
-    #move_on_drop = false;
-    #on_select = undefined;
-    #on_drop = undefined;
-    #drag_source = undefined;
-    #drop_target = undefined;
+    #moveOnDrop = false;
+    #onSelect = undefined;
+    #onDrop = undefined;
+    #dragSource = undefined;
+    #dropTarget = undefined;
     // Поиск: запрос, совпадения и скрытый статус для скринридера
     #query = "";
     #matches = new Set();
@@ -87,120 +87,130 @@ class TreeView {
     // Виртуализация: структурная модель (все узлы) + плоский список видимых строк
     #virtual = undefined;
     // Переменная высота строк: из данных (`rowHeight`-функция) или из DOM (`variableHeight`)
-    #variable_height = false;
-    #measure_dom = false;
+    #variableHeight = false;
+    #measureDom = false;
     #heights = new Map();
-    #row_heights = [];
+    #rowHeights = [];
     #offsets = [0];
-    #subtree_heights = new Map();
+    #subtreeHeights = new Map();
     #nodes = [];
-    #node_index = new Map();
+    #nodeIndex = new Map();
     #roots = [];
     #rows = [];
-    #child_rows = new Map();
-    #root_rows = [];
-    #row_sizes = new Map();
-    #row_positions = new Map();
-    #rows_dirty = true;
+    #childRows = new Map();
+    #rootRows = [];
+    #rowSizes = new Map();
+    #rowPositions = new Map();
+    #rowsDirty = true;
     // Счётчик изменений структуры: окно пересобирается, когда он разошёлся с отрисованным
     #stamp = 0;
-    #win_stamp = -1;
-    #win_rows = -1;
+    #winStamp = -1;
+    #winRows = -1;
     #win = undefined;
-    #measured_row_height = undefined;
-    #scroll_bound = false;
+    #measuredRowHeight = undefined;
+    #scrollBound = false;
     #raf = null;
     #destroyed = false;
 
-    constructor(options = {
-        width: String(),
-        components: [],
-        selection: String(),
-        draggable: Boolean(),
-        moveOnDrop: Boolean(),
-        label: String(),
-        onSelect: undefined,
-        onDrop: undefined,
-        deferRender: Boolean(),
-        virtual: undefined,
-        variableHeight: Boolean(),
-        estimatedRowHeight: undefined,
-        height: String()
-    }) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_TreeView');
-        let main_test = document.createElement(`chui_tree_view_main_test`);
-        main_test.setAttribute("role", "tree");
-        this.#main_test = main_test;
+    constructor(
+        options = {
+            width: String(),
+            components: [],
+            selection: String(),
+            draggable: Boolean(),
+            moveOnDrop: Boolean(),
+            label: String(),
+            onSelect: undefined,
+            onDrop: undefined,
+            deferRender: Boolean(),
+            virtual: undefined,
+            variableHeight: Boolean(),
+            estimatedRowHeight: undefined,
+            height: String(),
+        }
+    ) {
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_TreeView");
+        const treeNode = document.createElement(`chui_tree_view_main_test`);
+        treeNode.setAttribute("role", "tree");
+        this.#mainTest = treeNode;
         // Виртуализация включается явно: `virtual: true` или `{rowHeight, buffer}`
-        this.#virtual = options.virtual === undefined || options.virtual === false
-            ? undefined
-            : (options.virtual === true ? {} : {...options.virtual});
+        this.#virtual =
+            options.virtual === undefined || options.virtual === false
+                ? undefined
+                : options.virtual === true
+                  ? {}
+                  : { ...options.virtual };
         // Переменная высота: функция `rowHeight(record, index)` — высоты из данных,
         // `variableHeight: true` — высоты измеряются по отрисованным строкам
         if (this.#virtual !== undefined) {
             if (options.variableHeight === true) this.#virtual.variableHeight = true;
-            this.#variable_height = typeof this.#virtual.rowHeight === "function";
-            this.#measure_dom = this.#virtual.variableHeight === true;
-            if (this.#measure_dom && this.#virtual.estimatedRowHeight === undefined) this.#virtual.estimatedRowHeight = 32;
+            this.#variableHeight = typeof this.#virtual.rowHeight === "function";
+            this.#measureDom = this.#virtual.variableHeight === true;
+            if (this.#measureDom && this.#virtual.estimatedRowHeight === undefined)
+                this.#virtual.estimatedRowHeight = 32;
         }
-        this.#selection_mode = options.selection === undefined ? TreeView.SELECTION.NONE : options.selection;
+        this.#selectionMode = options.selection === undefined ? TreeView.SELECTION.NONE : options.selection;
         this.#draggable = options.draggable === true;
-        this.#move_on_drop = options.moveOnDrop === true;
-        this.#on_select = options.onSelect;
-        this.#on_drop = options.onDrop;
-        if (options.label !== undefined) main_test.setAttribute("aria-label", options.label);
+        this.#moveOnDrop = options.moveOnDrop === true;
+        this.#onSelect = options.onSelect;
+        this.#onDrop = options.onDrop;
+        if (options.label !== undefined) treeNode.setAttribute("aria-label", options.label);
         // Отложенная отрисовка строк: узлы в DOM, но далёкие от окна не раскладываются
-        if (options.deferRender === true) main_test.classList.add("tree_view_defer");
-        if (this.#selection_mode !== TreeView.SELECTION.NONE) {
-            main_test.setAttribute("aria-multiselectable", this.#selection_mode === TreeView.SELECTION.MULTIPLE ? "true" : "false");
-            main_test.addEventListener("click", this.#onClick);
+        if (options.deferRender === true) treeNode.classList.add("tree_view_defer");
+        if (this.#selectionMode !== TreeView.SELECTION.NONE) {
+            treeNode.setAttribute(
+                "aria-multiselectable",
+                this.#selectionMode === TreeView.SELECTION.MULTIPLE ? "true" : "false"
+            );
+            treeNode.addEventListener("click", this.#onClick);
             // Space приходит и от makeKeyboardButton (кликом), поэтому перехватываем его
             // с модификатором раньше — в фазе перехвата
-            main_test.addEventListener("keydown", this.#onSelectionKeyDown, true);
+            treeNode.addEventListener("keydown", this.#onSelectionKeyDown, true);
         }
         // Стрелки по дереву: ↑/↓ по видимым пунктам, → раскрыть, ← свернуть, Home/End — края
-        main_test.addEventListener("keydown", this.#onNavigationKeyDown);
+        treeNode.addEventListener("keydown", this.#onNavigationKeyDown);
         if (this.#draggable) {
-            main_test.addEventListener("dragstart", this.#onDragStart);
-            main_test.addEventListener("dragover", this.#onDragOver);
-            main_test.addEventListener("dragleave", this.#onDragLeave);
-            main_test.addEventListener("drop", this.#onDropEvent);
-            main_test.addEventListener("dragend", this.#onDragEnd);
+            treeNode.addEventListener("dragstart", this.#onDragStart);
+            treeNode.addEventListener("dragover", this.#onDragOver);
+            treeNode.addEventListener("dragleave", this.#onDragLeave);
+            treeNode.addEventListener("drop", this.#onDropEvent);
+            treeNode.addEventListener("dragend", this.#onDragEnd);
         }
         if (options.width !== undefined) {
-            this.#chui_tree_view.style.width = options.width;
+            this.#chuiTreeView.style.width = options.width;
         } else {
-            this.#chui_tree_view.style.width = 'max-content'
+            this.#chuiTreeView.style.width = "max-content";
         }
         // Панели действий приходят опцией: частичный объект опций без них — дерево без панелей
-        const toolbar_buttons = Array.isArray(options.components) ? options.components : [];
-        toolbar_buttons.forEach(buttons => {
-            main_test.appendChild(buttons.button)
+        const toolbarButtons = Array.isArray(options.components) ? options.components : [];
+        toolbarButtons.forEach((buttons) => {
+            treeNode.appendChild(buttons.button);
             if (buttons.panel !== undefined) {
-                main_test.appendChild(buttons.panel)
+                treeNode.appendChild(buttons.panel);
             }
-        })
+        });
         // Структурная модель строится один раз по полному DOM: дальше окно собирается из неё,
         // поэтому отрисовка перестаёт зависеть от того, что сейчас лежит в документе
         this.#buildStructure();
         if (this.#virtual !== undefined) {
-            this.#chui_tree_view.style.height = options.height === undefined ? "400px" : options.height;
+            this.#chuiTreeView.style.height = options.height === undefined ? "400px" : options.height;
             // Высота строки одна для вёрстки и для арифметики распорок (в переменном режиме её нет)
-            if (!this.#isVariable()) this.#chui_tree_view.style.setProperty("--tree_view_row_height", `${this.#rowHeight()}px`);
-            this.#chui_tree_view.dataset.virtual = "true";
-            main_test.classList.add("tree_view_virtual");
+            if (!this.#isVariable())
+                this.#chuiTreeView.style.setProperty("--tree_view_row_height", `${this.#rowHeight()}px`);
+            this.#chuiTreeView.dataset.virtual = "true";
+            treeNode.classList.add("tree_view_virtual");
             this.#bindScroll();
             // Клик по раскрытию меняет не только классы, но и состав видимых строк
-            main_test.addEventListener("click", this.#onStructureClick);
+            treeNode.addEventListener("click", this.#onStructureClick);
         }
         this.#applySelection(false);
         this.#syncDraggable();
-        this.#chui_tree_view.appendChild(main_test)
+        this.#chuiTreeView.appendChild(treeNode);
         if (this.#virtual !== undefined) this.#renderVirtual();
     }
 
     set() {
-        return this.#chui_tree_view;
+        return this.#chuiTreeView;
     }
     /**
      * Снять подписки (прокрутка, клавиатура, клики, drag) и отпустить модель строк: плоский список
@@ -212,28 +222,28 @@ class TreeView {
         this.#destroyed = true;
         if (this.#raf !== null) cancelAnimationFrame(this.#raf);
         this.#raf = null;
-        this.#chui_tree_view.removeEventListener("scroll", this.#onScroll);
-        this.#scroll_bound = false;
-        this.#main_test.removeEventListener("click", this.#onClick);
-        this.#main_test.removeEventListener("keydown", this.#onSelectionKeyDown, true);
-        this.#main_test.removeEventListener("keydown", this.#onNavigationKeyDown);
-        this.#main_test.removeEventListener("click", this.#onStructureClick);
-        this.#main_test.removeEventListener("dragstart", this.#onDragStart);
-        this.#main_test.removeEventListener("dragover", this.#onDragOver);
-        this.#main_test.removeEventListener("dragleave", this.#onDragLeave);
-        this.#main_test.removeEventListener("drop", this.#onDropEvent);
-        this.#main_test.removeEventListener("dragend", this.#onDragEnd);
+        this.#chuiTreeView.removeEventListener("scroll", this.#onScroll);
+        this.#scrollBound = false;
+        this.#mainTest.removeEventListener("click", this.#onClick);
+        this.#mainTest.removeEventListener("keydown", this.#onSelectionKeyDown, true);
+        this.#mainTest.removeEventListener("keydown", this.#onNavigationKeyDown);
+        this.#mainTest.removeEventListener("click", this.#onStructureClick);
+        this.#mainTest.removeEventListener("dragstart", this.#onDragStart);
+        this.#mainTest.removeEventListener("dragover", this.#onDragOver);
+        this.#mainTest.removeEventListener("dragleave", this.#onDragLeave);
+        this.#mainTest.removeEventListener("drop", this.#onDropEvent);
+        this.#mainTest.removeEventListener("dragend", this.#onDragEnd);
         this.#nodes = [];
         this.#rows = [];
         this.#roots = [];
-        this.#root_rows = [];
-        this.#row_heights = [];
+        this.#rootRows = [];
+        this.#rowHeights = [];
         this.#offsets = [0];
-        this.#node_index.clear();
-        this.#child_rows.clear();
-        this.#row_sizes.clear();
-        this.#row_positions.clear();
-        this.#subtree_heights.clear();
+        this.#nodeIndex.clear();
+        this.#childRows.clear();
+        this.#rowSizes.clear();
+        this.#rowPositions.clear();
+        this.#subtreeHeights.clear();
         this.#heights.clear();
         this.#selected.clear();
         return this;
@@ -241,7 +251,7 @@ class TreeView {
 
     // === ВЫБОР ===
     getSelectionMode() {
-        return this.#selection_mode;
+        return this.#selectionMode;
     }
 
     /** Описания выбранных узлов — те же объекты, что вернули фабрики */
@@ -285,7 +295,9 @@ class TreeView {
     // строки могут быть вне документа, но остаются видимыми по смыслу
     #items() {
         if (this.#virtual === undefined) {
-            return [...this.#main_test.querySelectorAll('tree_view_button')].filter(button => this.#isVisibleRow(button));
+            return [...this.#mainTest.querySelectorAll("tree_view_button")].filter((button) =>
+                this.#isVisibleRow(button)
+            );
         }
         return this.#project().map((row) => this.#nodes[row.index].button);
     }
@@ -308,7 +320,7 @@ class TreeView {
 
     /** Все кнопки, к которым применим выбор: в виртуальном режиме — по модели, а не по документу */
     #selectionTargets() {
-        if (this.#virtual === undefined) return [...this.#main_test.querySelectorAll('tree_view_button')];
+        if (this.#virtual === undefined) return [...this.#mainTest.querySelectorAll("tree_view_button")];
         return this.#project().map((row) => this.#nodes[row.index].button);
     }
 
@@ -320,7 +332,7 @@ class TreeView {
             const node = entry instanceof Element ? entry : entry.button;
             if (node === undefined || !(node instanceof Element)) continue;
             // В виртуальном режиме строка может быть вне документа — она всё равно есть в модели
-            if (this.#main_test.contains(node) || this.#node_index.has(node)) nodes.push(node);
+            if (this.#mainTest.contains(node) || this.#nodeIndex.has(node)) nodes.push(node);
         }
         return nodes;
     }
@@ -337,22 +349,25 @@ class TreeView {
         for (const node of this.#selectionTargets()) {
             const selected = this.#selected.has(node);
             node.classList.toggle(SELECTED_CLASS, selected);
-            if (this.#selection_mode !== TreeView.SELECTION.NONE) node.setAttribute("aria-selected", selected ? "true" : "false");
+            if (this.#selectionMode !== TreeView.SELECTION.NONE)
+                node.setAttribute("aria-selected", selected ? "true" : "false");
         }
-        if (!announce || this.#on_select === undefined) return;
+        if (!announce || this.#onSelect === undefined) return;
         const items = this.getSelected();
-        this.#on_select(items, items.length === 0 ? undefined : items[items.length - 1]);
+        this.#onSelect(items, items.length === 0 ? undefined : items[items.length - 1]);
     }
 
     #toggleNode(node) {
-        const nodes = this.#selected.has(node) ? [...this.#selected].filter((entry) => entry !== node) : [...this.#selected, node];
+        const nodes = this.#selected.has(node)
+            ? [...this.#selected].filter((entry) => entry !== node)
+            : [...this.#selected, node];
         this.#anchor = node;
         this.#commitSelection(nodes);
     }
 
     #selectRange(node) {
         const items = this.#items();
-        const anchor = this.#anchor === undefined || !this.#main_test.contains(this.#anchor) ? node : this.#anchor;
+        const anchor = this.#anchor === undefined || !this.#mainTest.contains(this.#anchor) ? node : this.#anchor;
         const from = items.indexOf(anchor);
         const to = items.indexOf(node);
         if (from === -1 || to === -1) return;
@@ -386,9 +401,9 @@ class TreeView {
     #inOwnSubtree(source, target) {
         if (source === target || source.contains(target)) return true;
         // Модель знает родство и для строк вне окна: DOM-проверка видит только отрисованное
-        const sourceIndex = this.#node_index.get(source);
+        const sourceIndex = this.#nodeIndex.get(source);
         if (sourceIndex !== undefined) {
-            let current = this.#node_index.get(target);
+            let current = this.#nodeIndex.get(target);
             while (current !== undefined && current !== -1) {
                 if (current === sourceIndex) return true;
                 current = this.#nodes[current].parent;
@@ -410,13 +425,13 @@ class TreeView {
     }
 
     #applyDropTarget(target, position) {
-        if (this.#drop_target !== undefined) {
-            this.#drop_target.node.classList.remove(DROP_CLASSES[this.#drop_target.position]);
-            this.#drop_target = undefined;
+        if (this.#dropTarget !== undefined) {
+            this.#dropTarget.node.classList.remove(DROP_CLASSES[this.#dropTarget.position]);
+            this.#dropTarget = undefined;
         }
         if (target !== undefined && position !== undefined) {
             target.classList.add(DROP_CLASSES[position]);
-            this.#drop_target = {node: target, position: position};
+            this.#dropTarget = { node: target, position: position };
         }
     }
 
@@ -428,7 +443,10 @@ class TreeView {
         let reference;
         if (position === TreeView.DROP.INSIDE) {
             const panel = target.nextElementSibling;
-            const html = panel !== null && panel.tagName.toLowerCase() === "tree_view_panel" ? panel.querySelector("tree_view_html") : null;
+            const html =
+                panel !== null && panel.tagName.toLowerCase() === "tree_view_panel"
+                    ? panel.querySelector("tree_view_html")
+                    : null;
             if (html === null) return false;
             container = html;
             reference = null;
@@ -444,14 +462,14 @@ class TreeView {
     }
 
     #finishDrag() {
-        if (this.#drag_source !== undefined) this.#drag_source.classList.remove(DRAGGING_CLASS);
-        this.#drag_source = undefined;
+        if (this.#dragSource !== undefined) this.#dragSource.classList.remove(DRAGGING_CLASS);
+        this.#dragSource = undefined;
     }
 
     #descriptor(node) {
         const item = TreeView.#registry.get(node);
         if (item !== undefined) return item;
-        return {title: this.#title(node), button: node};
+        return { title: this.#title(node), button: node };
     }
 
     #title(node) {
@@ -466,9 +484,9 @@ class TreeView {
     // Строится один раз по полному DOM, ленивые поддеревья и переносы достраивают её точечно.
     #buildStructure() {
         this.#nodes = [];
-        this.#node_index = new Map();
+        this.#nodeIndex = new Map();
         this.#roots = [];
-        for (const child of [...this.#main_test.children]) {
+        for (const child of [...this.#mainTest.children]) {
             if (child.tagName.toLowerCase() !== "tree_view_button") continue;
             this.#register(child, -1);
         }
@@ -477,7 +495,7 @@ class TreeView {
 
     /** Структура изменилась: плоский список и окно надо пересобрать */
     #touch() {
-        this.#rows_dirty = true;
+        this.#rowsDirty = true;
         this.#stamp += 1;
     }
 
@@ -495,10 +513,10 @@ class TreeView {
             parent: parent,
             children: [],
             title: this.#title(button),
-            hidden: false
+            hidden: false,
         };
         this.#nodes.push(record);
-        this.#node_index.set(button, index);
+        this.#nodeIndex.set(button, index);
         if (parent === -1) this.#roots.push(index);
         else this.#nodes[parent].children.push(index);
         if (html !== null) {
@@ -517,7 +535,7 @@ class TreeView {
      * можно собирать из него, не оглядываясь на документ.
      */
     #project() {
-        if (!this.#rows_dirty) return this.#rows;
+        if (!this.#rowsDirty) return this.#rows;
         const rows = [];
         const positions = new Map();
         const childrenOf = new Map();
@@ -529,7 +547,7 @@ class TreeView {
             const record = this.#nodes[index];
             if (record === undefined || record.hidden) return 0;
             positions.set(index, rows.length);
-            rows.push({index: index, depth: depth});
+            rows.push({ index: index, depth: depth });
             const own = variable ? this.#heightOf(index) : this.#rowHeight();
             heights.push(own);
             let size = 1;
@@ -553,17 +571,17 @@ class TreeView {
         const roots = [];
         for (const root of this.#roots) if (walk(root, 0) > 0) roots.push(root);
         this.#rows = rows;
-        this.#child_rows = childrenOf;
-        this.#root_rows = roots;
-        this.#row_sizes = sizes;
-        this.#subtree_heights = subtree;
-        this.#row_heights = heights;
-        this.#row_positions = positions;
+        this.#childRows = childrenOf;
+        this.#rootRows = roots;
+        this.#rowSizes = sizes;
+        this.#subtreeHeights = subtree;
+        this.#rowHeights = heights;
+        this.#rowPositions = positions;
         // Верхняя граница каждой позиции: для переменной высоты окно и прокрутка считаются по ней
         const offsets = [0];
         for (const value of heights) offsets.push(offsets[offsets.length - 1] + value);
         this.#offsets = offsets;
-        this.#rows_dirty = false;
+        this.#rowsDirty = false;
         return rows;
     }
 
@@ -575,19 +593,19 @@ class TreeView {
 
     /** Переменная высота строк: высоты из данных (функция) или измеренные по DOM */
     #isVariable() {
-        return this.#variable_height || this.#measure_dom;
+        return this.#variableHeight || this.#measureDom;
     }
 
     /** Высота строки с индексом модели: из данных, из кеша замеров или оценка */
     #heightOf(index) {
-        if (this.#variable_height) {
+        if (this.#variableHeight) {
             if (!this.#heights.has(index)) {
                 const value = Number(this.#virtual.rowHeight(this.#nodes[index], index));
                 this.#heights.set(index, Number.isFinite(value) && value > 0 ? value : 26);
             }
             return this.#heights.get(index);
         }
-        if (this.#measure_dom) {
+        if (this.#measureDom) {
             if (this.#heights.has(index)) return this.#heights.get(index);
             return this.#virtual.estimatedRowHeight;
         }
@@ -601,13 +619,13 @@ class TreeView {
      * тела `DataGrid`).
      */
     #measureWindow() {
-        for (const button of this.#main_test.querySelectorAll("tree_view_button")) {
-            const index = this.#node_index.get(button);
+        for (const button of this.#mainTest.querySelectorAll("tree_view_button")) {
+            const index = this.#nodeIndex.get(button);
             if (index === undefined) continue;
             const measured = Math.round(button.getBoundingClientRect().height);
             if (measured > 0 && this.#heights.get(index) !== measured) {
                 this.#heights.set(index, measured);
-                this.#rows_dirty = true;
+                this.#rowsDirty = true;
             }
         }
     }
@@ -616,12 +634,12 @@ class TreeView {
     #rowHeight() {
         if (this.#virtual === undefined) return 26;
         if (this.#virtual.rowHeight !== undefined) return this.#virtual.rowHeight;
-        return this.#measured_row_height === undefined ? 26 : this.#measured_row_height;
+        return this.#measuredRowHeight === undefined ? 26 : this.#measuredRowHeight;
     }
 
     #measureRow() {
         if (this.#virtual === undefined || this.#isVariable() || this.#virtual.rowHeight !== undefined) return 0;
-        const sample = this.#main_test.querySelector("tree_view_button");
+        const sample = this.#mainTest.querySelector("tree_view_button");
         return sample === null ? 0 : Math.round(sample.getBoundingClientRect().height);
     }
 
@@ -630,9 +648,9 @@ class TreeView {
     }
 
     #bindScroll() {
-        if (this.#scroll_bound) return;
-        this.#scroll_bound = true;
-        this.#chui_tree_view.addEventListener("scroll", this.#onScroll, {passive: true});
+        if (this.#scrollBound) return;
+        this.#scrollBound = true;
+        this.#chuiTreeView.addEventListener("scroll", this.#onScroll, { passive: true });
     }
 
     #onScroll = () => {
@@ -661,15 +679,15 @@ class TreeView {
         if (remeasure) {
             // Переменный режим по DOM: сначала измеряем уже отрисованные строки — их настоящие
             // высоты уточняют смещения, и только потом считается окно
-            if (this.#measure_dom) this.#measureWindow();
+            if (this.#measureDom) this.#measureWindow();
             // Настоящая высота строки может отличаться от умолчания: распорки и окно считаются
             // по ней, поэтому замер идёт до расчёта окна
             const measured = this.#measureRow();
-            if (measured > 0 && measured !== this.#measured_row_height) {
-                this.#measured_row_height = measured;
-                this.#chui_tree_view.style.setProperty("--tree_view_row_height", `${measured}px`);
+            if (measured > 0 && measured !== this.#measuredRowHeight) {
+                this.#measuredRowHeight = measured;
+                this.#chuiTreeView.style.setProperty("--tree_view_row_height", `${measured}px`);
                 // Смещения в проекции считались по прежней высоте — пересобрать
-                this.#rows_dirty = true;
+                this.#rowsDirty = true;
                 force = true;
             }
         }
@@ -677,7 +695,7 @@ class TreeView {
         const variable = this.#isVariable();
         const height = this.#rowHeight();
         const buffer = this.#buffer();
-        const viewport = Math.max(1, this.#chui_tree_view.clientHeight);
+        const viewport = Math.max(1, this.#chuiTreeView.clientHeight);
         // Позиция строки по верхней границе прокрутки (двоичный поиск по смещениям)
         const positionFor = (top) => {
             let low = 0;
@@ -695,13 +713,14 @@ class TreeView {
         // нет паддинга, рамки и зазоров между отрисованными строками, поэтому «модельный» низ чуть
         // выше настоящего — только по нему последняя строка (End, стрелка вниз) осталась бы обрезанной
         const modelBottom = Math.max(0, total - viewport);
-        const realBottom = Math.max(0, this.#chui_tree_view.scrollHeight - viewport);
-        let scrollTop = Math.min(Math.max(0, this.#chui_tree_view.scrollTop), Math.max(modelBottom, realBottom));
+        const realBottom = Math.max(0, this.#chuiTreeView.scrollHeight - viewport);
+        let scrollTop = Math.min(Math.max(0, this.#chuiTreeView.scrollTop), Math.max(modelBottom, realBottom));
         // Низ окна для переменной высоты — позиция строки под нижней кромкой плюс одна строка,
         // иначе последняя видимая строка выпадала бы из окна
-        const windowTo = (top) => variable
-            ? Math.min(rows.length, positionFor(top + viewport) + 1 + buffer)
-            : Math.min(rows.length, Math.ceil((top + viewport) / height) + buffer);
+        const windowTo = (top) =>
+            variable
+                ? Math.min(rows.length, positionFor(top + viewport) + 1 + buffer)
+                : Math.min(rows.length, Math.ceil((top + viewport) / height) + buffer);
         let from = Math.max(0, positionFor(scrollTop) - buffer);
         let to = windowTo(scrollTop);
         // Список сжался (поиск, сворачивание) — позиция ещё старая и указывает за конец: прижимаем
@@ -711,14 +730,21 @@ class TreeView {
             from = Math.max(0, positionFor(scrollTop) - buffer);
             to = windowTo(scrollTop);
         }
-        if (scrollTop !== this.#chui_tree_view.scrollTop) this.#chui_tree_view.scrollTop = scrollTop;
+        if (scrollTop !== this.#chuiTreeView.scrollTop) this.#chuiTreeView.scrollTop = scrollTop;
         // Ни окно, ни структура не изменились (прокрутка в пределах строки) — пересобирать
         // нечего: пересборка на каждом кадре только дёргала бы DOM и фокус
-        if (!force && this.#win !== undefined && from === this.#win.from && to === this.#win.to
-            && this.#win_rows === rows.length && this.#win_stamp === this.#stamp) return;
+        if (
+            !force &&
+            this.#win !== undefined &&
+            from === this.#win.from &&
+            to === this.#win.to &&
+            this.#winRows === rows.length &&
+            this.#winStamp === this.#stamp
+        )
+            return;
         // Кто держит фокус: снимок до мутации — после неё `document.activeElement` уже `body`
         const active = document.activeElement;
-        const activeIndex = active instanceof Element ? this.#node_index.get(active) : undefined;
+        const activeIndex = active instanceof Element ? this.#nodeIndex.get(active) : undefined;
         const keepIndex = activeIndex === undefined ? undefined : this.#pinRow(rows, activeIndex);
         const visible = new Set();
         for (let position = from; position < to; position++) {
@@ -737,7 +763,7 @@ class TreeView {
                 current = this.#nodes[current].parent;
             }
         }
-        const sizeOf = (index) => this.#row_sizes.get(index) || 1;
+        const sizeOf = (index) => this.#rowSizes.get(index) || 1;
         const spacer = (px) => {
             const node = document.createElement("tree_view_spacer");
             node.setAttribute("aria-hidden", "true");
@@ -745,10 +771,10 @@ class TreeView {
             return node;
         };
         // Сколько занимает пропущенная ветка: в переменном режиме — суммарная высота её поддерева
-        const subtreePx = (index) => variable ? (this.#subtree_heights.get(index) || 0) : sizeOf(index) * height;
+        const subtreePx = (index) => (variable ? this.#subtreeHeights.get(index) || 0 : sizeOf(index) * height);
         const fill = (container, parentIndex) => {
             // Дети берутся из проекции: скрытое поиском и свёрнутое в неё уже не попадает
-            const children = parentIndex === -1 ? this.#root_rows : (this.#child_rows.get(parentIndex) || []);
+            const children = parentIndex === -1 ? this.#rootRows : this.#childRows.get(parentIndex) || [];
             const parts = [];
             let gap = 0;
             for (const index of children) {
@@ -763,7 +789,7 @@ class TreeView {
                 }
                 const record = this.#nodes[index];
                 // Высота из данных задаётся строке инлайном — иначе DOM разошёлся бы с моделью
-                if (this.#variable_height) {
+                if (this.#variableHeight) {
                     const rowHeightPx = this.#heightOf(index);
                     record.button.style.minHeight = `${rowHeightPx}px`;
                     record.button.style.height = `${rowHeightPx}px`;
@@ -783,14 +809,14 @@ class TreeView {
                 else record.html.replaceChildren();
             }
         };
-        fill(this.#main_test, -1);
-        if (this.#status !== undefined) this.#main_test.appendChild(this.#status);
+        fill(this.#mainTest, -1);
+        if (this.#status !== undefined) this.#mainTest.appendChild(this.#status);
         this.#restoreFocus(keepIndex);
         this.#applySelection(false);
         this.#syncDraggable();
-        this.#win = {from: from, to: to};
-        this.#win_stamp = this.#stamp;
-        this.#win_rows = rows.length;
+        this.#win = { from: from, to: to };
+        this.#winStamp = this.#stamp;
+        this.#winRows = rows.length;
     }
 
     /**
@@ -799,7 +825,7 @@ class TreeView {
      * видимая: фокус остаётся в дереве, а не уходит в `body`.
      */
     #pinRow(rows, index) {
-        const position = this.#row_positions.get(index);
+        const position = this.#rowPositions.get(index);
         if (position !== undefined) return rows[position].index;
         let nearest = undefined;
         for (const row of rows) {
@@ -818,14 +844,18 @@ class TreeView {
         if (index === undefined) return;
         const record = this.#nodes[index];
         if (record === undefined || document.activeElement === record.button) return;
-        record.button.focus({preventScroll: true});
+        record.button.focus({ preventScroll: true });
     }
 
     /** Что сейчас в окне: {from, to} по плоскому списку (для стендов и приложений) */
-    getVirtualWindow() { return this.#win; }
+    getVirtualWindow() {
+        return this.#win;
+    }
 
     /** Переменная высота строк включена (`rowHeight`-функция или `variableHeight`) */
-    isVariableHeight() { return this.#isVariable(); }
+    isVariableHeight() {
+        return this.#isVariable();
+    }
 
     /** Высота строки с индексом модели: из данных, из замеров или заданная */
     getRowHeightAt(index = Number()) {
@@ -851,17 +881,17 @@ class TreeView {
             return;
         }
         // Позиция строки в плоском списке: карта проекции, чтобы не перебирать все строки
-        const modelIndex = this.#node_index.get(button);
-        const place = modelIndex === undefined ? undefined : this.#row_positions.get(modelIndex);
+        const modelIndex = this.#nodeIndex.get(button);
+        const place = modelIndex === undefined ? undefined : this.#rowPositions.get(modelIndex);
         if (place === undefined) return;
         // В переменном режиме верх и высота строки берутся из смещений проекции
         const variable = this.#isVariable();
-        const height = variable ? (this.#row_heights[place] || this.#rowHeight()) : this.#rowHeight();
-        const viewport = Math.max(1, this.#chui_tree_view.clientHeight);
+        const height = variable ? this.#rowHeights[place] || this.#rowHeight() : this.#rowHeight();
+        const viewport = Math.max(1, this.#chuiTreeView.clientHeight);
         const top = variable ? this.#offsets[place] : place * height;
-        const scrollTop = this.#chui_tree_view.scrollTop;
+        const scrollTop = this.#chuiTreeView.scrollTop;
         if (top < scrollTop || top + height > scrollTop + viewport) {
-            this.#chui_tree_view.scrollTop = Math.max(0, top - Math.floor(viewport / 2));
+            this.#chuiTreeView.scrollTop = Math.max(0, top - Math.floor(viewport / 2));
             this.#renderVirtual();
         }
         button.focus();
@@ -871,7 +901,7 @@ class TreeView {
     #onStructureClick = (event) => {
         const button = event.target instanceof Element ? event.target.closest("tree_view_button[aria-expanded]") : null;
         if (button === null) return;
-        const index = this.#node_index.get(button);
+        const index = this.#nodeIndex.get(button);
         if (index !== undefined) this.#syncSubtree(index);
         const panel = button.nextElementSibling;
         if (panel !== null && panel.tagName.toLowerCase() === "tree_view_panel") {
@@ -887,7 +917,7 @@ class TreeView {
         if (record === undefined || record.html === null) return;
         for (const child of [...record.html.children]) {
             if (child.tagName.toLowerCase() !== "tree_view_button") continue;
-            if (this.#node_index.has(child)) continue;
+            if (this.#nodeIndex.has(child)) continue;
             this.#register(child, index);
         }
     }
@@ -907,8 +937,8 @@ class TreeView {
     }
 
     #syncMove(source, target, position) {
-        const index = this.#node_index.get(source);
-        const targetIndex = this.#node_index.get(target);
+        const index = this.#nodeIndex.get(source);
+        const targetIndex = this.#nodeIndex.get(target);
         if (index === undefined || targetIndex === undefined) return;
         if (position === TreeView.DROP.INSIDE) this.#relink(index, targetIndex);
         else {
@@ -921,17 +951,23 @@ class TreeView {
     }
 
     // === ПОИСК ===
-    getSearchQuery() { return this.#query; }
-    isSearching() { return this.#query !== ""; }
+    getSearchQuery() {
+        return this.#query;
+    }
+    isSearching() {
+        return this.#query !== "";
+    }
     /** Совпадения поиска (описания из фабрик), в порядке показа */
-    getMatches() { return [...this.#matches].map((node) => this.#descriptor(node)); }
+    getMatches() {
+        return [...this.#matches].map((node) => this.#descriptor(node));
+    }
 
     /**
      * Показать только подходящие узлы и цепочку их предков; остальное убирается (`display: none`),
      * поэтому навигация и выбор дальше работают по видимому. `autoExpand` раскрывает предков
      * (без него совпадения внутри свёрнутых веток остаются скрытыми), `highlight` подсвечивает совпадения.
      */
-    search(query = String(), options = {autoExpand: true, highlight: true}) {
+    search(query = String(), options = { autoExpand: true, highlight: true }) {
         this.clearSearch();
         const text = String(query).trim().toLocaleLowerCase();
         if (text === "") return this;
@@ -939,10 +975,10 @@ class TreeView {
         // В виртуальном режиме в документе только окно — ищем и скрываем по модели
         if (this.#virtual !== undefined) {
             this.#searchModel(text, options);
-            this.#announce(I18n.t("treeView.found", {count: this.#matches.size}));
+            this.#announce(I18n.t("treeView.found", { count: this.#matches.size }));
             return this;
         }
-        const buttons = [...this.#main_test.querySelectorAll("tree_view_button")];
+        const buttons = [...this.#mainTest.querySelectorAll("tree_view_button")];
         const visible = new Set();
         for (const button of buttons) {
             if (!this.#title(button).toLocaleLowerCase().includes(text)) continue;
@@ -964,7 +1000,7 @@ class TreeView {
             }
         }
         for (const button of buttons) if (!visible.has(button)) button.classList.add(TreeView.#HIDDEN_CLASS);
-        for (const panel of this.#main_test.querySelectorAll("tree_view_panel")) {
+        for (const panel of this.#mainTest.querySelectorAll("tree_view_panel")) {
             if (!visible.has(panel)) panel.classList.add(TreeView.#HIDDEN_CLASS);
             // Раскрытая панель должна быть видна целиком: max-height после раскрытия пересчитываем
             else if (panel.style.maxHeight !== "") panel.style.maxHeight = "max-content";
@@ -972,7 +1008,7 @@ class TreeView {
         if (options.highlight !== false) for (const node of this.#matches) node.classList.add("tree_view_button_match");
         this.#touch();
         if (this.#virtual !== undefined) this.#renderVirtual();
-        this.#announce(I18n.t("treeView.found", {count: this.#matches.size}));
+        this.#announce(I18n.t("treeView.found", { count: this.#matches.size }));
         return this;
     }
 
@@ -1000,7 +1036,9 @@ class TreeView {
         return this;
     }
 
-    collapse(target) { return this.expand(target, false); }
+    collapse(target) {
+        return this.expand(target, false);
+    }
 
     /** Раскрыть всё: в виртуальном режиме — единственный способ, строки вне окна не кликнуть */
     expandAll() {
@@ -1014,7 +1052,8 @@ class TreeView {
     }
 
     getExpanded() {
-        return this.#nodes.filter((record) => record.button.getAttribute("aria-expanded") === "true")
+        return this.#nodes
+            .filter((record) => record.button.getAttribute("aria-expanded") === "true")
             .map((record) => this.#descriptor(record.button));
     }
 
@@ -1022,7 +1061,7 @@ class TreeView {
         if (target === undefined || target === null) return undefined;
         const node = target instanceof Element ? target : target.button;
         if (!(node instanceof Element)) return undefined;
-        const index = this.#node_index.get(node);
+        const index = this.#nodeIndex.get(node);
         return index === undefined ? undefined : this.#nodes[index];
     }
 
@@ -1045,14 +1084,16 @@ class TreeView {
             }
         }
         for (const record of this.#nodes) record.hidden = !visible.has(record.index);
-        if (options.highlight !== false) for (const button of this.#matches) button.classList.add("tree_view_button_match");
+        if (options.highlight !== false)
+            for (const button of this.#matches) button.classList.add("tree_view_button_match");
         this.#touch();
         this.#renderVirtual();
     }
 
     /** Снять фильтр поиска: возвращает все узлы и снимает подсветку */
     clearSearch() {
-        for (const node of this.#main_test.querySelectorAll("." + TreeView.#HIDDEN_CLASS)) node.classList.remove(TreeView.#HIDDEN_CLASS);
+        for (const node of this.#mainTest.querySelectorAll("." + TreeView.#HIDDEN_CLASS))
+            node.classList.remove(TreeView.#HIDDEN_CLASS);
         for (const node of this.#matches) node.classList.remove("tree_view_button_match");
         for (const record of this.#nodes) record.hidden = false;
         const wasSearching = this.#query !== "";
@@ -1067,10 +1108,12 @@ class TreeView {
     // Статус поиска читает скринридер (узла нет, пока поиск не использовался)
     #announce(text = String()) {
         if (this.#status === undefined) {
-            this.#status = Object.assign(document.createElement("chui_visually_hidden"), {className: "chui_visually_hidden"});
+            this.#status = Object.assign(document.createElement("chui_visually_hidden"), {
+                className: "chui_visually_hidden",
+            });
             this.#status.setAttribute("role", "status");
             this.#status.setAttribute("aria-live", "polite");
-            this.#main_test.appendChild(this.#status);
+            this.#mainTest.appendChild(this.#status);
         }
         this.#status.innerText = text;
     }
@@ -1078,8 +1121,8 @@ class TreeView {
     // === ОБРАБОТЧИКИ ===
     #onClick = (event) => {
         const node = event.target instanceof Element ? event.target.closest("tree_view_button") : null;
-        if (node === null || !this.#main_test.contains(node)) return;
-        const multiple = this.#selection_mode === TreeView.SELECTION.MULTIPLE;
+        if (node === null || !this.#mainTest.contains(node)) return;
+        const multiple = this.#selectionMode === TreeView.SELECTION.MULTIPLE;
         if (multiple && (event.ctrlKey || event.metaKey)) this.#toggleNode(node);
         else if (multiple && event.shiftKey) this.#selectRange(node);
         else {
@@ -1097,16 +1140,16 @@ class TreeView {
         if (!event.ctrlKey && !event.metaKey && !event.shiftKey) return;
         const target = event.target instanceof Element ? event.target : document.activeElement;
         const node = target instanceof Element ? target.closest("tree_view_button") : null;
-        if (node === null || !this.#main_test.contains(node)) return;
+        if (node === null || !this.#mainTest.contains(node)) return;
         event.preventDefault();
         event.stopPropagation();
-        if (event.shiftKey && this.#selection_mode === TreeView.SELECTION.MULTIPLE) this.#selectRange(node);
+        if (event.shiftKey && this.#selectionMode === TreeView.SELECTION.MULTIPLE) this.#selectRange(node);
         else this.#toggleNode(node);
     };
 
     #onNavigationKeyDown = (event) => {
         const items = this.#items();
-        const current = items.findIndex(item => item === document.activeElement);
+        const current = items.findIndex((item) => item === document.activeElement);
         if (current === -1) return;
         if (event.key === "ArrowDown" || event.key === "ArrowUp") {
             if (event.altKey && this.#draggable) {
@@ -1126,7 +1169,7 @@ class TreeView {
                 document.activeElement.click();
             }
         } else if (event.key === "ArrowLeft") {
-            const parent = document.activeElement.parentElement.closest('tree_view_button[aria-expanded]');
+            const parent = document.activeElement.parentElement.closest("tree_view_button[aria-expanded]");
             if (document.activeElement.getAttribute("aria-expanded") === "true") {
                 event.preventDefault();
                 document.activeElement.click();
@@ -1140,7 +1183,7 @@ class TreeView {
     // Клавиатурная альтернатива перетаскиванию: Alt+↑/↓ переставляет узел среди соседей.
     // Соседей берём из модели: в виртуальном режиме в DOM только окно
     #moveByKeyboard(node, step) {
-        const index = this.#node_index.get(node);
+        const index = this.#nodeIndex.get(node);
         if (index === undefined) return;
         const parent = this.#nodes[index].parent;
         const siblings = parent === -1 ? this.#roots : this.#nodes[parent].children;
@@ -1149,14 +1192,14 @@ class TreeView {
         const target = this.#nodes[targetIndex].button;
         const position = step < 0 ? TreeView.DROP.BEFORE : TreeView.DROP.AFTER;
         if (!this.#moveNodes(node, target, position)) return;
-        if (this.#on_drop !== undefined) this.#on_drop(this.#descriptor(node), this.#descriptor(target), position);
+        if (this.#onDrop !== undefined) this.#onDrop(this.#descriptor(node), this.#descriptor(target), position);
         node.focus();
     }
 
     #onDragStart = (event) => {
         const node = event.target instanceof Element ? event.target.closest("tree_view_button") : null;
         if (node === null) return;
-        this.#drag_source = node;
+        this.#dragSource = node;
         node.classList.add(DRAGGING_CLASS);
         if (event.dataTransfer === null) return;
         event.dataTransfer.effectAllowed = "move";
@@ -1164,10 +1207,10 @@ class TreeView {
     };
 
     #onDragOver = (event) => {
-        if (this.#drag_source === undefined) return;
+        if (this.#dragSource === undefined) return;
         const target = event.target instanceof Element ? event.target.closest("tree_view_button") : null;
         // В себя и в собственное поддерево бросать нельзя: узел потерял бы ветку
-        if (target === null || this.#inOwnSubtree(this.#drag_source, target)) {
+        if (target === null || this.#inOwnSubtree(this.#dragSource, target)) {
             this.#applyDropTarget(undefined, undefined);
             if (event.dataTransfer !== null) event.dataTransfer.dropEffect = "none";
             return;
@@ -1178,20 +1221,20 @@ class TreeView {
     };
 
     #onDragLeave = (event) => {
-        if (event.relatedTarget instanceof Element && this.#main_test.contains(event.relatedTarget)) return;
+        if (event.relatedTarget instanceof Element && this.#mainTest.contains(event.relatedTarget)) return;
         this.#applyDropTarget(undefined, undefined);
     };
 
     #onDropEvent = (event) => {
-        if (this.#drag_source === undefined || this.#drop_target === undefined) return;
+        if (this.#dragSource === undefined || this.#dropTarget === undefined) return;
         event.preventDefault();
-        const source = this.#drag_source;
-        const target = this.#drop_target.node;
-        const position = this.#drop_target.position;
+        const source = this.#dragSource;
+        const target = this.#dropTarget.node;
+        const position = this.#dropTarget.position;
         this.#applyDropTarget(undefined, undefined);
         this.#finishDrag();
-        if (this.#move_on_drop) this.#moveNodes(source, target, position);
-        if (this.#on_drop !== undefined) this.#on_drop(this.#descriptor(source), this.#descriptor(target), position);
+        if (this.#moveOnDrop) this.#moveNodes(source, target, position);
+        if (this.#onDrop !== undefined) this.#onDrop(this.#descriptor(source), this.#descriptor(target), position);
     };
 
     #onDragEnd = () => {
@@ -1200,88 +1243,90 @@ class TreeView {
     };
 
     static Button(options = { title: String(), listener: () => {} }) {
-        let button = document.createElement('tree_view_button');
+        const button = document.createElement("tree_view_button");
         if (options.listener !== undefined) button.addEventListener("click", options.listener);
         makeKeyboardButton(button, "treeitem");
-        let button_text = document.createElement('tree_view_button_text');
-        button_text.innerHTML = options.title;
-        button.appendChild(button_text)
-        const item = {title: options.title, button: button};
+        const buttonText = document.createElement("tree_view_button_text");
+        // Заголовок — текст, а не разметка: в `title` приходят имена файлов и папок, а тот же
+        // узел читается как `textContent` (`#title`), и поиск сравнивал бы текст с тегами
+        buttonText.textContent = options.title;
+        button.appendChild(buttonText);
+        const item = { title: options.title, button: button };
         TreeView.#registry.set(button, item);
         return item;
     }
 
     static ExpandButton(options = { title: String(), subButtons: [], components: [], lazySubButtons: undefined }) {
-        let button = document.createElement('tree_view_button');
-        let panel = document.createElement('tree_view_panel')
+        const button = document.createElement("tree_view_button");
+        const panel = document.createElement("tree_view_panel");
         // Раскрытая панель переходит с фиксированной высоты на max-content: иначе высота
         // остаётся «замороженной» после первого раскрытия
         const transitionEndEvent = (event) => {
             const target = event.currentTarget;
             if (target.style.maxHeight && target.style.maxHeight !== "0px") target.style.maxHeight = "max-content";
         };
-        panel.id = "chui_tree_panel_" + (tree_panel_counter += 1);
+        panel.id = "chui_tree_panel_" + (treePanelCounter += 1);
         button.setAttribute("aria-controls", panel.id);
         button.setAttribute("aria-expanded", "false");
         makeKeyboardButton(button, "treeitem");
-        button.addEventListener('click', () => {
+        button.addEventListener("click", () => {
             buildSubs();
-            const open = !button.classList.contains('tree_view_button_active');
-            button.classList.toggle('tree_view_button_active', open);
+            const open = !button.classList.contains("tree_view_button_active");
+            button.classList.toggle("tree_view_button_active", open);
             // Стрелка поворачивается по aria-expanded (styles.css) — состояние одно
             button.setAttribute("aria-expanded", open ? "true" : "false");
             if (open) {
                 panel.style.maxHeight = panel.scrollHeight + "px";
-                panel.addEventListener('transitionend', transitionEndEvent);
+                panel.addEventListener("transitionend", transitionEndEvent);
             } else {
                 // Сначала фиксируем текущую высоту, иначе сжатие не анимируется
                 panel.style.maxHeight = panel.scrollHeight + "px";
                 void panel.offsetHeight;
                 panel.style.maxHeight = "0px";
             }
-        })
-        let button_text = document.createElement('tree_view_button_text');
-        button_text.innerHTML = options.title;
-        button.appendChild(button_text)
-        let barrow = document.createElement('tree_view_button_arrow')
+        });
+        const buttonText = document.createElement("tree_view_button_text");
+        buttonText.textContent = options.title;
+        button.appendChild(buttonText);
+        const barrow = document.createElement("tree_view_button_arrow");
         barrow.innerHTML = new Icon(Icons.HARDWARE.KEYBOARD_ARROW_DOWN).getHTML();
-        button.appendChild(barrow)
-        let html = document.createElement('tree_view_html')
+        button.appendChild(barrow);
+        const html = document.createElement("tree_view_html");
         // Ленивое поддерево: содержимое строится один раз — при первом раскрытии,
         // поэтому большое дерево не занимает DOM заранее (lazySubButtons: () => [...])
-        let subs_built = false;
+        let subButtonsBuilt = false;
         const buildSubs = () => {
-            if (subs_built) return;
-            subs_built = true;
+            if (subButtonsBuilt) return;
+            subButtonsBuilt = true;
             if (options.subButtons !== undefined) {
-                options.subButtons.forEach(sub => {
-                    html.appendChild(sub.button)
+                options.subButtons.forEach((sub) => {
+                    html.appendChild(sub.button);
                     if (sub.panel !== undefined) {
-                        html.appendChild(sub.panel)
+                        html.appendChild(sub.panel);
                     }
-                })
+                });
             }
             if (options.components !== undefined) {
-                options.components.forEach(sub => {
-                    html.appendChild(sub.set())
-                })
+                options.components.forEach((sub) => {
+                    html.appendChild(sub.set());
+                });
             }
             if (options.lazySubButtons !== undefined) {
-                options.lazySubButtons().forEach(sub => {
-                    html.appendChild(sub.button)
+                options.lazySubButtons().forEach((sub) => {
+                    html.appendChild(sub.button);
                     if (sub.panel !== undefined) {
-                        html.appendChild(sub.panel)
+                        html.appendChild(sub.panel);
                     }
-                })
+                });
             }
         };
         // Без ленивой фабрики поведение прежнее — строим сразу
         if (options.lazySubButtons === undefined) buildSubs();
-        panel.appendChild(html)
-        const item = {title: options.title, button: button, panel: panel};
+        panel.appendChild(html);
+        const item = { title: options.title, button: button, panel: panel };
         TreeView.#registry.set(button, item);
         return item;
     }
 }
 
-exports.TreeView = TreeView
+exports.TreeView = TreeView;