chuijs 4.0.3 → 4.0.4

package/framework/modules/chui_animations/motion.js

@@ -0,0 +1,120 @@
+/**
+ * Общий ритм для тех, кто считает кадры сам: построение диаграмм, догоняющее значение,
+ * счётчики. Время и кривую берём из темы — те же токены, что у переходов и кадров CSS,
+ * поэтому движение на канвасе и в стилях читается одним ритмом, а не двумя.
+ *
+ * ```javascript
+ * const { animate } = require("../../modules/chui_animations/motion");
+ * animate((growth) => this.#draw(growth));   // рисуем полотно по мере роста
+ * ```
+ */
+
+/** Уменьшенное движение: движение не запускаем, результат ставим сразу */
+function reducedMotion() {
+    return (
+        typeof window !== "undefined" &&
+        typeof window.matchMedia === "function" &&
+        window.matchMedia("(prefers-reduced-motion: reduce)").matches
+    );
+}
+
+/**
+ * Время токена движения в миллисекундах: `--motion_base` → 250. Своё число здесь не годится —
+ * время живёт в теме, и его правка должна менять всё движение сразу.
+ */
+function tokenTime(name = "--motion_base") {
+    const source =
+        typeof window !== "undefined" && typeof window.getComputedStyle === "function"
+            ? window.getComputedStyle(document.documentElement).getPropertyValue(name)
+            : "";
+    const seconds = Number.parseFloat(source);
+    return Number.isFinite(seconds) && seconds > 0 ? seconds * 1000 : 250;
+}
+
+/** Торможение к покою — приближение кривой `--motion_ease`: движение заканчивается мягко */
+function easeOut(t) {
+    return 1 - Math.pow(1 - t, 3);
+}
+
+/**
+ * Кадры движения: `step(0…1)` вызывается на каждом кадре до конца времени, затем один раз
+ * с единицей — так последний кадр всегда полный. Возвращает остановку: её зовут, когда
+ * началось новое движение по тому же значению (иначе два кадра спорили бы за результат).
+ * При уменьшенном движении и там, где кадров нет (jsdom без `pretendToBeVisual`), шаг
+ * выполняется сразу с единицей.
+ */
+function animate(step, options = {}) {
+    const duration = options.duration === undefined ? tokenTime() : options.duration;
+    if (typeof requestAnimationFrame !== "function" || reducedMotion() || !(duration > 0)) {
+        step(1);
+        return () => {};
+    }
+    const now = () => (typeof performance === "undefined" ? Date.now() : performance.now());
+    const start = now();
+    let stopped = false;
+    const frame = (time) => {
+        if (stopped) return;
+        const t = Math.min(1, (time - start) / duration);
+        step(options.linear === true ? t : easeOut(t));
+        if (t < 1) requestAnimationFrame(frame);
+    };
+    requestAnimationFrame(frame);
+    return () => {
+        stopped = true;
+    };
+}
+
+/** Ждём, пока запрос сменит значение: событие приходит асинхронно, кадров на это не хватает */
+function waitForFlip(media, before) {
+    if (media.matches !== before) return Promise.resolve();
+    return new Promise((resolve) => {
+        const done = () => {
+            if (media.matches === before) return;
+            media.removeEventListener("change", done);
+            resolve();
+        };
+        media.addEventListener("change", done);
+        // Страховка: если смена не дошла, работа всё равно завершается, а не висит
+        setTimeout(() => {
+            media.removeEventListener("change", done);
+            resolve();
+        }, 1000);
+    });
+}
+
+/**
+ * Работа с общим кроссфейдом: браузер снимает страницу до и после неё и переводит один кадр
+ * в другой. Нужен там, где мгновенное переносит не CSS-переход, а перерисовка, — смена темы:
+ * она приходит сменой `prefers-color-scheme`, и переходы на такое изменение браузер не
+ * запускает (проверено замером: цвет подложки меняется кадром, хотя класс с временем перехода
+ * на корне уже стоит).
+ *
+ * `waitFor` — имя запроса, значение которого должно смениться внутри работы до снимка
+ * «после»: без ожидания снимок может быть взят до перекраски, и кроссфейд пойдёт из старой
+ * схемы в старую. Возвращает то же, что вернула работа.
+ */
+async function crossFade(work, options = {}) {
+    if (reducedMotion() || typeof document === "undefined" || typeof document.startViewTransition !== "function") {
+        return work();
+    }
+    const media = options.waitFor === undefined ? undefined : window.matchMedia(options.waitFor);
+    const before = media === undefined ? undefined : media.matches;
+    let value;
+    const transition = document.startViewTransition(async () => {
+        value = await work();
+        // Ждём саму смену запроса: без этого снимок «после» может быть взят до перекраски,
+        // и кроссфейд пойдёт из старой схемы в старую. Кадров здесь нет намеренно:
+        // на время обработчика браузер останавливает отрисовку, и `requestAnimationFrame`
+        // не срабатывает вовсе (проверено — обработчик из-за этого зависал) —
+        // снимок новый браузер делает сам, когда обработчик завершится
+        if (media !== undefined) await waitForFlip(media, before);
+    });
+    await transition.updateCallbackDone;
+    return value;
+}
+
+exports.reducedMotion = reducedMotion;
+exports.tokenTime = tokenTime;
+exports.easeOut = easeOut;
+exports.animate = animate;
+exports.crossFade = crossFade;

