chuijs 4.0.1 → 4.0.3

package/framework/components/chui_calendar/calendar.js

@@ -1,4 +1,4 @@
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 class Calendar {
     constructor(year, month) {
@@ -11,14 +11,16 @@ class Calendar {
             new Array(7),
             new Array(7),
             new Array(7),
-            new Array(7)
+            new Array(7),
         ];
 
         // Названия дней недели берёт локаль текущего языка (воскресенье — 0):
         // семь подряд идущих дней месяца покрывают все дни недели
         for (let day = 0; day < 7; day++) {
             const sample = new Date(this.year, this.month, day + 1);
-            this.calendar[0][sample.getDay()] = sample.toLocaleString(I18n.getLocale(), { weekday: 'short' }).toUpperCase();
+            this.calendar[0][sample.getDay()] = sample
+                .toLocaleString(I18n.getLocale(), { weekday: "short" })
+                .toUpperCase();
         }
 
         this.list = [];
@@ -37,11 +39,11 @@ class Calendar {
         while (this.date.getMonth() === this.month) {
             let dayToPush = this.date;
             let days = [];
-            days.push(dayToPush.toLocaleString(I18n.getLocale(), {day: 'numeric'}));
-            days.push(dayToPush.toLocaleString(I18n.getLocale(), {weekday: 'short'}).toUpperCase());
-            days.push(dayToPush.toLocaleString(I18n.getLocale(), {month: 'long'}).toUpperCase());
+            days.push(dayToPush.toLocaleString(I18n.getLocale(), { day: "numeric" }));
+            days.push(dayToPush.toLocaleString(I18n.getLocale(), { weekday: "short" }).toUpperCase());
+            days.push(dayToPush.toLocaleString(I18n.getLocale(), { month: "long" }).toUpperCase());
             this.date.setDate(this.date.getDate() + 1);
-            this.list.push(days)
+            this.list.push(days);
         }
         let index = 1;
         for (let day of this.list) {
@@ -60,10 +62,10 @@ class Calendar {
         return new Date();
     }
     getMonthName() {
-        return new Date(this.year, this.month).toLocaleString(I18n.getLocale(), {month: 'long'}).toUpperCase();
+        return new Date(this.year, this.month).toLocaleString(I18n.getLocale(), { month: "long" }).toUpperCase();
     }
     getDayName() {
-        return new Date(this.year, this.month).toLocaleString(I18n.getLocale(), { weekday: 'long' }).toUpperCase();
+        return new Date(this.year, this.month).toLocaleString(I18n.getLocale(), { weekday: "long" }).toUpperCase();
     }
     getDate() {
         return new Date(this.year, this.month).getDate();
@@ -79,4 +81,4 @@ class Calendar {
     }
 }
 
-exports.Calendar = Calendar
+exports.Calendar = Calendar;

package/framework/components/chui_card/card.js

@@ -1,5 +1,5 @@
-const {Icon} = require("../chui_icons/icons");
-const {optionOr} = require("../../modules/chui_functions");
+const { Icon } = require("../chui_icons/icons");
+const { optionOr } = require("../../modules/chui_functions");
 
 class Card {
     #chui_card = document.createElement("chui_card");
@@ -9,17 +9,19 @@ class Card {
     #title;
     #description;
     #body = document.createElement("card_body");
-    constructor(options = {
-        id: String(),
-        title: String(),
-        description: String(),
-        icon: String(),
-        width: String(),
-        height: String(),
-        style: String(),
-        components: []
-    }) {
-        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", 'chUiJS_Card');
+    constructor(
+        options = {
+            id: String(),
+            title: String(),
+            description: String(),
+            icon: String(),
+            width: String(),
+            height: String(),
+            style: String(),
+            components: [],
+        }
+    ) {
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Card");
         if (options.id !== undefined) this.#chui_card.id = options.id;
         const style = optionOr(options.style, undefined);
         if (style !== undefined) this.#chui_card.classList.add(style);
@@ -32,19 +34,33 @@ class Card {
         if (options.components !== undefined) this.add(...options.components);
     }
     // GET
-    getId() { return this.#chui_card.id; }
-    getTitle() { return this.#title === undefined ? "" : this.#title.innerText; }
-    getDescription() { return this.#description === undefined ? "" : this.#description.innerText; }
-    getBody() { return this.#body; }
+    getId() {
+        return this.#chui_card.id;
+    }
+    getTitle() {
+        return this.#title === undefined ? "" : this.#title.innerText;
+    }
+    getDescription() {
+        return this.#description === undefined ? "" : this.#description.innerText;
+    }
+    getBody() {
+        return this.#body;
+    }
     // SET
-    setId(id = String()) { this.#chui_card.id = id; }
+    setId(id = String()) {
+        this.#chui_card.id = id;
+    }
     // Пустая строка — «не задана»: `classList.add("")` бросает исключение
     setStyle(style = String()) {
         const known = optionOr(style, undefined);
         if (known !== undefined) this.#chui_card.classList.add(known);
     }
-    setWidth(width = String()) { this.#chui_card.style.width = width; }
-    setHeight(height = String()) { this.#chui_card.style.height = height; }
+    setWidth(width = String()) {
+        this.#chui_card.style.width = width;
+    }
+    setHeight(height = String()) {
+        this.#chui_card.style.height = height;
+    }
     setIcon(icon = String()) {
         if (this.#icon === undefined) {
             this.#icon = document.createElement("card_icon");
@@ -70,7 +86,9 @@ class Card {
     add(...components) {
         for (let component of components) this.#body.appendChild(component.set());
     }
-    clear() { this.#body.innerHTML = ""; }
+    clear() {
+        this.#body.innerHTML = "";
+    }
     // Шапка создаётся при первом обращении и всегда стоит выше тела
     #headNode() {
         if (this.#head === undefined) {
@@ -87,7 +105,9 @@ class Card {
         return this.#titles;
     }
     // RENDER
-    set() { return this.#chui_card; }
+    set() {
+        return this.#chui_card;
+    }
 }
 
-exports.Card = Card
+exports.Card = Card;

package/framework/components/chui_chat/chat.js

@@ -1,14 +1,14 @@
-const { setStyles, markdownToHtml, optionOr } = require('../../modules/chui_functions');
-const { Avatar } = require('../chui_avatar/avatar');
-const { Icon, Icons } = require('../chui_icons/icons');
-const { I18n } = require('../../modules/chui_i18n/chui_i18n');
+const { setStyles, markdownToHtml, optionOr } = require("../../modules/chui_functions");
+const { Avatar } = require("../chui_avatar/avatar");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /** Значки состояния отправленного сообщения: в пути, доставлено, прочитано, ошибка */
 const STATUS_ICONS = {
     sending: Icons.ACTIONS.SCHEDULE,
     sent: Icons.NAVIGATION.CHECK,
     read: Icons.ACTIONS.DONE_ALL,
-    failed: Icons.ALERT.ERROR_OUTLINE
+    failed: Icons.ALERT.ERROR_OUTLINE,
 };
 /** Прокрутка считается «у нижнего края», если до него осталось меньше этого, px */
 const NEAR_BOTTOM = 80;
@@ -63,7 +63,7 @@ class Chat {
         SENDING: "sending",
         SENT: "sent",
         READ: "read",
-        FAILED: "failed"
+        FAILED: "failed",
     };
     static #counter = 0;
 
@@ -94,12 +94,24 @@ class Chat {
     #last_date = undefined;
     #last_group = undefined;
 
-    constructor(options = {
-        id: String(), title: String(), subtitle: String(), messages: [], own: String(),
-        placeholder: String(), sendText: String(), sendLabel: String(), composer: Boolean(),
-        height: String(), width: String(), dateSeparators: Boolean(),
-        onSend: undefined, onMessageClick: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            title: String(),
+            subtitle: String(),
+            messages: [],
+            own: String(),
+            placeholder: String(),
+            sendText: String(),
+            sendLabel: String(),
+            composer: Boolean(),
+            height: String(),
+            width: String(),
+            dateSeparators: Boolean(),
+            onSend: undefined,
+            onMessageClick: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Chat");
         Chat.#counter += 1;
         this.#id = options.id === undefined ? `chui_chat_${Chat.#counter}` : options.id;
@@ -130,7 +142,8 @@ class Chat {
         this.#composer.setAttribute("aria-label", I18n.t("feedback.chatComposer"));
         this.#input.className = "chat_input";
         this.#input.rows = 1;
-        this.#input.placeholder = this.#placeholder === undefined ? I18n.t("feedback.chatPlaceholder") : this.#placeholder;
+        this.#input.placeholder =
+            this.#placeholder === undefined ? I18n.t("feedback.chatPlaceholder") : this.#placeholder;
         this.#input.setAttribute("aria-label", I18n.t("feedback.chatComposer"));
         this.#send_button.type = "button";
         this.#send_button.className = "chat_send";
@@ -162,16 +175,32 @@ class Chat {
     }
 
     // GET
-    getId() { return this.#id; }
-    getTitle() { return this.#title.innerText; }
-    getSubtitle() { return this.#subtitle.innerText; }
+    getId() {
+        return this.#id;
+    }
+    getTitle() {
+        return this.#title.innerText;
+    }
+    getSubtitle() {
+        return this.#subtitle.innerText;
+    }
     /** Текст в поле ввода — то, что ещё не отправлено */
-    getValue() { return this.#input.value; }
+    getValue() {
+        return this.#input.value;
+    }
     /** Копии сообщений: правка копии не меняет журнал */
-    getMessages() { return this.#messages.map((message) => Object.assign({}, message)); }
-    isTyping() { return this.#typing_name !== undefined; }
-    isDisabled() { return this.#disabled; }
-    getLog() { return this.#log; }
+    getMessages() {
+        return this.#messages.map((message) => Object.assign({}, message));
+    }
+    isTyping() {
+        return this.#typing_name !== undefined;
+    }
+    isDisabled() {
+        return this.#disabled;
+    }
+    getLog() {
+        return this.#log;
+    }
 
     // SET
     setTitle(text = String()) {
@@ -212,7 +241,9 @@ class Chat {
         this.#send_listeners.push(listener);
         return this;
     }
-    set() { return this.#root; }
+    set() {
+        return this.#root;
+    }
 
     // СООБЩЕНИЯ
     /** Полная замена списка: журнал собирается заново, группы схлопываются по автору и дню */
@@ -253,13 +284,14 @@ class Chat {
     setTyping(name = undefined) {
         this.#typing_name = name;
         this.#typing.hidden = name === undefined;
-        this.#typing.innerText = name === undefined ? "" : I18n.t("feedback.chatTyping", {name: name});
+        this.#typing.innerText = name === undefined ? "" : I18n.t("feedback.chatTyping", { name: name });
         return this;
     }
     scrollToBottom(smooth = true) {
         // Плавная прокрутка — движение; при `prefers-reduced-motion` она идёт сразу
         const behavior = smooth && this.#reducedMotion() === false ? "smooth" : "auto";
-        if (typeof this.#log.scrollTo === "function") this.#log.scrollTo({top: this.#log.scrollHeight, behavior: behavior});
+        if (typeof this.#log.scrollTo === "function")
+            this.#log.scrollTo({ top: this.#log.scrollHeight, behavior: behavior });
         else this.#log.scrollTop = this.#log.scrollHeight;
         return this;
     }
@@ -276,7 +308,7 @@ class Chat {
             author: this.#own,
             own: true,
             time: Date.now(),
-            status: Chat.STATUS.SENDING
+            status: Chat.STATUS.SENDING,
         });
         this.#input.value = "";
         this.#syncSendState();
@@ -344,7 +376,11 @@ class Chat {
     /** Группа для сообщения: та же, если автор и день совпадают, иначе новая */
     #groupFor(message) {
         const author = this.#authorOf(message);
-        if (this.#last_group !== undefined && this.#last_group.author === author && this.#last_group.day === this.#last_date) {
+        if (
+            this.#last_group !== undefined &&
+            this.#last_group.author === author &&
+            this.#last_group.day === this.#last_date
+        ) {
             return this.#last_group;
         }
         const node = document.createElement("chat_group");
@@ -356,14 +392,14 @@ class Chat {
         if (message.own !== true) {
             avatar = new Avatar({
                 name: author,
-                image: message.avatar === undefined ? undefined : {path: message.avatar},
+                image: message.avatar === undefined ? undefined : { path: message.avatar },
                 size: Avatar.SIZE.SMALL,
-                decorative: true
+                decorative: true,
             });
             node.prepend(avatar.set());
         }
         this.#log.appendChild(node);
-        this.#last_group = {node: node, bubbles: bubbles, avatar: avatar, author: author, day: this.#last_date};
+        this.#last_group = { node: node, bubbles: bubbles, avatar: avatar, author: author, day: this.#last_date };
         return this.#last_group;
     }
     #bubble(message, first) {
@@ -418,7 +454,10 @@ class Chat {
             status.dataset.status = message.status;
             status.setAttribute("aria-label", this.#statusLabel(message.status));
             status.setAttribute("role", "img");
-            status.innerHTML = new Icon(STATUS_ICONS[message.status] === undefined ? STATUS_ICONS.sent : STATUS_ICONS[message.status], "13px").getHTML();
+            status.innerHTML = new Icon(
+                STATUS_ICONS[message.status] === undefined ? STATUS_ICONS.sent : STATUS_ICONS[message.status],
+                "13px"
+            ).getHTML();
             meta.appendChild(status);
         }
         return meta;
@@ -442,10 +481,10 @@ class Chat {
         if (this.#dayKey(date) === this.#dayKey(now)) return I18n.t("common.today");
         const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
         if (this.#dayKey(date) === this.#dayKey(yesterday)) return I18n.t("common.yesterday");
-        return new Intl.DateTimeFormat(I18n.getLocale(), {day: "numeric", month: "long"}).format(date);
+        return new Intl.DateTimeFormat(I18n.getLocale(), { day: "numeric", month: "long" }).format(date);
     }
     #timeLabel(date) {
-        return new Intl.DateTimeFormat(I18n.getLocale(), {hour: "2-digit", minute: "2-digit"}).format(date);
+        return new Intl.DateTimeFormat(I18n.getLocale(), { hour: "2-digit", minute: "2-digit" }).format(date);
     }
 
     // === ОБРАБОТЧИКИ ===
@@ -464,7 +503,7 @@ class Chat {
     };
 }
 
-exports.Chat = Chat
+exports.Chat = Chat;
 
 // Описание сообщения собирает фабрика — как у ContextMenu и SplitButton
 Chat.Message = (options = {}) => Object.assign({}, options);

package/framework/components/chui_clipboard_history/clipboard_history.js

@@ -1,7 +1,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 { 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");
 
 /**
  * Панель истории буфера обмена: последние тексты, которые приложение кладло в буфер.
@@ -38,15 +38,17 @@ class ClipboardHistory {
     #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,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_ClipboardHistory");
         ClipboardHistory.#counter += 1;
         this.#id = options.id === undefined ? `chui_clipboard_history_${ClipboardHistory.#counter}` : options.id;
@@ -81,9 +83,12 @@ 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(() => {});
     }
 
     // GET
@@ -141,7 +146,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;
         });
     }
@@ -198,7 +205,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 +218,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);
@@ -228,8 +235,10 @@ class ClipboardHistory {
     };
 
     #onClear = () => {
-        this.clear().then(() => this.#announce(I18n.t("graphics.clipboardCleared"))).catch(() => {});
+        this.clear()
+            .then(() => this.#announce(I18n.t("graphics.clipboardCleared")))
+            .catch(() => {});
     };
 }
 
-exports.ClipboardHistory = ClipboardHistory
+exports.ClipboardHistory = ClipboardHistory;

package/framework/components/chui_clipboard_history/styles.css

@@ -65,7 +65,8 @@ 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(--main_padding);
 }
 
 clipboard_history_item + clipboard_history_item {
@@ -93,7 +94,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);
 }

package/framework/components/chui_code/code.js

@@ -1,7 +1,7 @@
 class CodeBlock {
     #chui_code = document.createElement(`code`);
     constructor(text = String(), options = { textAlign: String(), wordBreak: String(), width: String() }) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_code');
+        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;
@@ -16,4 +16,4 @@ class CodeBlock {
     }
 }
 
-exports.CodeBlock = CodeBlock
+exports.CodeBlock = CodeBlock;

package/framework/components/chui_code/styles.css

@@ -11,7 +11,7 @@
     background: var(--element_background_2);
     border: 1px solid var(--border_color);
     border-radius: var(--border_radius);
-    font-family: 'chui_mono', monospace;
+    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;
 
@@ -59,22 +59,24 @@ class CodeEditor {
     #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();
+    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;
@@ -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` — куда вернуть каретку */
@@ -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.#line_numbers
+            ? Array.from({ length: lines }, (_, index) => index + 1).join("\n")
+            : "";
         this.#syncScroll();
     }
 
@@ -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

@@ -11,7 +11,7 @@ chui_code_editor {
     background: var(--element_background_2);
     border: 1px solid var(--border_color);
     border-radius: var(--border_radius);
-    font-family: 'chui_mono', monospace;
+    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;