poe-svelte-ui-lib 1.40.0 → 1.40.1

package/README.md

@@ -15,13 +15,19 @@ npm install poe-svelte-ui-lib
 
 ### Подключение стилей и темы
 
-Пакет не поставляет готовый CSS-файл — цветовые токены (`--back-color`, `--accent-color`, `--red-color` и т.д.) и типографика ожидаются от проекта-потребителя. Возьмите `src/app.css` этого репозитория как стартовый шаблон и скопируйте в свой проект (палитру можно переопределить своими значениями — имена переменных и структура классов `bg-*`/`border-*` должны остаться прежними, чтобы компоненты стилизовались корректно). В `app.css` потребителя также нужно указать Tailwind, откуда сканировать классы из собранного пакета:
+Тема поставляется пакетом — `poe-svelte-ui-lib/theme.css`: цветовые токены светлой и тёмной темы (`--back-color`, `--accent-color`, `--red-color`…), типографика тегов в `@layer base`, компактный Markdown (`.markdown-content` — обёртка для `{@html}` с результатом `RenderMarkdown`) и роли заливки `bg-*`/`border-*`. Эталон темы — DevCloud; витрина подключает тот же файл, поэтому компоненты в ней выглядят ровно как в облаке. В `app.css` потребителя:
 
 ```css
 @import "tailwindcss";
+@import "poe-svelte-ui-lib/theme.css";
 @source "../node_modules/poe-svelte-ui-lib/dist";
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* дальше — только собственные отличия приложения, например :root { min-width: 640px; } */
 ```
 
+Текст в Markdown, таблицы и код переносятся по ширине контейнера — горизонтальной прокрутки быть не должно, только вертикальная. Markdown рендерится с `breaks: true` (как в облаке), поэтому абзац и пункт списка пишутся одной строкой — ручной перенос внутри абзаца превращается в разрыв строки.
+
 **Глобальные стили тегов — только в `@layer base`.** Компоненты задают размеры текста и отступы Tailwind-утилитами (например `text-[12px]` у подписи `<h5>`). Правило вне слоя (`h5 { font-size: 1rem }`, `label { … }`, `p { … }`) сильнее любой утилиты, и в приложении подписи станут крупнее задуманного и перестанут помещаться. Поэтому типографику тегов оборачивайте:
 
 ```css
@@ -85,15 +91,11 @@ npm run Formatting  # prettier --write .
 
 ### Публикация в npm
 
-Коммит в `main` с `[publish]` в сообщении (`"X.Y.Z [deploy] [publish]"`, версия поднята в `package.json`) запускает
-`.github/workflows/npm_publish.yaml`. Публикация идёт через **trusted publisher** npm (OIDC): workflow получает
-одноразовый токен от GitHub (`permissions: id-token: write`), постоянный `NPM_TOKEN` не нужен, provenance добавляется
-автоматически. Требования npm: npm CLI 11.5.1+ (workflow обновляет его сам), Node 22.14+, `repository.url` в
-`package.json` дословно совпадает с репозиторием.
+Коммит в `main` с `[publish]` в сообщении (`"X.Y.Z [deploy] [publish]"`, версия поднята в `package.json`) запускает `.github/workflows/npm_publish.yaml`. Публикация идёт через **trusted publisher** npm (OIDC): workflow получает одноразовый токен от GitHub (`permissions: id-token: write`), постоянный `NPM_TOKEN` не нужен, provenance добавляется автоматически. Требования npm: npm CLI 11.5.1+ (workflow обновляет его сам), Node 22.14+, `repository.url` в `package.json` дословно совпадает с репозиторием.
+
+Связь настраивается на npmjs.com → пакет → Settings → Trusted Publisher: GitHub Actions, `Oleg-Perevyshin/ElementsUI`, workflow `npm_publish.yaml`, разрешение «npm publish». Новая связь подтверждается первой успешной публикацией и должна пройти её в течение 2 дней, иначе истекает. Существующую связь изменить нельзя — только удалить и создать заново.
 
-Связь настраивается на npmjs.com → пакет → Settings → Trusted Publisher: GitHub Actions, `Oleg-Perevyshin/ElementsUI`,
-workflow `npm_publish.yaml`, разрешение «npm publish». Новая связь подтверждается первой успешной публикацией и
-должна пройти её в течение 2 дней, иначе истекает. Существующую связь изменить нельзя — только удалить и создать заново.
+**Обновление DevCloud — автоматически.** После публикации job `update-devcloud` того же workflow ждёт новую версию в npm, клонирует `xPOE-Studio/DevCloud` (Forgejo) по секрету `FORGEJO_ACCESS_TOKEN`, ставит `poe-svelte-ui-lib@<версия>`, прогоняет `prisma generate` и `svelte-check` и, если проверка прошла, пушит в `main` коммит `poe-svelte-ui-lib <версия> [deploy]` — облако разворачивается само. Вручную версию в облаке не поднимаем; изменения кода облака, которым нужна новая версия библиотеки, коммитятся без `[deploy]` до выпуска — их развернёт этот коммит. Если `svelte-check` упал, коммита нет, облако остаётся на прежней версии (смотрите лог job в GitHub Actions).
 
 ---
 

package/dist/PeriodChart/README.md

@@ -21,30 +21,21 @@
 
 ### Адаптивность
 
-- Столбики растягиваются на всю ширину контейнера (`flex-1` на каждый), высота — в процентах от
-  верха шкалы в зоне фиксированной высоты (`h-40`); ненулевое значение всегда видно минимум на 2 %
-- Шкала Y слева: подписи делений + горизонтальная сетка за столбиками (пунктир, базовая линия 0 —
-  сплошная). Шкала пересчитывается автоматически при смене уровня или данных: `0…100`,
-  `0…0.08` с шагом `0.02`, `0…3M`. Число знаков после запятой — по величине шага, для больших
-  значений — суффиксы `k` (верх ≥ 10 000) и `M` (≥ 1 000 000)
-- Точное значение — в подсказке при наведении на столбик: 4 значащие цифры + `unit`
-  (`910: 0.0734 мкВт/см²`), малые величины не теряются
-- Подписи по X (`labels[i]`/индекс+1) — отдельной строкой под столбиками, при большом числе
-  столбиков прореживаются (не больше ~12 подписей)
-- Полностью на CSS-переменных темы (`--back-color`, `--accent-color`, `--hairline-color`,
-  `--faint-color`) — тёмная/светлая тема не требует отдельной настройки
+- Столбики растягиваются на всю ширину контейнера (`flex-1` на каждый), высота — в процентах от верха шкалы в зоне фиксированной высоты (`h-40`); ненулевое значение всегда видно минимум на 2 %
+- Шкала Y слева: подписи делений + горизонтальная сетка за столбиками (пунктир, базовая линия 0 — сплошная). Шкала пересчитывается автоматически при смене уровня или данных: `0…100`, `0…0.08` с шагом `0.02`, `0…3M`. Число знаков после запятой — по величине шага, для больших значений — суффиксы `k` (верх ≥ 10 000) и `M` (≥ 1 000 000)
+- Точное значение — в подсказке при наведении на столбик: 4 значащие цифры + `unit` (`910: 0.0734 мкВт/см²`), малые величины не теряются
+- Подписи по X (`labels[i]`/индекс+1) — отдельной строкой под столбиками, при большом числе столбиков прореживаются (не больше ~12 подписей)
+- Полностью на CSS-переменных темы (`--back-color`, `--accent-color`, `--hairline-color`, `--faint-color`) — тёмная/светлая тема не требует отдельной настройки
 
 ### Ограничения
 
-- Компонент презентационный — не хранит историю, не опрашивает устройство сам; при смене
-  `levels` извне (например после ответа на `onLevelChange`) график перерисовывается автоматически
+- Компонент презентационный — не хранит историю, не опрашивает устройство сам; при смене `levels` извне (например после ответа на `onLevelChange`) график перерисовывается автоматически
 - Отрицательные значения не отображаются — шкала всегда начинается с 0
 - Округление только для отображения — исходные данные в `levels[].data` не изменяются
 
 ### Производительность
 
-- Никакого `<canvas>` — чистый HTML/CSS, подходит для умеренного числа столбиков (проверено на
-  вплоть до 31); для сотен/тысяч точек стоит использовать `Graph`
+- Никакого `<canvas>` — чистый HTML/CSS, подходит для умеренного числа столбиков (проверено на вплоть до 31); для сотен/тысяч точек стоит использовать `Graph`
 
 ## Пропсы
 
@@ -63,8 +54,7 @@
 
 ### Колбэки
 
-Компонент не генерирует DOM-события — используйте колбэк `onLevelChange` для реакции на смену
-уровня (например чтобы догрузить свежие данные для только что выбранного уровня).
+Компонент не генерирует DOM-события — используйте колбэк `onLevelChange` для реакции на смену уровня (например чтобы догрузить свежие данные для только что выбранного уровня).
 
 ## Примеры
 
@@ -80,9 +70,7 @@
 
 ### Реальные данные с устройства (например BL0910: PWR.EYear/EMonth/EDay/EHour)
 
-`variable` в каждом уровне — это имя Cfg-ключа устройства (`PWR.EHour` и т.п.), по которому
-конструктор облака подписывается через `eventHandler.Variables` и подставляет актуальный `data`;
-сам компонент значение `variable` не читает, только рисует уже готовый `data`.
+`variable` в каждом уровне — это имя Cfg-ключа устройства (`PWR.EHour` и т.п.), по которому конструктор облака подписывается через `eventHandler.Variables` и подставляет актуальный `data`; сам компонент значение `variable` не читает, только рисует уже готовый `data`.
 
 ```svelte
 <script>