package/framework/modules/chui_animations/styles.css

@@ -1,3 +1,36 @@
+/*
+ * Виды движения. Имя кадра даёт JS (`Animation`), а длительность и кривая живут здесь:
+ * так у одного вида одно время на всё приложение, а не у каждого вызова своё.
+ * Вход базовый (0.25s) с торможением к покою, выход короче (0.15s) — уход не задерживает
+ * следующий экран, отклик чуть перелетает (пружина) — так читаются всплывающие меню и диалог.
+ * Значения — из темы (`--motion_*` в global_style.css).
+ */
+[data-motion="enter"] {
+    animation-duration: var(--motion_base);
+    animation-timing-function: var(--motion_ease);
+    animation-fill-mode: both;
+}
+
+[data-motion="exit"] {
+    animation-duration: var(--motion_fast);
+    animation-timing-function: var(--motion_ease);
+    animation-fill-mode: both;
+}
+
+[data-motion="pop"] {
+    animation-duration: var(--motion_base);
+    animation-timing-function: var(--motion_spring);
+    animation-fill-mode: both;
+}
+
+/* Кадром владеет слой, а не переход: после выходного вида заполненный `transform` остаётся
+   на месте, а следующий кадр его не объявляет — переход вернул бы слой на место отдельным
+   движением, поверх проигрываемого. Поэтому у слоя выключен только `transform`, остальные
+   свойства живут по общему правилу `* { transition }` */
+[data-motion] {
+    transition-property: background-color, color, border-color, box-shadow, filter, opacity;
+}
+
 /* FADE */
 @keyframes fade-in {
     from {
@@ -16,11 +49,11 @@
         opacity: 0;
     }
 }
-/* SCALE */
+/* SCALE. Масштаб появления небольшой (0.92 вместо прежних 0.63): крупный «наезд» камеры выделял сам эффект, а не появление слоя */
 @keyframes scale-in {
     from {
         opacity: 0;
-        transform: scale(0.63);
+        transform: scale(0.92);
     }
     to {
         opacity: 1;
@@ -34,7 +67,7 @@
     }
     to {
         opacity: 0;
-        transform: scale(0.63);
+        transform: scale(0.96);
     }
 }
 /* SLIDE */

package/framework/modules/chui_functions.js

@@ -5,33 +5,36 @@ function sleep(ms) {
 }
 
 /** Кэш прочитанных таблиц стилей: один файл отдаётся разным `id` без повторного чтения с диска */
