poe-svelte-ui-lib 1.50.0 → 1.52.0

package/README.md

@@ -110,7 +110,7 @@ npm install poe-svelte-ui-lib
 
 **README компонента** (`src/lib/<Компонент>/README.md`, вкладка «Инфо» витрины) — развёрнутая документация для разработчика. Первые разделы повторяют описание (i) и не должны ему противоречить, дальше идут разработческие: `## Назначение` (плюс заметка о размерах) → `## Пакет данных` (плюс `### Протокол устройства` / пример кода прошивки) → `## Ключи` (таблица «Ключ / Описание», те же формулировки, что в (i)) → `## Особенности` (поведение, ограничения) → `## Пропсы` (таблица «Название / Тип / По умолчанию / Описание», колбэки — `### Колбэки`) → `## Примеры` (Svelte) → `## Конструктор свойств (<Компонент>Props.svelte)` → `## Внутреннее устройство`.
 
-**Языки — единственный источник в библиотеке.** Список языков — `LANGUAGES` в `locales/languages.ts`: код, название и флаг (SVG-строка), без Svelte — годится и для серверного кода. **Новый язык — одна запись в `LANGUAGES`**: переключатели языка во всех приложениях (`LOCALES`), колонки окна «Тексты и переводы», многоязычные тексты GUI и словари подхватывают его сами; пока перевода нет — показывается текст языка по умолчанию (`DEFAULT_LANGUAGE`, `ru`). Словари (`Translations`) — строки-объекты по кодам `{ ru: "…", en: "…", zh: "…" }`: обязателен только язык по умолчанию, порядок не важен; недостающие переводы показывает `findMissingTranslations(словарь)`. `locales/i18n.ts` — текущий язык `Language`/`setLanguage` (неизвестный код не применяется, выбор сохраняется в `localStorage` `AppLanguage`), `restoreLanguage()` (сохранённый или язык браузера; стартовое значение всегда язык по умолчанию — серверный рендер совпадает с гидратацией, поэтому SSR-приложения вызывают его в `onMount` корневого layout, SPA — при старте), `LOCALES` (с флагом `flag`) и механизм перевода `createTranslator(словарь)`. Код вне компонентов берёт текущий язык через `getLanguage()` (например, для заголовка `Accept-Language`), ключ хранилища и язык по умолчанию в приложениях не повторяются; серверный код переводит функцией `translate(словарь, язык, ключ)` на язык запроса, разобранный `resolveLanguage(Accept-Language)`. Приложения (DevCloud, WebApp, терминал) свой список языков, хранилище и функцию перевода не держат: берут их из библиотеки и строят свой `$T` из своего словаря — `export const T = createTranslator(translations)`. Одно `setLanguage` переключает и компоненты библиотеки, и приложение. Многоязычные тексты GUI распознаются по виду ключей (коды языков), поэтому данные с языком, убранным из списка, не ломаются.
+**Языки — единственный источник в библиотеке.** Список языков — `LANGUAGES` в `locales/languages.ts`: код, название и флаг (SVG-строка), без Svelte — годится и для серверного кода. **Новый язык — одна запись в `LANGUAGES`**: переключатели языка во всех приложениях (`LOCALES`), колонки окна «Тексты и переводы», многоязычные тексты GUI и словари подхватывают его сами; пока перевода нет — показывается текст языка по умолчанию (`DEFAULT_LANGUAGE`, `ru`). Словари (`Translations`) — строки-объекты по кодам `{ ru: "…", en: "…", zh: "…" }`: обязателен только язык по умолчанию, порядок не важен; недостающие переводы показывает `findMissingTranslations(словарь)`. `locales/i18n.ts` — текущий язык `Language`/`setLanguage` (неизвестный код не применяется, выбор сохраняется в `localStorage` `AppLanguage`), `restoreLanguage()` (сохранённый или язык браузера; стартовое значение всегда язык по умолчанию — серверный рендер совпадает с гидратацией, поэтому SSR-приложения вызывают его в `onMount` корневого layout, SPA — при старте), `LOCALES` (с флагом `flag`) и механизм перевода `createTranslator(словарь)`. Код вне компонентов берёт текущий язык через `getLanguage()` (например, для заголовка `Accept-Language`), ключ хранилища и язык по умолчанию в приложениях не повторяются; серверный код переводит функцией `translate(словарь, язык, ключ)` на язык запроса, разобранный `resolveLanguage(Accept-Language)`. Серверный код, который Node запускает без Vite (например WebSocket-сервер облака через `tsx`), импортирует языки и перевод из `poe-svelte-ui-lib/locales` — корень пакета экспортируется только для Svelte (условие `svelte`) и тянет компоненты, Node его не загрузит. Приложения (DevCloud, WebApp, терминал) свой список языков, хранилище и функцию перевода не держат: берут их из библиотеки и строят свой `$T` из своего словаря — `export const T = createTranslator(translations)`. Одно `setLanguage` переключает и компоненты библиотеки, и приложение. Многоязычные тексты GUI распознаются по виду ключей (коды языков), поэтому данные с языком, убранным из списка, не ломаются.
 
 **Языки (ru/en/zh) — два слоя:**
 

package/dist/CommonSnippets.svelte

@@ -5,6 +5,9 @@
   import { optionsStore } from "./options"
   import { updateProperty } from "./types"
   import { twMerge } from "tailwind-merge"
+
+  /* Значок «нет иконки» для компактной кнопки выбора иконки */
+  const ICON_PLACEHOLDER = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21"/></svg>`
   import TextsEditor from "./TextsEditor.svelte"
 
   let {
@@ -235,9 +238,23 @@
   icons: { array: [string, string[]][]; selectArray?: false }
   icon: string | string[]
   updateProperty: (icon: string | string[]) => {}
+  /* compact — для строк списков в одну линию: квадратная кнопка с текущей иконкой и подсказкой вместо кнопки с текстом */
+  compact?: boolean
 })}