@@ -108,9 +96,7 @@
 
 ### Описание
 
-Компонент `PeriodChartProps.svelte` предоставляет визуальный интерфейс для редактирования свойств
-`PeriodChart`. Поддерживает два режима отображения: для конструктора и для редактирования —
-идентично остальным компонентам библиотеки (`ProgressBarProps`, `TabsProps`).
+Компонент `PeriodChartProps.svelte` предоставляет визуальный интерфейс для редактирования свойств `PeriodChart`. Поддерживает два режима отображения: для конструктора и для редактирования — идентично остальным компонентам библиотеки (`ProgressBarProps`, `TabsProps`).
 
 ### Пропсы конструктора
 
@@ -122,20 +108,9 @@
 
 ### Особенности конструктора
 
-- Общие поля через `CommonSnippets`: `Access` (без `viewOnly` — компонент чисто отображающий, как
-  `Graph`/`Tabs`/`ProgressBar`), `Colors` (пишет в `wrapperClass`, тот же цвет уходит на
-  переключатель и столбики), `Label`; в режиме редактирования дополнительно `Identificator`,
-  `WrapperClass`
+- Общие поля через `CommonSnippets`: `Access` (без `viewOnly` — компонент чисто отображающий, как `Graph`/`Tabs`/`ProgressBar`), `Colors` (пишет в `wrapperClass`, тот же цвет уходит на переключатель и столбики), `Label`; в режиме редактирования дополнительно `Identificator`, `WrapperClass`
 - `unit` — отдельное текстовое поле ввода
-- Редактор уровней (`levels[]`) — тот же паттерн повторяющегося списка, что у `TabsSettings`/
-  `ProgressBarOptions`: перетаскивание (`UI.Dragging`) для порядка вкладок, добавление/удаление
-  через `ButtonAdd`/`ButtonDelete`, на каждый уровень — поля `name`, `variable`, `data` и
-  `labels`. `variable` — тот же `Select` по списку переменных устройства (`DeviceVariables` из
-  контекста), что и у `Graph`/`CommonSnippets.Variable`, только по одному на каждый уровень; при
-  любом изменении списка уровней редактор пересобирает `eventHandler.Variables` как объединение
-  всех непустых `variable` со всех уровней — так рантайм подписывается сразу на все нужные ключи.
-  `data`/`labels` остаются полями для литеральных демо-данных — массивы чисел/строк вводятся одной
-  строкой через запятую (`"10, 20, 30"`) и парсятся на лету
+- Редактор уровней (`levels[]`) — тот же паттерн повторяющегося списка, что у `TabsSettings`/ `ProgressBarOptions`: перетаскивание (`UI.Dragging`) для порядка вкладок, добавление/удаление через `ButtonAdd`/`ButtonDelete`, на каждый уровень — поля `name`, `variable`, `data` и `labels`. `variable` — тот же `Select` по списку переменных устройства (`DeviceVariables` из контекста), что и у `Graph`/`CommonSnippets.Variable`, только по одному на каждый уровень; при любом изменении списка уровней редактор пересобирает `eventHandler.Variables` как объединение всех непустых `variable` со всех уровней — так рантайм подписывается сразу на все нужные ключи. `data`/`labels` остаются полями для литеральных демо-данных — массивы чисел/строк вводятся одной строкой через запятую (`"10, 20, 30"`) и парсятся на лету
 
 ### Использование
 
@@ -167,9 +142,7 @@
 
 - `currentLevelIndex` (`$state`) — индекс активной вкладки, всегда инициализируется `0` (первый уровень)
 - `currentLevel`/`values` (`$derived`) — текущий уровень и его массив значений
-- `axis` (`$derived`) — шкала Y по максимуму текущего массива: шаг из ряда 1 / 2 / 2.5 / 5 × 10ⁿ
-  (~4 деления), верх шкалы = максимум, округлённый вверх до шага, низ всегда 0; высота столбиков
-  считается от верха шкалы
+- `axis` (`$derived`) — шкала Y по максимуму текущего массива: шаг из ряда 1 / 2 / 2.5 / 5 × 10ⁿ (~4 деления), верх шкалы = максимум, округлённый вверх до шага, низ всегда 0; высота столбиков считается от верха шкалы
 
 ### Сторы и зависимости
 

package/dist/WidgetDeviceInfo/README.md

@@ -27,21 +27,10 @@
 
 ## Особенности
 
