chuijs 4.0.3 → 4.0.4

package/framework/components/chui_clipboard_history/clipboard_history.js

@@ -2,6 +2,7 @@ const { setStyles, optionOr } = require("../../modules/chui_functions");
 const { Icon, Icons } = require("../chui_icons/icons");
 const { Desktop } = require("../../modules/chui_services/desktop");
 const { I18n } = require("../../modules/chui_i18n/chui_i18n");
+const { reportError } = require("../../modules/chui_logger/chui_logger");
 
 /**
  * Панель истории буфера обмена: последние тексты, которые приложение кладло в буфер.
@@ -25,16 +26,17 @@ class ClipboardHistory {
 
     #root = document.createElement("chui_clipboard_history");
     #title = document.createElement("clipboard_history_title");
-    #clear_button = document.createElement("button");
+    #clearButton = document.createElement("button");
     #list = document.createElement("clipboard_history_list");
     #empty = document.createElement("clipboard_history_empty");
     #status = document.createElement("clipboard_history_status");
     #id = undefined;
     #items = [];
     #truncate = 80;
-    #empty_text = I18n.t("graphics.clipboardEmpty");
-    #show_clear = true;
-    #on_change = undefined;
+    #emptyText = I18n.t("graphics.clipboardEmpty");
+    #showClear = true;
+    #onChange = undefined;
+    #onError = undefined;
     #unsubscribe = undefined;
     #bound = false;
 
@@ -47,6 +49,7 @@ class ClipboardHistory {
             label: String(),
             showClear: Boolean(),
             onChange: undefined,
+            onError: undefined,
         }
     ) {
         setStyles(__dirname + "/styles.css", "chUiJS_ClipboardHistory");
@@ -56,23 +59,24 @@ class ClipboardHistory {
         // Панель — именованный регион: к ней можно перейти с клавиатуры и из списка регионов
         this.#root.setAttribute("role", "region");
         this.#truncate = options.truncate === undefined ? this.#truncate : options.truncate;
-        this.#empty_text = options.emptyText === undefined ? this.#empty_text : options.emptyText;
-        this.#show_clear = options.showClear !== false;
-        this.#on_change = options.onChange;
+        this.#emptyText = options.emptyText === undefined ? this.#emptyText : options.emptyText;
+        this.#showClear = options.showClear !== false;
+        this.#onChange = options.onChange;
+        this.#onError = options.onError;
         this.setTitle(optionOr(options.title, I18n.t("graphics.clipboardHistory")));
         this.setLabel(optionOr(options.label, this.#title.innerText));
         this.#list.setAttribute("role", "list");
-        this.#clear_button.type = "button";
-        this.#clear_button.className = "clipboard_history_clear";
-        this.#clear_button.innerText = I18n.t("common.clear");
-        this.#clear_button.addEventListener("click", this.#onClear);
-        this.#empty.innerText = this.#empty_text;
+        this.#clearButton.type = "button";
+        this.#clearButton.className = "clipboard_history_clear";
+        this.#clearButton.innerText = I18n.t("common.clear");
+        this.#clearButton.addEventListener("click", this.#onClear);
+        this.#empty.innerText = this.#emptyText;
         this.#status.classList.add("chui_visually_hidden");
         this.#status.setAttribute("role", "status");
         this.#status.setAttribute("aria-live", "polite");
         const head = document.createElement("clipboard_history_head");
         head.appendChild(this.#title);
-        if (this.#show_clear) head.appendChild(this.#clear_button);
+        if (this.#showClear) head.appendChild(this.#clearButton);
         this.#root.appendChild(head);
         this.#root.appendChild(this.#list);
         this.#root.appendChild(this.#empty);
@@ -88,7 +92,8 @@ class ClipboardHistory {
             .then((items) => {
                 if (this.#bound) this.#render(items);
             })
-            .catch(() => {});
+            // Первичную загрузку тоже не глушим: при сбое панель осталась бы пустой без причины
+            .catch((error) => reportError(error, this.#onError));
     }
 
     // GET
@@ -128,7 +133,7 @@ class ClipboardHistory {
     }
 
     setEmptyText(text = String()) {
-        this.#empty_text = text;
+        this.#emptyText = text;
         this.#empty.innerText = text;
         return this;
     }
@@ -192,8 +197,8 @@ class ClipboardHistory {
         this.#items.forEach((text, index) => this.#list.appendChild(this.#createItem(text, index)));
         this.#list.hidden = this.#items.length === 0;
         this.#empty.hidden = this.#items.length > 0;
-        this.#clear_button.disabled = this.#items.length === 0;
-        if (this.#on_change !== undefined) this.#on_change(this.getItems());
+        this.#clearButton.disabled = this.#items.length === 0;
+        if (this.#onChange !== undefined) this.#onChange(this.getItems());
     }
 
     #createItem(text = String(), index = Number()) {
@@ -230,14 +235,14 @@ class ClipboardHistory {
         if (button === null || !this.#list.contains(button)) return;
         const item = button.closest("clipboard_history_item");
         const index = Number(item.dataset.index);
-        if (button.dataset.action === "copy") this.copy(index).catch(() => {});
-        else this.remove(index).catch(() => {});
+        if (button.dataset.action === "copy") this.copy(index).catch((error) => reportError(error, this.#onError));
+        else this.remove(index).catch((error) => reportError(error, this.#onError));
     };
 
     #onClear = () => {
         this.clear()
             .then(() => this.#announce(I18n.t("graphics.clipboardCleared")))
-            .catch(() => {});
+            .catch((error) => reportError(error, this.#onError));
     };
 }
 

package/framework/components/chui_clipboard_history/styles.css

@@ -3,12 +3,12 @@ chui_clipboard_history {
     display: block;
     width: -webkit-fill-available;
     box-sizing: border-box;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
     font-size: var(--font_default_size);
     background: var(--element_background_2);
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     overflow: hidden;
 }
 
@@ -17,7 +17,7 @@ clipboard_history_head {
     align-items: center;
     justify-content: space-between;
     gap: 12px;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     border-bottom: 1px solid var(--border_color);
 }
 
@@ -28,7 +28,7 @@ clipboard_history_title {
 button.clipboard_history_clear {
     padding: 2px 10px;
     border: none;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     color: var(--text_color);
     font-family: inherit;
@@ -66,7 +66,9 @@ clipboard_history_item {
     align-items: center;
     gap: 6px;
     padding-block: 2px 2px;
-    padding-inline: 4px var(--main_padding);
+    padding-inline: 4px var(--block_padding);
+    /* Новый элемент буфера встаёт на место: кадр общий — см. `chui_appear_up` в global_style.css */
+    animation: chui_appear_up var(--motion_base) var(--motion_ease);
 }
 
 clipboard_history_item + clipboard_history_item {
@@ -81,7 +83,7 @@ button.clipboard_history_text {
     min-width: 0;
     padding: 6px 8px;
     border: none;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: transparent;
     color: var(--text_color);
     font-family: inherit;
@@ -121,7 +123,7 @@ button.clipboard_history_remove {
     height: 26px;
     padding: 0;
     border: none;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: transparent;
     color: var(--text_color_disabled);
     cursor: pointer;
@@ -134,7 +136,7 @@ button.clipboard_history_remove:hover {
 
 clipboard_history_empty {
     display: block;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     text-align: center;
     color: var(--text_color_disabled);
 }

package/framework/components/chui_code/code.js

@@ -1,18 +1,18 @@
 class CodeBlock {
-    #chui_code = document.createElement(`code`);
+    #chuiCode = document.createElement(`code`);
     constructor(text = String(), options = { textAlign: String(), wordBreak: String(), width: String() }) {
         require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_code");
-        this.#chui_code.innerText = text;
-        this.#chui_code.classList.add("chui_code");
-        if (options.textAlign !== undefined) this.#chui_code.style.textAlign = options.textAlign;
-        if (options.wordBreak !== undefined) this.#chui_code.style.wordBreak = options.wordBreak;
-        if (options.width !== undefined) this.#chui_code.style.width = options.width;
+        this.#chuiCode.innerText = text;
+        this.#chuiCode.classList.add("chui_code");
+        if (options.textAlign !== undefined) this.#chuiCode.style.textAlign = options.textAlign;
+        if (options.wordBreak !== undefined) this.#chuiCode.style.wordBreak = options.wordBreak;
+        if (options.width !== undefined) this.#chuiCode.style.width = options.width;
     }
     setText(text = String()) {
-        this.#chui_code.innerText = text;
+        this.#chuiCode.innerText = text;
     }
     set() {
-        return this.#chui_code;
+        return this.#chuiCode;
     }
 }
 

package/framework/components/chui_code/styles.css

@@ -6,11 +6,11 @@
     box-sizing: border-box;
     height: max-content;
     width: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     padding: 10px 12px;
     background: var(--element_background_2);
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     font-family: "chui_mono", monospace;
     font-size: var(--font_default_size);
     font-weight: 400;

package/framework/components/chui_code_editor/code_editor.js

@@ -51,13 +51,13 @@ class CodeEditor {
     #input = document.createElement("textarea");
     #id = undefined;
     #language = CodeEditor.LANGUAGE.JAVASCRIPT;
-    #line_numbers = true;
-    #read_only = false;
-    #tab_size = 4;
+    #lineNumbers = true;
+    #readOnly = false;
+    #tabSize = 4;
     #label = undefined;
     #placeholder = undefined;
-    #on_change = undefined;
-    #on_save = undefined;
+    #onChange = undefined;
+    #onSave = undefined;
 
     constructor(
         options = {
@@ -82,12 +82,12 @@ class CodeEditor {
         this.#id = options.id === undefined ? `chui_code_editor_${CodeEditor.#counter}` : options.id;
         this.#root.id = this.#id;
         this.#language = options.language === undefined ? this.#language : options.language;
-        this.#line_numbers = options.lineNumbers !== false;
-        this.#tab_size = options.tabSize === undefined ? this.#tab_size : options.tabSize;
+        this.#lineNumbers = options.lineNumbers !== false;
+        this.#tabSize = options.tabSize === undefined ? this.#tabSize : options.tabSize;
         this.#label = options.label;
         this.#placeholder = options.placeholder;
-        this.#on_change = options.onChange;
-        this.#on_save = options.onSave;
+        this.#onChange = options.onChange;
+        this.#onSave = options.onSave;
         this.#title.innerText = options.title === undefined ? "" : options.title;
         this.#title.hidden = options.title === undefined;
         // Текст и подсветка — нативные <textarea> и <pre>, поэтому у них классы, а не теги
@@ -107,11 +107,11 @@ class CodeEditor {
         this.#body.appendChild(this.#input);
         if (options.title !== undefined) this.#root.appendChild(this.#title);
         this.#root.appendChild(this.#body);
-        this.#root.style.setProperty("--code_editor_tab_size", String(this.#tab_size));
+        this.#root.style.setProperty("--code_editor_tab_size", String(this.#tabSize));
         if (options.height !== undefined) this.setHeight(options.height);
         if (options.wide === true) this.#root.classList.add("code_editor_wide");
         // Скрытые номера строк — это класс с нулевой шириной колонки, а не только флаг
-        this.#root.classList.toggle("code_editor_no_lines", !this.#line_numbers);
+        this.#root.classList.toggle("code_editor_no_lines", !this.#lineNumbers);
         this.setReadOnly(options.readOnly === true);
         this.#input.addEventListener("input", this.#onInput);
         this.#input.addEventListener("scroll", this.#syncScroll);
@@ -138,15 +138,15 @@ class CodeEditor {
     }
 
     isReadOnly() {
-        return this.#read_only;
+        return this.#readOnly;
     }
 
     isLineNumbersVisible() {
-        return this.#line_numbers;
+        return this.#lineNumbers;
     }
 
     getTabSize() {
-        return this.#tab_size;
+        return this.#tabSize;
     }
 
     // SET
@@ -189,22 +189,22 @@ class CodeEditor {
     }
 
     setReadOnly(readOnly = Boolean()) {
-        this.#read_only = readOnly === true;
-        this.#input.readOnly = this.#read_only;
-        this.#root.classList.toggle("code_editor_readonly", this.#read_only);
+        this.#readOnly = readOnly === true;
+        this.#input.readOnly = this.#readOnly;
+        this.#root.classList.toggle("code_editor_readonly", this.#readOnly);
         return this;
     }
 
     setLineNumbers(visible = Boolean()) {
-        this.#line_numbers = visible === true;
-        this.#root.classList.toggle("code_editor_no_lines", !this.#line_numbers);
+        this.#lineNumbers = visible === true;
+        this.#root.classList.toggle("code_editor_no_lines", !this.#lineNumbers);
         this.#refresh();
         return this;
     }
 
     setTabSize(size = Number()) {
-        this.#tab_size = size;
-        this.#root.style.setProperty("--code_editor_tab_size", String(this.#tab_size));
+        this.#tabSize = size;
+        this.#root.style.setProperty("--code_editor_tab_size", String(this.#tabSize));
         return this;
     }
 
@@ -248,7 +248,7 @@ class CodeEditor {
             this.#input.selectionStart = caret;
             this.#input.selectionEnd = caret;
         }
-        if (this.#on_change !== undefined) this.#on_change(value);
+        if (this.#onChange !== undefined) this.#onChange(value);
     }
 
     #refresh() {
@@ -260,7 +260,7 @@ class CodeEditor {
             this.#code.innerHTML = highlight(value, this.#language);
         }
         const lines = value.split("\n").length;
-        this.#lines.innerText = this.#line_numbers
+        this.#lines.innerText = this.#lineNumbers
             ? Array.from({ length: lines }, (_, index) => index + 1).join("\n")
             : "";
         this.#syncScroll();
@@ -275,7 +275,7 @@ class CodeEditor {
 
     #onInput = () => {
         this.#refresh();
-        if (this.#on_change !== undefined) this.#on_change(this.getValue());
+        if (this.#onChange !== undefined) this.#onChange(this.getValue());
     };
 
     #onKeyDown = (event) => {
@@ -284,12 +284,12 @@ class CodeEditor {
         const end = this.#input.selectionEnd === undefined ? value.length : this.#input.selectionEnd;
         if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "s") {
             event.preventDefault();
-            if (this.#on_save !== undefined) this.#on_save(value);
+            if (this.#onSave !== undefined) this.#onSave(value);
             return;
         }
         if (event.key === "Tab") {
             event.preventDefault();
-            if (this.#read_only) return;
+            if (this.#readOnly) return;
             if (event.shiftKey) this.#outdent();
             else this.#indent();
             return;

package/framework/components/chui_code_editor/styles.css

@@ -6,11 +6,11 @@ chui_code_editor {
     flex-direction: column;
     width: -webkit-fill-available;
     box-sizing: border-box;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
     background: var(--element_background_2);
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     font-family: "chui_mono", monospace;
     font-size: var(--font_default_size);
     overflow: hidden;
@@ -111,7 +111,7 @@ textarea.code_editor_input {
 }
 
 textarea.code_editor_input::selection {
-    background: var(--blue_prime_background_trans);
+    background: var(--blue_prime_background_tint_strong);
     color: transparent;
 }
 

package/framework/components/chui_command_palette/command_palette.js

@@ -53,7 +53,7 @@ class CommandPalette {
     // Занавес на всё окно: он же элемент слоя для OverlayA11y
     #palette = document.createElement("chui_command_palette");
     #panel = document.createElement("command_palette_panel");
-    #input_box = document.createElement("command_palette_input");
+    #inputBox = document.createElement("command_palette_input");
     #input = document.createElement("input");
     // Область результатов: список и надпись «ничего не найдено» в одной рамке
     // (надпись центрируется в ней по вертикали, а высота панели не прыгает)
@@ -70,13 +70,13 @@ class CommandPalette {
     #query = "";
     #label = CommandPalette.DEFAULT_LABEL;
     #placeholder = CommandPalette.DEFAULT_PLACEHOLDER;
-    #empty_text = CommandPalette.DEFAULT_EMPTY_TEXT;
+    #emptyText = CommandPalette.DEFAULT_EMPTY_TEXT;
     #limit = CommandPalette.DEFAULT_LIMIT;
-    #recent_enabled = true;
-    #close_on_run = true;
-    #on_run = undefined;
+    #recentEnabled = true;
+    #closeOnRun = true;
+    #onRun = undefined;
     #hotkey = undefined;
-    #hotkey_handler = undefined;
+    #hotkeyHandler = undefined;
     isOpen = false;
 
     constructor(
@@ -102,25 +102,25 @@ class CommandPalette {
         this.#label = optionOr(options.label, CommandPalette.DEFAULT_LABEL);
         this.#placeholder =
             options.placeholder === undefined ? CommandPalette.DEFAULT_PLACEHOLDER : options.placeholder;
-        this.#empty_text = options.emptyText === undefined ? CommandPalette.DEFAULT_EMPTY_TEXT : options.emptyText;
+        this.#emptyText = options.emptyText === undefined ? CommandPalette.DEFAULT_EMPTY_TEXT : options.emptyText;
         this.#limit = options.limit === undefined ? CommandPalette.DEFAULT_LIMIT : options.limit;
-        this.#recent_enabled = options.recent === undefined ? true : options.recent;
-        this.#close_on_run = options.closeOnRun === undefined ? true : options.closeOnRun;
-        this.#on_run = options.onRun;
+        this.#recentEnabled = options.recent === undefined ? true : options.recent;
+        this.#closeOnRun = options.closeOnRun === undefined ? true : options.closeOnRun;
+        this.#onRun = options.onRun;
         // Поле поиска
         this.#list.id = `${this.#id}_list`;
         this.#input.type = "text";
         this.#input.setAttribute("autocomplete", "off");
         this.#input.placeholder = this.#placeholder;
         this.#input.id = `${this.#id}_input`;
-        this.#input_box.appendChild(new Icon(Icons.ACTIONS.SEARCH, "18px", "var(--text_color_disabled)").set());
-        this.#input_box.appendChild(this.#input);
-        this.#empty.innerText = this.#empty_text;
+        this.#inputBox.appendChild(new Icon(Icons.ACTIONS.SEARCH, "18px", "var(--text_color_disabled)").set());
+        this.#inputBox.appendChild(this.#input);
+        this.#empty.innerText = this.#emptyText;
         this.#empty.hidden = true;
         this.#status.classList.add("chui_visually_hidden");
         this.#status.setAttribute("role", "status");
         this.#status.setAttribute("aria-live", "polite");
-        this.#panel.appendChild(this.#input_box);
+        this.#panel.appendChild(this.#inputBox);
         this.#results.appendChild(this.#list);
         this.#results.appendChild(this.#empty);
         this.#results.appendChild(this.#status);
@@ -159,7 +159,7 @@ class CommandPalette {
     }
 
     getEmptyText() {
-        return this.#empty_text;
+        return this.#emptyText;
     }
 
     getQuery() {
@@ -213,7 +213,7 @@ class CommandPalette {
     }
 
     setEmptyText(text = String()) {
-        this.#empty_text = text;
+        this.#emptyText = text;
         this.#empty.innerText = text;
         return this;
     }
@@ -274,7 +274,7 @@ class CommandPalette {
         this.#query = "";
         this.#input.value = "";
         this.#apply("");
-        new Animation(this.#palette).fadeIn();
+        new Animation(this.#palette).panelIn();
         this.#a11y.open();
         this.#keyboard.setExpanded(true);
         this.#input.focus();
@@ -301,19 +301,19 @@ class CommandPalette {
     installHotkey(hotkey = String()) {
         this.uninstallHotkey();
         this.#hotkey = hotkey;
-        this.#hotkey_handler = (event) => {
+        this.#hotkeyHandler = (event) => {
             if (!CommandPalette.#isHotkey(event, this.#hotkey)) return;
             event.preventDefault();
             this.openAndClose();
         };
-        document.addEventListener("keydown", this.#hotkey_handler, true);
+        document.addEventListener("keydown", this.#hotkeyHandler, true);
         return this;
     }
 
     uninstallHotkey() {
-        if (this.#hotkey_handler !== undefined) {
-            document.removeEventListener("keydown", this.#hotkey_handler, true);
-            this.#hotkey_handler = undefined;
+        if (this.#hotkeyHandler !== undefined) {
+            document.removeEventListener("keydown", this.#hotkeyHandler, true);
+            this.#hotkeyHandler = undefined;
         }
         this.#hotkey = undefined;
         return this;
@@ -391,13 +391,13 @@ class CommandPalette {
         for (const char of needle) {
             const found = haystack.indexOf(char, position);
             if (found === -1) return -1;
-            const at_word_start =
+            const atWordStart =
                 found === 0 ||
                 haystack[found - 1] === " " ||
                 haystack[found - 1] === "-" ||
                 haystack[found - 1] === "/";
             score += found === previous + 1 ? 6 : 1;
-            if (at_word_start) score += 4;
+            if (atWordStart) score += 4;
             previous = found;
             position = found + 1;
         }
@@ -439,7 +439,7 @@ class CommandPalette {
             commands: commands.slice().sort((left, right) => scores.get(right) - scores.get(left)),
         }));
         // «Недавние» показываем только на пустом запросе: иначе они мешают релевантности
-        if (this.#recent_enabled && query.trim() === "" && this.#recent.length > 0) {
+        if (this.#recentEnabled && query.trim() === "" && this.#recent.length > 0) {
             const recent = this.#recent.map((id) => this.getCommand(id)).filter((command) => command !== undefined);
             if (recent.length > 0) result = [{ name: CommandPalette.RECENT_GROUP, commands: recent }, ...result];
         }
@@ -477,7 +477,7 @@ class CommandPalette {
         // Скрытый live-регион: скринридер слышит, сколько команд нашлось
         this.#status.innerText =
             found === 0
-                ? this.#empty_text
+                ? this.#emptyText
                 : query.trim() === ""
                   ? I18n.t("navigation.commandsFound", { count: found })
                   : I18n.t("navigation.commandsFoundFor", { count: found, query: query.trim() });
@@ -514,7 +514,7 @@ class CommandPalette {
     }
 
     #run(command = Object()) {
-        if (this.#recent_enabled) {
+        if (this.#recentEnabled) {
             this.#recent = [command.id, ...this.#recent.filter((id) => id !== command.id)].slice(
                 0,
                 CommandPalette.MAX_RECENT
@@ -522,9 +522,9 @@ class CommandPalette {
         }
         // Слой закрывается до запуска: команда может открыть свой диалог, и фокус
         // вернётся на элемент, который открывал палитру, а не в закрывающуюся панель
-        if (this.#close_on_run) this.close();
+        if (this.#closeOnRun) this.close();
         if (typeof command.run === "function") command.run(command);
-        if (this.#on_run !== undefined) this.#on_run(command, this);
+        if (this.#onRun !== undefined) this.#onRun(command, this);
     }
 
     #commandFromEvent(event = Object()) {

package/framework/components/chui_command_palette/styles.css

@@ -28,8 +28,8 @@ command_palette_input {
     display: flex;
     align-items: center;
     gap: 8px;
-    /* Строка поиска — хром панели, а не контрол: шаг `--main_padding`, а не `--main_padding_sm` */
-    padding: var(--main_padding);
+    /* Строка поиска — хром панели, а не контрол: шаг `--block_padding`, а не `--block_padding_sm` */
+    padding: var(--block_padding);
     border-bottom: 1px solid var(--border_color);
 }
 
@@ -89,7 +89,7 @@ command_palette_option {
     align-items: center;
     gap: 10px;
     padding: 8px 10px;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     color: var(--text_color);
     cursor: default;
 }
@@ -135,7 +135,7 @@ command_palette_option_subtitle {
 }
 
 command_palette_option.chui_a11y_active command_palette_option_subtitle {
-    color: var(--text_color_hover_disable);
+    color: var(--text_color_hover_disabled);
 }
 
 command_palette_shortcut {
@@ -150,7 +150,7 @@ command_palette_empty {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     text-align: center;
     color: var(--text_color_disabled);
 }

package/framework/components/chui_console/console.js

@@ -1,27 +1,27 @@
 class Console {
-    #chui_console = document.createElement(`chui_console`);
+    #chuiConsole = document.createElement(`chui_console`);
     constructor(options = { width: String(), height: String(), label: String() }) {
         const { setStyles, optionOr } = require("../../modules/chui_functions");
         const { I18n } = require("../../modules/chui_i18n/chui_i18n");
         setStyles(__dirname + "/styles.css", "chUiJS_console");
         // Журнал — не только картинка: строки добавляются одна за другой, поэтому у области
         // есть роль и имя, а скринридер объявляет дописанное (было безымянное полотно)
-        this.#chui_console.setAttribute("role", "log");
-        this.#chui_console.setAttribute("aria-label", optionOr(options.label, I18n.t("feedback.console")));
+        this.#chuiConsole.setAttribute("role", "log");
+        this.#chuiConsole.setAttribute("aria-label", optionOr(options.label, I18n.t("feedback.console")));
         // Пустая заготовка опции равносильна отсутствующей: `String()` в описании опций
         // доезжала до стилей, и размер молча оставался пустым
         const width = optionOr(options.width, undefined);
         const height = optionOr(options.height, undefined);
-        this.#chui_console.style.width = width === undefined ? "max-content" : width;
-        this.#chui_console.style.height = height === undefined ? "max-content" : height;
+        this.#chuiConsole.style.width = width === undefined ? "max-content" : width;
+        this.#chuiConsole.style.height = height === undefined ? "max-content" : height;
     }
     addText(text = String()) {
-        const chui_console_text = document.createElement(`chui_console_text`);
-        chui_console_text.innerText = text;
-        this.#chui_console.appendChild(chui_console_text);
+        const chuiConsoleText = document.createElement(`chui_console_text`);
+        chuiConsoleText.innerText = text;
+        this.#chuiConsole.appendChild(chuiConsoleText);
     }
     set() {
-        return this.#chui_console;
+        return this.#chuiConsole;
     }
 }
 

package/framework/components/chui_console/styles.css

@@ -1,7 +1,7 @@
 chui_console {
     height: max-content;
     width: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-size: var(--font_default_size);
     font-weight: 500;
     color: var(--text_color);
@@ -11,7 +11,7 @@ chui_console {
     user-select: text;
     border: 1px solid var(--border_color);
     padding: var(--control_padding);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
 
     display: flex;
     flex-direction: column;
@@ -26,6 +26,9 @@ chui_console_text {
     width: -webkit-fill-available;
     white-space: break-spaces;
     word-wrap: break-word;
+    /* Новая строка журнала встаёт на место: кадр общий — см. `chui_appear_up`
+       в global_style.css */
+    animation: chui_appear_up var(--motion_base) var(--motion_ease);
     padding: var(--control_padding);
     text-align: start;
     user-select: text;