poe-svelte-ui-lib 1.29.0 → 1.30.0

package/dist/FileAttach/FileAttach.svelte

@@ -17,10 +17,17 @@
   }: IFileAttachProps = $props()
 
   let ID = $derived(`${id}-${crypto.randomUUID().slice(0, 6)}`)
-  let selectedFile = $state<File | null>(null)
   let previewUrl = $derived(currentImage ? (currentImage.startsWith("data:") ? currentImage : `data:image/png;base64,${currentImage}`) : null)
   let fileName = $state("")
 
+  /* Blob-URL для мгновенного превью выбранного файла до того, как onChange/родитель
+     подтвердит загрузку и обновит currentImage. Предыдущий blob обязательно отзывается
+     перед созданием нового и при размонтировании — иначе течёт память при частой смене файла. */
+  let objectUrl: string | null = null
+  $effect(() => () => {
+    if (objectUrl) URL.revokeObjectURL(objectUrl)
+  })
+
   const handleFileChange = (event: Event) => {
     const input = event.target as HTMLInputElement
     if (!input.files || input.files.length === 0) {
@@ -29,10 +36,13 @@
     }
 
     const file = input.files[0]
-    selectedFile = file
     fileName = file.name
 
-    if (file.type.startsWith("image/")) previewUrl = URL.createObjectURL(file)
+    if (file.type.startsWith("image/")) {
+      if (objectUrl) URL.revokeObjectURL(objectUrl)
+      objectUrl = URL.createObjectURL(file)
+      previewUrl = objectUrl
+    }
 
     onChange(event, file)
   }
