poe-svelte-ui-lib 1.37.2 → 1.38.0

package/dist/CommonSnippets.svelte

@@ -65,7 +65,6 @@
     component.type === "ProgressBar" ||
     component.type === "TextField" ||
     component.type === "Graph" ||
-    component.type === "Map" ||
     component.type === "PeriodChart"
       ? $optionsStore.ACCESS_OPTION.filter((o) => o.value !== "viewOnly")
       : $optionsStore.ACCESS_OPTION}
@@ -101,7 +100,6 @@
         | UI.ITableProps<object>
         | UI.IFileAttachProps
         | UI.IJoystickProps
-        | UI.IMapProps
     ).label?.name}
     onUpdate={(value) => updateProperty("label.name", value as string, component, onPropertyChange)}
   />
@@ -128,7 +126,6 @@
               | UI.ITableProps<object>
               | UI.IFileAttachProps
               | UI.IJoystickProps
-              | UI.IMapProps
           ).label?.class,
           (option as UI.IOption<string>).value,
         ),
@@ -152,7 +149,6 @@
         | UI.ITableProps<object>
         | UI.IFileAttachProps
         | UI.IJoystickProps
-        | UI.IMapProps
     ).label?.class}
     onUpdate={(value) => updateProperty("label.class", value as string, component, onPropertyChange)}
   />

package/dist/WidgetMap/MapIcon.svelte

@@ -0,0 +1,12 @@
+<script lang="ts"></script>
+
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
+  ><path
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M9 4 3 6v14l6-2 6 2 6-2V4l-6 2zm0 0v14m6-12v14"
+  /></svg
+>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const MapIcon: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type MapIcon = InstanceType<typeof MapIcon>;
+export default MapIcon;

package/dist/WidgetMap/README.md