-Смарт-виджет информации об устройстве. Как и `WidgetWiFi`, не привязывается к одной произвольной
-переменной устройства — работает с фиксированным набором полей, соответствующих реальной
-прошивочной конвенции (`main_config.c`, группа `CFG`, ProdFactory-ESP): `DevSN`, `DevID`, `DevFW`,
-`RunCnt`, `StaIP`, `ApIP` — только чтение; `DevName`, `HostName`, `WebUser`, `WebPsw` —
-редактируются локально и сохраняются одним пакетом по кнопке "Сохранить". Отдельная кнопка
-"Перезагрузить" рядом с заголовком вызывает `onRestart` немедленно (не входит в пакет сохранения
-полей). Реальное имя поля устройства для каждого ключа можно переопределить через `keys` (по
-умолчанию совпадает с именем ключа). Компонент ничего не знает про DeviceStore/WebSocket —
-только `value`/`onSave`/`onRestart`.
-
-- Серийный номер устройства обычно длинный (например
-  `00.00.000-00_0000AC670000B22B00007428:DBC5`) — в разметке занимает отдельную строку, чтобы не
-  обрезаться в узкой сетке.
-- `WebPsw` в реальном устройстве исторически передаётся обычным текстом; в виджете сделан
-  `type="password"` для консистентности с остальным обликом конструктора.
+Смарт-виджет информации об устройстве. Как и `WidgetWiFi`, не привязывается к одной произвольной переменной устройства — работает с фиксированным набором полей, соответствующих реальной прошивочной конвенции (`main_config.c`, группа `CFG`, ProdFactory-ESP): `DevSN`, `DevID`, `DevFW`, `RunCnt`, `StaIP`, `ApIP` — только чтение; `DevName`, `HostName`, `WebUser`, `WebPsw` — редактируются локально и сохраняются одним пакетом по кнопке "Сохранить". Отдельная кнопка "Перезагрузить" рядом с заголовком вызывает `onRestart` немедленно (не входит в пакет сохранения полей). Реальное имя поля устройства для каждого ключа можно переопределить через `keys` (по умолчанию совпадает с именем ключа). Компонент ничего не знает про DeviceStore/WebSocket — только `value`/`onSave`/`onRestart`.
+
+- Серийный номер устройства обычно длинный (например `00.00.000-00_0000AC670000B22B00007428:DBC5`) — в разметке занимает отдельную строку, чтобы не обрезаться в узкой сетке.
+- `WebPsw` в реальном устройстве исторически передаётся обычным текстом; в виджете сделан `type="password"` для консистентности с остальным обликом конструктора.
 
 ## Пропсы
 
@@ -109,10 +98,7 @@
 | `component`        | `UIComponent & { properties: Partial<IWidgetDeviceInfoProps> }`                                 | Объект компонента с его свойствами        |
 | `onPropertyChange` | `(updates: Partial<{ properties?: string \| object; name?: string; access?: string }>) => void` | Коллбэк для обновления свойств компонента |
 
-Панель содержит заголовок, мастер-цвет (через общий `WidgetAccentPicker.svelte`), префикс
-прошивочной группы (ID), переопределение имени поля устройства для каждого ключа
-`IWidgetDeviceInfoConfig` (по умолчанию совпадает с именем ключа) и команду перезагрузки
-(Header/Argument, по умолчанию `SET`/`Restart`).
+Панель содержит заголовок, мастер-цвет (через общий `WidgetAccentPicker.svelte`), префикс прошивочной группы (ID), переопределение имени поля устройства для каждого ключа `IWidgetDeviceInfoConfig` (по умолчанию совпадает с именем ключа) и команду перезагрузки (Header/Argument, по умолчанию `SET`/`Restart`).
 
 ### Что настраивается
 

package/dist/WidgetFileSystem/README.md

@@ -25,10 +25,7 @@
 }
 ```
 
-`Upload` есть, только пока идёт закачка. Снимок со списком `List` приходит на `GET ModCfg`,
-`GET FS`, после удаления, после завершения или ошибки закачки и в рассылке `OK! Update`; ход
-закачки — только `{"Upload": {...}}` (без списка, раз в 5%). Объект со списком заменяет состояние
-целиком, без списка — дописывается поверх (это делает вызывающий код).
+`Upload` есть, только пока идёт закачка. Снимок со списком `List` приходит на `GET ModCfg`, `GET FS`, после удаления, после завершения или ошибки закачки и в рассылке `OK! Update`; ход закачки — только `{"Upload": {...}}` (без списка, раз в 5%). Объект со списком заменяет состояние целиком, без списка — дописывается поверх (это делает вызывающий код).
 
 Команды — один аргумент `FS`, операция в поле `Op`; ответ всегда `FS` с тем же `Op`:
 
@@ -52,21 +49,11 @@
 
 ## Особенности
 
-Смарт-виджет файловой системы устройства: занятость памяти, список файлов с удалением и закачка
-нового файла с прогрессом. Работает с одним объектом `CFG.FS` ровно в том виде, в каком его отдаёт
-прошивка (`FS_WriteState`, ProdFactory-ESP), и с одной командой `FS`. Компонент ничего не знает про
-DeviceStore/WebSocket — только `value` и колбэки `onRefresh`/`onDelete`/`onUpload`, вся отправка
-(в том числе протокол закачки) на стороне вызывающего кода.
-
-- **Занятость** — «занято X из Y», процент и полоса мастер-цвета; процент оранжевый от 75%,
-  красный от 90%. Размеры в Б/КБ/МБ.
-- **Файлы** — таблица «Путь / Размер / Удалить»; длинный путь обрезается «…», удаление
-  подтверждается внутри карточки. Пустая ФС — «Файлов нет». Колонка удаления есть, только если
-  передан `onDelete`.
-- **Закачка** — блок есть, только если передан `onUpload`. Имя файла проверяется до отправки
-  (`maxNameLength`, по умолчанию 31 — ограничение прошивки). Прогресс берётся из `value.Upload`
-  и виден, пока закачку ведёт этот клиент или пока устройство сообщает `Upload` (закачка с
-  другого клиента). Ошибка из `onUpload` выводится под полем.
+Смарт-виджет файловой системы устройства: занятость памяти, список файлов с удалением и закачка нового файла с прогрессом. Работает с одним объектом `CFG.FS` ровно в том виде, в каком его отдаёт прошивка (`FS_WriteState`, ProdFactory-ESP), и с одной командой `FS`. Компонент ничего не знает про DeviceStore/WebSocket — только `value` и колбэки `onRefresh`/`onDelete`/`onUpload`, вся отправка (в том числе протокол закачки) на стороне вызывающего кода.
+
+- **Занятость** — «занято X из Y», процент и полоса мастер-цвета; процент оранжевый от 75%, красный от 90%. Размеры в Б/КБ/МБ.
+- **Файлы** — таблица «Путь / Размер / Удалить»; длинный путь обрезается «…», удаление подтверждается внутри карточки. Пустая ФС — «Файлов нет». Колонка удаления есть, только если передан `onDelete`.
+- **Закачка** — блок есть, только если передан `onUpload`. Имя файла проверяется до отправки (`maxNameLength`, по умолчанию 31 — ограничение прошивки). Прогресс берётся из `value.Upload` и виден, пока закачку ведёт этот клиент или пока устройство сообщает `Upload` (закачка с другого клиента). Ошибка из `onUpload` выводится под полем.
 
 ## Пропсы
 
@@ -122,8 +109,7 @@ DeviceStore/WebSocket — только `value` и колбэки `onRefresh`/`on
 | `component`        | `UIComponent & { properties: Partial<IWidgetFileSystemProps> }`                                 | Объект компонента с его свойствами        |
 | `onPropertyChange` | `(updates: Partial<{ properties?: string \| object; name?: string; access?: string }>) => void` | Коллбэк для обновления свойств компонента |
 