@@ -64,7 +74,7 @@
       >
         {#if previewUrl || currentImage}
           <img
-            src={previewUrl ?? (currentImage?.startsWith("data:") ? currentImage : `data:image/png;base64,${currentImage}`)}
+            src={previewUrl}
             alt="Preview"
             class={`
               h-full w-full

package/dist/FileAttach/README.md

@@ -97,15 +97,14 @@
 
 ### Реактивность
 
-- Переменная `selectedFile` хранит выбранный файл
-- Переменная `previewUrl` вычисляет URL для предварительного просмотра изображения
+- Переменная `previewUrl` вычисляет URL для предварительного просмотра изображения (из `currentImage` или из только что выбранного файла)
 - Переменная `fileName` хранит имя выбранного файла
 - Объект `ID` генерирует уникальный идентификатор для элемента ввода
 
 ### Сторы и зависимости
 
 - Используется стор `twMerge` для объединения Tailwind CSS классов
-- Используется `URL.createObjectURL` для создания URL предварительного просмотра изображения
+- Используется `URL.createObjectURL` для мгновенного превью выбранного файла — предыдущий blob-URL отзывается через `URL.revokeObjectURL` перед созданием нового и при размонтировании компонента
 
 ### Директивы
 

package/dist/ProgressBar/ProgressBarProps.svelte

@@ -93,8 +93,9 @@
                   wrapperClass="min-w-28 flex-1"
                   value={progress.name}
                   onUpdate={(value) => {
-                    const progresses = [...(component.properties?.items || [])]
-                    progresses[index]["name"] = value
+                    const progresses = (component.properties?.items || []).map((p: { name?: string; class?: string }, i: number) =>
+                      i === index ? { ...p, name: value } : p,
+                    )
                     updateProperty("items", progresses, component, onPropertyChange)
                   }}
                 />
@@ -106,8 +107,9 @@
                     options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== "bg-max")}
                     value={findColorOption($optionsStore.COLOR_OPTIONS, progress.class)}
                     onUpdate={(value) => {
-                      const progresses = [...(component.properties?.items || [])]
-                      progresses[index]["class"] = (value as UI.IOption).value
+                      const progresses = (component.properties?.items || []).map((p: { name?: string; class?: string }, i: number) =>
+                        i === index ? { ...p, class: (value as UI.IOption).value } : p,
+                      )
                       updateProperty("items", progresses, component, onPropertyChange)
                     }}
                   />
@@ -118,16 +120,13 @@
                     value={(component.properties.value || [])[index]?.Value}
                     type="number"
                     onUpdate={(value) => {
-                      const progresses = [
-                        ...(component.properties?.value ||
-                          component.properties?.items.map((item: { name?: string; class?: string }, i: number) => {
-                            return {
-                              Name: item.name,
-                              Value: i == index ? value : 0,
-                            }
-                          })),
-                      ]
-                      progresses[index].Value = value
+                      const base =
+                        component.properties?.value ||
+                        component.properties?.items.map((item: { name?: string; class?: string }, i: number) => ({
+                          Name: item.name,
+                          Value: i == index ? value : 0,
+                        }))
+                      const progresses = base.map((p: { Name?: string; Value?: number }, i: number) => (i === index ? { ...p, Value: value } : p))
                       updateProperty("value", progresses, component, onPropertyChange)
                     }}
                   />

package/dist/ProgressBar/README.md

@@ -36,7 +36,7 @@
 <script>
   import * as UI from "poe-svelte-ui-lib"
 
-  let progressBarValue = 40
+  let progressBarValue = [{ Value: 40 }]
 </script>
 
 <UI.ProgressBar value={progressBarValue} wrapperClass="bg-red" />
@@ -48,7 +48,7 @@
 <script>
   import * as UI from "poe-svelte-ui-lib"
 
-  let progressBarValue = 65
+  let progressBarValue = [{ Value: 65 }]
 </script>
 
 <UI.ProgressBar value={progressBarValue} type="vertical" wrapperClass="bg-red h-50" />

package/dist/Switch/README.md

@@ -18,7 +18,7 @@
 | `label.captionLeft`  | `string`                                   | `""`                  | Левая подпись для горизонтального типа (кликабельна, устанавливает значение 0 без `bitMode`)                                                                                           |
 | `label.captionRight` | `string`                                   | `""`                  | Правая подпись для горизонтального типа (кликабельна, устанавливает значение 1 без `bitMode`)                                                                                          |
 | `hiddenInfo`         | `string`                                   | `""`                  | Текст всплывающей подсказки для режима `checkbox`: отображается при наведении на чекбокс                                                                                               |
-| `options`            | `IOption<number>[]`                        | `[]`                  | Массив опций для переключателя                                                                                                                                                         |
+| `options`            | `IOption<number>[]`                        | `[]`                  | Массив опций для переключателя; для `type="checkbox"` можно не передавать (используется как простой булев тумблер)                                                                     |
 | `bitMode`            | `boolean`                                  | `false`               | Режим битовых флагов: при `true` значение интерпретируется как битовая маска, каждая опция управляет отдельным битом через побитовые операции; при `false` — простой переключатель 0/1 |
 | `type`               | `"horizontal" \| "vertical" \| "checkbox"` | `"horizontal"`        | Тип отображения: `horizontal` — горизонтальный слайдер, `vertical` — вертикальный слайдер, `checkbox` — стандартный чекбокс с галочкой и поддержкой `hiddenInfo`                       |
 | `value`              | `number`                                   | `undefined`           | Текущее значение переключателя: в обычном режиме — 0 или 1, в `bitMode` — битовая маска; поддерживает двустороннее связывание (`$bindable`)                                            |

package/dist/Switch/Switch.svelte

@@ -39,13 +39,13 @@
   })
 
   const handleToggle = (index: number) => {
-    if (localOptions[index].disabled) return
-    value = ((value ?? 0) ^ (1 << (bitMode ? (localOptions[index].value ?? 0) : 0))) >>> 0
+    if (localOptions[index]?.disabled) return
+    value = ((value ?? 0) ^ (1 << (bitMode ? (localOptions[index]?.value ?? 0) : 0))) >>> 0
     onChange(value)
   }
 
   const handleCaptionClick = (newValue: number) => {
-    if (localOptions[0].disabled || value === newValue) return
+    if (localOptions[0]?.disabled || value === newValue) return
     value = newValue
     onChange(newValue)
   }
@@ -134,14 +134,14 @@
     class={twMerge(
       "relative flex items-center justify-center gap-2",
       wrapperClass,
-      options[0].class?.split(" ").find((cl) => cl.startsWith("bg-")),
+      options[0]?.class?.split(" ").find((cl) => cl.startsWith("bg-")),
     )}
   >
     <input
       id={ID}
       type="checkbox"
       checked={checkedOptions[0]}
-      disabled={localOptions[0].disabled ?? false}
+      disabled={localOptions[0]?.disabled ?? false}
       class="
         relative size-5 shrink-0 cursor-pointer appearance-none rounded-[6px] border border-(--border-color)
         bg-(--field-color) transition-colors duration-150 after:origin-center after:opacity-0
@@ -164,7 +164,7 @@
     />
     <Tooltip show={showInfo} text={hiddenInfo} side="top" />
     {#if label.name}
-      <label for={ID} class={twMerge(`text-[13px] select-none ${options[0].disabled ? "text-(--faint-color)" : "cursor-pointer"}`, label.class)}>
+      <label for={ID} class={twMerge(`text-[13px] select-none ${options[0]?.disabled ? "text-(--faint-color)" : "cursor-pointer"}`, label.class)}>
         {label.name}
       </label>
     {/if}

package/dist/Switch/SwitchProps.svelte

@@ -21,7 +21,7 @@
   }>()
   const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>("DeviceVariables")
   let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
-  let initialColor = $derived(findColorOption($optionsStore.COLOR_OPTIONS, component.properties.options[0].class))
+  let initialColor = $derived(findColorOption($optionsStore.COLOR_OPTIONS, component.properties.options?.[0]?.class))
   const initialAlign = $derived(
     $optionsStore.TEXT_ALIGN_OPTIONS.find((a) =>
       (a.value as string).includes(component.properties.label?.class?.split(" ").find((cls: string) => cls.startsWith("text-"))),
@@ -156,15 +156,17 @@
                 }}
               />
             </div>
-            <UI.Button
-              wrapperClass="w-8 shrink-0"
-              content={{ icon: ButtonDelete }}
-              onClick={() => {
-                const options = [...(component.properties?.options || [])]
-                options.splice(index, 1)
-                updateProperty("options", options, component, onPropertyChange)
-              }}
-            />
+            {#if (component.properties.options?.length ?? 0) > 1}
+              <UI.Button
+                wrapperClass="w-8 shrink-0"
+                content={{ icon: ButtonDelete }}
+                onClick={() => {
+                  const options = [...(component.properties?.options || [])]
+                  options.splice(index, 1)
+                  updateProperty("options", options, component, onPropertyChange)
+                }}
+              />
+            {/if}
           </div>
         {/each}
       </PropsGroup>

package/dist/Table/README.md

@@ -127,51 +127,31 @@
   }
 
   const columns = [
-    { label: { name: "ID" }, key: "id", width: "5%", sortable: true, align: "center" },
+    { label: { name: "ID" }, width: "5%", align: "center", content: [{ type: "text", data: { key: "id", sortable: true } }] },
     {
       label: { name: "Image" },
-      key: "imageUrl",
       width: "20%",
-      image: {
-        src: (row: ITableRow) => row.imageUrl,
-        alt: "Image",
-        width: "5rem",
-        height: "5rem",
-      },
+      content: [{ type: "image", data: { src: (row: ITableRow) => row.imageUrl, alt: "Image", width: "5rem", height: "5rem" } }],
     },
-    { label: { name: "Name" }, key: "name", width: "12%", sortable: true },
+    { label: { name: "Name" }, width: "12%", content: [{ type: "text", data: { key: "name", sortable: true } }] },
     {
       label: { name: "Status" },
-      key: "status",
       width: "10%",
-      overflow: {
-        truncated: true,
-        formatting: (text) => {
-          if (text === "online") {
-            return "1"
-          } else return "2"
-        },
-      },
+      content: [{ type: "text", data: { key: "status", truncated: true, formatting: (text) => (text === "online" ? "🟢" : "⚪") } }],
     },
     {
       label: { name: "Last Active" },
-      key: "lastActive",
       width: "auto",
-      sortable: true,
-      overflow: { truncated: true, copy: true, modal: true },
+      content: [{ type: "text", data: { key: "lastActive", sortable: true, truncated: true, copy: true, modal: true } }],
     },
     {
       label: { name: "Actions" },
-      key: "action",
       width: "15%",
       align: "center",
-      action: {
-        type: "buttons",
-        buttons: [
-          { name: "Action 1 (id)", class: "bg-blue", eventHandler: { Header: "SET", Argument: "save", Variables: ["name"] } },
-          { name: "Action 2 (name)", class: "bg-green", onClick: (row) => console.log(row.name) },
-        ],
-      },
+      content: [
+        { type: "button", data: { name: "Action 1", class: "bg-blue", eventHandler: { Header: "SET", Argument: "save", Variables: ["name"] } } },
+        { type: "button", data: { name: "Action 2", class: "bg-green", onClick: (row) => console.log(row.name) } },
+      ],
     },
   ]
 

package/dist/Table/Table.svelte

@@ -30,6 +30,8 @@
   let isAutoscroll = $state(true)
   let container: HTMLElement | null = $state(null)
   let buffer: any[] = $state([])
+  /* body типизирован как T[] | T | null — нормализуем в массив один раз для рендера */
+  let bodyArray = $derived(body == null ? [] : Array.isArray(body) ? body : [body])
 
   let isDropdownOpen: { x: number; y: number; index: number } | null = $state(null)
   let selectSlideDuration: number = $state(250)
@@ -290,8 +292,8 @@
       </button>
     {/if}
 
-    {#if body || buffer}
-      {@const rows = dataBuffer.stashData ? buffer.slice(-(dataBuffer.bufferSize ?? 10)) : body.filter((row: any) => Object.entries(row).length != 0)}
+    {#if bodyArray.length > 0 || buffer.length > 0}
+      {@const rows = dataBuffer.stashData ? buffer.slice(-(dataBuffer.bufferSize ?? 10)) : bodyArray.filter((row: any) => Object.entries(row).length != 0)}
       <!-- Table Body с прокруткой -->
       <div class="relative flex-1 overflow-y-auto bg-(--back-color)" bind:this={container} onscroll={handleScroll}>
         <div class="min-w-0" style={`height: ${dataBuffer.visibleRows && tableHeight && rows.length > dataBuffer.visibleRows ? `${tableHeight}px` : ""};`}>

package/dist/Tabs/README.md

@@ -6,24 +6,24 @@
 
 ## Пропсы
 
-| Название           | Тип                                                                                                                                                    | По умолчанию                                                                       | Описание                                                                                                                                          |
-| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`               | `string`                                                                                                                                               | `crypto.randomUUID()`                                                              | Уникальный идентификатор компонента                                                                                                               |
-| `wrapperClass`     | `string`                                                                                                                                               | `"bg-blue"`                                                                        | Дополнительные CSS-классы для контейнера вкладок: влияет на фон и стилизацию активной вкладки (автоматически подбирается контрастный цвет текста) |
-| `size`             | `object`                                                                                                                                               | `-`                                                                                | Размеры сетки содержимого активной вкладки                                                                                                        |
-| `size.width`       | `number`                                                                                                                                               | `12`                                                                               | Количество колонок в сетке содержимого                                                                                                            |
-| `size.height`      | `number`                                                                                                                                               | `6`                                                                                | Количество строк в сетке содержимого                                                                                                              |
-| `activeTab`        | `number`                                                                                                                                               | `0`                                                                                | Индекс активной вкладки: изменение значения переключает вкладку программно                                                                        |
-| `items`            | `{ name?: string; icon?: ConstructorOfATypedSvelteComponent \| string; class?: string; children?: Snippet; onClick?: () => {}; disabled?: boolean }[]` | `[{ name: "tab 1", icon: "", class: "" }, { name: "tab 2", icon: "", class: "" }]` | Массив элементов вкладок                                                                                                                          |
-| `items[].name`     | `string`                                                                                                                                               | `undefined`                                                                        | Название (заголовок) вкладки                                                                                                                      |
-| `items[].icon`     | `ConstructorOfATypedSvelteComponent \| string`                                                                                                         | `undefined`                                                                        | Иконка вкладки (SVG строка или Svelte-компонент)                                                                                                  |
-| `items[].class`    | `string`                                                                                                                                               | `undefined`                                                                        | CSS-классы для стилизации вкладки; поддерживает `flex-col` для вертикальной компоновки                                                            |
-| `items[].children` | `Snippet`                                                                                                                                              | `undefined`                                                                        | Слот для содержимого конкретной вкладки: используется, если не переданы общий `children` или `Components`                                         |
-| `items[].onClick`  | `() => {}`                                                                                                                                             | `undefined`                                                                        | Обработчик клика по вкладке                                                                                                                       |
-| `items[].disabled` | `boolean`                                                                                                                                              | `undefined`                                                                        | Состояние отключения вкладки                                                                                                                      |
-| `children`         | `Snippet<[any]>`                                                                                                                                       | `undefined`                                                                        | Слот для динамического рендеринга контента активной вкладки; принимает `items[currentTabIndex]`                                                   |
-| `apiArray`         | `UIComponent[]`                                                                                                                                        | `[]`                                                                               | Массив данных компонентов для отображения через `Components`                                                                                      |
-| `Components`       | `Snippet<[component: UIComponent, fixedHeight: boolean]>`                                                                                              | `undefined`                                                                        | Сниппет для отображения динамических компонентов из `apiArray`                                                                                    |
+| Название           | Тип                                                                                                                                                    | По умолчанию                                                                       | Описание                                                                                                                                                                                                                                                      |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`               | `string`                                                                                                                                               | `crypto.randomUUID()`                                                              | Уникальный идентификатор компонента                                                                                                                                                                                                                           |
+| `wrapperClass`     | `string`                                                                                                                                               | `""`                                                                               | Дополнительные CSS-классы для внутренней обёртки полосы вкладок (например `justify-*`)                                                                                                                                                                        |
+| `size`             | `object`                                                                                                                                               | `-`                                                                                | Размеры сетки содержимого активной вкладки                                                                                                                                                                                                                    |
+| `size.width`       | `number`                                                                                                                                               | `12`                                                                               | Количество колонок в сетке содержимого                                                                                                                                                                                                                        |
+| `size.height`      | `number`                                                                                                                                               | `6`                                                                                | Количество строк в сетке содержимого                                                                                                                                                                                                                          |
+| `activeTab`        | `number`                                                                                                                                               | `0`                                                                                | Индекс активной вкладки: изменение значения переключает вкладку программно                                                                                                                                                                                    |
+| `items`            | `{ name?: string; icon?: ConstructorOfATypedSvelteComponent \| string; class?: string; children?: Snippet; onClick?: () => {}; disabled?: boolean }[]` | `[{ name: "tab 1", icon: "", class: "" }, { name: "tab 2", icon: "", class: "" }]` | Массив элементов вкладок                                                                                                                                                                                                                                      |
+| `items[].name`     | `string`                                                                                                                                               | `undefined`                                                                        | Название (заголовок) вкладки                                                                                                                                                                                                                                  |
+| `items[].icon`     | `ConstructorOfATypedSvelteComponent \| string`                                                                                                         | `undefined`                                                                        | Иконка вкладки (SVG строка или Svelte-компонент)                                                                                                                                                                                                              |
+| `items[].class`    | `string`                                                                                                                                               | `undefined`                                                                        | CSS-классы для стилизации вкладки; `flex-row`/`flex-col`/`flex-row-reverse`/`flex-col-reverse` — позиция иконки относительно текста; `flex-1` — вкладка растягивается на равную долю ширины (учитывает отступы между кнопками), `w-auto` — ширина по контенту |
+| `items[].children` | `Snippet`                                                                                                                                              | `undefined`                                                                        | Слот для содержимого конкретной вкладки: используется, если не переданы общий `children` или `Components`                                                                                                                                                     |
+| `items[].onClick`  | `() => {}`                                                                                                                                             | `undefined`                                                                        | Обработчик клика по вкладке                                                                                                                                                                                                                                   |
+| `items[].disabled` | `boolean`                                                                                                                                              | `undefined`                                                                        | Состояние отключения вкладки                                                                                                                                                                                                                                  |
+| `children`         | `Snippet<[any]>`                                                                                                                                       | `undefined`                                                                        | Слот для динамического рендеринга контента активной вкладки; принимает `items[currentTabIndex]`                                                                                                                                                               |
+| `apiArray`         | `UIComponent[]`                                                                                                                                        | `[]`                                                                               | Массив данных компонентов для отображения через `Components`                                                                                                                                                                                                  |
+| `Components`       | `Snippet<[component: UIComponent, fixedHeight: boolean]>`                                                                                              | `undefined`                                                                        | Сниппет для отображения динамических компонентов из `apiArray`                                                                                                                                                                                                |
 
 ## События
 
@@ -78,7 +78,7 @@
 {/snippet}
 ```
 
-### Вкладки с настраиваемыми классами
+### Вкладки равной ширины
 
 ```svelte
 <script>
@@ -87,10 +87,10 @@
 
 <UI.Tabs
   items={[
-    { name: "Tab1", class: "w-1/4" },
-    { name: "Tab2", class: "w-1/4" },
-    { name: "Tab3", class: "w-1/4" },
-    { name: "Tab4", class: "w-1/4" },
+    { name: "Tab1", class: "flex-1" },
+    { name: "Tab2", class: "flex-1" },
+    { name: "Tab3", class: "flex-1" },
+    { name: "Tab4", class: "flex-1" },
   ]}
   children={Tab}
   size={{ height: 1, width: 1 }}

package/dist/Tabs/Tabs.svelte

@@ -52,11 +52,6 @@
               item.class,
             )}
             disabled={item.disabled}
-            style="width: {item.class
-              ?.split(' ')
-              .find((cls: string) => cls.startsWith('w-'))
-              ?.replace('w-[', '')
-              .slice(0, -1)};"
             onclick={() => {
               currentTabIndex = index
               if (item.onClick) item.onClick()
@@ -93,7 +88,7 @@
       style="grid-template-columns: repeat({size.width || 1}, minmax(0, 1fr)); grid-template-rows: repeat({size.height || 1}, auto);"
     >
       {#if Components}
-        {#each (apiArray ?? []).filter((c) => c.id.endsWith(`${currentTabIndex}`)) as comp}
+        {#each (apiArray ?? []).filter((c) => c.id.match(/(\d+)$/)?.[1] === `${currentTabIndex}`) as comp}
           {@render Components(comp, false)}
         {/each}
       {:else if children}

package/dist/Tabs/TabsProps.svelte

@@ -25,24 +25,23 @@
 
   const initialColor = $derived(findColorOption($optionsStore.COLOR_OPTIONS, component.properties.wrapperClass))
 
-  const initialPosition = $derived(
-    $optionsStore.ICON_TEXT_POSITION_OPTIONS.find((c) =>
-      (c.value as string).includes(
-        component.properties.items
-          .find((item: IOption) => item.class?.includes("flex-"))
-          .class.split(" ")
-          .find((cls: string) => cls.startsWith("flex-")),
-      ),
-    ),
-  )
-
-  const initialWidth = $derived(() => {
-    let width = component.properties.items.find((item: IOption) => item.class?.split(" ").find((cls: string) => cls.startsWith("w-")))
-    if (!width) {
-      return 0
-    } else if (width.class.includes("w-auto")) return 0
-    else return 1
+  const initialPosition = $derived.by(() => {
+    const flexClass = component.properties.items
+      ?.find((item: IOption) => item.class?.includes("flex-"))
+      ?.class?.split(" ")
+      .find((cls: string) => cls.startsWith("flex-"))
+    if (!flexClass) return undefined
+    return $optionsStore.ICON_TEXT_POSITION_OPTIONS.find((c) => (c.value as string).includes(flexClass))
   })
+
+  const initialWidth = $derived(() => (component.properties.items?.some((item: IOption) => item.class?.split(" ").includes("flex-1")) ? 1 : 0))
+
+  /* "Равные" — flex-1 (flexbox сам поровну распределяет место с учётом gap между кнопками);
+     "Авто" — w-auto (ширина по контенту). Раньше "Равные" считалось как w-[X%] через inline
+     style в Tabs.svelte — не учитывало gap-6 между кнопками и создавало паразитный горизонтальный
+     скролл. flex-1/w-auto — обычные статические Tailwind-классы, отдельный inline style не нужен. */
+  const setTabWidthClass = (existingClass: string | undefined, equal: boolean): string =>
+    twMerge((existingClass ?? "").replace(/\bflex-1\b|\bw-auto\b/g, "").trim(), equal ? "flex-1" : "w-auto")
 </script>
 
 {#snippet TabsIconPosition()}
@@ -74,7 +73,7 @@
     onChange={(value) => {
       component.properties.items.forEach((_item: any, index: number) => {
         const items = [...(component.properties?.items || [])]
-        items[index]["class"] = twMerge(items[index].class, value ? `w-[${(1 / items.length) * 100}%]` : "w-auto")
+        items[index]["class"] = setTabWidthClass(items[index].class, Boolean(value))
         updateProperty("items", items, component, onPropertyChange)
       })
     }}
@@ -98,7 +97,7 @@
                 }
                 const items = [...(component.properties?.items || []), newItem]
                 items.forEach((_item: any, index: number) => {
-                  items[index]["class"] = twMerge(items[index].class, initialWidth() ? `w-[${(1 / items.length) * 100}%]` : "w-auto")
+                  items[index]["class"] = setTabWidthClass(items[index].class, Boolean(initialWidth()))
                   updateProperty("items", items, component, onPropertyChange)
                 })
               }}
@@ -170,8 +169,7 @@
                     const items = [...(component.properties?.items || [])]
                     items.splice(index, 1)
                     items.forEach((_item: any, index: number) => {
-                      items[index]["class"] = twMerge(items[index].class, initialWidth() ? `w-[${(1 / items.length) * 100}%]` : "w-auto")
-                      updateProperty("items", items, component, onPropertyChange)
+                      items[index]["class"] = setTabWidthClass(items[index].class, Boolean(initialWidth()))
                     })
                     updateProperty("items", items, component, onPropertyChange)
                   }}

package/dist/Widget/Widget.svelte

@@ -22,7 +22,7 @@
 
   let currentValue = $derived(value)
 
-  const minNumber = $derived(settings.number?.minNum ?? 0 + 1)
+  const minNumber = $derived(settings.number?.minNum ?? 0)
   const maxNumber = $derived(settings.number?.maxNum ?? 0)
 
   $effect(() => {

package/dist/WidgetDeviceInfo/WidgetDeviceInfo.svelte

@@ -4,6 +4,7 @@
      DevSN/DevID/DevFW/RunCnt — только чтение; DevName/HostName/WebUser/WebPsw — сохраняются
      одним пакетом. Ничего не знает про DeviceStore/WebSocket — value/onSave/onRestart. -->
 <script lang="ts">
+  import { untrack } from "svelte"
   import { slide } from "svelte/transition"
   import { twMerge } from "tailwind-merge"
   import * as UI from ".."
@@ -57,8 +58,20 @@
   $effect(() => writePersistedCollapsed(persistKey, collapsed))
 
   /* Поля редактируются локально (как Argument: NoSend в реальной GUI) — отправка одним пакетом по кнопке */
-  let savedSnapshot = $state(JSON.stringify(info))
+  let savedSnapshot = $state(untrack(() => JSON.stringify(info)))
   let isDirty = $derived(JSON.stringify(info) !== savedSnapshot)
+
+  /* value — живой поток данных с устройства (readonly-поля StaIP/DevFW/RunCnt и т.п. должны
+     обновляться постоянно), а не однократный дефолт. Подхватываем свежие данные, только если
+     у пользователя нет несохранённых правок редактируемых полей (DevName/HostName/...) —
+     иначе входящее значение затёрло бы то, что он ещё не успел сохранить. */
+  $effect(() => {
+    if (value !== undefined && !untrack(() => isDirty)) {
+      info = value
+      savedSnapshot = JSON.stringify(info)
+    }
+  })
+
   const save = () => {
     onSave?.($state.snapshot(info))
     savedSnapshot = JSON.stringify(info)

package/dist/WidgetWiFi/WidgetWiFi.svelte

@@ -5,6 +5,7 @@
      WiFiMode / StaSSID/StaPSK/StaticIP/StaIP/StaMS/StaGW / ApSSID/ApPSK/ApIP/ApMS/ApGW.
      Ничего не знает про DeviceStore/WebSocket — value/onSave, вся отправка на стороне вызывающего. -->
 <script lang="ts">
+  import { untrack } from "svelte"
   import { slide, fade, scale } from "svelte/transition"
   import { twMerge } from "tailwind-merge"
   import * as UI from ".."
@@ -103,8 +104,21 @@
   $effect(() => writePersistedCollapsed(persistKey, collapsed))
 
   /* Поля редактируются локально (как Argument: NoSend в реальной GUI) — отправка одним пакетом по кнопке */
-  let savedSnapshot = $state(JSON.stringify(cfg))
+  let savedSnapshot = $state(untrack(() => JSON.stringify(cfg)))
   let isDirty = $derived(JSON.stringify(cfg) !== savedSnapshot)
+
+  /* value — не однократный дефолт, а живой поток данных с устройства (GUIPreview.svelte
+     пересчитывает его на каждое обновление DeviceStore). Подхватываем свежие данные, только
+     если у пользователя нет несохранённых правок — иначе входящее значение затирало бы то,
+     что он ещё не успел сохранить. untrack(isDirty) — чтобы этот эффект не перезапускался на
+     каждое изменение cfg от самого пользователя, только на смену value. */
+  $effect(() => {
+    if (value !== undefined && !untrack(() => isDirty)) {
+      cfg = value
+      savedSnapshot = JSON.stringify(cfg)
+    }
+  })
+
   const commitSave = () => {
     onSave?.($state.snapshot(cfg))
     savedSnapshot = JSON.stringify(cfg)

package/dist/locales/translations.js

@@ -18,9 +18,39 @@ const translations = {
         "📶 该组件使用设备 `CFG` 分组下的一组固定字段——无需手动绑定变量。\n\n**📡 客户端模式（STA）**\n- `WiFiMode`、`StaSSID`、`StaPSK`\n- `StaticIP`、`StaIP`、`StaMS`、`StaGW`\n\n**📡 接入点（AP）**\n- `ApSSID`、`ApPSK`\n- `ApIP`、`ApMS`、`ApGW`\n\n🔍 扫描网络会发送 `Header: GET`、`Argument: APsList`——设备应在 `CFG.StaSSID-S` 字段中返回结果。\n\n⚙️ 如果设备使用的分组名称不是 `CFG`，请在组件设置中修改前缀（ID）。",
     ],
     "component.info.WidgetDeviceInfo": [
-        "ℹ️ Виджет работает с фиксированным набором полей группы `CFG` на устройстве — привязка переменных вручную не нужна.\n\n**🔒 Только чтение**\n- `DevSN`, `DevID`, `DevFW`, `RunCnt`\n\n**✏️ Редактируемые** (сохраняются одним пакетом по кнопке «Сохранить»)\n- `DevName`, `HostName`, `WebUser`, `WebPsw`\n\n🔌 Кнопка «Перезагрузить» отправляет `Argument: Restart`.\n\n⚙️ Если на устройстве используется другое имя группы вместо `CFG`, поменяйте префикс (ID) в настройках виджета.",
-        "ℹ️ 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\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\n**✏️ 可编辑字段**（通过「保存」按钮一次性发送）\n- `DevName`、`HostName`、`WebUser`、`WebPsw`\n\n🔌 「重启」按钮会发送 `Argument: Restart`。\n\n⚙️ 如果设备使用的分组名称不是 `CFG`，请在组件设置中修改前缀（ID）。",
+        "ℹ️ Виджет работает с фиксированным набором полей группы `CFG` на устройстве — привязка переменных вручную не нужна.\n\n**🔒 Только чтение**\n- `DevSN`, `DevID`, `DevFW`, `RunCnt`\n- `StaIP`, `ApIP` — текущие IP-адреса в режимах STA/AP\n\n**✏️ Редактируемые** (сохраняются одним пакетом по кнопке «Сохранить»)\n- `DevName`, `HostName`, `WebUser`, `WebPsw`\n\n🔌 Кнопка «Перезагрузить» отправляет `Argument: Restart`.\n\n⚙️ Если на устройстве используется другое имя группы вместо `CFG`, поменяйте префикс (ID) в настройках виджета.",
+        'ℹ️ 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.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.',
+        "📑 每个标签页的宽度和图标位置通过内部 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 个标签页。",
+    ],
+    "component.info.Switch": [
+        "🔘 Один и тот же компонент под тремя разными задачами — тип определяет, что означает `options`.\n\n**↔️/↕️ horizontal / vertical** — обычный слайдер 0/1, `options[0]` задаёт мастер-цвет.\n\n**☑️ checkbox** — простой булев тумблер, `options` можно не задавать.\n\n**🔢 bitMode** — `value` становится битовой маской, каждый элемент `options` управляет одним битом через свою `value` (номер бита 0-31); недоступен вместе с `checkbox`.",
+        "🔘 One component, three different jobs — `type` decides what `options` means.\n\n**↔️/↕️ horizontal / vertical** — a plain 0/1 slider, `options[0]` sets the master color.\n\n**☑️ checkbox** — a simple boolean toggle, `options` may be omitted.\n\n**🔢 bitMode** — `value` becomes a bitmask, each `options` entry controls one bit via its `value` (bit number 0-31); not available together with `checkbox`.",
+        "🔘 同一个组件承担三种不同职责——`type` 决定 `options` 的含义。\n\n**↔️/↕️ horizontal / vertical** —— 普通的 0/1 滑块，`options[0]` 设置主色。\n\n**☑️ checkbox** —— 简单的布尔开关，可省略 `options`。\n\n**🔢 bitMode** —— `value` 变为位掩码，每个 `options` 项通过自己的 `value`（位号 0-31）控制一个比特位；不能与 `checkbox` 同时使用。",
+    ],
+    "component.info.Table": [
+        "📊 Тип `type` определяет поведение буфера строк.\n\n**📋 table** — статическая таблица, `body` заменяется целиком при каждом обновлении.\n\n**📜 logger** — `dataBuffer.stashData` копит входящие строки в буфер (`dataBuffer.bufferSize` — сколько хранить), новые строки добавляются сверху, старые вытесняются.\n\n⚙️ `dataBuffer.visibleRows` ограничивает видимую высоту прокруткой, не количество данных.",
+        "📊 The `type` field determines row-buffer behavior.\n\n**📋 table** — a static table, `body` is fully replaced on every update.\n\n**📜 logger** — `dataBuffer.stashData` accumulates incoming rows in a buffer (`dataBuffer.bufferSize` — how many to keep), new rows are added on top and old ones are evicted.\n\n⚙️ `dataBuffer.visibleRows` limits the visible scroll height, not the amount of data.",
+        "📊 `type` 字段决定行缓冲区的行为。\n\n**📋 table** —— 静态表格，每次更新时整体替换 `body`。\n\n**📜 logger** —— `dataBuffer.stashData` 将传入的行累积到缓冲区（`dataBuffer.bufferSize` —— 保留多少条），新行添加在顶部，旧行被淘汰。\n\n⚙️ `dataBuffer.visibleRows` 限制可视滚动高度，而非数据量。",
+    ],
+    "component.info.ProgressBar": [
+        "📶 `items` и `value` — два независимых массива, связанные позиционно (по индексу, не по имени).\n\n- `items[i]` — статическое оформление полосы: `name` (подпись) и `class` (цвет через `bg-*`)\n- `value[i].Value` — текущее числовое значение этой же полосы (0-100 или в границах `number.minNum`/`maxNum`)\n\n⚠️ Порядок элементов в обоих массивах должен совпадать.",
+        "📶 `items` and `value` are two independent arrays linked positionally (by index, not by name).\n\n- `items[i]` — the bar's static appearance: `name` (label) and `class` (color via `bg-*`)\n- `value[i].Value` — the current numeric value of that same bar (0-100 or within `number.minNum`/`maxNum`)\n\n⚠️ The order of elements in both arrays must match.",
+        "📶 `items` 和 `value` 是两个通过位置（索引，而非名称）关联的独立数组。\n\n- `items[i]` —— 该进度条的静态外观：`name`（标签）和 `class`（通过 `bg-*` 设置颜色）\n- `value[i].Value` —— 同一进度条的当前数值（0-100 或在 `number.minNum`/`maxNum` 范围内）\n\n⚠️ 两个数组中元素的顺序必须一致。",
+    ],
+    "component.info.FileAttach": [
+        "📎 `type` меняет не только внешний вид, но и формат `currentImage`.\n\n**📄 file** — обычная кнопка выбора файла, показывает только имя.\n\n**🖼️ image** — превью-кнопка; `currentImage` ожидается как data-URI (`data:image/...`) или голая base64-строка (тогда PNG-префикс подставляется автоматически). После выбора нового файла показывается его локальное превью — до того, как `onChange` обработает загрузку и обновит `currentImage`.",
+        "📎 `type` changes not only the appearance but also the `currentImage` format.\n\n**📄 file** — a plain file-picker button, shows only the file name.\n\n**🖼️ image** — a preview button; `currentImage` is expected to be a data URI (`data:image/...`) or a bare base64 string (the PNG prefix is then added automatically). After picking a new file, its local preview is shown right away — before `onChange` finishes the upload and updates `currentImage`.",
+        "📎 `type` 不仅改变外观，还改变 `currentImage` 的格式。\n\n**📄 file** —— 普通文件选择按钮，仅显示文件名。\n\n**🖼️ image** —— 预览按钮；`currentImage` 应为 data URI（`data:image/...`）或纯 base64 字符串（此时会自动添加 PNG 前缀）。选择新文件后会立即显示本地预览——早于 `onChange` 完成上传并更新 `currentImage` 之前。",
+    ],
+    "component.info.Widget": [
+        "🔢 Диапазон значения задаётся `settings.number.minNum`/`maxNum` (по умолчанию 0/0). Иконки в `icons.array` распределяются по этому диапазону равномерно — при `icons.cycling: true` перебираются автоматически по таймеру вместо ручного выбора.",
+        "🔢 The value range is set by `settings.number.minNum`/`maxNum` (defaults to 0/0). Icons in `icons.array` are spread evenly across this range — with `icons.cycling: true` they cycle automatically on a timer instead of manual selection.",
+        "🔢 数值范围由 `settings.number.minNum`/`maxNum` 设置（默认 0/0）。`icons.array` 中的图标在此范围内均匀分布——当 `icons.cycling: true` 时，图标按计时器自动循环，而非手动选择。",
     ],
     /* Опции редактора свойств */
     "constructor.props.action.update": ["Обновить", "Update", "更新"],
@@ -170,6 +200,10 @@ const translations = {
     "constructor.props.regexp.colorhex": ["Цвет HEX", "HEX color", "HEX 颜色"],
     "constructor.props.regexp.devid": ["ID устройства", "Device ID", "设备 ID"],
     "constructor.props.regexp.serialnum": ["Серийный номер устройства", "Device serial number", "设备序列号"],
+    "constructor.props.regexp.phone": ["Телефон (РФ)", "Phone number (RU)", "电话号码（俄罗斯）"],
+    "constructor.props.regexp.mac": ["MAC-адрес", "MAC address", "MAC 地址"],
+    "constructor.props.regexp.username": ["Логин (3-16 символов)", "Username (3-16 characters)", "用户名（3-16 个字符）"],
+    "constructor.props.regexp.password": ["Пароль (мин. 8, буквы и цифры)", "Password (min. 8, letters and digits)", "密码（至少 8 位，字母和数字）"],
     "constructor.props.min": ["Мин.", "Min.", "最小值"],
     "constructor.props.max": ["Макс.", "Max.", "最大值"],
     "constructor.props.maxnum": ["Максимальное число", "Maximum number", "最大数值"],

package/dist/options.js

@@ -218,14 +218,18 @@ export const optionsStore = derived(T, ($T) => {
                 name: $T("constructor.props.regexp.ipv4"),
             },
             { id: id(), value: "/((^|:)([0-9a-fA-F]{0,4})){1,8}$/", name: $T("constructor.props.regexp.ipv6") },
-            { id: id(), value: "/(0[1-9]|[12][0-9]|3[01])[.](0[1-9]|1[012])[.](19|20)\\d\\d/", name: $T("constructor.props.regexp.date") },
+            { id: id(), value: "/^(0[1-9]|[12][0-9]|3[01])[.](0[1-9]|1[012])[.](19|20)\\d\\d$/", name: $T("constructor.props.regexp.date") },
             { id: id(), value: "/^([01]?[0-9]|2[0-3]):[0-5][0-9](:[0-5][0-9])?$/", name: $T("constructor.props.regexp.time") },
-            { id: id(), value: "/^[a-zA-Z0-9.!#$%&'*+/=?^_{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)\\*$/", name: $T("constructor.props.regexp.email") },
-            { id: id(), value: "/(https?):((//)|(\\\\))+[\\w\\d:#@%/$()~_?\\+-=\\\\\\.&]*/", name: $T("constructor.props.regexp.url") },
+            { id: id(), value: "/^[a-zA-Z0-9.!#$%&'*+/=?^_{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)+$/", name: $T("constructor.props.regexp.email") },
+            { id: id(), value: "/^https?:\\/\\/[\\w.-]+(?:\\.[a-zA-Z]{2,})+(?:[/?#]\\S*)?$/", name: $T("constructor.props.regexp.url") },
             { id: id(), value: "/^-?\\d+(\\.\\d+)?$/", name: $T("constructor.props.regexp.numbers") },
             { id: id(), value: "/^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/", name: $T("constructor.props.regexp.colorhex") },
             { id: id(), value: "/^[0-9A-F]{0,4}$/", name: $T("constructor.props.regexp.devid") },
             { id: id(), value: "/^[0-9a-fA-F]{4}-[0-9a-fA-F]{24}[:][0-9a-fA-F]{2}$|^$/", name: $T("constructor.props.regexp.serialnum") },
+            { id: id(), value: "/^(\\+7|8)[\\s-]?\\(?\\d{3}\\)?[\\s-]?\\d{3}[\\s-]?\\d{2}[\\s-]?\\d{2}$/", name: $T("constructor.props.regexp.phone") },
+            { id: id(), value: "/^([0-9A-Fa-f]{2}:){5}[0-9A-Fa-f]{2}$/", name: $T("constructor.props.regexp.mac") },
+            { id: id(), value: "/^[a-zA-Z0-9_]{3,16}$/", name: $T("constructor.props.regexp.username") },
+            { id: id(), value: "/^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d!@#$%^&*]{8,}$/", name: $T("constructor.props.regexp.password") },
         ],
         AUTOCOMPLETE_CONSTRUCTOR_OPTIONS: [
             { id: id(), value: "on", name: $T("constructor.props.autocomplete.on") },

package/package.json

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