chuijs 4.0.3 → 4.0.4

package/framework/components/chui_watermark/watermark.js

@@ -44,12 +44,12 @@ class Watermark {
     #id = undefined;
     #text = undefined;
     #image = undefined;
-    #image_node = undefined;
+    #imageNode = undefined;
     #font = { size: Watermark.#DEFAULT_FONT_SIZE, weight: 400, family: undefined, color: undefined };
     #rotate = Watermark.#DEFAULT_ROTATE;
     #gap = { ...Watermark.#DEFAULT_GAP };
     #opacity = Watermark.#DEFAULT_OPACITY;
-    #z_index = Watermark.#DEFAULT_Z_INDEX;
+    #zIndex = Watermark.#DEFAULT_Z_INDEX;
     #scheme = undefined;
     #destroyed = false;
 
@@ -123,7 +123,7 @@ class Watermark {
     }
 
     getZIndex() {
-        return this.#z_index;
+        return this.#zIndex;
     }
 
     /** Слой с метками (для своих стилей) */
@@ -156,12 +156,12 @@ class Watermark {
      */
     setImage(image = undefined) {
         this.#image = image;
-        this.#image_node = undefined;
+        this.#imageNode = undefined;
         if (image !== undefined && image !== null && image !== "") {
             const node = new Image();
             node.onload = () => this.#draw();
             node.src = Watermark.#resolveSource(image);
-            this.#image_node = node;
+            this.#imageNode = node;
         }
         this.#draw();
         return this;
@@ -202,8 +202,8 @@ class Watermark {
 
     setZIndex(zIndex = Number()) {
         const number = Number(zIndex);
-        this.#z_index = Number.isFinite(number) ? number : Watermark.#DEFAULT_Z_INDEX;
-        this.#root.style.setProperty("--watermark_z_index", String(this.#z_index));
+        this.#zIndex = Number.isFinite(number) ? number : Watermark.#DEFAULT_Z_INDEX;
+        this.#root.style.setProperty("--watermark_z_index", String(this.#zIndex));
         return this;
     }
 
@@ -280,26 +280,26 @@ class Watermark {
     #draw() {
         if (this.#destroyed) return this;
         const text = this.#text === undefined ? "" : String(this.#text);
-        const image = this.#image_node;
-        const has_image = image !== undefined && image.complete === true && image.naturalWidth > 0;
-        const has_text = text !== "";
+        const image = this.#imageNode;
+        const hasImage = image !== undefined && image.complete === true && image.naturalWidth > 0;
+        const hasText = text !== "";
         // Метки нечем рисовать — слой не показываем, чтобы не занимать место
-        this.#layer.hidden = has_text === false && has_image === false;
+        this.#layer.hidden = hasText === false && hasImage === false;
         if (this.#layer.hidden) {
             // Снимаем значение, а не ставим `none`: базовое состояние даёт CSS
             this.#layer.style.removeProperty("background-image");
             return this;
         }
-        const pixel_ratio = typeof window !== "undefined" && window.devicePixelRatio > 0 ? window.devicePixelRatio : 1;
+        const pixelRatio = typeof window !== "undefined" && window.devicePixelRatio > 0 ? window.devicePixelRatio : 1;
         const tile = { x: this.#gap.x, y: this.#gap.y };
         // Плитка = две метки по каждой оси: на стыках соседних плиток рисунок сходится
         const canvas = document.createElement("canvas");
-        canvas.width = Math.round(tile.x * 2 * pixel_ratio);
-        canvas.height = Math.round(tile.y * 2 * pixel_ratio);
+        canvas.width = Math.round(tile.x * 2 * pixelRatio);
+        canvas.height = Math.round(tile.y * 2 * pixelRatio);
         const context = canvas.getContext("2d");
-        context.scale(pixel_ratio, pixel_ratio);
+        context.scale(pixelRatio, pixelRatio);
         context.globalAlpha = this.#opacity;
-        if (has_text) {
+        if (hasText) {
             const font = this.#resolveFont();
             context.font = `${font.weight} ${font.size}px ${font.family}`;
             context.fillStyle = font.color;
@@ -315,7 +315,7 @@ class Watermark {
                 }
             }
         }
-        if (has_image) {
+        if (hasImage) {
             const max = Math.min(tile.x, tile.y) * 0.6;
             const ratio = Math.min(max / image.naturalWidth, max / image.naturalHeight, 1);
             const width = image.naturalWidth * ratio;

package/framework/components/chui_webview/webview.js

@@ -36,9 +36,9 @@ class WebView {
         webPreferences: "javascript=yes",
     };
     #id = require("randomstring").generate();
-    #main_block = document.createElement("chui_webview");
+    #mainBlock = document.createElement("chui_webview");
     #WebView = document.createElement("webview");
-    #chui_load = document.createElement("chui_load");
+    #chuiLoad = document.createElement("chui_load");
     constructor(url = String(), dev = false, options = {}) {
         require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_WebView");
         const settings = { ...WebView.DEFAULTS };
@@ -66,15 +66,15 @@ class WebView {
             );
         if (settings.partition !== undefined) this.#WebView.setAttribute("partition", String(settings.partition));
         if (settings.preload !== undefined) this.#WebView.setAttribute("preload", String(settings.preload));
-        let spinner = new Spinner(Spinner.SIZE.BIG);
-        this.#chui_load.appendChild(spinner.set());
-        this.#main_block.appendChild(this.#WebView);
+        const spinner = new Spinner(Spinner.SIZE.BIG);
+        this.#chuiLoad.appendChild(spinner.set());
+        this.#mainBlock.appendChild(this.#WebView);
         const loadStart = () => {
-            this.#main_block.appendChild(this.#chui_load);
+            this.#mainBlock.appendChild(this.#chuiLoad);
         };
         const loadStop = () => {
             new Animation(this.#WebView).fadeIn();
-            this.#main_block.removeChild(this.#chui_load);
+            this.#mainBlock.removeChild(this.#chuiLoad);
             if (dev) this.#WebView.openDevTools();
         };
         this.#WebView.addEventListener("did-start-loading", loadStart);
@@ -106,7 +106,7 @@ class WebView {
         this.#WebView.addEventListener("did-frame-finish-load", async () => {
             const fs = require("fs");
             if (options.cssPath !== undefined) {
-                let data = fs.readFileSync(options.cssPath, "utf8");
+                const data = fs.readFileSync(options.cssPath, "utf8");
                 this.#WebView.insertCSS(String(data)).catch((r) => Log.error(r));
             }
             if (options.jsPath !== undefined) {
@@ -131,7 +131,7 @@ class WebView {
         return this.#WebView.getWebContentsId();
     }
     set() {
-        return this.#main_block;
+        return this.#mainBlock;
     }
 }
 

package/framework/components/chui_write_bar/styles.css

@@ -0,0 +1,172 @@
+/* Панель ввода: строка «вложения — текст — отправка».
+   Панель не полагает, где она стоит: в карточке она читается кромкой той же карточки,
+   а поверх содержимого её поднимают тенью (`data-shadow="true"`), которую включает
+   приложение — заодно с `StickyBar`, если панель должна прилипать к низу окна. */
+
+chui_write_bar {
+    display: block;
+    box-sizing: border-box;
+    width: -webkit-fill-available;
+}
+
+write_bar_row {
+    display: flex;
+    flex-direction: row;
+    /* Кнопки встают по низу: пока поле в одну линию, разницы нет, а на выросшем поле
+       строка кнопок остаётся там же, где была, — она не едет за текстом */
+    align-items: flex-end;
+    gap: 6px;
+    box-sizing: border-box;
+    width: -webkit-fill-available;
+    padding: var(--control_padding);
+    background: var(--element_background_2);
+    border-top: 1px solid var(--border_color);
+}
+
+/* Тень вместо верхней линии: панель поверх содержимого отделяется материалом, а не чертой */
+chui_write_bar[data-shadow="true"] write_bar_row {
+    border-top-color: transparent;
+    box-shadow: var(--box_shadow_main);
+}
+
+/* Пустой слот места не занимает: у панели без вложений слева нет зазора */
+write_bar_slot {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 2px;
+    flex: none;
+}
+
+write_bar_slot:empty {
+    display: none;
+}
+
+.write_bar_field {
+    flex: 1 1 auto;
+    min-width: 0;
+    box-sizing: border-box;
+    resize: none;
+    /* Коробка поля — как у остальных полей фреймворка: заливка контрола, волосяная линия
+       и радиус. Отступы и строка подобраны под `--control_height`, поэтому в одну линию
+       поле ровно той же высоты, что кнопки панели, и строка читается одной линией:
+       с прежними отступами 8px поле было на 8px выше кнопок и панель выглядела кривой. */
+    min-height: var(--control_height);
+    padding: calc(var(--control_padding_sm) - 1px) 10px;
+    line-height: 1.25;
+    /* Прокрутка появляется только на выросшем поле: в одну линию у поля нет полосы,
+       которая отнимала бы ширину у текста (предел роста задаёт JS — maxHeight) */
+    overflow-y: hidden;
+    border-radius: var(--radius_sm);
+    border: 1px solid var(--border_color);
+    background: var(--element_background);
+    color: var(--text_color);
+    font-family: inherit;
+    font-size: var(--font_default_size);
+}
+
+.write_bar_field[data-scrollable="true"] {
+    overflow-y: auto;
+}
+
+.write_bar_field::placeholder {
+    color: var(--text_color_disabled);
+}
+
+.write_bar_field:hover:not(:disabled) {
+    border-color: var(--border_color_hover);
+}
+
+/* Активное поле выдаёт кромка, а не кольцо: в панели ввода каретка и так показывает,
+   где набирают, а контур вокруг строки рябит на каждом щелчке по полю */
+.write_bar_field:focus {
+    outline: none;
+    border-color: var(--blue_prime_background);
+}
+
+.write_bar_field:disabled {
+    cursor: not-allowed;
+    background: var(--element_background_disabled);
+    color: var(--text_color_disabled);
+}
+
+/* Кнопка панели: круг со значком, подпись живёт в `aria-label` и подсказке */
+.write_bar_button {
+    position: relative;
+    flex: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: var(--control_height);
+    height: var(--control_height);
+    padding: 0;
+    border: none;
+    border-radius: var(--radius_circle);
+    background: transparent;
+    color: var(--text_color);
+}
+
+.write_bar_button:hover {
+    background: var(--element_background_hover);
+}
+
+/* Нажатие — акцент, как у Button: контрол отвечает на клик ещё до действия */
+.write_bar_button:active:not(:disabled) {
+    background: var(--blue_prime_background);
+    color: var(--text_color_hover);
+}
+
+.write_bar_button:disabled {
+    cursor: not-allowed;
+    background: transparent;
+    color: var(--text_color_disabled);
+}
+
+/* Отправка — акцентная кнопка панели: она одна здесь означает «сделать» */
+.write_bar_button[data-accent="true"] {
+    background: var(--blue_prime_background);
+    color: var(--text_color_hover);
+}
+
+.write_bar_button[data-accent="true"]:hover {
+    background: var(--blue_prime_background_tint_strong);
+}
+
+.write_bar_button[data-accent="true"]:disabled {
+    cursor: not-allowed;
+    background: var(--button_background_disabled);
+    color: var(--text_color_disabled);
+}
+
+.write_bar_button chui_icon {
+    color: inherit;
+}
+
+/* Счётчик кнопки: число выбранного важнее подписи, поэтому плашка в углу круга */
+write_bar_badge {
+    position: absolute;
+    top: -2px;
+    inset-inline-end: -2px;
+    box-sizing: border-box;
+    min-width: 16px;
+    height: 16px;
+    padding-inline: 4px;
+    border-radius: var(--radius_pill);
+    background: var(--red_prime_background);
+    color: var(--text_color_hover);
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 16px;
+    text-align: center;
+}
+
+write_bar_badge[hidden] {
+    display: none;
+}
+
+/* DISABLED STYLES */
+chui_write_bar[data-disabled="true"] write_bar_row {
+    background: var(--element_background_disabled);
+}

package/framework/components/chui_write_bar/write_bar.js

@@ -0,0 +1,320 @@
+const { Icon, Icons } = require("../chui_icons/icons");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
+const { optionOr, setStyles } = require("../../modules/chui_functions");
+
+/** Предел роста поля: дальше текст уходит в прокрутку самого поля, а не растёт панель */
+const DEFAULT_MAX_HEIGHT = 120;
+
+/**
+ * Кнопка панели ввода: значок с подписью для скринридера и счётчиком.
+ *
+ * Это настоящий `<button>`, а не кастомный тег: клавиатура, фокус и роль у него уже есть,
+ * и скринридер читает его как кнопку без дополнительных договоров.
+ *
+ * Подпись обязательна — лигатура значка («attach_file») ничего не говорит скринридеру,
+ * а сам значок скрыт от дерева доступности (`Icon` ставит `aria-hidden`). Счётчик нужен
+ * кнопкам, за которыми стоит число: выбранные вложения, эмодзи, черновик.
+ */
+class WriteBarIcon {
+    #root = document.createElement("button");
+    #label = String();
+    #onClick = undefined;
+    #disabled = false;
+    #badge = document.createElement("write_bar_badge");
+
+    constructor(options = {}) {
+        const icon = optionOr(options.icon, String());
+        const label = optionOr(options.label, String());
+        this.#label = label === "" ? I18n.t("feedback.writeBarButton") : label;
+        this.#root.type = "button";
+        this.#root.className = "write_bar_button";
+        if (icon !== "") this.#root.innerHTML = new Icon(icon, "20px").getHTML();
+        if (options.accent === true) this.#root.dataset.accent = "true";
+        this.#root.setAttribute("aria-label", this.#label);
+        // Подсказка мышью повторяет имя кнопки: подписи в панели нет, а догадываться — не дело
+        this.#root.title = this.#label;
+        this.#onClick = typeof options.onClick === "function" ? options.onClick : undefined;
+        this.#root.addEventListener("click", () => {
+            if (this.#disabled === true) return;
+            if (this.#onClick !== undefined) this.#onClick(this);
+        });
+        if (options.badge !== undefined) this.setBadge(options.badge);
+        if (options.disabled === true) this.setDisabled(true);
+    }
+
+    /** Счётчик на кнопке: число показывает плашка, скринридеру оно попадает в подпись */
+    setBadge(count = Number()) {
+        const value = Number(count);
+        const shown = Number.isFinite(value) && value > 0 ? String(value) : "";
+        this.#badge.innerText = shown;
+        this.#badge.hidden = shown === "";
+        this.#root.setAttribute(
+            "aria-label",
+            shown === "" ? this.#label : `${this.#label}, ${I18n.t("feedback.writeBarBadge", { value: shown })}`
+        );
+        if (shown !== "" && this.#badge.parentNode === null) this.#root.appendChild(this.#badge);
+        return this;
+    }
+
+    setDisabled(boolean = Boolean()) {
+        this.#disabled = boolean === true;
+        this.#root.disabled = this.#disabled;
+        return this;
+    }
+
+    setLabel(text = String()) {
+        this.#label = String(text);
+        this.#root.setAttribute("aria-label", this.#label);
+        this.#root.title = this.#label;
+        return this;
+    }
+
+    set() {
+        return this.#root;
+    }
+}
+
+/**
+ * Панель ввода — нижняя строка приложения: слева вложения и эмодзи, по центру поле текста,
+ * справа отправка.
+ *
+ * Поле растёт под содержимое до `maxHeight` (по умолчанию 120 px), дальше текст уходит
+ * в прокрутку поля — панель места не отнимает. Enter отправляет, Shift+Enter переносит
+ * строку (`setEnterSends(false)` возвращает обычное поле с переносом), во время набора
+ * иероглифов Enter выбирает вариант и не отправляет.
+ *
+ * Опции: `id`, `placeholder`, `value`, `maxHeight`, `disabled`, `shadow` (тень вместо
+ * верхней волосяной линии — для панели поверх содержимого), `enterSends`, `sendText`
+ * (подпись кнопки отправки), `buttons` (кнопки панели), `onSend`.
+ *
+ * Методы: `getValue()`, `setValue(text)`, `clear()`, `send()`, `addButton(options)`,
+ * `addSendListener(fn)`, `removeSendListener(fn)`, `setPlaceholder(text)`, `setDisabled(bool)`,
+ * `isDisabled()`, `setEnterSends(bool)`, `setSendLabel(text)`, `focus()`, `blur()`, `getField()`,
+ * `getSendButton()`, `set()`, `destroy()`.
+ *
+ * Кнопки панели собираются фабрикой `WriteBar.Icon({ icon, label, onClick, badge, accent })`:
+ * своей кнопке нужен значок из `Icons` и подпись для скринридера.
+ *
+ * Прилипание к низу окна компонент не делает сам — для этого в фреймворке есть `StickyBar`;
+ * панель не полагает, где она стоит, и потому одинаково работает и в карточке, и в окне.
+ */
+class WriteBar {
+    /** Фабрика кнопок панели: `WriteBar.Icon({ icon, label, onClick, badge, accent })` */
+    static Icon = (options = {}) => new WriteBarIcon(options);
+
+    #root = document.createElement("chui_write_bar");
+    #row = document.createElement("write_bar_row");
+    #field = document.createElement("textarea");
+    #before = document.createElement("write_bar_slot");
+    #after = document.createElement("write_bar_slot");
+    #send = undefined;
+    #icons = [];
+    #maxHeight = DEFAULT_MAX_HEIGHT;
+    #disabled = false;
+    #enterSends = true;
+    #onSend = undefined;
+    #sendListeners = [];
+
+    constructor(options = {}) {
+        setStyles(__dirname + "/styles.css", "chUiJS_WriteBar");
+        if (options.id !== undefined) this.#root.id = options.id;
+        const maxHeight = Number(options.maxHeight);
+        this.#maxHeight = Number.isFinite(maxHeight) && maxHeight > 0 ? maxHeight : DEFAULT_MAX_HEIGHT;
+        this.#onSend = typeof options.onSend === "function" ? options.onSend : undefined;
+        this.#enterSends = options.enterSends !== false;
+
+        this.#field.className = "write_bar_field";
+        // Одна строка: `rows` держит высоту в покое, растущую высоту ведёт `#autosize`
+        this.#field.rows = 1;
+        this.#field.setAttribute("aria-multiline", "true");
+        this.#field.setAttribute("aria-keyshortcuts", "Enter");
+        this.#field.setAttribute("aria-label", I18n.t("feedback.writeBarField"));
+        this.#syncHint();
+        this.#root.setAttribute("role", "group");
+        this.#root.setAttribute("aria-label", I18n.t("feedback.writeBar"));
+
+        this.#send = new WriteBarIcon({
+            icon: Icons.CONTENT.SEND,
+            label: I18n.t("feedback.writeBarSend"),
+            accent: true,
+            onClick: () => this.send(),
+        });
+        this.#after.appendChild(this.#send.set());
+        // Слоты: слева — вложения и эмодзи, справа — свои действия перед отправкой
+        this.#row.append(this.#before, this.#field, this.#after);
+        this.#root.appendChild(this.#row);
+
+        this.#field.addEventListener("input", () => {
+            this.#autosize();
+            this.#syncSendState();
+        });
+        this.#field.addEventListener("keydown", (event) => this.#onKeydown(event));
+
+        this.setPlaceholder(
+            options.placeholder === undefined ? I18n.t("feedback.writeBarPlaceholder") : options.placeholder
+        );
+        if (options.sendText !== undefined) this.setSendLabel(options.sendText);
+        if (options.value !== undefined) this.setValue(options.value);
+        if (Array.isArray(options.buttons)) for (const button of options.buttons) this.#addBefore(button);
+        if (options.shadow === true) this.#root.dataset.shadow = "true";
+        if (options.disabled === true) this.setDisabled(true);
+        this.#autosize();
+        this.#syncSendState();
+    }
+
+    // GET
+    getValue() {
+        return this.#field.value;
+    }
+    isDisabled() {
+        return this.#disabled;
+    }
+    getField() {
+        return this.#field;
+    }
+    getSendButton() {
+        return this.#send;
+    }
+    /** Кнопки, добавленные слотом (отправка сюда не входит — у неё своё место) */
+    getIcons() {
+        return this.#icons.slice();
+    }
+
+    // SET
+    setValue(text = String()) {
+        this.#field.value = String(text);
+        this.#autosize();
+        this.#syncSendState();
+        return this;
+    }
+    clear() {
+        return this.setValue("");
+    }
+    setPlaceholder(text = String()) {
+        this.#field.placeholder = String(text);
+        return this;
+    }
+    setSendLabel(text = String()) {
+        this.#send.setLabel(String(text));
+        return this;
+    }
+    setDisabled(boolean = Boolean()) {
+        this.#disabled = boolean === true;
+        this.#root.dataset.disabled = this.#disabled ? "true" : "false";
+        this.#field.disabled = this.#disabled;
+        this.#syncSendState();
+        return this;
+    }
+    /**
+     * Enter отправляет (по умолчанию) или переносит строку. Выключают там, где панель —
+     * обычное поле в форме: случайная отправка посреди набора там дороже лишнего щелчка.
+     */
+    setEnterSends(boolean = Boolean()) {
+        this.#enterSends = boolean === true;
+        this.#syncHint();
+        return this;
+    }
+    focus() {
+        this.#field.focus();
+        return this;
+    }
+    blur() {
+        this.#field.blur();
+        return this;
+    }
+
+    /** Кнопка в левом слоте — вложения, эмодзи, что угодно со значком и подписью */
+    addButton(options = {}) {
+        const button = options instanceof WriteBarIcon ? options : new WriteBarIcon(options);
+        this.#icons.push(button);
+        return button;
+    }
+    #addBefore(options = {}) {
+        const button = this.addButton(options);
+        this.#before.appendChild(button.set());
+    }
+
+    /** Отправка: пустое поле и выключенная панель ничего не делают — как нажатие кнопки */
+    send() {
+        if (this.#disabled === true) return this;
+        const text = this.#field.value.trim();
+        if (text === "") return this;
+        this.#field.value = "";
+        this.#autosize();
+        this.#syncSendState();
+        if (this.#onSend !== undefined) this.#onSend(text, this);
+        for (const listener of this.#sendListeners) listener(text, this);
+        this.focus();
+        return this;
+    }
+    addSendListener(listener = () => {}) {
+        if (typeof listener === "function") this.#sendListeners.push(listener);
+        return this;
+    }
+    /** Снять слушателя отправки: нужен тому, кто связывает панель с лентой и разрывает связь */
+    removeSendListener(listener = () => {}) {
+        const index = this.#sendListeners.indexOf(listener);
+        if (index !== -1) this.#sendListeners.splice(index, 1);
+        return this;
+    }
+
+    set() {
+        return this.#root;
+    }
+    destroy() {
+        this.#sendListeners = [];
+        this.#icons = [];
+        this.#onSend = undefined;
+        this.#root.remove();
+    }
+
+    // === ВНУТРЕННЕЕ ===
+    /**
+     * Подсказка про Enter висит на поле только тогда, когда Enter действительно отправляет:
+     * иначе она обещала бы то, чего панель не делает.
+     */
+    #syncHint() {
+        if (this.#enterSends === true) this.#field.title = I18n.t("feedback.writeBarHint");
+        else this.#field.removeAttribute("title");
+    }
+    /** Enter отправляет, Shift+Enter переносит; во время набора иероглифов Enter не наш */
+    #onKeydown(event = {}) {
+        if (this.#enterSends === false) return;
+        if (event.key !== "Enter" || event.shiftKey === true) return;
+        if (event.isComposing === true) return;
+        event.preventDefault();
+        this.send();
+    }
+    /**
+     * Высота поля по содержимому, до предела. Сначала высоту снимаем (`auto`): иначе поле
+     * никогда не уменьшается — `scrollHeight` не бывает меньше текущей высоты. На пределе
+     * содержимое уходит в прокрутку поля, а панель перестаёт расти.
+     *
+     * Пустое поле высоты не получает вовсе: её держит `rows="1"` и нижний предел стилей
+     * (`min-height: --control_height` — по нему же выровнены кнопки панели), поэтому
+     * панель не прыгает на первом же символе: в одну линию поле всегда высотой с кнопку.
+     */
+    #autosize() {
+        const field = this.#field;
+        const limit = this.#maxHeight;
+        if (field.value === "") {
+            field.style.height = "";
+            field.dataset.scrollable = "false";
+            return;
+        }
+        field.style.height = "auto";
+        // `scrollHeight` — содержимое с отступами, но без рамки: в `border-box` её надо добавить,
+        // иначе поле «съёживается» на толщину рамки при первом же символе
+        const border = field.offsetHeight - field.clientHeight;
+        const height = field.scrollHeight + border;
+        field.style.height = Math.min(height, limit) + "px";
+        field.dataset.scrollable = height > limit ? "true" : "false";
+    }
+    /** Отправка гаснет на пустом поле: так панель говорит, что отправлять нечего */
+    #syncSendState() {
+        this.#send.setDisabled(this.#disabled === true || this.#field.value.trim() === "");
+    }
+}
+
+exports.WriteBar = WriteBar;
+exports.WriteBarIcon = WriteBarIcon;