poe-svelte-ui-lib 1.93.0 → 1.95.0

package/dist/WidgetDeviceInfo/WidgetDeviceInfo.svelte

@@ -26,7 +26,7 @@
   }: IWidgetDeviceInfoProps = $props()
 
   /* Подсказки - кнопка «?» в шапке, выбор общий для всех WidgetDeviceInfo */
-  const hints = hintsSetting("WidgetDeviceInfo")
+  const hints = $derived(hintsSetting("WidgetDeviceInfo", persistKey))
 
   let confirmReset = $state(false)
   const factoryReset = () => {

package/dist/WidgetFileSystem/WidgetFileSystem.svelte

@@ -30,7 +30,7 @@
   }: IWidgetFileSystemProps = $props()
 
   /* Подсказки - кнопка «?» в шапке, выбор общий для всех WidgetFileSystem */
-  const hints = hintsSetting("WidgetFileSystem")
+  const hints = $derived(hintsSetting("WidgetFileSystem", persistKey))
 
   let accentStyle = $derived(widgetAccentStyle(componentClass ?? ""))
 

package/dist/WidgetMap/README.md

@@ -52,6 +52,7 @@ Telemetry_SendObject(g_telemetry_stream, g_mcfg.DevSN, "Data", dev, sizeof(dev)
 - **Свежесть.** Маркер зелёный, пока значения объекта менялись в пределах таймаута. Без изменений он красный, а ещё через таймаут скрывается до новых данных.
 - **Траектория.** Точка добавляется только при смене координат. Курс и высота могут меняться чаще.
 - **«Показать все»** в шапке вписывает все видимые объекты в экран, один объект приближает. Сама карта вид не меняет, ведь объектов может быть много.
+- **«Показать все» в «Маршруте» и «Агро»** вписывает весь маршрут или все поля, зоны и точку взлёта. Когда карта появляется (загрузка страницы, разворачивание виджета), она вписывается сама, без анимации.
 - **Клик по маркеру** открывает карточку: имя, группа, координаты, высота, курс, спутники, серийный номер. Кнопки «Копировать» (всё в буфер обмена) и «Скрыть» (до следующего обновления объекта).
 - **Слежение.** Кнопка «Следить» в карточке залипает. Один отслеживаемый объект всегда в центре карты. Несколько вписываются в карту при включении слежения, дальше карта держит в центре их середину. Масштаб остаётся за оператором: карта сама отдаляется, только когда объект уходит за край. Под маркером отслеживаемого объекта точка, она видна и при закрытой карточке. Если объект пропал с карты, слежение за ним продолжится, когда он появится снова. «Скрыть» снимает слежение.
 - **Шапка** показывает, сколько объектов на связи. Зелёный значит все, серый часть, красный ни одного.
@@ -94,7 +95,7 @@ Telemetry_SendObject(g_telemetry_stream, g_mcfg.DevSN, "Data", dev, sizeof(dev)
 
 `mode="agro"` превращает карту в генератор миссии для агродрона. Оператор обводит на карте одно или несколько полей и запретные зоны, задаёт угол проходов и ширину захвата. Карта строит траекторию, которая покрывает все поля, обходит зоны и выключает распылитель на разворотах и переходах. Готовую миссию можно скачать, скопировать или отправить на борт в формате QGC WPL 110 для автопилота ArduPilot.
 
-Аппараты из `groups` рисуются поверх миссии так же, как в режиме «Объекты»: маркер, карточка по клику и траектория, если она включена. План хранит владелец карты через `plan` и `onPlanChange`, миссия уходит наружу через `onSend`. Без `plan` показываются три демо-поля под Минском: большое с рощей, опорой ЛЭП и постройкой, среднее сложной формы с выступами, крюком и прудом, малое с вырезом и деревом. Между полями стоят зона-«галочка» и большая зона под средним полем, она задевает все три поля; перелёты их обходят. Ширина захвата по умолчанию 5 м, отступ от границ 2 м. Ширина захвата по умолчанию 5 м, отступ от границ 2 м.
+Аппараты из `groups` рисуются поверх миссии так же, как в режиме «Объекты»: маркер, карточка по клику и траектория, если она включена. План хранит владелец карты через `plan` и `onPlanChange`, миссия уходит наружу через `onSend`. Без `plan` показываются три демо-поля под Минском: большое сложной формы с прорезью и выступами, рощей, опорой ЛЭП и постройкой, среднее с выступами, крюком и прудом, малое с вырезом и деревом. Между полями стоит большая треугольная зона, внизу зона, которая задевает все три поля; перелёты их обходят. Ширина захвата по умолчанию 5 м, отступ от границ 2 м. Ширина захвата по умолчанию 5 м, отступ от границ 2 м.
 
 ### Как пользоваться
 
@@ -108,7 +109,7 @@ Telemetry_SendObject(g_telemetry_stream, g_mcfg.DevSN, "Data", dev, sizeof(dev)
 5. Блок **«Итог»** показывает контуры, площадь к обработке, покрытие, длину пути, время, расход раствора и число дозаправок.
 6. **«Скачать»**, **«Копировать»** или **«Отправить»** миссию.
 
-Точки контуров видны и перетаскиваются, только пока включён «Редактор полей» или «Редактор запретных зон». Потяните за середину стороны, чтобы добавить точку. Правый клик удаляет точку. Поля и зоны удаляются крестиком в блоке «Итог». Режим выключается той же кнопкой, кнопкой «Готово» или Esc.
+Точки контуров видны и перетаскиваются, только пока включён «Редактор полей» или «Редактор запретных зон». Потяните за середину стороны, чтобы добавить точку. Правый клик удаляет точку. Поля и зоны удаляются крестиком в блоке «Итог». Там же видно, где какое поле или зона: при наведении на строку контур подсвечивается на карте, нажатие на название приближает к нему карту. Подписей на самой карте нет, маленькой зоне их некуда поставить. Режим выключается той же кнопкой, кнопкой «Готово» или Esc.
 
 ### Как строится траектория
 

package/dist/WidgetMap/WidgetMap.svelte

@@ -44,7 +44,7 @@
   }: IWidgetMapProps = $props()
 
   /* Подсказки - кнопка «?» в шапке, выбор общий для всех WidgetMap */
-  const hints = hintsSetting("WidgetMap")
+  const hints = $derived(hintsSetting("WidgetMap", persistKey))
 
   let accentStyle = $derived(widgetAccentStyle(componentClass ?? ""))
 

package/dist/WidgetMap/mission/MapAgro.svelte

@@ -11,6 +11,8 @@
   import * as UI from "../.."
   import { MapLibre, NavigationControl, ScaleControl, FullScreenControl, CustomControl } from "../mapWrapper"
   import MissionLayers from "./MissionLayers.svelte"
+  import FitIcon from "../FitIcon.svelte"
+  import { createAutoFit, fitMapTo } from "./fit"
   import MissionSim from "./MissionSim.svelte"
   import SpinnerIcon from "./SpinnerIcon.svelte"
   import HelpText from "./HelpText.svelte"
@@ -52,7 +54,7 @@
     onSend,
   }: Props = $props()
 
-  const hints = hintsSetting("WidgetMap")
+  const hints = $derived(hintsSetting("WidgetMap", persistKey))
   let accentStyle = $derived(widgetAccentStyle(componentClass ?? ""))
 
   let hasMergedPersisted = false
@@ -285,6 +287,30 @@
       geometry: { type: "LineString", coordinates: s.points },
     })),
   })