-Группы панели: общие (заголовок, префикс группы, мастер-цвет), закачка (`accept`,
-`maxNameLength`), устройство (поле `FS`, аргумент команд).
+Группы панели: общие (заголовок, префикс группы, мастер-цвет), закачка (`accept`, `maxNameLength`), устройство (поле `FS`, аргумент команд).
 
 ### Что настраивается
 

package/dist/WidgetMap/README.md

@@ -14,16 +14,10 @@
 
 ### Как работать с картой
 
-1. **Устройство** шлёт поля группы в поток телеметрии (`Telemetry_SendObject`, ключ `Data`) — облако и WebApp
-   раскладывают их в переменные `<ModSN>|<группа>.<ключ>`. Координаты — раз в 0.5–1 с, имя и серийный номер —
-   реже (раз в несколько секунд) отдельным кадром: буфер `Telemetry_SendObject` — 512 байт, строки его быстро съедают.
-2. **В конструкторе** добавьте «Карту» из смарт-виджетов и перечислите группы через пробел (`MAV` или
-   `MAV GNSS`). Переменные привязывать не нужно — виджет сам берёт ключи из таблицы ниже.
-3. **Оператор** поверх карты включает траекторию, выбирает число её точек и таймаут маркеров. Кнопка
-   **«Все борта»** в шапке виджета вписывает все видимые борта в экран (один борт — приближение к нему).
-   Сама карта вид не меняет — бортов может быть много.
-4. **Клик по маркеру** открывает карточку борта: имя, группа, координаты, высота, курс, спутники, серийный
-   номер; кнопки «Копировать» (всё в буфер обмена) и «Скрыть» (до следующего обновления борта).
+1. **Устройство** шлёт поля группы в поток телеметрии (`Telemetry_SendObject`, ключ `Data`) — облако и WebApp раскладывают их в переменные `<ModSN>|<группа>.<ключ>`. Координаты — раз в 0.5–1 с, имя и серийный номер — реже (раз в несколько секунд) отдельным кадром: буфер `Telemetry_SendObject` — 512 байт, строки его быстро съедают.
+2. **В конструкторе** добавьте «Карту» из смарт-виджетов и перечислите группы через пробел (`MAV` или `MAV GNSS`). Переменные привязывать не нужно — виджет сам берёт ключи из таблицы ниже.
+3. **Оператор** поверх карты включает траекторию, выбирает число её точек и таймаут маркеров. Кнопка **«Все борта»** в шапке виджета вписывает все видимые борта в экран (один борт — приближение к нему). Сама карта вид не меняет — бортов может быть много.
+4. **Клик по маркеру** открывает карточку борта: имя, группа, координаты, высота, курс, спутники, серийный номер; кнопки «Копировать» (всё в буфер обмена) и «Скрыть» (до следующего обновления борта).
 
 ```c
 /* Прошивка: группа MAV — те же ключи читает и WidgetPFD, одна отправка кормит оба виджета */
@@ -52,15 +46,11 @@ Telemetry_SendObject(g_telemetry_stream, g_mcfg.DevSN, "Data", dev, sizeof(dev)
 
 ## Особенности
 
-Смарт-виджет «Карта» — положение бортов на карте MapLibre с траекториями. Каждый борт — одна **группа полей**
-устройства (префикс, например `MAV`); виджет показывает сразу несколько групп, например `MAV GNSS` — автопилот
-и собственный GNSS-приёмник модуля. Только отображение: ничего не отправляет и не знает про DeviceStore/WebSocket.
-Заменяет удалённый компонент `Map`.
+Смарт-виджет «Карта» — положение бортов на карте MapLibre с траекториями. Каждый борт — одна **группа полей** устройства (префикс, например `MAV`); виджет показывает сразу несколько групп, например `MAV GNSS` — автопилот и собственный GNSS-приёмник модуля. Только отображение: ничего не отправляет и не знает про DeviceStore/WebSocket. Заменяет удалённый компонент `Map`.
 
 ### Поведение
 
-- **Свежесть.** Борт зелёный, пока его значения менялись за таймаут; без изменений — красный; ещё через таймаут
-  скрывается до новых данных.
+- **Свежесть.** Борт зелёный, пока его значения менялись за таймаут; без изменений — красный; ещё через таймаут скрывается до новых данных.
 - **Траектория** — точка добавляется только при смене координат (курс и высота могут обновляться чаще позиции).
 - **Только 2D** — наклон (3D) запрещён; правой кнопкой мыши карта только поворачивается, кнопка-компас под зумом возвращает её на север.
 - **Шапка** — сколько бортов на связи из заданных: зелёный — все, серый — часть, красный — ни одного.
@@ -94,8 +84,7 @@ Telemetry_SendObject(g_telemetry_stream, g_mcfg.DevSN, "Data", dev, sizeof(dev)
 
 ## Конструктор свойств (WidgetMapProps.svelte)
 
-Группы панели: общие (заголовок, группы полей через пробел, мастер-цвет), оформление (высота карты S/M/L/XL — 250/400/600/800 px, иконка
-маркера), по умолчанию (траектория и её длина — оператор меняет их на карте).
+Группы панели: общие (заголовок, группы полей через пробел, мастер-цвет), оформление (высота карты S/M/L/XL — 250/400/600/800 px, иконка маркера), по умолчанию (траектория и её длина — оператор меняет их на карте).
 
 ### Что настраивается
 
@@ -105,6 +94,4 @@ Telemetry_SendObject(g_telemetry_stream, g_mcfg.DevSN, "Data", dev, sizeof(dev)
 
 ## Внутреннее устройство
 
-`mapWrapper/` — тонкие Svelte-обёртки над MapLibre GL (`MapLibre`, `Marker`, `Popup`, `Line`, контролы,
-`CustomControl` для своих элементов поверх карты). MapLibre подгружается при монтировании; без интернета
-показывается заглушка «Карта не загружена».
+`mapWrapper/` — тонкие Svelte-обёртки над MapLibre GL (`MapLibre`, `Marker`, `Popup`, `Line`, контролы, `CustomControl` для своих элементов поверх карты). MapLibre подгружается при монтировании; без интернета показывается заглушка «Карта не загружена».

package/dist/WidgetPFD/README.md

@@ -49,20 +49,13 @@
 
 ## Особенности
 
-Смарт-виджет «Пилотажный дисплей» (Primary Flight Display) — главный прибор контроля полёта, как в
-стеклянной кабине самолёта или наземной станции управления. Работает с полями группы (по умолчанию
-`MAV`) ровно в том виде, в каком их отдаёт телеметрия автопилота MAVLink устройства 20.00.000-01.
-Только отображение: ничего не отправляет и не знает про DeviceStore/WebSocket.
-
-- **Строка состояния** — ARMED/DISARMED, режим полёта (название по типу аппарата: самолёт, коптер,
-  наземный), GPS (тип фиксации и спутники), батарея (В, А, %), расстояние и пеленг на точку взлёта.
-- **Авиагоризонт** — небо и земля по крену и тангажу, лестница тангажа через 5°, дуга крена
-  (10/20/30/45/60°), символ самолёта. Ориентация сглаживается между пакетами (Tween 120 мс).
-- **Лента скорости** (слева, путевая) с воздушной числом, **лента высоты** (справа, над точкой взлёта)
-  с вариометром, **лента курса** (снизу) с меткой трека (розовая) и направления на дом (зелёная).
+Смарт-виджет «Пилотажный дисплей» (Primary Flight Display) — главный прибор контроля полёта, как в стеклянной кабине самолёта или наземной станции управления. Работает с полями группы (по умолчанию `MAV`) ровно в том виде, в каком их отдаёт телеметрия автопилота MAVLink устройства 20.00.000-01. Только отображение: ничего не отправляет и не знает про DeviceStore/WebSocket.
+
+- **Строка состояния** — ARMED/DISARMED, режим полёта (название по типу аппарата: самолёт, коптер, наземный), GPS (тип фиксации и спутники), батарея (В, А, %), расстояние и пеленг на точку взлёта.
+- **Авиагоризонт** — небо и земля по крену и тангажу, лестница тангажа через 5°, дуга крена (10/20/30/45/60°), символ самолёта. Ориентация сглаживается между пакетами (Tween 120 мс).
+- **Лента скорости** (слева, путевая) с воздушной числом, **лента высоты** (справа, над точкой взлёта) с вариометром, **лента курса** (снизу) с меткой трека (розовая) и направления на дом (зелёная).
 - **Под прибором** — координаты, высота над уровнем моря, давление, температура.
-- **Нет данных** — если пакеты не приходили дольше `limits.staleMs` (по умолчанию 2 с), прибор
-  перечёркивается и помечается «НЕТ ДАННЫХ»; в шапке всегда виден возраст данных.
+- **Нет данных** — если пакеты не приходили дольше `limits.staleMs` (по умолчанию 2 с), прибор перечёркивается и помечается «НЕТ ДАННЫХ»; в шапке всегда виден возраст данных.
 - **Узкая ячейка** (уже 440 px) — ленты скорости и высоты заменяются числами поверх горизонта.
 
 ## Пропсы

package/dist/WidgetRGBStrip/README.md

@@ -24,8 +24,7 @@
 "LST.MaxCount": 64               // ёмкость из прошивки, только чтение
 ```
 
