poe-svelte-ui-lib 1.31.7 → 1.32.0

package/dist/WidgetFileSystem/README.md

@@ -0,0 +1,84 @@
+# WidgetFileSystem Component
+
+## Описание
+
+Смарт-виджет файловой системы устройства: занятость памяти, список файлов с удалением и закачка
+нового файла с прогрессом. Работает с объектом `FSInfo` группы `CFG` ровно в том виде, в каком
+его отдаёт прошивка (`FS_WriteFullInfo`, ProdFactory-ESP), и с прогрессом закачки `UlProg`.
+Компонент ничего не знает про DeviceStore/WebSocket — только `value`/`uploadProgress` и колбэки
+`onRefresh`/`onDelete`/`onUpload`, вся отправка (в том числе протокол закачки `FUpS` → `FUpP` →
+`FUpD`) на стороне вызывающего кода.
+
+Заменяет собой блок из отдельных компонентов (поля «Всего/Использовано/Свободно», кнопка
+`GET FSInfo`, таблица `FSList` с кнопкой `DelFile`, `FileAttach`, `ProgressBar` по `UlProg`) —
+одной карточкой в стиле `WidgetWiFi`/`WidgetDeviceInfo`.
+
+- **Занятость** — «занято X из Y», процент и полоса; от 75% полоса оранжевая, от 90% — красная.
+  Размеры показываются в Б/КБ/МБ.
+- **Файлы** — таблица «Путь / Размер / Удалить»; длинный путь обрезается «…», удаление
+  подтверждается внутри карточки. Пустая ФС — «Файлов нет». Колонка удаления есть, только
+  если передан `onDelete`.
+- **Закачка** — блок есть, только если передан `onUpload`. Имя файла проверяется до отправки
+  (`maxNameLength`, по умолчанию 31 — ограничение прошивки), пока `onUpload` не завершится,
+  показывается прогресс из `uploadProgress`; ошибка из `onUpload` выводится под полем.
+
+## Пропсы
+
+| Название         | Тип                                      | По умолчанию                   | Описание                                                                                                                |
+| ---------------- | ---------------------------------------- | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------- |
+| `id`             | `string`                                 | `undefined`                    | Префикс прошивочной группы (обычно `"CFG"`), используется вызывающим кодом для чтения `FSInfo`/`UlProg`                 |
+| `wrapperClass`   | `string`                                 | `""`                           | CSS-классы обёртки                                                                                                      |
+| `componentClass` | `string`                                 | `""`                           | «Мастер-цвет» виджета — роль вида `"bg-red"` (см. `optionsStore.COLOR_OPTIONS`)                                         |
+| `label`          | `{ name?: string }`                      | `{ name: "Файловая система" }` | Заголовок карточки                                                                                                      |
+| `value`          | `IWidgetFileSystemInfo`                  | `undefined`                    | Состояние файловой системы (`CFG.FSInfo`)                                                                               |
+| `uploadProgress` | `number`                                 | `0`                            | Прогресс текущей закачки, % (`CFG.UlProg`)                                                                              |
+| `keys`           | `{ FSInfo?: string; UlProg?: string }`   | `undefined`                    | Переопределение имён полей устройства, по умолчанию `FSInfo` и `UlProg`                                                 |
+| `accept`         | `string`                                 | `"*/*"`                        | Какие файлы можно выбрать (атрибут `accept`), например `".bin, .txt, .pem"`                                             |
+| `maxNameLength`  | `number`                                 | `31`                           | Максимальная длина имени файла                                                                                          |
+| `infoCommand`    | `{ header?: string; argument?: string }` | `undefined`                    | Команда обновления, по умолчанию `GET FSInfo` (используется вызывающим кодом)                                           |
+| `deleteCommand`  | `{ header?: string; argument?: string }` | `undefined`                    | Команда удаления, по умолчанию `SET DelFile` (используется вызывающим кодом)                                            |
+| `collapsed`      | `boolean`                                | `false`                        | Свёрнуто ли тело виджета (`$bindable`)                                                                                  |
+| `persistKey`     | `string`                                 | `undefined`                    | Ключ для сохранения `collapsed` в `localStorage`                                                                        |
+| `onRefresh`      | `() => void`                             | `undefined`                    | Кнопка «Обновить» в шапке; без обработчика кнопка неактивна                                                             |
+| `onDelete`       | `(name: string) => void`                 | `undefined`                    | Удаление файла после подтверждения; `name` — полный путь из `FSList`                                                    |
+| `onUpload`       | `(file: File) => void \| Promise<void>`  | `undefined`                    | Закачка выбранного файла; пока промис не завершён — показывается прогресс, исключение показывается как ошибка под полем |
+
+### IWidgetFileSystemInfo
+
+| Поле        | Тип                                | Описание                                                          |
+| ----------- | ---------------------------------- | ----------------------------------------------------------------- |
+| `FSTotal`   | `number`                           | Размер файловой системы, байт                                     |
+| `FSUsed`    | `number`                           | Занято, байт                                                      |
+| `FSFree`    | `number`                           | Свободно, байт                                                    |
+| `FileCount` | `number`                           | Количество файлов (если нет — длина `FSList`)                     |
+| `FSList`    | `{ Name: string; Size: number }[]` | Файлы: полный путь (его же принимает `DelFile`) и размер в байтах |
+
+## Примеры
+
+```svelte
+<script>
+  import * as UI from "poe-svelte-ui-lib"
+
+  let fsInfo = { FSTotal: 1441792, FSUsed: 98304, FSFree: 1343488, FileCount: 1, FSList: [{ Name: "/littlefs/cert.pem", Size: 1834 }] }
+  let progress = 0
+</script>
+
+<UI.WidgetFileSystem
+  value={fsInfo}
+  uploadProgress={progress}
+  accept=".bin, .txt, .pem"
+  onRefresh={() => console.log("GET FSInfo")}
+  onDelete={(name) => console.log("SET DelFile", { Name: name })}
+  onUpload={async (file) => console.log("FUpS/FUpP/FUpD", file.name)}
+/>
+```
+
+## Конструктор свойств (WidgetFileSystemProps.svelte)
+
+| Название           | Тип                                                                                             | Описание                                  |
+| ------------------ | ----------------------------------------------------------------------------------------------- | ----------------------------------------- |
+| `component`        | `UIComponent & { properties: Partial<IWidgetFileSystemProps> }`                                 | Объект компонента с его свойствами        |
+| `onPropertyChange` | `(updates: Partial<{ properties?: string \| object; name?: string; access?: string }>) => void` | Коллбэк для обновления свойств компонента |
+
+Группы панели: общие (заголовок, префикс группы, мастер-цвет), закачка (`accept`,
+`maxNameLength`), ключи устройства (`FSInfo`, `UlProg`), команды обновления и удаления.

