poe-svelte-ui-lib 1.33.1 → 1.34.1

package/dist/Table/Table.svelte

@@ -259,7 +259,7 @@
   <div class="relative flex h-full w-full flex-col overflow-hidden rounded-[14px] border border-(--hairline-color) bg-(--back-color)">
     <!-- Table Header -->
     <div
-      class="grid border-b border-(--hairline-color) bg-(--container-color) text-[11px] font-bold tracking-[0.06em] text-(--muted-color) uppercase"
+      class="grid border-b border-(--hairline-color) bg-[var(--table-header-color,var(--container-color))] text-[11px] font-bold tracking-[0.06em] text-(--muted-color) uppercase"
       style={`grid-template-columns: ${gridTemplate}; padding-right: ${scrollbarWidth}px;`}
     >
       {#each header as column, index (column)}

package/dist/Widget/Widget.svelte

@@ -5,6 +5,7 @@
 <script lang="ts">
   import type { IWidgetProps } from "../types"
   import { twMerge } from "tailwind-merge"
+  import { widgetAccentStyle } from "../widgetAccent"
 
   let {
     id = crypto.randomUUID(),
@@ -17,6 +18,9 @@
     onUpdate = () => {},
   }: IWidgetProps = $props()
 
+  /* Мастер-цвет — роль из settings.class, тот же механизм, что у смарт-виджетов: перекрашивает переключатель, слайдер и фокус поля */
+  let accentStyle = $derived(widgetAccentStyle(settings.class ?? ""))
+
   let currentIndex = $state(0)
   let intervalId: number | null = null
 
@@ -125,7 +129,7 @@
     focus-visible:outline-none`
 </script>
 
-<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge("h-full w-full", wrapperClass)}>
+<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge("h-full w-full", wrapperClass)} style={accentStyle}>
   <div class="flex h-full flex-col overflow-hidden rounded-[14px] border border-(--hairline-color) bg-(--back-color)">
     <!-- Шапка: иконка + название, фиксированная высота -->
     <div class="flex h-11 shrink-0 items-center gap-2.5 border-b border-(--hairline-color) px-3.5">

package/dist/Widget/WidgetProps.svelte

@@ -7,6 +7,7 @@
   import { twMerge } from "tailwind-merge"
   import CommonSnippets from "../CommonSnippets.svelte"
   import PropsGroup from "../PropsGroup.svelte"
+  import WidgetAccentPicker from "../WidgetAccentPicker.svelte"
   import { getContext } from "svelte"
 
   const {
@@ -43,14 +44,9 @@
 {/snippet}
 
 {#snippet WidgetSettingsColor()}
-  <UI.Select
-    wrapperClass="!h-14"
-    label={{ name: $T("constructor.props.componentcolor") }}
-    type="buttons"
-    options={$optionsStore.COLOR_OPTIONS}
-    value={initialColor}
-    onUpdate={(option) => {
-      const bgClass = (option as UI.IOption<string>).value as string
+  <WidgetAccentPicker
+    value={(initialColor?.value as string) ?? ""}
+    onUpdate={(bgClass) => {
       updateProperty("settings.class", twMerge(component.properties.settings.class, bgClass), component, onPropertyChange)
       updateProperty("icons.class", twMerge(component.properties.icons.class, deriveIconColorClass(bgClass)), component, onPropertyChange)
     }}

package/dist/WidgetDeviceInfo/WidgetDeviceInfo.svelte

@@ -80,7 +80,7 @@
 </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)}
+  class={twMerge("flex w-full flex-col gap-4 rounded-2xl border border-(--hairline-color) bg-(--container-color) p-4", wrapperClass)}
   style={accentStyle}
 >
   <!-- Заголовок -->

package/dist/WidgetFileSystem/WidgetFileSystem.svelte

@@ -107,7 +107,7 @@
 </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)}
+  class={twMerge("relative flex w-full flex-col gap-4 rounded-2xl border border-(--hairline-color) bg-(--container-color) p-4", wrapperClass)}
   style={accentStyle}
 >
   <!-- Заголовок -->

package/dist/WidgetStackInfo/MemoryIcon.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="M6 19v-3m4 3v-3m4 3v-3m4 3v-3M8 11V9m8 2V9m-4 2V9M2 15h20M2 7a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v1.1a2 2 0 0 0 0 3.837V17a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-5.1a2 2 0 0 0 0-3.837Z"
+  /></svg
+>

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

package/dist/WidgetStackInfo/README.md

@@ -0,0 +1,72 @@
+# WidgetStackInfo Component
+
+## Описание
+
+Отладочный смарт-виджет памяти и задач FreeRTOS: занятость каждой кучи и минимальный запас стека
+каждой задачи. Работает с одним объектом `StackInfo` ровно в том виде, в каком его отдаёт
+`API_GetStackInfo` (ProdFactory-ESP и ProdFactory-STM — контракт общий), и с одним запросом
+`GET StackInfo`. Компонент ничего не знает про DeviceStore/WebSocket — только `value` и `onRefresh`.
+
+- **Кучи** — карточка на каждую: «занято X из Y», процент (оранжевый от 75%, красный от 90%) и
+  полоса мастер-цвета; светлая подложка полосы — пик занятости с момента старта (`Total − MinFree`).
+- **Задачи** — таблица «Задача / Состояние / Приоритет / Ядро / Запас». Порядок всегда по
+  возрастанию запаса стека: самые рискованные сверху (сортировка кликом при автоопросе сбрасывалась
+  бы на каждом ответе). Запас меньше `warnBytes` — красный, меньше удвоенного — оранжевый, над
+  таблицей — число задач ниже порога. Колонка «Ядро» есть, только если устройство передаёт `Core`.
+- **Обновление** — кнопка «Обновить» и автоопрос «Выкл / 1 с / 5 с / 10 с» (`period`); при
+  включении опрос сразу шлёт запрос, свёрнутый виджет не опрашивает.
+
+## Протокол устройства
+
+```
+"StackInfo": {
+  "Heap": [
+    { "Name": "Internal", "Total": 327680,  "Free": 118000,  "MinFree": 92000 },
+    { "Name": "Default",  "Total": 4521984, "Free": 4100000, "MinFree": 4040000 }
+  ],
+  "Tasks": [{ "Name": "api_task", "FreeMin": 1240, "Prio": 5, "Core": 1, "State": 2 }]
+}
+```
+
+Все размеры в байтах. ESP отдаёт две кучи (`Internal` — внутренний DRAM, `Default` — всё, что
+отдаёт `malloc`, включая PSRAM) и `Core` (-1 — без привязки к ядру); STM — одну кучу `Heap`
+(heap_4, `configTOTAL_HEAP_SIZE`) и без `Core`. `State` — `eTaskState`: 0 работает, 1 готова,
+2 ожидает, 3 приостановлена, 4 удалена.
+
+## Пропсы
+
+| Название         | Тип                      | По умолчанию                  | Описание                                                                  |
+| ---------------- | ------------------------ | ----------------------------- | ------------------------------------------------------------------------- |
+| `wrapperClass`   | `string`                 | `""`                          | CSS-классы обёртки                                                        |
+| `componentClass` | `string`                 | `""`                          | «Мастер-цвет» виджета — роль вида `"bg-red"`, перекрашивает весь виджет   |
+| `label`          | `{ name?: string }`      | `{ name: "Память и задачи" }` | Заголовок карточки                                                        |
+| `value`          | `IWidgetStackInfo`       | `undefined`                   | Снимок `StackInfo`; без него — «Нет данных»                               |
+| `keys`           | `{ StackInfo?: string }` | `undefined`                   | Переопределение имени объекта ответа, по умолчанию `StackInfo`            |
+| `argument`       | `string`                 | `undefined`                   | Аргумент запроса, по умолчанию `"StackInfo"` (используется вызывающим)    |
+| `warnBytes`      | `number`                 | `512`                         | Порог подсветки запаса стека, байт                                        |
+| `period`         | `number`                 | `0`                           | Период автоопроса, мс; 0 — только по кнопке (`$bindable`)                 |
+| `collapsed`      | `boolean`                | `false`                       | Свёрнуто ли тело виджета (`$bindable`)                                    |
+| `persistKey`     | `string`                 | `undefined`                   | Ключ для сохранения `collapsed` в `localStorage`                          |
+| `onRefresh`      | `() => void`             | `undefined`                   | Запрос снимка (`GET StackInfo`); без обработчика кнопка и опрос неактивны |
+
+## Примеры
+
+```svelte
+<script>
+  import * as UI from "poe-svelte-ui-lib"
+
+  let stackInfo = $state()
+</script>
+
+<UI.WidgetStackInfo value={stackInfo} warnBytes={768} onRefresh={() => console.log("GET StackInfo")} />
+```
+
+## Конструктор свойств (WidgetStackInfoProps.svelte)
+
+| Название           | Тип                                                                                             | Описание                                  |
+| ------------------ | ----------------------------------------------------------------------------------------------- | ----------------------------------------- |
+| `component`        | `UIComponent & { properties: Partial<IWidgetStackInfoProps> }`                                  | Объект компонента с его свойствами        |
+| `onPropertyChange` | `(updates: Partial<{ properties?: string \| object; name?: string; access?: string }>) => void` | Коллбэк для обновления свойств компонента |
+
+Группы панели: общие (заголовок, мастер-цвет), отображение (`warnBytes`, `period`), устройство
+(объект ответа, аргумент запроса).

package/dist/WidgetStackInfo/RefreshIcon.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 0 0-9-9a9.75 9.75 0 0 0-6.74 2.74L3 8m0-5v5h5m-5 4a9 9 0 0 0 9 9a9.75 9.75 0 0 0 6.74-2.74L21 16m-5 0h5v5"
+  /></svg
+>

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

package/dist/WidgetStackInfo/WidgetStackInfo.svelte

@@ -0,0 +1,179 @@
+<!-- $lib/WidgetStackInfo/WidgetStackInfo.svelte — отладочный смарт-виджет памяти и задач FreeRTOS.
+     Данные — один объект StackInfo в том виде, в каком его отдают ProdFactory-ESP и ProdFactory-STM
+     (API_GetStackInfo): Heap[{Name, Total, Free, MinFree}] и Tasks[{Name, FreeMin, Prio, Core?, State}].
+     Ничего не знает про DeviceStore/WebSocket — value/onRefresh, автоопрос лишь периодически зовёт onRefresh. -->
+<script lang="ts">
+  import { slide } from "svelte/transition"
+  import { twMerge } from "tailwind-merge"
+  import * as UI from ".."
+  import type { IOption, ITableHeader, IWidgetStackInfoProps, IWidgetStackInfoTask } from "../types"
+  import MemoryIcon from "./MemoryIcon.svelte"
+  import RefreshIcon from "./RefreshIcon.svelte"
+  import WidgetHeader from "../WidgetHeader.svelte"
+  import { widgetAccentStyle } from "../widgetAccent"
+  import { readPersistedCollapsed, writePersistedCollapsed } from "../widgetCollapse"
+
+  let {
+    wrapperClass = "",
+    componentClass = "",
+    label = { name: "Память и задачи" },
+    value,
+    warnBytes = 512,
+    period = $bindable(0),
+    collapsed = $bindable(false),
+    persistKey,
+    onRefresh,
+  }: IWidgetStackInfoProps = $props()
+
+  let accentStyle = $derived(widgetAccentStyle(componentClass ?? ""))
+
+  /* Сворачивание тела по клику на шапку — как у остальных смарт-виджетов (см. WidgetWiFi.svelte) */
+  let hasMergedPersisted = false
+  $effect(() => {
+    if (hasMergedPersisted) return
+    hasMergedPersisted = true
+    const persisted = readPersistedCollapsed(persistKey, collapsed)
+    if (persisted !== collapsed) collapsed = persisted
+  })
+  $effect(() => writePersistedCollapsed(persistKey, collapsed))
+
+  /* Автоопрос: сразу при включении и далее раз в period; свёрнутый виджет не опрашивает */
+  const periods: IOption<number>[] = [
+    { id: "off", value: 0, name: "Выкл" },
+    { id: "1s", value: 1000, name: "1 с" },
+    { id: "5s", value: 5000, name: "5 с" },
+    { id: "10s", value: 10000, name: "10 с" },
+  ]
+  $effect(() => {
+    if (!period || period <= 0 || collapsed || !onRefresh) return
+    onRefresh()
+    const timer = setInterval(() => onRefresh?.(), period)
+    return () => clearInterval(timer)
+  })
+
+  /* Размер в человекочитаемом виде: Б / КБ / МБ, одна цифра после запятой начиная с КБ */
+  const formatBytes = (bytes: number) => {
+    if (!Number.isFinite(bytes) || bytes < 0) return "—"
+    if (bytes < 1024) return `${bytes} Б`
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} КБ`
+    return `${(bytes / (1024 * 1024)).toFixed(1)} МБ`
+  }
+  const percent = (part: number, total: number) => (total > 0 ? Math.min(100, Math.max(0, Math.round((part / total) * 100))) : 0)
+
+  /* Текущая занятость — мастер-цвет, пик занятости с момента старта (Total − MinFree) — его светлая подложка */
+  let heaps = $derived(
+    (value?.Heap ?? []).map((h) => {
+      const used = Math.max(h.Total - h.Free, 0)
+      const peak = Math.max(h.Total - h.MinFree, used)
+      return { ...h, used, usedPercent: percent(used, h.Total), peakPercent: percent(peak, h.Total) }
+    }),
+  )
+  const percentColor = (p: number) => (p >= 90 ? "var(--red-color)" : p >= 75 ? "var(--orange-color)" : "var(--muted-color)")
+
+  /* Имена задач приходят с устройства, а Table выводит ячейки через {@html} — экранируем */
+  const escapeHtml = (text: string) => text.replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`)
+  const STATES = ["Работает", "Готова", "Ожидает", "Приостановлена", "Удалена"]
+  const stackColor = (bytes: number) => (bytes < warnBytes ? "var(--red-color)" : bytes < warnBytes * 2 ? "var(--orange-color)" : "")
+
+  type TaskRow = { Name: string; StateText: string; Prio: number; CoreText: string; FreeMinText: string }
+  let tasks = $derived([...(value?.Tasks ?? [])].sort((a, b) => a.FreeMin - b.FreeMin))
+  let hasCore = $derived(tasks.some((t) => t.Core !== undefined))
+  let lowCount = $derived(tasks.filter((t) => t.FreeMin < warnBytes).length)
+
+  /* Порядок фиксированный — по возрастанию запаса стека: при автоопросе сортировка кликом сбрасывалась бы каждый ответ */
+  let rows: TaskRow[] = $derived(
+    tasks.map((t: IWidgetStackInfoTask) => {
+      const color = stackColor(t.FreeMin)
+      return {
+        Name: escapeHtml(t.Name),
+        StateText: STATES[t.State] ?? "—",
+        Prio: t.Prio,
+        CoreText: t.Core === undefined ? "" : t.Core < 0 ? "любое" : String(t.Core),
+        FreeMinText: color ? `<span style="color: ${color}; font-weight: 600">${t.FreeMin}</span>` : String(t.FreeMin),
+      }
+    }),
+  )
+  let header: ITableHeader<TaskRow>[] = $derived([
+    { label: { name: "Задача" }, content: [{ type: "text", data: { key: "Name", truncated: true } }], width: "1fr", align: "left" },
+    { label: { name: "Состояние" }, content: [{ type: "text", data: { key: "StateText", truncated: true } }], width: "9.5rem", align: "left" },
+    { label: { name: "Приор." }, content: [{ type: "text", data: { key: "Prio" } }], width: "5.5rem", align: "center" },
+    ...(hasCore
+      ? [{ label: { name: "Ядро" }, content: [{ type: "text", data: { key: "CoreText" } }], width: "5.5rem", align: "center" } as ITableHeader<TaskRow>]
+      : []),
+    { label: { name: "Запас, Б" }, content: [{ type: "text", data: { key: "FreeMinText" } }], width: "6rem", align: "right" },
+  ])
+</script>
+
+<div
+  class={twMerge("relative flex w-full flex-col gap-4 rounded-2xl border border-(--hairline-color) bg-(--container-color) p-4", wrapperClass)}
+  style={accentStyle}
+>
+  <!-- Заголовок -->
+  <WidgetHeader icon={MemoryIcon} label={label?.name ?? "Память и задачи"} bind:collapsed>
+    {#snippet right()}
+      <div class="flex items-center gap-2">
+        <UI.Select
+          wrapperClass="w-64"
+          type="buttons"
+          options={periods}
+          value={periods.find((p) => p.value === period) ?? periods[0]}
+          disabled={!onRefresh}
+          onUpdate={(option) => !Array.isArray(option) && (period = option.value ?? 0)}
+        />
+        <UI.Button
+          wrapperClass="w-auto"
+          componentClass="bg-transparent px-3"
+          content={{ icon: RefreshIcon, name: "Обновить" }}
+          disabled={!onRefresh}
+          onClick={() => onRefresh?.()}
+        />
+      </div>
+    {/snippet}
+  </WidgetHeader>
+
+  {#if !collapsed}
+    <div class="flex flex-col gap-4" transition:slide={{ duration: 150 }}>
+      {#if !value}
+        <div class="rounded-[10px] border border-(--hairline-color) bg-(--back-color) p-3 text-center text-[13px] text-(--faint-color)">
+          Нет данных — нажмите «Обновить»
+        </div>
+      {:else}
+        <!-- Кучи -->
+        <div class="grid gap-3 {heaps.length > 1 ? 'sm:grid-cols-2' : ''}">
+          {#each heaps as heap (heap.Name)}
+            <div class="flex flex-col gap-2 rounded-[10px] border border-(--hairline-color) bg-(--back-color) p-3">
+              <div class="flex items-baseline justify-between gap-2 text-[13px]">
+                <span class="truncate font-semibold">{heap.Name}: {formatBytes(heap.used)} из {formatBytes(heap.Total)}</span>
+                <span class="font-semibold tabular-nums" style="color: {percentColor(heap.usedPercent)}">{heap.usedPercent}%</span>
+              </div>
+              <div class="relative h-2 w-full overflow-hidden rounded-full bg-(--container-color)">
+                <div class="absolute inset-y-0 left-0 rounded-full bg-(--accent-soft) transition-[width] duration-300" style="width: {heap.peakPercent}%"></div>
+                <div
+                  class="absolute inset-y-0 left-0 rounded-full bg-(--accent-color) transition-[width] duration-300"
+                  style="width: {heap.usedPercent}%"
+                ></div>
+              </div>
+              <div class="flex justify-between gap-2 text-[12px] text-(--muted-color)">
+                <span>Свободно {formatBytes(heap.Free)}</span>
+                <span>Минимум {formatBytes(heap.MinFree)}</span>
+              </div>
+            </div>
+          {/each}
+        </div>
+
+        <!-- Задачи -->
+        <div class="flex flex-col gap-2">
+          <div class="flex items-baseline justify-between gap-2 text-[12px] text-(--muted-color)">
+            <span>Задач: {tasks.length}</span>
+            {#if lowCount}
+              <span class="font-semibold text-(--red-color)">Запас стека меньше {warnBytes} Б: {lowCount}</span>
+            {/if}
+          </div>
+          <div class="flex max-h-80 min-h-0 flex-col">
+            <UI.Table {header} body={rows} outline />
+          </div>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>

package/dist/WidgetStackInfo/WidgetStackInfo.svelte.d.ts

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

package/dist/WidgetStackInfo/WidgetStackInfoProps.svelte

@@ -0,0 +1,58 @@
+<!-- $lib/WidgetStackInfo/WidgetStackInfoProps.svelte — панель пропсов конструктора для
+     WidgetStackInfo: заголовок/мастер-цвет, порог подсветки запаса стека, автоопрос по умолчанию,
+     имя объекта ответа (keys.StackInfo) и аргумент запроса — все с дефолтами прошивочной конвенции
+     (см. DEFAULT_PROPS.WidgetStackInfo в DevCloud). -->
+<script lang="ts">
+  import { T } from "../locales/i18n"
+  import * as UI from ".."
+  import { updateProperty, type UIComponent, type IWidgetStackInfoProps } from "../types"
+  import WidgetAccentPicker from "../WidgetAccentPicker.svelte"
+  import PropsGroup from "../PropsGroup.svelte"
+
+  const { component, onPropertyChange } = $props<{
+    component: UIComponent & { properties: Partial<IWidgetStackInfoProps> }
+    onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string }>) => void
+  }>()
+</script>
+
+<div class="flex flex-col gap-2">
+  <PropsGroup label={$T("constructor.props.group.general")}>
+    <UI.Input
+      label={{ name: "Заголовок" }}
+      value={component.properties.label?.name}
+      onUpdate={(value) => updateProperty("label.name", value as string, component, onPropertyChange)}
+    />
+    <WidgetAccentPicker
+      value={component.properties.componentClass ?? ""}
+      onUpdate={(value) => updateProperty("componentClass", value, component, onPropertyChange)}
+    />
+  </PropsGroup>
+  <PropsGroup label="Отображение">
+    <UI.Input
+      label={{ name: "Порог запаса стека, Б" }}
+      type="number"
+      number={{ minNum: 0, maxNum: 65535, step: 64 }}
+      value={component.properties.warnBytes ?? 512}
+      onUpdate={(value) => updateProperty("warnBytes", Number(value), component, onPropertyChange)}
+    />
+    <UI.Input
+      label={{ name: "Автоопрос по умолчанию, мс (0 — выкл)" }}
+      type="number"
+      number={{ minNum: 0, maxNum: 60000, step: 1000 }}
+      value={component.properties.period ?? 0}
+      onUpdate={(value) => updateProperty("period", Number(value), component, onPropertyChange)}
+    />
+  </PropsGroup>
+  <PropsGroup label="Устройство">
+    <UI.Input
+      label={{ name: "Объект ответа" }}
+      value={component.properties.keys?.StackInfo ?? "StackInfo"}
+      onUpdate={(value) => updateProperty("keys.StackInfo", value as string, component, onPropertyChange)}
+    />
+    <UI.Input
+      label={{ name: "Аргумент запроса" }}
+      value={component.properties.argument ?? "StackInfo"}
+      onUpdate={(value) => updateProperty("argument", value as string, component, onPropertyChange)}
+    />
+  </PropsGroup>
+</div>

package/dist/WidgetStackInfo/WidgetStackInfoProps.svelte.d.ts

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

package/dist/WidgetWiFi/WidgetWiFi.svelte

@@ -135,7 +135,7 @@
 </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)}
+  class={twMerge("relative flex w-full flex-col gap-4 rounded-2xl border border-(--hairline-color) bg-(--container-color) p-4", wrapperClass)}
   style={accentStyle}
 >
   <!-- Заголовок и переключатель режима -->

package/dist/index.d.ts

@@ -45,7 +45,9 @@ export { default as WidgetDeviceInfo } from "./WidgetDeviceInfo/WidgetDeviceInfo
 export { default as WidgetDeviceInfoProps } from "./WidgetDeviceInfo/WidgetDeviceInfoProps.svelte";
 export { default as WidgetFileSystem } from "./WidgetFileSystem/WidgetFileSystem.svelte";
 export { default as WidgetFileSystemProps } from "./WidgetFileSystem/WidgetFileSystemProps.svelte";
+export { default as WidgetStackInfo } from "./WidgetStackInfo/WidgetStackInfo.svelte";
+export { default as WidgetStackInfoProps } from "./WidgetStackInfo/WidgetStackInfoProps.svelte";
 export * from "./locales/i18n";
 export * from "./locales/translations";
 export * from "./ModalStackStore";
-export { type UIComponent, type Position, type IUIComponentHandler, type IButtonProps, type IAccordionProps, type IInputProps, type ISelectProps, type IOption, type ISwitchProps, type IColorPickerProps, type IDividerProps, type ISliderProps, type ITextFieldProps, type IMapProps, type IProgressBarProps, type IWidgetProps, type IWidgetWiFiProps, type IWidgetWiFiConfig, type IWidgetDeviceInfoProps, type IWidgetDeviceInfoConfig, type IWidgetFileSystemProps, type IWidgetFileSystemInfo, type IWidgetFileSystemFile, type IWidgetFileSystemUpload, type IGraphProps, type IGraphDataObject, type IGraphHistoryPoint, type IGraphHistorySeries, type ITableHeader, type ITableText, type ITableSelect, type ITableButton, type ITableProgressBar, type ITableImage, type ITableContent, type ITableProps, type ITabsProps, type IJoystickProps, type IFileAttachProps, type IDeviceGNSS, type ICarouselProps, type IReceivingDataObject, type IVideoViewerProps, type IPeriodChartProps, type IPeriodChartLevel, } from "./types";
+export { type UIComponent, type Position, type IUIComponentHandler, type IButtonProps, type IAccordionProps, type IInputProps, type ISelectProps, type IOption, type ISwitchProps, type IColorPickerProps, type IDividerProps, type ISliderProps, type ITextFieldProps, type IMapProps, type IProgressBarProps, type IWidgetProps, type IWidgetWiFiProps, type IWidgetWiFiConfig, type IWidgetDeviceInfoProps, type IWidgetDeviceInfoConfig, type IWidgetFileSystemProps, type IWidgetFileSystemInfo, type IWidgetFileSystemFile, type IWidgetFileSystemUpload, type IWidgetStackInfoProps, type IWidgetStackInfo, type IWidgetStackInfoHeap, type IWidgetStackInfoTask, type IGraphProps, type IGraphDataObject, type IGraphHistoryPoint, type IGraphHistorySeries, type ITableHeader, type ITableText, type ITableSelect, type ITableButton, type ITableProgressBar, type ITableImage, type ITableContent, type ITableProps, type ITabsProps, type IJoystickProps, type IFileAttachProps, type IDeviceGNSS, type ICarouselProps, type IReceivingDataObject, type IVideoViewerProps, type IPeriodChartProps, type IPeriodChartLevel, } from "./types";

package/dist/index.js

@@ -46,6 +46,8 @@ export { default as WidgetDeviceInfo } from "./WidgetDeviceInfo/WidgetDeviceInfo
 export { default as WidgetDeviceInfoProps } from "./WidgetDeviceInfo/WidgetDeviceInfoProps.svelte";
 export { default as WidgetFileSystem } from "./WidgetFileSystem/WidgetFileSystem.svelte";
 export { default as WidgetFileSystemProps } from "./WidgetFileSystem/WidgetFileSystemProps.svelte";
+export { default as WidgetStackInfo } from "./WidgetStackInfo/WidgetStackInfo.svelte";
+export { default as WidgetStackInfoProps } from "./WidgetStackInfo/WidgetStackInfoProps.svelte";
 export * from "./locales/i18n";
 export * from "./locales/translations";
 export * from "./ModalStackStore";

package/dist/locales/translations.js

@@ -25,9 +25,14 @@ const translations = {
     ],
     "component.info.WidgetFileSystem": [
         "🗂️ Виджет работает с одним объектом `FS` группы `CFG` на устройстве — привязка переменных вручную не нужна.\n\n**📊 Занятость**\n- `Total`, `Used`, `Free`\n\n**📄 Файлы**\n- `List` — путь и размер; «Удалить» отправляет `SET FS` с `Op: Delete` и `Name` (после подтверждения)\n\n**⬆️ Закачка**\n- `SET FS` с `Op`: `UploadStart` → `UploadChunk` → `UploadDone`, прогресс — `Upload.Progress`\n- имя файла не длиннее 31 символа (ограничение прошивки)\n\n🔄 «Обновить» отправляет `GET FS`.\n\n⚙️ Если у прошивки другие имена, поменяйте префикс (ID), поле и аргумент в настройках виджета.",
-        "🗂️ The widget works with a single `FS` object of the device's `CFG` group — no manual variable binding needed.\n\n**📊 Usage**\n- `Total`, `Used`, `Free`\n\n**📄 Files**\n- `List` — path and size; \"Delete\" sends `SET FS` with `Op: Delete` and `Name` (after confirmation)\n\n**⬆️ Upload**\n- `SET FS` with `Op`: `UploadStart` → `UploadChunk` → `UploadDone`, progress — `Upload.Progress`\n- file name up to 31 characters (firmware limit)\n\n🔄 \"Refresh\" sends `GET FS`.\n\n⚙️ If the firmware uses different names, change the prefix (ID), field and argument in the widget settings.",
+        '🗂️ The widget works with a single `FS` object of the device\'s `CFG` group — no manual variable binding needed.\n\n**📊 Usage**\n- `Total`, `Used`, `Free`\n\n**📄 Files**\n- `List` — path and size; "Delete" sends `SET FS` with `Op: Delete` and `Name` (after confirmation)\n\n**⬆️ Upload**\n- `SET FS` with `Op`: `UploadStart` → `UploadChunk` → `UploadDone`, progress — `Upload.Progress`\n- file name up to 31 characters (firmware limit)\n\n🔄 "Refresh" sends `GET FS`.\n\n⚙️ If the firmware uses different names, change the prefix (ID), field and argument in the widget settings.',
         "🗂️ 该组件使用设备 `CFG` 分组下的单个 `FS` 对象——无需手动绑定变量。\n\n**📊 占用**\n- `Total`、`Used`、`Free`\n\n**📄 文件**\n- `List` —— 路径和大小；「删除」在确认后发送带 `Op: Delete` 和 `Name` 的 `SET FS`\n\n**⬆️ 上传**\n- `SET FS`，`Op`：`UploadStart` → `UploadChunk` → `UploadDone`，进度 —— `Upload.Progress`\n- 文件名不超过 31 个字符（固件限制）\n\n🔄 「刷新」发送 `GET FS`。\n\n⚙️ 如果固件使用其他名称，请在组件设置中修改前缀（ID）、字段和参数。",
     ],
+    "component.info.WidgetStackInfo": [
+        "🧠 Виджет работает с одним объектом `StackInfo` из ответа устройства — привязка переменных вручную не нужна.\n\n**📊 Память**\n- `Heap[]` — `Total`, `Free`, `MinFree` по каждой куче (ESP: Internal и Default, STM: Heap)\n\n**🧵 Задачи**\n- `Tasks[]` — `Name`, `FreeMin` (минимальный запас стека, байт), `Prio`, `State`, `Core` (только ESP)\n- малый запас стека подсвечивается\n\n🔄 «Обновить» и автоопрос отправляют `GET StackInfo`.\n\n⚙️ Если у прошивки другие имена, поменяйте поле и аргумент в настройках виджета.",
+        '🧠 The widget works with a single `StackInfo` object from the device response — no manual variable binding needed.\n\n**📊 Memory**\n- `Heap[]` — `Total`, `Free`, `MinFree` per heap (ESP: Internal and Default, STM: Heap)\n\n**🧵 Tasks**\n- `Tasks[]` — `Name`, `FreeMin` (minimum stack headroom, bytes), `Prio`, `State`, `Core` (ESP only)\n- low stack headroom is highlighted\n\n🔄 "Refresh" and auto-polling send `GET StackInfo`.\n\n⚙️ If the firmware uses different names, change the field and argument in the widget settings.',
+        "🧠 该组件使用设备响应中的单个 `StackInfo` 对象——无需手动绑定变量。\n\n**📊 内存**\n- `Heap[]` —— 每个堆的 `Total`、`Free`、`MinFree`（ESP：Internal 和 Default，STM：Heap）\n\n**🧵 任务**\n- `Tasks[]` —— `Name`、`FreeMin`（最小栈余量，字节）、`Prio`、`State`、`Core`（仅 ESP）\n- 栈余量不足时高亮显示\n\n🔄 「刷新」和自动轮询发送 `GET StackInfo`。\n\n⚙️ 如果固件使用其他名称，请在组件设置中修改字段和参数。",
+    ],
     "component.info.Tabs": [
         "📑 Ширина и позиция иконки задаются через служебные CSS-классы каждой вкладки, а не отдельными полями.\n\n**↔️ Ширина кнопок** (переключатель «Авто/Равные»)\n- `w-auto` — по содержимому\n- `flex-1` — поровну между всеми вкладками\n\n**🔤 Позиция иконки**\n- `flex-row` / `flex-col` / `flex-row-reverse` / `flex-col-reverse`\n\n⚠️ Максимум 10 вкладок.",
         '📑 Tab width and icon position are set via each tab\'s internal CSS classes, not separate fields.\n\n**↔️ Button width** ("Auto/Equal" toggle)\n- `w-auto` — sized to content\n- `flex-1` — equal share among all tabs\n\n**🔤 Icon position**\n- `flex-row` / `flex-col` / `flex-row-reverse` / `flex-col-reverse`\n\n⚠️ Maximum 10 tabs.',

package/dist/types.d.ts

@@ -15,10 +15,10 @@ export declare const updateComponent: (component: UIComponent, updates: Partial<
 }>) => {
     access: "full" | "viewOnly" | "hidden" | undefined;
     name: string | undefined;
-    properties: IAccordionProps | IButtonProps | IColorPickerProps | IDividerProps | IFileAttachProps | IGraphProps | IInputProps | IJoystickProps | IMapProps | IPeriodChartProps | IProgressBarProps | ISelectProps<unknown> | ISliderProps | ISwitchProps | ITableProps<object> | ITabsProps | ITextFieldProps | IWidgetProps | IWidgetWiFiProps | IWidgetDeviceInfoProps | IWidgetFileSystemProps;
+    properties: IAccordionProps | IButtonProps | IColorPickerProps | IDividerProps | IFileAttachProps | IGraphProps | IInputProps | IJoystickProps | IMapProps | IPeriodChartProps | IProgressBarProps | ISelectProps<unknown> | ISliderProps | ISwitchProps | ITableProps<object> | ITabsProps | ITextFieldProps | IWidgetProps | IWidgetWiFiProps | IWidgetDeviceInfoProps | IWidgetFileSystemProps | IWidgetStackInfoProps;
     eventHandler: IUIComponentHandler | undefined;
     id: string;
-    type: "Accordion" | "Button" | "ColorPicker" | "Divider" | "FileAttach" | "Graph" | "Input" | "Joystick" | "Map" | "PeriodChart" | "ProgressBar" | "Select" | "Slider" | "Switch" | "Table" | "Tabs" | "TextField" | "VideoViewer" | "Widget" | "WidgetWiFi" | "WidgetDeviceInfo" | "WidgetFileSystem";
+    type: "Accordion" | "Button" | "ColorPicker" | "Divider" | "FileAttach" | "Graph" | "Input" | "Joystick" | "Map" | "PeriodChart" | "ProgressBar" | "Select" | "Slider" | "Switch" | "Table" | "Tabs" | "TextField" | "VideoViewer" | "Widget" | "WidgetWiFi" | "WidgetDeviceInfo" | "WidgetFileSystem" | "WidgetStackInfo";
     position: Required<Position>;
     parentId: string;
 };
@@ -26,8 +26,8 @@ export interface UIComponent {
     id: string;
     name?: string;
     access?: "full" | "viewOnly" | "hidden";
-    type: "Accordion" | "Button" | "ColorPicker" | "Divider" | "FileAttach" | "Graph" | "Input" | "Joystick" | "Map" | "PeriodChart" | "ProgressBar" | "Select" | "Slider" | "Switch" | "Table" | "Tabs" | "TextField" | "VideoViewer" | "Widget" | "WidgetWiFi" | "WidgetDeviceInfo" | "WidgetFileSystem";
-    properties: IAccordionProps | IButtonProps | IColorPickerProps | IDividerProps | IFileAttachProps | IGraphProps | IInputProps | IJoystickProps | IMapProps | IPeriodChartProps | IProgressBarProps | ISelectProps | ISliderProps | ISwitchProps | ITableProps<object> | ITabsProps | ITextFieldProps | IWidgetProps | IWidgetWiFiProps | IWidgetDeviceInfoProps | IWidgetFileSystemProps;
+    type: "Accordion" | "Button" | "ColorPicker" | "Divider" | "FileAttach" | "Graph" | "Input" | "Joystick" | "Map" | "PeriodChart" | "ProgressBar" | "Select" | "Slider" | "Switch" | "Table" | "Tabs" | "TextField" | "VideoViewer" | "Widget" | "WidgetWiFi" | "WidgetDeviceInfo" | "WidgetFileSystem" | "WidgetStackInfo";
+    properties: IAccordionProps | IButtonProps | IColorPickerProps | IDividerProps | IFileAttachProps | IGraphProps | IInputProps | IJoystickProps | IMapProps | IPeriodChartProps | IProgressBarProps | ISelectProps | ISliderProps | ISwitchProps | ITableProps<object> | ITabsProps | ITextFieldProps | IWidgetProps | IWidgetWiFiProps | IWidgetDeviceInfoProps | IWidgetFileSystemProps | IWidgetStackInfoProps;
     position: Required<Position>;
     parentId: string;
     eventHandler?: IUIComponentHandler;
@@ -596,3 +596,38 @@ export interface IWidgetFileSystemProps {
     onDelete?: (name: string) => void;
     onUpload?: (file: File) => void | Promise<void>;
 }
+export interface IWidgetStackInfoHeap {
+    Name: string;
+    Total: number;
+    Free: number;
+    MinFree: number;
+}
+export interface IWidgetStackInfoTask {
+    Name: string;
+    FreeMin: number;
+    Prio: number;
+    Core?: number;
+    State: number;
+}
+export interface IWidgetStackInfo {
+    Heap: IWidgetStackInfoHeap[];
+    Tasks: IWidgetStackInfoTask[];
+}
+export interface IWidgetStackInfoProps {
+    id?: string;
+    wrapperClass?: string;
+    componentClass?: string;
+    label?: {
+        name?: string;
+    };
+    value?: IWidgetStackInfo;
+    keys?: {
+        StackInfo?: string;
+    };
+    argument?: string;
+    warnBytes?: number;
+    period?: number;
+    collapsed?: boolean;
+    persistKey?: string;
+    onRefresh?: () => void;
+}

package/dist/widgetAccent.js

@@ -8,7 +8,8 @@
 export const widgetAccentStyle = (componentClass) => {
     /* --bg-color = акцент: кнопки виджета с маркером "bg-accent" (класса в теме нет — только роль "залитая")
        заливаются им по наследованию, поэтому "Сохранить"/"Удалить" перекрашиваются вместе со всем виджетом */
-    const fill = "--bg-color: var(--accent-color);";
+    /* --table-header-color — шапка таблиц внутри виджета (Table) в мягком оттенке мастер-цвета */
+    const fill = "--bg-color: var(--accent-color); --table-header-color: var(--accent-soft);";
     const role = componentClass.match(/(?:^|\s)bg-(\w+)/)?.[1];
     if (!role || role === "max")
         return fill;

package/package.json

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