-Изменения — `SET ModCfg` с нужными ключами группы. Пин данных и способ передачи (RMT/SPI) задаются
-в прошивке (`RGB_Strip_Init`) и через виджет не меняются.
+Изменения — `SET ModCfg` с нужными ключами группы. Пин данных и способ передачи (RMT/SPI) задаются в прошивке (`RGB_Strip_Init`) и через виджет не меняются.
 
 ## Ключи
 
@@ -41,15 +40,10 @@
 
 ## Особенности
 
-Смарт-виджет адресной светодиодной ленты. Работает с полями группы `LST` ровно в том виде, в каком их
-отдаёт драйвер `RGB_Strip` (ProdFactory-ESP). Компонент ничего не знает про DeviceStore/WebSocket —
-только `value` и колбэки `onChange`/`onSave`.
+Смарт-виджет адресной светодиодной ленты. Работает с полями группы `LST` ровно в том виде, в каком их отдаёт драйвер `RGB_Strip` (ProdFactory-ESP). Компонент ничего не знает про DeviceStore/WebSocket — только `value` и колбэки `onChange`/`onSave`.
 
-- **Свечение** — палитра цвета, белый канал (только для модели SK6812), эффект и скорость. Каждое
-  изменение сразу уходит в `onChange`.
-- **Оборудование** — количество светодиодов (1…`MaxCount`), модель чипа и порядок цветов.
-  Редактируются локально и отправляются одним пакетом по «Сохранить»: прошивка пересоздаёт драйвер
-  ленты. Пока правок нет, поля показывают свежие значения с устройства.
+- **Свечение** — палитра цвета, белый канал (только для модели SK6812), эффект и скорость. Каждое изменение сразу уходит в `onChange`.
+- **Оборудование** — количество светодиодов (1…`MaxCount`), модель чипа и порядок цветов. Редактируются локально и отправляются одним пакетом по «Сохранить»: прошивка пересоздаёт драйвер ленты. Пока правок нет, поля показывают свежие значения с устройства.
 - В шапке — образец текущего цвета.
 
 ## Пропсы

package/dist/WidgetStackInfo/README.md