package/dist/WidgetFileSystem/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/WidgetFileSystem/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/WidgetFileSystem/StorageIcon.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="M22 12H2m20 0v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-6m20 0-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11L2 12m4 4h.01M10 16h.01"
+  /></svg
+>

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

package/dist/WidgetFileSystem/WidgetFileSystem.svelte

@@ -0,0 +1,188 @@
+<!-- $lib/WidgetFileSystem/WidgetFileSystem.svelte — смарт-виджет файловой системы устройства.
+     Данные — объект CFG.FSInfo в том виде, в каком его отдаёт прошивка (FS_WriteFullInfo, ProdFactory-ESP):
+     FSTotal/FSUsed/FSFree/FileCount/FSList[{Name, Size}]; прогресс закачки — CFG.UlProg.
+     Ничего не знает про DeviceStore/WebSocket — value/uploadProgress/onRefresh/onDelete/onUpload,
+     протокол закачки (FUpS/FUpP/FUpD) и отправка команд на стороне вызывающего. -->
+<script lang="ts">
+  import { slide, fade, scale } from "svelte/transition"
+  import { twMerge } from "tailwind-merge"
+  import * as UI from ".."
+  import type { IWidgetFileSystemFile, IWidgetFileSystemProps, ITableHeader } from "../types"
+  import StorageIcon from "./StorageIcon.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,
+    uploadProgress = 0,
+    accept = "*/*",
+    maxNameLength = 31,
+    collapsed = $bindable(false),
+    persistKey,
+    onRefresh,
+    onDelete,
+    onUpload,
+  }: IWidgetFileSystemProps = $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))
+
+  /* Размер в человекочитаемом виде: Б / КБ / МБ, одна цифра после запятой начиная с КБ */
+  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)} МБ`
+  }
+
+  let total = $derived(value?.FSTotal ?? 0)
+  let used = $derived(value?.FSUsed ?? 0)
+  let free = $derived(value?.FSFree ?? Math.max(total - used, 0))
+  let files = $derived(value?.FSList ?? [])
+  let usedPercent = $derived(total > 0 ? Math.min(100, Math.round((used / total) * 100)) : 0)
+  /* Почти заполненная ФС подсвечивается: закачка новых файлов скоро начнёт падать */
+  let usageColor = $derived(usedPercent >= 90 ? "var(--red-color)" : usedPercent >= 75 ? "var(--orange-color)" : "var(--accent-color)")
+
+  /* Таблица файлов: путь обрезается «…», размер — уже отформатирован, удаление — с подтверждением */
+  type FileRow = IWidgetFileSystemFile & { SizeText: string }
+  let rows: FileRow[] = $derived(files.map((f) => ({ ...f, SizeText: formatBytes(f.Size) })))
+  let header: ITableHeader<FileRow>[] = $derived([
+    { label: { name: "Путь" }, content: [{ type: "text", data: { key: "Name", truncated: true, sortable: true } }], width: "1fr", align: "left" },
+    { label: { name: "Размер" }, content: [{ type: "text", data: { key: "SizeText" } }], width: "6rem", align: "right" },
+    ...(onDelete
+      ? [
+          {
+            label: { name: "" },
+            content: [{ type: "button", data: { name: "Удалить", class: "bg-red", onClick: (row: FileRow) => (pendingDelete = row.Name) } }],
+            width: "6.5rem",
+            align: "center",
+          } as ITableHeader<FileRow>,
+        ]
+      : []),
+  ])
+
+  let pendingDelete: string | null = $state(null)
+  const confirmDelete = () => {
+    if (pendingDelete) onDelete?.(pendingDelete)
+    pendingDelete = null
+  }
+
+  /* Закачка: имя проверяется до отправки (прошивка отвергнет длинное имя уже после FUpS), прогресс —
+     из uploadProgress, пока onUpload не завершится */
+  let uploading = $state(false)
+  let uploadError = $state("")
+  const handleFile = async (_event: Event, file: File | null) => {
+    uploadError = ""
+    if (!file || !onUpload || uploading) return
+    if (file.name.length > maxNameLength) {
+      uploadError = `Имя файла длиннее ${maxNameLength} символов`
+      return
+    }
+    uploading = true
+    try {
+      await onUpload(file)
+    } catch (error) {
+      uploadError = `Закачка прервана: ${error instanceof Error ? error.message : error}`
+    } finally {
+      uploading = false
+    }
+  }
+</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={StorageIcon} label={label?.name ?? "Файловая система"} bind:collapsed>
+    {#snippet right()}
+      <UI.Button
+        wrapperClass="w-auto"
+        componentClass="bg-transparent px-3"
+        content={{ icon: RefreshIcon, name: "Обновить" }}
+        disabled={!onRefresh}
+        onClick={() => onRefresh?.()}
+      />
+    {/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">
+        <div class="flex items-baseline justify-between gap-2 text-[13px]">
+          <span class="font-semibold">Занято {formatBytes(used)} из {formatBytes(total)}</span>
+          <span class="font-semibold tabular-nums" style="color: {usageColor}">{usedPercent}%</span>
+        </div>
+        <div class="h-2 w-full overflow-hidden rounded-full bg-(--container-color)">
+          <div class="h-full rounded-full transition-[width] duration-300" style="width: {usedPercent}%; background: {usageColor}"></div>
+        </div>
+        <div class="flex justify-between gap-2 text-[12px] text-(--muted-color)">
+          <span>Свободно {formatBytes(free)}</span>
+          <span>Файлов: {value?.FileCount ?? files.length}</span>
+        </div>
+      </div>
+
+      <!-- Файлы -->
+      <div class="flex max-h-72 min-h-0 flex-col">
+        {#if rows.length}
+          <UI.Table {header} body={rows} outline />
+        {:else}
+          <div class="rounded-[10px] border border-(--hairline-color) bg-(--back-color) p-3 text-center text-[13px] text-(--faint-color)">Файлов нет</div>
+        {/if}
+      </div>
+
+      <!-- Закачка -->
+      {#if onUpload}
+        <div class="flex flex-col gap-2 rounded-[10px] border border-(--hairline-color) bg-(--back-color) p-3">
+          <UI.FileAttach label={{ name: "Закачать файл" }} {accept} disabled={uploading} onChange={handleFile} />
+          {#if uploading}
+            <div class="flex items-center gap-2 text-[12px]" transition:slide={{ duration: 100 }}>
+              <div class="h-2 flex-1 overflow-hidden rounded-full bg-(--container-color)">
+                <div
+                  class="h-full rounded-full bg-(--accent-color) transition-[width] duration-300"
+                  style="width: {Math.min(100, Math.max(0, uploadProgress))}%"
+                ></div>
+              </div>
+              <span class="w-10 text-right tabular-nums">{Math.round(uploadProgress)}%</span>
+            </div>
+          {/if}
+          {#if uploadError}
+            <span class="text-[12px] text-(--red-color)" transition:slide={{ duration: 100 }}>{uploadError}</span>
+          {/if}
+        </div>
+      {/if}
+    </div>
+  {/if}
+
+  {#if pendingDelete}
+    <!-- Подтверждение локально к виджету, как предупреждение AP у WidgetWiFi -->
+    <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 }}
+      >
+        <h4 class="text-[15px] font-semibold">Удалить файл?</h4>
+        <p class="text-[13px] break-all text-(--muted-color)">{pendingDelete}</p>
+        <div class="flex gap-2">
+          <UI.Button wrapperClass="flex-1" componentClass="bg-transparent" content={{ name: "Отмена" }} onClick={() => (pendingDelete = null)} />
+          <UI.Button wrapperClass="flex-1" componentClass="bg-red" content={{ name: "Удалить" }} onClick={confirmDelete} />
+        </div>
+      </div>
+    </div>
+  {/if}
+</div>

package/dist/WidgetFileSystem/WidgetFileSystem.svelte.d.ts

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

package/dist/WidgetFileSystem/WidgetFileSystemProps.svelte

@@ -0,0 +1,83 @@
+<!-- $lib/WidgetFileSystem/WidgetFileSystemProps.svelte — панель пропсов конструктора для
+     WidgetFileSystem: заголовок/мастер-цвет/префикс группы, имена полей устройства (keys),
+     фильтр закачки и команды обновления/удаления — все с дефолтами, равными прошивочной
+     конвенции (см. DEFAULT_PROPS.WidgetFileSystem в DevCloud). -->
+<script lang="ts">
+  import { T } from "../locales/i18n"
+  import * as UI from ".."
+  import { updateProperty, type UIComponent, type IWidgetFileSystemProps, type IOption } from "../types"
+  import WidgetAccentPicker from "../WidgetAccentPicker.svelte"
+  import PropsGroup from "../PropsGroup.svelte"
+  import { optionsStore } from "../options"
+
+  const FS_KEYS = ["FSInfo", "UlProg"] as const
+
+  const { component, onPropertyChange } = $props<{
+    component: UIComponent & { properties: Partial<IWidgetFileSystemProps> }
+    onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string }>) => void
+  }>()
+</script>
+
+{#snippet Command(key: "infoCommand" | "deleteCommand", header: string, argument: string)}
+  <UI.Select
+    label={{ name: "Заголовок пакета" }}
+    type="buttons"
+    options={$optionsStore.HEADER_OPTIONS}
+    value={$optionsStore.HEADER_OPTIONS.find((o) => o.value === (component.properties[key]?.header || header))}
+    onUpdate={(option) => updateProperty(`${key}.header`, (option as IOption<string>).value as string, component, onPropertyChange)}
+  />
+  <UI.Input
+    label={{ name: "Аргумент" }}
+    value={component.properties[key]?.argument ?? argument}
+    onUpdate={(value) => updateProperty(`${key}.argument`, value as string, component, onPropertyChange)}
+  />
+{/snippet}
+
+<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)}
+    />
+    <UI.Input
+      label={{ name: "Префикс группы (ID)" }}
+      value={component.properties.id}
+      onUpdate={(value) => updateProperty("id", value as string, component, onPropertyChange)}
+    />
+    <WidgetAccentPicker
+      value={component.properties.componentClass ?? ""}
+      onUpdate={(value) => updateProperty("componentClass", value, component, onPropertyChange)}
+    />
+  </PropsGroup>
+  <PropsGroup label="Закачка файлов">
+    <UI.Input
+      label={{ name: "Допустимые файлы (accept)" }}
+      value={component.properties.accept ?? "*/*"}
+      placeholder=".bin, .txt, .pem"
+      onUpdate={(value) => updateProperty("accept", value as string, component, onPropertyChange)}
+    />
+    <UI.Input
+      label={{ name: "Максимальная длина имени" }}
+      type="number"
+      number={{ minNum: 1, maxNum: 255, step: 1 }}
+      value={component.properties.maxNameLength ?? 31}
+      onUpdate={(value) => updateProperty("maxNameLength", Number(value), component, onPropertyChange)}
+    />
+  </PropsGroup>
+  <PropsGroup label="Ключи устройства">
+    {#each FS_KEYS as key (key)}
+      <UI.Input
+        label={{ name: key }}
+        value={component.properties.keys?.[key] ?? key}
+        onUpdate={(value) => updateProperty(`keys.${key}`, value as string, component, onPropertyChange)}
+      />
+    {/each}
+  </PropsGroup>
+  <PropsGroup label="Команда обновления">
+    {@render Command("infoCommand", "GET", "FSInfo")}
+  </PropsGroup>
+  <PropsGroup label="Команда удаления">
+    {@render Command("deleteCommand", "SET", "DelFile")}
+  </PropsGroup>
+</div>

package/dist/WidgetFileSystem/WidgetFileSystemProps.svelte.d.ts

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

package/dist/index.d.ts

@@ -43,7 +43,9 @@ 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 { default as WidgetFileSystem } from "./WidgetFileSystem/WidgetFileSystem.svelte";
+export { default as WidgetFileSystemProps } from "./WidgetFileSystem/WidgetFileSystemProps.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 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 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

@@ -44,6 +44,8 @@ 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 { default as WidgetFileSystem } from "./WidgetFileSystem/WidgetFileSystem.svelte";
+export { default as WidgetFileSystemProps } from "./WidgetFileSystem/WidgetFileSystemProps.svelte";
 export * from "./locales/i18n";
 export * from "./locales/translations";
 export * from "./ModalStackStore";

package/dist/locales/translations.js

@@ -23,6 +23,11 @@ const translations = {
         'ℹ️ The widget works with a fixed set of fields in the device\'s `CFG` group — no manual variable binding needed.\n\n**🔒 Read-only**\n- `DevSN`, `DevID`, `DevFW`, `RunCnt`\n- `StaIP`, `ApIP` — current IP addresses in STA/AP mode\n\n**✏️ Editable** (saved as one packet via the "Save" button)\n- `DevName`, `HostName`, `WebUser`, `WebPsw`\n\n🔌 The "Restart" button sends `Argument: Restart`.\n\n⚙️ If the device uses a different group name instead of `CFG`, change the prefix (ID) in the widget settings.',
         "ℹ️ 该组件使用设备 `CFG` 分组下的一组固定字段——无需手动绑定变量。\n\n**🔒 只读字段**\n- `DevSN`、`DevID`、`DevFW`、`RunCnt`\n- `StaIP`、`ApIP` —— STA/AP 模式下的当前 IP 地址\n\n**✏️ 可编辑字段**（通过「保存」按钮一次性发送）\n- `DevName`、`HostName`、`WebUser`、`WebPsw`\n\n🔌 「重启」按钮会发送 `Argument: Restart`。\n\n⚙️ 如果设备使用的分组名称不是 `CFG`，请在组件设置中修改前缀（ID）。",
     ],
+    "component.info.WidgetFileSystem": [
+        "🗂️ Виджет работает с объектом `FSInfo` группы `CFG` на устройстве — привязка переменных вручную не нужна.\n\n**📊 Занятость**\n- `FSTotal`, `FSUsed`, `FSFree`, `FileCount`\n\n**📄 Файлы**\n- `FSList` — путь и размер; «Удалить» отправляет `DelFile` с `Name` (после подтверждения)\n\n**⬆️ Закачка**\n- протокол `FUpS` → `FUpP` → `FUpD`, прогресс — `UlProg`\n- имя файла не длиннее 31 символа (ограничение прошивки)\n\n🔄 «Обновить» отправляет `GET FSInfo`.\n\n⚙️ Если у прошивки другие имена, поменяйте префикс (ID) и ключи в настройках виджета.",
+        "🗂️ The widget works with the `FSInfo` object of the device's `CFG` group — no manual variable binding needed.\n\n**📊 Usage**\n- `FSTotal`, `FSUsed`, `FSFree`, `FileCount`\n\n**📄 Files**\n- `FSList` — path and size; \"Delete\" sends `DelFile` with `Name` (after confirmation)\n\n**⬆️ Upload**\n- `FUpS` → `FUpP` → `FUpD` protocol, progress — `UlProg`\n- file name up to 31 characters (firmware limit)\n\n🔄 \"Refresh\" sends `GET FSInfo`.\n\n⚙️ If the firmware uses different names, change the prefix (ID) and keys in the widget settings.",
+        "🗂️ 该组件使用设备 `CFG` 分组下的 `FSInfo` 对象——无需手动绑定变量。\n\n**📊 占用**\n- `FSTotal`、`FSUsed`、`FSFree`、`FileCount`\n\n**📄 文件**\n- `FSList` —— 路径和大小；「删除」在确认后发送带 `Name` 的 `DelFile`\n\n**⬆️ 上传**\n- `FUpS` → `FUpP` → `FUpD` 协议，进度 —— `UlProg`\n- 文件名不超过 31 个字符（固件限制）\n\n🔄 「刷新」发送 `GET FSInfo`。\n\n⚙️ 如果固件使用其他名称，请在组件设置中修改前缀（ID）和键名。",
+    ],
     "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;
+    properties: IAccordionProps | IButtonProps | IColorPickerProps | IDividerProps | IFileAttachProps | IGraphProps | IInputProps | IJoystickProps | IMapProps | IPeriodChartProps | IProgressBarProps | ISelectProps<unknown> | ISliderProps | ISwitchProps | ITableProps<object> | ITabsProps | ITextFieldProps | IWidgetProps | IWidgetWiFiProps | IWidgetDeviceInfoProps | IWidgetFileSystemProps;
     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";
+    type: "Accordion" | "Button" | "ColorPicker" | "Divider" | "FileAttach" | "Graph" | "Input" | "Joystick" | "Map" | "PeriodChart" | "ProgressBar" | "Select" | "Slider" | "Switch" | "Table" | "Tabs" | "TextField" | "VideoViewer" | "Widget" | "WidgetWiFi" | "WidgetDeviceInfo" | "WidgetFileSystem";
     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";
-    properties: IAccordionProps | IButtonProps | IColorPickerProps | IDividerProps | IFileAttachProps | IGraphProps | IInputProps | IJoystickProps | IMapProps | IPeriodChartProps | IProgressBarProps | ISelectProps | ISliderProps | ISwitchProps | ITableProps<object> | ITabsProps | ITextFieldProps | IWidgetProps | IWidgetWiFiProps | IWidgetDeviceInfoProps;
+    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;
     position: Required<Position>;
     parentId: string;
     eventHandler?: IUIComponentHandler;
@@ -560,3 +560,43 @@ export interface IWidgetDeviceInfoProps {
     onSave?: (info: IWidgetDeviceInfoConfig) => void;
     onRestart?: () => void;
 }
+export interface IWidgetFileSystemFile {
+    Name: string;
+    Size: number;
+}
+export interface IWidgetFileSystemInfo {
+    FSTotal: number;
+    FSUsed: number;
+    FSFree: number;
+    FileCount?: number;
+    FSList: IWidgetFileSystemFile[];
+}
+export interface IWidgetFileSystemProps {
+    id?: string;
+    wrapperClass?: string;
+    componentClass?: string;
+    label?: {
+        name?: string;
+    };
+    value?: IWidgetFileSystemInfo;
+    uploadProgress?: number;
+    keys?: {
+        FSInfo?: string;
+        UlProg?: string;
+    };
+    accept?: string;
+    maxNameLength?: number;
+    infoCommand?: {
+        header?: string;
+        argument?: string;
+    };
+    deleteCommand?: {
+        header?: string;
+        argument?: string;
+    };
+    collapsed?: boolean;
+    persistKey?: string;
+    onRefresh?: () => void;
+    onDelete?: (name: string) => void;
+    onUpload?: (file: File) => void | Promise<void>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.31.7",
+  "version": "1.32.0",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -8,6 +8,7 @@
     "build": "vite build",
     "preview": "vite preview",
     "prepack": "svelte-kit sync && svelte-package && publint",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "CheckUpdate": "npx npm-check-updates -u && npm install",
     "UpdateIconsLib": "tsx src/lib/IconsCatalog/iconsLib.ts",
     "Formatting": "prettier --write ."
@@ -51,6 +52,7 @@
     "prettier-plugin-tailwindcss": "^0.8.0",
     "publint": "^0.3.21",
     "svelte": "^5.56.4",
+    "svelte-check": "^4.7.6",
     "tailwindcss": "^4.3.1",
     "tsx": "^4.22.4",
     "typescript": "^6.0.3",