poe-svelte-ui-lib 1.20.6 → 1.22.0

package/dist/WidgetAccentPicker.svelte

@@ -0,0 +1,27 @@
+<!-- $lib/WidgetAccentPicker.svelte — переиспользуемый пункт панели пропсов "Мастер-цвет" для
+     смарт-виджетов конструктора (WidgetWiFi, WidgetDeviceInfo и далее). Один UI на все виджеты,
+     та же палитра, что и у примитивов (optionsStore.COLOR_OPTIONS) — см. widgetAccent.ts. -->
+<script lang="ts">
+  import { optionsStore } from "./options"
+  import Select from "./Select/Select.svelte"
+  import type { IOption } from "./types"
+
+  let {
+    value = "",
+    onUpdate,
+    wrapperClass = "h-14",
+  }: {
+    value?: string
+    onUpdate: (value: string) => void
+    wrapperClass?: string
+  } = $props()
+</script>
+
+<Select
+  {wrapperClass}
+  label={{ name: "Мастер-цвет" }}
+  type="buttons"
+  options={$optionsStore.COLOR_OPTIONS}
+  value={$optionsStore.COLOR_OPTIONS.find((o) => o.value === value) ?? $optionsStore.COLOR_OPTIONS[0]}
+  onUpdate={(option) => onUpdate((option as IOption<string>).value ?? "")}
+/>

package/dist/WidgetAccentPicker.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    value?: string;
+    onUpdate: (value: string) => void;
+    wrapperClass?: string;
+};
+declare const WidgetAccentPicker: import("svelte").Component<$$ComponentProps, {}, "">;
+type WidgetAccentPicker = ReturnType<typeof WidgetAccentPicker>;
+export default WidgetAccentPicker;

package/dist/WidgetDeviceInfo/CpuIcon.svelte

@@ -0,0 +1,9 @@
+<script lang="ts"></script>
+
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
+  ><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+    ><rect x="4" y="4" width="16" height="16" rx="2" /><rect x="9" y="9" width="6" height="6" /><path
+      d="M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3"
+    /></g
+  ></svg
+>

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

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/RestartIcon.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="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"
+  /></svg
+>

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

package/dist/WidgetDeviceInfo/WidgetDeviceInfo.svelte

@@ -0,0 +1,96 @@
+<!-- $lib/WidgetDeviceInfo/WidgetDeviceInfo.svelte — смарт-виджет информации об устройстве.
+     Фиксированный набор полей (см. IWidgetDeviceInfoConfig в types.ts), соответствует реальной
+     прошивочной конвенции (main_config.c, группа "CFG", ProdFactory-ESP):
+     DevSN/DevID/DevFW/RunCnt — только чтение; DevName/HostName/WebUser/WebPsw — сохраняются
+     одним пакетом. Ничего не знает про DeviceStore/WebSocket — value/onSave/onRestart. -->
+<script lang="ts">
+  import { slide } from "svelte/transition"
+  import { twMerge } from "tailwind-merge"
+  import * as UI from ".."
+  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"
+
+  let {
+    wrapperClass = "",
+    componentClass = "",
+    label = { name: "Информация об устройстве" },
+    value = $bindable(),
+    onSave = () => {},
+    onRestart = () => {},
+  }: IWidgetDeviceInfoProps = $props()
+
+  let accentStyle = $derived(widgetAccentStyle(componentClass ?? ""))
+
+  let info: IWidgetDeviceInfoConfig = $state(
+    value ?? {
+      DevSN: "",
+      DevID: "",
+      DevFW: 0,
+      RunCnt: 0,
+      DevName: "",
+      HostName: "",
+      WebUser: "",
+      WebPsw: "",
+    },
+  )
+
+  /* Сворачивание тела виджета по клику на значок/заголовок (как аккордеон) */
+  let collapsed = $state(false)
+
+  /* Поля редактируются локально (как Argument: NoSend в реальной GUI) — отправка одним пакетом по кнопке */
+  let savedSnapshot = $state(JSON.stringify(info))
+  let isDirty = $derived(JSON.stringify(info) !== savedSnapshot)
+  const save = () => {
+    onSave?.($state.snapshot(info))
+    savedSnapshot = JSON.stringify(info)
+  }
+</script>
+
+<div
+  class={twMerge("flex w-full max-w-3xl flex-col gap-4 rounded-2xl border border-(--hairline-color) bg-(--container-color) p-4", wrapperClass)}
+  style={accentStyle}
+>
+  <!-- Заголовок -->
+  <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>
+
+  {#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 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/WidgetDeviceInfo/WidgetDeviceInfo.svelte.d.ts

@@ -0,0 +1,4 @@
+import * as UI from "..";
+declare const WidgetDeviceInfo: import("svelte").Component<UI.IWidgetDeviceInfoProps, {}, "value">;
+type WidgetDeviceInfo = ReturnType<typeof WidgetDeviceInfo>;
+export default WidgetDeviceInfo;

package/dist/WidgetDeviceInfo/WidgetDeviceInfoProps.svelte

@@ -0,0 +1,26 @@
+<!-- $lib/WidgetDeviceInfo/WidgetDeviceInfoProps.svelte — панель пропсов конструктора
+     для WidgetDeviceInfo. Виджет простой, полей мало — панель тоже простая: заголовок + мастер-цвет. -->
+<script lang="ts">
+  import * as UI from ".."
+  import { updateProperty, type UIComponent, type IWidgetDeviceInfoProps } from "../types"
+  import WidgetAccentPicker from "../WidgetAccentPicker.svelte"
+
+  const { component, onPropertyChange } = $props<{
+    component: UIComponent & { properties: Partial<IWidgetDeviceInfoProps> }
+    onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string }>) => void
+  }>()
+</script>
+
+<div class="flex w-full flex-col gap-3">
+  <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+    <UI.Input
+      label={{ name: "Заголовок" }}
+      value={component.properties.label?.name}
+      onUpdate={(value) => updateProperty("label.name", value as string, component, onPropertyChange)}
+    />
+    <WidgetAccentPicker
+      value={component.properties.componentClass ?? ""}
+      onUpdate={(value) => updateProperty("componentClass", value, component, onPropertyChange)}
+    />
+  </div>
+</div>

