chuijs 4.0.2 → 4.0.4

package/framework/components/chui_json_viewer/json_viewer.js

@@ -1,8 +1,8 @@
-const {setStyles} = require("../../modules/chui_functions");
-const {Icon, Icons} = require("../chui_icons/icons");
-const {installHighlightStyles} = require("../../modules/chui_highlight/chui_highlight");
-const {Json} = require("../../modules/chui_json/chui_json");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
+const { setStyles } = require("../../modules/chui_functions");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { installHighlightStyles } = require("../../modules/chui_highlight/chui_highlight");
+const { Json } = require("../../modules/chui_json/chui_json");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /** Типы узлов JSON */
 const TYPE = {
@@ -11,7 +11,7 @@ const TYPE = {
     STRING: "string",
     NUMBER: "number",
     BOOLEAN: "boolean",
-    NULL: "null"
+    NULL: "null",
 };
 
 /**
@@ -58,8 +58,8 @@ class JsonViewer {
     #title = document.createElement("json_viewer_title");
     #head = document.createElement("json_viewer_head");
     #search = document.createElement("input");
-    #search_box = document.createElement("json_viewer_search_box");
-    #search_clear = document.createElement("button");
+    #searchBox = document.createElement("json_viewer_search_box");
+    #searchClear = document.createElement("button");
     #expand = document.createElement("button");
     #collapse = document.createElement("button");
     #tree = document.createElement("json_viewer_tree");
@@ -68,40 +68,42 @@ class JsonViewer {
     #status = document.createElement("json_viewer_status");
     #id = undefined;
     #value = undefined;
-    #has_value = false;
+    #hasValue = false;
     #expanded = new Set();
-    #search_text = "";
+    #searchText = "";
     #searchable = true;
     #height = "320px";
-    #title_text = undefined;
-    #label_text = undefined;
-    #empty_text = undefined;
-    #error_object = undefined;
-    #active_path = undefined;
-    #focus_path = undefined;
-
-    constructor(options = {
-        id: String(),
-        title: String(),
-        label: String(),
-        value: undefined,
-        text: String(),
-        expandDepth: Number(),
-        expanded: Array(),
-        searchable: Boolean(),
-        height: String(),
-        emptyText: String()
-    }) {
+    #titleText = undefined;
+    #labelText = undefined;
+    #emptyText = undefined;
+    #errorObject = undefined;
+    #activePath = undefined;
+    #focusedPath = undefined;
+
+    constructor(
+        options = {
+            id: String(),
+            title: String(),
+            label: String(),
+            value: undefined,
+            text: String(),
+            expandDepth: Number(),
+            expanded: Array(),
+            searchable: Boolean(),
+            height: String(),
+            emptyText: String(),
+        }
+    ) {
         installHighlightStyles();
         setStyles(__dirname + "/styles.css", "chUiJS_JsonViewer");
         JsonViewer.#counter += 1;
         this.#id = options.id === undefined ? `chui_json_viewer_${JsonViewer.#counter}` : options.id;
         this.#root.id = this.#id;
         this.#root.setAttribute("role", "group");
-        this.#label_text = options.label;
+        this.#labelText = options.label;
         this.#searchable = options.searchable !== false;
-        if (options.emptyText !== undefined) this.#empty_text = String(options.emptyText);
-        else this.#empty_text = I18n.t("jsonViewer.empty");
+        if (options.emptyText !== undefined) this.#emptyText = String(options.emptyText);
+        else this.#emptyText = I18n.t("jsonViewer.empty");
         this.#title.className = "json_viewer_title";
         this.#title.id = `${this.#id}_title`;
         this.#head.className = "json_viewer_head";
@@ -128,20 +130,20 @@ class JsonViewer {
         this.#status.setAttribute("role", "status");
         this.#status.setAttribute("aria-live", "polite");
         // Кнопка очистки — своя: системная кнопка очистки у `input[type=search]` скрыта (см. стили)
-        this.#search_box.className = "json_viewer_search_box";
-        this.#search_clear.type = "button";
-        this.#search_clear.className = "json_viewer_search_clear";
-        this.#search_clear.setAttribute("aria-label", I18n.t("jsonViewer.clearSearch"));
-        const clear_glyph = new Icon(Icons.NAVIGATION.CLOSE, "16px").set();
-        clear_glyph.setAttribute("aria-hidden", "true");
-        this.#search_clear.appendChild(clear_glyph);
-        this.#search_clear.addEventListener("click", () => {
+        this.#searchBox.className = "json_viewer_search_box";
+        this.#searchClear.type = "button";
+        this.#searchClear.className = "json_viewer_search_clear";
+        this.#searchClear.setAttribute("aria-label", I18n.t("jsonViewer.clearSearch"));
+        const clearGlyph = new Icon(Icons.NAVIGATION.CLOSE, "16px").set();
+        clearGlyph.setAttribute("aria-hidden", "true");
+        this.#searchClear.appendChild(clearGlyph);
+        this.#searchClear.addEventListener("click", () => {
             this.setSearch("");
             this.#search.focus();
         });
-        this.#search_box.appendChild(this.#search);
-        this.#search_box.appendChild(this.#search_clear);
-        if (this.#searchable) this.#head.appendChild(this.#search_box);
+        this.#searchBox.appendChild(this.#search);
+        this.#searchBox.appendChild(this.#searchClear);
+        if (this.#searchable) this.#head.appendChild(this.#searchBox);
         this.#syncClear();
         this.#head.appendChild(this.#expand);
         this.#head.appendChild(this.#collapse);
@@ -153,7 +155,7 @@ class JsonViewer {
         this.#root.appendChild(this.#status);
         if (options.title !== undefined) this.setTitle(options.title);
         else this.#title.hidden = true;
-        this.setLabel(this.#label_text === undefined ? I18n.t("jsonViewer.title") : this.#label_text);
+        this.setLabel(this.#labelText === undefined ? I18n.t("jsonViewer.title") : this.#labelText);
         // Высота из опций: без неё остаётся своя по умолчанию (320px, дерево прокручивается)
         this.setHeight(options.height === undefined ? this.#height : options.height);
         if (options.text !== undefined) this.setText(options.text);
@@ -175,11 +177,11 @@ class JsonViewer {
     }
 
     getTitle() {
-        return this.#title_text;
+        return this.#titleText;
     }
 
     getLabel() {
-        return this.#label_text;
+        return this.#labelText;
     }
 
     /** Данные как есть (без разбора и сериализации) */
@@ -189,11 +191,11 @@ class JsonViewer {
 
     /** Компактный JSON текущих данных */
     getText() {
-        return this.#has_value ? Json.minify(this.#value) : "";
+        return this.#hasValue ? Json.minify(this.#value) : "";
     }
 
     hasValue() {
-        return this.#has_value;
+        return this.#hasValue;
     }
 
     /** Путь верхнего узла: `$`, дальше `$.ключ`, `$[0]` */
@@ -203,20 +205,20 @@ class JsonViewer {
 
     /** Ошибка разбора текста (`text`): `{message, line?, column?, offset?}` или `undefined` */
     getError() {
-        return this.#error_object;
+        return this.#errorObject;
     }
 
     /** Текст ошибки разбора словами (пустая строка, если разбор прошёл) */
     getErrorText() {
-        return Json.errorText(this.#error_object);
+        return Json.errorText(this.#errorObject);
     }
 
     getSearch() {
-        return this.#search_text;
+        return this.#searchText;
     }
 
     isSearching() {
-        return this.#search_text.trim() !== "";
+        return this.#searchText.trim() !== "";
     }
 
     isSearchable() {
@@ -230,14 +232,14 @@ class JsonViewer {
 
     /** Пути совпадений поиска по всему документу */
     getMatches() {
-        const query = this.#search_text.trim().toLowerCase();
+        const query = this.#searchText.trim().toLowerCase();
         if (query === "") return [];
         const matches = [];
         const walk = (node) => {
             if (this.#matchesNode(node, query)) matches.push(node.path);
             for (const child of JsonViewer.#childrenOf(node)) walk(child);
         };
-        if (this.#has_value) walk(this.#rootNode());
+        if (this.#hasValue) walk(this.#rootNode());
         return matches;
     }
 
@@ -254,13 +256,13 @@ class JsonViewer {
     }
 
     getEmptyText() {
-        return this.#empty_text;
+        return this.#emptyText;
     }
 
     /** Значение по пути (`$.a.b[2]`) или `undefined`, если такого узла нет */
     getValueAt(path = String()) {
         const segments = JsonViewer.#readPath(path);
-        if (segments === undefined || !this.#has_value) return undefined;
+        if (segments === undefined || !this.#hasValue) return undefined;
         let current = this.#value;
         for (const segment of segments) {
             if (current === null || current === undefined || typeof current !== "object") return undefined;
@@ -279,7 +281,7 @@ class JsonViewer {
     }
 
     setTitle(text = undefined) {
-        this.#title_text = text;
+        this.#titleText = text;
         if (text === undefined || text === "") {
             this.#title.hidden = true;
             this.#title.innerText = "";
@@ -293,7 +295,7 @@ class JsonViewer {
     }
 
     setLabel(text = undefined) {
-        this.#label_text = text;
+        this.#labelText = text;
         this.#syncLabel();
         return this;
     }
@@ -301,8 +303,8 @@ class JsonViewer {
     /** Данные для показа: любой JSON-совместимый набор (без разбора текста) */
     setValue(value = undefined) {
         this.#value = value;
-        this.#has_value = value !== undefined;
-        this.#error_object = undefined;
+        this.#hasValue = value !== undefined;
+        this.#errorObject = undefined;
         this.#error.hidden = true;
         this.#expanded = new Set([...this.#expanded].filter((path) => this.#hasPath(path)));
         this.#render();
@@ -315,15 +317,15 @@ class JsonViewer {
         const result = Json.parse(text === undefined || text === null ? "" : text);
         if (!result.ok) {
             this.#value = undefined;
-            this.#has_value = false;
-            this.#error_object = result.error;
+            this.#hasValue = false;
+            this.#errorObject = result.error;
             this.#error.innerText = Json.errorText(result.error);
             this.#error.hidden = false;
             this.#render();
             this.#announce();
             return this;
         }
-        this.#error_object = undefined;
+        this.#errorObject = undefined;
         this.#error.hidden = true;
         return this.setValue(result.value);
     }
@@ -332,7 +334,7 @@ class JsonViewer {
     expandDepth(depth = Number()) {
         const limit = Number.isFinite(Number(depth)) ? Math.max(0, Math.floor(Number(depth))) : Infinity;
         this.#expanded = new Set();
-        if (this.#has_value) {
+        if (this.#hasValue) {
             const walk = (node, level) => {
                 if (level >= limit) return;
                 if (!JsonViewer.#isContainer(node.value)) return;
@@ -361,7 +363,7 @@ class JsonViewer {
 
     expandAll() {
         this.#expanded = new Set();
-        if (this.#has_value) {
+        if (this.#hasValue) {
             const walk = (node) => {
                 if (!JsonViewer.#isContainer(node.value)) return;
                 this.#expanded.add(node.path);
@@ -388,8 +390,8 @@ class JsonViewer {
 
     /** Поиск по ключам и значениям; пустая строка снимает поиск */
     setSearch(query = String()) {
-        this.#search_text = query === undefined || query === null ? "" : String(query);
-        if (this.#search.value !== this.#search_text) this.#search.value = this.#search_text;
+        this.#searchText = query === undefined || query === null ? "" : String(query);
+        if (this.#search.value !== this.#searchText) this.#search.value = this.#searchText;
         this.#syncClear();
         this.#render();
         this.#announce();
@@ -398,7 +400,7 @@ class JsonViewer {
 
     /** Кнопка очистки видна, только когда есть что очищать */
     #syncClear() {
-        this.#search_clear.hidden = this.#search_text === "";
+        this.#searchClear.hidden = this.#searchText === "";
         return this;
     }
 
@@ -420,7 +422,7 @@ class JsonViewer {
     }
 
     setEmptyText(text = String()) {
-        this.#empty_text = text === undefined ? "" : String(text);
+        this.#emptyText = text === undefined ? "" : String(text);
         this.#render();
         return this;
     }
@@ -471,7 +473,7 @@ class JsonViewer {
                 const match = /^\.("(?:\\.|[^"\\])*"|[^.[\]]+)/.exec(text.slice(index));
                 if (match === null) return undefined;
                 const raw = match[1];
-                segments.push(raw.startsWith("\"") ? JSON.parse(raw) : raw);
+                segments.push(raw.startsWith('"') ? JSON.parse(raw) : raw);
                 index += match[0].length;
                 continue;
             }
@@ -502,21 +504,30 @@ class JsonViewer {
 
     static #childrenOf(node = Object()) {
         if (Array.isArray(node.value)) {
-            return node.value.map((item, index) => ({path: `${node.path}[${index}]`, key: String(index), index: index, value: item}));
+            return node.value.map((item, index) => ({
+                path: `${node.path}[${index}]`,
+                key: String(index),
+                index: index,
+                value: item,
+            }));
         }
         if (JsonViewer.#typeOf(node.value) === TYPE.OBJECT) {
-            return Object.keys(node.value).map((key) => ({path: `${node.path}.${JsonViewer.#pathKey(key)}`, key: key, value: node.value[key]}));
+            return Object.keys(node.value).map((key) => ({
+                path: `${node.path}.${JsonViewer.#pathKey(key)}`,
+                key: key,
+                value: node.value[key],
+            }));
         }
         return [];
     }
 
     #rootNode() {
-        return {path: this.getRootPath(), key: undefined, value: this.#value};
+        return { path: this.getRootPath(), key: undefined, value: this.#value };
     }
 
     /** Есть ли такой путь в текущих данных (для чистки раскрытых путей после setValue) */
     #hasPath(path = String()) {
-        if (path === this.getRootPath()) return this.#has_value;
+        if (path === this.getRootPath()) return this.#hasValue;
         const segments = JsonViewer.#readPath(path);
         return segments !== undefined && this.#valueAt(segments) !== undefined;
     }
@@ -550,12 +561,12 @@ class JsonViewer {
 
     /** Видимые узлы деревом: при поиске — совпадения с предками, без поиска — раскрытые ветки */
     #visibleNodes() {
-        if (!this.#has_value) return [];
+        if (!this.#hasValue) return [];
         const list = [];
-        const query = this.#search_text.trim().toLowerCase();
+        const query = this.#searchText.trim().toLowerCase();
         const walk = (node, level) => {
             if (query !== "" && !this.#matchesTree(node, query)) return;
-            list.push({node: node, level: level});
+            list.push({ node: node, level: level });
             if (!this.#isOpen(node, query)) return;
             for (const child of JsonViewer.#childrenOf(node)) walk(child, level + 1);
         };
@@ -571,13 +582,13 @@ class JsonViewer {
     }
 
     #accessibleName() {
-        if (this.#title_text !== undefined && this.#title_text !== "") return this.#title_text;
-        if (this.#label_text !== undefined && this.#label_text !== "") return this.#label_text;
+        if (this.#titleText !== undefined && this.#titleText !== "") return this.#titleText;
+        if (this.#labelText !== undefined && this.#labelText !== "") return this.#labelText;
         return I18n.t("jsonViewer.title");
     }
 
     #syncLabel() {
-        if (this.#title_text !== undefined && this.#title_text !== "") {
+        if (this.#titleText !== undefined && this.#titleText !== "") {
             this.#root.setAttribute("aria-labelledby", this.#title.id);
             this.#root.removeAttribute("aria-label");
         } else {
@@ -585,14 +596,14 @@ class JsonViewer {
             this.#root.setAttribute("aria-label", this.#accessibleName());
         }
         // Дерево внутри тоже с ролью, поэтому ему нужно своё имя — оттуда же
-        this.#tree.setAttribute("aria-label", I18n.t("jsonViewer.dataTree", {name: this.#accessibleName()}));
+        this.#tree.setAttribute("aria-label", I18n.t("jsonViewer.dataTree", { name: this.#accessibleName() }));
         return this;
     }
 
     #summaryText(value = undefined) {
         // Форму числа выбирает словарь через `Intl.PluralRules` — русские склонения больше не в коде
-        if (Array.isArray(value)) return I18n.t("jsonViewer.elements", {count: value.length});
-        return I18n.t("jsonViewer.properties", {count: Object.keys(value).length});
+        if (Array.isArray(value)) return I18n.t("jsonViewer.elements", { count: value.length });
+        return I18n.t("jsonViewer.properties", { count: Object.keys(value).length });
     }
 
     #toggleNode(node = Object(), open = Boolean()) {
@@ -601,7 +612,10 @@ class JsonViewer {
         toggle.className = "json_viewer_toggle";
         // Стрелка не отдельная остановка: у дерева одна остановка на узел
         toggle.setAttribute("tabindex", "-1");
-        toggle.setAttribute("aria-label", I18n.t(open ? "a11y.collapseNode" : "a11y.expandNode", {name: this.#nodeName(node)}));
+        toggle.setAttribute(
+            "aria-label",
+            I18n.t(open ? "a11y.collapseNode" : "a11y.expandNode", { name: this.#nodeName(node) })
+        );
         toggle.dataset.path = node.path;
         const glyph = new Icon(Icons.NAVIGATION.CHEVRON_RIGHT, "18px").set();
         glyph.setAttribute("aria-hidden", "true");
@@ -612,7 +626,7 @@ class JsonViewer {
     #rowNode(entry = Object()) {
         const node = entry.node;
         const container = JsonViewer.#isContainer(node.value);
-        const query = this.#search_text.trim().toLowerCase();
+        const query = this.#searchText.trim().toLowerCase();
         const open = this.#isOpen(node, query);
         const row = document.createElement("div");
         row.className = "json_viewer_row";
@@ -652,18 +666,18 @@ class JsonViewer {
         if (type === TYPE.OBJECT || type === TYPE.ARRAY) {
             const wrap = document.createElement("span");
             wrap.className = "json_viewer_container";
-            const [open_brace, close_brace] = type === TYPE.ARRAY ? ["[", "]"] : ["{", "}"];
+            const [openBrace, closeBrace] = type === TYPE.ARRAY ? ["[", "]"] : ["{", "}"];
             const left = document.createElement("span");
             left.className = "json_viewer_brace code_token_operator";
             left.setAttribute("aria-hidden", "true");
-            left.innerText = open_brace;
+            left.innerText = openBrace;
             const summary = document.createElement("span");
             summary.className = "json_viewer_summary";
             summary.innerText = this.#summaryText(node.value);
             const right = document.createElement("span");
             right.className = "json_viewer_brace code_token_operator";
             right.setAttribute("aria-hidden", "true");
-            right.innerText = close_brace;
+            right.innerText = closeBrace;
             wrap.appendChild(left);
             wrap.appendChild(summary);
             wrap.appendChild(right);
@@ -691,26 +705,29 @@ class JsonViewer {
         this.#render();
         if (silent) return this;
         const name = segments.length === 0 ? this.#accessibleName() : String(segments[segments.length - 1]);
-        this.#announce(value ? I18n.t("jsonViewer.expanded", {name: name}) : I18n.t("jsonViewer.collapsed", {name: name}));
+        this.#announce(
+            value ? I18n.t("jsonViewer.expanded", { name: name }) : I18n.t("jsonViewer.collapsed", { name: name })
+        );
         return this;
     }
 
     #announce() {
-        const query = this.#search_text.trim();
+        const query = this.#searchText.trim();
         if (query !== "") {
             const matches = this.getMatches().length;
-            this.#status.innerText = matches === 0 ? I18n.t("common.nothingFound") : I18n.t("jsonViewer.found", {count: matches});
+            this.#status.innerText =
+                matches === 0 ? I18n.t("common.nothingFound") : I18n.t("jsonViewer.found", { count: matches });
             return this;
         }
-        if (this.#error_object !== undefined) {
-            this.#status.innerText = Json.errorText(this.#error_object);
+        if (this.#errorObject !== undefined) {
+            this.#status.innerText = Json.errorText(this.#errorObject);
             return this;
         }
-        if (!this.#has_value) {
-            this.#status.innerText = this.#empty_text;
+        if (!this.#hasValue) {
+            this.#status.innerText = this.#emptyText;
             return this;
         }
-        this.#status.innerText = I18n.t("jsonViewer.visible", {count: this.#visibleNodes().length});
+        this.#status.innerText = I18n.t("jsonViewer.visible", { count: this.#visibleNodes().length });
         return this;
     }
 
@@ -718,15 +735,15 @@ class JsonViewer {
         // Узлы пересобираются, а фокус живёт на строке: запоминаем путь до перерисовки
         const active = document.activeElement;
         const focused = active === null || !this.#tree.contains(active) ? null : active.closest(".json_viewer_row");
-        if (focused !== null && focused.dataset.path !== undefined) this.#focus_path = focused.dataset.path;
+        if (focused !== null && focused.dataset.path !== undefined) this.#focusedPath = focused.dataset.path;
         this.#tree.innerHTML = "";
         const list = this.#visibleNodes();
         for (const entry of list) this.#tree.appendChild(this.#rowNode(entry));
         // Пояснение вместо дерева: пустые данные, ничего не найдено или ошибка разбора
-        const searching = this.#search_text.trim() !== "";
+        const searching = this.#searchText.trim() !== "";
         this.#tree.hidden = list.length === 0;
-        this.#empty.innerText = searching ? I18n.t("common.nothingFound") : this.#empty_text;
-        this.#empty.hidden = list.length > 0 || this.#error_object !== undefined;
+        this.#empty.innerText = searching ? I18n.t("common.nothingFound") : this.#emptyText;
+        this.#empty.hidden = list.length > 0 || this.#errorObject !== undefined;
         this.#applyStop();
         return this;
     }
@@ -736,13 +753,13 @@ class JsonViewer {
         const list = [...this.#tree.querySelectorAll(".json_viewer_row")];
         if (list.length === 0) return;
         const stop =
-            list.find((row) => row.dataset.path === this.#active_path) ??
-            list.find((row) => row.dataset.path === this.#focus_path) ??
+            list.find((row) => row.dataset.path === this.#activePath) ??
+            list.find((row) => row.dataset.path === this.#focusedPath) ??
             list[0];
-        this.#active_path = stop.dataset.path;
+        this.#activePath = stop.dataset.path;
         for (const row of list) row.setAttribute("tabindex", row === stop ? "0" : "-1");
-        if (this.#focus_path !== undefined && stop.dataset.path === this.#focus_path) {
-            this.#focus_path = undefined;
+        if (this.#focusedPath !== undefined && stop.dataset.path === this.#focusedPath) {
+            this.#focusedPath = undefined;
             stop.focus();
         }
         return this;
@@ -750,7 +767,7 @@ class JsonViewer {
 
     #focusRow(row = undefined) {
         if (row === undefined || row === null) return this;
-        this.#active_path = row.dataset.path;
+        this.#activePath = row.dataset.path;
         for (const other of this.#tree.querySelectorAll(".json_viewer_row")) {
             other.setAttribute("tabindex", other === row ? "0" : "-1");
         }
@@ -759,10 +776,12 @@ class JsonViewer {
     }
 
     #focusPath(path = String()) {
-        const row = [...this.#tree.querySelectorAll(".json_viewer_row")].find((node) => node.dataset.path === String(path));
+        const row = [...this.#tree.querySelectorAll(".json_viewer_row")].find(
+            (node) => node.dataset.path === String(path)
+        );
         if (row === undefined) return this;
         this.#focusRow(row);
-        row.scrollIntoView({block: "nearest"});
+        row.scrollIntoView({ block: "nearest" });
         return this;
     }
 
@@ -789,7 +808,7 @@ class JsonViewer {
     #onFocusIn = (event) => {
         const row = event.target instanceof Element ? event.target.closest(".json_viewer_row") : null;
         if (row === null || row.dataset.path === undefined) return;
-        this.#active_path = row.dataset.path;
+        this.#activePath = row.dataset.path;
     };
 
     #onSearch = () => {
@@ -806,7 +825,7 @@ class JsonViewer {
         const list = this.#tree.querySelectorAll(".json_viewer_row");
         if (list.length === 0) return;
         // Нажатия на самой стрелке (настоящая кнопка) не перехватываем
-        const from_button = event.target instanceof Element && event.target.closest("button") !== null;
+        const fromButton = event.target instanceof Element && event.target.closest("button") !== null;
         const row = this.#currentRow(event.target instanceof Element ? event.target : undefined);
         const path = row === null ? undefined : row.dataset.path;
         const segments = path === undefined ? undefined : JsonViewer.#readPath(path);
@@ -830,14 +849,14 @@ class JsonViewer {
                 this.#focusRow(list[list.length - 1]);
                 return;
             case "ArrowRight": {
-                if (from_button || !container) return;
+                if (fromButton || !container) return;
                 event.preventDefault();
                 if (!this.#expanded.has(path)) this.expand(path);
                 else this.#step(row, 1);
                 return;
             }
             case "ArrowLeft": {
-                if (from_button || path === undefined) return;
+                if (fromButton || path === undefined) return;
                 event.preventDefault();
                 if (container && this.#expanded.has(path)) {
                     this.collapse(path);
@@ -849,7 +868,7 @@ class JsonViewer {
             }
             case "Enter":
             case " ": {
-                if (from_button || !container) return;
+                if (fromButton || !container) return;
                 event.preventDefault();
                 this.toggle(path);
                 return;
@@ -860,4 +879,4 @@ class JsonViewer {
     };
 }
 
-exports.JsonViewer = JsonViewer
+exports.JsonViewer = JsonViewer;

package/framework/components/chui_json_viewer/styles.css

@@ -7,10 +7,10 @@ chui_json_viewer {
     width: -webkit-fill-available;
     max-width: 100%;
     height: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     overflow: hidden;
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background_2);
     color: var(--text_color);
 }
@@ -18,7 +18,7 @@ chui_json_viewer {
 .json_viewer_title {
     display: block;
     width: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-size: var(--font_labels_size);
     font-weight: 500;
 }
@@ -37,7 +37,7 @@ chui_json_viewer {
     border-bottom: 1px solid var(--border_color);
 }
 
-/* Строка поиска — как остальные поля: 35 px, --border_radius; кнопки рядом — той же высоты */
+/* Строка поиска — как остальные поля: 35 px, --radius_sm; кнопки рядом — той же высоты */
 .json_viewer_search_box {
     position: relative;
     display: flex;
@@ -53,9 +53,10 @@ chui_json_viewer {
     height: var(--control_height);
     margin: 0;
     /* Место под кнопку очистки, чтобы текст не заезжал под неё */
-    padding-block: 0 0; padding-inline: 12px 40px;
+    padding-block: 0 0;
+    padding-inline: 12px 40px;
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     color: var(--text_color);
     font-family: inherit;
@@ -119,7 +120,7 @@ chui_json_viewer {
     margin: 0;
     padding: 0 12px;
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     color: var(--text_color);
     font-family: inherit;
@@ -143,7 +144,7 @@ chui_json_viewer {
     width: 100%;
     overflow: auto;
     padding: 4px 0;
-    font-family: 'chui_mono', monospace;
+    font-family: "chui_mono", monospace;
     font-size: var(--font_default_size);
 }