chuijs 4.0.0 → 4.0.1

package/CHANGELOG.md

@@ -0,0 +1,65 @@
+# Changelog
+
+Формат — [Keep a Changelog](https://keepachangelog.com/ru/1.1.0/),
+версии — [Semantic Versioning](https://semver.org/lang/ru/).
+
+## [4.0.1] - 2026-09-28
+
+### Добавлено
+
+- **`StickyBar`** — прилипающая полоса: компонент остаётся у верха области прокрутки, пока его
+  содержимое не кончилось. В покое не рисует фона и рамки, у закреплённой появляются материал,
+  волосяной край и тень; состояние отдаётся в `data-stuck` и `onChange(stuck)`.
+- Раздел `StickyBar` в витрине: карточка в каталоге группы «Компоновка и навигация» с показом
+  закрепления.
+- Страница **«История изменений»** на сайте документации: собирается из `CHANGELOG.md`, чтобы
+  журнал не расходился с копией в доке. Дорога к ней — из навигации и с бейджа версии на главной.
+- Тест `test/chui_app_paths.test.js`: белый список путей приложения не разойдётся с `App.*Path()`.
+
+### Изменено
+
+- **Рендер markdown переведён с `showdown` на `markdown-it`** (HTML), обратный разбор — на
+  `turndown`. `showdown` не обновлялся с 2022 года, исправленной версии у него нет, а аудит
+  показывал три неустранённые уязвимости (ReDoS и две XSS) именно в пути «markdown → innerHTML».
+  Новый разбор идёт с `html: false`: сырой HTML в `markdownText` теперь **показывается текстом,
+  а не исполняется** — это и закрывает XSS. Таблицы и `~~зачёркивание~~` работают как раньше,
+  авто-ссылок нет (адрес становится ссылкой только явным `[текст](адрес)`). Сайт документации
+  собирается тем же `markdown-it`; `npm audit` — 0 уязвимостей.
+- **`@electron/remote` убран полностью** — Electron не рекомендует отдавать странице модули
+  main-процесса. Кнопки окна ходят в main по каналам `WINDOW_ACTION` / `WINDOW_STATE` (обработчики
+  регистрируются и в обычном режиме, `enableServices`), а пути, диалоги и сессия доступны как
+  `Desktop.app.path()/info()`, `Desktop.dialog.*`, `Desktop.session.*` или свой канал из
+  `security.channels`; в безопасном окне то же отдаёт мост `window.chui`. `chooseFile` со страницы
+  идёт по IPC в своё окно, в main работает напрямую. **Ломающее:** `App.get()`, `App.getSession()`,
+  `App.getWebContents()` и `App.*Path()` теперь только для main-процесса — со страницы они бросают
+  ошибку с подсказкой. Убраны устаревшие `enableRemoteModule` из `webPreferences`.
+- **`Spinner`** переделан: вместо трёх вложенных колец — одно тонкое кольцо с приглушённой
+  дорожкой и гладкой дугой со скруглёнными концами. Цвет дуги задаётся `style.color`,
+  при `prefers-reduced-motion` вращение замедляется. Публичный API сохранён.
+- **Кнопки окна** (`AppLayout`): значки свернуть/развернуть/восстановить/закрыть нарисованы
+  линиями (SVG) вместо лигатур шрифта иконок — не зависят от Material Symbols.
+- **Шапка**: низ скруглён (логические радиусы), волосяная черта снизу сохранена.
+- **`UpdateNotification`**: под спиннером больше нет заливки плашки (`notification_icon_plain`) —
+  подложка читалась вторым фоном вокруг тонкого индикатора.
+- Витрина: липкая навигация по разделам переведена на `StickyBar`.
+- `DataGrid.exportToClipboard()`: резервный буфер обмена берётся через `Desktop`, а не напрямую
+  из `electron` — работает и в безопасном окне.
+- `chui_functions.setStyles()` кэширует прочитанные таблицы стилей: один файл отдаётся разным
+  `id` без повторного чтения с диска.
+- Документация: сайт пересобран, добавлены страницы `StickyBar` и «История изменений», в README —
+  раздел про разметку `markdownText`, её безопасный режим и группы моста `window.chui.desktop`.
+  Примеры в разделах о безопасности больше не упоминают `enableRemoteModule` — опции, которой в
+  `webPreferences` больше нет.
+
+### Пакет
+
+- Версия 4.0.1.
+- Удалена неиспользуемая зависимость `dataurl`: в коде не было ни одного `require`, ни реэкспорта.
+- Добавлены `repository`, `bugs`, `engines` и карта экспортов (`exports`) с сохранением глубоких
+  импортов вида `require('chuijs/framework/modules/chui_fonts')`.
+- Явно указан `"type": "commonjs"`.
+
+## [4.0.0]
+
+- Версия 4.0.0: реструктуризация модулей, локализация и RTL, десктоп-сервисы и безопасный режим
+  окон, статический сайт документации (`npm run docs:build`).

package/README.md

@@ -181,7 +181,9 @@ main.getWindows();                                    // [{name, window}, …]
 повторный `start()` подпишет их заново по одному разу.
 
 #### `App`
-Обёртка над `app` Electron.
+Обёртка над `app` Electron. **Только для main-процесса:** странице модули main не отдают
+(Electron не рекомендует `remote`), и её `App.get*` бросает ошибку с подсказкой. Со страницы
+берут `Desktop.app`, `Desktop.session`, `Desktop.dialog` или свой канал из `security.channels`.
 
 ```javascript
 const { App } = require('chuijs');
@@ -191,7 +193,8 @@ App.getWebContents();  // webContents
 ```
 
 #### `App.*Path()`
-Статические системные пути (все возвращают строку).
+Статические системные пути (все возвращают строку). **Только для main-процесса;** со страницы —
+`await Desktop.app.path('userData')` (там путь приходит по IPC и потому асинхронно).
 
 ```javascript
 const { App } = require('chuijs');
@@ -299,6 +302,13 @@ offTheme();
 await Desktop.print.page();                  // системный диалог печати текущего окна
 await Desktop.print.html('<h1>Отчёт</h1>');  // печать HTML из скрытого окна
 await Desktop.print.pdf(html, {path: '/tmp/отчёт.pdf'});   // PDF без диалога (или с ним, без path)
+await Desktop.app.path('userData');                       // каталог настроек приложения
+await Desktop.app.info();                                 // {name, version, locale, isPackaged}
+const {canceled, filePaths} = await Desktop.dialog.open({properties: ['openFile']});
+await Desktop.dialog.save({defaultPath: '/tmp/отчёт.pdf'});
+await Desktop.dialog.message({type: 'question', message: 'Продолжить?'});
+await Desktop.session.clearCache();                       // кеш своей сессии
+await Desktop.session.clearStorageData({storages: ['cookies']});
 ```
 
 Глобальная клавиша регистрируется в main один раз на комбинацию: сколько бы окон ни подписалось,
@@ -389,9 +399,9 @@ const preview = await main.createWindow({
 
 Что меняется в таком окне:
 
-- `nodeIntegration: false`, `contextIsolation: true`, `enableRemoteModule: false`,
-  `nodeIntegrationInSubFrames: false`, `webviewTag: false` — `require`, `process` и `module`
-  в странице недоступны, `@electron/remote` тоже;
+- `nodeIntegration: false`, `contextIsolation: true`, `nodeIntegrationInSubFrames: false`,
+  `webviewTag: false` — `require`, `process` и `module` в странице недоступны, модули
+  main-процесса (в том числе `@electron/remote`) тоже;
 - preload'ом становится мост фреймворка (`framework/modules/chui_bridge/preload.js`),
   а `render` — **скрипт документа**: мост подключает его как обычный `<script>` после
   `DOMContentLoaded`. Поэтому код вроде `require('chuijs')` в таком окне не работает —
@@ -409,6 +419,11 @@ window.chui.desktop.clipboard.readText();   // то же, что Desktop из re
 window.chui.desktop.recent.list();
 window.chui.desktop.progress.set(0.4);
 const off = window.chui.desktop.shortcuts.on('Mod+Shift+P', () => {});
+await window.chui.desktop.app.path('userData');            // путь приложения — по IPC, потому асинхронно
+await window.chui.desktop.app.info();                      // {name, version, locale, isPackaged}
+const res = await window.chui.desktop.dialog.open({properties: ['openFile']});
+await window.chui.desktop.dialog.message({type: 'question', message: 'Продолжить?'});
+await window.chui.desktop.session.clearCache();
 window.chui.theme.get();                    // 'light' | 'dark'
 window.chui.theme.onChange((theme) => {});
 window.chui.window.minimize(); window.chui.window.toggleMaximize(); window.chui.window.close();
@@ -435,7 +450,9 @@ const { BrowserWindow, ipcMain, ipcRenderer, shell, path, fs, os, request,
         transliterate, systemPreferences, chooseFile, store, downloadSession } = require('chuijs');
 ```
 
-`chooseFile` — это `dialog` из `@electron/remote/main`, `store` — готовый экземпляр `new Store()`.
+`chooseFile` — диалоги `showOpenDialog` / `showSaveDialog` / `showMessageBox`: со страницы они идут
+по IPC в окно, которое их вызвало (`Desktop.dialog`), а в main — напрямую `dialog` Electron.
+`store` — готовый экземпляр `new Store()`.
 
 #### Автоматическое обновление приложения
 Только AppImage и NSIS.
@@ -604,6 +621,12 @@ Desktop.locale.onChange((locale) => I18n.setLocale(locale));
 DOM-элемент, поэтому внутри `Page.add(...)`, `Card.add(...)`, `ContentBlock.add(...)` передаётся
 сам объект, а в `Form.components` / `SlideShow.SLIDE` / `FieldSet.components` — тоже объекты.
 
+**Разметка `markdownText`.** Компоненты с этой опцией (`Label`, `Tooltip`, `Badge`, `Alert`,
+`Notification`, `ToastQueue`, `Chat`, `Tour`, `MarkdownEditor`) рендерят её `markdown-it` в безопасном
+режиме: сырой HTML из разметки не исполняется, а показывается текстом — так закрыт XSS через
+`markdownText`. Таблицы и `~~зачёркивание~~` поддерживаются, авто-ссылок нет: адрес становится
+ссылкой только явным `[текст](адрес)`. Обратный разбор (`htmlToMarkdown`) делает `turndown`.
+
 Описание каждого компонента — отдельная страница статического сайта документации в [`docs/`](docs/):
 [`docs/index.html`](docs/index.html) — полный индекс по группам и алфавиту, а у каждой страницы сверху
 ссылка на группу и общий список. Сайт собирается генератором `node docs/build.js`

package/framework/appLayout/default/chui_app_layout.js

@@ -13,6 +13,7 @@ const {DownloadNotification} = require("../../components/chui_notification/notif
 const {Log} = require("../../../framework/modules/chui_logger/chui_logger");
 const {MenuKeyboard, makeKeyboardButton} = require('../../modules/chui_a11y/chui_a11y');
 const {LAYOUT_ROLE, LayoutRefs, registerLayout, requireLayoutNode} = require('../../modules/chui_layout/chui_layout');
+const {BRIDGE_CHANNELS} = require('../../modules/chui_services/chui_channels');
 const {OverlayScrollbars} = require('../../modules/chui_scrollbar/chui_scrollbar');
 const {MenuBar} = require('../../components/chui_menu_bar/menu_bar');
 const {Avatar} = require('../../components/chui_avatar/avatar');
@@ -157,6 +158,22 @@ function makeHeaderButtonBox(options = { title: undefined, icon: undefined, reve
     return button;
 }
 
+/**
+ * Значки кнопок окна нарисованы линиями, а не взяты из шрифта иконок: системные кнопки
+ * должны выглядеть одинаково, даже если Material Symbols недоступен (веб-сборка, безопасное
+ * окно, где шрифт фреймворка не подключён). «Свернуть»/«развернуть» — зеркальные шевроны,
+ * «восстановить» — контурный ромб, «закрыть» — крест. Все четыре значка вписаны в один
+ * квадрат 20×20 и центрированы геометрически (чернила симметричны относительно 10,10),
+ * поэтому в кнопке они стоят ровно и читаются одной тройкой. Толщина 1.3 и скругления
+ * подобраны под вид набора; цвет наследуется от кнопки через `currentColor`.
+ */
+const WINDOW_ICONS = {
+    minimize: '<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M4.5 7.5 L10 12.5 L15.5 7.5" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+    maximize: '<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M4.5 12.5 L10 7.5 L15.5 12.5" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+    restore: '<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M10 5 L15 10 L10 15 L5 10 Z" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+    close: '<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M5 5 L15 15 M15 5 L5 15" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>',
+};
+
 class WindowControls {
     // Управление кнопками
     #box = document.createElement("wc_box")
@@ -166,70 +183,73 @@ class WindowControls {
     // Подписка на нересайзящееся окно: set() вызывается и из конструктора Header, и из
     // addWC(), поэтому в set() слушатель ipcRenderer накапливался.
     #resizable_false_event = () => this.#maximize.remove();
-    // Прокси окна берём один раз: getCurrentWindow() — синхронный IPC, а состояние
-    // нужно и на resize. null — окно недоступно (безопасные окна живут без @electron/remote).
-    #current_window = false;
+    // Номер запроса состояния гасит ответы, пришедшие не в том порядке
+    #sync_request = 0;
     constructor() {
         // Скрипт окна может быть preload'ом и выполняться до документа: здесь документ уже настоящий,
         // поэтому `dir`/`lang` (и зеркалирование логических свойств CSS) встают гарантированно
         I18n.apply();
-        this.#setButton(this.#close, I18n.t("appLayout.window.close"), Icons.NAVIGATION.CLOSE);
-        // Линию «свернуть» берём знак `horizontal_rule`, а не `minimize`: у того линия стоит
-        // у нижнего края глифа (замер: центр чернил на 5.25px ниже центра кнопки), и кнопка
-        // читалась смещённой; `horizontal_rule` — ровная линия по центру
-        this.#setButton(this.#minimize, I18n.t("appLayout.window.minimize"), Icons.EDITOR.HORIZONTAL_RULE);
-        // Глиф «развернуть» — квадрат (crop_square): в наборе есть и `maximize`, но там это
-        // линия у верхнего края — визуально она неотличима от второй кнопки «свернуть»
-        this.#setButton(this.#maximize, I18n.t("appLayout.window.maximize"), Icons.IMAGE.CROP_SQUARE);
-        this.#close.addEventListener("click", () => {
-            const window_ = this.#getWindow();
-            if (window_ !== undefined) window_.close();
-        })
-        this.#minimize.addEventListener("click", () => {
-            const window_ = this.#getWindow();
-            if (window_ !== undefined) window_.minimize();
-        })
-        this.#maximize.addEventListener("click", () => {
-            const window_ = this.#getWindow();
-            if (window_ === undefined) return;
-            window_.isMaximized() ? window_.unmaximize() : window_.maximize();
-        })
+        this.#setButton(this.#close, I18n.t("appLayout.window.close"), "close");
+        // «Свернуть» — шеврон вниз: плоская широкая галочка читается лучше горизонтальной
+        // черты и не сливается с рамкой кнопки
+        this.#setButton(this.#minimize, I18n.t("appLayout.window.minimize"), "minimize");
+        // «Развернуть» — шеврон вверх, зеркало «свернуть»: пара читается как одна ось
+        this.#setButton(this.#maximize, I18n.t("appLayout.window.maximize"), "maximize");
+        this.#close.addEventListener("click", () => this.#windowAction("close"))
+        this.#minimize.addEventListener("click", () => this.#windowAction("minimize"))
+        // Разворот и восстановление — одно действие: решение принимает окно, а не кнопка
+        this.#maximize.addEventListener("click", () => this.#windowAction("toggle-maximize"))
         // Разворот приходит не только от нашей кнопки (двойной клик по полосе, меню окна),
         // поэтому состояние читаем по факту изменения размера окна
         window.addEventListener("resize", this.#sync_maximized_event)
         this.#syncMaximized()
         ipcRenderer.on("chui_resizable_false", this.#resizable_false_event)
     }
-    /** Кнопка окна — иконка шапки с именем для скринридера, фокусом и активацией с клавиатуры.
-     *  Кегль глифа задаёт CSS (см. global_style.css): у кнопок окна он меньше, чем у соседних
-     *  иконок шапки, поэтому опция размера здесь не передаётся */
+    /** Кнопка окна — значок с именем для скринридера, фокусом и активацией с клавиатуры.
+     *  Значок рисуется линиями (`WINDOW_ICONS`), размер задаёт CSS (см. global_style.css) */
     #setButton(button, label, icon) {
-        button.innerHTML = new Icon(icon).getHTML();
+        button.innerHTML = WINDOW_ICONS[icon];
         button.setAttribute("title", label);
         button.setAttribute("aria-label", label);
         makeKeyboardButton(button);
     }
-    #getWindow() {
-        if (this.#current_window === false) {
-            try {
-                this.#current_window = require("@electron/remote").getCurrentWindow();
-            } catch (_error) {
-                this.#current_window = null;
-            }
+    /**
+     * Действия кнопок окна идут по IPC в main (`WINDOW_ACTION`/`WINDOW_STATE`). Прежде здесь
+     * стоял `@electron/remote`, но он устарел и тянул модули main-процесса прямо в страницу.
+     * Обработчики берут окно отправителя, поэтому канал не может задеть чужое окно; ошибка
+     * глушится — без `Main` (обработчики не зарегистрированы) нажатие не должно ломать страницу.
+     */
+    #windowAction(action = String()) {
+        try {
+            return Promise.resolve(ipcRenderer.invoke(BRIDGE_CHANNELS.WINDOW_ACTION, action)).catch(() => false);
+        } catch (_error) {
+            return Promise.resolve(false);
         }
-        return this.#current_window === null ? undefined : this.#current_window;
     }
-    // Развёрнутое окно — другой глиф и другая подпись: кнопка возвращает окно в оконный режим.
-    // Знак «восстановить» — те же два квадрата (`filter_none`); размер ему задаёт CSS
+
+    /** Состояние окна: `{isMaximized, isMinimized, …}`; без окна — пустой объект */
+    async #windowState() {
+        try {
+            return (await ipcRenderer.invoke(BRIDGE_CHANNELS.WINDOW_STATE)) ?? {};
+        } catch (_error) {
+            return {};
+        }
+    }
+    // Развёрнутое окно — другой значок и другая подпись: кнопка возвращает окно в оконный режим.
+    // «Восстановить» — контурный ромб; размер значкам задаёт CSS.
+    // Состояние приходит асинхронно, поэтому ответ устаревшего запроса отбрасывается по номеру:
+    // иначе быстрая пара «развернуть/восстановить» могла бы применить ответ в обратном порядке
     #syncMaximized() {
-        const window_ = this.#getWindow();
-        if (window_ === undefined) return;
-        const maximized = window_.isMaximized();
-        const label = maximized ? I18n.t("appLayout.window.restore") : I18n.t("appLayout.window.maximize");
-        this.#maximize.classList.toggle("wc_maximized", maximized);
-        this.#maximize.innerHTML = new Icon(maximized ? Icons.IMAGE.FILTER_NONE : Icons.IMAGE.CROP_SQUARE).getHTML();
-        this.#maximize.setAttribute("title", label);
-        this.#maximize.setAttribute("aria-label", label);
+        const request = ++this.#sync_request;
+        this.#windowState().then((state) => {
+            if (request !== this.#sync_request) return;
+            const maximized = state.isMaximized === true;
+            const label = maximized ? I18n.t("appLayout.window.restore") : I18n.t("appLayout.window.maximize");
+            this.#maximize.classList.toggle("wc_maximized", maximized);
+            this.#maximize.innerHTML = WINDOW_ICONS[maximized ? "restore" : "maximize"];
+            this.#maximize.setAttribute("title", label);
+            this.#maximize.setAttribute("aria-label", label);
+        });
     }
     #sync_maximized_event = () => this.#syncMaximized();
     set(pos_bool = Boolean()) {

package/framework/appLayout/default/global_style.css

@@ -454,15 +454,17 @@ header {
     display: flex;
     z-index: 999;
     flex-direction: column;
-    /* Шапка — плоская полоса во всю ширину с волосяной чертой снизу: содержимое уходит
-       под неё (материал полупрозрачный, с блюром). Углы прямые: скруглённые углы у полосы
-       во всю ширину окна не читались — вверху их срезал бы композитор, а внизу они
-       оставляли зазор. */
+    /* Шапка — плоская полоса во всю ширину: содержимое уходит под неё (материал
+       полупрозрачный, с блюром), низ скруглён и подчёркнут волосяной чертой. Радиус задан
+       логическими свойствами, поэтому в RTL скругление зеркалится; верхние углы прямые —
+       их срезал бы композитор. */
     align-items: start;
     background-color: var(--header_background);
     backdrop-filter: var(--global_blur);
     justify-content: space-between;
     border-bottom: 1px solid var(--border_color);
+    border-end-start-radius: var(--radius_md);
+    border-end-end-radius: var(--radius_md);
 }
 
 /* Прокрутка содержимого: материал плотнее и появляется тень — полоса читается
@@ -1253,25 +1255,21 @@ wc_close, wc_maximize, wc_minimize {
     transition: background-color var(--transition_time) ease, color var(--transition_time) ease;
 }
 
-/* Кегль глифов меньше соседних иконок шапки (--header_icon_size = 13pt): три системные
-   кнопки не должны перетягивать на себя внимание. Замер чернил при 14px: квадрат
-   9.6×9.6, линия 9.6×1.3, крест 7.9×7.9 — у креста знак мельче, так он нарисован
-   в наборе. chui_icon задаёт собственный color, поэтому цвет кнопки до глифа не доходит —
-   правила состояний ниже тоже про иконку. */
-wc_close chui_icon,
-wc_maximize chui_icon,
-wc_minimize chui_icon {
-    font-size: 14px;
+/* Значки кнопок окна нарисованы линиями (SVG), а не взяты из шрифта иконок: три системные
+   кнопки должны выглядеть одинаково и тогда, когда Material Symbols недоступен (веб-сборка,
+   безопасное окно без шрифта фреймворка). Все четыре значка вписаны в один квадрат 20×20 и
+   центрированы геометрически, поэтому при общем размере 16 пикселей стоят ровно и читаются
+   одной тройкой. Цвет приходит от кнопки через `currentColor`, поэтому состояния ниже красят
+   сам `svg`. */
+wc_close svg,
+wc_maximize svg,
+wc_minimize svg {
+    display: block;
+    width: 16px;
+    height: 16px;
     color: var(--text_color_disabled);
 }
 
-/* «Восстановить» — два квадрата вместо одного: знак плотнее и при общем кегле выходил
-   крупнее одиночного квадрата (чернила 15×15 против 11×11). Меньший кегль выравнивает
-   боксы: 9.5×9.5 у «восстановить» против 9.6×9.6 у «развернуть» */
-wc_maximize.wc_maximized chui_icon {
-    font-size: 10px;
-}
-
 wc_maximize:hover, wc_minimize:hover {
     background: var(--element_background_hover);
 }
@@ -1280,13 +1278,13 @@ wc_maximize:active, wc_minimize:active {
     background: var(--element_background_prime); color: var(--text_color_hover);
 }
 
-wc_maximize:hover chui_icon,
-wc_maximize:active chui_icon,
-wc_minimize:hover chui_icon,
-wc_minimize:active chui_icon,
-wc_close:focus-visible chui_icon,
-wc_maximize:focus-visible chui_icon,
-wc_minimize:focus-visible chui_icon {
+wc_maximize:hover svg,
+wc_maximize:active svg,
+wc_minimize:hover svg,
+wc_minimize:active svg,
+wc_close:focus-visible svg,
+wc_maximize:focus-visible svg,
+wc_minimize:focus-visible svg {
     color: var(--text_color);
 }
 
@@ -1297,8 +1295,8 @@ wc_close:active {
     background: var(--red_prime_background);
 }
 
-wc_close:hover chui_icon,
-wc_close:active chui_icon {
+wc_close:hover svg,
+wc_close:active svg {
     color: var(--text_color);
 }
 

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;