@@ -0,0 +1,66 @@
+# WidgetMap Component
+
+## Описание
+
+> **Размеры.** Ширина — 100% контейнера (в конструкторе — ширина ячейки сетки); высота карты задаётся пропом `height` (px), в сетке конструктора виджет занимает одну строку. Мастер-цвет (`componentClass`) перекрашивает шапку.
+
+Смарт-виджет «Карта» — положение бортов на карте MapLibre с траекториями. Работает с полями групп устройства
+(по умолчанию `MAV`): каждая группа из `groups` — отдельный борт со своим маркером и своей траекторией, например
+`["MAV", "GNSS"]` — позиция автопилота и собственного GNSS-приёмника модуля. Только отображение: ничего не
+отправляет и не знает про DeviceStore/WebSocket. Заменяет удалённый компонент `Map`.
+
+- **Поверх карты** (решает оператор): траектория вкл/выкл и число её точек, таймаут маркеров, кнопка «Все борта»
+  (иконка рамки под зумом и полноэкранным режимом) — вписывает в экран все видимые борта, один борт — приближение
+  к нему (зум 16). Сама карта вид не меняет.
+- **Свежесть.** Борт зелёный, пока его значения менялись за таймаут; без изменений — красный; ещё через таймаут
+  скрывается до новых данных. Кнопка в карточке борта скрывает его до следующего изменения.
+- **Траектория** — точка добавляется только при смене координат (курс и высота могут обновляться чаще позиции).
+- **Шапка** — сколько бортов на связи из заданных: зелёный — все, серый — часть, красный — ни одного.
+- Карта светлая/тёмная по теме приложения (событие `ThemeChange`).
+
+## Поля группы
+
+| Поле      | Что                                       |
+| --------- | ----------------------------------------- |
+| `Lat`     | широта, °; вместе с `Lon` = 0 — нет фикса |
+| `Lon`     | долгота, °                                |
+| `Alt`     | высота, м — в карточке борта              |
+| `Heading` | курс, 0..360° — поворот маркера           |
+| `Sat`     | спутников — в карточке борта              |
+
+В DevCloud и WebApp GUIPreview собирает `value` сам: `{ [группа]: { Lat: <ModSN>|<группа>.Lat, ... } }`.
+
+## Пропсы
+
+| Название         | Тип                                             | По умолчанию        | Описание                                                        |
+| ---------------- | ----------------------------------------------- | ------------------- | --------------------------------------------------------------- |
+| `wrapperClass`   | `string`                                        | `""`                | CSS-классы обёртки                                              |
+| `componentClass` | `string`                                        | `""`                | «Мастер-цвет» виджета — роль вида `"bg-blue"`                   |
+| `label`          | `{ name?: string }`                             | `{ name: "Карта" }` | Заголовок карточки                                              |
+| `groups`         | `string[]`                                      | `["MAV"]`           | Префиксы групп полей — по борту на группу                       |
+| `value`          | `Record<string, Partial<IWidgetMapData>>`       | `undefined`         | Значения по группам                                             |
+| `keys`           | `Partial<Record<keyof IWidgetMapData, string>>` | `undefined`         | Переопределение имён полей устройства (используется GUIPreview) |
+| `height`         | `number`                                        | `400`               | Высота карты, px                                                |
+| `markerIcon`     | `ConstructorOfATypedSvelteComponent \| string`  | `undefined`         | Иконка маркера (SVG-строка или компонент), по умолчанию стрелка |
+| `trackEnabled`   | `boolean`                                       | `false`             | Начальное состояние «Траектория» (`$bindable`)                  |
+| `trackLength`    | `number`                                        | `1000`              | Начальное число точек траектории (`$bindable`)                  |
+| `markerTimeout`  | `number`                                        | `30000`             | Начальный таймаут маркеров, мс (`$bindable`)                    |
+| `collapsed`      | `boolean`                                       | `false`             | Свёрнуто ли тело виджета (`$bindable`)                          |
+| `persistKey`     | `string`                                        | `undefined`         | Ключ для сохранения `collapsed` в `localStorage`                |
+
+## Пример
+
+```svelte
+<UI.WidgetMap groups={["MAV", "GNSS"]} value={{ MAV: mav, GNSS: gnss }} height={400} trackEnabled />
+```
+
+## Конструктор свойств (WidgetMapProps.svelte)
+
+Группы панели: общие (заголовок, группы полей через запятую, мастер-цвет), оформление (высота карты, иконка
+маркера), по умолчанию (траектория и её длина — оператор меняет их на карте).
+
+## Внутренняя архитектура
+
+`mapWrapper/` — тонкие Svelte-обёртки над MapLibre GL (`MapLibre`, `Marker`, `Popup`, `Line`, контролы,
+`CustomControl` для своих элементов поверх карты). MapLibre подгружается при монтировании; без интернета
+показывается заглушка «Карта не загружена».

package/dist/WidgetMap/WidgetMap.svelte

