poe-svelte-ui-lib 1.55.0 → 1.57.0

package/README.md

@@ -57,7 +57,7 @@ npm install poe-svelte-ui-lib
 
 **Поверхности — четыре ступени, заметные в обеих темах:** фон страницы `--bg-body` → панель `--back-color` → блок внутри панели `--container-color` → поле `--field-color` (в тёмной теме поле темнее блока — «утоплено»). Готовые рецепты — классы `ui-panel` (блок прямо на фоне страницы: карточка, шапка раздела, холст, область чата — заливка панели, волосяная рамка, лёгкая тень) и `ui-inset` (блок внутри панели: группа полей, шапка карточки, подложка сообщения). Отступы и скругление задаёт страница классами Tailwind. Панели не делаются полупрозрачными (`bg-(--back-color)/50` сливается с фоном): выпадающие меню и всплывающие блоки — `ui-panel` с тенью `--elevation-3`, свои сообщения в чатах — `--accent-soft`, чужие — `--container-color`.
 
-**Подсказки смарт-виджетов** — `hints.ts`: у каждого виджета своя кнопка «?» в шапке (`WidgetHeader` с пропом `hints`), выбор запоминается в браузере для виджетов этого типа (`hintsSetting("WidgetPFD")`, ключ `localStorage` `Hints.<тип>`), глобального переключателя нет. Элемент получает подсказку действием `use:hint={{ text, enabled: $hints }}` — всплывающее окно в стиле темы над элементом; тексты — в словаре библиотеки (`widget.*.hint.*`), только там, где смысл поля не очевиден.
+**Подсказки смарт-виджетов** — `hints.ts`: у каждого виджета своя кнопка «?» в правом краю шапки (`WidgetHeader` с пропом `hints`), по умолчанию подсказки выключены, выбор оператора запоминается в браузере для виджетов этого типа (`hintsSetting("WidgetPFD")`, ключ `localStorage` `WidgetHints.<тип>`, пишется только по нажатию «?»), глобального переключателя нет. Элемент получает подсказку действием `use:hint={{ text, enabled: $hints }}` — всплывающее окно в стиле темы над элементом; тексты — в словаре библиотеки (`widget.*.hint.*`), только там, где смысл поля не очевиден.
 
 **Предпросмотр темы** — вкладка «Тема» на главной витрины (`src/routes/ThemePreview.svelte`): палитра токенов и состояния, затем все компоненты и виджеты в порядке меню витрины — каждый тип в своём разделе с живыми демо-данными (графики, видео, полёт для PFD и карты), в конце типографика и Markdown; тема переключается кнопкой в шапке витрины. Правьте `theme.css` и смотрите результат там.
 

package/dist/Table/README.md

@@ -21,7 +21,7 @@
 
 ### Шапка
 
-- Фон шапки — токен `--table-header-color`, по умолчанию `--container-color`. Внутри смарт-виджета он равен мягкому оттенку мастер-цвета (`widgetAccentStyle`), поэтому шапка перекрашивается вместе с виджетом.
+- Фон шапки — токен `--table-header-color`, по умолчанию мягкий акцент `--accent-soft`, текст шапки — в тон акценту. Внутри смарт-виджета он равен мягкому оттенку мастер-цвета (`widgetAccentStyle`), поэтому шапка перекрашивается вместе с виджетом.
 - Когда у тела появляется полоса прокрутки, шапка сдвигается ровно на её фактическую ширину (`offsetWidth − clientWidth`, пересчёт при изменении строк и размеров) — столбцы шапки и строк совпадают. Для полос поверх содержимого (macOS) сдвиг 0.
 
 ### Адаптивность

package/dist/Table/Table.svelte

@@ -259,7 +259,7 @@
   <div class="relative flex h-full w-full flex-col overflow-hidden rounded-[14px] border border-(--hairline-color) bg-(--back-color)">
     <!-- Table Header -->
     <div
