poe-svelte-ui-lib 1.84.0 → 1.85.0

package/dist/Graph/GraphProps.svelte

@@ -27,8 +27,7 @@
 
 {#snippet GraphIsTest()}
   <UI.Switch
-    wrapperClass="bg-blue"
-    label={{ name: $T("constructor.props.istest") }}
+    label={{ name: $T("constructor.props.simulation") }}
     value={component.properties.isTest ? 1 : 0}
     options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
     onChange={(value) => updateProperty("isTest", value === 1, component, onPropertyChange)}
@@ -44,35 +43,37 @@
   />
 {/snippet}
 
-{#if forConstructor}
-  <div class="flex flex-col gap-2">
-    <PropsGroup label={$T("constructor.props.group.general")}>
-      <CommonSnippets snippet="Access" {component} {onPropertyChange} />
-      <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
-    </PropsGroup>
-    <PropsGroup label={$T("constructor.props.group.appearance")}>
-      <CommonSnippets snippet="Label" {component} {onPropertyChange} />
-      <CommonSnippets snippet="LabelAlign" initialValue={initialAlign} {component} {onPropertyChange} />
-    </PropsGroup>
-    <PropsGroup label={$T("constructor.props.group.behavior")}>
-      {@render GraphIsTest()}
-      {@render GraphSettings()}
-    </PropsGroup>
+<div class="flex flex-col gap-2">
+  <PropsGroup>
+    {@render GraphIsTest()}
+  </PropsGroup>
+  <!-- В режиме имитации остальные свойства не учитываются, поэтому вся панель бледная и недоступна -->
+  <div class={twMerge("flex flex-col gap-2 transition-opacity", component.properties.isTest && "opacity-40 grayscale")} inert={component.properties.isTest}>
+    {#if forConstructor}
+      <PropsGroup label={$T("constructor.props.group.general")}>
+        <CommonSnippets snippet="Access" {component} {onPropertyChange} />
+        <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
+      </PropsGroup>
+      <PropsGroup label={$T("constructor.props.group.appearance")}>
+        <CommonSnippets snippet="Label" {component} {onPropertyChange} />
+        <CommonSnippets snippet="LabelAlign" initialValue={initialAlign} {component} {onPropertyChange} />
+      </PropsGroup>
+      <PropsGroup label={$T("constructor.props.group.behavior")}>
+        {@render GraphSettings()}
+      </PropsGroup>
+    {:else}
+      <PropsGroup label={$T("constructor.props.group.general")}>
+        <CommonSnippets snippet="Identificator" {component} {onPropertyChange} />
+        <CommonSnippets snippet="Access" {component} {onPropertyChange} />
+      </PropsGroup>
+      <PropsGroup label={$T("constructor.props.group.appearance")}>
+        <CommonSnippets snippet="Label" {component} {onPropertyChange} />
+        <CommonSnippets snippet="LabelClass" initialValue={initialAlign} {component} {onPropertyChange} />
+      </PropsGroup>
+      <PropsGroup label={$T("constructor.props.group.behavior")}>
+        <CommonSnippets snippet="WrapperClass" {component} {onPropertyChange} />
+        {@render GraphSettings()}
+      </PropsGroup>
+    {/if}
   </div>
-{:else}
-  <div class="flex flex-col gap-2">
-    <PropsGroup label={$T("constructor.props.group.general")}>
-      <CommonSnippets snippet="Identificator" {component} {onPropertyChange} />
-      <CommonSnippets snippet="Access" {component} {onPropertyChange} />
-    </PropsGroup>
-    <PropsGroup label={$T("constructor.props.group.appearance")}>
-      <CommonSnippets snippet="Label" {component} {onPropertyChange} />
-      <CommonSnippets snippet="LabelClass" initialValue={initialAlign} {component} {onPropertyChange} />
-    </PropsGroup>
-    <PropsGroup label={$T("constructor.props.group.behavior")}>
-      <CommonSnippets snippet="WrapperClass" {component} {onPropertyChange} />
-      {@render GraphIsTest()}
-      {@render GraphSettings()}
-    </PropsGroup>
-  </div>
-{/if}
+</div>

package/dist/Graph/README.md

@@ -35,7 +35,7 @@
 
 **Статический.** Если передан непустой `historyData`, график рисует готовый ряд с отметками времени, например энергию за сутки по часам. Точки сортируются по времени сами. Новый массив `historyData` перерисовывает график целиком.
 
-`isTest` включает случайные данные. Удобно, чтобы посмотреть график без устройства.
+`isTest` включает режим имитации: случайные данные, точка каждые 50 мс. Удобно, чтобы посмотреть график без устройства. Пока режим включён, данные устройства и `refreshRate` не учитываются. В конструкторе все остальные свойства становятся бледными и недоступными, пока имитацию не выключат.
 
 ## Пропсы
 
@@ -47,7 +47,7 @@
 | `streamingData.data` | `{ name, value }[] \| null` | `[]` | Текущие значения линий для живого режима |
 | `refreshRate` | `number` | `0` | Период добавления точек, мс. `0` — по изменению значений |
 | `historyData` | `{ name, points: { value, timestamp }[] }[]` | `[]` | Готовый ряд для статического режима. `timestamp` в миллисекундах, как `Date.now()` |
-| `isTest` | `boolean` | `false` | Случайные данные, точка каждые 50 мс |
+| `isTest` | `boolean` | `false` | Режим имитации: случайные данные, точка каждые 50 мс |
 
 Колбэков нет.
 

package/dist/WidgetMap/README.md

@@ -52,6 +52,7 @@ Telemetry_SendObject(g_telemetry_stream, g_mcfg.DevSN, "Data", dev, sizeof(dev)
 - **Траектория.** Точка добавляется только при смене координат. Курс и высота могут меняться чаще.
 - **«Показать все»** в шапке вписывает все видимые объекты в экран, один объект приближает. Сама карта вид не меняет, ведь объектов может быть много.
 - **Клик по маркеру** открывает карточку: имя, группа, координаты, высота, курс, спутники, серийный номер. Кнопки «Копировать» (всё в буфер обмена) и «Скрыть» (до следующего обновления объекта).
+- **Слежение.** Кнопка «Следить» в карточке залипает. Один отслеживаемый объект всегда в центре карты. Несколько вписываются в карту при включении слежения, дальше карта держит в центре их середину. Масштаб остаётся за оператором: карта сама отдаляется, только когда объект уходит за край. Под маркером отслеживаемого объекта точка, она видна и при закрытой карточке. Если объект пропал с карты, слежение за ним продолжится, когда он появится снова. «Скрыть» снимает слежение.
 - **Шапка** показывает, сколько объектов на связи. Зелёный значит все, серый часть, красный ни одного.
 - **Только 2D.** Наклонить карту нельзя. Правая кнопка мыши только поворачивает карту, компас под кнопками масштаба возвращает её на север.
 - Карта светлая или тёмная по теме страницы и переключается вместе с ней.
@@ -61,7 +62,7 @@ Telemetry_SendObject(g_telemetry_stream, g_mcfg.DevSN, "Data", dev, sizeof(dev)
 
 ## Режим имитации
 
-`isTest` включает два объекта `SIM-1` и `SIM-2` без устройства. Они летают по одному маршруту над Минском, в пределах примерно 1,5 км, и обновляются раз в полсекунды. При включении карта переходит к этому району. Пока режим включён, `value` и `groups` не учитываются, в конструкторе поле групп неактивно.
+`isTest` включает имитацию шести аппаратов `SIM-1`-`SIM-6` без устройства. Они летают над одним районом Минска, в пределах пары километров, и обновляются раз в полсекунды. На связи всегда три аппарата. Через 40-100 секунд один из них пропадает, и его сразу сменяет тот, кто молчит дольше всех. Поэтому видно все состояния маркера: свежий, красный устаревший, скрытый и снова появившийся. При включении карта переходит к этому району. Пока режим включён, `value` и `groups` не учитываются. В конструкторе все остальные свойства становятся бледными и недоступными, пока имитацию не выключат.
 
 ## Пропсы
 

package/dist/WidgetMap/WidgetMap.svelte

@@ -65,17 +65,69 @@
   /* (0, 0) и нечисловые координаты — признак отсутствия фикса */
   const hasFix = (lat: unknown, lon: unknown) => Number.isFinite(lat) && Number.isFinite(lon) && (lat !== 0 || lon !== 0)
 
-  /* Режим имитации: два объекта на одном маршруте, данные и группы устройства не учитываются */
-  const SIM_GROUPS = ["SIM-1", "SIM-2"]
-  const SIM_SN = ["10.10.001-01_0000804500006B3600004000:F76F", "10.10.001-01_0000804500006B3600004001:3A9C"]
+  /* Режим имитации: шесть аппаратов над одним районом сами выходят на связь и пропадают, данные и группы устройства не учитываются */
+  const SIM_COUNT = 6
+  const SIM_ONLINE = 3
+  const SIM_GROUPS = Array.from({ length: SIM_COUNT }, (_, i) => `SIM-${i + 1}`)
+  const SIM_SN = [
+    "10.10.001-01_0000804500006B3600004000:F76F",
+    "10.10.001-01_0000441B0000F68C0000561C:36B1",
+    "20.00.000-01_000068B60000B33B0000A520:5180",
+    "00.00.000-00_0000AC670000B22B00007428:DBC5",
+    "25.00.000-02_0000A0850000E31300004C5C:8D50",
+    "50.00.000-00_0000DCDA00000C1800003194:2BC6",
+  ]
+  /* Сдвиг маршрута каждого аппарата, м: север, восток — чтобы не летали друг за другом */
+  const SIM_SHIFT: [number, number][] = [
+    [0, 0],
+    [-400, 700],
+    [700, -900],
+    [-800, 600],
+    [1100, 900],
+    [-600, -1200],
+  ]
+  const randomSec = (min: number, max: number) => (min + Math.random() * (max - min)) * 1000
   let simValue: Record<string, Partial<IWidgetMapData>> | undefined = $state()
   $effect(() => {
     if (!isTest) return
-    const sims = [createFlightSim(), createFlightSim(3)]
-    const frame = (dt: number) =>
-      Object.fromEntries(SIM_GROUPS.map((group, i) => [group, { ...sims[i](dt), DevName: group, DevSN: SIM_SN[i] }]))
-    simValue = frame(0)
-    const timer = setInterval(() => (simValue = frame(0.5)), 500)
+    /* На связи всегда три аппарата: когда один пропадает, его сменяет тот, кто молчит дольше всех; молчащий маркер успевает покраснеть и скрыться */
+    const fleet = SIM_GROUPS.map((group, i) => ({
+      group,
+      sim: createFlightSim(i % 7),
+      online: i < SIM_ONLINE,
+      switchAt: i < SIM_ONLINE ? Date.now() + randomSec(20 + i * 25, 40 + i * 25) : 0,
+      offlineSince: i,
+    }))
+    const kmLat = 111320
+    const kmLon = 111320 * Math.cos((HOME.lat * Math.PI) / 180)
+    const frames: Record<string, Partial<IWidgetMapData>> = {}
+    /* Модель летит всегда; пока аппарат без связи, его последний кадр не меняется — маркер краснеет, затем скрывается */
+    const tick = (dt: number) => {
+      const t = Date.now()
+      fleet.forEach((f, i) => {
+        const data = f.sim(dt)
+        if (f.online && t >= f.switchAt) {
+          const next = fleet.filter((x) => !x.online).sort((a, b) => a.offlineSince - b.offlineSince)[0]
+          f.online = false
+          f.offlineSince = t
+          next.online = true
+          next.switchAt = t + randomSec(40, 100)
+        }
+        if (!f.online) return
+        frames[f.group] = {
+          Lat: data.Lat + SIM_SHIFT[i][0] / kmLat,
+          Lon: data.Lon + SIM_SHIFT[i][1] / kmLon,
+          Alt: data.Alt + i * 15,
+          Heading: data.Heading,
+          Sat: data.Sat - (i % 3),
+          DevName: f.group,
+          DevSN: SIM_SN[i],
+        }
+      })
+      simValue = { ...frames }
+    }
+    tick(0)
+    const timer = setInterval(() => tick(0.5), 500)
     return () => {
       clearInterval(timer)
       simValue = undefined
@@ -171,8 +223,44 @@
   const hideBoard = (group: string) => {
     const b = boards.find((x) => x.group === group)
     if (b) b.hiddenAt = b.lastChange
+    followed = followed.filter((g) => g !== group)
   }
 
+  /* Слежение: один объект держится в центре карты, несколько — вписываются в карту при включении и дальше только центрируются; масштаб остаётся за оператором, карта отдаляется сама, лишь когда объект уходит за край */
+  let followed: string[] = $state([])
+  const toggleFollow = (group: string) => (followed = followed.includes(group) ? followed.filter((g) => g !== group) : [...followed, group])
+  const FOLLOW_PADDING = 60
+  let lastFollowKey = ""
+  $effect(() => {
+    const map = mapInstance
+    const targets = visibleBoards.filter((b) => followed.includes(b.group))
+    if (!map || targets.length === 0) return
+    untrack(() => {
+      if (targets.length === 1) return map.easeTo({ center: [targets[0].lon, targets[0].lat], duration: 300 })
+      const lons = targets.map((b) => b.lon)
+      const lats = targets.map((b) => b.lat)
+      const bounds: [[number, number], [number, number]] = [
+        [Math.min(...lons), Math.min(...lats)],
+        [Math.max(...lons), Math.max(...lats)],
+      ]
+      const key = targets.map((b) => b.group).join(" ")
+      if (key !== lastFollowKey) {
+        lastFollowKey = key
+        return map.fitBounds(bounds, { padding: FOLLOW_PADDING, maxZoom: 16, duration: 300 })
+      }
+      const center: [number, number] = [(bounds[0][0] + bounds[1][0]) / 2, (bounds[0][1] + bounds[1][1]) / 2]
+      /* Помещаются ли все объекты, если поставить их середину в центр */
+      const { width, height } = map.getContainer().getBoundingClientRect()
+      const mid = map.project(center)
+      const fits = targets.every((b) => {
+        const p = map.project([b.lon, b.lat])
+        return Math.abs(p.x - mid.x) <= width / 2 - FOLLOW_PADDING && Math.abs(p.y - mid.y) <= height / 2 - FOLLOW_PADDING
+      })
+      if (fits) map.easeTo({ center, duration: 300 })
+      else map.fitBounds(bounds, { padding: FOLLOW_PADDING, maxZoom: map.getZoom(), duration: 300 })
+    })
+  })
+
   const copyBoard = (b: Board) => {
     navigator.clipboard.writeText(
       `DevName: ${b.name}\nDevSN: ${b.sn}\nGroup: ${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}`,
@@ -287,6 +375,7 @@
         {/if}
 
         {#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">
@@ -318,6 +407,10 @@
                   {/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}
 
@@ -350,8 +443,8 @@
 
                 {#if board.sn}<p class="text-center font-mono text-[0.6rem] tracking-wide uppercase">{board.sn}</p>{/if}
 
-                <div class="flex items-center justify-between border-t border-(--hairline-color) pt-1">
-                  <div class="relative flex items-center">
+                <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) => {
@@ -374,7 +467,24 @@
                   </div>
 
                   <button
-                    class="cursor-pointer rounded-lg border-none bg-transparent p-0.5 text-(--red-color) transition hover:opacity-80"
+                    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>
+
+                  <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)}

package/dist/WidgetMap/WidgetMapProps.svelte

@@ -8,6 +8,7 @@
   import WidgetAccentPicker from "../WidgetAccentPicker.svelte"
   import CommonSnippets from "../CommonSnippets.svelte"
   import PropsGroup from "../PropsGroup.svelte"
+  import { twMerge } from "tailwind-merge"
 
   const {
     component,
@@ -37,53 +38,58 @@
 </script>
 
 <div class="flex flex-col gap-2">
-  <PropsGroup label={$T("constructor.props.group.general")}>
-    <TextsEditor {component} {onPropertyChange} />
+  <PropsGroup>
     <UI.Switch
       label={{ name: $T("constructor.props.simulation") }}
       value={component.properties.isTest ? 1 : 0}
       options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
       onChange={(value) => updateProperty("isTest", value === 1, component, onPropertyChange)}
     />
-    <UI.Input label={{ name: $T("widget.map.groups") }} disabled={component.properties.isTest} 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: $T("widget.map.height") }}
-      type="buttons"
-      options={HEIGHT_OPTIONS}
-      value={HEIGHT_OPTIONS.find((opt) => opt.value === (component.properties.height ?? 400)) ?? HEIGHT_OPTIONS[1]}
-      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={$T("widget.map.defaults")}>
-    <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 class={twMerge("flex flex-col gap-2 transition-opacity", component.properties.isTest && "opacity-40 grayscale")} inert={component.properties.isTest}>
+    <PropsGroup label={$T("constructor.props.group.general")}>
+      <TextsEditor {component} {onPropertyChange} />
+      <UI.Input label={{ name: $T("widget.map.groups") }} 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: $T("widget.map.height") }}
+        type="buttons"
+        options={HEIGHT_OPTIONS}
+        value={HEIGHT_OPTIONS.find((opt) => opt.value === (component.properties.height ?? 400)) ?? HEIGHT_OPTIONS[1]}
+        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={$T("widget.map.defaults")}>
+      <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>
 </div>

package/dist/WidgetPFD/README.md

@@ -114,7 +114,7 @@
 
 ## Режим имитации
 
-`isTest` включает полёт без устройства: прибор получает кадр каждые 50 мс от той же модели полёта, что в прошивке 20.00.000-01. Это облёт маршрута над Минском. Пока режим включён, `value`, `id` и `limits.staleMs` не учитываются, в конструкторе эти поля неактивны. Остальные границы `limits` работают, их удобно подбирать на имитации. Модель полёта лежит в `src/lib/flightSim.ts`.
+`isTest` включает полёт без устройства: прибор получает кадр каждые 50 мс от той же модели полёта, что в прошивке 20.00.000-01. Это облёт маршрута над Минском. Пока режим включён, `value`, `id` и `limits.staleMs` не учитываются. В конструкторе все остальные свойства становятся бледными и недоступными, пока имитацию не выключат. Сохранённые заголовок, цвет и границы зон на имитации видны как есть. Модель полёта лежит в `src/lib/flightSim.ts`.
 
 ## Пропсы
 

package/dist/WidgetPFD/WidgetPFDProps.svelte

@@ -6,6 +6,7 @@
   import { updateProperty, type UIComponent, type IWidgetPFDProps, type IWidgetPFDLimits } from "../types"
   import WidgetAccentPicker from "../WidgetAccentPicker.svelte"
   import PropsGroup from "../PropsGroup.svelte"
+  import { twMerge } from "tailwind-merge"
 
   const {
     component,
@@ -27,35 +28,39 @@
 </script>
 
 <div class="flex flex-col gap-2">
-  <PropsGroup label={$T("constructor.props.group.general")}>
-    <TextsEditor {component} {onPropertyChange} />
+  <PropsGroup>
     <UI.Switch
       label={{ name: $T("constructor.props.simulation") }}
       value={component.properties.isTest ? 1 : 0}
       options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
       onChange={(value) => updateProperty("isTest", value === 1, component, onPropertyChange)}
     />
-    <UI.Input
-      label={{ name: $T("pfd.props.group") }}
-      disabled={component.properties.isTest}
-      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={$T("pfd.limits")}>
-    <div class="grid grid-cols-2 gap-2">
-      <UI.Input label={{ name: $T("pfd.props.speed_min") }} type="number" value={limits.speedMin} onUpdate={(v) => setLimit("speedMin", v)} />
-      <UI.Input label={{ name: $T("pfd.props.speed_max") }} type="number" value={limits.speedMax} onUpdate={(v) => setLimit("speedMax", v)} />
-      <UI.Input label={{ name: $T("pfd.props.bank_max") }} type="number" value={limits.bankMax} onUpdate={(v) => setLimit("bankMax", v)} />
-      <UI.Input label={{ name: $T("pfd.props.alt_max") }} type="number" value={limits.altMax} onUpdate={(v) => setLimit("altMax", v)} />
-      <UI.Input label={{ name: $T("pfd.props.g_min") }} type="number" value={limits.gMin} onUpdate={(v) => setLimit("gMin", v)} />
-      <UI.Input label={{ name: $T("pfd.props.g_max") }} type="number" value={limits.gMax} onUpdate={(v) => setLimit("gMax", v)} />
-      <UI.Input label={{ name: $T("pfd.props.batt_low") }} type="number" value={limits.battLow} onUpdate={(v) => setLimit("battLow", v)} />
-      <UI.Input disabled={component.properties.isTest} label={{ name: $T("pfd.props.stale") }} type="number" value={limits.staleMs ?? 2000} onUpdate={(v) => setLimit("staleMs", v)} />
-    </div>
   </PropsGroup>
+  <!-- В режиме имитации остальные свойства не учитываются, поэтому вся панель бледная и недоступна -->
+  <div class={twMerge("flex flex-col gap-2 transition-opacity", component.properties.isTest && "opacity-40 grayscale")} inert={component.properties.isTest}>
+    <PropsGroup label={$T("constructor.props.group.general")}>
+      <TextsEditor {component} {onPropertyChange} />
+      <UI.Input
+        label={{ name: $T("pfd.props.group") }}
+        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={$T("pfd.limits")}>
+      <div class="grid grid-cols-2 gap-2">
+        <UI.Input label={{ name: $T("pfd.props.speed_min") }} type="number" value={limits.speedMin} onUpdate={(v) => setLimit("speedMin", v)} />
+        <UI.Input label={{ name: $T("pfd.props.speed_max") }} type="number" value={limits.speedMax} onUpdate={(v) => setLimit("speedMax", v)} />
+        <UI.Input label={{ name: $T("pfd.props.bank_max") }} type="number" value={limits.bankMax} onUpdate={(v) => setLimit("bankMax", v)} />
+        <UI.Input label={{ name: $T("pfd.props.alt_max") }} type="number" value={limits.altMax} onUpdate={(v) => setLimit("altMax", v)} />
+        <UI.Input label={{ name: $T("pfd.props.g_min") }} type="number" value={limits.gMin} onUpdate={(v) => setLimit("gMin", v)} />
+        <UI.Input label={{ name: $T("pfd.props.g_max") }} type="number" value={limits.gMax} onUpdate={(v) => setLimit("gMax", v)} />
+        <UI.Input label={{ name: $T("pfd.props.batt_low") }} type="number" value={limits.battLow} onUpdate={(v) => setLimit("battLow", v)} />
+        <UI.Input label={{ name: $T("pfd.props.stale") }} type="number" value={limits.staleMs ?? 2000} onUpdate={(v) => setLimit("staleMs", v)} />
+      </div>
+    </PropsGroup>
+  </div>
 </div>

package/dist/locales/translations.js

@@ -295,7 +295,6 @@ const translations = {
     "constructor.props.divider.width": { ru: "Толщина полосы", en: "Line width", zh: "线条粗细" },
     "constructor.props.disabled": { ru: "Отключить", en: "Disable", zh: "禁用" },
     "constructor.props.readonly": { ru: "Только чтение", en: "Read only", zh: "只读" },
-    "constructor.props.istest": { ru: "Тестовые данные", en: "Test data", zh: "测试数据" },
     "constructor.props.simulation": { ru: "Режим имитации", en: "Simulation mode", zh: "模拟模式" },
     "constructor.props.refreshrate": { ru: "Скорость обновления", en: "Refresh rate", zh: "刷新速率" },
     "constructor.props.variable": { ru: "Имя переменной", en: "Variable name", zh: "变量名" },
@@ -750,6 +749,7 @@ const translations = {
     "widget.rgb.count_invalid": { ru: "Количество — целое от 1 до {max}", en: "Count must be an integer from 1 to {max}", zh: "数量必须是 1 到 {max} 的整数" },
     "widget.rgb.group": { ru: "Группа ленты (ID)", en: "Strip group (ID)", zh: "灯带组 (ID)" },
     "widget.map.title": { ru: "Карта", en: "Map", zh: "地图" },
+    "widget.map.follow": { ru: "Следить", en: "Follow", zh: "跟踪" },
     "widget.map.groups": { ru: "Группы полей (через пробел)", en: "Field groups (space-separated)", zh: "字段组（以空格分隔）" },
     "widget.map.height": { ru: "Высота карты", en: "Map height", zh: "地图高度" },
     "widget.map.defaults": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.84.0",
+  "version": "1.85.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Oleg-Perevyshin/ElementsUI.git"