chuijs 4.0.3 → 4.0.4

package/framework/components/chui_tree_view/tree_view.js

@@ -3,7 +3,7 @@ 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";
@@ -69,17 +69,17 @@ class TreeView {
     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,28 +87,28 @@ 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;
 
@@ -130,9 +130,9 @@ class TreeView {
         }
     ) {
         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;
+        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
@@ -144,73 +144,73 @@ class TreeView {
         // `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.#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(
+        if (options.deferRender === true) treeNode.classList.add("tree_view_defer");
+        if (this.#selectionMode !== TreeView.SELECTION.NONE) {
+            treeNode.setAttribute(
                 "aria-multiselectable",
-                this.#selection_mode === TreeView.SELECTION.MULTIPLE ? "true" : "false"
+                this.#selectionMode === TreeView.SELECTION.MULTIPLE ? "true" : "false"
             );
-            main_test.addEventListener("click", this.#onClick);
+            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");
+                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) и отпустить модель строк: плоский список
@@ -222,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;
@@ -251,7 +251,7 @@ class TreeView {
 
     // === ВЫБОР ===
     getSelectionMode() {
-        return this.#selection_mode;
+        return this.#selectionMode;
     }
 
     /** Описания выбранных узлов — те же объекты, что вернули фабрики */
@@ -295,7 +295,7 @@ class TreeView {
     // строки могут быть вне документа, но остаются видимыми по смыслу
     #items() {
         if (this.#virtual === undefined) {
-            return [...this.#main_test.querySelectorAll("tree_view_button")].filter((button) =>
+            return [...this.#mainTest.querySelectorAll("tree_view_button")].filter((button) =>
                 this.#isVisibleRow(button)
             );
         }
@@ -320,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);
     }
 
@@ -332,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;
     }
@@ -349,12 +349,12 @@ 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)
+            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) {
@@ -367,7 +367,7 @@ class TreeView {
 
     #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;
@@ -401,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;
@@ -425,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 };
         }
     }
 
@@ -462,8 +462,8 @@ 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) {
@@ -484,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);
         }
@@ -495,7 +495,7 @@ class TreeView {
 
     /** Структура изменилась: плоский список и окно надо пересобрать */
     #touch() {
-        this.#rows_dirty = true;
+        this.#rowsDirty = true;
         this.#stamp += 1;
     }
 
@@ -516,7 +516,7 @@ class TreeView {
             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) {
@@ -535,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();
@@ -571,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;
     }
 
@@ -593,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;
         }
@@ -619,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;
             }
         }
     }
@@ -634,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);
     }
 
@@ -648,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 = () => {
@@ -679,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;
             }
         }
@@ -695,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;
@@ -713,8 +713,8 @@ 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) =>
@@ -730,7 +730,7 @@ 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 (
@@ -738,13 +738,13 @@ class TreeView {
             this.#win !== undefined &&
             from === this.#win.from &&
             to === this.#win.to &&
-            this.#win_rows === rows.length &&
-            this.#win_stamp === this.#stamp
+            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++) {
@@ -763,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");
@@ -771,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) {
@@ -789,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`;
@@ -809,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.#winStamp = this.#stamp;
+        this.#winRows = rows.length;
     }
 
     /**
@@ -825,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) {
@@ -881,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();
@@ -901,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") {
@@ -917,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);
         }
     }
@@ -937,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 {
@@ -978,7 +978,7 @@ class TreeView {
             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;
@@ -1000,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";
@@ -1061,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];
     }
 
@@ -1092,7 +1092,7 @@ class TreeView {
 
     /** Снять фильтр поиска: возвращает все узлы и снимает подсветку */
     clearSearch() {
-        for (const node of this.#main_test.querySelectorAll("." + 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;
@@ -1113,7 +1113,7 @@ class TreeView {
             });
             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;
     }
@@ -1121,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 {
@@ -1140,10 +1140,10 @@ 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);
     };
 
@@ -1183,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;
@@ -1192,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";
@@ -1207,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;
@@ -1221,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 = () => {
@@ -1243,27 +1243,29 @@ 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 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");
@@ -1283,19 +1285,19 @@ class TreeView {
                 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");
+        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);