poe-svelte-ui-lib 1.91.0 → 1.93.0

package/README.md

@@ -70,11 +70,11 @@ npm install poe-svelte-ui-lib
 
 У каждого компонента есть парный `<Компонент>Props.svelte`. Это панель свойств для конструктора DevCloud. Пропсы у всех панелей одинаковые:
 
-| Пропс | Что это |
-|---|---|
-| `component` | Компонент интерфейса и его свойства |
-| `onPropertyChange` | Сообщает об изменении свойств, имени, доступа или события |
-| `forConstructor` | `true` - полная панель конструктора, `false` - упрощённая для редактирования |
+| Пропс              | Что это                                                                      |
+| ------------------ | ---------------------------------------------------------------------------- |
+| `component`        | Компонент интерфейса и его свойства                                          |
+| `onPropertyChange` | Сообщает об изменении свойств, имени, доступа или события                    |
+| `forConstructor`   | `true` - полная панель конструктора, `false` - упрощённая для редактирования |
 
 ## Протоколы
 
@@ -102,6 +102,19 @@ npm install poe-svelte-ui-lib
 
 Поверхности идут в четыре ступени: фон страницы `--bg-body`, панель `--back-color`, блок внутри панели `--container-color`, поле ввода `--field-color`. Для частых случаев есть готовые классы. `ui-panel` для блока прямо на фоне страницы, `ui-inset` для блока внутри панели.
 
+Текст идёт в три ступени: основной `--font-color`, вторичный `--muted-color`, подсказки `--faint-color`. Все три проходят WCAG AA (не ниже 4,5:1) на любом фоне темы. Текст не делают полупрозрачным (`opacity`), для вторичного текста берут `--muted-color`. Мельче 11px подписи не делают.
+
+Цвета ролей взяты у Apple: красный, оранжевый, жёлтый, зелёный, голубой, синий, фиолетовый, розовый и серый. У каждого цвета четыре варианта:
+
+- `--*-color` - заливка. Текст на ней белый, а на оранжевой и жёлтой тёмный (`--on-orange`, `--on-yellow`). Компоненты берут его из `--on-accent`, классы `bg-orange` и `bg-yellow` подставляют его сами;
+- `--*-text` - цветной текст;
+- `--*-soft` - мягкий фон блока или строки;
+- `--*-mark` - чистый цвет Apple для полос, точек и индикаторов. Для текста он не годится, жёлтый и голубой на белом не читаются.
+
+Акцентный цвет `--accent-color` - это синий Apple.
+
+Цветной текст пишут через `--red-text`, `--green-text`, `--orange-text` и так далее (классы `text-(--red-text)`), а не через `--red-color`. Заливки `--*-color` как текст плохо читаются: в тёмной теме они тёмные, а жёлтая и оранжевая слишком светлые на белом.
+
 Панели не делают полупрозрачными, на фоне они теряются. Выпадающие меню делают через `ui-panel` с тенью `--elevation-3`.
 
 Стили тегов в приложении пишите только внутри `@layer base`. Правило вне слоя сильнее утилит Tailwind, и подписи в компонентах станут крупнее, чем задумано.
@@ -148,13 +161,13 @@ export const T = createTranslator(translations)
 
 **Короткое**, по кнопке (i). Лежит в словаре под ключом `component.info.<Тип>`. Его показывают витрина и конструктор DevCloud. Разделы идут в таком порядке, ненужные пропускаются:
 
-| Раздел | Что писать |
-|---|---|
-| Назначение | Одна-две фразы: что это и когда применять |
+| Раздел       | Что писать                                                                      |
+| ------------ | ------------------------------------------------------------------------------- |
+| Назначение   | Одна-две фразы: что это и когда применять                                       |
 | Пакет данных | Откуда данные, каким пакетом и как часто их слать, что компонент отправляет сам |
-| Ключи | По пункту на ключ: тип, единицы, смысл |
-| Особенности | Поведение, ограничения, советы |
-| Настройки | Что меняется в панели свойств |
+| Ключи        | По пункту на ключ: тип, единицы, смысл                                          |
+| Особенности  | Поведение, ограничения, советы                                                  |
+| Настройки    | Что меняется в панели свойств                                                   |
 
 **Подробное**, `src/lib/<Компонент>/README.md`. Оно открывается на вкладке «Инфо» витрины. Начало повторяет короткое описание и не должно ему противоречить. Дальше идут пропсы, примеры, панель свойств и внутреннее устройство.
 

package/dist/Accordion/Accordion.svelte