-  <div class="relative mt-6 flex w-full gap-2">
-    <UI.Button content={{ name: initialValue.name }} componentClass="bg-blue" onClick={() => (showIconLib = true)} />
+  <div class={initialValue.compact ? "relative flex shrink-0 items-center gap-1" : "relative mt-6 flex w-full gap-2"}>
+    {#if initialValue.compact}
+      <UI.Button
+        wrapperClass="w-auto"
+        componentClass="size-8 rounded-[10px] p-[6px] bg-max"
+        content={{
+          icon: typeof initialValue.icon === "string" && initialValue.icon ? initialValue.icon : ICON_PLACEHOLDER,
+          info: { text: initialValue.name, side: "top" },
+        }}
+        onClick={() => (showIconLib = true)}
+      />
+    {:else}
+      <UI.Button content={{ name: initialValue.name }} componentClass="bg-blue" onClick={() => (showIconLib = true)} />
+    {/if}
     {#if showIconLib}
       <UI.Modal bind:isOpen={showIconLib} wrapperClass="w-130">
         {#snippet main()}
@@ -268,7 +285,12 @@
       </UI.Modal>
     {/if}
     {#if initialValue.icon}
-      <UI.Button wrapperClass="w-8" componentClass="p-0.5 bg-red" content={{ icon: CrossIcon }} onClick={() => initialValue.updateProperty("")} />
+      <UI.Button
+        wrapperClass={initialValue.compact ? "w-auto" : "w-8"}
+        componentClass={initialValue.compact ? "size-8 rounded-[10px] p-[7px] bg-transparent" : "p-0.5 bg-red"}
+        content={{ icon: CrossIcon }}
+        onClick={() => initialValue.updateProperty("")}
+      />
     {/if}
   </div>
 {/snippet}

package/dist/Dragging.README.md

@@ -76,3 +76,9 @@
 ## Вид перетаскивания
 
 Один на библиотеку и приложения — `dragStyle.ts` (`applyDragGhost`, `clearDragGhost`, `createDropPlaceholder`, экспортируются из пакета): перетаскиваемый элемент — фон с заметным оттенком акцента (30%), рамка акцентом и тень, курсор «захват»; место вставки — заливка мягким акцентом (`--accent-soft`) со штриховой рамкой акцентом. Тот же вид — у перетаскивания компонентов на холсте конструктора DevCloud.
+
+Соседние элементы раздвигаются плавно: место вставки — первый элемент, чья середина (по раскладке, без текущего сдвига анимации) ниже курсора, поэтому плейсхолдер не прыгает туда-обратно на границе; перестановка плейсхолдера анимируется `animateReorder` (FLIP, 160 мс, отключается при `prefers-reduced-motion`).
+
+## Списки в окнах свойств
+
+Элементы списков конструктора (вкладки Tabs, варианты Select, биты Switch, шкалы ProgressBar, уровни PeriodChart) — одна строка: ручка, номер и текст элемента («Вариант 2 · Ручной»), поля без собственных подписей, удаление. Подписи колонок один раз сверху — `PropsListHeader.svelte` с тем же шаблоном колонок `grid-cols-[...]`, что и у строк; при пустом списке не показывается. Тексты элементов правятся только в окне «Тексты и переводы», новые элементы создаются без текста-заглушки.

package/dist/Dragging.svelte

@@ -2,7 +2,7 @@
   import { tick } from "svelte"
   import MoveVerticalIcon from "./libIcons/MoveVerticalIcon.svelte"
   import { twMerge } from "tailwind-merge"
-  import { applyDragGhost, clearDragGhost, createDropPlaceholder } from "./dragStyle"
+  import { animateReorder, applyDragGhost, clearDragGhost, createDropPlaceholder } from "./dragStyle"
 
   let dragState = $state({
     isDragging: false,
@@ -93,21 +93,32 @@
     const ghost = dragState.ghostElement
     ghost.style.top = `${e.clientY - dragState.offsetY}px`
 
-    const allElements = document.elementsFromPoint(dragState.startX, e.clientY)
-    const cell = allElements.find((el) => el.id.startsWith(`${elementsId}-`)) as HTMLElement
-    const newIndex =
-      cell && (dragState.containerIndex !== null ? Number(cell.id.split("-")[2]) === dragState.containerIndex : true) ? Number(cell.id.split("-")[1]) : null
-
-    /* Находим целевой элемент перед которым нужно вставить placeholder */
-    if (newIndex === null) return
+    /*
+      Место вставки — перед первой строкой, середина которой ниже курсора (иначе — в конец): меняется только при пересечении середины
+      строки, без дрожания на границах. Соседние строки сдвигаются плавно (animateReorder)
+    */
+    const items = commandItems.filter((item) =>
+      dragState.containerIndex === null ? true : Number(item.id.split("-")[2]) === dragState.containerIndex,
+    ) as HTMLElement[]
+    if (!items.length) return
+    let target = items[items.length - 1]
+    for (const item of items) {
+      const rect = item.getBoundingClientRect()
+      /* Положение в раскладке, без сдвига идущей анимации — иначе движущаяся строка снова «пересекала» бы курсор */
+      const transform = getComputedStyle(item).transform
+      const shift = transform && transform !== "none" ? new DOMMatrixReadOnly(transform).m42 : 0
+      if (e.clientY < rect.top - shift + rect.height / 2) {
+        target = item
+        break
+      }
+    }
+    const newIndex = Number(target.id.split("-")[1])
+    if (newIndex === dragState.dropIndex && dragState.placeholderElement.nextSibling === target) return
     dragState.dropIndex = newIndex
 
     const placeholder = dragState.placeholderElement
-    const targetElement = commandItems[dragState.dropIndex]
-
-    if (targetElement && targetElement.parentNode) {
-      const nextSibling = placeholder.nextSibling
-      if (nextSibling !== targetElement) targetElement.parentNode.insertBefore(placeholder, targetElement)
+    if (target.parentNode && placeholder.nextSibling !== target) {
+      animateReorder(items, () => target.parentNode?.insertBefore(placeholder, target))
     }
   }
 

package/dist/PeriodChart/PeriodChartProps.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { getContext } from "svelte"
-  import { T } from "../locales/i18n"
+  import { Language, T } from "../locales/i18n"
+  import { localizeText } from "../locales/localize"
   import { updateProperty, type IOption, type IPeriodChartLevel, type IPeriodChartProps, type IUIComponentHandler, type UIComponent } from "../types"
   import * as UI from ".."
   import { optionsStore, findColorOption } from "../options"
@@ -8,6 +9,8 @@
   import ButtonDelete from "../libIcons/ButtonDelete.svelte"
   import CommonSnippets from "../CommonSnippets.svelte"
   import PropsGroup from "../PropsGroup.svelte"
+  import PropsListHeader from "../PropsListHeader.svelte"
+  import PropsListModal from "../PropsListModal.svelte"
 
   const {
     component,
@@ -23,6 +26,8 @@
   let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
 
   let itemsContainer: HTMLDivElement | null = $state(null)
+  /* Колонки строки уровня: ручка, номер и текст, переменная, данные, подписи, удаление */
+  const LEVEL_GRID = "grid-cols-[2rem_minmax(6rem,auto)_minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_2rem]"
 
   const initialColor = $derived(findColorOption($optionsStore.COLOR_OPTIONS, component.properties.wrapperClass))
 
@@ -50,82 +55,96 @@
 </script>
 
 {#snippet PeriodChartLevels()}
-  <PropsGroup label={$T("constructor.props.periodchart.title")} wrapperClass="mt-3">
-    {#snippet headerActions()}
-      <UI.Button
-        wrapperClass="w-8"
-        content={{ icon: ButtonAdd }}
-        onClick={() => {
-          const newLevel: IPeriodChartLevel = { name: `Level ${(component.properties?.levels?.length ?? 0) + 1}`, data: [] }
-          const levels = [...(component.properties?.levels || []), newLevel]
-          updateLevels(levels)
-        }}
-      />
-    {/snippet}
-
-    <div bind:this={itemsContainer} class="flex flex-col gap-2">
-      {#each component.properties.levels || [] as level, index}
-        <div
-          id="item-{index}"
-          class="grid grid-cols-[auto_1fr_auto] items-center gap-2 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 p-2"
-        >
-          <UI.Dragging
-            wrapperClass="shrink-0"
-            container={itemsContainer}
-            array={component.properties.levels}
-            elementIndex={index}
-            onUpdate={(updatedArray) => updateLevels(updatedArray)}
+  <PropsListModal label={$T("constructor.props.periodchart.title")} count={component.properties.levels?.length ?? 0} wrapperClass="w-250 h-[70%]">
+    {#snippet main()}
+      <PropsGroup>
+        {#snippet headerActions()}
+          <UI.Button
+            wrapperClass="w-8"
+            content={{ icon: ButtonAdd }}
+            onClick={() => {
+              const newLevel: IPeriodChartLevel = { name: "", data: [] }
+              const levels = [...(component.properties?.levels || []), newLevel]
+              updateLevels(levels)
+            }}
           />
-          <div class="flex flex-wrap items-end gap-2">
-            <UI.Select
-              label={{ name: $T("constructor.props.variable") }}
-              wrapperClass="min-w-32 flex-1"
-              type="input"
-              options={VARIABLE_OPTIONS}
-              value={VARIABLE_OPTIONS.find((opt) => opt.value === level.variable)}
-              onUpdate={(value) => {
-                const levels = [...(component.properties?.levels || [])]
-                levels[index] = { ...levels[index], variable: (value as IOption).value as string }
-                updateLevels(levels)
-              }}
-            />
-            <UI.Input
-              label={{ name: $T("constructor.props.periodchart.data") }}
-              wrapperClass="min-w-32 flex-1"
-              value={formatNumbers(level.data)}
-              onUpdate={(value) => {
-                const levels = [...(component.properties?.levels || [])]
-                levels[index] = { ...levels[index], data: parseNumbers(value as string) }
-                updateLevels(levels)
-              }}
-            />
-            <UI.Input
-              label={{ name: $T("constructor.props.periodchart.labels") }}
-              wrapperClass="min-w-32 flex-1"
-              value={formatStrings(level.labels)}
-              onUpdate={(value) => {
-                const levels = [...(component.properties?.levels || [])]
-                levels[index] = { ...levels[index], labels: parseStrings(value as string) }
-                updateLevels(levels)
-              }}
-            />
-          </div>
-          {#if (component.properties.levels?.length ?? 0) > 1}
-            <UI.Button
-              wrapperClass="w-8 shrink-0"
-              content={{ icon: ButtonDelete }}
-              onClick={() => {
-                const levels = [...(component.properties?.levels || [])]
-                levels.splice(index, 1)
-                updateLevels(levels)
-              }}
+        {/snippet}
+
+        <div bind:this={itemsContainer} class="flex flex-col gap-2">
+          {#if component.properties.levels?.length}
+            <PropsListHeader
+              gridClass={LEVEL_GRID}
+              captions={[
+                "",
+                $T("constructor.props.item"),
+                $T("constructor.props.variable"),
+                $T("constructor.props.periodchart.data"),
+                $T("constructor.props.periodchart.labels"),
+                "",
+              ]}
             />
           {/if}
+          {#each component.properties.levels || [] as level, index}
+            <div
+              id="item-{index}"
+              class="grid {LEVEL_GRID} items-center gap-3 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 px-2 py-1.5"
+            >
+              <UI.Dragging
+                container={itemsContainer}
+                array={component.properties.levels}
+                elementIndex={index}
+                onUpdate={(updatedArray) => updateLevels(updatedArray)}
+              />
+              <div class="flex min-w-0 flex-col text-[13px]">
+                <span class="font-semibold">{$T("constructor.props.periodchart.item", { n: index + 1 })}</span>
+                <span class="truncate text-(--muted-color)">{localizeText(level.name, $Language) || $T("constructor.props.tabs.untitled")}</span>
+              </div>
+              <UI.Select
+                type="input"
+                options={VARIABLE_OPTIONS}
+                value={VARIABLE_OPTIONS.find((opt) => opt.value === level.variable)}
+                onUpdate={(value) => {
+                  const levels = [...(component.properties?.levels || [])]
+                  levels[index] = { ...levels[index], variable: (value as IOption).value as string }
+                  updateLevels(levels)
+                }}
+              />
+              <UI.Input
+                value={formatNumbers(level.data)}
+                onUpdate={(value) => {
+                  const levels = [...(component.properties?.levels || [])]
+                  levels[index] = { ...levels[index], data: parseNumbers(value as string) }
+                  updateLevels(levels)
+                }}
+              />
+              <UI.Input
+                value={formatStrings(level.labels)}
+                onUpdate={(value) => {
+                  const levels = [...(component.properties?.levels || [])]
+                  levels[index] = { ...levels[index], labels: parseStrings(value as string) }
+                  updateLevels(levels)
+                }}
+              />
+              {#if (component.properties.levels?.length ?? 0) > 1}
+                <UI.Button
+                  wrapperClass="w-8"
+                  content={{ icon: ButtonDelete }}
+                  onClick={() => {
+                    const levels = [...(component.properties?.levels || [])]
+                    levels.splice(index, 1)
+                    updateLevels(levels)
+                  }}
+                />
+              {:else}
+                <span></span>
+              {/if}
+            </div>
+          {/each}
+          <div id="item-{component.properties.levels?.length ?? 0}" class="min-h-4"></div>
         </div>
-      {/each}
-      <div id="item-{component.properties.levels?.length ?? 0}" class="min-h-4"></div>
-    </div>
-  </PropsGroup>
+      </PropsGroup>
+    {/snippet}
+  </PropsListModal>
 {/snippet}
 
 {#if forConstructor}
@@ -136,7 +155,9 @@
       <CommonSnippets snippet="Label" {component} {onPropertyChange} />
     </PropsGroup>
   </div>
-  {@render PeriodChartLevels()}
+  <PropsGroup>
+    {@render PeriodChartLevels()}
+  </PropsGroup>
 {:else}
   <div class="flex flex-col gap-2">
     <PropsGroup label={$T("constructor.props.group.general")}>
@@ -149,5 +170,7 @@
       <CommonSnippets snippet="Colors" initialValue={{ color: initialColor, uselessColors: ["bg-max"] }} {component} {onPropertyChange} />
     </PropsGroup>
   </div>
-  {@render PeriodChartLevels()}
+  <PropsGroup>
+    {@render PeriodChartLevels()}
+  </PropsGroup>
 {/if}

package/dist/PeriodChart/README.md

@@ -110,7 +110,7 @@
 
 - Общие поля через `CommonSnippets`: `Access` (без `viewOnly` — компонент чисто отображающий, как `Graph`/`Tabs`/`ProgressBar`), `Colors` (пишет в `wrapperClass`, тот же цвет уходит на переключатель и столбики), `Label`; в режиме редактирования дополнительно `Identificator`, `WrapperClass`
 - `unit` — отдельное текстовое поле ввода
-- Редактор уровней (`levels[]`) — тот же паттерн повторяющегося списка, что у `TabsSettings`/ `ProgressBarOptions`: перетаскивание (`UI.Dragging`) для порядка вкладок, добавление/удаление через `ButtonAdd`/`ButtonDelete`, на каждый уровень — поля `name`, `variable`, `data` и `labels`. `variable` — тот же `Select` по списку переменных устройства (`DeviceVariables` из контекста), что и у `Graph`/`CommonSnippets.Variable`, только по одному на каждый уровень; при любом изменении списка уровней редактор пересобирает `eventHandler.Variables` как объединение всех непустых `variable` со всех уровней — так рантайм подписывается сразу на все нужные ключи. `data`/`labels` остаются полями для литеральных демо-данных — массивы чисел/строк вводятся одной строкой через запятую (`"10, 20, 30"`) и парсятся на лету
+- Редактор уровней (`levels[]`) — в окне «Уровни детализации» (`PropsListModal`), по строке на уровень, как у вкладок Tabs и шкал ProgressBar: перетаскивание (`UI.Dragging`) для порядка вкладок, добавление/удаление через `ButtonAdd`/`ButtonDelete`, на каждый уровень — поля `variable`, `data` и `labels` (подпись `name` — в окне «Тексты и переводы»). `variable` — тот же `Select` по списку переменных устройства (`DeviceVariables` из контекста), что и у `Graph`/`CommonSnippets.Variable`, только по одному на каждый уровень; при любом изменении списка уровней редактор пересобирает `eventHandler.Variables` как объединение всех непустых `variable` со всех уровней — так рантайм подписывается сразу на все нужные ключи. `data`/`labels` остаются полями для литеральных демо-данных — массивы чисел/строк вводятся одной строкой через запятую (`"10, 20, 30"`) и парсятся на лету
 
 ### Использование
 

package/dist/ProgressBar/ProgressBarProps.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
   import TextsEditor from "../TextsEditor.svelte"
   import { getContext } from "svelte"
-  import { T } from "../locales/i18n"
+  import { Language, T } from "../locales/i18n"
+  import { localizeText } from "../locales/localize"
   import { type UIComponent, type IProgressBarProps, updateProperty, type IUIComponentHandler } from "../types"
   import * as UI from ".."
   import { optionsStore, findColorOption } from "../options"
   import CommonSnippets from "../CommonSnippets.svelte"
   import PropsGroup from "../PropsGroup.svelte"
   import PropsListModal from "../PropsListModal.svelte"
+  import PropsListHeader from "../PropsListHeader.svelte"
   import ButtonAdd from "../libIcons/ButtonAdd.svelte"
   import ButtonDelete from "../libIcons/ButtonDelete.svelte"
 
@@ -24,6 +26,8 @@
   const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>("DeviceVariables")
   let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
   let itemsContainer: HTMLDivElement | null = $state(null)
+  /* Колонки строки шкалы: ручка, номер и текст, цвет (в конструкторе на две колонки) или значение и стили, удаление */
+  const ITEM_GRID = "grid-cols-[2rem_minmax(8rem,1fr)_minmax(6rem,1fr)_minmax(0,1fr)_2rem]"
 </script>
 
 {#snippet ProgressBarType()}
@@ -52,7 +56,7 @@
             content={{ icon: ButtonAdd }}
             onClick={() => {
               const newProgress = {
-                name: `Label ${component.properties?.items.length + 1}`,
+                name: "",
                 class: "bg-blue",
               }
               const progresses = [...(component.properties?.items || []), newProgress]
@@ -70,13 +74,24 @@
         {/snippet}
 
         <div bind:this={itemsContainer} class="flex flex-col gap-2">
+          {#if component.properties.items?.length}
+            <PropsListHeader
+              gridClass={ITEM_GRID}
+              captions={[
+                "",
+                $T("constructor.props.item"),
+                forConstructor ? $T("constructor.props.colors") : $T("constructor.props.optionvalue"),
+                forConstructor ? "" : $T("constructor.props.optionclass"),
+                "",
+              ]}
+            />
+          {/if}
           {#each component.properties.items || [] as progress, index}
             <div
               id="item-{index}"
-              class="grid grid-cols-[auto_1fr_auto] items-center gap-2 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 p-2"
+              class="grid {ITEM_GRID} items-center gap-3 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 px-2 py-1.5"
             >
               <UI.Dragging
-                wrapperClass="shrink-0"
                 container={itemsContainer}
                 array={component.properties.items}
                 elementIndex={index}
@@ -84,52 +99,49 @@
                   updateProperty("items", updatedArray, component, onPropertyChange)
                 }}
               />
-              <div class="flex flex-wrap items-end gap-2">
-                {#if forConstructor}
-                  <UI.Select
-                    label={{ name: $T("constructor.props.colors") }}
-                    wrapperClass="min-w-56 flex-[2]"
-                    type="buttons"
-                    options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== "bg-max")}
-                    value={findColorOption($optionsStore.COLOR_OPTIONS, progress.class)}
-                    onUpdate={(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)
-                    }}
-                  />
-                {:else}
-                  <UI.Input
-                    label={{ name: $T("constructor.props.optionvalue") }}
-                    wrapperClass="min-w-24 flex-1"
-                    value={(component.properties.value || [])[index]?.Value}
-                    type="number"
-                    onUpdate={(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)
-                    }}
-                  />
-                  <UI.Input
-                    label={{ name: $T("constructor.props.optionclass") }}
-                    wrapperClass="min-w-32 flex-[2]"
-                    value={progress.class}
-                    onUpdate={(value) => {
-                      const progresses = [...(component.properties?.items || [])]
-                      progresses[index]["class"] = value
-                      updateProperty("items", progresses, component, onPropertyChange)
-                    }}
-                  />
-                {/if}
+              <div class="flex min-w-0 items-baseline gap-2 text-[13px]">
+                <span class="shrink-0 font-semibold">{$T("constructor.props.progressbar.item", { n: index + 1 })}</span>
+                <span class="truncate text-(--muted-color)">{localizeText(progress.name, $Language) || $T("constructor.props.tabs.untitled")}</span>
               </div>
+              {#if forConstructor}
+                <UI.Select
+                  wrapperClass="col-span-2"
+                  type="buttons"
+                  options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== "bg-max")}
+                  value={findColorOption($optionsStore.COLOR_OPTIONS, progress.class)}
+                  onUpdate={(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)
+                  }}
+                />
+              {:else}
+                <UI.Input
+                  value={(component.properties.value || [])[index]?.Value}
+                  type="number"
+                  onUpdate={(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)
+                  }}
+                />
+                <UI.Input
+                  value={progress.class}
+                  onUpdate={(value) => {
+                    const progresses = [...(component.properties?.items || [])]
+                    progresses[index]["class"] = value
+                    updateProperty("items", progresses, component, onPropertyChange)
+                  }}
+                />
+              {/if}
               <UI.Button
-                wrapperClass="w-8 shrink-0"
+                wrapperClass="w-8"
                 content={{ icon: ButtonDelete }}
                 onClick={() => {
                   const progresses = [...(component.properties?.items || [])]

package/dist/PropsListHeader.svelte

@@ -0,0 +1,11 @@
+<!-- $lib/PropsListHeader.svelte — подписи колонок над однострочными элементами списка в окнах свойств (вместо подписи у каждого поля);
+     gridClass — тот же шаблон колонок, что у строк списка, пустая подпись — колонка без заголовка (ручка, удаление) -->
+<script lang="ts">
+  let { gridClass, captions }: { gridClass: string; captions: string[] } = $props()
+</script>
+
+<div class="grid {gridClass} items-center gap-3 px-2 text-[12px] font-semibold text-(--muted-color)">
+  {#each captions as caption, index (index)}
+    <span class="truncate">{caption}</span>
+  {/each}
+</div>

package/dist/PropsListHeader.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    gridClass: string;
+    captions: string[];
+};
+declare const PropsListHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type PropsListHeader = ReturnType<typeof PropsListHeader>;
+export default PropsListHeader;

package/dist/PropsListModal.svelte

@@ -1,5 +1,5 @@
 <!-- $lib/PropsListModal.svelte — вынос "тяжёлых" списковых секций панелей свойств (столбцы
-     Table, опции ProgressBar/Select/Switch/Tabs) в модалку вместо попытки втиснуть их в узкий
+     Table, опции ProgressBar/Select/Switch/Tabs, уровни PeriodChart) в модалку вместо попытки втиснуть их в узкий
      сайдбар конструктора (ConstructorUI.svelte). Кнопка-триггер показывает счётчик элементов. -->
 <script lang="ts">
   import { T } from "./locales/i18n"

package/dist/Select/SelectProps.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getContext, onMount } from "svelte"
-  import { T } from "../locales/i18n"
+  import { Language, T } from "../locales/i18n"
   import { type UIComponent, type ISelectProps, type IOption, updateProperty, type IUIComponentHandler } from "../types"
   import * as UI from ".."
   import ButtonDelete from "../libIcons/ButtonDelete.svelte"
@@ -9,6 +9,8 @@
   import CommonSnippets from "../CommonSnippets.svelte"
   import PropsGroup from "../PropsGroup.svelte"
   import PropsListModal from "../PropsListModal.svelte"
+  import PropsListHeader from "../PropsListHeader.svelte"
+  import { localizeText } from "../locales/localize"
   import { twMerge } from "tailwind-merge"
 
   const {
@@ -25,6 +27,8 @@
   let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
 
   let itemsContainer: HTMLDivElement | null = $state(null)
+  /* Колонки строки варианта: ручка, номер и текст, значение, цвет/стили, удаление */
+  const OPTION_GRID = "grid-cols-[2rem_minmax(8rem,1fr)_minmax(6rem,1fr)_minmax(0,2fr)_2rem]"
 
   type ValueTypeOption = {
     id: string
@@ -179,7 +183,7 @@
             onClick={() => {
               const newOption: IOption = {
                 id: crypto.randomUUID(),
-                name: `Option ${component.properties?.options.length + 1}`,
+                name: "",
                 value: component.properties?.options.length + 1,
                 class: "bg-max",
               }
@@ -190,13 +194,24 @@
         {/snippet}
 
         <div bind:this={itemsContainer} class="flex flex-col gap-2">
+          {#if component.properties.options?.length}
+            <PropsListHeader
+              gridClass={OPTION_GRID}
+              captions={[
+                "",
+                $T("constructor.props.item"),
+                $T("constructor.props.optionvalue"),
+                forConstructor ? $T("constructor.props.colors") : $T("constructor.props.optionclass"),
+                "",
+              ]}
+            />
+          {/if}
           {#each component.properties.options || [] as option, index (option.id)}
             <div
               id="item-{index}"
-              class="grid grid-cols-[auto_1fr_auto] items-center gap-2 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 p-2"
+              class="grid {OPTION_GRID} items-center gap-3 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 px-2 py-1.5"
             >
               <UI.Dragging
-                wrapperClass="shrink-0"
                 container={itemsContainer}
                 array={component.properties.options}
                 elementIndex={index}
@@ -204,49 +219,45 @@
                   updateProperty("options", updatedArray, component, onPropertyChange)
                 }}
               />
-              <div class="flex flex-wrap items-end gap-2">
+              <div class="flex min-w-0 items-baseline gap-2 text-[13px]">
+                <span class="shrink-0 font-semibold">{$T("constructor.props.options.item", { n: index + 1 })}</span>
+                <span class="truncate text-(--muted-color)">{localizeText(option.name, $Language) || $T("constructor.props.tabs.untitled")}</span>
+              </div>
+              <UI.Input
+                value={option.value}
+                type={currentValueType.value}
+                number={component.properties.bitMode
+                  ? { minNum: 0, maxNum: Math.pow(2, component.properties.range.end - component.properties.range.start + 1) - 1, step: 1 }
+                  : { minNum: -1000000, maxNum: 1000000, step: 1 }}
+                onUpdate={(value) => {
+                  const options = [...(component.properties?.options || [])]
+                  options[index]["value"] = value
+                  updateProperty("options", options, component, onPropertyChange)
+                }}
+              />
+              {#if forConstructor}
+                <UI.Select
+                  type="buttons"
+                  options={$optionsStore.COLOR_OPTIONS}
+                  value={findColorOption($optionsStore.COLOR_OPTIONS, option.class)}
+                  onUpdate={(option) => {
+                    const options = [...(component.properties?.options || [])]
+                    options[index]["class"] = (option as UI.IOption).value
+                    updateProperty("options", options, component, onPropertyChange)
+                  }}
+                />
+              {:else}
                 <UI.Input
-                  label={{ name: $T("constructor.props.optionvalue") }}
-                  wrapperClass="min-w-28 flex-1"
-                  value={option.value}
-                  type={currentValueType.value}
-                  number={component.properties.bitMode
-                    ? { minNum: 0, maxNum: Math.pow(2, component.properties.range.end - component.properties.range.start + 1) - 1, step: 1 }
-                    : { minNum: -1000000, maxNum: 1000000, step: 1 }}
+                  value={option.class}
                   onUpdate={(value) => {
                     const options = [...(component.properties?.options || [])]
-                    options[index]["value"] = value
+                    options[index]["class"] = value as string
                     updateProperty("options", options, component, onPropertyChange)
                   }}
                 />
-                {#if forConstructor}
-                  <UI.Select
-                    wrapperClass="min-w-56 flex-[2]"
-                    label={{ name: $T("constructor.props.colors") }}
-                    type="buttons"
-                    options={$optionsStore.COLOR_OPTIONS}
-                    value={findColorOption($optionsStore.COLOR_OPTIONS, option.class)}
-                    onUpdate={(option) => {
-                      const options = [...(component.properties?.options || [])]
-                      options[index]["class"] = (option as UI.IOption).value
-                      updateProperty("options", options, component, onPropertyChange)
-                    }}
-                  />
-                {:else}
-                  <UI.Input
-                    label={{ name: $T("constructor.props.optionclass") }}
-                    wrapperClass="min-w-32 flex-[2]"
-                    value={option.class}
-                    onUpdate={(value) => {
-                      const options = [...(component.properties?.options || [])]
-                      options[index]["class"] = value as string
-                      updateProperty("options", options, component, onPropertyChange)
-                    }}
-                  />
-                {/if}
-              </div>
+              {/if}
               <UI.Button
-                wrapperClass="w-8 shrink-0"
+                wrapperClass="w-8"
                 content={{ icon: ButtonDelete }}
                 onClick={() => {
                   const options = [...(component.properties?.options || [])]

package/dist/Switch/README.md

@@ -56,13 +56,13 @@
 
 #### IOption
 
-| Название   | Тип       | По умолчанию | Описание                                          |
-| ---------- | --------- | ------------ | ------------------------------------------------- |
-| `id`       | `string`  | `-`          | Уникальный идентификатор опции                    |
-| `value`    | `number`  | `undefined`  | Значение опции (номер бита или значение)          |
-| `name`     | `string`  | `undefined`  | Отображаемое имя опции (используется в `bitMode`) |
-| `class`    | `string`  | `undefined`  | CSS-классы для стилизации опции                   |
-| `disabled` | `boolean` | `undefined`  | Состояние отключения опции                        |
+| Название   | Тип       | По умолчанию | Описание                                                                              |
+| ---------- | --------- | ------------ | ------------------------------------------------------------------------------------- |
+| `id`       | `string`  | `-`          | Уникальный идентификатор опции                                                        |
+| `value`    | `number`  | `undefined`  | Значение опции (номер бита или значение)                                              |
+| `name`     | `string`  | `undefined`  | Отображаемое имя опции (используется в `bitMode`, по центру над своим переключателем) |
+| `class`    | `string`  | `undefined`  | CSS-классы для стилизации опции                                                       |
+| `disabled` | `boolean` | `undefined`  | Состояние отключения опции                                                            |
 
 ### Колбэки
 

package/dist/Switch/Switch.svelte

@@ -66,7 +66,7 @@
       {#each localOptions as option, index}
         <div class={twMerge(`flex flex-col gap-1`, option.class)}>
           {#if option.name && bitMode}
-            <span class="text-[12px] font-medium text-(--muted-color)">{option.name}</span>
+            <span class="text-center text-[12px] font-medium text-(--muted-color)">{option.name}</span>
           {/if}
 
           <div class="relative flex w-full grow items-center justify-center bg-transparent">

package/dist/Switch/SwitchProps.svelte

@@ -9,6 +9,7 @@
   import CommonSnippets from "../CommonSnippets.svelte"
   import PropsGroup from "../PropsGroup.svelte"
   import PropsListModal from "../PropsListModal.svelte"
+  import PropsListHeader from "../PropsListHeader.svelte"
 
   const {
     component,
@@ -21,6 +22,8 @@
   }>()
   const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>("DeviceVariables")
   let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
+  /* Колонки строки бита: метка, позиция, цвет, отключение, удаление */
+  const BIT_GRID = "grid-cols-[minmax(4rem,1fr)_minmax(4rem,1fr)_minmax(0,2fr)_auto_2rem]"
   let initialColor = $derived(findColorOption($optionsStore.COLOR_OPTIONS, component.properties.options?.[0]?.class))
   const initialAlign = $derived(
     $optionsStore.TEXT_ALIGN_OPTIONS.find((a) =>
@@ -91,60 +94,58 @@
           {/if}
         {/snippet}
 
+        {#if component.properties.options?.length}
+          <PropsListHeader
+            gridClass={BIT_GRID}
+            captions={[$T("constructor.props.optionname"), $T("constructor.props.optionposition"), $T("constructor.props.colors"), "", ""]}
+          />
+        {/if}
         {#each component.properties.options || [] as option, index (option.id)}
-          <div class="grid grid-cols-[1fr_auto] items-center gap-2 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 p-2">
-            <div class="flex flex-wrap items-end gap-2">
-              <!-- Имя варианта — короткая метка бита (до 4 символов) в битовом режиме, не переводится -->
-              <UI.Input
-                label={{ name: $T("constructor.props.optionname") }}
-                wrapperClass="min-w-24 flex-1"
-                value={option.name}
-                maxlength={4}
-                onUpdate={(value) => {
-                  const options = [...(component.properties?.options || [])]
-                  options[index]["name"] = value
-                  updateProperty("options", options, component, onPropertyChange)
-                }}
-              />
-              <UI.Input
-                label={{ name: $T("constructor.props.optionposition") }}
-                wrapperClass="min-w-24 flex-1"
-                value={option.value}
-                type="number"
-                number={{ minNum: 0, maxNum: 31, step: 1 }}
-                onUpdate={(value) => {
-                  const options = [...(component.properties?.options || [])]
-                  options[index]["value"] = value
-                  updateProperty("options", options, component, onPropertyChange)
-                }}
-              />
-              <UI.Select
-                wrapperClass="min-w-56 flex-[2]"
-                label={{ name: $T("constructor.props.colors") }}
-                type="buttons"
-                options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== "bg-max" && option.value !== "bg-gray")}
-                value={findColorOption($optionsStore.COLOR_OPTIONS, option.class)}
-                onUpdate={(option) => {
-                  const options = [...(component.properties?.options || [])]
-                  options[index]["class"] = (option as UI.IOption).value
-                  updateProperty("options", options, component, onPropertyChange)
-                }}
-              />
-              <UI.Switch
-                wrapperClass="min-w-24 bg-blue"
-                label={{ name: $T("constructor.props.disabled") }}
-                value={option.disabled}
-                options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
-                onChange={(value) => {
-                  const options = [...(component.properties?.options || [])]
-                  options[index]["disabled"] = value
-                  updateProperty("options", options, component, onPropertyChange)
-                }}
-              />
-            </div>
+          <div class="grid {BIT_GRID} items-center gap-3 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 px-2 py-1.5">
+            <!-- Имя варианта — короткая метка бита (до 4 символов) в битовом режиме, не переводится -->
+            <UI.Input
+              value={option.name}
+              maxlength={4}
+              onUpdate={(value) => {
+                const options = [...(component.properties?.options || [])]
+                options[index]["name"] = value
+                updateProperty("options", options, component, onPropertyChange)
+              }}
+            />
+            <UI.Input
+              value={option.value}
+              type="number"
+              number={{ minNum: 0, maxNum: 31, step: 1 }}
+              onUpdate={(value) => {
+                const options = [...(component.properties?.options || [])]
+                options[index]["value"] = value
+                updateProperty("options", options, component, onPropertyChange)
+              }}
+            />
+            <UI.Select
+              type="buttons"
+              options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== "bg-max" && option.value !== "bg-gray")}
+              value={findColorOption($optionsStore.COLOR_OPTIONS, option.class)}
+              onUpdate={(option) => {
+                const options = [...(component.properties?.options || [])]
+                options[index]["class"] = (option as UI.IOption).value
+                updateProperty("options", options, component, onPropertyChange)
+              }}
+            />
+            <UI.Switch
+              wrapperClass="bg-blue"
+              label={{ captionRight: $T("constructor.props.disabled") }}
+              value={option.disabled}
+              options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
+              onChange={(value) => {
+                const options = [...(component.properties?.options || [])]
+                options[index]["disabled"] = value
+                updateProperty("options", options, component, onPropertyChange)
+              }}
+            />
             {#if (component.properties.options?.length ?? 0) > 1}
               <UI.Button
-                wrapperClass="w-8 shrink-0"
+                wrapperClass="w-8"
                 content={{ icon: ButtonDelete }}
                 onClick={() => {
                   const options = [...(component.properties?.options || [])]
@@ -152,6 +153,8 @@
                   updateProperty("options", options, component, onPropertyChange)
                 }}
               />
+            {:else}
+              <span></span>
             {/if}
           </div>
         {/each}

package/dist/Tabs/TabsProps.svelte

@@ -123,9 +123,10 @@
 
         <div bind:this={itemsContainer} class="flex flex-col gap-2">
           {#each component.properties.items || [] as tab, index}
+            <!-- Строка в одну линию: ручка, какая это вкладка, иконка, «Отключить», удаление -->
             <div
               id="item-{index}"
-              class="grid grid-cols-[auto_1fr_auto] items-center gap-2 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 p-2"
+              class="grid grid-cols-[auto_minmax(0,1fr)_auto_auto_auto] items-center gap-3 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 px-2 py-1.5"
             >
               <UI.Dragging
                 wrapperClass="shrink-0"
@@ -136,42 +137,38 @@
                   updateProperty("items", updatedArray, component, onPropertyChange)
                 }}
               />
-              <div class="flex flex-wrap items-end gap-2">
-                <!-- Какая это вкладка: номер и название на текущем языке (название правится в «Тексты и переводы») -->
-                <div class="flex w-full items-baseline gap-2 text-[13px]">
-                  <span class="font-semibold">{$T("constructor.props.tabs.item", { n: index + 1 })}</span>
-                  <span class="truncate text-(--muted-color)">{localizeText(tab.name, $Language) || $T("constructor.props.tabs.untitled")}</span>
-                </div>
-                <div class="relative min-w-32">
-                  <CommonSnippets
-                    snippet="IconsLib"
-                    initialValue={{
-                      name: $T("constructor.props.table.type.icon"),
-                      icon: component.properties.items[index].icon,
-                      updateProperty: (icon: string) => {
-                        const items = [...(component.properties?.items || [])]
-                        items[index]["icon"] = icon as string
-                        updateProperty("items", items, component, onPropertyChange)
-                      },
-                      icons: { array: ICONS },
-                    }}
-                    {component}
-                    {onPropertyChange}
-                  />
-                </div>
-
-                <UI.Switch
-                  wrapperClass="min-w-24"
-                  label={{ name: $T("constructor.props.disabled") }}
-                  value={tab?.disabled ? 1 : 0}
-                  options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
-                  onChange={(value) => {
+              <!-- Номер и название на текущем языке (название правится в «Тексты и переводы») -->
+              <div class="flex min-w-0 items-baseline gap-2 text-[13px]">
+                <span class="shrink-0 font-semibold">{$T("constructor.props.tabs.item", { n: index + 1 })}</span>
+                <span class="truncate text-(--muted-color)">{localizeText(tab.name, $Language) || $T("constructor.props.tabs.untitled")}</span>
+              </div>
+              <CommonSnippets
+                snippet="IconsLib"
+                initialValue={{
+                  name: $T("constructor.props.table.type.icon"),
+                  icon: component.properties.items[index].icon,
+                  updateProperty: (icon: string) => {
                     const items = [...(component.properties?.items || [])]
-                    items[index]["disabled"] = value
+                    items[index]["icon"] = icon as string
                     updateProperty("items", items, component, onPropertyChange)
-                  }}
-                />
-              </div>
+                  },
+                  icons: { array: ICONS },
+                  compact: true,
+                }}
+                {component}
+                {onPropertyChange}
+              />
+              <UI.Switch
+                wrapperClass="w-auto"
+                label={{ captionRight: $T("constructor.props.disabled") }}
+                value={tab?.disabled ? 1 : 0}
+                options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
+                onChange={(value) => {
+                  const items = [...(component.properties?.items || [])]
+                  items[index]["disabled"] = value === 1
+                  updateProperty("items", items, component, onPropertyChange)
+                }}
+              />
               {#if component.properties.items.length > 1}
                 <UI.Button
                   wrapperClass="w-8 shrink-0"

package/dist/dragStyle.d.ts

@@ -1,3 +1,4 @@
 export declare const applyDragGhost: (element: HTMLElement) => void;
 export declare const clearDragGhost: (element?: HTMLElement | null) => void;
+export declare const animateReorder: (elements: Element[], mutate: () => void, duration?: number) => void;
 export declare const createDropPlaceholder: (height: number) => HTMLElement;

package/dist/dragStyle.js

@@ -20,6 +20,29 @@ export const clearDragGhost = (element) => {
             element.style[key] = "";
     document.body.style.cursor = "";
 };
+/*
+  Плавный сдвиг соседей при перестановке (FLIP): запоминаем положение элементов, выполняем перестановку в DOM и анимируем каждый
+  сдвинувшийся элемент из старого положения в новое. При системной настройке «уменьшить движение» — без анимации
+*/
+export const animateReorder = (elements, mutate, duration = 160) => {
+    const reduceMotion = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const before = new Map(elements.map((element) => [element, element.getBoundingClientRect().top]));
+    mutate();
+    if (reduceMotion)
+        return;
+    for (const element of elements) {
+        const node = element;
+        const shift = (before.get(element) ?? 0) - node.getBoundingClientRect().top;
+        if (!shift)
+            continue;
+        node.style.transition = "none";
+        node.style.transform = `translateY(${shift}px)`;
+        void node.offsetHeight; /* Применить стартовое положение до запуска перехода */
+        node.style.transition = `transform ${duration}ms cubic-bezier(0.2, 0, 0, 1)`;
+        node.style.transform = "";
+        node.addEventListener("transitionend", () => (node.style.transition = ""), { once: true });
+    }
+};
 /* Место вставки: заливка мягким акцентом и штриховая рамка акцентом */
 export const createDropPlaceholder = (height) => {
     const placeholder = document.createElement("div");

package/dist/locales/i18n.d.ts

@@ -1,5 +1,5 @@
 import { type Readable } from "svelte/store";
-import { type LanguageCode, type Translations } from "./languages";
+import { type LanguageCode, type Translations } from "./languages.js";
 export declare const Language: import("svelte/store").Writable<string>;
 export declare const getLanguage: () => LanguageCode;
 export declare function restoreLanguage(): void;

package/dist/locales/i18n.js

@@ -1,6 +1,6 @@
 import { derived, get, writable } from "svelte/store";
-import translations from "./translations";
-import { DEFAULT_LANGUAGE, LANGUAGES, isLanguageCode, resolveLanguage } from "./languages";
+import translations from "./translations.js";
+import { DEFAULT_LANGUAGE, LANGUAGES, isLanguageCode, resolveLanguage } from "./languages.js";
 /* Язык и механизм перевода — общие для библиотеки и приложений: приложение берёт отсюда Language/setLanguage/LOCALES и строит свой $T
    из своего словаря через createTranslator (см. README «Языки»); переключение языка одним setLanguage меняет и компоненты, и приложение */
 /*

package/dist/locales/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./languages.js";
+export * from "./i18n.js";
+export * from "./localize.js";

package/dist/locales/index.js

@@ -0,0 +1,6 @@
+/* $lib/locales/index.ts */
+/* Языки и механизм перевода без Svelte-компонентов — точка входа "poe-svelte-ui-lib/locales" для серверного кода, который Node запускает без Vite
+   (tsx: WebSocket-сервер облака); импорты с расширением .js, чтобы их разрешал сам Node */
+export * from "./languages.js";
+export * from "./i18n.js";
+export * from "./localize.js";

package/dist/locales/localize.d.ts

@@ -1,4 +1,4 @@
-import { type LanguageCode } from "./languages";
+import { type LanguageCode } from "./languages.js";
 export type LocalizedText = string | Partial<Record<LanguageCode, string>>;
 export declare const isLocalizedText: (value: unknown) => value is Partial<Record<LanguageCode, string>>;
 export declare const localizeText: (value: LocalizedText | undefined, lang: string) => string;

package/dist/locales/localize.js

@@ -1,7 +1,7 @@
 /* $lib/locales/localize.ts */
 /* Многоязычные тексты, введённые в конструкторе: строка (язык по умолчанию) или объект по кодам языков { ru, en, zh, ... };
    язык по умолчанию (DEFAULT_LANGUAGE) — основной и запасной; набор и порядок языков — LANGUAGES (languages.ts) */
-import { DEFAULT_LANGUAGE, LANGUAGE_CODES } from "./languages";
+import { DEFAULT_LANGUAGE, LANGUAGE_CODES } from "./languages.js";
 /* Ключ многоязычного текста: код языка из LANGUAGES или похожий на код (ru, en, pt-BR) — данные с языком, убранным из списка, не ломаются */
 const LANGUAGE_KEY = /^[a-z]{2,3}(-[A-Z]{2})?$/;
 /* Поля свойств, которые считаются текстом для пользователя — их показывает и правит окно «Тексты и переводы» (TextsEditor) */

package/dist/locales/translations.d.ts

@@ -1,3 +1,3 @@
-import type { Translations } from "./languages";
+import type { Translations } from "./languages.js";
 declare const translations: Translations;
 export default translations;

package/dist/locales/translations.js

@@ -306,10 +306,14 @@ const translations = {
     "constructor.props.bits.title": { ru: "Биты", en: "Bits", zh: "位" },
     "constructor.props.tabs.title": { ru: "Вкладки", en: "Tabs", zh: "标签页" },
     "constructor.props.tabs.item": { ru: "Вкладка {n}", en: "Tab {n}", zh: "标签页 {n}" },
+    "constructor.props.options.item": { ru: "Вариант {n}", en: "Option {n}", zh: "选项 {n}" },
+    "constructor.props.progressbar.item": { ru: "Шкала {n}", en: "Bar {n}", zh: "进度条 {n}" },
+    "constructor.props.periodchart.item": { ru: "Уровень {n}", en: "Level {n}", zh: "层级 {n}" },
+    "constructor.props.item": { ru: "Элемент", en: "Item", zh: "项目" },
     "constructor.props.tabs.untitled": { ru: "без названия", en: "untitled", zh: "未命名" },
     "constructor.props.periodchart.title": { ru: "Уровни детализации", en: "Detail levels", zh: "详细级别" },
-    "constructor.props.periodchart.data": { ru: "Данные (через пробел)", en: "Data (comma-separated)", zh: "数据（逗号分隔）" },
-    "constructor.props.periodchart.labels": { ru: "Подписи столбиков (через пробел)", en: "Bar labels (comma-separated)", zh: "柱标签（逗号分隔）" },
+    "constructor.props.periodchart.data": { ru: "Данные (через запятую)", en: "Data (comma-separated)", zh: "数据（逗号分隔）" },
+    "constructor.props.periodchart.labels": { ru: "Подписи столбиков (через запятую)", en: "Bar labels (comma-separated)", zh: "柱标签（逗号分隔）" },
     "constructor.props.valuetype": { ru: "Тип значения", en: "Value type", zh: "值类型" },
     "constructor.props.action": { ru: "Действие при переключении", en: "Action on switch", zh: "切换时的操作" },
     "constructor.props.bold": { ru: "Жирный", en: "Bold", zh: "粗体" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.50.0",
+  "version": "1.52.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Oleg-Perevyshin/ElementsUI.git"
@@ -24,6 +24,10 @@
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"
     },
+    "./locales": {
+      "types": "./dist/locales/index.d.ts",
+      "default": "./dist/locales/index.js"
+    },
     "./theme.css": "./dist/theme.css"
   },
   "files": [