poe-svelte-ui-lib 1.85.0 → 1.86.0

package/dist/WidgetMap/README.md

@@ -1,6 +1,6 @@
 # WidgetMap
 
-Смарт-виджет «Карта»: где находятся объекты, куда они смотрят и как двигались. Каждый объект это одна группа полей устройства, на одной карте их может быть несколько. Карта на MapLibre.
+Смарт-виджет «Карта»: где находятся объекты, куда они смотрят и как двигались. Каждый объект это одна группа полей устройства, на одной карте их может быть несколько. Ещё два режима строят миссию: «Маршрут» — обычный планировщик из точек с высотами, «Агро» — генератор миссии для агродрона. Аппараты из групп полей видны во всех режимах. Карта на MapLibre.
 
 ## Назначение
 
@@ -64,6 +64,84 @@ Telemetry_SendObject(g_telemetry_stream, g_mcfg.DevSN, "Data", dev, sizeof(dev)
 
 `isTest` включает имитацию шести аппаратов `SIM-1`-`SIM-6` без устройства. Они летают над одним районом Минска, в пределах пары километров, и обновляются раз в полсекунды. На связи всегда три аппарата. Через 40-100 секунд один из них пропадает, и его сразу сменяет тот, кто молчит дольше всех. Поэтому видно все состояния маркера: свежий, красный устаревший, скрытый и снова появившийся. При включении карта переходит к этому району. Пока режим включён, `value` и `groups` не учитываются. В конструкторе все остальные свойства становятся бледными и недоступными, пока имитацию не выключат.
 
+## Режим «Маршрут»
+
+`mode="route"` — обычный планировщик миссии: точки по порядку облёта, у каждой своя высота и скорость. Аппараты из `groups` рисуются поверх маршрута, как в режиме «Объекты».
+
+1. **«Изменить точки»** включает правку. Клик по карте добавляет точку в конец маршрута. Новая точка берёт высоту и скорость предыдущей, первая получает 30 м и 8 м/с. Esc или двойной клик заканчивают правку.
+2. В режиме правки точки можно перетаскивать. Потяните за середину отрезка, чтобы вставить точку между соседними. Правый клик удаляет точку. Без правки на карте видны только номера точек, их не сдвинуть случайно. Точку взлёта `H` можно перетаскивать всегда.
+3. Блок **«Итог»**: сверху расчёт (число точек, длина пути, время, наибольшая высота), ниже список точек с высотой, скоростью, расстоянием от предыдущей точки и удалением; порядок меняется перетаскиванием строки за ручку, как в списках панелей свойств, под ним флажок возврата с посадкой (RTL). Клик по номеру показывает точку на карте.
+
+Миссия в формате QGC WPL 110: точка дома, `NAV_TAKEOFF` на высоту первой точки, точки маршрута со своими высотами, `DO_CHANGE_SPEED` перед точкой, где меняется скорость, в конце `RTL`, если включён возврат. Высоты отсчитываются от точки взлёта. Время: каждый отрезок со скоростью своей точки плюс набор высоты и посадка около 2.5 м/с.
+
+План хранит владелец карты через `route` и `onRouteChange`. Без `route` показывается демо-облёт вокруг поля под Минском.
+
+| Поле `IRoutePlan` | Описание |
+|---|---|
+| `start` | Точка взлёта, `[lng, lat]` |
+| `points` | Точки `{ point: [lng, lat], alt, speed }`: высота в метрах над точкой взлёта, скорость на пути к точке в м/с |
+| `returnHome` | Вернуться и сесть в конце (RTL) |
+
+## Режим «Агро»
+
+`mode="agro"` превращает карту в генератор миссии для агродрона. Оператор обводит на карте одно или несколько полей и запретные зоны, задаёт угол проходов и ширину захвата. Карта строит траекторию, которая покрывает все поля, обходит зоны и выключает распылитель на разворотах и переходах. Готовую миссию можно скачать, скопировать или отправить на борт в формате QGC WPL 110 для автопилота ArduPilot.
+
+Аппараты из `groups` рисуются поверх миссии так же, как в режиме «Объекты»: маркер, карточка по клику и траектория, если она включена. План хранит владелец карты через `plan` и `onPlanChange`, миссия уходит наружу через `onSend`. Без `plan` показываются два демо-поля под Минском: в большом три запретные зоны, в малом вырез и дерево.
+
+### Как пользоваться
+
+1. **«Нарисовать поле»**: кликами по карте обведите участок. Контур замыкается кликом по первой точке, двойным кликом, Enter или кнопкой «Замкнуть». Backspace убирает последнюю точку, Esc сбрасывает начатый контур. Когда поле есть, кнопка называется **«Поля»**: в этом режиме клики по карте обводят ещё одно поле.
+2. **«Запретные зоны»**: обведите места, где нельзя лететь и распылять: деревья, опоры ЛЭП, постройки, водоёмы. Зон может быть сколько угодно.
+3. **Точка взлёта** (синяя) видна всегда, её можно перетащить в любой момент.
+4. В блоке **«Маршрут и внесение»** задайте ширину захвата, отступ от границ, высоту, скорость, норму внесения и объём бака. У каждого поля свой угол проходов: новое поле сразу получает лучший угол, «Подобрать» пересчитывает углы всех полей, а ползунок «Угол для всех полей» ставит всем один угол, например чтобы проходы шли вдоль рядов посадки. Угол отдельного поля правится в его строке в блоке «Итог».
+5. Блок **«Итог»** показывает контуры, площадь к обработке, покрытие, длину пути, время, расход раствора и число дозаправок.
+6. **«Скачать»**, **«Копировать»** или **«Отправить»** миссию.
+
+Точки контуров видны и перетаскиваются, только пока нажата кнопка «Поля» или «Запретные зоны». Потяните за середину стороны, чтобы добавить точку. Правый клик удаляет точку. Поля и зоны удаляются крестиком в блоке «Итог». Режим выключается той же кнопкой, кнопкой «Готово» или Esc.
+
+### Как строится траектория
+
+1. Поле переводится в метры и поворачивается так, чтобы проходы шли вдоль оси.
+2. Для каждого прохода считаются свободные отрезки: внутри поля и вне зон, с отступом по всей ширине полосы.
+3. Отрезки собираются в участки: подряд идущие проходы, которые соединяются один к одному. Каждый участок облетается змейкой.
+4. Порядок участков и сторона входа выбираются точным перебором, если участков не больше 10. Если больше, используется жадный выбор с улучшением 2-opt.
+5. Переходы между участками идут по кратчайшему пути в обход зон с соблюдением отступа.
+6. Несколько полей облетаются по очереди: каждый раз ближайшее к текущему положению. Путь к первому полю, переходы между полями и возврат домой строятся по открытой местности в обход всех зон.
+
+Расчёт занимает 15-30 мс, траектория пересчитывается на каждое изменение.
+
+### Миссия
+
+- точка дома (точка взлёта или первая точка поля);
+- `DO_CHANGE_SPEED` с заданной скоростью;
+- точки маршрута на заданной высоте над точкой взлёта;
+- команды распыления: включение в начале прохода, выключение в конце и перед вылетом.
+
+| Режим распыления | Команда | Что нужно на борту |
+|---|---|---|
+| Распылитель ArduPilot | `DO_SPRAYER` (216) | `SPRAY_ENABLE=1`, выход насоса `SERVOx_FUNCTION=22` |
+| Насос на выходе | `DO_SET_SERVO` (183) | канал и ШИМ вкл./выкл. задаются на карте |
+| Без команд | нет | распылитель работает и на разворотах, участки обработаются дважды |
+
+Кнопка «Отправить» неактивна, если не передан `onSend`. Во время отправки на ней «Отправка…», после успеха «Отправлено», при ошибке она краснеет. Время полёта считается по скорости плюс около 4 с на разворот. Покрытие — доля поля без зон, которая попадает под распыление: остальное съедают отступы.
+
+### План миссии (IMissionPlan)
+
+| Поле | Описание |
+|---|---|
+| `fields` | Поля `{ contour: [lng, lat][], angle }`: контур и угол проходов, ° от севера по часовой |
+| `holes` | Запретные зоны, массив контуров; зона относится к полю, внутри которого лежит её центр |
+| `start` | Точка взлёта, `[lng, lat]` |
+| `spacing` | Ширина захвата, м |
+| `margin` | Отступ от границ и зон, м |
+| `alt`, `speed` | Высота, м, и скорость, м/с |
+| `returnHome` | Вернуться к точке взлёта в конце |
+| `rate`, `tank` | Норма внесения, л/га, и объём бака, л |
+| `sprayControl` | `sprayer`, `servo` или `none` |
+| `servoChannel`, `servoOn`, `servoOff` | Канал и ШИМ насоса для режима `servo` |
+
+Расчёт доступен и без карты: `planFields` (несколько полей), `planCoverage` (одно поле), `bestFieldAngle`, `toWaypointsFile` экспортируются из библиотеки.
+
 ## Пропсы
 
 | Название | Тип | По умолчанию | Описание |
@@ -77,6 +155,12 @@ Telemetry_SendObject(g_telemetry_stream, g_mcfg.DevSN, "Data", dev, sizeof(dev)
 | `trackLength` | `number` | `1000` | Точек траектории. Можно связать через `bind:` |
 | `markerTimeout` | `number` | `30000` | Таймаут маркера, мс. Можно связать через `bind:` |
 | `isTest` | `boolean` | `false` | Режим имитации |
+| `mode` | `"objects" \| "route" \| "agro"` | `"objects"` | Карта объектов, планировщик маршрута или генератор миссии для агродрона |
+| `plan` | `IMissionPlan` | `DEFAULT_MISSION_PLAN` | План миссии в режиме «Агро». Можно связать через `bind:` |
+| `onPlanChange` | `(plan) => void` | | Вызывается при каждом изменении плана |
+| `route` | `IRoutePlan` | `DEFAULT_ROUTE_PLAN` | Маршрут в режиме «Маршрут». Можно связать через `bind:` |
+| `onRouteChange` | `(route) => void` | | Вызывается при каждом изменении маршрута |
+| `onSend` | `(mission, plan) => void \| Promise` | | Отправка миссии, `mission` — текст QGC WPL 110 |
 | `label.name` | `string` | | Заголовок. Пусто — «Карта» на языке пользователя |
 | `wrapperClass` | `string` | `""` | Классы обёртки |
 | `componentClass` | `string` | `""` | Мастер-цвет `bg-*` шапки |
@@ -87,14 +171,20 @@ Telemetry_SendObject(g_telemetry_stream, g_mcfg.DevSN, "Data", dev, sizeof(dev)
 
 ```svelte
 <UI.WidgetMap groups={["MAV", "GNSS"]} value={{ MAV: mav, GNSS: gnss }} height={400} trackEnabled />
+
+<UI.WidgetMap mode="route" bind:route groups={["MAV"]} value={{ MAV: mav }} onSend={(mission) => sendToDevice(mission)} />
+
+<UI.WidgetMap mode="agro" bind:plan groups={["MAV"]} value={{ MAV: mav }} onSend={(mission) => sendToDevice(mission)} />
 ```
 
 В DevCloud и WebApp `value` собирает `GUIPreview`: для каждой группы читает переменные `<ModSN>|<группа>.<ключ>`.
 
 ## Панель свойств (WidgetMapProps.svelte)
 
-В конструкторе задают заголовок, группы через пробел, мастер-цвет, высоту карты (S, M, L, XL: 250, 400, 600, 800 пикселей), иконку маркера и начальные значения траектории.
+В конструкторе задают режим («Объекты», «Маршрут» или «Агро»), заголовок, группы через пробел, мастер-цвет, высоту карты (S, M, L, XL: 250, 400, 600, 800 пикселей), иконку маркера и начальные значения траектории. Группы, иконка маркера, траектория и имитация действуют во всех режимах.
 
 ## Внутреннее устройство
 
 В папке `mapWrapper/` лежат тонкие Svelte-обёртки над MapLibre GL: `MapLibre`, `Marker`, `Popup`, `Line`, элементы управления и `CustomControl` для своих кнопок поверх карты.
+
+В папке `mission/` лежат режимы построения миссии: `MapRoute.svelte` и `route.ts` (режим «Маршрут»), `MapAgro.svelte` (интерфейс режима «Агро»), `coverage.ts` (расчёт траектории и выгрузка миссии), `plan.ts` (тип плана и план по умолчанию), `MissionLayers.svelte` (слои карты и перетаскивание точек).

package/dist/WidgetMap/WidgetMap.svelte

@@ -1,4 +1,4 @@
-<!-- $lib/WidgetMap/WidgetMap.svelte — смарт-виджет «Карта»: объекты из групп полей устройства (по умолчанию MAV) с полями Lat/Lon/Alt/Heading/Sat/DevName/DevSN (см. IWidgetMapData), каждая группа — свой маркер и своя траектория. Только отображение: ничего не отправляет и не знает про DeviceStore/WebSocket. Траекторию, длину трека и таймаут маркеров оператор переключает прямо поверх карты, «Показать все» — кнопка в шапке; вид карта сама не меняет — объектов может быть много. -->
+<!-- $lib/WidgetMap/WidgetMap.svelte — смарт-виджет «Карта», режим «Объекты» (по умолчанию), «Маршрут» (планировщик миссии, mission/MapRoute.svelte) или «Агро» (генератор миссии, mission/MapAgro.svelte); аппараты из групп полей рисуются во всех режимах. Режим «Объекты»: объекты из групп полей устройства (по умолчанию MAV) с полями Lat/Lon/Alt/Heading/Sat/DevName/DevSN (см. IWidgetMapData), каждая группа — свой маркер и своя траектория. Только отображение: ничего не отправляет и не знает про DeviceStore/WebSocket. Траекторию, длину трека и таймаут маркеров оператор переключает прямо поверх карты, «Показать все» — кнопка в шапке; вид карта сама не меняет — объектов может быть много. -->
 <script lang="ts">
   import { onMount, untrack } from "svelte"
   import { slide } from "svelte/transition"
@@ -13,6 +13,8 @@
   import MapIcon from "./MapIcon.svelte"
   import { createFlightSim, HOME } from "../flightSim"
   import FitIcon from "./FitIcon.svelte"
+  import MapAgro from "./mission/MapAgro.svelte"
+  import MapRoute from "./mission/MapRoute.svelte"
   import * as UI from ".."
   import { MapLibre, NavigationControl, ScaleControl, GeolocateControl, FullScreenControl, Marker, Popup, Line, CustomControl } from "./mapWrapper"
 
@@ -30,6 +32,12 @@
     isTest = false,
     collapsed = $bindable(false),
     persistKey,
+    mode = "objects",
+    plan = $bindable(),
+    onPlanChange,
+    route = $bindable(),
+    onRouteChange,
+    onSend,
   }: IWidgetMapProps = $props()
 
   /* Подсказки — кнопка «?» в шапке, выбор общий для всех WidgetMap */
@@ -293,222 +301,236 @@
   ]
 </script>
 
-<div
-  bind:this={rootEl}
-  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 {hints}>
-    {#snippet right()}
-      <div class="flex items-center gap-3">
-        <UI.Button
-          wrapperClass="w-auto"
-          componentClass="bg-transparent px-3"
-          content={{ icon: FitIcon, name: $T("constructor.props.map.fitAll"), info: { text: $T("constructor.props.map.fitAllHint"), side: "bottom" } }}
-          disabled={collapsed || visibleBoards.length === 0}
-          onClick={fitAllBoards}
-        />
-        <span
-          class="text-[12px] font-semibold tabular-nums {freshCount === 0
-            ? 'text-(--red-color)'
-            : freshCount < groupList.length
-              ? 'text-(--muted-color)'
-              : 'text-(--green-color)'}"
-          use:hint={{ text: $T("widget.map.hint.boards"), enabled: $hints }}
-        >
-          {freshCount} / {groupList.length}
-        </span>
-      </div>
-    {/snippet}
-  </WidgetHeader>
-
-  {#if !collapsed}
-    <div transition:slide={{ duration: 150 }} style="height: {height}px">
-      <MapLibre
-        bind:map={mapInstance}
-        class="h-full w-full overflow-hidden rounded-[14px] border border-(--hairline-color)"
-        style={isDarkMode ? "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json" : "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"}
-        zoom={view.zoom}
-        center={view.center}
-        bearing={view.bearing}
-        maxPitch={0}
-      >
-        <NavigationControl />
-        <ScaleControl />
-        <GeolocateControl />
-        <FullScreenControl />
+<!-- Аппараты из групп полей: маркеры, карточки и траектории; рисуются во всех режимах -->
+{#snippet vehicles()}
+  {#if trackEnabled}
+    {#each visibleBoards as board (board.group)}
+      {#if board.track.length >= 2}
+        <Line id={`track-${board.group}`} coordinates={board.track} color={isFresh(board) ? "#22c55e" : "#ef4444"} />
+      {/if}
+    {/each}
+  {/if}
 
-        <!-- Панель оператора поверх карты -->
-        <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" use:hint={{ text: $T("widget.map.hint.track"), enabled: $hints }}>
-              <input type="checkbox" bind:checked={trackEnabled} />
-              {$T("constructor.props.map.track")}
-            </label>
-            {#if trackEnabled}
-              <div class="flex items-center gap-2">
-                <span class="text-sm font-medium">{$T("constructor.props.map.trackLength")}</span>
-                <select class="rounded px-2 py-1 text-sm" bind:value={trackLength}>
-                  {#each trackLengthOptions as opt}
-                    <option value={opt}>{opt}</option>
-                  {/each}
-                </select>
+  {#each visibleBoards as board (board.group)}
+    {@const isFollowed = followed.includes(board.group)}
+    <Marker lnglat={{ lng: board.lon, lat: board.lat }}>
+      {#snippet content()}
+        <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)'}"
+            style="rotate: {board.heading}deg;"
+          >
+            {#if markerIcon}
+              {#if typeof markerIcon === "string"}
+                {@html markerIcon}
+              {:else}
+                {@const IconComponent = markerIcon}
+                <IconComponent />
+              {/if}
+            {:else}
+              <div class="rotate-270">
+                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+                  <path
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="1.5"
+                    d="M14.76 12H6.832m0 0c0-.275-.057-.55-.17-.808L4.285 5.814c-.76-1.72 1.058-3.442 2.734-2.591L20.8 10.217c1.46.74 1.46 2.826 0 3.566L7.02 20.777c-1.677.851-3.495-.872-2.735-2.591l2.375-5.378A2 2 0 0 0 6.83 12"
+                  /></svg
+                >
               </div>
             {/if}
-            <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}
-                  <option value={opt.value}>{opt.label}</option>
-                {/each}
-              </select>
-            </div>
           </div>
-        </CustomControl>
+          <p class="font-bold">{board.name}</p>
+          <!-- Метка слежения видна и при закрытом окне деталей -->
+          {#if isFollowed}
+            <span class="mt-0.5 size-2 rounded-full bg-(--accent-color) ring-2 ring-white" title={$T("widget.map.follow")}></span>
+          {/if}
+        </div>
+      {/snippet}
 
-        {#if trackEnabled}
-          {#each visibleBoards as board (board.group)}
-            {#if board.track.length >= 2}
-              <Line id={`track-${board.group}`} coordinates={board.track} color={isFresh(board) ? "#22c55e" : "#ef4444"} />
-            {/if}
-          {/each}
-        {/if}
+      <Popup closeButton={false} class="map-popup text-left">
+        <div class="flex flex-col gap-1.5">
+          <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}
+          </div>
 
-        {#each visibleBoards as board (board.group)}
-          {@const isFollowed = followed.includes(board.group)}
-          <Marker lnglat={{ lng: board.lon, lat: board.lat }}>
-            {#snippet content()}
-              <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)'}"
-                  style="rotate: {board.heading}deg;"
-                >
-                  {#if markerIcon}
-                    {#if typeof markerIcon === "string"}
-                      {@html markerIcon}
-                    {:else}
-                      {@const IconComponent = markerIcon}
-                      <IconComponent />
-                    {/if}
-                  {:else}
-                    <div class="rotate-270">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
-                        <path
-                          fill="none"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                          d="M14.76 12H6.832m0 0c0-.275-.057-.55-.17-.808L4.285 5.814c-.76-1.72 1.058-3.442 2.734-2.591L20.8 10.217c1.46.74 1.46 2.826 0 3.566L7.02 20.777c-1.677.851-3.495-.872-2.735-2.591l2.375-5.378A2 2 0 0 0 6.83 12"
-                        /></svg
-                      >
-                    </div>
-                  {/if}
-                </div>
-                <p class="font-bold">{board.name}</p>
-                <!-- Метка слежения видна и при закрытом окне деталей -->
-                {#if isFollowed}
-                  <span class="mt-0.5 size-2 rounded-full bg-(--accent-color) ring-2 ring-white" title={$T("widget.map.follow")}></span>
-                {/if}
-              </div>
-            {/snippet}
+          <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="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="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="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="font-medium">{board.sat}</p>
+            </div>
+          </div>
 
-            <Popup closeButton={false} class="map-popup text-left">
-              <div class="flex flex-col gap-1.5">
-                <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}
-                </div>
+          {#if board.sn}<p class="text-center font-mono text-[0.6rem] tracking-wide uppercase">{board.sn}</p>{/if}
 
-                <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="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="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="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="font-medium">{board.sat}</p>
-                  </div>
-                </div>
+          <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">
+              <button
+                class="flex cursor-pointer items-center gap-1 rounded-lg border-none bg-transparent px-1 py-0.5 opacity-70 transition hover:opacity-100"
+                onclick={(e) => {
+                  e.preventDefault()
+                  copyBoard(board)
+                }}
+                aria-label="Copy"
+                title="Copy"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" viewBox="0 0 24 24">
+                  <g fill="none" stroke="currentColor" stroke-width="1.5">
+                    <path
+                      d="M6 11c0-2.828 0-4.243.879-5.121C7.757 5 9.172 5 12 5h3c2.828 0 4.243 0 5.121.879C21 6.757 21 8.172 21 11v5c0 2.828 0 4.243-.879 5.121C19.243 22 17.828 22 15 22h-3c-2.828 0-4.243 0-5.121-.879C6 20.243 6 18.828 6 16z"
+                    />
+                    <path d="M6 19a3 3 0 0 1-3-3v-6c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h4a3 3 0 0 1 3 3" />
+                  </g>
+                </svg>
+              </button>
+              <CopiedChip show={isCopied} class="-top-1 right-0 -translate-y-full" />
+            </div>
 
-                {#if board.sn}<p class="text-center font-mono text-[0.6rem] tracking-wide uppercase">{board.sn}</p>{/if}
+            <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-(--hairline-color) bg-transparent opacity-80 hover:opacity-100'}"
+              aria-pressed={isFollowed}
+              onclick={() => toggleFollow(board.group)}
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24">
+                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5">
+                  <circle cx="12" cy="12" r="7" />
+                  <circle cx="12" cy="12" r="2.5" fill={isFollowed ? "currentColor" : "none"} />
+                  <path d="M12 2v3m0 14v3M2 12h3m14 0h3" />
+                </g>
+              </svg>
+              {$T("widget.map.follow")}
+            </button>
 
-                <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">
-                    <button
-                      class="flex cursor-pointer items-center gap-1 rounded-lg border-none bg-transparent px-1 py-0.5 opacity-70 transition hover:opacity-100"
-                      onclick={(e) => {
-                        e.preventDefault()
-                        copyBoard(board)
-                      }}
-                      aria-label="Copy"
-                      title="Copy"
-                    >
-                      <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" viewBox="0 0 24 24">
-                        <g fill="none" stroke="currentColor" stroke-width="1.5">
-                          <path
-                            d="M6 11c0-2.828 0-4.243.879-5.121C7.757 5 9.172 5 12 5h3c2.828 0 4.243 0 5.121.879C21 6.757 21 8.172 21 11v5c0 2.828 0 4.243-.879 5.121C19.243 22 17.828 22 15 22h-3c-2.828 0-4.243 0-5.121-.879C6 20.243 6 18.828 6 16z"
-                          />
-                          <path d="M6 19a3 3 0 0 1-3-3v-6c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h4a3 3 0 0 1 3 3" />
-                        </g>
-                      </svg>
-                    </button>
-                    <CopiedChip show={isCopied} class="-top-1 right-0 -translate-y-full" />
-                  </div>
+            <button
+              class="cursor-pointer justify-self-end rounded-lg border-none bg-transparent p-0.5 text-(--red-color) transition hover:opacity-80"
+              aria-label="Hide"
+              title="Hide"
+              onclick={() => hideBoard(board.group)}
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" viewBox="0 0 24 24"
+                ><path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="1.5"
+                  d="m19.5 5.5l-.62 10.025c-.158 2.561-.237 3.842-.88 4.763a4 4 0 0 1-1.2 1.128c-.957.584-2.24.584-4.806.584c-2.57 0-3.855 0-4.814-.585a4 4 0 0 1-1.2-1.13c-.642-.922-.72-2.205-.874-4.77L4.5 5.5M3 5.5h18m-4.944 0l-.683-1.408c-.453-.936-.68-1.403-1.071-1.695a2 2 0 0 0-.275-.172C13.594 2 13.074 2 12.035 2c-1.066 0-1.599 0-2.04.234a2 2 0 0 0-.278.18c-.395.303-.616.788-1.058 1.757L8.053 5.5m1.447 11v-6m5 6v-6"
+                /></svg
+              >
+            </button>
+          </div>
+        </div>
+      </Popup>
+    </Marker>
+  {/each}
+{/snippet}
 
-                  <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-(--hairline-color) bg-transparent opacity-80 hover:opacity-100'}"
-                    aria-pressed={isFollowed}
-                    onclick={() => toggleFollow(board.group)}
-                  >
-                    <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24">
-                      <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5">
-                        <circle cx="12" cy="12" r="7" />
-                        <circle cx="12" cy="12" r="2.5" fill={isFollowed ? "currentColor" : "none"} />
-                        <path d="M12 2v3m0 14v3M2 12h3m14 0h3" />
-                      </g>
-                    </svg>
-                    {$T("widget.map.follow")}
-                  </button>
+<!-- Режим «Агро» — генератор миссии для агродрона, «Маршрут» — обычный планировщик миссии, остальное — карта объектов -->
+{#if mode === "agro"}
+  <MapAgro {wrapperClass} {componentClass} {label} height={height ?? 520} bind:plan bind:collapsed {persistKey} {onPlanChange} {onSend} overlay={vehicles} />
+{:else if mode === "route"}
+  <MapRoute {wrapperClass} {componentClass} {label} height={height ?? 520} bind:route bind:collapsed {persistKey} {onRouteChange} {onSend} overlay={vehicles} />
+{:else}
+  <div
+    bind:this={rootEl}
+    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 {hints}>
+      {#snippet right()}
+        <div class="flex items-center gap-3">
+          <UI.Button
+            wrapperClass="w-auto"
+            componentClass="bg-transparent px-3"
+            content={{ icon: FitIcon, name: $T("constructor.props.map.fitAll"), info: { text: $T("constructor.props.map.fitAllHint"), side: "bottom" } }}
+            disabled={collapsed || visibleBoards.length === 0}
+            onClick={fitAllBoards}
+          />
+          <span
+            class="text-[12px] font-semibold tabular-nums {freshCount === 0
+              ? 'text-(--red-color)'
+              : freshCount < groupList.length
+                ? 'text-(--muted-color)'
+                : 'text-(--green-color)'}"
+            use:hint={{ text: $T("widget.map.hint.boards"), enabled: $hints }}
+          >
+            {freshCount} / {groupList.length}
+          </span>
+        </div>
+      {/snippet}
+    </WidgetHeader>
 
-                  <button
-                    class="cursor-pointer justify-self-end rounded-lg border-none bg-transparent p-0.5 text-(--red-color) transition hover:opacity-80"
-                    aria-label="Hide"
-                    title="Hide"
-                    onclick={() => hideBoard(board.group)}
-                  >
-                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" viewBox="0 0 24 24"
-                      ><path
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                        d="m19.5 5.5l-.62 10.025c-.158 2.561-.237 3.842-.88 4.763a4 4 0 0 1-1.2 1.128c-.957.584-2.24.584-4.806.584c-2.57 0-3.855 0-4.814-.585a4 4 0 0 1-1.2-1.13c-.642-.922-.72-2.205-.874-4.77L4.5 5.5M3 5.5h18m-4.944 0l-.683-1.408c-.453-.936-.68-1.403-1.071-1.695a2 2 0 0 0-.275-.172C13.594 2 13.074 2 12.035 2c-1.066 0-1.599 0-2.04.234a2 2 0 0 0-.278.18c-.395.303-.616.788-1.058 1.757L8.053 5.5m1.447 11v-6m5 6v-6"
-                      /></svg
-                    >
-                  </button>
+    {#if !collapsed}
+      <div transition:slide={{ duration: 150 }} style="height: {height}px">
+        <MapLibre
+          bind:map={mapInstance}
+          class="h-full w-full overflow-hidden rounded-[14px] border border-(--hairline-color)"
+          style={isDarkMode
+            ? "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
+            : "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"}
+          zoom={view.zoom}
+          center={view.center}
+          bearing={view.bearing}
+          maxPitch={0}
+        >
+          <NavigationControl />
+          <ScaleControl />
+          <GeolocateControl />
+          <FullScreenControl />
+
+          <!-- Панель оператора поверх карты -->
+          <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" use:hint={{ text: $T("widget.map.hint.track"), enabled: $hints }}>
+                <input type="checkbox" bind:checked={trackEnabled} />
+                {$T("constructor.props.map.track")}
+              </label>
+              {#if trackEnabled}
+                <div class="flex items-center gap-2">
+                  <span class="text-sm font-medium">{$T("constructor.props.map.trackLength")}</span>
+                  <select class="rounded px-2 py-1 text-sm" bind:value={trackLength}>
+                    {#each trackLengthOptions as opt}
+                      <option value={opt}>{opt}</option>
+                    {/each}
+                  </select>
                 </div>
+              {/if}
+              <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}
+                    <option value={opt.value}>{opt.label}</option>
+                  {/each}
+                </select>
               </div>
-            </Popup>
-          </Marker>
-        {/each}
-      </MapLibre>
-    </div>
-  {/if}
-</div>
+            </div>
+          </CustomControl>
+
+          {@render vehicles()}
+        </MapLibre>
+      </div>
+    {/if}
+  </div>
+{/if}
 
 <style>
   /* Попап по правилам карточки (design-handoff, раздел 9): радиус 14, линия, тень уровня 2 */

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

@@ -1,4 +1,4 @@
 import type { IWidgetMapProps } from "../types";
-declare const WidgetMap: import("svelte").Component<IWidgetMapProps, {}, "collapsed" | "trackEnabled" | "trackLength" | "markerTimeout">;
+declare const WidgetMap: import("svelte").Component<IWidgetMapProps, {}, "collapsed" | "trackEnabled" | "trackLength" | "markerTimeout" | "plan" | "route">;
 type WidgetMap = ReturnType<typeof WidgetMap>;
 export default WidgetMap;