poe-svelte-ui-lib 1.36.0 → 1.37.0

package/README.md

@@ -71,6 +71,18 @@ npm run build       # сборка пакета (svelte-kit sync + svelte-packag
 npm run Formatting  # prettier --write .
 ```
 
+### Публикация в npm
+
+Коммит в `main` с `[publish]` в сообщении (`"X.Y.Z [deploy] [publish]"`, версия поднята в `package.json`) запускает
+`.github/workflows/npm_publish.yaml`. Публикация идёт через **trusted publisher** npm (OIDC): workflow получает
+одноразовый токен от GitHub (`permissions: id-token: write`), постоянный `NPM_TOKEN` не нужен, provenance добавляется
+автоматически. Требования npm: npm CLI 11.5.1+ (workflow обновляет его сам), Node 22.14+, `repository.url` в
+`package.json` дословно совпадает с репозиторием.
+
+Связь настраивается на npmjs.com → пакет → Settings → Trusted Publisher: GitHub Actions, `Oleg-Perevyshin/ElementsUI`,
+workflow `npm_publish.yaml`, разрешение «npm publish». Новая связь подтверждается первой успешной публикацией и
+должна пройти её в течение 2 дней, иначе истекает. Существующую связь изменить нельзя — только удалить и создать заново.
+
 ---
 
 Лицензия: MIT — см. `LICENSE`.

package/dist/WidgetHeader.svelte

@@ -24,7 +24,8 @@
   const Icon = $derived(icon)
 </script>
 
-<div class="flex flex-wrap items-center justify-between gap-3">
+<!-- Фиксированная высота 32 px без переноса — свёрнутые виджеты одной высоты при любом содержимом справа -->
+<div class="flex h-[32px] items-center justify-between gap-3">
   <button
     type="button"
     class="flex min-w-0 flex-1 cursor-pointer items-center gap-2 border-none bg-transparent p-0 text-left"
@@ -43,6 +44,8 @@
     </span>
   </button>
   {#if right}
-    {@render right()}
+    <div class="flex min-w-0 shrink-0 items-center justify-end">
+      {@render right()}
+    </div>
   {/if}
 </div>

package/dist/WidgetPFD/PlaneIcon.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="M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z"
+  /></svg
+>

package/dist/WidgetPFD/PlaneIcon.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 PlaneIcon: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PlaneIcon = InstanceType<typeof PlaneIcon>;
+export default PlaneIcon;

package/dist/WidgetPFD/README.md

@@ -0,0 +1,76 @@
+# WidgetPFD Component
+
+## Описание
+
+> **Размеры.** Ширина — 100% контейнера (в конструкторе — ширина ячейки сетки), без собственного ограничения; высота — по содержимому, в сетке конструктора виджет занимает одну строку. Мастер-цвет (`componentClass`) перекрашивает шапку и рамки значений.
+
+Смарт-виджет «Пилотажный дисплей» (Primary Flight Display) — главный прибор контроля полёта, как в
+стеклянной кабине самолёта или наземной станции управления. Работает с полями группы (по умолчанию
+`MAV`) ровно в том виде, в каком их отдаёт телеметрия автопилота MAVLink устройства 20.00.000-01.
+Только отображение: ничего не отправляет и не знает про DeviceStore/WebSocket.
+
+- **Строка состояния** — ARMED/DISARMED, режим полёта (название по типу аппарата: самолёт, коптер,
+  наземный), GPS (тип фиксации и спутники), батарея (В, А, %), расстояние и пеленг на точку взлёта.
+- **Авиагоризонт** — небо и земля по крену и тангажу, лестница тангажа через 5°, дуга крена
+  (10/20/30/45/60°), символ самолёта. Ориентация сглаживается между пакетами (Tween 120 мс).
+- **Лента скорости** (слева, путевая) с воздушной числом, **лента высоты** (справа, над точкой взлёта)
+  с вариометром, **лента курса** (снизу) с меткой трека (розовая) и направления на дом (зелёная).
+- **Под прибором** — координаты, высота над уровнем моря, давление, температура.
+- **Нет данных** — если пакеты не приходили дольше `limits.staleMs` (по умолчанию 2 с), прибор
+  перечёркивается и помечается «НЕТ ДАННЫХ»; в шапке всегда виден возраст данных.
+- **Узкая ячейка** (уже 440 px) — ленты скорости и высоты заменяются числами поверх горизонта.
+
+## Протокол устройства
+
+Поток телеметрии (`Telemetry_SendObject`, ключ `Data`) — облако раскладывает поля в значения группы:
+
+| Поле                                     | Что                                             | Источник MAVLink             | Частота |
+| ---------------------------------------- | ----------------------------------------------- | ---------------------------- | ------- |
+| `MAV.Roll`, `MAV.Pitch`, `MAV.Heading`   | крен, тангаж, курс (°)                          | ATTITUDE                     | 20 Гц   |
+| `MAV.GSpeed`, `MAV.ASpeed`, `MAV.Climb`  | путевая, воздушная, вертикальная скорость (м/с) | VFR_HUD                      | 2 Гц    |
+| `MAV.Alt`, `MAV.AltMSL`                  | высота над взлётом и над морем (м)              | GLOBAL_POSITION_INT, VFR_HUD | 2 Гц    |
+| `MAV.Lat`, `MAV.Lon`, `MAV.Vx`, `MAV.Vy` | координаты, скорость на север/восток            | GLOBAL_POSITION_INT          | 2 Гц    |
+| `MAV.Fix`, `MAV.Sat`                     | тип фиксации, спутники                          | GPS_RAW_INT                  | 2 Гц    |
+| `MAV.BV`, `MAV.BC`, `MAV.BRem`           | батарея: В, А (-1 нет), % (-1 нет)              | SYS_STATUS                   | 2 Гц    |
+| `MAV.Mode`, `MAV.VType`, `MAV.Armed`     | custom_mode, MAV_TYPE, взведён                  | HEARTBEAT                    | 2 Гц    |
+| `MAV.HomeLat`, `MAV.HomeLon`             | точка взлёта (0 — нет)                          | HOME_POSITION                | 2 Гц    |
+| `MAV.Press`, `MAV.Temp`                  | давление (гПа), температура (°C)                | SCALED_PRESSURE              | 2 Гц    |
+
+Расстояние и пеленг на дом, трек и возраст данных виджет считает сам.
+
+## Пропсы
+
+| Название         | Тип                                             | По умолчанию                     | Описание                                                      |
+| ---------------- | ----------------------------------------------- | -------------------------------- | ------------------------------------------------------------- |
+| `id`             | `string`                                        | `undefined`                      | Префикс группы полей (`"MAV"`), используется вызывающим кодом |
+| `wrapperClass`   | `string`                                        | `""`                             | CSS-классы обёртки                                            |
+| `componentClass` | `string`                                        | `""`                             | «Мастер-цвет» виджета — роль вида `"bg-red"`                  |
+| `label`          | `{ name?: string }`                             | `{ name: "Пилотажный дисплей" }` | Заголовок карточки                                            |
+| `value`          | `Partial<IWidgetPFDData>`                       | `undefined`                      | Поля группы; без них — «НЕТ ДАННЫХ»                           |
+| `keys`           | `Partial<Record<keyof IWidgetPFDData, string>>` | `undefined`                      | Переопределение имён полей устройства                         |
+| `limits`         | `IWidgetPFDLimits`                              | `undefined`                      | Границы цветовых зон, см. ниже                                |
+| `collapsed`      | `boolean`                                       | `false`                          | Свёрнуто ли тело виджета (`$bindable`)                        |
+| `persistKey`     | `string`                                        | `undefined`                      | Ключ для сохранения `collapsed` в `localStorage`              |
+
+### IWidgetPFDLimits
+
+| Поле       | Описание                                                     |
+| ---------- | ------------------------------------------------------------ |
+| `speedMin` | м/с — ниже красная зона на ленте скорости                    |
+| `speedMax` | м/с — выше красная зона                                      |
+| `bankMax`  | ° — за пределом дуга крена красная, указатель крена краснеет |
+| `altMax`   | м — выше красная зона на ленте высоты                        |
+| `battLow`  | % — ниже батарея в строке состояния красная                  |
+| `staleMs`  | мс без новых данных до флага «НЕТ ДАННЫХ», по умолчанию 2000 |
+
+Незаданная граница не рисуется.
+
+## Примеры
+
+```svelte
+<UI.WidgetPFD value={mav} limits={{ speedMin: 8, speedMax: 25, bankMax: 30, altMax: 150, battLow: 20 }} />
+```
+
+## Конструктор свойств (WidgetPFDProps.svelte)
+
+Группы панели: общие (заголовок, группа полей, мастер-цвет), границы.

package/dist/WidgetPFD/WidgetPFD.svelte

@@ -0,0 +1,396 @@
+<!-- $lib/WidgetPFD/WidgetPFD.svelte — смарт-виджет «Пилотажный дисплей» (Primary Flight Display).
+     Поля группы (по умолчанию MAV) — телеметрия автопилота MAVLink (см. IWidgetPFDData): авиагоризонт,
+     ленты скорости/высоты/курса, строка состояния, цветовые зоны по границам (limits). Только отображение:
+     ничего не отправляет и не знает про DeviceStore/WebSocket. Между пакетами ориентация сглаживается (Tween),
+     устаревшие данные закрываются флагом «нет данных». В узкой ячейке ленты заменяются числами. -->
+<script lang="ts">
+  import { slide } from "svelte/transition"
+  import { Tween } from "svelte/motion"
+  import { cubicOut } from "svelte/easing"
+  import { twMerge } from "tailwind-merge"
+  import type { IWidgetPFDProps } from "../types"
+  import PlaneIcon from "./PlaneIcon.svelte"
+  import WidgetHeader from "../WidgetHeader.svelte"
+  import { widgetAccentStyle } from "../widgetAccent"
+  import { readPersistedCollapsed, writePersistedCollapsed } from "../widgetCollapse"
+
+  let {
+    wrapperClass = "",
+    componentClass = "",
+    label = { name: "Пилотажный дисплей" },
+    value,
+    limits,
+    collapsed = $bindable(false),
+    persistKey,
+  }: IWidgetPFDProps = $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))
+
+  const num = (v: unknown, fallback = 0) => (typeof v === "number" && Number.isFinite(v) ? v : fallback)
+  const wrap360 = (deg: number) => ((deg % 360) + 360) % 360
+  const toRad = (deg: number) => (deg * Math.PI) / 180
+
+  /* Плавность: ориентация и курс приходят ~20 Гц, между пакетами — короткая интерполяция */
+  const roll = new Tween(0, { duration: 120, easing: cubicOut })
+  const pitch = new Tween(0, { duration: 120, easing: cubicOut })
+  const heading = new Tween(0, { duration: 120, easing: cubicOut })
+  let lastUpdate = $state(0)
+  let now = $state(Date.now())
+  $effect(() => {
+    const r = value?.Roll
+    const p = value?.Pitch
+    const h = value?.Heading
+    if (r === undefined && p === undefined && h === undefined) return
+    roll.target = num(r)
+    pitch.target = num(p)
+    /* Курс без скачка через 0/360: цель — ближайшая к текущему значению */
+    const current = heading.target
+    const delta = ((wrap360(num(h)) - wrap360(current) + 540) % 360) - 180
+    heading.target = current + delta
+    lastUpdate = Date.now()
+  })
+  $effect(() => {
+    const timer = setInterval(() => (now = Date.now()), 250)
+    return () => clearInterval(timer)
+  })
+  let staleMs = $derived(limits?.staleMs ?? 2000)
+  let age = $derived(lastUpdate ? Math.max(0, now - lastUpdate) / 1000 : Infinity)
+  let stale = $derived(age * 1000 > staleMs)
+
+  /* Значения с устройства */
+  let gs = $derived(num(value?.GSpeed))
+  let as = $derived(num(value?.ASpeed))
+  let climb = $derived(num(value?.Climb))
+  let alt = $derived(num(value?.Alt))
+  let altMsl = $derived(num(value?.AltMSL))
+  let lat = $derived(num(value?.Lat))
+  let lon = $derived(num(value?.Lon))
+  let track = $derived(Math.hypot(num(value?.Vx), num(value?.Vy)) > 0.5 ? wrap360((Math.atan2(num(value?.Vy), num(value?.Vx)) * 180) / Math.PI) : null)
+
+  /* Точка взлёта: расстояние (гаверсинус) и пеленг */
+  let home = $derived.by(() => {
+    const hl = num(value?.HomeLat)
+    const ho = num(value?.HomeLon)
+    if (!hl || !ho || !lat || !lon) return null
+    const dLat = toRad(hl - lat)
+    const dLon = toRad(ho - lon)
+    const a = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(lat)) * Math.cos(toRad(hl)) * Math.sin(dLon / 2) ** 2
+    const distance = 2 * 6371000 * Math.asin(Math.sqrt(a))
+    const y = Math.sin(dLon) * Math.cos(toRad(hl))
+    const x = Math.cos(toRad(lat)) * Math.sin(toRad(hl)) - Math.sin(toRad(lat)) * Math.cos(toRad(hl)) * Math.cos(dLon)
+    return { distance, bearing: wrap360((Math.atan2(y, x) * 180) / Math.PI) }
+  })
+
+  /* Строка состояния */
+  const FIX = ["нет", "нет", "2D", "3D", "DGPS", "RTK float", "RTK fix"]
+  const COPTER_MODES: Record<number, string> = {
+    0: "STABILIZE",
+    1: "ACRO",
+    2: "ALT HOLD",
+    3: "AUTO",
+    4: "GUIDED",
+    5: "LOITER",
+    6: "RTL",
+    7: "CIRCLE",
+    9: "LAND",
+    11: "DRIFT",
+    13: "SPORT",
+    15: "AUTOTUNE",
+    16: "POSHOLD",
+    17: "BRAKE",
+    18: "THROW",
+    20: "GUIDED NOGPS",
+    21: "SMART RTL",
+    23: "FOLLOW",
+    24: "ZIGZAG",
+    27: "AUTO RTL",
+  }
+  const PLANE_MODES: Record<number, string> = {
+    0: "MANUAL",
+    1: "CIRCLE",
+    2: "STABILIZE",
+    3: "TRAINING",
+    4: "ACRO",
+    5: "FBWA",
+    6: "FBWB",
+    7: "CRUISE",
+    8: "AUTOTUNE",
+    10: "AUTO",
+    11: "RTL",
+    12: "LOITER",
+    13: "TAKEOFF",
+    15: "GUIDED",
+    17: "QSTABILIZE",
+    18: "QHOVER",
+    19: "QLOITER",
+    20: "QLAND",
+    21: "QRTL",
+    22: "QAUTOTUNE",
+    23: "QACRO",
+    24: "THERMAL",
+  }
+  const ROVER_MODES: Record<number, string> = {
+    0: "MANUAL",
+    1: "ACRO",
+    3: "STEERING",
+    4: "HOLD",
+    5: "LOITER",
+    6: "FOLLOW",
+    7: "SIMPLE",
+    10: "AUTO",
+    11: "RTL",
+    12: "SMART RTL",
+    15: "GUIDED",
+  }
+  let modeName = $derived.by(() => {
+    if (value?.Mode === undefined) return "—"
+    const vtype = num(value?.VType)
+    const mode = num(value?.Mode)
+    const table = vtype === 1 || (vtype >= 19 && vtype <= 25) ? PLANE_MODES : vtype === 10 || vtype === 11 ? ROVER_MODES : COPTER_MODES
+    return table[mode] ?? `MODE ${mode}`
+  })
+  let armed = $derived(num(value?.Armed) === 1)
+  let fix = $derived(num(value?.Fix))
+  let battRem = $derived(num(value?.BRem, -1))
+  let battLow = $derived(limits?.battLow !== undefined && battRem >= 0 && battRem <= limits.battLow)
+  let battCurrent = $derived(num(value?.BC, -1))
+
+  /* Компактный режим — ленты заменяются числами поверх горизонта */
+  let width = $state(600)
+  let compact = $derived(width < 440)
+
+  /* Геометрия прибора (viewBox 600×320) */
+  const VW = 600
+  const HH = 270
+  let HX = $derived(compact ? 0 : 80)
+  let HW = $derived(compact ? VW : 440)
+  let CX = $derived(HX + HW / 2)
+  const CY = HH / 2
+  const PPD = 4 /* пикселей на градус тангажа */
+  const SPEED_PPU = 6 /* пикселей на 1 м/с */
+  const ALT_PPU = 3 /* пикселей на 1 м */
+  const HDG_PPD = 4 /* пикселей на градус курса */
+
+  const pitchLadder = Array.from({ length: 37 }, (_, i) => (i - 18) * 5).filter((d) => d !== 0)
+  const ROLL_TICKS = [-60, -45, -30, -20, -10, 0, 10, 20, 30, 45, 60]
+  const ROLL_R = 110
+
+  const arcPoint = (deg: number, r: number) => ({ x: CX + r * Math.sin(toRad(deg)), y: CY - r * Math.cos(toRad(deg)) })
+  const arcPath = (from: number, to: number, r: number) => {
+    const a = arcPoint(from, r)
+    const b = arcPoint(to, r)
+    return `M ${a.x} ${a.y} A ${r} ${r} 0 0 1 ${b.x} ${b.y}`
+  }
+
+  const speedTicks = $derived(Array.from({ length: 41 }, (_, i) => Math.floor(gs) - 20 + i).filter((v) => v >= 0))
+  const altTicks = $derived(Array.from({ length: 19 }, (_, i) => Math.floor(alt / 5) * 5 - 45 + i * 5))
+  const hdgTicks = $derived(Array.from({ length: 29 }, (_, i) => Math.floor(heading.current / 5) * 5 - 70 + i * 5))
+  const hdgLabel = (deg: number) => ({ 0: "N", 90: "E", 180: "S", 270: "W" })[wrap360(deg)] ?? String(wrap360(deg)).padStart(3, "0")
+  const hdgOffset = (deg: number) => (((deg - heading.current + 540) % 360) - 180) * HDG_PPD
+
+  /* Вариометр: ±5 м/с на всю полувысоту полосы */
+  let vsi = $derived(Math.max(-5, Math.min(5, climb)) * 20)
+  /* Уникальные id для clipPath — несколько виджетов на одной странице не должны делить отсечения */
+  const uid = crypto.randomUUID().slice(0, 8)
+
+  const fmt = (v: number, digits = 1) => (Number.isFinite(v) ? v.toFixed(digits) : "—")
+  const fmtDistance = (m: number) => (m >= 1000 ? `${(m / 1000).toFixed(2)} км` : `${Math.round(m)} м`)
+  const fmtAge = (s: number) => (Number.isFinite(s) ? `${s.toFixed(1)} с` : "нет связи")
+</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={PlaneIcon} label={label?.name ?? "Пилотажный дисплей"} bind:collapsed>
+    {#snippet right()}
+      <span class="text-[12px] font-semibold tabular-nums {stale ? 'text-(--red-color)' : 'text-(--muted-color)'}">{fmtAge(age)}</span>
+    {/snippet}
+  </WidgetHeader>
+
+  {#if !collapsed}
+    <div class="flex flex-col gap-2" transition:slide={{ duration: 150 }} bind:clientWidth={width}>
+      <!-- Строка состояния -->
+      <div
+        class="flex flex-wrap items-center gap-x-4 gap-y-1 rounded-[10px] border border-(--hairline-color) bg-(--back-color) px-3 py-2 text-[12px] font-semibold tabular-nums"
+      >
+        <span class="rounded-md px-1.5 py-0.5 {armed ? 'bg-(--red-color) text-white' : 'bg-(--container-color) text-(--muted-color)'}"
+          >{armed ? "ARMED" : "DISARMED"}</span
+        >
+        <span>{modeName}</span>
+        <span class={fix < 3 ? "text-(--orange-color)" : ""}>GPS {FIX[fix] ?? fix} · {num(value?.Sat)}</span>
+        <span class={battLow ? "text-(--red-color)" : ""}>
+          {fmt(num(value?.BV))} В{battCurrent >= 0 ? ` · ${fmt(battCurrent)} А` : ""}{battRem >= 0 ? ` · ${battRem}%` : ""}
+        </span>
+        {#if home}
+          <span>Дом {fmtDistance(home.distance)} · {Math.round(home.bearing)}°</span>
+        {/if}
+      </div>
+
+      <!-- Прибор -->
+      <svg viewBox="0 0 {VW} 320" class="w-full rounded-[10px] bg-(--back-color)" role="img" aria-label="Пилотажный дисплей">
+        <defs>
+          <clipPath id="pfd-horizon-{uid}"><rect x={HX} y="0" width={HW} height={HH} rx="8" /></clipPath>
+          <clipPath id="pfd-speed-{uid}"><rect x="0" y="0" width="70" height={HH} rx="8" /></clipPath>
+          <clipPath id="pfd-alt-{uid}"><rect x={VW - 70} y="0" width="70" height={HH} rx="8" /></clipPath>
+          <clipPath id="pfd-hdg-{uid}"><rect x={HX} y={HH + 6} width={HW} height="44" rx="8" /></clipPath>
+        </defs>
+
+        <!-- Авиагоризонт -->
+        <g clip-path="url(#pfd-horizon-{uid})">
+          <g transform="rotate({-roll.current} {CX} {CY}) translate(0 {pitch.current * PPD})">
+            <rect x={CX - 600} y={CY - 1000} width="1200" height="1000" fill="#3a86c8" />
+            <rect x={CX - 600} y={CY} width="1200" height="1000" fill="#8a5a2b" />
+            <line x1={CX - 600} y1={CY} x2={CX + 600} y2={CY} stroke="#fff" stroke-width="2" />
+            {#each pitchLadder as d (d)}
+              {@const y = CY - d * PPD}
+              {@const half = d % 10 === 0 ? 40 : 18}
+              <line x1={CX - half} y1={y} x2={CX + half} y2={y} stroke="#fff" stroke-width="1.5" />
+              {#if d % 10 === 0}
+                <text x={CX - half - 6} y={y + 4} fill="#fff" font-size="11" text-anchor="end">{Math.abs(d)}</text>
+                <text x={CX + half + 6} y={y + 4} fill="#fff" font-size="11">{Math.abs(d)}</text>
+              {/if}
+            {/each}
+          </g>
+
+          <!-- Шкала крена: зона за пределом bankMax — красная -->
+          <path d={arcPath(-60, 60, ROLL_R)} fill="none" stroke="#fff" stroke-width="1.5" />
+          {#if limits?.bankMax !== undefined && limits.bankMax < 60}
+            <path d={arcPath(-60, -limits.bankMax, ROLL_R)} fill="none" stroke="#ef4444" stroke-width="4" />
+            <path d={arcPath(limits.bankMax, 60, ROLL_R)} fill="none" stroke="#ef4444" stroke-width="4" />
+          {/if}
+          {#each ROLL_TICKS as t (t)}
+            {@const a = arcPoint(t, ROLL_R)}
+            {@const b = arcPoint(t, ROLL_R + (t % 30 === 0 ? 12 : 7))}
+            <line x1={a.x} y1={a.y} x2={b.x} y2={b.y} stroke="#fff" stroke-width="1.5" />
+          {/each}
+          <g transform="rotate({-roll.current} {CX} {CY})">
+            <polygon
+              points="{CX},{CY - ROLL_R + 2} {CX - 7},{CY - ROLL_R + 14} {CX + 7},{CY - ROLL_R + 14}"
+              fill={limits?.bankMax !== undefined && Math.abs(roll.current) > limits.bankMax ? "#ef4444" : "#facc15"}
+            />
+          </g>
+
+          <!-- Символ самолёта -->
+          <g stroke="#facc15" stroke-width="4" fill="none" stroke-linecap="round">
+            <polyline points="{CX - 70},{CY} {CX - 25},{CY} {CX - 15},{CY + 10}" />
+            <polyline points="{CX + 70},{CY} {CX + 25},{CY} {CX + 15},{CY + 10}" />
+          </g>
+          <circle cx={CX} cy={CY} r="3" fill="#facc15" />
+
+          <!-- Компактный режим: числа вместо лент -->
+          {#if compact}
+            <g font-size="15" font-weight="600" fill="#fff">
+              <rect x="8" y={CY - 16} width="76" height="32" rx="6" fill="#000" fill-opacity="0.55" />
+              <text x="46" y={CY + 6} text-anchor="middle">{fmt(gs)}</text>
+              <rect x={VW - 84} y={CY - 16} width="76" height="32" rx="6" fill="#000" fill-opacity="0.55" />
+              <text x={VW - 46} y={CY + 6} text-anchor="middle">{Math.round(alt)}</text>
+              <text x="46" y={CY + 32} text-anchor="middle" font-size="11">м/с</text>
+              <text x={VW - 46} y={CY + 32} text-anchor="middle" font-size="11">м · {climb >= 0 ? "+" : ""}{fmt(climb)}</text>
+            </g>
+          {/if}
+        </g>
+
+        {#if !compact}
+          <!-- Лента скорости (путевая), красные зоны вне speedMin/speedMax -->
+          <g clip-path="url(#pfd-speed-{uid})">
+            <rect x="0" y="0" width="70" height={HH} fill="#000" fill-opacity="0.72" />
+            {#if limits?.speedMin !== undefined}
+              {@const y = CY - (limits.speedMin - gs) * SPEED_PPU}
+              <rect x="62" {y} width="8" height={Math.max(0, HH - y)} fill="#ef4444" />
+            {/if}
+            {#if limits?.speedMax !== undefined}
+              {@const y = CY - (limits.speedMax - gs) * SPEED_PPU}
+              <rect x="62" y="0" width="8" height={Math.max(0, y)} fill="#ef4444" />
+            {/if}
+            {#each speedTicks as v (v)}
+              {@const y = CY - (v - gs) * SPEED_PPU}
+              <line x1={v % 5 === 0 ? 48 : 56} y1={y} x2="62" y2={y} stroke="#fff" stroke-width="1" />
+              {#if v % 5 === 0}<text x="42" y={y + 4} fill="#fff" font-size="11" text-anchor="end">{v}</text>{/if}
+            {/each}
+          </g>
+          <rect x="4" y={CY - 14} width="58" height="28" rx="4" fill="#000" stroke="var(--accent-color)" stroke-width="1.5" />
+          <text x="33" y={CY + 6} fill="#fff" font-size="15" font-weight="600" text-anchor="middle">{fmt(gs)}</text>
+          <rect x="0" y="0" width="70" height="20" rx="8" fill="#000" />
+          <rect x="0" y={HH - 20} width="70" height="20" rx="8" fill="#000" />
+          <text x="35" y="14" fill="#fff" font-size="10" text-anchor="middle" fill-opacity="0.7">GS м/с</text>
+          <text x="35" y={HH - 6} fill="#fff" font-size="11" text-anchor="middle">AS {fmt(as)}</text>
+
+          <!-- Лента высоты над точкой взлёта, красная зона выше altMax; вариометр справа -->
+          <g clip-path="url(#pfd-alt-{uid})">
+            <rect x={VW - 70} y="0" width="70" height={HH} fill="#000" fill-opacity="0.72" />
+            {#if limits?.altMax !== undefined}
+              {@const y = CY - (limits.altMax - alt) * ALT_PPU}
+              <rect x={VW - 70} y="0" width="8" height={Math.max(0, y)} fill="#ef4444" />
+            {/if}
+            {#each altTicks as v (v)}
+              {@const y = CY - (v - alt) * ALT_PPU}
+              <line x1={VW - 62} y1={y} x2={VW - (v % 10 === 0 ? 48 : 54)} y2={y} stroke="#fff" stroke-width="1" />
+              {#if v % 10 === 0}<text x={VW - 44} y={y + 4} fill="#fff" font-size="11">{v}</text>{/if}
+            {/each}
+            <rect x={VW - 6} y={Math.min(CY, CY - vsi)} width="4" height={Math.abs(vsi)} fill={climb >= 0 ? "#22c55e" : "#f97316"} />
+          </g>
+          <rect x={VW - 66} y={CY - 14} width="58" height="28" rx="4" fill="#000" stroke="var(--accent-color)" stroke-width="1.5" />
+          <text x={VW - 37} y={CY + 6} fill="#fff" font-size="15" font-weight="600" text-anchor="middle">{Math.round(alt)}</text>
+          <rect x={VW - 70} y="0" width="70" height="20" rx="8" fill="#000" />
+          <rect x={VW - 70} y={HH - 20} width="70" height="20" rx="8" fill="#000" />
+          <text x={VW - 35} y="14" fill="#fff" font-size="10" text-anchor="middle" fill-opacity="0.7">ALT м</text>
+          <text x={VW - 35} y={HH - 6} fill="#fff" font-size="11" text-anchor="middle">VS {climb >= 0 ? "+" : ""}{fmt(climb)}</text>
+        {/if}
+
+        <!-- Лента курса: трек (розовый), направление на дом (зелёный) -->
+        <g clip-path="url(#pfd-hdg-{uid})">
+          <rect x={HX} y={HH + 6} width={HW} height="44" fill="#000" fill-opacity="0.72" />
+          {#each hdgTicks as d (d)}
+            {@const x = CX + hdgOffset(d)}
+            <line x1={x} y1={HH + 6} x2={x} y2={HH + (d % 10 === 0 ? 18 : 12)} stroke="#fff" stroke-width="1" />
+            {#if d % 10 === 0}<text {x} y={HH + 34} fill="#fff" font-size="11" text-anchor="middle">{hdgLabel(d)}</text>{/if}
+          {/each}
+          {#if track !== null}
+            {@const x = CX + hdgOffset(track)}
+            <polygon points="{x},{HH + 8} {x - 6},{HH + 18} {x + 6},{HH + 18}" fill="#ec4899" />
+          {/if}
+          {#if home}
+            {@const x = CX + hdgOffset(home.bearing)}
+            <circle cx={x} cy={HH + 44} r="4" fill="#22c55e" />
+          {/if}
+        </g>
+        <rect x={CX - 26} y={HH + 20} width="52" height="24" rx="4" fill="#000" stroke="var(--accent-color)" stroke-width="1.5" />
+        <text x={CX} y={HH + 37} fill="#fff" font-size="14" font-weight="600" text-anchor="middle"
+          >{String(Math.round(wrap360(heading.current)) % 360).padStart(3, "0")}</text
+        >
+
+        <!-- Нет данных: флаг поверх прибора -->
+        {#if stale}
+          <g>
+            <rect x="0" y="0" width={VW} height="320" rx="10" fill="#000" fill-opacity="0.45" />
+            <line x1={HX + 20} y1="20" x2={HX + HW - 20} y2={HH - 20} stroke="#ef4444" stroke-width="3" />
+            <line x1={HX + HW - 20} y1="20" x2={HX + 20} y2={HH - 20} stroke="#ef4444" stroke-width="3" />
+            <rect x={CX - 70} y={CY - 16} width="140" height="32" rx="6" fill="#ef4444" />
+            <text x={CX} y={CY + 6} fill="#fff" font-size="15" font-weight="600" text-anchor="middle">НЕТ ДАННЫХ</text>
+          </g>
+        {/if}
+      </svg>
+
+      <!-- Значения под прибором -->
+      <div
+        class="flex flex-wrap gap-x-5 gap-y-1 rounded-[10px] border border-(--hairline-color) bg-(--back-color) px-3 py-2 text-[12px] whitespace-nowrap tabular-nums"
+      >
+        <span><span class="text-(--muted-color)">Координаты</span> {lat ? `${lat.toFixed(6)}, ${lon.toFixed(6)}` : "—"}</span>
+        <span><span class="text-(--muted-color)">Высота MSL</span> {Math.round(altMsl)} м</span>
+        <span><span class="text-(--muted-color)">Давление</span> {fmt(num(value?.Press))} гПа</span>
+        <span><span class="text-(--muted-color)">Температура</span> {fmt(num(value?.Temp))} °C</span>
+      </div>
+    </div>
+  {/if}
+</div>

package/dist/WidgetPFD/WidgetPFD.svelte.d.ts

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

package/dist/WidgetPFD/WidgetPFDProps.svelte

@@ -0,0 +1,53 @@
+<!-- $lib/WidgetPFD/WidgetPFDProps.svelte — панель пропсов конструктора для WidgetPFD:
+     заголовок, префикс группы полей (по умолчанию MAV), мастер-цвет и границы цветовых зон. -->
+<script lang="ts">
+  import { T } from "../locales/i18n"
+  import * as UI from ".."
+  import { updateProperty, type UIComponent, type IWidgetPFDProps, type IWidgetPFDLimits } from "../types"
+  import WidgetAccentPicker from "../WidgetAccentPicker.svelte"
+  import PropsGroup from "../PropsGroup.svelte"
+
+  const { component, onPropertyChange } = $props<{
+    component: UIComponent & { properties: Partial<IWidgetPFDProps> }
+    onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string }>) => void
+  }>()
+
+  /* Пустое поле — граница не задана (зона не рисуется) */
+  const setLimit = (key: keyof IWidgetPFDLimits, raw: unknown) => {
+    const text = String(raw ?? "").trim()
+    const next: IWidgetPFDLimits = { ...(component.properties.limits ?? {}) }
+    if (text === "" || !Number.isFinite(Number(text))) delete next[key]
+    else next[key] = Number(text)
+    updateProperty("limits", next, component, onPropertyChange)
+  }
+  const limits = $derived((component.properties.limits ?? {}) as IWidgetPFDLimits)
+</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: "Группа полей (ID)" }}
+      value={component.properties.id ?? "MAV"}
+      onUpdate={(value) => updateProperty("id", value as string, component, onPropertyChange)}
+    />
+    <WidgetAccentPicker
+      value={component.properties.componentClass ?? ""}
+      onUpdate={(value) => updateProperty("componentClass", value, component, onPropertyChange)}
+    />
+  </PropsGroup>
+  <PropsGroup label="Границы">
+    <div class="grid grid-cols-2 gap-2">
+      <UI.Input label={{ name: "Скорость мин., м/с" }} type="number" value={limits.speedMin} onUpdate={(v) => setLimit("speedMin", v)} />
+      <UI.Input label={{ name: "Скорость макс., м/с" }} type="number" value={limits.speedMax} onUpdate={(v) => setLimit("speedMax", v)} />
+      <UI.Input label={{ name: "Предельный крен, °" }} type="number" value={limits.bankMax} onUpdate={(v) => setLimit("bankMax", v)} />
+      <UI.Input label={{ name: "Высота макс., м" }} type="number" value={limits.altMax} onUpdate={(v) => setLimit("altMax", v)} />
+      <UI.Input label={{ name: "Низкий заряд, %" }} type="number" value={limits.battLow} onUpdate={(v) => setLimit("battLow", v)} />
+      <UI.Input label={{ name: "Нет данных через, мс" }} type="number" value={limits.staleMs ?? 2000} onUpdate={(v) => setLimit("staleMs", v)} />
+    </div>
+  </PropsGroup>
+</div>

package/dist/WidgetPFD/WidgetPFDProps.svelte.d.ts

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

package/dist/index.d.ts

@@ -49,7 +49,9 @@ export { default as WidgetStackInfo } from "./WidgetStackInfo/WidgetStackInfo.sv
 export { default as WidgetStackInfoProps } from "./WidgetStackInfo/WidgetStackInfoProps.svelte";
 export { default as WidgetRGBStrip } from "./WidgetRGBStrip/WidgetRGBStrip.svelte";
 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 * 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 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 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";

package/dist/index.js

@@ -50,6 +50,8 @@ export { default as WidgetStackInfo } from "./WidgetStackInfo/WidgetStackInfo.sv
 export { default as WidgetStackInfoProps } from "./WidgetStackInfo/WidgetStackInfoProps.svelte";
 export { default as WidgetRGBStrip } from "./WidgetRGBStrip/WidgetRGBStrip.svelte";
 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 * from "./locales/i18n";
 export * from "./locales/translations";
 export * from "./ModalStackStore";

package/dist/locales/translations.js

@@ -128,6 +128,11 @@ const translations = {
         '🎯 **LED strip widget** — controls an addressable strip: color, effect, speed and the strip itself.\n\n**🔗 Device link** — fields of the `LST` group (`RGB_Strip` driver), no variable binding needed\n- 🎨 `Color` — `[R, G, B, W]`; the white channel is shown only for the SK6812 model\n- ✨ `Effect` — static, rainbow, breath, palette, chase, twinkle, fire, theater chase; `Speed` — 0…10 on a non-linear scale, 0 is pause; rainbow, palette and fire ignore the color\n- 🔧 `Count`, `Model`, `Order` — number of LEDs, chip model, color order; `MaxCount` — firmware capacity (read only)\n\n**📤 Sending**\n- Color, effect and speed apply immediately\n- The "Hardware" block is edited locally and sent in one packet on "Save" — the strip restarts with the new settings\n\n**💡 Tips**\n- Wrong colors (red instead of green) — change the color order: WS2812 is usually GRB, some WS2811 are RGB or BRG\n- The data pin and transport (RMT/SPI) are set in firmware and can\'t be changed here\n\n⚙️ A group other than `LST` — change the prefix (ID) in widget settings.',
         "🎯 **LED 灯带组件** —— 控制可寻址灯带：颜色、效果、速度以及灯带本身的参数。\n\n**🔗 与设备的关联** —— `LST` 分组的字段（`RGB_Strip` 驱动），无需绑定变量\n- 🎨 `Color` —— `[R, G, B, W]`；白色通道仅在 SK6812 型号时显示\n- ✨ `Effect` —— 静态、彩虹、呼吸、调色板、彗星、闪烁、火焰、跑马灯；`Speed` —— 0…10（非线性），0 为暂停；彩虹、调色板和火焰不使用颜色\n- 🔧 `Count`、`Model`、`Order` —— LED 数量、芯片型号、颜色顺序；`MaxCount` —— 固件中的容量（只读）\n\n**📤 发送**\n- 颜色、效果和速度立即生效\n- 「硬件」区块在本地编辑，点击「保存」一次性发送 —— 灯带将以新参数重启\n\n**💡 提示**\n- 颜色不对（红色变绿色）—— 更改颜色顺序：WS2812 通常为 GRB，部分 WS2811 为 RGB 或 BRG\n- 数据引脚和传输方式（RMT/SPI）在固件中设定，此处无法修改\n\n⚙️ 若分组不是 `LST` —— 在组件设置中修改前缀（ID）。",
     ],
+    "component.info.WidgetPFD": [
+        "🎯 **Пилотажный дисплей (PFD)** — главный прибор для контроля полёта: положение аппарата в пространстве, скорость, высота, курс и состояние систем.\n\n**🔗 Связь с устройством** — поля группы `MAV` (телеметрия автопилота MAVLink), привязывать переменные не нужно\n- ✈️ `Roll`, `Pitch`, `Heading` — авиагоризонт и лента курса (приходят ~20 раз в секунду, движение сглаживается)\n- 📈 `GSpeed`, `ASpeed` — лента путевой скорости и воздушная числом; `Alt`, `Climb` — лента высоты над точкой взлёта и вариометр\n- 🧭 `Vx`, `Vy` — трек (розовая метка на ленте курса), `HomeLat`/`HomeLon` — расстояние и направление на точку взлёта (зелёная метка)\n- 🛰️ Строка состояния: `Armed`, `Mode` (название по типу аппарата `VType`), GPS `Fix`/`Sat`, батарея `BV`/`BC`/`BRem`\n- 📍 Под прибором: `Lat`/`Lon`, `AltMSL`, `Press`, `Temp`\n\n**🚦 Границы** (в настройках виджета)\n- Мин./макс. скорость, макс. высота — красные зоны на лентах; предельный крен — красная дуга, указатель крена краснеет\n- Низкий заряд — батарея подсвечивается\n- Нет данных дольше заданного времени — прибор перечёркнут и помечен «НЕТ ДАННЫХ»\n\n**📱 Размер** — в узкой ячейке ленты скорости и высоты заменяются числами поверх горизонта.\n\n⚙️ Другая группа вместо `MAV` (например собственная курсовертикаль) — поменяйте префикс (ID) в настройках виджета.",
+        '🎯 **Primary flight display (PFD)** — the main instrument for flight monitoring: attitude, speed, altitude, heading and system status.\n\n**🔗 Device link** — fields of the `MAV` group (MAVLink autopilot telemetry), no variable binding needed\n- ✈️ `Roll`, `Pitch`, `Heading` — attitude indicator and heading tape (~20 times a second, motion is smoothed)\n- 📈 `GSpeed`, `ASpeed` — ground speed tape and airspeed as a number; `Alt`, `Climb` — altitude above home tape and vertical speed\n- 🧭 `Vx`, `Vy` — track (magenta mark on the heading tape), `HomeLat`/`HomeLon` — distance and direction to home (green mark)\n- 🛰️ Status bar: `Armed`, `Mode` (name by vehicle type `VType`), GPS `Fix`/`Sat`, battery `BV`/`BC`/`BRem`\n- 📍 Below the instrument: `Lat`/`Lon`, `AltMSL`, `Press`, `Temp`\n\n**🚦 Limits** (in widget settings)\n- Min/max speed, max altitude — red bands on the tapes; bank limit — red arc, the bank pointer turns red\n- Low battery — the battery is highlighted\n- No data for longer than the set time — the instrument is crossed out and marked "NO DATA"\n\n**📱 Size** — in a narrow cell the speed and altitude tapes become numbers over the horizon.\n\n⚙️ A group other than `MAV` (e.g. the device\'s own AHRS) — change the prefix (ID) in widget settings.',
+        "🎯 **主飞行显示器（PFD）** —— 飞行监控的主要仪表：姿态、速度、高度、航向和系统状态。\n\n**🔗 与设备的关联** —— `MAV` 分组的字段（MAVLink 自驾仪遥测），无需绑定变量\n- ✈️ `Roll`、`Pitch`、`Heading` —— 姿态仪和航向带（约每秒 20 次，运动经过平滑）\n- 📈 `GSpeed`、`ASpeed` —— 地速带和空速数值；`Alt`、`Climb` —— 相对起飞点高度带和升降速度\n- 🧭 `Vx`、`Vy` —— 航迹（航向带上的粉色标记），`HomeLat`/`HomeLon` —— 到起飞点的距离和方向（绿色标记）\n- 🛰️ 状态栏：`Armed`、`Mode`（按机型 `VType` 显示名称）、GPS `Fix`/`Sat`、电池 `BV`/`BC`/`BRem`\n- 📍 仪表下方：`Lat`/`Lon`、`AltMSL`、`Press`、`Temp`\n\n**🚦 限值**（在组件设置中）\n- 最小/最大速度、最大高度 —— 速度带和高度带上的红色区域；最大坡度 —— 红色弧线，坡度指针变红\n- 低电量 —— 电池高亮\n- 超过设定时间无数据 —— 仪表被划叉并标记「无数据」\n\n**📱 尺寸** —— 在窄单元格中，速度带和高度带变为地平线上的数字。\n\n⚙️ 若分组不是 `MAV`（例如设备自身的航姿系统）—— 在组件设置中修改前缀（ID）。",
+    ],
     "component.info.WidgetStackInfo": [
         "🎯 **Виджет «Память и задачи»** — отладка: свободная память и запас стека задач прошивки.\n\n**🔗 Связь с устройством** — один объект `StackInfo` из ответа на `GET StackInfo`\n- 📊 **Кучи** `Heap[]`: занято / всего, свободно и минимум свободного с момента старта; светлая часть полосы — пик занятости\n- 🧵 **Задачи** `Tasks[]`: имя, состояние, приоритет, ядро (ESP32), минимальный запас стека в байтах\n\n**⚙️ Настройки**\n- Порог запаса стека — меньше порога красным, меньше удвоенного — оранжевым\n- Автоопрос: выкл / 1 / 5 / 10 с; свёрнутый виджет не опрашивает\n\n💡 Задачи всегда отсортированы по запасу стека — самые рискованные сверху.",
         "🎯 **Memory and tasks widget** — debugging: free memory and firmware task stack headroom.\n\n**🔗 Device link** — a single `StackInfo` object from the `GET StackInfo` response\n- 📊 **Heaps** `Heap[]`: used / total, free and minimum free since boot; the light part of the bar is the usage peak\n- 🧵 **Tasks** `Tasks[]`: name, state, priority, core (ESP32), minimum stack headroom in bytes\n\n**⚙️ Settings**\n- Stack headroom threshold — below it red, below double — orange\n- Auto-polling: off / 1 / 5 / 10 s; a collapsed widget doesn't poll\n\n💡 Tasks are always sorted by stack headroom — the riskiest on top.",

package/dist/types.d.ts

@@ -15,10 +15,10 @@ export declare const updateComponent: (component: UIComponent, updates: Partial<
 }>) => {
     access: "full" | "viewOnly" | "hidden" | undefined;
     name: string | undefined;
-    properties: IAccordionProps | IButtonProps | IColorPickerProps | IDividerProps | IFileAttachProps | IGraphProps | IInputProps | IJoystickProps | IMapProps | IPeriodChartProps | IProgressBarProps | ISelectProps<unknown> | ISliderProps | ISwitchProps | ITableProps<object> | ITabsProps | ITextFieldProps | IWidgetProps | IWidgetWiFiProps | IWidgetDeviceInfoProps | IWidgetFileSystemProps | IWidgetStackInfoProps | IWidgetRGBStripProps;
+    properties: IAccordionProps | IButtonProps | IColorPickerProps | IDividerProps | IFileAttachProps | IGraphProps | IInputProps | IJoystickProps | IMapProps | IPeriodChartProps | IProgressBarProps | ISelectProps<unknown> | ISliderProps | ISwitchProps | ITableProps<object> | ITabsProps | ITextFieldProps | IWidgetProps | IWidgetWiFiProps | IWidgetDeviceInfoProps | IWidgetFileSystemProps | IWidgetStackInfoProps | IWidgetRGBStripProps | IWidgetPFDProps;
     eventHandler: IUIComponentHandler | undefined;
     id: string;
-    type: "Accordion" | "Button" | "ColorPicker" | "Divider" | "FileAttach" | "Graph" | "Input" | "Joystick" | "Map" | "PeriodChart" | "ProgressBar" | "Select" | "Slider" | "Switch" | "Table" | "Tabs" | "TextField" | "VideoViewer" | "Widget" | "WidgetWiFi" | "WidgetDeviceInfo" | "WidgetFileSystem" | "WidgetStackInfo" | "WidgetRGBStrip";
+    type: "Accordion" | "Button" | "ColorPicker" | "Divider" | "FileAttach" | "Graph" | "Input" | "Joystick" | "Map" | "PeriodChart" | "ProgressBar" | "Select" | "Slider" | "Switch" | "Table" | "Tabs" | "TextField" | "VideoViewer" | "Widget" | "WidgetWiFi" | "WidgetDeviceInfo" | "WidgetFileSystem" | "WidgetStackInfo" | "WidgetRGBStrip" | "WidgetPFD";
     position: Required<Position>;
     parentId: string;
 };
@@ -26,8 +26,8 @@ export interface UIComponent {
     id: string;
     name?: string;
     access?: "full" | "viewOnly" | "hidden";
-    type: "Accordion" | "Button" | "ColorPicker" | "Divider" | "FileAttach" | "Graph" | "Input" | "Joystick" | "Map" | "PeriodChart" | "ProgressBar" | "Select" | "Slider" | "Switch" | "Table" | "Tabs" | "TextField" | "VideoViewer" | "Widget" | "WidgetWiFi" | "WidgetDeviceInfo" | "WidgetFileSystem" | "WidgetStackInfo" | "WidgetRGBStrip";
-    properties: IAccordionProps | IButtonProps | IColorPickerProps | IDividerProps | IFileAttachProps | IGraphProps | IInputProps | IJoystickProps | IMapProps | IPeriodChartProps | IProgressBarProps | ISelectProps | ISliderProps | ISwitchProps | ITableProps<object> | ITabsProps | ITextFieldProps | IWidgetProps | IWidgetWiFiProps | IWidgetDeviceInfoProps | IWidgetFileSystemProps | IWidgetStackInfoProps | IWidgetRGBStripProps;
+    type: "Accordion" | "Button" | "ColorPicker" | "Divider" | "FileAttach" | "Graph" | "Input" | "Joystick" | "Map" | "PeriodChart" | "ProgressBar" | "Select" | "Slider" | "Switch" | "Table" | "Tabs" | "TextField" | "VideoViewer" | "Widget" | "WidgetWiFi" | "WidgetDeviceInfo" | "WidgetFileSystem" | "WidgetStackInfo" | "WidgetRGBStrip" | "WidgetPFD";
+    properties: IAccordionProps | IButtonProps | IColorPickerProps | IDividerProps | IFileAttachProps | IGraphProps | IInputProps | IJoystickProps | IMapProps | IPeriodChartProps | IProgressBarProps | ISelectProps | ISliderProps | ISwitchProps | ITableProps<object> | ITabsProps | ITextFieldProps | IWidgetProps | IWidgetWiFiProps | IWidgetDeviceInfoProps | IWidgetFileSystemProps | IWidgetStackInfoProps | IWidgetRGBStripProps | IWidgetPFDProps;
     position: Required<Position>;
     parentId: string;
     eventHandler?: IUIComponentHandler;
@@ -655,3 +655,50 @@ export interface IWidgetRGBStripProps {
     onChange?: (field: "Color" | "Effect" | "Speed", value: number | number[]) => void;
     onSave?: (hardware: Pick<IWidgetRGBStripConfig, "Count" | "Model" | "Order">) => void;
 }
+export interface IWidgetPFDData {
+    Roll: number;
+    Pitch: number;
+    Heading: number;
+    GSpeed: number;
+    ASpeed: number;
+    Climb: number;
+    Alt: number;
+    AltMSL: number;
+    Lat: number;
+    Lon: number;
+    Vx: number;
+    Vy: number;
+    Fix: number;
+    Sat: number;
+    BV: number;
+    BC: number;
+    BRem: number;
+    Mode: number;
+    VType: number;
+    Armed: number;
+    HomeLat: number;
+    HomeLon: number;
+    Press: number;
+    Temp: number;
+}
+export interface IWidgetPFDLimits {
+    speedMin?: number;
+    speedMax?: number;
+    bankMax?: number;
+    altMax?: number;
+    battLow?: number;
+    staleMs?: number;
+}
+export interface IWidgetPFDProps {
+    id?: string;
+    wrapperClass?: string;
+    componentClass?: string;
+    label?: {
+        name?: string;
+    };
+    value?: Partial<IWidgetPFDData>;
+    keys?: Partial<Record<keyof IWidgetPFDData, string>>;
+    limits?: IWidgetPFDLimits;
+    collapsed?: boolean;
+    persistKey?: string;
+}

package/package.json

@@ -1,6 +1,10 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.36.0",
+  "version": "1.37.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Oleg-Perevyshin/ElementsUI.git"
+  },
   "license": "MIT",
   "type": "module",
   "scripts": {