poe-svelte-ui-lib 1.53.0 → 1.55.0

package/README.md

@@ -57,6 +57,8 @@ 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.*`), только там, где смысл поля не очевиден.
+
 **Предпросмотр темы** — вкладка «Тема» на главной витрины (`src/routes/ThemePreview.svelte`): палитра токенов и состояния, затем все компоненты и виджеты в порядке меню витрины — каждый тип в своём разделе с живыми демо-данными (графики, видео, полёт для PFD и карты), в конце типографика и Markdown; тема переключается кнопкой в шапке витрины. Правьте `theme.css` и смотрите результат там.
 
 Текст в Markdown, таблицы и код переносятся по ширине контейнера — горизонтальной прокрутки быть не должно, только вертикальная. Markdown рендерится с `breaks: true` (как в облаке), поэтому абзац и пункт списка пишутся одной строкой — ручной перенос внутри абзаца превращается в разрыв строки.

package/dist/Switch/README.md

@@ -42,7 +42,7 @@
 | `disabled`           | `boolean`                                  | `false`               | Состояние отключения компонента                                                                                                                                                        |
 | `label`              | `object`                                   | `-`                   | Настройки заголовка и подписей компонента                                                                                                                                              |
 | `label.name`         | `string`                                   | `""`                  | Текст заголовка компонента                                                                                                                                                             |
-| `label.class`        | `string`                                   | `""`                  | CSS-классы для стилизации текста заголовка                                                                                                                                             |
+| `label.class`        | `string`                                   | `""`                  | CSS-классы для стилизации текста заголовка; по умолчанию заголовок по центру над переключателем, `text-left`/`text-right` меняют выравнивание                                          |
 | `label.captionLeft`  | `string`                                   | `""`                  | Левая подпись для горизонтального типа (кликабельна, устанавливает значение 0 без `bitMode`)                                                                                           |
 | `label.captionRight` | `string`                                   | `""`                  | Правая подпись для горизонтального типа (кликабельна, устанавливает значение 1 без `bitMode`)                                                                                          |
 | `hiddenInfo`         | `string`                                   | `""`                  | Текст всплывающей подсказки для режима `checkbox`: отображается при наведении на чекбокс                                                                                               |

package/dist/Switch/Switch.svelte

@@ -60,7 +60,8 @@
 {#if type !== "checkbox"}
   <div class={twMerge(`relative flex w-full flex-col items-center justify-center gap-1.5`, wrapperClass)}>
     {#if label.name}
-      <h5 class={twMerge(`w-full text-[12px] font-semibold text-(--muted-color)`, label.class)}>{label.name}</h5>
+      <!-- Подпись по умолчанию по центру — над переключателем, который тоже по центру; выравнивание из label.class важнее -->
+      <h5 class={twMerge(`w-full text-center text-[12px] font-semibold text-(--muted-color)`, label.class)}>{label.name}</h5>
     {/if}
     <div class="flex w-full {type == 'vertical' ? 'flex-wrap' : ''} items-center justify-around gap-4">
       {#each localOptions as option, index}

package/dist/WidgetDeviceInfo/README.md

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

package/dist/WidgetDeviceInfo/WidgetDeviceInfo.svelte

@@ -14,6 +14,7 @@
   import CpuIcon from "./CpuIcon.svelte"
   import RestartIcon from "./RestartIcon.svelte"
   import WidgetHeader from "../WidgetHeader.svelte"
+  import { hint, hintsSetting } from "../hints"
   import { widgetAccentStyle } from "../widgetAccent"
   import { readPersistedCollapsed, writePersistedCollapsed } from "../widgetCollapse"
 
@@ -29,6 +30,9 @@
     onFactoryReset,
   }: IWidgetDeviceInfoProps = $props()
 
+  /* Подсказки — кнопка «?» в шапке, выбор общий для всех WidgetDeviceInfo */
+  const hints = hintsSetting("WidgetDeviceInfo")
+
   let confirmReset = $state(false)
   const factoryReset = () => {
     confirmReset = false
@@ -93,14 +97,16 @@
   style={accentStyle}
 >
   <!-- Заголовок -->
-  <WidgetHeader icon={CpuIcon} label={label?.name || $T("widget.info.title")} bind:collapsed>
+  <WidgetHeader icon={CpuIcon} label={label?.name || $T("widget.info.title")} bind:collapsed {hints}>
     {#snippet right()}
-      <UI.Button
-        wrapperClass="w-auto"
-        componentClass="bg-transparent px-3"
-        content={{ icon: RestartIcon, name: $T("widget.info.restart") }}
-        onClick={onRestart}
-      />
+      <div use:hint={{ text: $T("widget.info.hint.restart"), enabled: $hints }}>
+        <UI.Button
+          wrapperClass="w-auto"
+          componentClass="bg-transparent px-3"
+          content={{ icon: RestartIcon, name: $T("widget.info.restart") }}
+          onClick={onRestart}
+        />
+      </div>
     {/snippet}
   </WidgetHeader>
 
@@ -109,15 +115,27 @@
       <!-- Только чтение -->
       <div class="flex flex-col gap-2 rounded-[10px] border border-(--hairline-color) bg-(--back-color) p-3">
         <!-- Серийник бывает длинным (напр. 00.00.000-00_0000AC670000B22B00007428:DBC5) — своя строка, чтобы не резался -->
-        <UI.Input label={{ name: $T("widget.info.sn") }} value={info.DevSN} readonly help={{ copyButton: true }} />
+        <div use:hint={{ text: $T("widget.info.hint.sn"), enabled: $hints }}>
+          <UI.Input label={{ name: $T("widget.info.sn") }} value={info.DevSN} readonly help={{ copyButton: true }} />
+        </div>
         <div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
-          <UI.Input label={{ name: $T("widget.info.id") }} value={info.DevID} readonly />
-          <UI.Input label={{ name: $T("widget.info.fw") }} value={info.DevFW} readonly />
-          <UI.Input label={{ name: $T("widget.info.runs") }} value={info.RunCnt} readonly />
+          <div use:hint={{ text: $T("widget.info.hint.id"), enabled: $hints }}>
+            <UI.Input label={{ name: $T("widget.info.id") }} value={info.DevID} readonly />
+          </div>
+          <div use:hint={{ text: $T("widget.info.hint.fw"), enabled: $hints }}>
+            <UI.Input label={{ name: $T("widget.info.fw") }} value={info.DevFW} readonly />
+          </div>
+          <div use:hint={{ text: $T("widget.info.hint.runs"), enabled: $hints }}>
+            <UI.Input label={{ name: $T("widget.info.runs") }} value={info.RunCnt} readonly />
+          </div>
         </div>
         <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
-          <UI.Input label={{ name: $T("widget.info.sta_ip") }} value={info.StaIP} readonly />
-          <UI.Input label={{ name: $T("widget.info.ap_ip") }} value={info.ApIP} readonly />
+          <div use:hint={{ text: $T("widget.info.hint.sta_ip"), enabled: $hints }}>
+            <UI.Input label={{ name: $T("widget.info.sta_ip") }} value={info.StaIP} readonly />
+          </div>
+          <div use:hint={{ text: $T("widget.info.hint.ap_ip"), enabled: $hints }}>
+            <UI.Input label={{ name: $T("widget.info.ap_ip") }} value={info.ApIP} readonly />
+          </div>
         </div>
       </div>
 
@@ -125,10 +143,18 @@
       <div class="flex flex-col gap-3 rounded-[10px] border border-(--hairline-color) bg-(--back-color) p-3">
         <span class="text-[12px] font-semibold text-(--muted-color)">{$T("widget.info.settings")}</span>
         <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
-          <UI.Input label={{ name: $T("widget.info.name") }} bind:value={info.DevName} maxlength={26} />
-          <UI.Input label={{ name: $T("widget.info.host") }} bind:value={info.HostName} maxlength={32} />
-          <UI.Input label={{ name: $T("widget.info.web_user") }} bind:value={info.WebUser} maxlength={16} />
-          <UI.Input type="password" label={{ name: $T("widget.info.web_psw") }} bind:value={info.WebPsw} maxlength={16} help={{ autocomplete: "off" }} />
+          <div use:hint={{ text: $T("widget.info.hint.name"), enabled: $hints }}>
+            <UI.Input label={{ name: $T("widget.info.name") }} bind:value={info.DevName} maxlength={26} />
+          </div>
+          <div use:hint={{ text: $T("widget.info.hint.host"), enabled: $hints }}>
+            <UI.Input label={{ name: $T("widget.info.host") }} bind:value={info.HostName} maxlength={32} />
+          </div>
+          <div use:hint={{ text: $T("widget.info.hint.web_user"), enabled: $hints }}>
+            <UI.Input label={{ name: $T("widget.info.web_user") }} bind:value={info.WebUser} maxlength={16} />
+          </div>
+          <div use:hint={{ text: $T("widget.info.hint.web_psw"), enabled: $hints }}>
+            <UI.Input type="password" label={{ name: $T("widget.info.web_psw") }} bind:value={info.WebPsw} maxlength={16} help={{ autocomplete: "off" }} />
+          </div>
         </div>
       </div>
 

package/dist/WidgetFileSystem/README.md

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

package/dist/WidgetFileSystem/WidgetFileSystem.svelte

@@ -12,6 +12,7 @@
   import StorageIcon from "./StorageIcon.svelte"
   import RefreshIcon from "./RefreshIcon.svelte"
   import WidgetHeader from "../WidgetHeader.svelte"
+  import { hint, hintsSetting } from "../hints"
   import { widgetAccentStyle } from "../widgetAccent"
   import { readPersistedCollapsed, writePersistedCollapsed } from "../widgetCollapse"
 
@@ -29,6 +30,9 @@
     onUpload,
   }: IWidgetFileSystemProps = $props()
 
+  /* Подсказки — кнопка «?» в шапке, выбор общий для всех WidgetFileSystem */
+  const hints = hintsSetting("WidgetFileSystem")
+
   let accentStyle = $derived(widgetAccentStyle(componentClass ?? ""))
 
   /* Сворачивание тела по клику на шапку — как у остальных смарт-виджетов (см. WidgetWiFi.svelte) */
@@ -114,7 +118,7 @@
   style={accentStyle}
 >
   <!-- Заголовок -->
-  <WidgetHeader icon={StorageIcon} label={label?.name || $T("widget.fs.title")} bind:collapsed>
+  <WidgetHeader icon={StorageIcon} label={label?.name || $T("widget.fs.title")} bind:collapsed {hints}>
     {#snippet right()}
       <UI.Button
         wrapperClass="w-auto"
@@ -129,7 +133,10 @@
   {#if !collapsed}
     <div class="flex flex-col gap-4" transition:slide={{ duration: 150 }}>
       <!-- Занятость памяти -->
-      <div class="flex flex-col gap-2 rounded-[10px] border border-(--hairline-color) bg-(--back-color) p-3">
+      <div
+        class="flex flex-col gap-2 rounded-[10px] border border-(--hairline-color) bg-(--back-color) p-3"
+        use:hint={{ text: $T("widget.fs.hint.usage"), enabled: $hints }}
+      >
         <div class="flex items-baseline justify-between gap-2 text-[13px]">
           <span class="font-semibold">{$T("widget.fs.used", { used: formatBytes(used), total: formatBytes(total) })}</span>
           <span class="font-semibold tabular-nums" style="color: {percentColor}">{usedPercent}%</span>
@@ -144,7 +151,7 @@
       </div>
 
       <!-- Файлы -->
-      <div class="flex max-h-72 min-h-0 flex-col">
+      <div class="flex max-h-72 min-h-0 flex-col" use:hint={{ text: $T("widget.fs.hint.files"), enabled: $hints }}>
         {#if rows.length}
           <UI.Table {header} body={rows} outline />
         {:else}
@@ -157,7 +164,9 @@
       <!-- Закачка -->
       {#if onUpload}
         <div class="flex flex-col gap-2 rounded-[10px] border border-(--hairline-color) bg-(--back-color) p-3">
-          <UI.FileAttach label={{ name: $T("widget.fs.upload") }} {accept} disabled={uploading || !!upload} onChange={handleFile} />
+          <div use:hint={{ text: $T("widget.fs.hint.upload"), enabled: $hints }}>
+            <UI.FileAttach label={{ name: $T("widget.fs.upload") }} {accept} disabled={uploading || !!upload} onChange={handleFile} />
+          </div>
           {#if uploading || upload}
             <div class="flex items-center gap-2 text-[12px]" transition:slide={{ duration: 100 }}>
               {#if upload?.Name}

package/dist/WidgetHeader.svelte

@@ -7,28 +7,33 @@
      означало бы двойной отступ и лишнюю высоту. -->
 <script lang="ts">
   import type { Component, Snippet } from "svelte"
+  import type { Writable } from "svelte/store"
   import ArrowIcon from "./libIcons/ArrowIcon.svelte"
+  import { T } from "./locales/i18n"
 
   let {
     icon,
     label,
     collapsed = $bindable(false),
     right,
+    hints,
   }: {
     icon: Component
     label: string
     collapsed?: boolean
     right?: Snippet
+    /* Настройка подсказок этого виджета (hintsSetting) — показывает кнопку «?», переключающую только его подсказки */
+    hints?: Writable<boolean>
   } = $props()
 
   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 flex-1 cursor-pointer items-center gap-2 border-none bg-transparent p-0 text-left"
+    class="flex min-w-0 cursor-pointer items-center gap-2 border-none bg-transparent p-0 text-left"
     onclick={() => (collapsed = !collapsed)}
     aria-expanded={!collapsed}
   >
@@ -43,6 +48,19 @@
       <ArrowIcon />
     </span>
   </button>
+  {#if hints}
+    <button
+      type="button"
+      class="flex size-[22px] shrink-0 cursor-pointer items-center justify-center rounded-full border text-[12px] font-bold transition-colors duration-150
+        {$hints
+        ? 'border-(--accent-color) bg-(--accent-soft) text-(--accent-color)'
+        : 'border-(--hairline-color) bg-transparent text-(--faint-color) hover:text-(--muted-color)'}"
+      title={$hints ? $T("widget.hints.on") : $T("widget.hints.off")}
+      aria-pressed={$hints}
+      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()}

package/dist/WidgetHeader.svelte.d.ts

@@ -1,9 +1,11 @@
 import type { Component, Snippet } from "svelte";
+import type { Writable } from "svelte/store";
 type $$ComponentProps = {
     icon: Component;
     label: string;
     collapsed?: boolean;
     right?: Snippet;
+    hints?: Writable<boolean>;
 };
 declare const WidgetHeader: Component<$$ComponentProps, {}, "collapsed">;
 type WidgetHeader = ReturnType<typeof WidgetHeader>;

package/dist/WidgetMap/README.md

@@ -95,3 +95,7 @@ Telemetry_SendObject(g_telemetry_stream, g_mcfg.DevSN, "Data", dev, sizeof(dev)
 ## Внутреннее устройство
 
 `mapWrapper/` — тонкие Svelte-обёртки над MapLibre GL (`MapLibre`, `Marker`, `Popup`, `Line`, контролы, `CustomControl` для своих элементов поверх карты). MapLibre подгружается с CDN один раз на страницу (несколько карт ждут одну загрузку); без интернета показывается заглушка «Карта не загружена».
+
+### Подсказки
+
+Кнопка «?» в шапке включает и выключает подсказки этого виджета; выбор общий для всех `WidgetMap` в браузере (`hintsSetting("WidgetMap")`, `hints.ts`). Подсказка всплывает при наведении на поле, смысл которого не очевиден, — что это за значение и на что влияет.

package/dist/WidgetMap/WidgetMap.svelte

@@ -10,6 +10,7 @@
   import type { IWidgetMapProps } from "../types"
   import CopiedChip from "../CopiedChip.svelte"
   import WidgetHeader from "../WidgetHeader.svelte"
+  import { hint, hintsSetting } from "../hints"
   import { widgetAccentStyle } from "../widgetAccent"
   import { readPersistedCollapsed, writePersistedCollapsed } from "../widgetCollapse"
   import MapIcon from "./MapIcon.svelte"
@@ -32,6 +33,9 @@
     persistKey,
   }: IWidgetMapProps = $props()
 
+  /* Подсказки — кнопка «?» в шапке, выбор общий для всех WidgetMap */
+  const hints = hintsSetting("WidgetMap")
+
   let accentStyle = $derived(widgetAccentStyle(componentClass ?? ""))
 
   /* Сворачивание тела по клику на шапку — как у остальных смарт-виджетов (см. WidgetWiFi.svelte) */
@@ -177,7 +181,7 @@
   class={twMerge("relative flex w-full flex-col gap-4 rounded-2xl border border-(--hairline-color) bg-(--container-color) p-4", wrapperClass)}
   style={accentStyle}
 >
-  <WidgetHeader icon={MapIcon} label={label?.name || $T("widget.map.title")} bind:collapsed>
+  <WidgetHeader icon={MapIcon} label={label?.name || $T("widget.map.title")} bind:collapsed {hints}>
     {#snippet right()}
       <div class="flex items-center gap-3">
         <UI.Button
@@ -193,7 +197,7 @@
             : freshCount < groupList.length
               ? 'text-(--muted-color)'
               : 'text-(--green-color)'}"
-          title={$T("constructor.props.map.boards")}
+          use:hint={{ text: $T("widget.map.hint.boards"), enabled: $hints }}
         >
           {freshCount} / {groupList.length}
         </span>
@@ -219,7 +223,7 @@
         <!-- Панель оператора поверх карты -->
         <CustomControl position="top-left">
           <div class="flex flex-wrap items-center gap-3 rounded-lg px-2 py-1 text-black">
-            <label class="flex items-center gap-1.5 text-sm font-medium">
+            <label class="flex items-center gap-1.5 text-sm font-medium" use:hint={{ text: $T("widget.map.hint.track"), enabled: $hints }}>
               <input type="checkbox" bind:checked={trackEnabled} />
               {$T("constructor.props.map.track")}
             </label>
@@ -233,7 +237,7 @@
                 </select>
               </div>
             {/if}
-            <div class="flex items-center gap-2">
+            <div class="flex items-center gap-2" use:hint={{ text: $T("widget.map.hint.timeout"), enabled: $hints }}>
               <span class="text-sm font-medium">{$T("constructor.props.map.timeout")}</span>
               <select class="rounded px-2 py-1 text-sm" bind:value={markerTimeout}>
                 {#each timeoutOptions as opt}

package/dist/WidgetPFD/README.md

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

package/dist/WidgetPFD/WidgetPFD.svelte

@@ -13,6 +13,7 @@
   import type { IWidgetPFDProps } from "../types"
   import PlaneIcon from "./PlaneIcon.svelte"
   import WidgetHeader from "../WidgetHeader.svelte"
+  import { hintsSetting } from "../hints"
   import { widgetAccentStyle } from "../widgetAccent"
   import { readPersistedCollapsed, writePersistedCollapsed } from "../widgetCollapse"
 
@@ -244,27 +245,13 @@
   /* Подсказка: элементы прибора и строк помечены data-tip, текст всегда в одном месте — информационная строка внизу горизонта */
   /* Ключ подсказки элемента под курсором; текст берётся из tips — обновляется вместе с данными */
   let tip: string | null = $state(null)
-  /* Галочка «Подсказки» в шапке — выбор оператора, общий для всех PFD в браузере */
-  const TIPS_KEY = "WidgetPFD.tips"
-  let tipsEnabled = $state(true)
+  /* Подсказки включаются кнопкой «?» в шапке — выбор общий для всех PFD в браузере (hints.ts) */
+  const hints = hintsSetting("WidgetPFD")
   $effect(() => {
-    try {
-      tipsEnabled = localStorage.getItem(TIPS_KEY) !== "0"
-    } catch {
-      /* хранилище недоступно — подсказки включены */
-    }
+    if (!$hints) tip = null
   })
-  const setTips = (on: boolean) => {
-    tipsEnabled = on
-    if (!on) tip = null
-    try {
-      localStorage.setItem(TIPS_KEY, on ? "1" : "0")
-    } catch {
-      /* хранилище недоступно — выбор действует до перезагрузки */
-    }
-  }
   const onTip = (e: PointerEvent) => {
-    if (!tipsEnabled) return
+    if (!$hints) return
     const el = (e.target as Element | null)?.closest("[data-tip]")
     tip = el ? (el.getAttribute("data-tip") ?? null) : null
   }
@@ -386,13 +373,9 @@
   class={twMerge("relative flex w-full flex-col gap-4 rounded-2xl border border-(--hairline-color) bg-(--container-color) p-4", wrapperClass)}
   style={accentStyle}
 >
-  <WidgetHeader icon={PlaneIcon} label={label?.name || $T("pfd.title")} bind:collapsed>
+  <WidgetHeader icon={PlaneIcon} label={label?.name || $T("pfd.title")} bind:collapsed {hints}>
     {#snippet right()}
       <div class="flex items-center gap-4">
-        <label class="flex cursor-pointer items-center gap-1.5 text-[12px] font-semibold text-(--muted-color)">
-          <input type="checkbox" class="cursor-pointer accent-(--accent-color)" checked={tipsEnabled} onchange={(e) => setTips(e.currentTarget.checked)} />
-          {$T("pfd.tips")}
-        </label>
         <span class="text-[12px] font-semibold tabular-nums {stale ? 'text-(--red-color)' : 'text-(--muted-color)'}">{fmtAge(age)}</span>
       </div>
     {/snippet}

package/dist/WidgetRGBStrip/README.md

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

package/dist/WidgetRGBStrip/WidgetRGBStrip.svelte

@@ -12,12 +12,16 @@
   import LightIcon from "./LightIcon.svelte"
   import ColorPicker from "./ColorPicker.svelte"
   import WidgetHeader from "../WidgetHeader.svelte"
+  import { hint, hintsSetting } from "../hints"
   import ArrowIcon from "../libIcons/ArrowIcon.svelte"
   import { widgetAccentStyle } from "../widgetAccent"
   import { readPersistedCollapsed, writePersistedCollapsed } from "../widgetCollapse"
 
   let { wrapperClass = "", componentClass = "", label = {}, value, collapsed = $bindable(false), persistKey, onChange, onSave }: IWidgetRGBStripProps = $props()
 
+  /* Подсказки — кнопка «?» в шапке, выбор общий для всех WidgetRGBStrip */
+  const hints = hintsSetting("WidgetRGBStrip")
+
   let accentStyle = $derived(widgetAccentStyle(componentClass ?? ""))
 
   /* Сворачивание тела по клику на шапку — как у остальных смарт-виджетов (см. WidgetWiFi.svelte) */
@@ -84,7 +88,7 @@
   style={accentStyle}
 >
   <!-- Заголовок: образец текущего цвета -->
-  <WidgetHeader icon={LightIcon} label={label?.name || $T("widget.rgb.title")} bind:collapsed>
+  <WidgetHeader icon={LightIcon} label={label?.name || $T("widget.rgb.title")} bind:collapsed {hints}>
     {#snippet right()}
       <span
         class="size-6 rounded-md border border-(--hairline-color)"
@@ -100,28 +104,34 @@
       <div class="flex flex-col gap-3 rounded-[10px] border border-(--hairline-color) bg-(--back-color) p-3">
         <ColorPicker value={color.slice(0, 3)} readonly={!onChange} onChange={(rgb) => sendColor([...rgb, color[3]])} />
         {#if hasWhite}
-          <UI.Slider
-            label={{ name: $T("widget.rgb.white") }}
-            value={color[3]}
-            number={{ minNum: 0, maxNum: 255, step: 1 }}
+          <div use:hint={{ text: $T("widget.rgb.hint.white"), enabled: $hints }}>
+            <UI.Slider
+              label={{ name: $T("widget.rgb.white") }}
+              value={color[3]}
+              number={{ minNum: 0, maxNum: 255, step: 1 }}
+              disabled={!onChange}
+              onUpdate={(w) => sendColor([color[0], color[1], color[2], w as number])}
+            />
+          </div>
+        {/if}
+        <div use:hint={{ text: $T("widget.rgb.hint.effect"), enabled: $hints }}>
+          <UI.Select
+            label={{ name: $T("widget.rgb.effect") }}
+            options={EFFECTS}
+            value={EFFECTS.find((o) => o.value === effectIndex) ?? EFFECTS[0]}
             disabled={!onChange}
-            onUpdate={(w) => sendColor([color[0], color[1], color[2], w as number])}
+            onUpdate={(option) => !Array.isArray(option) && onChange?.("Effect", option.value ?? 0)}
           />
-        {/if}
-        <UI.Select
-          label={{ name: $T("widget.rgb.effect") }}
-          options={EFFECTS}
-          value={EFFECTS.find((o) => o.value === effectIndex) ?? EFFECTS[0]}
-          disabled={!onChange}
-          onUpdate={(option) => !Array.isArray(option) && onChange?.("Effect", option.value ?? 0)}
-        />
-        <UI.Slider
-          label={{ name: $T("widget.rgb.speed") }}
-          value={speed}
-          number={{ minNum: 0, maxNum: 10, step: 1 }}
-          disabled={!onChange || effectIndex === 0}
-          onUpdate={(v) => onChange?.("Speed", v as number)}
-        />
+        </div>
+        <div use:hint={{ text: $T("widget.rgb.hint.speed"), enabled: $hints }}>
+          <UI.Slider
+            label={{ name: $T("widget.rgb.speed") }}
+            value={speed}
+            number={{ minNum: 0, maxNum: 10, step: 1 }}
+            disabled={!onChange || effectIndex === 0}
+            onUpdate={(v) => onChange?.("Speed", v as number)}
+          />
+        </div>
       </div>
 
       <!-- Оборудование: свёрнуто по умолчанию, сохраняется одним пакетом, лента перезапускается -->
@@ -147,27 +157,33 @@
         </button>
         {#if hardwareOpen || isDirty}
           <div class="flex flex-col gap-3" transition:slide={{ duration: 150 }}>
-            <UI.Input
-              label={{ name: $T("widget.rgb.count", { max: maxCount }) }}
-              type="number"
-              number={{ minNum: 1, maxNum: maxCount, step: 1 }}
-              value={hardware.Count}
-              onUpdate={(v) => (hardware.Count = Number(v))}
-            />
-            <UI.Select
-              label={{ name: $T("widget.rgb.model") }}
-              type="buttons"
-              options={MODELS}
-              value={MODELS.find((o) => o.value === hardware.Model) ?? MODELS[0]}
-              onUpdate={(option) => !Array.isArray(option) && (hardware.Model = option.value ?? 0)}
-            />
-            <UI.Select
-              label={{ name: $T("widget.rgb.order") }}
-              type="buttons"
-              options={ORDERS}
-              value={ORDERS.find((o) => o.value === hardware.Order) ?? ORDERS[0]}
-              onUpdate={(option) => !Array.isArray(option) && (hardware.Order = option.value ?? 0)}
-            />
+            <div use:hint={{ text: $T("widget.rgb.hint.count"), enabled: $hints }}>
+              <UI.Input
+                label={{ name: $T("widget.rgb.count", { max: maxCount }) }}
+                type="number"
+                number={{ minNum: 1, maxNum: maxCount, step: 1 }}
+                value={hardware.Count}
+                onUpdate={(v) => (hardware.Count = Number(v))}
+              />
+            </div>
+            <div use:hint={{ text: $T("widget.rgb.hint.model"), enabled: $hints }}>
+              <UI.Select
+                label={{ name: $T("widget.rgb.model") }}
+                type="buttons"
+                options={MODELS}
+                value={MODELS.find((o) => o.value === hardware.Model) ?? MODELS[0]}
+                onUpdate={(option) => !Array.isArray(option) && (hardware.Model = option.value ?? 0)}
+              />
+            </div>
+            <div use:hint={{ text: $T("widget.rgb.hint.order"), enabled: $hints }}>
+              <UI.Select
+                label={{ name: $T("widget.rgb.order") }}
+                type="buttons"
+                options={ORDERS}
+                value={ORDERS.find((o) => o.value === hardware.Order) ?? ORDERS[0]}
+                onUpdate={(option) => !Array.isArray(option) && (hardware.Order = option.value ?? 0)}
+              />
+            </div>
             {#if isDirty}
               <span class="text-[12px] text-(--muted-color)" transition:slide={{ duration: 100 }}>
                 {countValid ? $T("widget.rgb.restart_note") : $T("widget.rgb.count_invalid", { max: maxCount })}

package/dist/WidgetStackInfo/README.md

@@ -17,13 +17,13 @@
 "StackInfo": {
   "Heap": [
     { "Name": "Internal", "Total": 327680,  "Free": 118000,  "MinFree": 92000 },
-    { "Name": "Default",  "Total": 4521984, "Free": 4100000, "MinFree": 4040000 }
+    { "Name": "PSRAM",    "Total": 4194304, "Free": 3980000, "MinFree": 3920000 }
   ],
   "Tasks": [{ "Name": "api_task", "FreeMin": 1240, "Prio": 5, "Core": 1, "State": 2 }]
 }
 ```
 
