chuijs 4.0.2 → 4.0.4

package/framework/components/chui_chat/styles.css

@@ -4,9 +4,9 @@ chui_chat {
     flex-direction: column;
     height: max-content;
     width: 360px;
-    margin: var(--margin);
+    margin: var(--block_margin);
     overflow: hidden;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     border: 1px solid var(--border_color);
     font-size: var(--font_default_size);
@@ -17,7 +17,7 @@ chat_header {
     display: flex;
     flex-direction: column;
     gap: 2px;
-    padding: var(--control_padding) var(--main_padding);
+    padding: var(--control_padding) var(--block_padding);
     border-bottom: 1px solid var(--border_color);
 }
 
@@ -100,10 +100,21 @@ chat_bubble {
     flex-direction: column;
     gap: 2px;
     padding: 8px 10px;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     border: 1px solid var(--border_color);
     color: var(--text_color);
+    /* Новое сообщение встаёт на место: кадр общий — см. `chui_appear_up` в global_style.css */
+    animation: chui_appear_up var(--motion_base) var(--motion_ease);
+}
+
+/* Строка «печатает…»: появляется и уходит движением, `hidden` возвращается по концу кадра */
+chat_typing {
+    animation: chui_appear_up var(--motion_base) var(--motion_ease);
+}
+
+.chat_typing_leaving {
+    animation: chui_leave_up var(--motion_fast) var(--motion_ease) forwards;
 }
 
 /* Свои сообщения — акцентом и справа */
@@ -149,7 +160,7 @@ chat_meta {
 }
 
 chat_bubble[data-own="true"] chat_meta {
-    color: var(--text_color_hover_disable);
+    color: var(--text_color_hover_disabled);
 }
 
 chat_status {
@@ -169,7 +180,7 @@ chat_status[data-status="failed"] {
 
 /* Строка «печатает…» */
 chat_typing {
-    padding: 0 var(--main_padding) var(--control_padding);
+    padding: 0 var(--block_padding) var(--control_padding);
     color: var(--text_color_disabled);
     font-size: var(--font_labels_size);
 }
@@ -220,7 +231,7 @@ chat_composer {
 }
 
 .chat_send:hover {
-    background: var(--blue_prime_background_trans);
+    background: var(--blue_prime_background_tint_strong);
 }
 
 .chat_send:disabled {

package/framework/components/chui_clipboard_history/clipboard_history.js

@@ -1,7 +1,8 @@
-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 { 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,28 +26,32 @@ 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;
 
-    constructor(options = {
-        id: String(),
-        title: String(),
-        emptyText: String(),
-        truncate: Number(),
-        label: String(),
-        showClear: Boolean(),
-        onChange: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            title: String(),
+            emptyText: String(),
+            truncate: Number(),
+            label: String(),
+            showClear: Boolean(),
+            onChange: undefined,
+            onError: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_ClipboardHistory");
         ClipboardHistory.#counter += 1;
         this.#id = options.id === undefined ? `chui_clipboard_history_${ClipboardHistory.#counter}` : options.id;
@@ -54,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);
@@ -81,9 +87,13 @@ class ClipboardHistory {
             this.#render(items);
         });
         this.#bound = true;
-        Desktop.clipboard.history.list().then((items) => {
-            if (this.#bound) this.#render(items);
-        }).catch(() => {});
+        Desktop.clipboard.history
+            .list()
+            .then((items) => {
+                if (this.#bound) this.#render(items);
+            })
+            // Первичную загрузку тоже не глушим: при сбое панель осталась бы пустой без причины
+            .catch((error) => reportError(error, this.#onError));
     }
 
     // GET
@@ -123,7 +133,7 @@ class ClipboardHistory {
     }
 
     setEmptyText(text = String()) {
-        this.#empty_text = text;
+        this.#emptyText = text;
         this.#empty.innerText = text;
         return this;
     }
@@ -141,7 +151,9 @@ class ClipboardHistory {
         const text = this.#items[index];
         if (text === undefined) return Promise.resolve(this.getItems());
         return Desktop.clipboard.history.copy(text).then((items) => {
-            this.#announce(I18n.t("graphics.clipboardCopied", {value: ClipboardHistory.#short(text, this.#truncate)}));
+            this.#announce(
+                I18n.t("graphics.clipboardCopied", { value: ClipboardHistory.#short(text, this.#truncate) })
+            );
             return items;
         });
     }
@@ -185,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()) {
@@ -198,7 +210,7 @@ class ClipboardHistory {
         copy.type = "button";
         copy.className = "clipboard_history_text";
         copy.dataset.action = "copy";
-        copy.setAttribute("aria-label", I18n.t("graphics.clipboardCopy", {value: label}));
+        copy.setAttribute("aria-label", I18n.t("graphics.clipboardCopy", { value: label }));
         copy.title = text;
         const icon = document.createElement("clipboard_history_icon");
         icon.innerHTML = new Icon(Icons.CONTENT.CONTENT_COPY, "16px").getHTML();
@@ -211,7 +223,7 @@ class ClipboardHistory {
         remove.type = "button";
         remove.className = "clipboard_history_remove";
         remove.dataset.action = "remove";
-        remove.setAttribute("aria-label", I18n.t("graphics.clipboardRemove", {value: label}));
+        remove.setAttribute("aria-label", I18n.t("graphics.clipboardRemove", { value: label }));
         remove.innerHTML = new Icon(Icons.ACTIONS.DELETE, "16px").getHTML();
         item.appendChild(copy);
         item.appendChild(remove);
@@ -223,13 +235,15 @@ 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(() => {});
+        this.clear()
+            .then(() => this.#announce(I18n.t("graphics.clipboardCleared")))
+            .catch((error) => reportError(error, this.#onError));
     };
 }
 
-exports.ClipboardHistory = ClipboardHistory
+exports.ClipboardHistory = ClipboardHistory;

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;
@@ -65,7 +65,10 @@ clipboard_history_item {
     display: flex;
     align-items: center;
     gap: 6px;
-    padding-block: 2px 2px; padding-inline: 4px var(--main_padding);
+    padding-block: 2px 2px;
+    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 {
@@ -80,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;
@@ -93,7 +96,8 @@ button.clipboard_history_text:hover {
     background: var(--element_background_hover);
 }
 
-button.clipboard_history_text:focus-visible, button.clipboard_history_remove:focus-visible {
+button.clipboard_history_text:focus-visible,
+button.clipboard_history_remove:focus-visible {
     outline: var(--focus_outline);
     outline-offset: var(--focus_outline_offset);
 }
@@ -119,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;
@@ -132,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,19 +1,19 @@
 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;
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_code");
+        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;
     }
 }
 
-exports.CodeBlock = CodeBlock
+exports.CodeBlock = CodeBlock;

package/framework/components/chui_code/styles.css

@@ -6,12 +6,12 @@
     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);
-    font-family: 'chui_mono', monospace;
+    border-radius: var(--radius_sm);
+    font-family: "chui_mono", monospace;
     font-size: var(--font_default_size);
     font-weight: 400;
     line-height: 1.5;
@@ -19,4 +19,4 @@
     white-space: pre-wrap;
     /* Длинная строка прокручивается внутри блока, а не раздвигает карточку */
     overflow-x: auto;
-}
+}

package/framework/components/chui_code_editor/code_editor.js

@@ -1,6 +1,6 @@
-const {setStyles} = require('../../modules/chui_functions');
-const {highlight, escapeHtml} = require('../../modules/chui_highlight/chui_highlight');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { setStyles } = require("../../modules/chui_functions");
+const { highlight, escapeHtml } = require("../../modules/chui_highlight/chui_highlight");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Редактор кода: поле ввода с подсветкой синтаксиса и нумерацией строк.
@@ -38,7 +38,7 @@ class CodeEditor {
         JAVASCRIPT: "javascript",
         JSON: "json",
         CSS: "css",
-        PLAIN: "plain"
+        PLAIN: "plain",
     };
     static #counter = 0;
 
@@ -51,41 +51,43 @@ 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;
-
-    constructor(options = {
-        id: String(),
-        value: String(),
-        language: String(),
-        title: String(),
-        label: String(),
-        placeholder: String(),
-        height: String(),
-        wide: Boolean(),
-        lineNumbers: Boolean(),
-        readOnly: Boolean(),
-        tabSize: Number(),
-        onChange: undefined,
-        onSave: undefined
-    }) {
-        require('../../modules/chui_fonts').installMono();
+    #onChange = undefined;
+    #onSave = undefined;
+
+    constructor(
+        options = {
+            id: String(),
+            value: String(),
+            language: String(),
+            title: String(),
+            label: String(),
+            placeholder: String(),
+            height: String(),
+            wide: Boolean(),
+            lineNumbers: Boolean(),
+            readOnly: Boolean(),
+            tabSize: Number(),
+            onChange: undefined,
+            onSave: undefined,
+        }
+    ) {
+        require("../../modules/chui_fonts").installMono();
         setStyles(__dirname + "/styles.css", "chUiJS_CodeEditor");
         CodeEditor.#counter += 1;
         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>, поэтому у них классы, а не теги
@@ -105,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);
@@ -136,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
@@ -187,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;
     }
 
@@ -232,7 +234,10 @@ class CodeEditor {
     // === ВНУТРЕННЕЕ ===
     #applyLabel() {
         const language = this.#language === CodeEditor.LANGUAGE.PLAIN ? I18n.t("editor.noHighlight") : this.#language;
-        this.#input.setAttribute("aria-label", this.#label === undefined ? I18n.t("editor.codeEditor", {language: language}) : this.#label);
+        this.#input.setAttribute(
+            "aria-label",
+            this.#label === undefined ? I18n.t("editor.codeEditor", { language: language }) : this.#label
+        );
     }
 
     /** Значение + перерисовка подсветки и нумерации; `caret` — куда вернуть каретку */
@@ -243,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() {
@@ -255,7 +260,9 @@ class CodeEditor {
             this.#code.innerHTML = highlight(value, this.#language);
         }
         const lines = value.split("\n").length;
-        this.#lines.innerText = this.#line_numbers ? Array.from({length: lines}, (_, index) => index + 1).join("\n") : "";
+        this.#lines.innerText = this.#lineNumbers
+            ? Array.from({ length: lines }, (_, index) => index + 1).join("\n")
+            : "";
         this.#syncScroll();
     }
 
@@ -268,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) => {
@@ -277,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;
@@ -311,8 +318,14 @@ class CodeEditor {
         }
         const from = value.lastIndexOf("\n", start - 1) + 1;
         const block = value.slice(from, end);
-        const shifted = block.split("\n").map((line) => `\t${line}`).join("\n");
-        this.#applyValue(`${value.slice(0, from)}${shifted}${value.slice(end)}`, start + 1 + (shifted.length - block.length));
+        const shifted = block
+            .split("\n")
+            .map((line) => `\t${line}`)
+            .join("\n");
+        this.#applyValue(
+            `${value.slice(0, from)}${shifted}${value.slice(end)}`,
+            start + 1 + (shifted.length - block.length)
+        );
     }
 
     /** Shift+Tab: убрать один отступ у выделенных строк */
@@ -323,14 +336,17 @@ class CodeEditor {
         const from = value.lastIndexOf("\n", start - 1) + 1;
         const block = value.slice(from, end);
         let removed = 0;
-        const shifted = block.split("\n").map((line) => {
-            const match = line.match(/^[ \t]/);
-            if (match === null) return line;
-            removed += 1;
-            return line.slice(1);
-        }).join("\n");
+        const shifted = block
+            .split("\n")
+            .map((line) => {
+                const match = line.match(/^[ \t]/);
+                if (match === null) return line;
+                removed += 1;
+                return line.slice(1);
+            })
+            .join("\n");
         this.#applyValue(`${value.slice(0, from)}${shifted}${value.slice(end)}`, Math.max(from, start - removed));
     }
 }
 
-exports.CodeEditor = CodeEditor
+exports.CodeEditor = CodeEditor;

package/framework/components/chui_code_editor/styles.css

@@ -6,12 +6,12 @@ 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);
-    font-family: 'chui_mono', monospace;
+    border-radius: var(--radius_sm);
+    font-family: "chui_mono", monospace;
     font-size: var(--font_default_size);
     overflow: hidden;
 }
@@ -51,7 +51,8 @@ code_editor_lines {
     bottom: 0;
     width: var(--code_editor_gutter);
     box-sizing: border-box;
-    padding-block: 8px 8px; padding-inline: 8px 6px;
+    padding-block: 8px 8px;
+    padding-inline: 8px 6px;
     overflow: hidden;
     text-align: end;
     white-space: pre;
@@ -110,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;
 }