poe-svelte-ui-lib 1.21.0 → 1.22.1

package/dist/WidgetDeviceInfo/README.md

@@ -0,0 +1,82 @@
+# WidgetDeviceInfo Component
+
+## Описание
+
+Смарт-виджет информации об устройстве. Как и `WidgetWiFi`, не привязывается к одной произвольной
+переменной устройства — работает с фиксированным набором полей, соответствующих реальной
+прошивочной конвенции (`main_config.c`, группа `CFG`, ProdFactory-ESP): `DevSN`, `DevID`, `DevFW`,
+`RunCnt` — только чтение; `DevName`, `HostName`, `WebUser`, `WebPsw` — редактируются локально и
+сохраняются одним пакетом по кнопке "Сохранить". Отдельная кнопка "Перезагрузить" рядом с
+заголовком вызывает `onRestart` немедленно (не входит в пакет сохранения полей). Компонент
+ничего не знает про DeviceStore/WebSocket — только `value`/`onSave`/`onRestart`.
+
+## Пропсы
+
+| Название        | Тип                                      | По умолчанию                          | Описание                                                            |
+| ---------------- | ------------------------------------------ | --------------------------------------- | ----------------------------------------------------------------------- |
+| `wrapperClass`   | `string`                                    | `""`                                    | CSS-классы для обёртки компонента                                    |
+| `componentClass` | `string`                                    | `""`                                    | "Мастер-цвет" виджета — роль вида `"bg-red"` (см. `optionsStore.COLOR_OPTIONS`) |
+| `label`          | `{ name?: string }`                         | `{ name: "Информация об устройстве" }` | Заголовок карточки                                                    |
+| `value`          | `IWidgetDeviceInfoConfig`                   | внутренний дефолт                       | Текущая информация об устройстве                                      |
+| `onSave`         | `(info: IWidgetDeviceInfoConfig) => void`   | `undefined`                             | Срабатывает при нажатии "Сохранить" — редактируемые поля одним пакетом |
+| `onRestart`      | `() => void`                                | `undefined`                             | Срабатывает при нажатии "Перезагрузить"                                |
+
+### IWidgetDeviceInfoConfig
+
+| Поле       | Тип      | Только чтение | Описание                          |
+| ----------- | -------- | :-----------: | ------------------------------------ |
+| `DevSN`     | `string` |      да       | Серийный номер устройства            |
+| `DevID`     | `string` |      да       | ID устройства                        |
+| `DevFW`     | `number` |      да       | Версия ПО                            |
+| `RunCnt`    | `number` |      да       | Счётчик запусков                     |
+| `DevName`   | `string` |      нет      | Имя устройства                       |
+| `HostName`  | `string` |      нет      | Имя хоста                            |
+| `WebUser`   | `string` |      нет      | Имя пользователя Web-панели          |
+| `WebPsw`    | `string` |      нет      | Пароль Web-панели                    |
+
+## Примеры
+
+```svelte
+<script>
+  import * as UI from "poe-svelte-ui-lib"
+
+  const handleSave = (info) => {
+    console.log("Отправка настроек одним пакетом:", info)
+  }
+</script>
+
+<UI.WidgetDeviceInfo
+  value={{
+    DevSN: "00.00.000-00_0000AC670000B22B00007428:DBC5",
+    DevID: "20.00.000-01",
+    DevFW: 1.4,
+    RunCnt: 128,
+    DevName: "SYP-Device-01",
+    HostName: "syp-device-01",
+    WebUser: "admin",
+    WebPsw: "",
+  }}
+  onSave={handleSave}
+  onRestart={() => console.log("Перезагрузка устройства")}
+/>
+```
+
+## Конструктор свойств (WidgetDeviceInfoProps.svelte)
+
+### Пропсы конструктора
+
+| Название           | Тип                                                                                  | Описание                                   |
+| ------------------- | -------------------------------------------------------------------------------------- | --------------------------------------------- |
+| `component`         | `UIComponent & { properties: Partial<IWidgetDeviceInfoProps> }`                        | Объект компонента с его свойствами            |
+| `onPropertyChange`  | `(updates: Partial<{ properties?: string \| object; name?: string; access?: string }>) => void` | Коллбэк для обновления свойств компонента     |
+
+Панель минимальна: заголовок и мастер-цвет (через общий `WidgetAccentPicker.svelte`) — полей
+для привязки нет, они фиксированы прошивочной конвенцией.
+
+## Заметки
+
+- Серийный номер устройства обычно длинный (например
+  `00.00.000-00_0000AC670000B22B00007428:DBC5`) — в разметке занимает отдельную строку, чтобы не
+  обрезаться в узкой сетке.
+- `WebPsw` в реальном устройстве исторически передаётся обычным текстом; в виджете сделан
+  `type="password"` для консистентности с остальным обликом конструктора.