@@ -23,10 +23,7 @@
 }
 ```
 
-Все размеры в байтах. ESP отдаёт две кучи (`Internal` — внутренний DRAM, `Default` — всё, что
-отдаёт `malloc`, включая PSRAM) и `Core` (-1 — без привязки к ядру); STM — одну кучу `Heap`
-(heap_4, `configTOTAL_HEAP_SIZE`) и без `Core`. `State` — `eTaskState`: 0 работает, 1 готова,
-2 ожидает, 3 приостановлена, 4 удалена.
+Все размеры в байтах. ESP отдаёт две кучи (`Internal` — внутренний DRAM, `Default` — всё, что отдаёт `malloc`, включая PSRAM) и `Core` (-1 — без привязки к ядру); STM — одну кучу `Heap` (heap_4, `configTOTAL_HEAP_SIZE`) и без `Core`. `State` — `eTaskState`: 0 работает, 1 готова, 2 ожидает, 3 приостановлена, 4 удалена.
 
 ## Ключи
 
@@ -37,19 +34,11 @@
 
 ## Особенности
 
-Отладочный смарт-виджет памяти и задач FreeRTOS: занятость каждой кучи и минимальный запас стека
-каждой задачи. Работает с одним объектом `StackInfo` ровно в том виде, в каком его отдаёт
-`API_GetStackInfo` (ProdFactory-ESP и ProdFactory-STM — контракт общий), и с одним запросом
-`GET StackInfo`. Компонент ничего не знает про DeviceStore/WebSocket — только `value` и `onRefresh`.
+Отладочный смарт-виджет памяти и задач FreeRTOS: занятость каждой кучи и минимальный запас стека каждой задачи. Работает с одним объектом `StackInfo` ровно в том виде, в каком его отдаёт `API_GetStackInfo` (ProdFactory-ESP и ProdFactory-STM — контракт общий), и с одним запросом `GET StackInfo`. Компонент ничего не знает про DeviceStore/WebSocket — только `value` и `onRefresh`.
 
-- **Кучи** — карточка на каждую: «занято X из Y», процент (оранжевый от 75%, красный от 90%) и
-  полоса мастер-цвета; светлая подложка полосы — пик занятости с момента старта (`Total − MinFree`).
-- **Задачи** — таблица «Задача / Состояние / Приоритет / Ядро / Запас». Порядок всегда по
-  возрастанию запаса стека: самые рискованные сверху (сортировка кликом при автоопросе сбрасывалась
-  бы на каждом ответе). Запас меньше `warnBytes` — красный, меньше удвоенного — оранжевый, над
-  таблицей — число задач ниже порога. Колонка «Ядро» есть, только если устройство передаёт `Core`.
-- **Обновление** — кнопка «Обновить» и автоопрос «Выкл / 1 с / 5 с / 10 с» (`period`); при
-  включении опрос сразу шлёт запрос, свёрнутый виджет не опрашивает.
+- **Кучи** — карточка на каждую: «занято X из Y», процент (оранжевый от 75%, красный от 90%) и полоса мастер-цвета; светлая подложка полосы — пик занятости с момента старта (`Total − MinFree`).
+- **Задачи** — таблица «Задача / Состояние / Приоритет / Ядро / Запас». Порядок всегда по возрастанию запаса стека: самые рискованные сверху (сортировка кликом при автоопросе сбрасывалась бы на каждом ответе). Запас меньше `warnBytes` — красный, меньше удвоенного — оранжевый, над таблицей — число задач ниже порога. Колонка «Ядро» есть, только если устройство передаёт `Core`.
+- **Обновление** — кнопка «Обновить» и автоопрос «Выкл / 1 с / 5 с / 10 с» (`period`); при включении опрос сразу шлёт запрос, свёрнутый виджет не опрашивает.
 
 ## Пропсы
 
@@ -86,8 +75,7 @@
 | `component`        | `UIComponent & { properties: Partial<IWidgetStackInfoProps> }`                                  | Объект компонента с его свойствами        |
 | `onPropertyChange` | `(updates: Partial<{ properties?: string \| object; name?: string; access?: string }>) => void` | Коллбэк для обновления свойств компонента |
 
-Группы панели: общие (заголовок, мастер-цвет), отображение (`warnBytes`, `period`), устройство
-(объект ответа, аргумент запроса).
+Группы панели: общие (заголовок, мастер-цвет), отображение (`warnBytes`, `period`), устройство (объект ответа, аргумент запроса).
 
 ### Что настраивается
 

package/dist/WidgetWiFi/README.md

@@ -25,22 +25,12 @@
 
 ## Особенности
 
-Смарт-виджет настройки WiFi (режимы STA / AP / STA+AP). В отличие от примитивов конструктора,
-не привязывается к одной произвольной переменной устройства через Select — работает с
-фиксированным набором полей, соответствующих реальной прошивочной конвенции (`main_config.c`,
-группа `CFG`, ProdFactory-ESP): `WiFiMode`, `StaSSID`, `StaPSK`, `StaticIP`, `StaIP`, `StaMS`,
-`StaGW`, `ApSSID`, `ApPSK`, `ApIP`, `ApMS`, `ApGW`. Компонент ничего не знает про
-DeviceStore/WebSocket — только `value`/`onSave`, вся отправка на стороне вызывающего кода.
-
-Поля редактируются локально и отправляются одним пакетом по кнопке "Сохранить". Переход в
-режим AP (отключает STA) подтверждается отдельно — предупреждение появляется в момент нажатия
-"Сохранить", а не при простом переключении сегмент-контрола, чтобы можно было спокойно открыть
-секцию AP и заполнить SSID/пароль до реальной отправки.
-
-- Первый по-настоящему составной (multi-field) тип компонента конструктора — примитивы всегда
-  привязаны к одной переменной устройства через `properties.id`.
-- Чтение/батч-запись нескольких ключей `DeviceStore` реализуется на стороне приложения
-  (`GUIPreview.svelte`), а не внутри библиотеки.
+Смарт-виджет настройки WiFi (режимы STA / AP / STA+AP). В отличие от примитивов конструктора, не привязывается к одной произвольной переменной устройства через Select — работает с фиксированным набором полей, соответствующих реальной прошивочной конвенции (`main_config.c`, группа `CFG`, ProdFactory-ESP): `WiFiMode`, `StaSSID`, `StaPSK`, `StaticIP`, `StaIP`, `StaMS`, `StaGW`, `ApSSID`, `ApPSK`, `ApIP`, `ApMS`, `ApGW`. Компонент ничего не знает про DeviceStore/WebSocket — только `value`/`onSave`, вся отправка на стороне вызывающего кода.
+
+Поля редактируются локально и отправляются одним пакетом по кнопке "Сохранить". Переход в режим AP (отключает STA) подтверждается отдельно — предупреждение появляется в момент нажатия "Сохранить", а не при простом переключении сегмент-контрола, чтобы можно было спокойно открыть секцию AP и заполнить SSID/пароль до реальной отправки.
+
+- Первый по-настоящему составной (multi-field) тип компонента конструктора — примитивы всегда привязаны к одной переменной устройства через `properties.id`.
+- Чтение/батч-запись нескольких ключей `DeviceStore` реализуется на стороне приложения (`GUIPreview.svelte`), а не внутри библиотеки.
 
 ## Пропсы
 
@@ -102,9 +92,7 @@ DeviceStore/WebSocket — только `value`/`onSave`, вся отправка
 | `component`        | `UIComponent & { properties: Partial<IWidgetWiFiProps> }`                                       | Объект компонента с его свойствами        |
 | `onPropertyChange` | `(updates: Partial<{ properties?: string \| object; name?: string; access?: string }>) => void` | Коллбэк для обновления свойств компонента |
 
-Панель проще, чем у примитивов: не "к какой переменной привязать" (полей несколько, и они
-фиксированы прошивочной конвенцией), а "как виджет себя ведёт" — заголовок, разрешённые режимы,
-подтверждение при AP, мастер-цвет (через общий `WidgetAccentPicker.svelte`).
+Панель проще, чем у примитивов: не "к какой переменной привязать" (полей несколько, и они фиксированы прошивочной конвенцией), а "как виджет себя ведёт" — заголовок, разрешённые режимы, подтверждение при AP, мастер-цвет (через общий `WidgetAccentPicker.svelte`).
 
 ### Что настраивается
 

package/dist/theme.css

@@ -0,0 +1,545 @@
+/* poe-svelte-ui-lib/theme.css — единая тема DevCloud, витрины ElementsUI и приложений на библиотеке:
+   токены палитры (.light/.dark), типографика тегов в @layer base, компактный Markdown (.markdown-content),
+   роли заливки bg-* и border-*. Эталон — облако; подключать после Tailwind:
+     @import "tailwindcss";
+     @import "poe-svelte-ui-lib/theme.css";
+     @source "../node_modules/poe-svelte-ui-lib/dist";
+     @custom-variant dark (&:where(.dark, .dark *));
+   В app.css приложения — только его собственные отличия. */
+
+:root {
+  /* Интерфейс — системный шрифт: спроектирован для плотных панелей и мелких кеглей.
+     Montserrat остаётся в логотипе и крупных заголовках витрин (класс .font-display). */
+  font-family:
+    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji";
+  font-optical-sizing: auto;
+  font-style: normal;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+
+  /* Было: font-size 13px, font-weight 450, text-align center.
+     13px остаётся доступен классом .text-dense для таблиц и сервисных панелей. */
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.font-display {
+  font-family:
+    "Montserrat",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+}
+
+/* Плотный режим для таблиц, сервисного раздела и отладки */
+.text-dense {
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+/* Глобальные стили тегов — в слое base: утилиты Tailwind (классы компонентов poe-svelte-ui-lib) всегда сильнее */
+@layer base {
+  /* ─── Типографическая шкала ─────────────────────────────────────────── */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+    text-wrap: pretty;
+  }
+
+  h1 {
+    font-size: 2.2rem; /* 33px */
+    font-weight: 700;
+    line-height: 1.12;
+    letter-spacing: -0.022em;
+  }
+
+  h2 {
+    font-size: 1.75rem; /* 26px */
+    font-weight: 650;
+    line-height: 1.2;
+    letter-spacing: -0.016em;
+  }
+
+  h3 {
+    font-size: 1.35rem; /* 20px */
+    font-weight: 620;
+    line-height: 1.3;
+    letter-spacing: -0.01em;
+  }
+
+  h4 {
+    font-size: 1.13rem; /* 17px */
+    font-weight: 600;
+    line-height: 1.4;
+  }
+
+  h5 {
+    font-size: 1rem; /* 15px */
+    font-weight: 600;
+  }
+
+  h6 {
+    font-size: 0.8rem; /* 12px */
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--muted-color);
+  }
+
+  p {
+    margin: 0;
+  }
+
+  /* Длинные слова (имена файлов, типы) переносятся — без горизонтальной прокрутки */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  li {
+    overflow-wrap: break-word;
+  }
+
+  label {
+    margin: 0;
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--muted-color);
+  }
+
+  ul,
+  ol {
+    padding-left: 1.25rem;
+    margin: 0.25rem 0;
+  }
+
+  ul {
+    list-style: disc;
+  }
+
+  ol {
+    list-style: decimal;
+  }
+
+  li {
+    margin: 0.25rem 0;
+  }
+
+  blockquote {
+    margin: 1rem 0;
+    padding-left: 1rem;
+    border-left: 3px solid var(--border-color);
+    color: var(--muted-color);
+    font-style: normal;
+  }
+
+  pre {
+    padding: 0.5rem 0.75rem;
+    text-align: left;
+    background-color: var(--container-color);
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
+    /* Без горизонтальной прокрутки: длинные строки кода переносятся */
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  pre code {
+    padding: 0;
+    background-color: transparent;
+    white-space: inherit;
+  }
+
+  code {
+    padding: 0.1rem 0.35rem;
+    text-align: left;
+    background-color: var(--container-color);
+    border-radius: 6px;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+    font-size: 0.9em;
+  }
+
+  /* ─── Таблицы (Markdown + плотный режим) ─────────────────────────────── */
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 0.5rem 0;
+    text-align: left;
+    font-size: 13px;
+    font-variant-numeric: tabular-nums;
+  }
+
+  th,
+  td {
+    padding: 0.4rem 0.6rem;
+    border: 0;
+    border-top: 1px solid var(--hairline-color);
+    /* Длинные типы и значения переносятся внутри ячейки — таблица не шире контейнера */
+    overflow-wrap: anywhere;
+    vertical-align: top;
+  }
+
+  /* Ключи и имена в первой колонке не рвутся посреди слова — переносятся только по пробелам */
+  td:first-child code {
+    overflow-wrap: break-word;
+  }
+
+  th {
+    background-color: var(--container-color);
+    border-top: 0;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--muted-color);
+  }
+
+  /* Зебра убрана: строки разделяет волосяная линия, выделение — тинт акцента */
+  tr:nth-child(even) td {
+    background-color: transparent;
+  }
+
+  /* ─── Контент из Markdown (marked → {@html}) ──────────────────────────
+     Глобальная шкала h1..h6 выше (33/26/20px…) рассчитана на витринные
+     заголовки страниц, а не на текст внутри карточек/чата/модалок/каталога —
+     там с ней markdown выглядел непропорционально крупным. Здесь — свой
+     компактный масштаб, подключается классом .markdown-content на обёртке
+     каждого {@html}-блока с результатом RenderMarkdown(). */
+  .markdown-content {
+    font-size: 14px;
+    line-height: 1.6;
+  }
+
+  .markdown-content > :first-child {
+    margin-top: 0;
+  }
+
+  .markdown-content > :last-child {
+    margin-bottom: 0;
+  }
+
+  .markdown-content h1 {
+    margin: 0.7em 0 0.35em;
+    font-size: 1.3rem; /* 18px */
+    font-weight: 650;
+    line-height: 1.3;
+    letter-spacing: -0.012em;
+  }
+
+  .markdown-content h2 {
+    margin: 0.7em 0 0.35em;
+    font-size: 1.15rem; /* 16px */
+    font-weight: 650;
+    line-height: 1.35;
+  }
+
+  .markdown-content h3 {
+    margin: 0.6em 0 0.3em;
+    font-size: 1.05rem; /* 15px */
+    font-weight: 600;
+  }
+
+  .markdown-content h4,
+  .markdown-content h5,
+  .markdown-content h6 {
+    margin: 0.5em 0 0.25em;
+    font-size: 1rem; /* 14px */
+    font-weight: 600;
+    letter-spacing: normal;
+    text-transform: none;
+    color: inherit;
+  }
+
+  .markdown-content p {
+    margin: 0 0 0.6em;
+  }
+
+  .markdown-content ul,
+  .markdown-content ol {
+    margin: 0.4em 0;
+  }
+
+  .markdown-content li {
+    margin: 0.15em 0;
+  }
+
+  .markdown-content a {
+    color: var(--accent-color);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  .markdown-content pre,
+  .markdown-content code {
+    font-size: 0.85em;
+  }
+
+  tbody tr:hover td {
+    background-color: var(--accent-soft);
+  }
+
+  body {
+    background: var(--bg-body);
+    color: var(--font-color);
+  }
+
+  a {
+    color: var(--accent-color);
+    text-decoration: none;
+  }
+
+  a:hover {
+    color: var(--accent-hover);
+    text-decoration: underline;
+  }
+
+  /* Единое кольцо фокуса вместо размытых теней у каждого компонента */
+  :where(button, a, input, select, textarea, [tabindex]):focus-visible {
+    outline: 2px solid var(--accent-color);
+    outline-offset: 2px;
+    border-radius: 10px;
+  }
+}
+
+/* ─── Полоса прокрутки: нейтральная, проявляется при наведении ───────── */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-color);
+  border: 3px solid transparent;
+  background-clip: content-box;
+  border-radius: 999px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--muted-color);
+}
+
+/* ════════════════════════════════════════════════════════════════════
+   Цветовая гамма — «Графит и сапфир»
+   Акцент выведен из градиента логотипа (#86b6ff → #274c92).
+   Градиент на body убран: фон плоский, глубину даёт волосяная линия.
+   ════════════════════════════════════════════════════════════════════ */
+.light {
+  --bg-body: #f5f6f8;
+  --back-color: #ffffff;
+  --container-color: #f0f2f5;
+  --field-color: #ffffff;
+  --border-color: #d5d9e0;
+  --hairline-color: rgb(17 24 39 / 0.09);
+
+  --font-color: #10141a;
+  --muted-color: #545c6b;
+  --faint-color: #8b93a1;
+
+  --accent-color: #4175c8;
+  --accent-hover: #33599e;
+  --accent-soft: rgb(65 117 200 / 0.1);
+  --on-accent: #ffffff;
+
+  --shadow-color: #34343a;
+  --border-shadow-color: 0 1px 2px rgb(16 24 40 / 0.05);
+  --focus-shadow-color: 0 0 0 3px rgb(65 117 200 / 0.18);
+  --elevation-1: 0 1px 2px rgb(16 24 40 / 0.05);
+  --elevation-2: 0 4px 12px rgb(16 24 40 / 0.08);
+  --elevation-3: 0 12px 32px rgb(16 24 40 / 0.12);
+  --scrollbar-color: #c4c9d2;
+
+  /* Семантические заливки: светлая тема — светлые, но не кислотные тона (S=55%, L — самая
+     светлая точка, где контраст с белым текстом ещё ≥ 4.5:1). Тёмная тема ниже — свои, тёмные. */
+  --gray-color: #e4e7ec;
+  --red-color: #c94e45;
+  --orange-color: #9e6a2e;
+  --yellow-color: #8e7329;
+  --green-color: #278660;
+  --cyan-color: #2a7d92;
+  --blue-color: #4175c8;
+  --purple-color: #855dd0;
+  --pink-color: #c84182;
+
+  /* Мягкие тинты для фонов блоков и подсветки строк */
+  --gray-soft: #f0f2f5;
+  --red-soft: #fbeae8;
+  --orange-soft: #fcefe1;
+  --yellow-soft: #faf3dc;
+  --green-soft: #e4f4ec;
+  --cyan-soft: #e2f2f6;
+  --blue-soft: #e8f0fc;
+  --purple-soft: #efe9fb;
+  --pink-soft: #fbe7f0;
+}
+
+.dark {
+  --bg-body: #0a0c10;
+  --back-color: #13161d;
+  --container-color: #1a1e27;
+  --field-color: #1a1e27;
+  --border-color: #333a47;
+  --hairline-color: rgb(255 255 255 / 0.1);
+
+  --font-color: #e9ebf0;
+  --muted-color: #9ba3b2;
+  --faint-color: #6d7686;
+
+  --accent-color: #3863a8;
+  --accent-hover: #4a78bf;
+  --accent-soft: rgb(56 99 168 / 0.18);
+  --on-accent: #ffffff;
+
+  --shadow-color: #000000;
+  --border-shadow-color: 0 1px 2px rgb(0 0 0 / 0.4);
+  --focus-shadow-color: 0 0 0 3px rgb(56 99 168 / 0.32);
+  --elevation-1: 0 1px 2px rgb(0 0 0 / 0.4);
+  --elevation-2: 0 4px 12px rgb(0 0 0 / 0.45);
+  --elevation-3: 0 12px 32px rgb(0 0 0 / 0.5);
+  --scrollbar-color: #333a47;
+
+  /* Тёмная тема — тёмные, приглушённые тона (S=50%, L — самая тёмная точка, где контраст
+     с белым текстом ещё ≥ 4.5:1 и с --bg-body ещё ≥ 3.2:1), а не светлее светлой темы */
+  --gray-color: #242a35;
+  --red-color: #a84038;
+  --orange-color: #825a2b;
+  --yellow-color: #776128;
+  --green-color: #256f51;
+  --cyan-color: #296a7a;
+  --blue-color: #3863a8;
+  --purple-color: #754bc3;
+  --pink-color: #a8386e;
+
+  --gray-soft: rgb(255 255 255 / 0.06);
+  --red-soft: rgb(168 64 56 / 0.18);
+  --orange-soft: rgb(130 90 43 / 0.18);
+  --yellow-soft: rgb(119 97 40 / 0.18);
+  --green-soft: rgb(37 111 81 / 0.18);
+  --cyan-soft: rgb(41 106 122 / 0.18);
+  --blue-soft: rgb(56 99 168 / 0.18);
+  --purple-soft: rgb(117 75 195 / 0.18);
+  --pink-soft: rgb(168 56 110 / 0.18);
+}
+
+/* ─── Утилиты заливки (без изменений в именах) ───────────────────────── */
+.bg-max {
+  --bg-color: var(--back-color);
+}
+.bg-gray {
+  --bg-color: var(--gray-color);
+}
+.bg-red {
+  --bg-color: var(--red-color);
+}
+.bg-orange {
+  --bg-color: var(--orange-color);
+}
+.bg-yellow {
+  --bg-color: var(--yellow-color);
+}
+.bg-green {
+  --bg-color: var(--green-color);
+}
+.bg-cyan {
+  --bg-color: var(--cyan-color);
+}
+.bg-blue {
+  --bg-color: var(--blue-color);
+}
+.bg-purple {
+  --bg-color: var(--purple-color);
+}
+.bg-pink {
+  --bg-color: var(--pink-color);
+}
+
+/* Мягкие варианты — для карточек, плашек и подсветки, где заливка не должна кричать */
+.bg-red-soft {
+  --bg-color: var(--red-soft);
+}
+.bg-orange-soft {
+  --bg-color: var(--orange-soft);
+}
+.bg-yellow-soft {
+  --bg-color: var(--yellow-soft);
+}
+.bg-green-soft {
+  --bg-color: var(--green-soft);
+}
+.bg-cyan-soft {
+  --bg-color: var(--cyan-soft);
+}
+.bg-blue-soft {
+  --bg-color: var(--blue-soft);
+}
+.bg-purple-soft {
+  --bg-color: var(--purple-soft);
+}
+.bg-pink-soft {
+  --bg-color: var(--pink-soft);
+}
+
+.border-max {
+  --border-color: var(--back-color);
+}
+.border-gray {
+  --border-color: var(--gray-color);
+}
+.border-red {
+  --border-color: var(--red-color);
+}
+.border-orange {
+  --border-color: var(--orange-color);
+}
+.border-yellow {
+  --border-color: var(--yellow-color);
+}
+.border-green {
+  --border-color: var(--green-color);
+}
+.border-cyan {
+  --border-color: var(--cyan-color);
+}
+.border-blue {
+  --border-color: var(--blue-color);
+}
+.border-purple {
+  --border-color: var(--purple-color);
+}
+.border-pink {
+  --border-color: var(--pink-color);
+}
+
+/* Подсказка placeholder */
+@layer base {
+  input::placeholder,
+  textarea::placeholder {
+    color: var(--faint-color);
+    opacity: 1;
+  }
+}
+
+@layer base {
+  hr {
+    margin: 0.5rem 0;
+    border: 0;
+    border-top: 1px solid var(--hairline-color);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.40.0",
+  "version": "1.40.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Oleg-Perevyshin/ElementsUI.git"
@@ -23,7 +23,8 @@
     ".": {
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"
-    }
+    },
+    "./theme.css": "./dist/theme.css"
   },
   "files": [
     "dist"