@@ -0,0 +1,381 @@
+<!-- $lib/WidgetMap/WidgetMap.svelte — смарт-виджет «Карта»: борта из групп полей устройства (по умолчанию MAV) с полями
+     Lat/Lon/Alt/Heading/Sat (см. IWidgetMapData), каждая группа — свой маркер и своя траектория. Только отображение:
+     ничего не отправляет и не знает про DeviceStore/WebSocket. Траекторию, длину трека, таймаут маркеров и «Все борта»
+     оператор переключает прямо поверх карты; вид карта сама не меняет — бортов может быть много. -->
+<script lang="ts">
+  import { onMount, untrack } from "svelte"
+  import { slide } from "svelte/transition"
+  import { twMerge } from "tailwind-merge"
+  import { T } from "../locales/i18n"
+  import type { IWidgetMapProps } from "../types"
+  import CopiedChip from "../CopiedChip.svelte"
+  import WidgetHeader from "../WidgetHeader.svelte"
+  import { widgetAccentStyle } from "../widgetAccent"
+  import { readPersistedCollapsed, writePersistedCollapsed } from "../widgetCollapse"
+  import MapIcon from "./MapIcon.svelte"
+  import { MapLibre, NavigationControl, ScaleControl, GeolocateControl, FullScreenControl, Marker, Popup, Line, CustomControl } from "./mapWrapper"
+
+  let {
+    wrapperClass = "",
+    componentClass = "",
+    label = { name: "Карта" },
+    groups = ["MAV"],
+    value,
+    height = 400,
+    markerIcon,
+    trackEnabled = $bindable(false),
+    trackLength = $bindable(1000),
+    markerTimeout = $bindable(30_000),
+    collapsed = $bindable(false),
+    persistKey,
+  }: IWidgetMapProps = $props()
+
+  let accentStyle = $derived(widgetAccentStyle(componentClass ?? ""))
+
+  /* Сворачивание тела по клику на шапку — как у остальных смарт-виджетов (см. WidgetWiFi.svelte) */
+  let hasMergedPersisted = false
+  $effect(() => {
+    if (hasMergedPersisted) return
+    hasMergedPersisted = true
+    const persisted = readPersistedCollapsed(persistKey, collapsed)
+    if (persisted !== collapsed) collapsed = persisted
+  })
+  $effect(() => writePersistedCollapsed(persistKey, collapsed))
+
+  interface Board {
+    group: string
+    lat: number
+    lon: number
+    alt: number
+    heading: number
+    sat: number
+    track: [number, number][]
+    lastChange: number
+    hiddenAt: number
+  }
+
+  const num = (v: unknown, fallback = 0) => (typeof v === "number" && Number.isFinite(v) ? v : fallback)
+  /* (0, 0) и нечисловые координаты — признак отсутствия фикса */
+  const hasFix = (lat: unknown, lon: unknown) => Number.isFinite(lat) && Number.isFinite(lon) && (lat !== 0 || lon !== 0)
+
+  let groupList = $derived(groups.map((g) => g.trim()).filter(Boolean))
+  let boards: Board[] = $state([])
+  let now = $state(Date.now())
+  let mapInstance: any = $state()
+  let isCopied = $state(false)
+  let isDarkMode = $state(false)
+
+  /* Борт обновляется только при реальной смене значений — свежесть считается от последнего изменения, а не от перерисовки */
+  $effect(() => {
+    for (const group of groupList) {
+      const v = value?.[group]
+      if (!v || !hasFix(v.Lat, v.Lon)) continue
+      const lat = v.Lat as number
+      const lon = v.Lon as number
+      const alt = num(v.Alt)
+      const heading = num(v.Heading)
+      const sat = num(v.Sat)
+      untrack(() => {
+        const idx = boards.findIndex((b) => b.group === group)
+        const prev = idx === -1 ? null : boards[idx]
+        if (prev && prev.lat === lat && prev.lon === lon && prev.alt === alt && prev.heading === heading && prev.sat === sat) return
+        const moved = !prev || prev.lat !== lat || prev.lon !== lon
+        const track = moved ? [...(prev?.track ?? []), [lon, lat] as [number, number]].slice(-trackLength) : prev!.track
+        const next: Board = { group, lat, lon, alt, heading, sat, track, lastChange: Date.now(), hiddenAt: prev?.hiddenAt ?? 0 }
+        if (idx === -1) boards.push(next)
+        else boards[idx] = next
+      })
+    }
+  })
+
+  /* Подрезает накопленные траектории при уменьшении trackLength */
+  $effect(() => {
+    const limit = trackLength
+    untrack(() => boards.forEach((b) => b.track.length > limit && (b.track = b.track.slice(-limit))))
+  })
+
+  $effect(() => {
+    const timer = setInterval(() => (now = Date.now()), 1000)
+    return () => clearInterval(timer)
+  })
+
+  /* Свежий — менялся за markerTimeout; устаревший (красный) — ещё markerTimeout; дальше скрыт до новых данных */
+  let visibleBoards = $derived(boards.filter((b) => groupList.includes(b.group) && b.lastChange > b.hiddenAt && now - b.lastChange < markerTimeout * 2))
+  const isFresh = (b: Board) => now - b.lastChange < markerTimeout
+  let freshCount = $derived(visibleBoards.filter(isFresh).length)
+
+  /* Вписывает в экран все видимые борта, один борт — приближение к нему */
+  const fitAllBoards = () => {
+    if (!mapInstance || visibleBoards.length === 0) return
+    if (visibleBoards.length === 1) return mapInstance.flyTo({ center: [visibleBoards[0].lon, visibleBoards[0].lat], zoom: 16 })
+    const lons = visibleBoards.map((b) => b.lon)
+    const lats = visibleBoards.map((b) => b.lat)
+    mapInstance.fitBounds(
+      [
+        [Math.min(...lons), Math.min(...lats)],
+        [Math.max(...lons), Math.max(...lats)],
+      ],
+      { padding: 60, maxZoom: 16 },
+    )
+  }
+
+  const hideBoard = (group: string) => {
+    const b = boards.find((x) => x.group === group)
+    if (b) b.hiddenAt = b.lastChange
+  }
+
+  const copyBoard = (b: Board) => {
+    navigator.clipboard.writeText(
+      `${b.group}\nLat: ${b.lat.toFixed(6)} | Lon: ${b.lon.toFixed(6)} | Alt: ${b.alt.toFixed(1)}\nHeading: ${b.heading.toFixed(1)} | Satellites: ${b.sat}`,
+    )
+    isCopied = true
+    setTimeout(() => (isCopied = false), 1000)
+  }
+
+  const handleThemeChange = (event: CustomEvent) => {
+    isDarkMode = !event.detail.currentTheme
+  }
+  onMount(() => {
+    isDarkMode = localStorage.getItem("AppTheme") !== "light"
+    window.addEventListener("ThemeChange", handleThemeChange as EventListener)
+    return () => window.removeEventListener("ThemeChange", handleThemeChange as EventListener)
+  })
+
+  const trackLengthOptions = [100, 500, 1000, 5000, 10000, 50000]
+  const timeoutOptions: { label: string; value: number }[] = [
+    { label: "30 sec", value: 30_000 },
+    { label: "1 min", value: 60_000 },
+    { label: "3 min", value: 180_000 },
+    { label: "5 min", value: 300_000 },
+    { label: "10 min", value: 600_000 },
+    { label: "30 min", value: 1_800_000 },
+    { label: "1 h", value: 3_600_000 },
+  ]
+</script>
+
+<div
+  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 ?? "Карта"} bind:collapsed>
+    {#snippet right()}
+      <span
+        class="text-[12px] font-semibold tabular-nums {freshCount === 0
+          ? 'text-(--red-color)'
+          : freshCount < groupList.length
+            ? 'text-(--muted-color)'
+            : 'text-(--green-color)'}"
+        title={$T("constructor.props.map.boards")}
+      >
+        {freshCount} / {groupList.length}
+      </span>
+    {/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={1.5}
+        center={{ lat: 30, lng: 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">
+              <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">
+              <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>
+
+        <!-- Штатная кнопка карты в колонке зума/геолокации/полного экрана -->
+        <CustomControl position="top-right">
+          <button
+            type="button"
+            class="flex! items-center justify-center text-[#333] disabled:opacity-40"
+            title={$T("constructor.props.map.fitAll")}
+            aria-label={$T("constructor.props.map.fitAll")}
+            disabled={visibleBoards.length === 0}
+            onclick={fitAllBoards}
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
+              <path
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M4 9V5a1 1 0 0 1 1-1h4m6 0h4a1 1 0 0 1 1 1v4m0 6v4a1 1 0 0 1-1 1h-4m-6 0H5a1 1 0 0 1-1-1v-4m5-3a3 3 0 1 0 6 0a3 3 0 1 0-6 0"
+              />
+            </svg>
+          </button>
+        </CustomControl>
+
+        {#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}
+
+        {#each visibleBoards as board (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.group}</p>
+              </div>
+            {/snippet}
+
+            <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.group}</h6>
+                </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="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="flex items-center justify-between border-t border-(--hairline-color) pt-1">
+                  <div class="relative flex items-center">
+                    <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 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}
+      </MapLibre>
+    </div>
+  {/if}
+</div>
+
+<style>
+  /* Попап по правилам карточки (design-handoff, раздел 9): радиус 14, линия, тень уровня 2 */
+  :global(.map-popup .maplibregl-popup-content) {
+    background-color: var(--back-color);
+    color: inherit;
+    border: 1px solid var(--hairline-color);
+    border-radius: 14px;
+    box-shadow: var(--elevation-2);
+    padding: 12px;
+  }
+  :global(.map-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip) {
+    border-top-color: var(--back-color);
+  }
+  :global(.map-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip) {
+    border-bottom-color: var(--back-color);
+  }
+  :global(.map-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip) {
+    border-right-color: var(--back-color);
+  }
+  :global(.map-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip) {
+    border-left-color: var(--back-color);
+  }
+</style>

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

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

package/dist/WidgetMap/WidgetMapProps.svelte

@@ -0,0 +1,78 @@
+<!-- $lib/WidgetMap/WidgetMapProps.svelte — панель пропсов конструктора для WidgetMap: заголовок, группы полей
+     (каждая — борт), мастер-цвет, высота карты, иконка маркера и начальные значения переключателей оператора. -->
+<script lang="ts">
+  import { T } from "../locales/i18n"
+  import * as UI from ".."
+  import { updateProperty, type UIComponent, type IWidgetMapProps } from "../types"
+  import { ICONS } from "../icons"
+  import WidgetAccentPicker from "../WidgetAccentPicker.svelte"
+  import CommonSnippets from "../CommonSnippets.svelte"
+  import PropsGroup from "../PropsGroup.svelte"
+
+  const { component, onPropertyChange } = $props<{
+    component: UIComponent & { properties: Partial<IWidgetMapProps> }
+    onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string }>) => void
+  }>()
+
+  const HEIGHT_OPTIONS = [250, 300, 400, 500, 600, 800].map((value) => ({ id: crypto.randomUUID(), value, name: `${value} px` }))
+  const TRACK_LENGTH_OPTIONS = [100, 500, 1000, 5000, 10000, 50000].map((value) => ({ id: crypto.randomUUID(), value, name: String(value) }))
+
+  /* Группы вводятся через запятую: "MAV, GNSS" */
+  const setGroups = (raw: unknown) => {
+    const list = String(raw ?? "")
+      .split(",")
+      .map((g) => g.trim())
+      .filter(Boolean)
+    updateProperty("groups", list.length ? list : ["MAV"], component, onPropertyChange)
+  }
+</script>
+
+<div class="flex flex-col gap-2">
+  <PropsGroup label={$T("constructor.props.group.general")}>
+    <UI.Input
+      label={{ name: "Заголовок" }}
+      value={component.properties.label?.name}
+      onUpdate={(value) => updateProperty("label.name", value as string, component, onPropertyChange)}
+    />
+    <UI.Input label={{ name: "Группы полей (через запятую)" }} value={(component.properties.groups ?? ["MAV"]).join(", ")} onUpdate={setGroups} />
+    <WidgetAccentPicker
+      value={component.properties.componentClass ?? ""}
+      onUpdate={(value) => updateProperty("componentClass", value, component, onPropertyChange)}
+    />
+  </PropsGroup>
+  <PropsGroup label={$T("constructor.props.group.appearance")}>
+    <UI.Select
+      label={{ name: "Высота карты" }}
+      type="buttons"
+      options={HEIGHT_OPTIONS}
+      value={HEIGHT_OPTIONS.find((opt) => opt.value === (component.properties.height ?? 400))}
+      onUpdate={(option) => updateProperty("height", (option as { value: number }).value, component, onPropertyChange)}
+    />
+    <CommonSnippets
+      snippet="IconsLib"
+      initialValue={{
+        name: $T("constructor.props.markerIcon"),
+        icon: component.properties.markerIcon,
+        updateProperty: (icon: string) => updateProperty("markerIcon", icon as string, component, onPropertyChange),
+        icons: { array: ICONS },
+      }}
+      {component}
+      {onPropertyChange}
+    />
+  </PropsGroup>
+  <PropsGroup label="По умолчанию (оператор меняет на карте)">
+    <UI.Switch
+      label={{ name: $T("constructor.props.map.track") }}
+      value={component.properties.trackEnabled ? 1 : 0}
+      options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
+      onChange={(value) => updateProperty("trackEnabled", Boolean(value), component, onPropertyChange)}
+    />
+    <UI.Select
+      label={{ name: $T("constructor.props.map.trackLength") }}
+      type="input"
+      options={TRACK_LENGTH_OPTIONS}
+      value={TRACK_LENGTH_OPTIONS.find((opt) => opt.value === (component.properties.trackLength ?? 1000))}
+      onUpdate={(option) => updateProperty("trackLength", (option as { value: number }).value, component, onPropertyChange)}
+    />
+  </PropsGroup>
+</div>

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

@@ -0,0 +1,14 @@
+import { type UIComponent, type IWidgetMapProps } from "../types";
+type $$ComponentProps = {
+    component: UIComponent & {
+        properties: Partial<IWidgetMapProps>;
+    };
+    onPropertyChange: (updates: Partial<{
+        properties?: string | object;
+        name?: string;
+        access?: string;
+    }>) => void;
+};
+declare const WidgetMapProps: import("svelte").Component<$$ComponentProps, {}, "">;
+type WidgetMapProps = ReturnType<typeof WidgetMapProps>;
+export default WidgetMapProps;

package/dist/index.d.ts

@@ -17,8 +17,6 @@ export { default as InputProps } from "./Input/InputProps.svelte";
 export { default as Joystick } from "./Joystick/Joystick.svelte";
 export { default as JoystickProps } from "./Joystick/JoystickProps.svelte";
 export { default as Modal } from "./Modal.svelte";
-export { default as Map } from "./Map/Map.svelte";
-export { default as MapProps } from "./Map/MapProps.svelte";
 export { default as PeriodChart } from "./PeriodChart/PeriodChart.svelte";
 export { default as PeriodChartProps } from "./PeriodChart/PeriodChartProps.svelte";
 export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte";
@@ -51,7 +49,9 @@ export { default as WidgetRGBStrip } from "./WidgetRGBStrip/WidgetRGBStrip.svelt
 export { default as WidgetRGBStripProps } from "./WidgetRGBStrip/WidgetRGBStripProps.svelte";
 export { default as WidgetPFD } from "./WidgetPFD/WidgetPFD.svelte";
 export { default as WidgetPFDProps } from "./WidgetPFD/WidgetPFDProps.svelte";
+export { default as WidgetMap } from "./WidgetMap/WidgetMap.svelte";
+export { default as WidgetMapProps } from "./WidgetMap/WidgetMapProps.svelte";
 export * from "./locales/i18n";
 export * from "./locales/translations";
 export * from "./ModalStackStore";
-export { type UIComponent, type Position, type IUIComponentHandler, type IButtonProps, type IAccordionProps, type IInputProps, type ISelectProps, type IOption, type ISwitchProps, type IColorPickerProps, type IDividerProps, type ISliderProps, type ITextFieldProps, type IMapProps, type IProgressBarProps, type IWidgetProps, type IWidgetWiFiProps, type IWidgetWiFiConfig, type IWidgetDeviceInfoProps, type IWidgetDeviceInfoConfig, type IWidgetFileSystemProps, type IWidgetFileSystemInfo, type IWidgetFileSystemFile, type IWidgetFileSystemUpload, type IWidgetStackInfoProps, type IWidgetStackInfo, type IWidgetStackInfoHeap, type IWidgetStackInfoTask, type IWidgetRGBStripProps, type IWidgetRGBStripConfig, type IWidgetPFDProps, type IWidgetPFDData, type IWidgetPFDLimits, type IGraphProps, type IGraphDataObject, type IGraphHistoryPoint, type IGraphHistorySeries, type ITableHeader, type ITableText, type ITableSelect, type ITableButton, type ITableProgressBar, type ITableImage, type ITableContent, type ITableProps, type ITabsProps, type IJoystickProps, type IFileAttachProps, type IDeviceGNSS, type ICarouselProps, type IReceivingDataObject, type IVideoViewerProps, type IPeriodChartProps, type IPeriodChartLevel, } from "./types";
+export { type UIComponent, type Position, type IUIComponentHandler, type IButtonProps, type IAccordionProps, type IInputProps, type ISelectProps, type IOption, type ISwitchProps, type IColorPickerProps, type IDividerProps, type ISliderProps, type ITextFieldProps, type IProgressBarProps, type IWidgetProps, type IWidgetWiFiProps, type IWidgetWiFiConfig, type IWidgetDeviceInfoProps, type IWidgetDeviceInfoConfig, type IWidgetFileSystemProps, type IWidgetFileSystemInfo, type IWidgetFileSystemFile, type IWidgetFileSystemUpload, type IWidgetStackInfoProps, type IWidgetStackInfo, type IWidgetStackInfoHeap, type IWidgetStackInfoTask, type IWidgetRGBStripProps, type IWidgetRGBStripConfig, type IWidgetPFDProps, type IWidgetPFDData, type IWidgetPFDLimits, type IWidgetMapProps, type IWidgetMapData, type IGraphProps, type IGraphDataObject, type IGraphHistoryPoint, type IGraphHistorySeries, type ITableHeader, type ITableText, type ITableSelect, type ITableButton, type ITableProgressBar, type ITableImage, type ITableContent, type ITableProps, type ITabsProps, type IJoystickProps, type IFileAttachProps, type ICarouselProps, type IReceivingDataObject, type IVideoViewerProps, type IPeriodChartProps, type IPeriodChartLevel, } from "./types";

package/dist/index.js

@@ -18,8 +18,6 @@ export { default as InputProps } from "./Input/InputProps.svelte";
 export { default as Joystick } from "./Joystick/Joystick.svelte";
 export { default as JoystickProps } from "./Joystick/JoystickProps.svelte";
 export { default as Modal } from "./Modal.svelte";
-export { default as Map } from "./Map/Map.svelte";
-export { default as MapProps } from "./Map/MapProps.svelte";
 export { default as PeriodChart } from "./PeriodChart/PeriodChart.svelte";
 export { default as PeriodChartProps } from "./PeriodChart/PeriodChartProps.svelte";
 export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte";
@@ -52,6 +50,8 @@ export { default as WidgetRGBStrip } from "./WidgetRGBStrip/WidgetRGBStrip.svelt
 export { default as WidgetRGBStripProps } from "./WidgetRGBStrip/WidgetRGBStripProps.svelte";
 export { default as WidgetPFD } from "./WidgetPFD/WidgetPFD.svelte";
 export { default as WidgetPFDProps } from "./WidgetPFD/WidgetPFDProps.svelte";
+export { default as WidgetMap } from "./WidgetMap/WidgetMap.svelte";
+export { default as WidgetMapProps } from "./WidgetMap/WidgetMapProps.svelte";
 export * from "./locales/i18n";
 export * from "./locales/translations";
 export * from "./ModalStackStore";