package/dist/WidgetDeviceInfo/WidgetDeviceInfo.svelte

@@ -10,13 +10,16 @@
   import type { IWidgetDeviceInfoConfig, IWidgetDeviceInfoProps } from "../types"
   import CpuIcon from "./CpuIcon.svelte"
   import RestartIcon from "./RestartIcon.svelte"
+  import WidgetHeader from "../WidgetHeader.svelte"
   import { widgetAccentStyle } from "../widgetAccent"
+  import { readPersistedCollapsed, writePersistedCollapsed } from "../widgetCollapse"
 
   let {
     wrapperClass = "",
     componentClass = "",
     label = { name: "Информация об устройстве" },
     value = $bindable(),
+    persistKey,
     onSave = () => {},
     onRestart = () => {},
   }: IWidgetDeviceInfoProps = $props()
@@ -36,6 +39,11 @@
     },
   )
 
+  /* Сворачивание тела виджета по клику на значок/заголовок (как аккордеон), но в отличие от
+     Accordion переживает перезагрузку страницы через localStorage, если передан persistKey */
+  let collapsed = $state(readPersistedCollapsed(persistKey))
+  $effect(() => writePersistedCollapsed(persistKey, collapsed))
+
   /* Поля редактируются локально (как Argument: NoSend в реальной GUI) — отправка одним пакетом по кнопке */
   let savedSnapshot = $state(JSON.stringify(info))
   let isDirty = $derived(JSON.stringify(info) !== savedSnapshot)
@@ -50,43 +58,43 @@
   style={accentStyle}
 >
   <!-- Заголовок -->