-Все размеры в байтах. ESP отдаёт две кучи (`Internal` — внутренний DRAM, `Default` — всё, что отдаёт `malloc`, включая PSRAM) и `Core` (-1 — без привязки к ядру); STM — одну кучу `Heap` (heap_4, `configTOTAL_HEAP_SIZE`) и без `Core`. `State` — `eTaskState`: 0 работает, 1 готова, 2 ожидает, 3 приостановлена, 4 удалена.
+Коды куч виджет показывает понятными подписями на языке пользователя — «Встроенная ОЗУ», «Внешняя ОЗУ (PSRAM)», «ОЗУ» (`Heap` у STM) — с подсказкой при наведении, что это за память и чем опасна нехватка; неизвестный код — как пришёл. Все размеры в байтах. ESP отдаёт непересекающиеся кучи `Internal` (встроенная ОЗУ) и `PSRAM` (внешняя, только если есть на устройстве) и `Core` (-1 — без привязки к ядру); STM — одну кучу `Heap` (heap_4, `configTOTAL_HEAP_SIZE`) и без `Core`. `State` — `eTaskState`: 0 работает, 1 готова, 2 ожидает, 3 приостановлена, 4 удалена.
 
 ## Ключи
 
@@ -81,3 +81,7 @@
 
 - Порог запаса стека: меньше порога — красным, меньше удвоенного — оранжевым
 - Автоопрос: выкл / 1 / 5 / 10 с; мастер-цвет
+
+### Подсказки
+
+Кнопка «?» в шапке включает и выключает подсказки этого виджета; выбор общий для всех `WidgetStackInfo` в браузере (`hintsSetting("WidgetStackInfo")`, `hints.ts`). Подсказка всплывает при наведении на поле, смысл которого не очевиден, — что это за значение и на что влияет.