@@ -29,15 +29,17 @@
   <div class="overflow-hidden rounded-[14px] border border-(--hairline-color) bg-(--back-color)">
     <!-- Фон заголовка - мягкий оттенок мастер-цвета (светлый в светлой теме, тёмный в тёмной), текст - мастер-цвет с цветом шрифта 60/40, раскрытое содержимое остаётся на чистом фоне (--back-color). -->
     <!-- Заголовок: кнопка сворачивания на всю ширину и необязательные кнопки справа (actions) - вне неё, чтобы не сворачивать блок -->
-    <div class="flex w-full items-center bg-(--accent-soft)">
+    <div
+      class="flex w-full items-center bg-(--accent-soft) transition-colors duration-150 hover:bg-[color-mix(in_srgb,var(--accent-color)_12%,var(--accent-soft))]"
+    >
       <button
-        class="flex min-w-0 flex-1 cursor-pointer items-center justify-between gap-3 px-4 py-3 text-left text-[color-mix(in_srgb,var(--accent-color)_60%,var(--font-color))] transition-colors duration-150 hover:bg-[color-mix(in_srgb,var(--accent-color)_12%,var(--accent-soft))]"
+        class="flex min-w-0 flex-1 cursor-pointer items-center justify-between gap-3 px-4 py-3 text-left text-[color-mix(in_srgb,var(--accent-color)_35%,var(--font-color))]"
         onclick={toggle}
       >
         <div class="flex min-w-0 flex-1 items-center gap-3">
           {#if label?.icon}
             <span
-              class="flex h-[18px] w-[18px] shrink-0 items-center justify-center text-[color-mix(in_srgb,var(--accent-color)_60%,var(--font-color))] [&_svg]:h-full [&_svg]:w-full"
+              class="flex h-[18px] w-[18px] shrink-0 items-center justify-center text-[color-mix(in_srgb,var(--accent-color)_35%,var(--font-color))] [&_svg]:h-full [&_svg]:w-full"
             >
               {#if typeof label?.icon === "string"}
                 {@html label.icon}
@@ -52,7 +54,7 @@
 
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          class="h-[14px] w-[14px] shrink-0 text-[color-mix(in_srgb,var(--accent-color)_60%,var(--font-color))] transition-transform duration-200"
+          class="h-[14px] w-[14px] shrink-0 text-[color-mix(in_srgb,var(--accent-color)_35%,var(--font-color))] transition-transform duration-200"
           style="transform: rotate({isOpen ? 180 : 0}deg)"
           viewBox="0 0 24 24"
         >

package/dist/Button/Button.svelte

@@ -126,7 +126,7 @@
     {#if content.name?.trim()}
       <span class="truncate">{content.name}</span>
       {#if keyBind.key && keyBind.showHint}
-        <span class="ml-1 text-[11px] font-medium tabular-nums opacity-60">
+        <span class="ml-1 text-[11px] font-medium tabular-nums opacity-80">
           {keyBind.ctrlKey ? "Ctrl+" : ""}{keyBind.shiftKey ? "Shift+" : ""}{keyBind.altKey ? "Alt+" : ""}{keyBind.key}
         </span>
       {/if}

package/dist/CopiedChip.svelte

@@ -8,7 +8,7 @@
 
 {#if show}
   <span
-    class="{className} absolute flex items-center gap-1 rounded-lg bg-(--green-soft) px-2 py-1 text-[11px] font-bold whitespace-nowrap text-(--green-color)"
+    class="{className} absolute flex items-center gap-1 rounded-lg bg-(--green-soft) px-2 py-1 text-[11px] font-bold whitespace-nowrap text-(--green-text)"
     transition:fade={{ duration: 150 }}
   >
     {$T("ui.copied")}

package/dist/Graph/Graph.svelte

@@ -312,7 +312,7 @@
     const { padding, graphWidth, graphHeight, minX, timeSpan, yMin, yMax, getX, getY } = computeGeometry()
 
     /* Сетка в стиле PeriodChart: пунктир цветом --faint-color темы, подписи тем же цветом без прозрачности */
-    const gridColor = getComputedStyle(canvas).getPropertyValue("--faint-color").trim() || "#8b93a1"
+    const gridColor = getComputedStyle(canvas).getPropertyValue("--faint-color").trim() || "#5f6774"
     ctx.strokeStyle = gridColor
     ctx.fillStyle = gridColor
     ctx.lineWidth = 1

package/dist/Input/Input.svelte

@@ -245,6 +245,6 @@
 
   {#if help.regExp && !isValid}
     <!-- Текст ошибки в потоке под полем и только когда поле невалидно: место заранее не резервируется, на соседей не наезжает -->
-    <span class="block text-[12px] font-semibold text-(--red-color)">{$T("ui.invalid_format")}</span>
+    <span class="block text-[12px] font-semibold text-(--red-text)">{$T("ui.invalid_format")}</span>
   {/if}
 </div>

package/dist/Modal.README.md

@@ -7,6 +7,7 @@
 ## Особенности
 
 - Подложка затемняет страницу на 40% и размывает её.
+- Окно не выше 90% экрана. Длинное содержимое прокручивается внутри, шапка с крестиком остаётся на месте.
 - Escape и клик мимо окна закрывают только верхнее окно из открытых.
 - Выпадающие списки `Select` внутри окна вынесены в `body`. Клик по ним не считается кликом мимо окна.
 - Содержимое передаётся сниппетом `main`, обычные дочерние элементы не подойдут. Подвал `footer` необязателен.
@@ -14,16 +15,16 @@
 
 ## Пропсы
 
-| Название | Тип | По умолчанию | Описание |
-|---|---|---|---|
-| `isOpen` | `boolean` | `false` | Открыто ли окно. Можно связать через `bind:isOpen` |
-| `title` | `string` | | Заголовок |
-| `width` | `string` | `""` | Ширина, например `"600px"`. По умолчанию из `wrapperClass` |
-| `wrapperClass` | `string` | `""` | Классы окна |
-| `mainClass` | `string` | `""` | Классы области содержимого |
-| `main` | `Snippet` | обязателен | Содержимое |
-| `footer` | `Snippet` | | Подвал, обычно кнопки |
-| `onCancel` | `() => void` | закрыть окно | Окно закрывают крестиком, кликом мимо или Escape |
+| Название       | Тип          | По умолчанию | Описание                                                   |
+| -------------- | ------------ | ------------ | ---------------------------------------------------------- |
+| `isOpen`       | `boolean`    | `false`      | Открыто ли окно. Можно связать через `bind:isOpen`         |
+| `title`        | `string`     |              | Заголовок                                                  |
+| `width`        | `string`     | `""`         | Ширина, например `"600px"`. По умолчанию из `wrapperClass` |
+| `wrapperClass` | `string`     | `""`         | Классы окна                                                |
+| `mainClass`    | `string`     | `""`         | Классы области содержимого                                 |
+| `main`         | `Snippet`    | обязателен   | Содержимое                                                 |
+| `footer`       | `Snippet`    |              | Подвал, обычно кнопки                                      |
+| `onCancel`     | `() => void` | закрыть окно | Окно закрывают крестиком, кликом мимо или Escape           |
 
 ## Пример
 
@@ -52,7 +53,7 @@
 
 ```ts
 ModalStack.subscribe // список id в порядке открытия
-ModalStack.open(id)  // добавить в конец
+ModalStack.open(id) // добавить в конец
 ModalStack.close(id) // убрать
 ```
 

package/dist/Modal.svelte

@@ -82,7 +82,7 @@
     <div
       data-modal
       class={twMerge(
-        "flex w-300 flex-col overflow-hidden rounded-[20px] border border-(--hairline-color) bg-(--back-color) shadow-(--elevation-3)",
+        "flex max-h-[90vh] w-300 flex-col overflow-hidden rounded-[20px] border border-(--hairline-color) bg-(--back-color) shadow-(--elevation-3)",
         wrapperClass,
       )}
       style="width: {width}; z-index: {zIndex};"

package/dist/PeriodChart/PeriodChart.svelte

@@ -110,7 +110,7 @@
         <!-- Шкала Y: подписи нулевой высоты, центр каждой ровно на своей линии сетки -->
         <div class="flex h-40 shrink-0 flex-col justify-between">
           {#each axis.ticks as tick}
-            <div class="flex h-0 items-center justify-end text-[10px] font-medium text-(--faint-color) tabular-nums">
+            <div class="flex h-0 items-center justify-end text-[11px] font-medium text-(--faint-color) tabular-nums">
               {formatTick(tick)}
             </div>
           {/each}
@@ -152,7 +152,7 @@
 
           <div class="flex w-full gap-1">
             {#each values as _, i}
-              <div class="flex-1 truncate text-center text-[10px] font-bold text-(--faint-color)">
+              <div class="flex-1 truncate text-center text-[11px] font-bold text-(--faint-color)">
                 {i % labelStep === 0 ? barLabel(i) : ""}
               </div>
             {/each}

package/dist/Table/Table.svelte

@@ -263,7 +263,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(--accent-soft))] text-[11px] font-bold tracking-[0.06em] text-[color-mix(in_srgb,var(--accent-color)_60%,var(--font-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)_35%,var(--font-color))] uppercase"
       style={`grid-template-columns: ${gridTemplate}; padding-right: ${scrollbarWidth}px;`}
     >
       {#each header as column, index (column)}
@@ -294,7 +294,7 @@
       {#if dataBuffer.clearButton}
         <div class="flex items-center justify-center tracking-normal normal-case">
           <Button
-            componentClass={twMerge("size-7 p-1.5 text-(--muted-color) hover:text-(--red-color)", dataBuffer.clearClass)}
+            componentClass={twMerge("size-7 p-1.5 text-(--muted-color) hover:text-(--red-text)", dataBuffer.clearClass)}
             content={{ icon: ButtonClear, info: { text: $T("common.table.clear"), side: "left" } }}
             onClick={clearBuffer}
           />
@@ -380,7 +380,7 @@
                           {#if isDropdownOpen?.x === j && isDropdownOpen.y === i && isDropdownOpen.index === index}
                             {@const cords = document.getElementById(`select${i}-${j}-${index}`)?.getBoundingClientRect()}
                             <div
-                              class="fixed z-50 overflow-hidden rounded-[10px] border border-(--hairline-color) bg-(--back-color) p-1 shadow-(--elevation-2)"
+                              class="fixed z-50 max-h-[40vh] overflow-y-auto rounded-[10px] border border-(--hairline-color) bg-(--back-color) p-1 shadow-(--elevation-2)"
                               style="top: calc({cords?.bottom}px + 4px); left: {cords?.left}px; width: {cords?.width}px;"
                               transition:slide={{ duration: selectSlideDuration }}
                             >

package/dist/WidgetAccentPicker.svelte

@@ -14,13 +14,16 @@
     onUpdate: (value: string) => void
     wrapperClass?: string
   } = $props()
+
+  /* bg-max не показываем: без выбора виджет и так синий, это цвет по умолчанию */
+  const options = $derived($optionsStore.COLOR_OPTIONS.filter((o) => o.value !== "bg-max"))
 </script>
 
 <Select
   {wrapperClass}
   label={{ name: $T("ui.accent") }}
   type="buttons"
-  options={$optionsStore.COLOR_OPTIONS}
-  value={$optionsStore.COLOR_OPTIONS.find((o) => o.value === value) ?? $optionsStore.COLOR_OPTIONS[0]}
+  {options}
+  value={options.find((o) => o.value === value) ?? options.find((o) => o.value === "bg-blue")}
   onUpdate={(option) => onUpdate((option as IOption<string>).value ?? "")}
 />

package/dist/WidgetFileSystem/WidgetFileSystem.svelte

@@ -58,7 +58,7 @@
   let files = $derived(value?.List ?? [])
   let usedPercent = $derived(total > 0 ? Math.min(100, Math.round((used / total) * 100)) : 0)
   /* Полоса - мастер-цвет виджета; почти заполненную ФС (закачка скоро начнёт падать) выдаёт только процент */
-  let percentColor = $derived(usedPercent >= 90 ? "var(--red-color)" : usedPercent >= 75 ? "var(--orange-color)" : "var(--muted-color)")
+  let percentColor = $derived(usedPercent >= 90 ? "var(--red-text)" : usedPercent >= 75 ? "var(--orange-text)" : "var(--muted-color)")
 
   /* Таблица файлов: путь обрезается «…», размер - уже отформатирован; действия - значки без текста: скачать и удалить (с подтверждением) */
   type FileRow = IWidgetFileSystemFile & { SizeText: string }
@@ -74,7 +74,7 @@
         data: {
           icon: ButtonDelete,
           title: $T("widget.common.delete"),
-          class: "bg-transparent px-0 text-(--red-color) hover:bg-(--red-color)/10",
+          class: "bg-transparent px-0 text-(--red-text) hover:bg-(--red-color)/10",
           onClick: (row: FileRow) => (pendingDelete = row.Name),
         },
       },
@@ -185,7 +185,7 @@
           >
         {/if}
         {#if downloadError}
-          <span class="mt-2 text-[12px] text-(--red-color)" transition:slide={{ duration: 100 }}>{downloadError}</span>
+          <span class="mt-2 text-[12px] text-(--red-text)" transition:slide={{ duration: 100 }}>{downloadError}</span>
         {/if}
       </div>
 
@@ -207,7 +207,7 @@
             </div>
           {/if}
           {#if uploadError}
-            <span class="text-[12px] text-(--red-color)" transition:slide={{ duration: 100 }}>{uploadError}</span>
+            <span class="text-[12px] text-(--red-text)" transition:slide={{ duration: 100 }}>{uploadError}</span>
           {/if}
         </div>
       {/if}

package/dist/WidgetMap/README.md

@@ -60,18 +60,19 @@ Telemetry_SendObject(g_telemetry_stream, g_mcfg.DevSN, "Data", dev, sizeof(dev)
 - MapLibre загружается с CDN один раз на страницу. Без интернета видна заглушка «Карта не загружена».
 - Источник подложки (CARTO и OpenStreetMap) указывать обязательно. Подпись свёрнута в кнопку «i» в углу карты.
 - Сворачивание, мастер-цвет и кнопка «?» с подсказками работают как у `WidgetWiFi`.
+- Мастер-цвет красит весь виджет: кнопки, линию маршрута, точки, точку взлёта, переходы и аппарат в имитации. Цвета со смыслом не меняются: поля зелёные, запретные зоны красные, развороты оранжевые, «Очистить», удаление и ошибка отправки красные.
 
 ## Режим имитации
 
 `isTest` включает имитацию шести аппаратов `SIM-1`-`SIM-6` без устройства. Они летают над одним районом Минска, в пределах пары километров, и обновляются раз в полсекунды. На связи всегда три аппарата. Через 40-100 секунд один из них пропадает, и его сразу сменяет тот, кто молчит дольше всех. Поэтому видно все состояния маркера: свежий, красный устаревший, скрытый и снова появившийся. При включении карта переходит к этому району. Пока режим включён, `value` и `groups` не учитываются. В конструкторе все остальные свойства становятся бледными и недоступными, пока имитацию не выключат.
 
-В режимах «Маршрут» и «Агро» `isTest` включает имитацию полёта по рассчитанной траектории. Аппарат летит по маршруту со скоростями его точек или по проходам «Агро» и оставляет голубой след. В «Агро» маркер - квадрокоптер, он зелёный, пока идёт распыление. Панель поверх карты показывает время полёта, процент пройденного пути, высоту, скорость и распыление; там же запуск и пауза, ускорение ×1, ×5, ×10 или ×25 (по умолчанию ×5) и полоса прокрутки пути: её перетаскивание ставит полёт на паузу, чтобы рассмотреть любое место траектории. Полёт запускается вручную кнопкой ▶ и останавливается в конце пути; повторный запуск начинает его заново. При любом изменении маршрута или полей аппарат возвращается в начало и встаёт на паузу. Аппараты из `groups` в это время не рисуются.
+В режимах «Маршрут» и «Агро» `isTest` включает имитацию полёта по рассчитанной траектории. Аппарат летит по маршруту со скоростями его точек или по проходам «Агро» и оставляет след цвета виджета. В «Агро» маркер - квадрокоптер, он зелёный, пока идёт распыление. Панель внизу карты по центру показывает время полёта, процент пройденного пути, высоту, скорость и распыление; там же запуск и пауза, ускорение ×1, ×5, ×10 или ×25 (по умолчанию ×5) и полоса прокрутки пути: её перетаскивание ставит полёт на паузу, чтобы рассмотреть любое место траектории. Полёт запускается вручную кнопкой ▶ и останавливается в конце пути; повторный запуск начинает его заново. При любом изменении маршрута или полей аппарат возвращается в начало и встаёт на паузу. Аппараты из `groups` в это время не рисуются.
 
 ## Режим «Маршрут»
 
 `mode="route"` - обычный планировщик миссии: точки по порядку облёта, у каждой своя высота и скорость. Аппараты из `groups` рисуются поверх маршрута, как в режиме «Объекты».
 
-1. **«Изменить точки»** включает правку. Клик по карте добавляет точку в конец маршрута. Новая точка берёт высоту и скорость предыдущей, первая получает 30 м и 8 м/с. Esc или двойной клик заканчивают правку.
+1. **«Редактор точек»** на карте включает правку. Клик по карте добавляет точку в конец маршрута. Новая точка берёт высоту и скорость предыдущей, первая получает 30 м и 8 м/с. Esc или двойной клик заканчивают правку.
 2. В режиме правки точки можно перетаскивать. Потяните за середину отрезка, чтобы вставить точку между соседними. Правый клик удаляет точку. Без правки на карте видны только номера точек, их не сдвинуть случайно. Точку взлёта `H` можно перетаскивать всегда.
 3. Блок **«Итог»**: сверху расчёт (число точек, длина пути, время, наибольшая высота), ниже список точек с высотой, скоростью, расстоянием от предыдущей точки и удалением; порядок меняется перетаскиванием строки за ручку, как в списках панелей свойств, под ним флажок возврата с посадкой (RTL). Клик по номеру показывает точку на карте.
 
@@ -93,18 +94,21 @@ Telemetry_SendObject(g_telemetry_stream, g_mcfg.DevSN, "Data", dev, sizeof(dev)
 
 `mode="agro"` превращает карту в генератор миссии для агродрона. Оператор обводит на карте одно или несколько полей и запретные зоны, задаёт угол проходов и ширину захвата. Карта строит траекторию, которая покрывает все поля, обходит зоны и выключает распылитель на разворотах и переходах. Готовую миссию можно скачать, скопировать или отправить на борт в формате QGC WPL 110 для автопилота ArduPilot.
 
-Аппараты из `groups` рисуются поверх миссии так же, как в режиме «Объекты»: маркер, карточка по клику и траектория, если она включена. План хранит владелец карты через `plan` и `onPlanChange`, миссия уходит наружу через `onSend`. Без `plan` показываются два демо-поля под Минском: в большом три запретные зоны, в малом вырез и дерево.
+Аппараты из `groups` рисуются поверх миссии так же, как в режиме «Объекты»: маркер, карточка по клику и траектория, если она включена. План хранит владелец карты через `plan` и `onPlanChange`, миссия уходит наружу через `onSend`. Без `plan` показываются три демо-поля под Минском: большое с рощей, опорой ЛЭП и постройкой, среднее сложной формы с выступами, крюком и прудом, малое с вырезом и деревом. Между полями стоят зона-«галочка» и большая зона под средним полем, она задевает все три поля; перелёты их обходят. Ширина захвата по умолчанию 5 м, отступ от границ 2 м. Ширина захвата по умолчанию 5 м, отступ от границ 2 м.
 
 ### Как пользоваться
 
-1. **«Нарисовать поле»**: кликами по карте обведите участок. Контур замыкается кликом по первой точке, двойным кликом, Enter или кнопкой «Замкнуть». Backspace убирает последнюю точку, Esc сбрасывает начатый контур. Когда поле есть, кнопка называется **«Поля»**: в этом режиме клики по карте обводят ещё одно поле.
-2. **«Запретные зоны»**: обведите места, где нельзя лететь и распылять: деревья, опоры ЛЭП, постройки, водоёмы. Зон может быть сколько угодно.
-3. **Точка взлёта** (синяя) видна всегда, её можно перетащить в любой момент.
-4. В блоке **«Маршрут и внесение»** задайте ширину захвата, отступ от границ, высоту, скорость, норму внесения и объём бака. У каждого поля свой угол проходов: новое поле сразу получает лучший угол, «Авторасчёт» пересчитывает углы всех полей приближениями по полному расчёту траектории: шаг 5° по всем направлениям и вдоль сторон поля, затем 1° около трёх лучших, затем 0,1° около победителя; лучший угол даёт наименьшее время облёта с учётом разворотов. Пока идёт расчёт, на карте видно колесо ожидания «Расчёт оптимального маршрута» с полосой и процентом (на большом поле это несколько секунд), а ползунок «Угол для всех полей» ставит всем один угол, например чтобы проходы шли вдоль рядов посадки. Угол отдельного поля правится в его строке в блоке «Итог».
+1. **«Редактор полей»** на карте: кликами по карте обведите участок. Контур замыкается кликом по первой точке, двойным кликом, Enter или кнопкой «Замкнуть». Backspace убирает последнюю точку, Esc сбрасывает начатый контур. Следующий контур станет ещё одним полем.
+2. **«Редактор запретных зон»** на карте: обведите места, где нельзя лететь и распылять: деревья, опоры ЛЭП, постройки, водоёмы. Зон может быть сколько угодно. Зона может лежать внутри поля, выходить за его край или стоять вне полей. Из проходов вырезается только часть зоны внутри поля, и площадь поля уменьшается только на эту часть. Зона относится к каждому полю, которое задевает.
+
+   **Важно.** Перелёты от точки взлёта к полю, между полями и домой обходят все зоны с отступом, в том числе стоящие вне полей. Опоры ЛЭП, вышки, деревья и постройки на пути между полями обязательно обводите запретными зонами. Иначе аппарат полетит напрямую и может в них врезаться.
+
+3. **Точка взлёта** (цвета виджета) видна всегда, её можно перетащить в любой момент.
+4. В блоке **«Маршрут и внесение»** задайте ширину захвата, отступ от границ, высоту, скорость, норму внесения и объём бака. У каждого поля свой угол проходов: новое поле сразу получает лучший угол, «Авторасчёт» пересчитывает углы всех полей приближениями по полному расчёту траектории: шаг 5° по всем направлениям и вдоль сторон поля, затем 1° около трёх лучших, затем 0,1° около победителя; лучший угол даёт наименьшую цену: время облёта плюс около 4 с на разворот плюс штраф за недолив, где метр недолитого прохода стоит как три метра полёта. Пока идёт расчёт, на карте видно колесо ожидания «Расчёт оптимального маршрута» с полосой и процентом (на большом поле это несколько секунд), а ползунок «Угол для всех полей» ставит всем один угол, например чтобы проходы шли вдоль рядов посадки. Угол отдельного поля правится в его строке в блоке «Итог». Кнопка «i» справа от «Авторасчёта» открывает подробное описание алгоритма: проходы, ячейки, порядок облёта, штрафы и поиск угла приближениями. Текст лежит в словаре под ключом `widget.mission.autoInfo`.
 5. Блок **«Итог»** показывает контуры, площадь к обработке, покрытие, длину пути, время, расход раствора и число дозаправок.
 6. **«Скачать»**, **«Копировать»** или **«Отправить»** миссию.
 
-Точки контуров видны и перетаскиваются, только пока нажата кнопка «Поля» или «Запретные зоны». Потяните за середину стороны, чтобы добавить точку. Правый клик удаляет точку. Поля и зоны удаляются крестиком в блоке «Итог». Режим выключается той же кнопкой, кнопкой «Готово» или Esc.
+Точки контуров видны и перетаскиваются, только пока включён «Редактор полей» или «Редактор запретных зон». Потяните за середину стороны, чтобы добавить точку. Правый клик удаляет точку. Поля и зоны удаляются крестиком в блоке «Итог». Режим выключается той же кнопкой, кнопкой «Готово» или Esc.
 
 ### Как строится траектория
 
@@ -170,7 +174,7 @@ Telemetry_SendObject(g_telemetry_stream, g_mcfg.DevSN, "Data", dev, sizeof(dev)
 | `onSend`         | `(mission, plan) => void \| Promise`      |                        | Отправка миссии, `mission` - текст QGC WPL 110                          |
 | `label.name`     | `string`                                  |                        | Заголовок. Пусто - «Карта» на языке пользователя                        |
 | `wrapperClass`   | `string`                                  | `""`                   | Классы обёртки                                                          |
-| `componentClass` | `string`                                  | `""`                   | Мастер-цвет `bg-*` шапки                                                |
+| `componentClass` | `string`                                  | `""`                   | Мастер-цвет `bg-*` всего виджета                                        |
 | `collapsed`      | `boolean`                                 | `false`                | Свёрнут ли                                                              |
 | `persistKey`     | `string`                                  |                        | Ключ для запоминания свёрнутого состояния                               |
 

package/dist/WidgetMap/WidgetMap.svelte

@@ -328,7 +328,7 @@
         <div class="flex flex-col items-center justify-center leading-none">
           <div
             class="flex size-8 shrink-0 items-center justify-center [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full
-          {isFresh(board) ? 'text-(--green-color)' : 'text-(--red-color)'}"
+          {isFresh(board) ? 'text-(--green-text)' : 'text-(--red-text)'}"
             style="rotate: {board.heading}deg;"
           >
             {#if markerIcon}
@@ -366,29 +366,29 @@
           <div class="flex items-center gap-1.5">
             <span class="size-2 shrink-0 rounded-full {isFresh(board) ? 'bg-(--green-color)' : 'bg-(--red-color)'}"></span>
             <h6 class="text-sm leading-none font-bold">{board.name}</h6>
-            {#if board.name !== board.group}<span class="text-[0.6rem] font-semibold uppercase opacity-60">{board.group}</span>{/if}
+            {#if board.name !== board.group}<span class="text-[11px] font-semibold uppercase text-(--muted-color)">{board.group}</span>{/if}
           </div>
 
           <div class="grid grid-cols-2 gap-x-3 gap-y-1 rounded-lg bg-(--container-color) p-2 text-xs">
             <div>
-              <p class="text-[0.6rem] font-semibold tracking-wide uppercase opacity-60">Lat / Lon</p>
+              <p class="text-[11px] font-semibold tracking-wide uppercase text-(--muted-color)">Lat / Lon</p>
               <p class="font-medium">{board.lat.toFixed(6)}, {board.lon.toFixed(6)}</p>
             </div>
             <div>
-              <p class="text-[0.6rem] font-semibold tracking-wide uppercase opacity-60">Alt</p>
+              <p class="text-[11px] font-semibold tracking-wide uppercase text-(--muted-color)">Alt</p>
               <p class="font-medium">{board.alt.toFixed(1)} m</p>
             </div>
             <div>
-              <p class="text-[0.6rem] font-semibold tracking-wide uppercase opacity-60">Heading</p>
+              <p class="text-[11px] font-semibold tracking-wide uppercase text-(--muted-color)">Heading</p>
               <p class="font-medium">{board.heading.toFixed(1)}°</p>
             </div>
             <div>
-              <p class="text-[0.6rem] font-semibold tracking-wide uppercase opacity-60">Satellites</p>
+              <p class="text-[11px] font-semibold tracking-wide uppercase text-(--muted-color)">Satellites</p>
               <p class="font-medium">{board.sat}</p>
             </div>
           </div>
 
-          {#if board.sn}<p class="text-center font-mono text-[0.6rem] tracking-wide uppercase">{board.sn}</p>{/if}
+          {#if board.sn}<p class="text-center font-mono text-[11px] tracking-wide uppercase">{board.sn}</p>{/if}
 
           <div class="grid grid-cols-[1fr_auto_1fr] items-center border-t border-(--hairline-color) pt-1">
             <div class="relative flex items-center justify-self-start">
@@ -415,7 +415,7 @@
 
             <button
               class="flex cursor-pointer items-center gap-1 rounded-lg border px-2 py-0.5 text-xs font-semibold transition {isFollowed
-                ? 'border-(--accent-color) bg-(--accent-color) text-white'
+                ? 'border-(--accent-color) bg-(--accent-color) text-(--on-accent)'
                 : 'border-(--hairline-color) bg-transparent opacity-80 hover:opacity-100'}"
               aria-pressed={isFollowed}
               onclick={() => toggleFollow(board.group)}
@@ -431,7 +431,7 @@
             </button>
 
             <button
-              class="cursor-pointer justify-self-end rounded-lg border-none bg-transparent p-0.5 text-(--red-color) transition hover:opacity-80"
+              class="cursor-pointer justify-self-end rounded-lg border-none bg-transparent p-0.5 text-(--red-text) transition hover:opacity-80"
               aria-label="Hide"
               title="Hide"
               onclick={() => hideBoard(board.group)}
@@ -503,10 +503,10 @@
           />
           <span
             class="text-[12px] font-semibold tabular-nums {freshCount === 0
-              ? 'text-(--red-color)'
+              ? 'text-(--red-text)'
               : freshCount < groupList.length
                 ? 'text-(--muted-color)'
-                : 'text-(--green-color)'}"
+                : 'text-(--green-text)'}"
             use:hint={{ text: $T("widget.map.hint.boards"), enabled: $hints }}
           >
             {freshCount} / {groupList.length}

package/dist/WidgetMap/mission/HelpText.svelte

@@ -0,0 +1,41 @@
+<!-- $lib/WidgetMap/mission/HelpText.svelte - справка из простого текста: строки "## " - заголовки, "- " - пункты списка, остальное - абзацы, **жирный** внутри строки -->
+<script lang="ts">
+  let { text }: { text: string } = $props()
+
+  type Block = { kind: "h"; text: string } | { kind: "p"; text: string } | { kind: "ul"; items: string[] }
+
+  let blocks = $derived.by(() => {
+    const out: Block[] = []
+    for (const raw of text.split("\n")) {
+      const line = raw.trim()
+      if (!line) continue
+      if (line.startsWith("## ")) out.push({ kind: "h", text: line.slice(3) })
+      else if (line.startsWith("- ")) {
+        const last = out[out.length - 1]
+        if (last?.kind === "ul") last.items.push(line.slice(2))
+        else out.push({ kind: "ul", items: [line.slice(2)] })
+      } else out.push({ kind: "p", text: line })
+    }
+    return out
+  })
+</script>
+
+{#snippet inline(line: string)}
+  {#each line.split("**") as part, i}{#if i % 2}<strong class="font-semibold">{part}</strong>{:else}{part}{/if}{/each}
+{/snippet}
+
+<div class="flex flex-col gap-1.5 text-[14px] leading-snug text-(--font-color)">
+  {#each blocks as block}
+    {#if block.kind === "h"}
+      <h3 class="m-0 mt-2.5 text-[15px] font-semibold">{@render inline(block.text)}</h3>
+    {:else if block.kind === "ul"}
+      <ul class="m-0 flex list-none flex-col gap-0.5 p-0">
+        {#each block.items as item}
+          <li class="relative m-0 pl-4 before:absolute before:left-0 before:text-(--accent-color) before:content-['•']">{@render inline(item)}</li>
+        {/each}
+      </ul>
+    {:else}
+      <p class="m-0">{@render inline(block.text)}</p>
+    {/if}
+  {/each}
+</div>

package/dist/WidgetMap/mission/HelpText.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    text: string;
+};
+declare const HelpText: import("svelte").Component<$$ComponentProps, {}, "">;
+type HelpText = ReturnType<typeof HelpText>;
+export default HelpText;