-      class="grid border-b border-(--hairline-color) bg-[var(--table-header-color,var(--container-color))] text-[11px] font-bold tracking-[0.06em] text-(--muted-color) uppercase"
+      class="grid border-b border-(--hairline-color) bg-[var(--table-header-color,var(--accent-soft))] text-[11px] font-bold tracking-[0.06em] text-[color-mix(in_srgb,var(--accent-color)_60%,var(--font-color))] uppercase"
       style={`grid-template-columns: ${gridTemplate}; padding-right: ${scrollbarWidth}px;`}
     >
       {#each header as column, index (column)}

package/dist/WidgetDeviceInfo/README.md

@@ -109,4 +109,4 @@
 
 ### Подсказки
 
-Кнопка «?» в шапке включает и выключает подсказки этого виджета; выбор общий для всех `WidgetDeviceInfo` в браузере (`hintsSetting("WidgetDeviceInfo")`, `hints.ts`). Подсказка всплывает при наведении на поле, смысл которого не очевиден, — что это за значение и на что влияет.
+Кнопка «?» в правом краю шапки включает и выключает подсказки этого виджета (по умолчанию выключены); выбор общий для всех `WidgetDeviceInfo` в браузере (`hintsSetting("WidgetDeviceInfo")`, `hints.ts`). Подсказка всплывает при наведении на поле, смысл которого не очевиден, — что это за значение и на что влияет.

package/dist/WidgetFileSystem/README.md

@@ -118,4 +118,4 @@
 
 ### Подсказки
 
-Кнопка «?» в шапке включает и выключает подсказки этого виджета; выбор общий для всех `WidgetFileSystem` в браузере (`hintsSetting("WidgetFileSystem")`, `hints.ts`). Подсказка всплывает при наведении на поле, смысл которого не очевиден, — что это за значение и на что влияет.
+Кнопка «?» в правом краю шапки включает и выключает подсказки этого виджета (по умолчанию выключены); выбор общий для всех `WidgetFileSystem` в браузере (`hintsSetting("WidgetFileSystem")`, `hints.ts`). Подсказка всплывает при наведении на поле, смысл которого не очевиден, — что это за значение и на что влияет.

package/dist/WidgetHeader.svelte

@@ -29,11 +29,11 @@
   const Icon = $derived(icon)
 </script>
 
-<!-- Фиксированная высота 32 px без переноса — свёрнутые виджеты одной высоты при любом содержимом справа; «?» — сразу за заголовком, видна и в узком виджете -->
+<!-- Фиксированная высота 32 px без переноса — свёрнутые виджеты одной высоты при любом содержимом справа; «?» — в правом краю, после содержимого шапки -->
 <div class="flex h-[32px] items-center justify-between gap-3">
   <button
     type="button"
-    class="flex min-w-0 cursor-pointer items-center gap-2 border-none bg-transparent p-0 text-left"
+    class="flex min-w-0 flex-1 cursor-pointer items-center gap-2 border-none bg-transparent p-0 text-left"
     onclick={() => (collapsed = !collapsed)}
     aria-expanded={!collapsed}
   >
@@ -48,6 +48,11 @@
       <ArrowIcon />
     </span>
   </button>
+  {#if right}
+    <div class="flex min-w-0 shrink-0 items-center justify-end">
+      {@render right()}
+    </div>
+  {/if}
   {#if hints}
     <button
       type="button"
@@ -60,10 +65,4 @@
       onclick={() => hints.update((on) => !on)}>?</button
     >
   {/if}
-  <div class="flex-1"></div>
-  {#if right}
-    <div class="flex min-w-0 shrink-0 items-center justify-end">
-      {@render right()}
-    </div>
-  {/if}
 </div>

package/dist/WidgetMap/README.md

@@ -98,4 +98,4 @@ Telemetry_SendObject(g_telemetry_stream, g_mcfg.DevSN, "Data", dev, sizeof(dev)
 
 ### Подсказки
 
-Кнопка «?» в шапке включает и выключает подсказки этого виджета; выбор общий для всех `WidgetMap` в браузере (`hintsSetting("WidgetMap")`, `hints.ts`). Подсказка всплывает при наведении на поле, смысл которого не очевиден, — что это за значение и на что влияет.
+Кнопка «?» в правом краю шапки включает и выключает подсказки этого виджета (по умолчанию выключены); выбор общий для всех `WidgetMap` в браузере (`hintsSetting("WidgetMap")`, `hints.ts`). Подсказка всплывает при наведении на поле, смысл которого не очевиден, — что это за значение и на что влияет.

package/dist/WidgetPFD/README.md

@@ -70,7 +70,7 @@
 - **Авиагоризонт** — небо и земля по крену и тангажу, лестница тангажа через 5°, дуга крена (10/20/30/45/60°), символ самолёта. Ориентация сглаживается между пакетами (Tween 120 мс).
 - **Лента скорости** (слева, путевая над землёй) и **лента высоты** (справа, над точкой взлёта) с вариометром у края, **лента курса** (снизу): розовый ▲ — трек (куда аппарат реально движется, по `Vx`/`Vy`), зелёный ● — направление на точку взлёта.
 - **Углы под лентами** — воздушная скорость (относительно воздуха, отличается от путевой на ветер) и вертикальная скорость (+ набор зелёным, − снижение оранжевым).
-- **Подсказки** — наведите курсор на любой элемент прибора, строки состояния или значений: расшифровка появляется в информационной строке внизу горизонта: первая строка — величина, единица и текущее значение (обновляется, пока курсор стоит на месте), ниже по строке — что означают знаки, цвета и пороги. Элемент помечен `data-tip` с ключом, тексты собраны в `tips` в скрипте виджета, поэтому её не обрезают края и прокрутка. Без наведения в той же строке — последнее сообщение автопилота (10 с), наведение на неё показывает историю. Включаются и выключаются кнопкой «?» в шапке; выбор общий для всех PFD в браузере (`hintsSetting("WidgetPFD")` из `hints.ts`, ключ `localStorage` `Hints.WidgetPFD`; прежний выбор `WidgetPFD.tips` переносится).
+- **Подсказки** — наведите курсор на любой элемент прибора, строки состояния или значений: расшифровка появляется в информационной строке внизу горизонта: первая строка — величина, единица и текущее значение (обновляется, пока курсор стоит на месте), ниже по строке — что означают знаки, цвета и пороги. Элемент помечен `data-tip` с ключом, тексты собраны в `tips` в скрипте виджета, поэтому её не обрезают края и прокрутка. Без наведения в той же строке — последнее сообщение автопилота (10 с), наведение на неё показывает историю. Включаются и выключаются кнопкой «?» в шапке; выбор общий для всех PFD в браузере (`hintsSetting("WidgetPFD")` из `hints.ts`, ключ `localStorage` `WidgetHints.WidgetPFD`, по умолчанию выключены; прежний выбор `WidgetPFD.tips` переносится).
 - **Под прибором** — группы «Маршрут» (точка, расстояние, боковое отклонение), «Дом» (расстояние и направление), «Трек», «Позиция» (координаты, MSL), «Воздух» (давление, температура); каждая величина показана один раз.
 - **Метки целей** (бирюзовые) — целевая скорость и высота текущей точки на лентах, курс на точку ◆ на ленте курса; цель за пределами ленты прижимается к краю.
 - **Сообщения автопилота** (`STATUSTEXT`) — в информационной строке внизу горизонта на 10 с, цвет по важности; история последних пяти — при наведении на строку.

package/dist/WidgetRGBStrip/README.md

@@ -81,4 +81,4 @@
 
 ### Подсказки
 
-Кнопка «?» в шапке включает и выключает подсказки этого виджета; выбор общий для всех `WidgetRGBStrip` в браузере (`hintsSetting("WidgetRGBStrip")`, `hints.ts`). Подсказка всплывает при наведении на поле, смысл которого не очевиден, — что это за значение и на что влияет.
+Кнопка «?» в правом краю шапки включает и выключает подсказки этого виджета (по умолчанию выключены); выбор общий для всех `WidgetRGBStrip` в браузере (`hintsSetting("WidgetRGBStrip")`, `hints.ts`). Подсказка всплывает при наведении на поле, смысл которого не очевиден, — что это за значение и на что влияет.

package/dist/WidgetStackInfo/README.md

@@ -84,4 +84,4 @@
 
 ### Подсказки
 
-Кнопка «?» в шапке включает и выключает подсказки этого виджета; выбор общий для всех `WidgetStackInfo` в браузере (`hintsSetting("WidgetStackInfo")`, `hints.ts`). Подсказка всплывает при наведении на поле, смысл которого не очевиден, — что это за значение и на что влияет.
+Кнопка «?» в правом краю шапки включает и выключает подсказки этого виджета (по умолчанию выключены); выбор общий для всех `WidgetStackInfo` в браузере (`hintsSetting("WidgetStackInfo")`, `hints.ts`). Подсказка всплывает при наведении на поле, смысл которого не очевиден, — что это за значение и на что влияет.

package/dist/WidgetWiFi/README.md

@@ -100,4 +100,4 @@
 
 ### Подсказки
 
-Кнопка «?» в шапке включает и выключает подсказки этого виджета; выбор общий для всех `WidgetWiFi` в браузере (`hintsSetting("WidgetWiFi")`, `hints.ts`). Подсказка всплывает при наведении на поле, смысл которого не очевиден, — что это за значение и на что влияет.
+Кнопка «?» в правом краю шапки включает и выключает подсказки этого виджета (по умолчанию выключены); выбор общий для всех `WidgetWiFi` в браузере (`hintsSetting("WidgetWiFi")`, `hints.ts`). Подсказка всплывает при наведении на поле, смысл которого не очевиден, — что это за значение и на что влияет.

package/dist/WidgetWiFi/WidgetWiFi.svelte

@@ -73,10 +73,10 @@
      устройство и режим на нём меняется. STA+AP не предупреждаем: STA остаётся активным. */
   let showAPWarning = $state(false)
 
-  const IP_MODE_OPTIONS: IOption<number>[] = [
+  let IP_MODE_OPTIONS: IOption<number>[] = $derived([
     { id: "dhcp", name: "DHCP", value: 0 },
-    { id: "static", name: "Static", value: 1 },
-  ]
+    { id: "static", name: $T("widget.wifi.static"), value: 1 },
+  ])
   let selectedIPMode = $derived(IP_MODE_OPTIONS.find((o) => o.value === cfg.StaticIP) ?? IP_MODE_OPTIONS[0])
 
   const IP_REGEXP = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/

package/dist/hints.js

@@ -6,23 +6,30 @@ import { writable } from "svelte/store";
 /* Прежние ключи хранения — выбор оператора переносится */
 const LEGACY_KEYS = { WidgetPFD: "WidgetPFD.tips" };
 const settings = new Map();
-/* Настройка подсказок виджета: включены по умолчанию, одна на тип виджета */
+/* Настройка подсказок виджета: выключены по умолчанию, одна на тип виджета; в браузер пишется только выбор оператора (нажатие «?»),
+   ключ WidgetHints.<тип> — прежние Hints.<тип> записывались автоматически при первом показе и выбором не являются, удаляются */
 export const hintsSetting = (widget) => {
     const cached = settings.get(widget);
     if (cached)
         return cached;
-    const storageKey = `Hints.${widget}`;
-    let initial = true;
+    const storageKey = `WidgetHints.${widget}`;
+    let initial = false;
     try {
-        const saved = typeof localStorage === "undefined" ? null : (localStorage.getItem(storageKey) ?? localStorage.getItem(LEGACY_KEYS[widget] ?? ""));
-        if (saved !== null)
-            initial = saved !== "0";
+        if (typeof localStorage !== "undefined") {
+            localStorage.removeItem(`Hints.${widget}`);
+            const saved = localStorage.getItem(storageKey) ?? localStorage.getItem(LEGACY_KEYS[widget] ?? "");
+            if (saved !== null)
+                initial = saved === "1";
+        }
     }
     catch {
-        /* хранилище недоступно — подсказки включены */
+        /* хранилище недоступно — подсказки выключены */
     }
     const store = writable(initial);
+    let first = true;
     store.subscribe((on) => {
+        if (first)
+            return void (first = false);
         if (!on)
             hideHint();
         try {

package/dist/locales/translations.js

@@ -548,6 +548,7 @@ const translations = {
         en: 'Auto polling — how often to request data from the device; "Refresh" — request now',
         zh: "自动轮询——向设备请求数据的频率；“刷新”——立即请求",
     },
+    "widget.wifi.static": { ru: "Статический", en: "Static", zh: "静态" },
     "widget.wifi.hint.mode": {
         ru: "Режим Wi-Fi: клиент — устройство подключается к роутеру, точка — создаёт свою сеть, оба — одновременно; выключено — Wi-Fi не работает",
         en: "Wi-Fi mode: client — the device joins a router, access point — creates its own network, both — at once; off — Wi-Fi is disabled",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.55.0",
+  "version": "1.57.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Oleg-Perevyshin/ElementsUI.git"