-  <div class="flex flex-wrap items-center justify-between gap-3">
-    <div class="flex items-center gap-2">
-      <span class="flex size-8 shrink-0 items-center justify-center rounded-xl bg-(--accent-soft) text-(--accent-color)">
-        <CpuIcon />
-      </span>
-      <h3>{label?.name ?? "Информация об устройстве"}</h3>
-    </div>
-    <UI.Button wrapperClass="w-auto" componentClass="bg-transparent px-3" content={{ icon: RestartIcon, name: "Перезагрузить" }} onClick={onRestart} />
-  </div>
+  <WidgetHeader icon={CpuIcon} label={label?.name ?? "Информация об устройстве"} bind:collapsed>
+    {#snippet right()}
+      <UI.Button wrapperClass="w-auto" componentClass="bg-transparent px-3" content={{ icon: RestartIcon, name: "Перезагрузить" }} onClick={onRestart} />
+    {/snippet}
+  </WidgetHeader>
 
-  <!-- Только чтение -->
-  <div class="flex flex-col gap-2 rounded-[10px] border border-(--hairline-color) bg-(--back-color) p-3">
-    <!-- Серийник бывает длинным (напр. 00.00.000-00_0000AC670000B22B00007428:DBC5) — своя строка, чтобы не резался -->
-    <UI.Input label={{ name: "Серийный номер" }} value={info.DevSN} readonly help={{ copyButton: true }} />
-    <div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
-      <UI.Input label={{ name: "ID устройства" }} value={info.DevID} readonly />
-      <UI.Input label={{ name: "Версия ПО" }} value={info.DevFW} readonly />
-      <UI.Input label={{ name: "Запусков" }} value={info.RunCnt} readonly />
-    </div>
-  </div>
+  {#if !collapsed}
+    <div class="flex flex-col gap-4" transition:slide={{ duration: 150 }}>
+      <!-- Только чтение -->
+      <div class="flex flex-col gap-2 rounded-[10px] border border-(--hairline-color) bg-(--back-color) p-3">
+        <!-- Серийник бывает длинным (напр. 00.00.000-00_0000AC670000B22B00007428:DBC5) — своя строка, чтобы не резался -->
+        <UI.Input label={{ name: "Серийный номер" }} value={info.DevSN} readonly help={{ copyButton: true }} />
+        <div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
+          <UI.Input label={{ name: "ID устройства" }} value={info.DevID} readonly />
+          <UI.Input label={{ name: "Версия ПО" }} value={info.DevFW} readonly />
+          <UI.Input label={{ name: "Запусков" }} value={info.RunCnt} readonly />
+        </div>
+      </div>
 
-  <!-- Редактируемые настройки -->
-  <div class="flex flex-col gap-3 rounded-[10px] border border-(--hairline-color) bg-(--back-color) p-3">
-    <span class="text-[12px] font-semibold text-(--muted-color)">Настройки</span>
-    <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
-      <UI.Input label={{ name: "Имя устройства" }} bind:value={info.DevName} maxlength={26} />
-      <UI.Input label={{ name: "Имя хоста" }} bind:value={info.HostName} maxlength={32} />
-      <UI.Input label={{ name: "Пользователь Web" }} bind:value={info.WebUser} maxlength={16} />
-      <UI.Input type="password" label={{ name: "Пароль Web" }} bind:value={info.WebPsw} maxlength={16} help={{ autocomplete: "off" }} />
-    </div>
-  </div>
+      <!-- Редактируемые настройки -->
+      <div class="flex flex-col gap-3 rounded-[10px] border border-(--hairline-color) bg-(--back-color) p-3">
+        <span class="text-[12px] font-semibold text-(--muted-color)">Настройки</span>
+        <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+          <UI.Input label={{ name: "Имя устройства" }} bind:value={info.DevName} maxlength={26} />
+          <UI.Input label={{ name: "Имя хоста" }} bind:value={info.HostName} maxlength={32} />
+          <UI.Input label={{ name: "Пользователь Web" }} bind:value={info.WebUser} maxlength={16} />
+          <UI.Input type="password" label={{ name: "Пароль Web" }} bind:value={info.WebPsw} maxlength={16} help={{ autocomplete: "off" }} />
+        </div>
+      </div>
 
-  <!-- Сохранение -->
-  <div class="flex flex-col items-center gap-2">
-    {#if isDirty}
-      <span class="text-[12px] text-(--muted-color)" transition:slide={{ duration: 100 }}>Есть несохранённые изменения</span>
-    {/if}
-    <UI.Button wrapperClass="w-40" componentClass="bg-green" content={{ name: "Сохранить" }} disabled={!isDirty} onClick={save} />
-  </div>
+      <!-- Сохранение -->
+      <div class="flex flex-col items-center gap-2">
+        {#if isDirty}
+          <span class="text-[12px] text-(--muted-color)" transition:slide={{ duration: 100 }}>Есть несохранённые изменения</span>
+        {/if}
+        <UI.Button wrapperClass="w-40" componentClass="bg-green" content={{ name: "Сохранить" }} disabled={!isDirty} onClick={save} />
+      </div>
+    </div>
+  {/if}
 </div>

package/dist/WidgetHeader.svelte

@@ -0,0 +1,45 @@
+<!-- $lib/WidgetHeader.svelte — общая шапка смарт-виджетов конструктора: значок + заголовок
+     сворачивают/разворачивают тело виджета по клику (как аккордеон), справа — снипет с любым
+     содержимым шапки конкретного виджета (переключатель режима, кнопка "Перезагрузить" и т.п.),
+     клик по нему сворачивание не триггерит. -->
+<script lang="ts">
+  import type { Component, Snippet } from "svelte"
+  import ArrowIcon from "./libIcons/ArrowIcon.svelte"
+
+  let {
+    icon,
+    label,
+    collapsed = $bindable(false),
+    right,
+  }: {
+    icon: Component
+    label: string
+    collapsed?: boolean
+    right?: Snippet
+  } = $props()
+
+  const Icon = $derived(icon)
+</script>
+
+<div class="flex flex-wrap items-center justify-between gap-3">
+  <button
+    type="button"
+    class="flex min-w-0 cursor-pointer items-center gap-2 border-none bg-transparent p-0 text-left"
+    onclick={() => (collapsed = !collapsed)}
+    aria-expanded={!collapsed}
+  >
+    <span class="flex size-8 shrink-0 items-center justify-center rounded-xl bg-(--accent-soft) text-(--accent-color)">
+      <Icon />
+    </span>
+    <h3 class="min-w-0 truncate">{label}</h3>
+    <span
+      class="flex size-4 shrink-0 items-center justify-center text-(--faint-color) transition-transform duration-150 [&_svg]:h-full [&_svg]:w-full"
+      style="transform: rotate({collapsed ? 0 : 90}deg)"
+    >
+      <ArrowIcon />
+    </span>
+  </button>
+  {#if right}
+    {@render right()}
+  {/if}
+</div>

package/dist/WidgetHeader.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Component, Snippet } from "svelte";
+type $$ComponentProps = {
+    icon: Component;
+    label: string;
+    collapsed?: boolean;
+    right?: Snippet;
+};
+declare const WidgetHeader: Component<$$ComponentProps, {}, "collapsed">;
+type WidgetHeader = ReturnType<typeof WidgetHeader>;
+export default WidgetHeader;

package/dist/WidgetWiFi/README.md

@@ -0,0 +1,84 @@
+# WidgetWiFi Component
+
+## Описание
+
+Смарт-виджет настройки WiFi (режимы STA / AP / STA+AP). В отличие от примитивов конструктора,
+не привязывается к одной произвольной переменной устройства через Select — работает с
+фиксированным набором полей, соответствующих реальной прошивочной конвенции (`main_config.c`,
+группа `CFG`, ProdFactory-ESP): `WiFiMode`, `StaSSID`, `StaPSK`, `StaticIP`, `StaIP`, `StaMS`,
+`StaGW`, `ApSSID`, `ApPSK`, `ApIP`, `ApMS`, `ApGW`. Компонент ничего не знает про
+DeviceStore/WebSocket — только `value`/`onSave`, вся отправка на стороне вызывающего кода.
+
+Поля редактируются локально и отправляются одним пакетом по кнопке "Сохранить". Переход в
+режим AP (отключает STA) подтверждается отдельно — предупреждение появляется в момент нажатия
+"Сохранить", а не при простом переключении сегмент-контрола, чтобы можно было спокойно открыть
+секцию AP и заполнить SSID/пароль до реальной отправки.
+
+## Пропсы
+
+| Название         | Тип                                                          | По умолчанию          | Описание                                                            |
+| ----------------- | ------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------- |
+| `wrapperClass`    | `string`                                                       | `""`                    | CSS-классы для обёртки компонента                                    |
+| `componentClass`  | `string`                                                       | `""`                    | "Мастер-цвет" виджета — роль вида `"bg-red"` (см. `optionsStore.COLOR_OPTIONS`); перекрашивает значок, сегмент-контролы и фокус-кольцо у полей |
+| `label`           | `{ name?: string }`                                            | `{ name: "WiFi" }`     | Заголовок карточки                                                    |
+| `value`           | `IWidgetWiFiConfig`                                            | внутренний дефолт      | Текущая конфигурация WiFi                                             |
+| `allowedModes`    | `number[]`                                                     | `[1, 2, 3]`             | Какие режимы показывать в сегмент-контроле (1=STA, 2=AP, 3=STA+AP)     |
+| `confirmOnAP`     | `boolean`                                                       | `true`                  | Показывать предупреждение при сохранении чистого режима AP            |
+| `onScan`          | `() => Promise<{ id: string; name: string; value: string }[]>` | `undefined`             | Обработчик сканирования сетей (в проде — `Header: GET, Argument: APsList`) |
+| `onSave`          | `(config: IWidgetWiFiConfig) => void`                          | `undefined`             | Срабатывает при нажатии "Сохранить" — конфиг уходит одним пакетом    |
+
+### IWidgetWiFiConfig
+
+| Поле        | Тип      | Описание                                            |
+| ----------- | -------- | ---------------------------------------------------- |
+| `WiFiMode`  | `number` | 0=NULL, 1=STA, 2=AP, 3=STA+AP (как `esp_wifi wifi_mode_t`) |
+| `StaSSID`   | `string` | SSID сети в режиме клиента                            |
+| `StaPSK`    | `string` | Пароль сети в режиме клиента                          |
+| `StaticIP`  | `number` | 0=DHCP, 1=Static                                       |
+| `StaIP`     | `string` | Статический IP клиента                                |
+| `StaMS`     | `string` | Маска подсети клиента                                  |
+| `StaGW`     | `string` | Шлюз клиента                                           |
+| `ApSSID`    | `string` | SSID точки доступа                                     |
+| `ApPSK`     | `string` | Пароль точки доступа                                   |
+| `ApIP`      | `string` | IP адрес точки доступа                                 |
+| `ApMS`      | `string` | Маска подсети точки доступа                            |
+| `ApGW`      | `string` | Шлюз точки доступа                                     |
+
+## Примеры
+
+```svelte
+<script>
+  import * as UI from "poe-svelte-ui-lib"
+
+  const handleScan = async () => {
+    /* Header: GET, Argument: APsList */
+    return [{ id: "1", name: "MyNetwork", value: "MyNetwork" }]
+  }
+
+  const handleSave = (config) => {
+    console.log("Отправка конфига одним пакетом:", config)
+  }
+</script>
+
+<UI.WidgetWiFi label={{ name: "WiFi" }} onScan={handleScan} onSave={handleSave} />
+```
+
+## Конструктор свойств (WidgetWiFiProps.svelte)
+
+### Пропсы конструктора
+
+| Название           | Тип                                                                                  | Описание                                   |
+| ------------------- | -------------------------------------------------------------------------------------- | --------------------------------------------- |
+| `component`         | `UIComponent & { properties: Partial<IWidgetWiFiProps> }`                              | Объект компонента с его свойствами            |
+| `onPropertyChange`  | `(updates: Partial<{ properties?: string \| object; name?: string; access?: string }>) => void` | Коллбэк для обновления свойств компонента     |
+
+Панель проще, чем у примитивов: не "к какой переменной привязать" (полей несколько, и они
+фиксированы прошивочной конвенцией), а "как виджет себя ведёт" — заголовок, разрешённые режимы,
+подтверждение при AP, мастер-цвет (через общий `WidgetAccentPicker.svelte`).
+
+## Заметки
+
+- Первый по-настоящему составной (multi-field) тип компонента конструктора — примитивы всегда
+  привязаны к одной переменной устройства через `properties.id`.
+- Чтение/батч-запись нескольких ключей `DeviceStore` реализуется на стороне приложения
+  (`GUIPreview.svelte`), а не внутри библиотеки.

package/dist/WidgetWiFi/WidgetWiFi.svelte

@@ -13,7 +13,9 @@
   import SearchIcon from "./SearchIcon.svelte"
   import LoaderIcon from "./LoaderIcon.svelte"
   import WarningIcon from "./WarningIcon.svelte"
+  import WidgetHeader from "../WidgetHeader.svelte"
   import { widgetAccentStyle } from "../widgetAccent"
+  import { readPersistedCollapsed, writePersistedCollapsed } from "../widgetCollapse"
 
   let {
     wrapperClass = "",
@@ -22,6 +24,7 @@
     value = $bindable(),
     allowedModes = [1, 2, 3],
     confirmOnAP = true,
+    persistKey,
     onScan,
     onSave = () => {},
   }: IWidgetWiFiProps = $props()
@@ -83,6 +86,13 @@
     scanning = false
   }
 
+  /* Сворачивание тела виджета по клику на значок/заголовок (как аккордеон) — переключатель режима
+     в шапке кликом не триггерит, только сама кнопка значок+заголовок (см. WidgetHeader.svelte).
+     В отличие от Accordion (только начальное значение из GUI) — переживает перезагрузку страницы
+     через localStorage, если передан persistKey. */
+  let collapsed = $state(readPersistedCollapsed(persistKey))
+  $effect(() => writePersistedCollapsed(persistKey, collapsed))
+
   /* Поля редактируются локально (как Argument: NoSend в реальной GUI) — отправка одним пакетом по кнопке */
   let savedSnapshot = $state(JSON.stringify(cfg))
   let isDirty = $derived(JSON.stringify(cfg) !== savedSnapshot)
@@ -102,86 +112,86 @@
 
 <div class={twMerge("relative flex w-full max-w-3xl flex-col gap-4 rounded-2xl border border-(--hairline-color) bg-(--container-color) p-4", wrapperClass)} style={accentStyle}>
   <!-- Заголовок и переключатель режима -->
-  <div class="flex flex-wrap items-center justify-between gap-3">
-    <div class="flex items-center gap-2">
-      <span class="flex size-8 shrink-0 items-center justify-center rounded-xl bg-(--accent-soft) text-(--accent-color)">
-        <WifiIcon />
-      </span>
-      <h3>{label?.name ?? "WiFi"}</h3>
-    </div>
-    <UI.Select
-      wrapperClass="w-full sm:w-72"
-      type="buttons"
-      value={selectedMode}
-      options={MODE_OPTIONS}
-      onUpdate={(option) => (cfg.WiFiMode = (option as IOption<number>).value as number)}
-    />
-  </div>
-
-  {#if cfg.WiFiMode === 1 || cfg.WiFiMode === 3}
-    <!-- Клиентский режим (STA) -->
-    <div class="flex flex-col gap-3 rounded-[10px] border border-(--hairline-color) bg-(--back-color) p-3" transition:slide={{ duration: 150 }}>
-      <span class="text-[12px] font-semibold text-(--muted-color)">Режим клиента (STA)</span>
-
-      <div class="flex items-end gap-2">
-        <UI.Select
-          wrapperClass="flex-1"
-          type="input"
-          label={{ name: "SSID сети" }}
-          value={{ id: "current", name: cfg.StaSSID, value: cfg.StaSSID }}
-          options={foundNetworks}
-          onUpdate={(option) => (cfg.StaSSID = (option as IOption<string>).name ?? "")}
-        />
-        <UI.Button
-          wrapperClass="w-9"
-          componentClass="p-1"
-          content={{ icon: scanning ? LoaderIcon : SearchIcon, info: { text: "Сканировать сети", side: "top" } }}
-          disabled={scanning || !onScan}
-          onClick={scanNetworks}
-        />
-      </div>
-
-      <UI.Input type="password" label={{ name: "Пароль" }} bind:value={cfg.StaPSK} maxlength={64} help={{ autocomplete: "off", regExp: PSK_REGEXP }} />
-
-      <UI.Select wrapperClass="w-48" type="buttons" label={{ name: "Получение IP" }} value={selectedIPMode} options={IP_MODE_OPTIONS}
-        onUpdate={(option) => (cfg.StaticIP = (option as IOption<number>).value as number)} />
-
-      {#if cfg.StaticIP === 1}
-        <div class="grid grid-cols-1 gap-2 sm:grid-cols-3" transition:slide={{ duration: 150 }}>
-          <UI.Input label={{ name: "IP адрес" }} bind:value={cfg.StaIP} maxlength={15} placeholder="192.168.1.100" help={{ regExp: IP_REGEXP }} />
-          <UI.Input label={{ name: "Маска подсети" }} bind:value={cfg.StaMS} maxlength={15} placeholder="255.255.255.0" help={{ regExp: IP_REGEXP }} />
-          <UI.Input label={{ name: "Шлюз" }} bind:value={cfg.StaGW} maxlength={15} placeholder="192.168.1.1" help={{ regExp: IP_REGEXP }} />
+  <WidgetHeader icon={WifiIcon} label={label?.name ?? "WiFi"} bind:collapsed>
+    {#snippet right()}
+      <UI.Select
+        wrapperClass="w-full sm:w-72"
+        type="buttons"
+        value={selectedMode}
+        options={MODE_OPTIONS}
+        onUpdate={(option) => (cfg.WiFiMode = (option as IOption<number>).value as number)}
+      />
+    {/snippet}
+  </WidgetHeader>
+
+  {#if !collapsed}
+    <div class="flex flex-col gap-4" transition:slide={{ duration: 150 }}>
+      {#if cfg.WiFiMode === 1 || cfg.WiFiMode === 3}
+        <!-- Клиентский режим (STA) -->
+        <div class="flex flex-col gap-3 rounded-[10px] border border-(--hairline-color) bg-(--back-color) p-3" transition:slide={{ duration: 150 }}>
+          <span class="text-[12px] font-semibold text-(--muted-color)">Режим клиента (STA)</span>
+
+          <div class="flex items-end gap-2">
+            <UI.Select
+              wrapperClass="flex-1"
+              type="input"
+              label={{ name: "SSID сети" }}
+              value={{ id: "current", name: cfg.StaSSID, value: cfg.StaSSID }}
+              options={foundNetworks}
+              onUpdate={(option) => (cfg.StaSSID = (option as IOption<string>).name ?? "")}
+            />
+            <UI.Button
+              wrapperClass="w-9"
+              componentClass="p-1"
+              content={{ icon: scanning ? LoaderIcon : SearchIcon, info: { text: "Сканировать сети", side: "top" } }}
+              disabled={scanning || !onScan}
+              onClick={scanNetworks}
+            />
+          </div>
+
+          <UI.Input type="password" label={{ name: "Пароль" }} bind:value={cfg.StaPSK} maxlength={64} help={{ autocomplete: "off", regExp: PSK_REGEXP }} />
+
+          <UI.Select wrapperClass="w-48" type="buttons" label={{ name: "Получение IP" }} value={selectedIPMode} options={IP_MODE_OPTIONS}
+            onUpdate={(option) => (cfg.StaticIP = (option as IOption<number>).value as number)} />
+
+          {#if cfg.StaticIP === 1}
+            <div class="grid grid-cols-1 gap-2 sm:grid-cols-3" transition:slide={{ duration: 150 }}>
+              <UI.Input label={{ name: "IP адрес" }} bind:value={cfg.StaIP} maxlength={15} placeholder="192.168.1.100" help={{ regExp: IP_REGEXP }} />
+              <UI.Input label={{ name: "Маска подсети" }} bind:value={cfg.StaMS} maxlength={15} placeholder="255.255.255.0" help={{ regExp: IP_REGEXP }} />
+              <UI.Input label={{ name: "Шлюз" }} bind:value={cfg.StaGW} maxlength={15} placeholder="192.168.1.1" help={{ regExp: IP_REGEXP }} />
+            </div>
+          {/if}
         </div>
       {/if}
-    </div>
-  {/if}
-
-  {#if cfg.WiFiMode === 2 || cfg.WiFiMode === 3}
-    <!-- Точка доступа (AP) -->
-    <div class="flex flex-col gap-3 rounded-[10px] border border-(--hairline-color) bg-(--back-color) p-3" transition:slide={{ duration: 150 }}>
-      <span class="text-[12px] font-semibold text-(--muted-color)">Точка доступа (AP)</span>
 
-      <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
-        <UI.Input label={{ name: "SSID" }} bind:value={cfg.ApSSID} maxlength={32} />
-        <UI.Input type="password" label={{ name: "Пароль" }} bind:value={cfg.ApPSK} maxlength={64} help={{ autocomplete: "off", regExp: PSK_REGEXP }} />
-      </div>
+      {#if cfg.WiFiMode === 2 || cfg.WiFiMode === 3}
+        <!-- Точка доступа (AP) -->
+        <div class="flex flex-col gap-3 rounded-[10px] border border-(--hairline-color) bg-(--back-color) p-3" transition:slide={{ duration: 150 }}>
+          <span class="text-[12px] font-semibold text-(--muted-color)">Точка доступа (AP)</span>
+
+          <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+            <UI.Input label={{ name: "SSID" }} bind:value={cfg.ApSSID} maxlength={32} />
+            <UI.Input type="password" label={{ name: "Пароль" }} bind:value={cfg.ApPSK} maxlength={64} help={{ autocomplete: "off", regExp: PSK_REGEXP }} />
+          </div>
+
+          <div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
+            <UI.Input label={{ name: "IP адрес" }} bind:value={cfg.ApIP} maxlength={15} help={{ regExp: IP_REGEXP }} />
+            <UI.Input label={{ name: "Маска подсети" }} bind:value={cfg.ApMS} maxlength={15} help={{ regExp: IP_REGEXP }} />
+            <UI.Input label={{ name: "Шлюз" }} bind:value={cfg.ApGW} maxlength={15} help={{ regExp: IP_REGEXP }} />
+          </div>
+        </div>
+      {/if}
 
-      <div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
-        <UI.Input label={{ name: "IP адрес" }} bind:value={cfg.ApIP} maxlength={15} help={{ regExp: IP_REGEXP }} />
-        <UI.Input label={{ name: "Маска подсети" }} bind:value={cfg.ApMS} maxlength={15} help={{ regExp: IP_REGEXP }} />
-        <UI.Input label={{ name: "Шлюз" }} bind:value={cfg.ApGW} maxlength={15} help={{ regExp: IP_REGEXP }} />
+      <!-- Сохранение -->
+      <div class="flex flex-col items-center gap-2">
+        {#if isDirty}
+          <span class="text-[12px] text-(--muted-color)" transition:slide={{ duration: 100 }}>Есть несохранённые изменения</span>
+        {/if}
+        <UI.Button wrapperClass="w-40" componentClass="bg-green" content={{ name: "Сохранить" }} disabled={!isDirty} onClick={save} />
       </div>
     </div>
   {/if}
 
-  <!-- Сохранение -->
-  <div class="flex flex-col items-center gap-2">
-    {#if isDirty}
-      <span class="text-[12px] text-(--muted-color)" transition:slide={{ duration: 100 }}>Есть несохранённые изменения</span>
-    {/if}
-    <UI.Button wrapperClass="w-40" componentClass="bg-green" content={{ name: "Сохранить" }} disabled={!isDirty} onClick={save} />
-  </div>
-
   {#if showAPWarning}
     <!-- Подтверждение локально к виджету (не на весь экран) — предупреждение относится
        именно к этой карточке, а не к странице целиком -->

package/dist/types.d.ts

@@ -516,6 +516,7 @@ export interface IWidgetWiFiProps {
     value?: IWidgetWiFiConfig;
     allowedModes?: number[];
     confirmOnAP?: boolean;
+    persistKey?: string;
     onScan?: () => Promise<{
         id: string;
         name: string;
@@ -541,6 +542,7 @@ export interface IWidgetDeviceInfoProps {
         name?: string;
     };
     value?: IWidgetDeviceInfoConfig;
+    persistKey?: string;
     onSave?: (info: IWidgetDeviceInfoConfig) => void;
     onRestart?: () => void;
 }

package/dist/widgetCollapse.d.ts

@@ -0,0 +1,2 @@
+export declare const readPersistedCollapsed: (persistKey?: string) => boolean;
+export declare const writePersistedCollapsed: (persistKey: string | undefined, collapsed: boolean) => void;

package/dist/widgetCollapse.js

@@ -0,0 +1,25 @@
+/* $lib/widgetCollapse.ts — запоминание свёрнутости смарт-виджетов в localStorage браузера
+   (Accordion этого не делает — isOpen у него только начальное значение из сохранённого GUI,
+   без переживания перезагрузки; виджеты сделаны надёжнее). typeof window-проверка вместо
+   $app/environment — библиотека не должна знать про SvelteKit. */
+const STORAGE_PREFIX = "widget-collapsed:";
+export const readPersistedCollapsed = (persistKey) => {
+    if (!persistKey || typeof window === "undefined")
+        return false;
+    try {
+        return window.localStorage.getItem(STORAGE_PREFIX + persistKey) === "1";
+    }
+    catch {
+        return false;
+    }
+};
+export const writePersistedCollapsed = (persistKey, collapsed) => {
+    if (!persistKey || typeof window === "undefined")
+        return;
+    try {
+        window.localStorage.setItem(STORAGE_PREFIX + persistKey, collapsed ? "1" : "0");
+    }
+    catch {
+        /* приватный режим/заблокировано — молча игнорируем, просто не запомнится */
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.21.0",
+  "version": "1.22.1",
   "license": "MIT",
   "type": "module",
   "scripts": {