chuijs 4.0.0 → 4.0.2

package/framework/components/chui_data_grid/data_grid.js

@@ -5,6 +5,7 @@ const {Dialog} = require('../chui_modal/modal');
 const {ContentBlock} = require('../chui_content_block/content_block');
 const {Button} = require('../chui_button/button');
 const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const {Desktop} = require('../../modules/chui_services/desktop');
 const {CheckBox} = require('../chui_inputs/chui_check_box/check_box');
 const {Select} = require('../chui_inputs/chui_select_box/select_box');
 
@@ -1939,7 +1940,10 @@ class DataGrid {
         return lines.join("\r\n");
     }
 
-    /** Текст в буфер обмена: браузерный буфер, иначе буфер Electron, иначе просто возврат */
+    /**
+     * Текст в буфер обмена: сначала буфер окна, иначе буфер приложения через `Desktop`
+     * (он работает и в безопасном окне, где прямого доступа к Electron нет), иначе возврат
+     */
     async exportToClipboard(options = {}) {
         const text = this.exportCSV(options);
         try {
@@ -1948,10 +1952,10 @@ class DataGrid {
                 return text;
             }
         } catch {
-            // Буфера в окне нет: пробуем буфер Electron ниже
+            // Буфера в окне нет: пробуем буфер приложения ниже
         }
         try {
-            require("electron").clipboard.writeText(text);
+            await Desktop.clipboard.writeText(text);
         } catch {
             // Ни одного буфера нет — текст остаётся у вызывающего кода
         }

package/framework/components/chui_notification/notification_update.js

@@ -44,6 +44,9 @@ class UpdateNotification {
         // а текст не отъезжает вбок под вращающимся кольцом
         this.#update_notification_icon = createStatusPlate(undefined, Icons.NOTIFICATION.SYSTEM_UPDATE);
         if (options.spinner) {
+            // Под кольцом заливки нет: плашка держит только место значка, иначе серая подложка
+            // читалась вторым фоном вокруг тонкого индикатора
+            this.#update_notification_icon.classList.add("notification_icon_plain");
             this.#update_notification_icon.innerHTML = "";
             this.#update_notification_icon.appendChild(new Spinner(Spinner.SIZE.V_SMALL, "0").set());
         }

package/framework/components/chui_notification/status_plate.css

@@ -35,3 +35,10 @@ notification_icon.notification_icon_error {
     background: var(--badge_error_back);
     color: var(--badge_error_text);
 }
+
+/* Плашка без заливки — только место значка. Так стоит вращающийся индикатор карточки
+   обновления: кольцо тонкое, и серая подложка читалась вторым фоном вокруг него.
+   Размер и выравнивание те же, поэтому текст заголовка не съезжает. */
+notification_icon.notification_icon_plain {
+    background: transparent;
+}

package/framework/components/chui_spinner/spinner.js

@@ -1,8 +1,14 @@
-let {Animation} = require('../../modules/chui_animations/animations');
+const {Animation} = require('../../modules/chui_animations/animations');
 const {I18n} = require('../../modules/chui_i18n/chui_i18n');
 
+const SVG_NS = "http://www.w3.org/2000/svg";
+/** Доля кольца, которую занимает дуга: четверть — самый читаемый «бегунок» */
+const ARC_SHARE = 0.25;
+
 /**
- * Индикатор загрузки: три вложенных кольца.
+ * Индикатор загрузки — одно тонкое кольцо: приглушённая дорожка и гладкая дуга со
+ * скруглёнными концами, равномерно вращающаяся. Раньше это были три вложенных кольца
+ * с коническими градиентами: на малых размерах они сливались и читались шумно.
  *
  * Доступность: блок — live-регион `role="status"` с именем из опции `label` (значения у индикатора
  * нет, поэтому сообщать можно только о факте загрузки; пустая строка имя убирает).
@@ -11,8 +17,6 @@ const {I18n} = require('../../modules/chui_i18n/chui_i18n');
 class Spinner {
     #spinner_main = document.createElement('chui_spiner')
     #spinner = document.createElement('spinner')
-    #spinner_2 = document.createElement('spinner')
-    #spinner_3 = document.createElement('spinner')
     #label = I18n.t("feedback.loading");
     #removed = false;
     constructor(size = Spinner.SIZE.DEFAULT, margin = String(), label = I18n.t("feedback.loading")) {
@@ -22,25 +26,38 @@ class Spinner {
         this.#spinner_main.setAttribute("aria-live", "polite");
         this.setLabel(label);
         //
-        let size_1 = size.SIZE;
-        this.#spinner.style.width = `${size_1}px`;
-        this.#spinner.style.height = `${size_1}px`;
-        this.#spinner.style.setProperty("--spinner_border", `${size.BORDER}px`);
-        //
-        let size_2 = size_1 - size.BORDER * 2;
-        this.#spinner_2.style.width = `${size_2}px`;
-        this.#spinner_2.style.height = `${size_2}px`;
-        this.#spinner_2.style.setProperty("--spinner_border", `${size.BORDER}px`);
-        //
-        let size_3 = size_2 - size.BORDER * 2;
-        this.#spinner_3.style.width = `${size_3}px`;
-        this.#spinner_3.style.height = `${size_3}px`;
-        this.#spinner_3.style.setProperty("--spinner_border", `${size.BORDER}px`);
-        //ADDS
-        this.#spinner_2.appendChild(this.#spinner_3)
-        this.#spinner.appendChild(this.#spinner_2)
+        const diameter = size.SIZE;
+        const border = size.BORDER;
+        this.#spinner.style.width = `${diameter}px`;
+        this.#spinner.style.height = `${diameter}px`;
+        // Толщину кольца читает CSS: `stroke-width` рисует и дорожку, и дугу
+        this.#spinner.style.setProperty("--spinner_border", `${border}px`);
+        // Геометрия идёт по радиусу до середины штриха, минус полпикселя запаса: сглаженная
+        // внешняя кромка кольца не должна срезаться рамкой `svg`
+        const radius = diameter / 2 - border / 2 - 0.5;
+        const circumference = 2 * Math.PI * radius;
+        const svg = document.createElementNS(SVG_NS, "svg");
+        svg.setAttribute("viewBox", `0 0 ${diameter} ${diameter}`);
+        svg.setAttribute("aria-hidden", "true");
+        svg.setAttribute("focusable", "false");
+        // Дорожка — целое приглушённое кольцо: дуга читается на любом фоне
+        svg.appendChild(this.#circle(radius, diameter, "spinner_track"));
+        // Дуга — четверть кольца; скруглённые концы и цвет задаёт CSS
+        const arc = this.#circle(radius, diameter, "spinner_arc");
+        arc.setAttribute("stroke-dasharray", `${circumference * ARC_SHARE} ${circumference}`);
+        svg.appendChild(arc);
+        this.#spinner.appendChild(svg);
         this.#spinner_main.appendChild(this.#spinner);
     }
+    /** Окружность по центру квадрата: общая разметка дорожки и дуги */
+    #circle(radius, diameter, className) {
+        const circle = document.createElementNS(SVG_NS, "circle");
+        circle.setAttribute("class", className);
+        circle.setAttribute("cx", `${diameter / 2}`);
+        circle.setAttribute("cy", `${diameter / 2}`);
+        circle.setAttribute("r", `${radius}`);
+        return circle;
+    }
     /** Имя для скринридера; пустая строка убирает объявление */
     getLabel() {
         return this.#label;

package/framework/components/chui_spinner/styles.css

@@ -2,10 +2,12 @@ chui_spiner {
     width: max-content;
     height: max-content;
     display: flex;
+    /* Цвет дуги: по умолчанию акцент, меняется через `style.color` на самом индикаторе */
+    color: var(--blue_prime_background);
     /* Вращается коробка, и её повёрнутый AABB больше стороны квадрата (90 → до 127 px):
        без обрезки этот «инк» уходил в прокрутку предков и раздувал scrollWidth карточки.
-       Краска кольца остаётся внутри окружности, вписанной в коробку, поэтому обрезка
-       ничего не теряет; 1px запаса сохраняет сглаженные касательные точки окружности. */
+       Кольцо остаётся внутри вписанной окружности, поэтому обрезка ничего не теряет;
+       1px запаса сохраняет сглаженную внешнюю кромку кольца. */
     overflow: clip;
     overflow-clip-margin: 1px;
 }
@@ -13,38 +15,35 @@ chui_spiner {
 spinner {
     /* Толщину кольца задаёт компонент (в JS — по размеру индикатора) */
     --spinner_border: 3px;
-    position: relative;
-    /* Кольцо — окружность: без border-box верхняя граница прибавлялась к высоте
-       (например 60x64) и скругление 50% рисовало овал */
-    box-sizing: border-box;
-    border-radius: 50%;
-    animation: spinner 2s linear infinite;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    display: block;
+    animation: spinner_rotate 1s linear infinite;
+}
+
+spinner svg {
+    display: block;
+    width: 100%;
+    height: 100%;
 }
 
-/* Дуга — конический градиент, обрезанный маской до полосы кольца: у рамки одного
-   сегмента (`border-top`) концы дуги сходятся клином, и на кольце 3–5px они читались
-   рваными. Маска стоит на псевдоэлементе: на самом `spinner` она срезала бы
-   вложенные кольца индикатора. */
-spinner::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    border-radius: 50%;
-    background: conic-gradient(var(--blue_prime_background) 0deg 90deg, transparent 90deg 360deg);
-    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--spinner_border)), #000 calc(100% - var(--spinner_border)));
-    mask: radial-gradient(farthest-side, transparent calc(100% - var(--spinner_border)), #000 calc(100% - var(--spinner_border)));
+/* Дорожка — целое приглушённое кольцо под дугой: дуга читается и на светлом, и на тёмном
+   фоне, а в покое кольцо остаётся кругом, без «обрубка» */
+spinner .spinner_track {
+    fill: none;
+    stroke: var(--text_color);
+    stroke-opacity: 0.12;
+    stroke-width: var(--spinner_border);
 }
 
-/* Крутится только внешнее кольцо: у вложенных поворот складывался с родительским
-   (1×/2×/3×), и дуги расходились по кругу — три рваных штриха вместо индикатора */
-spinner spinner {
-    animation: none;
+/* Дуга — часть кольца со скруглёнными концами: длину полосы задаёт компонент
+   (`stroke-dasharray`), толщину — переменная, цвет — `currentColor` */
+spinner .spinner_arc {
+    fill: none;
+    stroke: currentColor;
+    stroke-width: var(--spinner_border);
+    stroke-linecap: round;
 }
 
-@keyframes spinner {
+@keyframes spinner_rotate {
     from {
         transform: rotate(0deg);
     }
@@ -53,3 +52,10 @@ spinner spinner {
     }
 }
 
+/* Кому вращение мешает — оно остаётся, но медленнее: индикатор не «замирает» */
+@media (prefers-reduced-motion: reduce) {
+    spinner {
+        animation-duration: 2.5s;
+    }
+}
+

package/framework/components/chui_sticky_bar/sticky_bar.js

@@ -0,0 +1,230 @@
+const {setStyles, optionOr, scrollParent} = require('../../modules/chui_functions');
+
+/**
+ * Прилипающая полоса: остаётся у верха области прокрутки, пока её содержимое не кончилось.
+ *
+ * Полоса задаётся `add()`:
+ *
+ * ```javascript
+ * const bar = new StickyBar({
+ *     onChange: (stuck) => Log.info('закреплена: ' + stuck)
+ * });
+ * bar.add(new Button({title: 'Раздел «А'}));
+ * content.appendChild(bar.set());
+ * ```
+ *
+ * Закрепление делает CSS (`position: sticky` у корня), поэтому полоса сохраняет место в потоке
+ * и не требует подпорки-заглушки. Компонент добавляет к этому состояние: пока полоса в своей
+ * позиции, у корня `data-stuck="false"`, после — `data-stuck="true"` и класс `sticky_bar_stuck`,
+ * о чём сообщает `onChange(stuck)`. Вид «в покое» и «закреплено» задаёт CSS — обычно материал и
+ * тень появляются только у закреплённой полосы, чтобы она не спорила с содержимым.
+ *
+ * **Отступ.** `offset` — на сколько ниже порога встаёт полоса. Число — пиксели, строка — любое
+ * CSS-значение (`'12px'`, `'1rem'`). Порог отсчитывается от **края содержимого** области прокрутки:
+ * её собственный `padding` браузер учитывает сам (в Chromium `sticky` стоит по content box),
+ * поэтому у страницы приложения (у `center` есть отступ под шапку) полосе хватает `offset: 0` —
+ * она встаёт ровно под шапкой. Отдельный отступ нужен, когда у контейнера прокрутки нет
+ * внутреннего отступа, а сверху что-то наложено.
+ *
+ * **Состояние считается замером, а не наблюдателем.** `IntersectionObserver` здесь не годится:
+ * липкий узел нельзя наблюдать относительно самого себя, а сторож, движущийся вместе с полосой,
+ * пересекает границу ровно в момент закрепления и даёт неустойчивый сигнал на дробных пикселях.
+ * Поэтому раз в кадр сравниваются верх полосы и верх области прокрутки; слушатель `scroll` —
+ * пассивный, работа сведена к одному замеру на кадр через `requestAnimationFrame`.
+ *
+ * Доступность: компонент ничего не объявляет и не перехватывает — содержимое остаётся обычным
+ * содержимым. `destroy()` снимает слушатели; повторный вызов безвреден.
+ */
+class StickyBar {
+    static #counter = 0;
+
+    #root = document.createElement("chui_sticky_bar");
+    #content = document.createElement("sticky_bar_content");
+    #id = undefined;
+    #offset = "0px";
+    #target = undefined;
+    #stuck = false;
+    #on_change = undefined;
+    #container = undefined;
+    #destroyed = false;
+    #frame = 0;
+    #pending = 0;
+
+    constructor(options = {
+        id: String(), offset: Number(), target: undefined, onChange: undefined
+    }) {
+        setStyles(__dirname + "/styles.css", "chUiJS_StickyBar");
+        StickyBar.#counter += 1;
+        this.#id = optionOr(options.id, `chui_sticky_bar_${StickyBar.#counter}`);
+        this.#root.id = this.#id;
+        // Начальное состояние видно в разметке: до порога полоса в своей позиции
+        this.#root.dataset.stuck = "false";
+        this.#root.appendChild(this.#content);
+        this.#target = options.target;
+        this.#on_change = options.onChange;
+        this.setOffset(options.offset === undefined ? 0 : options.offset);
+        this.#observe();
+    }
+
+    // GET
+    getId() {
+        return this.#id;
+    }
+
+    /** Отступ закрепления: как задан (число пикселей или CSS-значение) */
+    getOffset() {
+        return this.#offset;
+    }
+
+    /** Закреплена ли полоса сейчас */
+    isStuck() {
+        return this.#stuck;
+    }
+
+    /** Контейнер прокрутки: свой из `target`, иначе ближайший прокручиваемый предок */
+    getTarget() {
+        const target = this.#target;
+        if (target !== undefined && target !== null) {
+            if (typeof target === "string") return document.querySelector(target) ?? document.scrollingElement;
+            if (target instanceof Element) return target;
+            if (typeof target.set === "function") return target.set();
+        }
+        return scrollParent(this.#root);
+    }
+
+    /** Содержимое полосы (в него пишет `add()`) */
+    getContent() {
+        return this.#content;
+    }
+
+    // SET
+    setId(id = String()) {
+        this.#id = id;
+        this.#root.id = id;
+        return this;
+    }
+
+    /** Отступ закрепления: число пикселей или строка CSS (`"12px"`, `"var(--header_height)"`) */
+    setOffset(offset = Number()) {
+        this.#offset = typeof offset === "string" ? offset : `${Number(offset) || 0}px`;
+        this.#root.style.setProperty("--sticky_offset", this.#offset);
+        this.update();
+        return this;
+    }
+
+    setOnChange(listener = undefined) {
+        this.#on_change = listener;
+        return this;
+    }
+
+    /** Содержимое полосы: компоненты фреймворка или готовые узлы (содержимое заменяется) */
+    add(...components) {
+        this.#content.innerHTML = "";
+        for (const component of components) {
+            if (component === undefined || component === null) continue;
+            this.#content.appendChild(component instanceof Element ? component : component.set());
+        }
+        this.update();
+        return this;
+    }
+
+    clear() {
+        this.#content.innerHTML = "";
+        return this;
+    }
+
+    /** Пересобрать слушатели и замер — после смены содержимого, контейнера или раскладки */
+    update() {
+        this.#detach();
+        this.#observe();
+        return this;
+    }
+
+    /** Снять слушатели; повторный вызов безвреден */
+    destroy() {
+        this.#destroyed = true;
+        this.#detach();
+        return this;
+    }
+
+    // RENDER
+    set() {
+        return this.#root;
+    }
+
+    // === ВНУТРЕННЕЕ ===
+    /**
+     * Первое подключение — на следующем кадре: узел обычно вставляют в документ сразу после
+     * `set()`, и только тогда виден настоящий контейнер прокрутки. Повторные вызовы ничего не
+     * делают, пока подключение не снято.
+     */
+    #observe() {
+        if (this.#destroyed === true) return;
+        if (this.#container !== undefined || this.#pending !== 0) return;
+        this.#pending = requestAnimationFrame(() => {
+            this.#pending = 0;
+            this.#attach();
+        });
+    }
+
+    #attach() {
+        if (this.#destroyed === true) return;
+        this.#container = this.getTarget();
+        if (this.#container instanceof Element) {
+            this.#container.addEventListener("scroll", this.#onScroll, { passive: true });
+        }
+        window.addEventListener("resize", this.#onScroll);
+        this.#schedule();
+    }
+
+    #detach() {
+        if (this.#container instanceof Element) {
+            this.#container.removeEventListener("scroll", this.#onScroll);
+        }
+        window.removeEventListener("resize", this.#onScroll);
+        this.#container = undefined;
+        if (this.#pending !== 0) {
+            cancelAnimationFrame(this.#pending);
+            this.#pending = 0;
+        }
+        if (this.#frame !== 0) {
+            cancelAnimationFrame(this.#frame);
+            this.#frame = 0;
+        }
+    }
+
+    #onScroll = () => this.#schedule();
+
+    #schedule() {
+        if (this.#frame !== 0 || this.#destroyed === true) return;
+        this.#frame = requestAnimationFrame(() => {
+            this.#frame = 0;
+            this.#measure();
+        });
+    }
+
+    /**
+     * Закреплена ли полоса: её верх доехал до порога (край содержимого области прокрутки плюс
+     * отступ). Запас в 1px гасит дребезг на дробных пикселях (сглаживание при масштабе окна).
+     */
+    #measure() {
+        if (this.#destroyed === true) return;
+        const container = this.#container;
+        if (!(container instanceof Element) || this.#root.isConnected === false) return;
+        // Порог — от края содержимого контейнера: собственный отступ прокрутки браузер
+        // учитывает сам, а рамку — нет, поэтому она прибавляется отдельно
+        const container_style = window.getComputedStyle(container);
+        const padding = Number.parseFloat(container_style.paddingTop) || 0;
+        const reference_top = container.getBoundingClientRect().top + container.clientTop + padding;
+        const inset = Number.parseFloat(window.getComputedStyle(this.#root).top);
+        const offset = Number.isFinite(inset) ? inset : 0;
+        const stuck = this.#root.getBoundingClientRect().top <= reference_top + offset + 1;
+        if (stuck === this.#stuck) return;
+        this.#stuck = stuck;
+        this.#root.dataset.stuck = String(stuck);
+        this.#root.classList.toggle("sticky_bar_stuck", stuck);
+        if (typeof this.#on_change === "function") this.#on_change(stuck);
+    }
+}
+
+exports.StickyBar = StickyBar;

package/framework/components/chui_sticky_bar/styles.css

@@ -0,0 +1,37 @@
+/* Прилипающая полоса: корень сам липнет к верху области прокрутки, поэтому место в потоке
+   сохраняется и подпорка-заглушка не нужна. Отступ задаёт компонент переменной `--sticky_offset`
+   (число или CSS-значение); отсчитывается он от края содержимого области прокрутки. */
+chui_sticky_bar {
+    --sticky_offset: 0px;
+    display: block;
+    position: sticky;
+    inset-block-start: var(--sticky_offset);
+    width: -webkit-fill-available;
+    /* Ниже шапки (999) и выше содержимого страницы: полоса — слой над текстом, но под оболочкой */
+    z-index: 6;
+    box-sizing: border-box;
+}
+
+sticky_bar_content {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    width: -webkit-fill-available;
+    box-sizing: border-box;
+    /* Отступы есть всегда, а фон и рамка — только у закреплённой полосы: иначе при закреплении
+       содержимое прыгало бы. Прозрачная рамка держит ту же высоту, что и видимая */
+    padding: 8px 10px;
+    border: 1px solid transparent;
+    border-radius: var(--radius_md);
+    transition: background-color var(--transition_time) ease, box-shadow var(--transition_time) ease;
+}
+
+/* Закреплённая полоса читается отдельным слоем: материал как у шапки, волосяной край и тень.
+   В покое она — обычная строка содержимого, ни фона, ни тени */
+chui_sticky_bar[data-stuck="true"] sticky_bar_content {
+    border-color: var(--border_color);
+    background: var(--header_background);
+    backdrop-filter: var(--global_blur);
+    box-shadow: var(--box_shadow_main);
+}

package/framework/modules/chui_bridge/preload.js

@@ -1,5 +1,5 @@
 const {contextBridge, ipcRenderer} = require("electron");
-const {SERVICES_CHANNELS, SERVICES_CALLS, BRIDGE_CHANNELS, BRIDGE_ARGS} = require("../chui_services/chui_channels");
+const {SERVICES_CHANNELS, SERVICES_CALLS, SERVICES_SYNC_CALLS, BRIDGE_CHANNELS, BRIDGE_ARGS} = require("../chui_services/chui_channels");
 // Мост переиспользует ту же обёртку сервисов, что и страница: разница только в транспорте
 // (`Desktop` в preload'е сам вызовет ipcRenderer, потому что `window.chui` ему не виден)
 const {Desktop} = require("../chui_services/desktop");
@@ -16,8 +16,10 @@ const {Desktop} = require("../chui_services/desktop");
  * файл при `DOMContentLoaded`.
  *
  * Формы API:
- * - `window.chui.desktop.{clipboard, recent, progress, shortcuts}` — то же, что `Desktop` из
+ * - `window.chui.desktop.{app, clipboard, recent, progress, shortcuts}` — то же, что `Desktop` из
  *   `require('chuijs')`, поэтому код страницы переносится между режимами почти без правок;
+ *   `desktop.app.quit()`/`restart()` закрывают и перезапускают всё приложение, а не окно; ответ
+ *   у них значением, без промиса (синхронный канал);
  * - `window.chui.services` — плоская карта «метод → канал» (транспорт, который ищет `Desktop`);
  * - `window.chui.window` — минимизировать, развернуть, закрыть, состояние окна;
  * - `window.chui.theme` — текущая тема и подписка на её смену;
@@ -74,6 +76,12 @@ const services = {};
 for (const method of Object.keys(SERVICES_CALLS)) {
     services[method] = (...args) => call(method, ...args);
 }
+// Синхронные вызовы — отдельным циклом и через `sendSync`: на синхронный канал `invoke`
+// не отвечает, промис никогда бы не завершился. Конверт `{value}`/`{error}` разбирает
+// `Desktop.#callSync`, поэтому мост отдаёт ответ как есть — как и обычный канал
+for (const [method, channel] of Object.entries(SERVICES_SYNC_CALLS)) {
+    services[method] = (...args) => ipcRenderer.sendSync(channel, ...args);
+}
 // Событие глобальной клавиши: подписка возвращает функцию отписки
 services.onShortcut = (handler = () => {}) => {
     const listener = (_event, accelerator) => handler(accelerator);
@@ -127,6 +135,31 @@ contextBridge.exposeInMainWorld("chui", {
         shell: {
             openExternal: (url = String()) => Desktop.shell.openExternal(url)
         },
+        app: {
+            // Путь приходит значением, без промиса (синхронный канал), а `Desktop` в preload'е
+            // идёт в него сам: `window.chui` своей же странице здесь ещё не виден
+            path: (name = String()) => Desktop.app.path(name),
+            info: () => Desktop.app.info(),
+            // Сырые модули Electron странице не отдают. Методы есть для единообразия
+            // с `Desktop`, но со страницы бросают ошибку с подсказкой, что взять взамен
+            get: () => Desktop.app.get(),
+            getSession: () => Desktop.app.getSession(),
+            getWebContents: () => Desktop.app.getWebContents(),
+            // Закрытие и перезапуск — как у `Desktop` из пакета: те же шаги, что у пункта меню.
+            // Отвечают значением, а не промисом (синхронный канал), поэтому `await` не нужен
+            quit: () => Desktop.app.quit(),
+            restart: () => Desktop.app.restart()
+        },
+        dialog: {
+            open: (options = {}) => Desktop.dialog.open(options),
+            save: (options = {}) => Desktop.dialog.save(options),
+            message: (options = {}) => Desktop.dialog.message(options)
+        },
+        session: {
+            getCacheSize: () => Desktop.session.getCacheSize(),
+            clearCache: () => Desktop.session.clearCache(),
+            clearStorageData: (options = {}) => Desktop.session.clearStorageData(options)
+        },
         print: {
             page: (options = {}) => Desktop.print.page(options),
             html: (html = String(), options = {}) => Desktop.print.html(html, options),

package/framework/modules/chui_functions.js

@@ -4,11 +4,14 @@ function sleep(ms) {
     return new Promise(resolve => setTimeout(resolve, ms));
 }
 
+/** Кэш прочитанных таблиц стилей: один файл отдаётся разным `id` без повторного чтения с диска */
+const styles_cache = new Map();
+
 function setStyles(pathToCSS = String(), component = String()) {
     if (document.getElementById(component) != null) return;
-    let data = fs.readFileSync(pathToCSS, 'utf8');
+    if (styles_cache.has(pathToCSS) === false) styles_cache.set(pathToCSS, fs.readFileSync(pathToCSS, 'utf8'));
     let style = document.createElement('style');
-    style.innerHTML = String(data);
+    style.innerHTML = styles_cache.get(pathToCSS);
     style.type = 'text/css';
     style.setAttribute('id', component);
     document.head.appendChild(style);
@@ -101,14 +104,27 @@ function shouldOpenDropdownUp(dropdown = new HTMLElement(), anchor = new HTMLEle
     return dropdownPlacement(dropdown, anchor).up;
 }
 
+/**
+ * Разбор markdown в HTML — `markdown-it`.
+ *
+ * Рендер идёт с `html: false`: сырой HTML из разметки не пропускается, а показывается текстом,
+ * поэтому `<script>` или обработчик события в `markdownText` не исполняются. Таблицы и
+ * ~~зачёркивание~~ включены по умолчанию, авто-ссылок нет — адрес становится ссылкой только
+ * явным `[текст](адрес)`. Разборщик создаётся при первом вызове: markdown нужен не каждой
+ * странице, а `require` тянет библиотеку целиком.
+ */
+let markdown_parser = undefined;
 function markdownToHtml(text = String()) {
-    let showdown = require('showdown');
-    return new showdown.Converter().makeHtml(text);
+    if (text === undefined || text === null || String(text) === "") return "";
+    if (markdown_parser === undefined) markdown_parser = new (require('markdown-it'))({html: false, linkify: false, breaks: false});
+    return markdown_parser.render(String(text)).trim();
 }
 
+/** Обратный разбор: HTML → markdown (`turndown`) */
 function htmlToMarkdown(text = String()) {
-    let showdown = require('showdown');
-    return new showdown.Converter().makeMarkdown(text);
+    if (text === undefined || text === null || String(text) === "") return "";
+    const TurndownService = require('turndown');
+    return new TurndownService().turndown(String(text));
 }
 
 function getDate() {

package/framework/modules/chui_page/styles.css

@@ -9,29 +9,6 @@ page {
     align-items: baseline;
 }
 
-/* Заголовок страницы живёт в содержимом, а не капсулой в шапке: в полосе он уезжал
-   при прокрутке и при этом занимал место рядом с кнопками. Ставит его оболочка
-   (`Route#go`), текст и значок берёт из `Page#getTitle` / `Page#getIcon` */
-page_title {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    /* Без собственных отступов: text заголовка стоит по тому же вертикали, что и блоки
-       ниже, — иначе он выезжает на 2px вправо и левый край страницы ломается */
-    margin: 0 0 calc(10px * var(--density)) 0;
-    padding: 0;
-    font-size: var(--font_lead_size);
-    font-weight: 600;
-    color: var(--text_color);
-}
-
-page_title chui_icon {
-    color: var(--link_color);
-    /* Кегль значка — как у подписи: при 20px глиф перетягивал строку */
-    font-size: var(--font_lead_size);
-}
-
-/* Страница без заголовка не держит пустую строку */
-page_title:empty {
-    display: none;
-}
+/* Вид заголовка страницы держит шапка (`page_name` в global_style.css): оболочка
+   в содержимое ничего не подмешивает (`Route#go`), поэтому страница начинается
+   со своих блоков, а видимый заголовок рисует приложение само */