-const styles_cache = new Map();
+const stylesCache = new Map();
 
 function setStyles(pathToCSS = String(), component = String()) {
-    if (document.getElementById(component) != null) return;
-    if (styles_cache.has(pathToCSS) === false) styles_cache.set(pathToCSS, fs.readFileSync(pathToCSS, "utf8"));
-    let style = document.createElement("style");
-    style.innerHTML = styles_cache.get(pathToCSS);
+    if (document.getElementById(component) !== null) return;
+    if (stylesCache.has(pathToCSS) === false) stylesCache.set(pathToCSS, fs.readFileSync(pathToCSS, "utf8"));
+    const style = document.createElement("style");
+    // Содержимое `<style>` — CSS, а не разметка: `textContent` не разбирает его как HTML,
+    // поэтому символы `<` в CSS не могут порвать таблицу (в jsdom `innerHTML` тоже работает,
+    // но `textContent` — это ровно то, чем является тело `<style>`)
+    style.textContent = stylesCache.get(pathToCSS);
     style.type = "text/css";
     style.setAttribute("id", component);
     document.head.appendChild(style);
 }
 
-function style_parse(json, component) {
+function parseStyle(json, component) {
     // Сначала проверяем, что стиль уже есть: сборка строки стоит дорого (для шрифтов — мегабайты)
-    if (document.getElementById(component) != null) return;
-    let stringz = JSON.parse(JSON.stringify(json));
-    let style_string = [];
-    for (let i = 0; i < stringz.length; i++) {
-        style_string.push(`${stringz[i].name} {`);
-        JSON.parse(JSON.stringify(stringz[i].style), function (key, value) {
-            if (typeof value !== "object") style_string.push(`${key}:${value};`);
+    if (document.getElementById(component) !== null) return;
+    const styleGroups = JSON.parse(JSON.stringify(json));
+    const styleParts = [];
+    for (let i = 0; i < styleGroups.length; i++) {
+        styleParts.push(`${styleGroups[i].name} {`);
+        JSON.parse(JSON.stringify(styleGroups[i].style), function (key, value) {
+            if (typeof value !== "object") styleParts.push(`${key}:${value};`);
             return value;
         });
-        style_string.push(`}\n`);
+        styleParts.push(`}\n`);
     }
-    let style = document.createElement("style");
-    style.innerText = style_string.join("").slice(0, -1);
+    const style = document.createElement("style");
+    style.textContent = styleParts.join("").slice(0, -1);
     style.type = "text/css";
     style.setAttribute("id", component);
     document.head.appendChild(style);
@@ -114,12 +117,12 @@ function shouldOpenDropdownUp(dropdown = new HTMLElement(), anchor = new HTMLEle
  * явным `[текст](адрес)`. Разборщик создаётся при первом вызове: markdown нужен не каждой
  * странице, а `require` тянет библиотеку целиком.
  */
-let markdown_parser = undefined;
+let markdownParser = undefined;
 function markdownToHtml(text = String()) {
     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();
+    if (markdownParser === undefined)
+        markdownParser = new (require("markdown-it"))({ html: false, linkify: false, breaks: false });
+    return markdownParser.render(String(text)).trim();
 }
 
 /** Обратный разбор: HTML → markdown (`turndown`) */
@@ -130,12 +133,12 @@ function htmlToMarkdown(text = String()) {
 }
 
 function getDate() {
-    let date = new Date();
-    let day = ("0" + Number(date.getDate()).toString()).slice(-2);
-    let month = ("0" + Number(date.getMonth() + 1).toString()).slice(-2);
-    let year = date.getFullYear();
-    let hours = ("0" + Number(date.getHours()).toString()).slice(-2);
-    let minutes = ("0" + Number(date.getMinutes()).toString()).slice(-2);
+    const date = new Date();
+    const day = ("0" + Number(date.getDate()).toString()).slice(-2);
+    const month = ("0" + Number(date.getMonth() + 1).toString()).slice(-2);
+    const year = date.getFullYear();
+    const hours = ("0" + Number(date.getHours()).toString()).slice(-2);
+    const minutes = ("0" + Number(date.getMinutes()).toString()).slice(-2);
     return `${day}.${month}.${year} ${hours}:${minutes}`;
 }
 
@@ -210,7 +213,8 @@ exports.getDate = getDate;
 exports.getTime = getTime;
 exports.getDayKey = getDayKey;
 exports.sleep = sleep;
-exports.style_parse = style_parse;
+// Ключ остаётся прежним: имя читает `chui_fonts.js` и чужой код, а функция внутри — своя
+exports.style_parse = parseStyle;
 exports.render = render;
 exports.markdownToHtml = markdownToHtml;
 exports.htmlToMarkdown = htmlToMarkdown;

package/framework/modules/chui_highlight/styles.css

@@ -1,37 +1,40 @@
-/* Токены подсветки кода (модуль chui_highlight): цвета подобраны контрастными и в светлой,
-   и в тёмной теме. Подключается самим модулем, поэтому подсветка работает у любого потребителя. */
+/* Токены подсветки кода (модуль chui_highlight). Цвета живут в общей палитре
+   (`--code_token_*` в `main_theme_style.css`) и у каждой схемы свои: акценты палитры,
+   приглушённые к заливке кода до нормы 4.5 — прежде здесь стояли цвета только тёмной
+   колонки, и в светлой схеме примеры читались тускло. Подключается самим модулем,
+   поэтому подсветка работает у любого потребителя. */
 .code_token_comment {
-    color: var(--text_color_disabled);
+    color: var(--code_token_comment);
     font-style: italic;
 }
 
 .code_token_string {
-    color: #30d158;
+    color: var(--code_token_string);
 }
 
 .code_token_number {
-    color: #ff9f0a;
+    color: var(--code_token_number);
 }
 
 .code_token_keyword {
-    color: #bf5af2;
+    color: var(--code_token_keyword);
 }
 
 .code_token_function {
-    color: #0a84ff;
+    color: var(--code_token_function);
 }
 
 .code_token_property,
 .code_token_key {
-    color: #64d2ff;
+    color: var(--code_token_property);
 }
 
 .code_token_selector {
-    color: #ffd60a;
+    color: var(--code_token_selector);
 }
 
 .code_token_color {
-    color: #ff9f0a;
+    color: var(--code_token_color);
 }
 
 .code_token_operator {

package/framework/modules/chui_i18n/chui_i18n.js

@@ -90,7 +90,7 @@ class I18n {
     /** Сменить направление вручную: `"ltr"` или `"rtl"` */
     static setDirection(direction = String(), silent = false) {
         const next = direction === "rtl" ? "rtl" : "ltr";
-        const changed = next !== this.#direction || this.#locale !== this.#applied_locale;
+        const changed = next !== this.#direction || this.#locale !== this.#appliedLocale;
         this.#direction = next;
         this.#apply();
         if (!silent && changed) this.#emit();
@@ -161,7 +161,7 @@ class I18n {
     }
 
     // Язык, для которого уже проставлены атрибуты документа (чтобы не дёргать DOM зря)
-    static #applied_locale = undefined;
+    static #appliedLocale = undefined;
 
     static #lookup(key) {
         const current = this.#dictionaries[this.#locale];
@@ -176,7 +176,7 @@ class I18n {
         if (typeof document === "undefined" || document.documentElement === null) return;
         document.documentElement.setAttribute("dir", this.#direction);
         document.documentElement.setAttribute("lang", this.#locale);
-        this.#applied_locale = this.#locale;
+        this.#appliedLocale = this.#locale;
     }
 
     static #emit() {

package/framework/modules/chui_i18n/locales/feedback.js

@@ -27,6 +27,37 @@ module.exports = {
         "feedback.chatRead": "Прочитано",
         "feedback.chatFailed": "Не отправлено",
 
+        "feedback.writeBar": "Панель ввода",
+        "feedback.writeBarField": "Текст сообщения",
+        "feedback.writeBarPlaceholder": "Напишите сообщение…",
+        "feedback.writeBarSend": "Отправить",
+        "feedback.writeBarButton": "Действие панели ввода",
+        "feedback.writeBarBadge": "выбрано: {value}",
+        "feedback.writeBarHint": "Enter — отправить, Shift+Enter — новая строка",
+        "feedback.messageBar": "Сообщения",
+        "feedback.messageBarEmpty": "Сообщений пока нет",
+        "feedback.messageBarNew": "Новые сообщения",
+        "feedback.messageBarNewCount": "Новые сообщения: {value}",
+        "feedback.messageBarDown": "К низу",
+        "feedback.userBar": "Пользователь",
+        "feedback.userBarBack": "Назад",
+        "feedback.userBarMore": "Ещё",
+        "feedback.userBarAction": "Действие",
+        "feedback.userBarBadge": "{value}",
+        "feedback.userBarOpen": "Открыть профиль: {name}",
+        "feedback.userListBar": "Разговоры",
+        "feedback.userListBarSearch": "Поиск разговоров",
+        "feedback.userListBarEmpty": "Разговоров нет",
+        "feedback.userListBarNoMatch": "Ничего не найдено",
+        "feedback.userListBarUnread": "непрочитанных: {value}",
+        "feedback.actionsBar": "Действия",
+        "feedback.actionsBarButton": "Действие",
+        "feedback.actionsBarBadge": "{value}",
+        "feedback.banner": "Объявление",
+        "feedback.cardScroll": "Карточки",
+        "feedback.cardScrollPrev": "Назад",
+        "feedback.cardScrollNext": "Вперёд",
+
         "feedback.centerTitle": "Уведомления",
         "feedback.centerEmpty": "Уведомлений нет",
         "feedback.centerNew": "Новое уведомление: {title}",
@@ -89,6 +120,37 @@ module.exports = {
         "feedback.chatRead": "Read",
         "feedback.chatFailed": "Not sent",
 
+        "feedback.writeBar": "Write bar",
+        "feedback.writeBarField": "Message text",
+        "feedback.writeBarPlaceholder": "Write a message…",
+        "feedback.writeBarSend": "Send",
+        "feedback.writeBarButton": "Write bar action",
+        "feedback.writeBarBadge": "selected: {value}",
+        "feedback.writeBarHint": "Enter to send, Shift+Enter for a new line",
+        "feedback.messageBar": "Messages",
+        "feedback.messageBarEmpty": "No messages yet",
+        "feedback.messageBarNew": "New messages",
+        "feedback.messageBarNewCount": "New messages: {value}",
+        "feedback.messageBarDown": "Go to bottom",
+        "feedback.userBar": "User",
+        "feedback.userBarBack": "Back",
+        "feedback.userBarMore": "More",
+        "feedback.userBarAction": "Action",
+        "feedback.userBarBadge": "{value}",
+        "feedback.userBarOpen": "Open profile: {name}",
+        "feedback.userListBar": "Conversations",
+        "feedback.userListBarSearch": "Search conversations",
+        "feedback.userListBarEmpty": "No conversations",
+        "feedback.userListBarNoMatch": "Nothing found",
+        "feedback.userListBarUnread": "unread: {value}",
+        "feedback.actionsBar": "Actions",
+        "feedback.actionsBarButton": "Action",
+        "feedback.actionsBarBadge": "{value}",
+        "feedback.banner": "Announcement",
+        "feedback.cardScroll": "Cards",
+        "feedback.cardScrollPrev": "Previous",
+        "feedback.cardScrollNext": "Next",
+
         "feedback.centerTitle": "Notifications",
         "feedback.centerEmpty": "No notifications",
         "feedback.centerNew": "New notification: {title}",

package/framework/modules/chui_i18n/locales/navigation.js

@@ -25,6 +25,8 @@ module.exports = {
         "navigation.stepper": "Шаги",
         "navigation.stepOf": "Шаг {index} из {total}",
         "navigation.stepDone": "выполнено",
+        "navigation.stepError": "ошибка",
+        "navigation.stepPending": "ожидает выполнения",
         "navigation.stepCurrent": "текущий шаг",
         "navigation.stepTodo": "не начат",
 
@@ -64,6 +66,8 @@ module.exports = {
         "navigation.stepper": "Steps",
         "navigation.stepOf": "Step {index} of {total}",
         "navigation.stepDone": "done",
+        "navigation.stepError": "error",
+        "navigation.stepPending": "in progress",
         "navigation.stepCurrent": "current step",
         "navigation.stepTodo": "not started",
 

package/framework/modules/chui_json/chui_json.js

@@ -18,8 +18,8 @@ function placeOf(text = String(), offset = Number()) {
     const limit = Math.max(0, Math.min(Number(offset) || 0, value.length));
     const before = value.slice(0, limit);
     const line = before.split("\n").length;
-    const last_break = before.lastIndexOf("\n");
-    const column = limit - last_break;
+    const lastBreak = before.lastIndexOf("\n");
+    const column = limit - lastBreak;
     return { line: line, column: column, offset: limit };
 }
 

package/framework/modules/chui_logger/chui_logger.js

@@ -5,7 +5,7 @@ const fs = require("fs");
 class Logger {
     constructor() {}
     #generatedMessage(message, type = String()) {
-        let date = new Date().toLocaleString();
+        const date = new Date().toLocaleString();
         if (process && process.type === "renderer") {
             return `[${date}] [${type}] [render] > ${message}`;
         } else {
@@ -31,16 +31,16 @@ class Logger {
         }
     }
     #writeLog(text) {
-        let today = new Date().toLocaleDateString().replace("/", ".");
-        let log_dir_path = path.join(app.getPath("userData"), "logs");
-        let log_file_path = path.join(log_dir_path, `app_${today}.log`);
+        const today = new Date().toLocaleDateString().replace("/", ".");
+        const logDirPath = path.join(app.getPath("userData"), "logs");
+        const logFilePath = path.join(logDirPath, `app_${today}.log`);
 
-        if (!fs.existsSync(log_dir_path)) {
-            fs.mkdirSync(log_dir_path, { recursive: true });
-            fs.writeFileSync(log_file_path, "", "utf-8");
+        if (!fs.existsSync(logDirPath)) {
+            fs.mkdirSync(logDirPath, { recursive: true });
+            fs.writeFileSync(logFilePath, "", "utf-8");
         }
 
-        fs.writeFile(log_file_path, `${text}\n`, { flag: "a+" }, (err) => {
+        fs.writeFile(logFilePath, `${text}\n`, { flag: "a+" }, (err) => {
             if (err) console.error(err);
         });
     }
@@ -55,4 +55,19 @@ class Log {
     }
 }
 
+/**
+ * Ошибка сервиса не должна исчезать в `catch {}`: её отдают колбэку `onError` компонента, а без
+ * колбэка пишут в лог. Молчание обходилось дорого: панель истории буфера при сбое оставалась
+ * пустой без единого слова о причине, а переключатель темы показывал режим, который не
+ * применился.
+ */
+function reportError(error, onError = undefined) {
+    if (typeof onError === "function") {
+        onError(error);
+        return;
+    }
+    Log.error(error);
+}
+
 exports.Log = Log;
+exports.reportError = reportError;

package/framework/modules/chui_page/page.js

@@ -1,4 +1,4 @@
-let { Animation } = require("../chui_animations/animations");
+const { Animation } = require("../chui_animations/animations");
 const { Route } = require("../../appLayout/default/chui_app_layout");
 const { Button } = require("../../components/chui_button/button");
 const { Icon } = require("../../components/chui_icons/icons");
@@ -8,12 +8,12 @@ class Page {
     #title = undefined;
     #icon = undefined;
     #main = false;
-    #menu_bar = undefined;
+    #menuBar = undefined;
     constructor() {
         require("../chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Page");
     }
     setBackButton(options = { title: "", icon: undefined, reverse: false, page: undefined }) {
-        let back = new Button({
+        const back = new Button({
             title: options.title,
             icon: options.icon,
             reverse: options.reverse,
@@ -22,24 +22,24 @@ class Page {
         this.#page.appendChild(back.set());
     }
     setMenuBar(menubar) {
-        this.#menu_bar = menubar.set();
+        this.#menuBar = menubar.set();
     }
     getMenuBar() {
-        return this.#menu_bar;
+        return this.#menuBar;
     }
     addRouteEvent(self, event = () => {}) {
-        let event_name = "route_event_" + self.constructor.name;
-        document.addEventListener(event_name, event);
-        setTimeout(() => document.removeEventListener(event_name, event), 100);
+        const eventName = "route_event_" + self.constructor.name;
+        document.addEventListener(eventName, event);
+        setTimeout(() => document.removeEventListener(eventName, event), 100);
     }
     add(...components) {
-        for (let component of components) {
+        for (const component of components) {
             new Animation(component.set()).fadeIn();
             this.#page.appendChild(component.set());
         }
     }
     remove(...components) {
-        for (let component of components) {
+        for (const component of components) {
             new Animation(component.set()).fadeOutAndRemove();
         }
     }

package/framework/modules/chui_palette/palette.js

@@ -0,0 +1,61 @@
+/**
+ * Палитра приложения для кода: канва и готовые наборы цветов не могут взять CSS-переменную,
+ * поэтому им нужны сами значения. Цвет заводится один раз — в теме
+ * (`main_theme_style.css`, ключи `--<имя>_prime_background`), а здесь та же таблица
+ * повторена для JS: сверка палитры (`npm run palette:check`) и сторож ключей
+ * (`test/chui_tokens.test.js`) требуют, чтобы таблица совпадала с темой, — иначе цвет
+ * разошёлся бы между холстом и вёрсткой.
+ *
+ * Схему модуль выбирает сам (`prefers-color-scheme`): цвет графика обязан совпадать с тем,
+ * что нарисовано вокруг, поэтому в светлой схеме берётся светлая колонка таблицы.
+ *
+ * ```javascript
+ * paletteColor("blue");                    // «#007aff» в светлой схеме, «#0a84ff» в тёмной
+ * paletteColor("gray", { alpha: 0.25 });   // сетка графика: тот же серый акцент, но тише
+ * paletteColor("green", { scheme: "light" });
+ * ```
+ */
+const ACCENTS = {
+    red: { light: "#ff3b30", dark: "#ff453a" },
+    orange: { light: "#ff9500", dark: "#ff9f0a" },
+    yellow: { light: "#ffcc00", dark: "#ffd60a" },
+    green: { light: "#34c759", dark: "#30d158" },
+    mint: { light: "#00c7be", dark: "#63e6e2" },
+    teal: { light: "#30b0c7", dark: "#40c8e0" },
+    cyan: { light: "#32ade6", dark: "#64d2ff" },
+    blue: { light: "#007aff", dark: "#0a84ff" },
+    indigo: { light: "#5856d6", dark: "#5e5ce6" },
+    purple: { light: "#af52de", dark: "#bf5af2" },
+    pink: { light: "#ff2d55", dark: "#ff375f" },
+    brown: { light: "#a2845e", dark: "#ac8e68" },
+    gray: { light: "#8e8e93", dark: "#98989d" },
+};
+
+/** Имена таблицы акцентов — в том же порядке, что в теме */
+function paletteNames() {
+    return Object.keys(ACCENTS);
+}
+
+/** Схема окна: у канвы нет своей, она обязана совпадать с вёрсткой вокруг */
+function paletteScheme() {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return "light";
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+/**
+ * Цвет акцента палитры: `alpha` (0…1) даёт полупрозрачную запись того же цвета —
+ * так рисуется сетка графика и дорожка шкалы.
+ */
+function paletteColor(name = "blue", options = {}) {
+    const { alpha = 1, scheme = paletteScheme() } = options;
+    const accent = ACCENTS[name];
+    if (accent === undefined) throw new Error("нет такого цвета в палитре: " + name);
+    const hex = accent[scheme] ?? accent.light;
+    if (alpha >= 1) return hex;
+    const [r, g, b] = [1, 3, 5].map((offset) => parseInt(hex.slice(offset, offset + 2), 16));
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+exports.paletteNames = paletteNames;
+exports.paletteScheme = paletteScheme;
+exports.paletteColor = paletteColor;