+  /* Поле или зона, на которые навели в списке «Итога», подсвечиваются на карте; нажатие на название приближает карту к контуру */
+  let highlighted = $state<{ kind: "field" | "hole"; index: number } | null>(null)
+  let highlightGeo = $derived.by(() => {
+    if (!highlighted) return null
+    const ring = highlighted.kind === "field" ? fields[highlighted.index] : plan.holes[highlighted.index]
+    if (!ring || ring.length < 3) return null
+    return {
+      type: "FeatureCollection",
+      features: [{ type: "Feature", properties: { kind: highlighted.kind }, geometry: { type: "Polygon", coordinates: [closed(ring)] } }],
+    }
+  })
+  const flyTo = (ring: LngLat[]) => {
+    if (!mapInstance || ring.length < 3) return
+    const lngs = ring.map((p) => p[0])
+    const lats = ring.map((p) => p[1])
+    mapInstance.fitBounds(
+      [
+        [Math.min(...lngs), Math.min(...lats)],
+        [Math.max(...lngs), Math.max(...lats)],
+      ],
+      { padding: 60, maxZoom: 19, duration: 500 },
+    )
+  }
+
   let draftGeo = $derived({
     type: "FeatureCollection",
     features: drawing
@@ -406,6 +432,14 @@
     void isDarkMode
     mapColors = readMapColors(rootEl)
   })