package/dist/WidgetDeviceInfo/WidgetDeviceInfoProps.svelte.d.ts

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

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/LoaderIcon.svelte

@@ -0,0 +1,5 @@
+<script lang="ts"></script>
+
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="animate-spin"
+  ><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56" /></svg
+>

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

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/SearchIcon.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="1.5"
+    d="m14 14l2.5 2.5m-.067 2.025a1.48 1.48 0 1 1 2.092-2.092l3.042 3.042a1.48 1.48 0 1 1-2.092 2.092zM16 9A7 7 0 1 0 2 9a7 7 0 0 0 14 0"
+  /></svg
+>

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

package/dist/WidgetWiFi/WarningIcon.svelte

@@ -0,0 +1,6 @@
+<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="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0M12 9v4m0 4h.01" /></svg
+>

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

package/dist/WidgetWiFi/WidgetWiFi.svelte

@@ -0,0 +1,215 @@
+<!-- $lib/WidgetWiFi/WidgetWiFi.svelte — смарт-виджет настройки WiFi (STA/AP) для конструктора.
+     В отличие от примитивов не привязывается к одной произвольной переменной устройства —
+     работает с фиксированным набором полей (см. IWidgetWiFiConfig в types.ts), которые
+     соответствуют реальной прошивочной конвенции (main_config.c, группа "CFG", ProdFactory-ESP):
+     WiFiMode / StaSSID/StaPSK/StaticIP/StaIP/StaMS/StaGW / ApSSID/ApPSK/ApIP/ApMS/ApGW.
+     Ничего не знает про DeviceStore/WebSocket — value/onSave, вся отправка на стороне вызывающего. -->
+<script lang="ts">
+  import { slide, fade, scale } from "svelte/transition"
+  import { twMerge } from "tailwind-merge"
+  import * as UI from ".."
+  import type { IWidgetWiFiConfig, IWidgetWiFiProps, IOption } from "../types"
+  import WifiIcon from "./WifiIcon.svelte"
+  import SearchIcon from "./SearchIcon.svelte"
+  import LoaderIcon from "./LoaderIcon.svelte"
+  import WarningIcon from "./WarningIcon.svelte"
+  import WidgetHeader from "../WidgetHeader.svelte"
+  import { widgetAccentStyle } from "../widgetAccent"
+
+  let {
+    wrapperClass = "",
+    componentClass = "",
+    label = { name: "WiFi" },
+    value = $bindable(),
+    allowedModes = [1, 2, 3],
+    confirmOnAP = true,
+    onScan,
+    onSave = () => {},
+  }: IWidgetWiFiProps = $props()
+
+  /* "Мастер-цвет" виджета — переопределяет --accent-color/--accent-soft на корне, дальше это
+     штатный каскад переменных, на котором и так построены компоненты библиотеки: значок, режимы
+     STA/AP, фокус-кольцо у полей перекрашиваются вместе, одним источником истины. Кнопка
+     "Сохранить" остаётся зелёной осознанно (componentClass="bg-green" сама выставляет --bg-color). */
+  let accentStyle = $derived(widgetAccentStyle(componentClass ?? ""))
+
+  let cfg: IWidgetWiFiConfig = $state(
+    value ?? {
+      WiFiMode: 1,
+      StaSSID: "",
+      StaPSK: "",
+      StaticIP: 0,
+      StaIP: "",
+      StaMS: "",
+      StaGW: "",
+      ApSSID: "",
+      ApPSK: "",
+      ApIP: "192.168.108.1",
+      ApMS: "255.255.255.0",
+      ApGW: "192.168.108.1",
+    },
+  )
+
+  const ALL_MODE_OPTIONS: IOption<number>[] = [
+    { id: "sta", name: "STA", value: 1 },
+    { id: "ap", name: "AP", value: 2 },
+    { id: "apsta", name: "STA + AP", value: 3 },
+  ]
+  let MODE_OPTIONS = $derived(ALL_MODE_OPTIONS.filter((o) => (allowedModes ?? [1, 2, 3]).includes(o.value as number)))
+  let selectedMode = $derived(MODE_OPTIONS.find((o) => o.value === cfg.WiFiMode) ?? MODE_OPTIONS[0])
+
+  /* Режим переключается сразу и только локально — иначе нельзя спокойно открыть секцию AP и
+     заполнить SSID/пароль до реальной отправки. Предупреждение о разрыве связи с облаком
+     показывается не здесь, а перед save() — в момент, когда конфиг действительно уходит на
+     устройство и режим на нём меняется. STA+AP не предупреждаем: STA остаётся активным. */
+  let showAPWarning = $state(false)
+
+  const IP_MODE_OPTIONS: IOption<number>[] = [
+    { id: "dhcp", name: "DHCP", value: 0 },
+    { id: "static", name: "Static", value: 1 },
+  ]
+  let selectedIPMode = $derived(IP_MODE_OPTIONS.find((o) => o.value === cfg.StaticIP) ?? IP_MODE_OPTIONS[0])
+
+  const IP_REGEXP = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
+  /* WPA2: пусто (открытая сеть) либо 8-63 символа — так же ограничивает сам чип */
+  const PSK_REGEXP = /^$|^.{8,63}$/
+
+  /* Сканирование сетей — на стороне вызывающего (в проде вызывает Header: GET, Argument: APsList) */
+  let scanning = $state(false)
+  let foundNetworks: IOption<string>[] = $state([])
+  const scanNetworks = async () => {
+    if (!onScan) return
+    scanning = true
+    foundNetworks = await onScan()
+    scanning = false
+  }
+
+  /* Сворачивание тела виджета по клику на значок/заголовок (как аккордеон) — переключатель режима
+     в шапке кликом не триггерит, только сама кнопка значок+заголовок (см. WidgetHeader.svelte) */
+  let collapsed = $state(false)
+
+  /* Поля редактируются локально (как Argument: NoSend в реальной GUI) — отправка одним пакетом по кнопке */
+  let savedSnapshot = $state(JSON.stringify(cfg))
+  let isDirty = $derived(JSON.stringify(cfg) !== savedSnapshot)
+  const commitSave = () => {
+    onSave?.($state.snapshot(cfg))
+    savedSnapshot = JSON.stringify(cfg)
+  }
+  const save = () => {
+    if (cfg.WiFiMode === 2 && confirmOnAP) showAPWarning = true
+    else commitSave()
+  }
+  const confirmAndSave = () => {
+    showAPWarning = false
+    commitSave()
+  }
+</script>
+
+<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}>
+  <!-- Заголовок и переключатель режима -->
+  <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}
+
+      {#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="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}
+
+  {#if showAPWarning}
+    <!-- Подтверждение локально к виджету (не на весь экран) — предупреждение относится
+       именно к этой карточке, а не к странице целиком -->
+    <div
+      class="absolute inset-0 z-10 flex items-center justify-center rounded-2xl bg-black/40 backdrop-blur-[2px]"
+      transition:fade={{ duration: 150 }}
+    >
+      <div
+        class="flex w-full max-w-80 flex-col gap-3 rounded-[16px] border border-(--hairline-color) bg-(--back-color) p-4 shadow-(--elevation-3)"
+        transition:scale={{ duration: 150, start: 0.96 }}
+      >
+        <div class="flex items-center gap-2 text-(--orange-color)">
+          <WarningIcon />
+          <h4 class="text-[15px] font-semibold text-(--font-color)">Сохранить режим AP?</h4>
+        </div>
+        <p class="text-[13px] text-(--muted-color)">
+          Wi-Fi клиент (STA) будет выключен, устройство отключится от облака и станет доступно только по своей точке доступа. Продолжить?
+        </p>
+        <div class="flex gap-2">
+          <UI.Button wrapperClass="flex-1" componentClass="bg-transparent" content={{ name: "Отмена" }} onClick={() => (showAPWarning = false)} />
+          <UI.Button wrapperClass="flex-1" componentClass="bg-red" content={{ name: "Сохранить" }} onClick={confirmAndSave} />
+        </div>
+      </div>
+    </div>
+  {/if}
+</div>

package/dist/WidgetWiFi/WidgetWiFi.svelte.d.ts

@@ -0,0 +1,4 @@
+import * as UI from "..";
+declare const WidgetWiFi: import("svelte").Component<UI.IWidgetWiFiProps, {}, "value">;
+type WidgetWiFi = ReturnType<typeof WidgetWiFi>;
+export default WidgetWiFi;

package/dist/WidgetWiFi/WidgetWiFiProps.svelte

@@ -0,0 +1,65 @@
+<!-- $lib/WidgetWiFi/WidgetWiFiProps.svelte — панель пропсов конструктора для WidgetWiFi.
+     Виджет — самостоятельный тип компонента (не набор примитивов с привязкой полей),
+     поэтому и панель проще: не "к какой переменной привязать", а "как виджет себя ведёт". -->
+<script lang="ts">
+  import * as UI from ".."
+  import { updateProperty, type UIComponent, type IWidgetWiFiProps, type IOption } from "../types"
+  import WidgetAccentPicker from "../WidgetAccentPicker.svelte"
+
+  const { component, onPropertyChange } = $props<{
+    component: UIComponent & { properties: Partial<IWidgetWiFiProps> }
+    onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string }>) => void
+  }>()
+
+  const MODE_OPTIONS: IOption<number>[] = [
+    { id: "sta", name: "STA", value: 1 },
+    { id: "ap", name: "AP", value: 2 },
+    { id: "apsta", name: "STA + AP", value: 3 },
+  ]
+</script>
+
+{#snippet WidgetLabel()}
+  <UI.Input
+    label={{ name: "Заголовок" }}
+    value={component.properties.label?.name}
+    onUpdate={(value) => updateProperty("label.name", value as string, component, onPropertyChange)}
+  />
+{/snippet}
+
+{#snippet WidgetAllowedModes()}
+  <UI.Select
+    label={{ name: "Разрешённые режимы" }}
+    type="buttons"
+    multiSelect={true}
+    options={MODE_OPTIONS}
+    value={MODE_OPTIONS.filter((o) => (component.properties.allowedModes ?? [1, 2, 3]).includes(o.value as number))}
+    onUpdate={(value) => {
+      if (Array.isArray(value)) updateProperty("allowedModes", value.map((o) => o.value) as number[], component, onPropertyChange)
+    }}
+  />
+{/snippet}
+
+{#snippet WidgetConfirmAP()}
+  <UI.Switch
+    label={{ name: "Подтверждение при включении AP" }}
+    value={component.properties.confirmOnAP === false ? 0 : 1}
+    options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
+    onChange={(value) => updateProperty("confirmOnAP", value === 1, component, onPropertyChange)}
+  />
+{/snippet}
+
+{#snippet WidgetColor()}
+  <WidgetAccentPicker
+    value={component.properties.componentClass ?? ""}
+    onUpdate={(value) => updateProperty("componentClass", value, component, onPropertyChange)}
+  />
+{/snippet}
+
+<div class="flex w-full flex-col gap-3">
+  <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+    {@render WidgetLabel()}
+    {@render WidgetConfirmAP()}
+  </div>
+  {@render WidgetAllowedModes()}
+  {@render WidgetColor()}
+</div>

package/dist/WidgetWiFi/WidgetWiFiProps.svelte.d.ts

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

package/dist/WidgetWiFi/WifiIcon.svelte

@@ -0,0 +1,6 @@
+<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="M5 12.55a11 11 0 0 1 14.08 0M1.42 9a16 16 0 0 1 21.16 0M8.53 16.11a6 6 0 0 1 6.95 0M12 20h.01" /></svg
+>

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

package/dist/index.d.ts

@@ -39,7 +39,11 @@ export { default as VideoViewer } from "./VideoViewer/VideoViewer.svelte";
 export { default as VideoViewerProps } from "./VideoViewer/VideoViewerProps.svelte";
 export { default as Widget } from "./Widget/Widget.svelte";
 export { default as WidgetProps } from "./Widget/WidgetProps.svelte";
+export { default as WidgetWiFi } from "./WidgetWiFi/WidgetWiFi.svelte";
+export { default as WidgetWiFiProps } from "./WidgetWiFi/WidgetWiFiProps.svelte";
+export { default as WidgetDeviceInfo } from "./WidgetDeviceInfo/WidgetDeviceInfo.svelte";
+export { default as WidgetDeviceInfoProps } from "./WidgetDeviceInfo/WidgetDeviceInfoProps.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 IGraphProps, type IGraphDataObject, type ITableHeader, 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 IGraphProps, type IGraphDataObject, type ITableHeader, 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

@@ -40,6 +40,10 @@ export { default as VideoViewer } from "./VideoViewer/VideoViewer.svelte";
 export { default as VideoViewerProps } from "./VideoViewer/VideoViewerProps.svelte";
 export { default as Widget } from "./Widget/Widget.svelte";
 export { default as WidgetProps } from "./Widget/WidgetProps.svelte";
+export { default as WidgetWiFi } from "./WidgetWiFi/WidgetWiFi.svelte";
+export { default as WidgetWiFiProps } from "./WidgetWiFi/WidgetWiFiProps.svelte";
+export { default as WidgetDeviceInfo } from "./WidgetDeviceInfo/WidgetDeviceInfo.svelte";
+export { default as WidgetDeviceInfoProps } from "./WidgetDeviceInfo/WidgetDeviceInfoProps.svelte";
 export * from "./locales/i18n";
 export * from "./locales/translations";
 export * from "./ModalStackStore";

package/dist/options.js

@@ -54,14 +54,20 @@ export const optionsStore = derived(T, ($T) => {
             { id: id(), value: "underline", name: $T("constructor.props.underline") },
             { id: id(), value: "background", name: $T("constructor.props.background") },
         ],
+        /* Единая семантическая палитра (app.css: --X-color/--X-soft, светлая и тёмная тема уже учтены) —
+           тот же набор ролей, что и в "мастер-цвете" виджетов конструктора (widgetAccent.ts на стороне
+           приложения). bg-max — нейтральный вариант (= --back-color), с ним свотч отмечается рамкой
+           (Select.svelte: hasOwnColor), а не акцентной синей заливкой, как обычный сегмент-контрол. */
         COLOR_OPTIONS: [
-            { id: id(), name: "", value: "bg-max", class: "bg-max" },
+            { id: id(), name: "-", value: "bg-max", class: "bg-max text-transparent" },
             { id: id(), name: "", value: "bg-red", class: "bg-red" },
+            { id: id(), name: "", value: "bg-orange", class: "bg-orange" },
             { id: id(), name: "", value: "bg-yellow", class: "bg-yellow" },
             { id: id(), name: "", value: "bg-green", class: "bg-green" },
-            { id: id(), name: "-", value: "bg-blue", class: "bg-blue text-transparent" },
+            { id: id(), name: "", value: "bg-cyan", class: "bg-cyan" },
+            { id: id(), name: "", value: "bg-blue", class: "bg-blue" },
             { id: id(), name: "", value: "bg-purple", class: "bg-purple" },
-            { id: id(), name: "", value: "bg-gray", class: "bg-gray" },
+            { id: id(), name: "", value: "bg-pink", class: "bg-pink" },
         ],
         TEXT_COLOR_OPTIONS: [
             {

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;
+    properties: IAccordionProps | IButtonProps | IColorPickerProps | IDividerProps | IFileAttachProps | IGraphProps | IInputProps | IJoystickProps | IMapProps | IPeriodChartProps | IProgressBarProps | ISelectProps<unknown> | ISliderProps | ISwitchProps | ITableProps<object> | ITabsProps | ITextFieldProps | IWidgetProps | IWidgetWiFiProps | IWidgetDeviceInfoProps;
     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";
+    type: "Accordion" | "Button" | "ColorPicker" | "Divider" | "FileAttach" | "Graph" | "Input" | "Joystick" | "Map" | "PeriodChart" | "ProgressBar" | "Select" | "Slider" | "Switch" | "Table" | "Tabs" | "TextField" | "VideoViewer" | "Widget" | "WidgetWiFi" | "WidgetDeviceInfo";
     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";
-    properties: IAccordionProps | IButtonProps | IColorPickerProps | IDividerProps | IFileAttachProps | IGraphProps | IInputProps | IJoystickProps | IMapProps | IPeriodChartProps | IProgressBarProps | ISelectProps | ISliderProps | ISwitchProps | ITableProps<object> | ITabsProps | ITextFieldProps | IWidgetProps;
+    type: "Accordion" | "Button" | "ColorPicker" | "Divider" | "FileAttach" | "Graph" | "Input" | "Joystick" | "Map" | "PeriodChart" | "ProgressBar" | "Select" | "Slider" | "Switch" | "Table" | "Tabs" | "TextField" | "VideoViewer" | "Widget" | "WidgetWiFi" | "WidgetDeviceInfo";
+    properties: IAccordionProps | IButtonProps | IColorPickerProps | IDividerProps | IFileAttachProps | IGraphProps | IInputProps | IJoystickProps | IMapProps | IPeriodChartProps | IProgressBarProps | ISelectProps | ISliderProps | ISwitchProps | ITableProps<object> | ITabsProps | ITextFieldProps | IWidgetProps | IWidgetWiFiProps | IWidgetDeviceInfoProps;
     position: Required<Position>;
     parentId: string;
     eventHandler?: IUIComponentHandler;
@@ -492,3 +492,55 @@ export interface IWidgetProps {
     };
     onUpdate?: (value: number) => void;
 }
+export interface IWidgetWiFiConfig {
+    WiFiMode: number;
+    StaSSID: string;
+    StaPSK: string;
+    StaticIP: number;
+    StaIP: string;
+    StaMS: string;
+    StaGW: string;
+    ApSSID: string;
+    ApPSK: string;
+    ApIP: string;
+    ApMS: string;
+    ApGW: string;
+}
+export interface IWidgetWiFiProps {
+    id?: string;
+    wrapperClass?: string;
+    componentClass?: string;
+    label?: {
+        name?: string;
+    };
+    value?: IWidgetWiFiConfig;
+    allowedModes?: number[];
+    confirmOnAP?: boolean;
+    onScan?: () => Promise<{
+        id: string;
+        name: string;
+        value: string;
+    }[]>;
+    onSave?: (config: IWidgetWiFiConfig) => void;
+}
+export interface IWidgetDeviceInfoConfig {
+    DevSN: string;
+    DevID: string;
+    DevFW: number;
+    RunCnt: number;
+    DevName: string;
+    HostName: string;
+    WebUser: string;
+    WebPsw: string;
+}
+export interface IWidgetDeviceInfoProps {
+    id?: string;
+    wrapperClass?: string;
+    componentClass?: string;
+    label?: {
+        name?: string;
+    };
+    value?: IWidgetDeviceInfoConfig;
+    onSave?: (info: IWidgetDeviceInfoConfig) => void;
+    onRestart?: () => void;
+}

package/dist/widgetAccent.d.ts

@@ -0,0 +1 @@
+export declare const widgetAccentStyle: (componentClass: string) => string;

package/dist/widgetAccent.js

@@ -0,0 +1,16 @@
+/* $lib/widgetAccent.ts — общий "мастер-цвет" для смарт-виджетов конструктора (WidgetWiFi,
+   WidgetDeviceInfo и далее). Роль вида "bg-red" (см. optionsStore.COLOR_OPTIONS — та же палитра,
+   что и во всех примитивах) разворачивается в переопределение --accent-color/--accent-soft на
+   корне виджета: весь внутренний UI (сегмент-контролы, фокус у полей и т.п.) уже читает именно
+   эти переменные, поэтому виджет перекрашивается целиком одним источником истины. */
+/* componentClass — значение вида "bg-red" из optionsStore.COLOR_OPTIONS (или "" — без роли,
+   обычный акцент темы). Возвращает inline-style для корня виджета; пустая строка ничего не переопределяет. */
+export const widgetAccentStyle = (componentClass) => {
+    if (!componentClass)
+        return "";
+    const role = componentClass.replace(/^bg-/, "");
+    if (role === "max")
+        return "";
+    return (`--accent-color: var(--${role}-color); --accent-soft: var(--${role}-soft); --accent-hover: var(--${role}-color);` +
+        `--focus-shadow-color: 0 0 0 3px color-mix(in srgb, var(--${role}-color) 18%, transparent);`);
+};

package/package.json

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