+  /* «Показать все» в шапке и вписывание при появлении карты */
+  const missionPoints = (): LngLat[] => [...fields.flat(), ...plan.holes.flat(), ...(plan.start ? [plan.start] : [])]
+  const fitAll = (animate = true) => fitMapTo(mapInstance, missionPoints(), animate)
+  const autoFit = createAutoFit()
+  $effect(() => {
+    const map = mapInstance
+    untrack(() => autoFit(map, () => fitAll(false)))
+  })
 
   /* Мелкие зоны в м², остальное в га */
   const areaText = (m2: number) => (m2 < 1000 ? `${fmt(m2, 0)} ${$T("widget.mission.m2")}` : `${fmt(m2 / 10000, 2)} ${$T("widget.mission.ha")}`)
@@ -470,22 +504,31 @@
 >
   <WidgetHeader icon={MissionIcon} label={label?.name || $T("widget.mission.title")} bind:collapsed {hints}>
     {#snippet right()}
-      <span class="flex items-center gap-3 text-[12px] font-semibold text-(--muted-color) tabular-nums">
-        {#if headerProgress !== null}
-          <span class="flex items-center gap-1.5" title={simulate ? $T("widget.sim.title") : $T("widget.mission.progressHint")}>
-            <span class="h-1.5 w-14 overflow-hidden rounded-full bg-(--hairline-color)"
-              ><span class="block h-full rounded-full bg-(--accent-color)" style="width: {Math.round(headerProgress * 100)}%"></span></span
+      <div class="flex items-center gap-3">
+        <UI.Button
+          wrapperClass="w-auto"
+          componentClass="bg-transparent px-3"
+          content={{ icon: FitIcon, name: $T("constructor.props.map.fitAll"), info: { text: $T("widget.mission.fitHint"), side: "bottom" } }}
+          disabled={collapsed || missionPoints().length === 0}
+          onClick={() => fitAll()}
+        />
+        <span class="flex items-center gap-3 text-[12px] font-semibold text-(--muted-color) tabular-nums">
+          {#if headerProgress !== null}
+            <span class="flex items-center gap-1.5" title={simulate ? $T("widget.sim.title") : $T("widget.mission.progressHint")}>
+              <span class="h-1.5 w-14 overflow-hidden rounded-full bg-(--hairline-color)"
+                ><span class="block h-full rounded-full bg-(--accent-color)" style="width: {Math.round(headerProgress * 100)}%"></span></span
+              >
+              {Math.round(headerProgress * 100)}%{#if live}
+                · {$T("widget.mission.treated")} {fmt(treatedHa, 2)} {$T("widget.mission.ha")}{/if}
+            </span>
+          {/if}
+          {#if stats}
+            <span class="text-[12px] font-semibold text-(--muted-color) tabular-nums"
+              >{fmt(stats.ha, 2)} {$T("widget.mission.ha")} · {fmt(stats.total, 2)} {$T("widget.mission.km")}</span
             >
-            {Math.round(headerProgress * 100)}%{#if live}
-              · {$T("widget.mission.treated")} {fmt(treatedHa, 2)} {$T("widget.mission.ha")}{/if}
-          </span>
-        {/if}
-        {#if stats}
-          <span class="text-[12px] font-semibold text-(--muted-color) tabular-nums"
-            >{fmt(stats.ha, 2)} {$T("widget.mission.ha")} · {fmt(stats.total, 2)} {$T("widget.mission.km")}</span
-          >
-        {/if}
-      </span>
+          {/if}
+        </span>
+      </div>
     {/snippet}
   </WidgetHeader>
 
@@ -542,6 +585,7 @@
             {onDragEnd}
             {onHandleRightClick}
             colors={mapColors}
+            highlight={highlightGeo}
             onCursor={(ll) => (cursor = ll)}
           />
           {@render overlay?.()}
@@ -682,9 +726,16 @@
                 <span class="text-[11px] font-semibold tracking-wide text-(--faint-color) uppercase">{$T("widget.mission.zones")}</span>
                 <div class="flex flex-col gap-1.5 rounded-lg bg-(--container-color) p-3 text-[13px] tabular-nums">
                   {#each fields as field, i}
-                    <div class="flex items-center justify-between gap-2">
-                      <span class="flex items-center gap-2"
-                        ><span class="size-2.5 rounded-sm bg-(--green-mark)"></span>{$T("widget.mission.field")} {i + 1}</span
+                    <div
+                      class="-mx-1.5 flex items-center justify-between gap-2 rounded-md px-1.5 transition-colors duration-150 hover:bg-(--green-soft)"
+                      role="listitem"
+                      onmouseenter={() => (highlighted = { kind: "field", index: i })}
+                      onmouseleave={() => (highlighted = null)}
+                    >
+                      <button
+                        class="flex cursor-pointer items-center gap-2 border-none bg-transparent p-0 text-left text-(--font-color)"
+                        title={$T("widget.mission.showOnMap")}
+                        onclick={() => flyTo(field)}><span class="size-2.5 rounded-sm bg-(--green-mark)"></span>{$T("widget.mission.field")} {i + 1}</button
                       >
                       <span class="flex items-center gap-3">
                         <span class="flex items-center gap-1" use:hint={{ text: $T("widget.mission.hint.fieldAngle"), enabled: $hints }}>
@@ -706,8 +757,17 @@
                     <span class="text-(--muted-color)">{$T("widget.mission.noField")}</span>
                   {/each}
                   {#each plan.holes as hole, i}
-                    <div class="flex items-center justify-between gap-2">
-                      <span class="flex items-center gap-2"><span class="size-2.5 rounded-sm bg-(--red-mark)"></span>{$T("widget.mission.hole")} {i + 1}</span>
+                    <div
+                      class="-mx-1.5 flex items-center justify-between gap-2 rounded-md px-1.5 transition-colors duration-150 hover:bg-(--red-soft)"
+                      role="listitem"
+                      onmouseenter={() => (highlighted = { kind: "hole", index: i })}
+                      onmouseleave={() => (highlighted = null)}
+                    >
+                      <button
+                        class="flex cursor-pointer items-center gap-2 border-none bg-transparent p-0 text-left text-(--font-color)"
+                        title={$T("widget.mission.showOnMap")}
+                        onclick={() => flyTo(hole)}><span class="size-2.5 rounded-sm bg-(--red-mark)"></span>{$T("widget.mission.hole")} {i + 1}</button
+                      >
                       <span class="flex items-center gap-2">
                         <span class="font-semibold">{areaText(fieldArea(hole, []))}</span>
                         <button class="cursor-pointer border-none bg-transparent p-0 text-(--red-text)" onclick={() => removeHole(i)} aria-label="Delete"

package/dist/WidgetMap/mission/MapRoute.svelte

@@ -11,6 +11,8 @@
   import * as UI from "../.."
   import { MapLibre, NavigationControl, ScaleControl, FullScreenControl, CustomControl } from "../mapWrapper"
   import MissionLayers from "./MissionLayers.svelte"
+  import FitIcon from "../FitIcon.svelte"
+  import { createAutoFit, fitMapTo } from "./fit"
   import MissionSim from "./MissionSim.svelte"
   import { missionProgress } from "./progress"
   import MapIcon from "../MapIcon.svelte"
@@ -49,7 +51,7 @@
     onSend,
   }: Props = $props()
 
-  const hints = hintsSetting("WidgetMap")
+  const hints = $derived(hintsSetting("WidgetMap", persistKey))
   let accentStyle = $derived(widgetAccentStyle(componentClass ?? ""))
 
   let hasMergedPersisted = false
@@ -234,6 +236,14 @@
     void isDarkMode
     mapColors = readMapColors(rootEl)
   })
+  /* «Показать все» в шапке и вписывание при появлении карты */
+  const missionPoints = (): LngLat[] => [...(route.start ? [route.start] : []), ...route.points.map((p) => p.point)]
+  const fitAll = (animate = true) => fitMapTo(mapInstance, missionPoints(), animate)
+  const autoFit = createAutoFit()
+  $effect(() => {
+    const map = mapInstance
+    untrack(() => autoFit(map, () => fitAll(false)))
+  })
 
   const fmt = (v: number, d = 1) => v.toLocaleString(undefined, { minimumFractionDigits: d, maximumFractionDigits: d })
   /* Кнопки панели на карте: стили кнопок MapLibre (размер 29px, прозрачный фон, без рамки) перебиваются */
@@ -281,22 +291,31 @@
 >
   <WidgetHeader icon={MapIcon} label={label?.name || $T("widget.route.title")} bind:collapsed {hints}>
     {#snippet right()}
-      <span class="flex items-center gap-3 text-[12px] font-semibold text-(--muted-color) tabular-nums">
-        {#if headerProgress !== null}
-          <span class="flex items-center gap-1.5" title={simulate ? $T("widget.sim.title") : $T("widget.mission.progressHint")}>
-            <span class="h-1.5 w-14 overflow-hidden rounded-full bg-(--hairline-color)"
-              ><span class="block h-full rounded-full bg-(--accent-color)" style="width: {Math.round(headerProgress * 100)}%"></span></span
-            >
-            {Math.round(headerProgress * 100)}%{#if live}
-              · {live.finished
-                ? $T("widget.route.finished")
-                : live.target > route.points.length
-                  ? $T("widget.route.returning")
-                  : `${$T("widget.route.toPoint")} ${live.target}/${route.points.length}`}{/if}
-          </span>
-        {/if}
-        <span>{stats.points} {$T("widget.route.pts")} · {km(stats.length)}</span>
-      </span>
+      <div class="flex items-center gap-3">
+        <UI.Button
+          wrapperClass="w-auto"
+          componentClass="bg-transparent px-3"
+          content={{ icon: FitIcon, name: $T("constructor.props.map.fitAll"), info: { text: $T("widget.route.fitHint"), side: "bottom" } }}
+          disabled={collapsed || missionPoints().length === 0}
+          onClick={() => fitAll()}
+        />
+        <span class="flex items-center gap-3 text-[12px] font-semibold text-(--muted-color) tabular-nums">
+          {#if headerProgress !== null}
+            <span class="flex items-center gap-1.5" title={simulate ? $T("widget.sim.title") : $T("widget.mission.progressHint")}>
+              <span class="h-1.5 w-14 overflow-hidden rounded-full bg-(--hairline-color)"
+                ><span class="block h-full rounded-full bg-(--accent-color)" style="width: {Math.round(headerProgress * 100)}%"></span></span
+              >
+              {Math.round(headerProgress * 100)}%{#if live}
+                · {live.finished
+                  ? $T("widget.route.finished")
+                  : live.target > route.points.length
+                    ? $T("widget.route.returning")
+                    : `${$T("widget.route.toPoint")} ${live.target}/${route.points.length}`}{/if}
+            </span>
+          {/if}
+          <span>{stats.points} {$T("widget.route.pts")} · {km(stats.length)}</span>
+        </span>
+      </div>
     {/snippet}
   </WidgetHeader>
 

package/dist/WidgetMap/mission/MissionLayers.svelte

@@ -1,4 +1,4 @@
-<!-- $lib/WidgetMap/mission/MissionLayers.svelte - слои карты генератора миссии: поле и зоны, траектория, черновик контура и ручки вершин; клики и перетаскивание ручек отдаёт наверх -->
+<!-- $lib/WidgetMap/mission/MissionLayers.svelte - слои карты генератора миссии: поле и зоны, траектория, подсветка выбранного в списке контура, черновик контура и ручки вершин; клики и перетаскивание ручек отдаёт наверх -->
 <script lang="ts">
   import { onDestroy, untrack } from "svelte"
   import { getMapContext } from "../mapWrapper"
@@ -18,9 +18,10 @@
     onHandleRightClick: (id: string) => void
     onCursor: (ll: LngLat | null) => void
     colors: IMapColors /* Маршрут и точки - мастер-цвет, поле, зоны и развороты - цвета по смыслу */
+    highlight?: any /* Контур, на который навели в списке «Итога»: поле или зона с kind */
   }
 
-  let { zones, path, draft, handles, drawing, onMapClick, onMapDblClick, onDrag, onDragEnd, onHandleRightClick, onCursor, colors }: Props = $props()
+  let { zones, path, draft, handles, drawing, onMapClick, onMapDblClick, onDrag, onDragEnd, onHandleRightClick, onCursor, colors, highlight }: Props = $props()
 
   /* Краски слоёв от цветов виджета: одна таблица и для создания слоёв, и для перекраски */
   const paints = (c: IMapColors): Record<string, Record<string, any>> => {
@@ -33,6 +34,8 @@
       "msn-path-spray": { "line-color": c.green },
       "msn-path-route": { "line-color": c.accent },
       "msn-draft-line": { "line-color": byKind },
+      "msn-highlight-fill": { "fill-color": byKind },
+      "msn-highlight-line": { "line-color": byKind },
       "msn-handles": {
         "circle-color": ["match", ["get", "role"], "mid", "#ffffff", "start", c.accent, "wp", c.accent, byKind],
         "circle-stroke-color": ["match", ["get", "role"], "mid", ["match", ["get", "kind"], "hole", c.red, "route", c.accent, c.green], "#ffffff"],
@@ -45,7 +48,7 @@
   const mapCtx = getMapContext()
   const map = mapCtx.map!
 
-  const SOURCES = ["msn-zones", "msn-path", "msn-draft", "msn-handles"]
+  const SOURCES = ["msn-zones", "msn-path", "msn-highlight", "msn-draft", "msn-handles"]
   const empty = { type: "FeatureCollection", features: [] }
 
   for (const id of SOURCES) mapCtx.addSource(id, { type: "geojson", data: empty as any })
@@ -97,6 +100,20 @@
     layout: { "line-join": "round", "line-cap": "round" },
     paint: { ...initial["msn-path-route"], "line-width": 3 },
   })
+  /* Подсветка контура поверх проходов: плотная заливка и толстая обводка, видна и у маленькой зоны */
+  mapCtx.addLayer({
+    id: "msn-highlight-fill",
+    type: "fill",
+    source: "msn-highlight",
+    paint: { ...initial["msn-highlight-fill"], "fill-opacity": 0.45 },
+  })
+  mapCtx.addLayer({
+    id: "msn-highlight-line",
+    type: "line",
+    source: "msn-highlight",
+    layout: { "line-join": "round" },
+    paint: { ...initial["msn-highlight-line"], "line-width": 5 },
+  })
   mapCtx.addLayer({
     id: "msn-draft-line",
     type: "line",
@@ -141,6 +158,7 @@
   $effect(() => setData("msn-path", $state.snapshot(path)))
   $effect(() => setData("msn-draft", $state.snapshot(draft)))
   $effect(() => setData("msn-handles", $state.snapshot(handles)))
+  $effect(() => setData("msn-highlight", $state.snapshot(highlight) ?? empty))
 
   /* Рисование: двойной клик закрывает контур, а не приближает карту */
   $effect(() => {

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

@@ -16,6 +16,7 @@ interface Props {
     onHandleRightClick: (id: string) => void;
     onCursor: (ll: LngLat | null) => void;
     colors: IMapColors;
+    highlight?: any;
 }
 declare const MissionLayers: import("svelte").Component<Props, {}, "">;
 type MissionLayers = ReturnType<typeof MissionLayers>;

package/dist/WidgetMap/mission/SpinnerIcon.svelte

@@ -1,10 +1,9 @@
-<!-- $lib/WidgetMap/mission/SpinnerIcon.svelte - колесо ожидания размером с родителя: подбор угла проходов -->
+<!-- $lib/WidgetMap/mission/SpinnerIcon.svelte - колесо ожидания размером с родителя: подбор угла проходов; крутится CSS-анимацией, браузер ведёт её отдельно от расчёта, поэтому она не замирает -->
 <script lang="ts"></script>
 
-<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" class="animate-spin [animation-duration:0.8s]"
   ><path fill="currentColor" d="M12 2A10 10 0 1 0 22 12A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 8-8A8 8 0 0 1 12 20Z" opacity=".35" /><path
     fill="currentColor"
     d="M20 12h2A10 10 0 0 0 12 2V4A8 8 0 0 1 20 12Z"
-    ><animateTransform attributeName="transform" dur="0.8s" from="0 12 12" repeatCount="indefinite" to="360 12 12" type="rotate" /></path
-  ></svg
+  /></svg
 >