poe-svelte-ui-lib 1.49.0 → 1.51.0

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

@@ -72,3 +72,13 @@
 - При единственном элементе в `array` (`array.length == 1`) ручка визуально приглушена (`opacity-50`) и перетаскивание не запускается
 - Работает только с `MouseEvent` — нет отдельной поддержки touch/pointer-событий и клавиатурной перестановки (ручка фокусируема как `role="button"`, но `onkeydown` не обрабатывается — известное ограничение доступности)
 - `container`/`elementIndex`/`array` обязательны — компонент не проверяет их наличие и упадёт при обращении к `array.length` в классе, если `array` не передан
+
+## Вид перетаскивания
+
+Один на библиотеку и приложения — `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,6 +2,7 @@
   import { tick } from "svelte"
   import MoveVerticalIcon from "./libIcons/MoveVerticalIcon.svelte"
   import { twMerge } from "tailwind-merge"
+  import { animateReorder, applyDragGhost, clearDragGhost, createDropPlaceholder } from "./dragStyle"
 
   let dragState = $state({
     isDragging: false,
@@ -48,24 +49,19 @@
     const element = movedElement.cloneNode(true) as HTMLElement
     const rect = movedElement.getBoundingClientRect()
 
-    /* Создаем визуальный эффект перетаскивания */
+    /* Визуальный эффект перетаскивания — общий для библиотеки и приложений (dragStyle.ts) */
     element.id = "drag-element"
     element.style.position = "fixed"
     element.style.zIndex = "9999"
     element.style.minHeight = `${rect.height}px`
     element.style.pointerEvents = "none"
     element.style.width = `${rect.width}px`
-    element.style.background = "var(--field-color)"
-    element.style.padding = "0.25rem"
-    element.style.borderRadius = "1rem"
+    element.style.left = `${rect.left}px`
     element.style.top = `${rect.top}px`
+    applyDragGhost(element)
     movedElement.parentNode?.appendChild(element)
 
-    const placeholder = document.createElement("div")
-    placeholder.style.minHeight = `${rect.height}px`
-    placeholder.style.width = "100%"
-    placeholder.style.border = "2px dashed var(--blue-color)"
-    placeholder.style.borderRadius = "1rem"
+    const placeholder = createDropPlaceholder(rect.height)
     element.parentNode?.insertBefore(placeholder, movedElement)
 
     const [movedItem] = array.splice(elementIndex, 1)
@@ -97,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))
     }
   }
 
@@ -127,6 +134,7 @@
 
     if (dragState.placeholderElement) dragState.placeholderElement.remove()
     if (dragState.ghostElement) dragState.ghostElement.remove()
+    clearDragGhost()
 
     dragState = {
       isDragging: false,

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

@@ -0,0 +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

@@ -0,0 +1,58 @@
+/* $lib/dragStyle.ts — единый вид перетаскивания для библиотеки и приложений (списки Dragging, холст конструктора DevCloud):
+   перетаскиваемый элемент — фон с заметным оттенком акцента, рамка акцентом и тень; место вставки — заливка мягким акцентом со штриховой рамкой */
+const GHOST_STYLE = {
+    background: "color-mix(in srgb, var(--accent-color) 30%, var(--back-color))",
+    outline: "2px solid var(--accent-color)",
+    outlineOffset: "-2px",
+    boxShadow: "var(--elevation-3)",
+    borderRadius: "12px",
+    opacity: "1",
+};
+/* Оформить перетаскиваемый элемент; курсор «захват» — на всё время перетаскивания */
+export const applyDragGhost = (element) => {
+    Object.assign(element.style, GHOST_STYLE);
+    document.body.style.cursor = "grabbing";
+};
+/* Снять оформление перетаскивания с элемента (если он остаётся на странице) и вернуть курсор */
+export const clearDragGhost = (element) => {
+    if (element)
+        for (const key of Object.keys(GHOST_STYLE))
+            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");
+    Object.assign(placeholder.style, {
+        minHeight: `${height}px`,
+        width: "100%",
+        background: "var(--accent-soft)",
+        border: "2px dashed var(--accent-color)",
+        borderRadius: "12px",
+        boxSizing: "border-box",
+    });
+    return placeholder;
+};

package/dist/index.d.ts

@@ -54,5 +54,6 @@ export * from "./locales/i18n";
 export * from "./locales/languages";
 export * from "./locales/localize";
 export { widgetAccentStyle } from "./widgetAccent";
+export { applyDragGhost, clearDragGhost, createDropPlaceholder } from "./dragStyle";
 export * from "./ModalStackStore";
 export { type UIComponent, type Position, type IUIComponentHandler, type IButtonProps, type IAccordionProps, type IInputProps, type ISelectProps, type IOption, type ISwitchProps, type IDividerProps, type ISliderProps, type ITextFieldProps, type IProgressBarProps, type IWidgetProps, type IWidgetWiFiProps, type IWidgetWiFiConfig, type IWidgetDeviceInfoProps, type IWidgetDeviceInfoConfig, type IWidgetFileSystemProps, type IWidgetFileSystemInfo, type IWidgetFileSystemFile, type IWidgetFileSystemUpload, type IWidgetStackInfoProps, type IWidgetStackInfo, type IWidgetStackInfoHeap, type IWidgetStackInfoTask, type IWidgetRGBStripProps, type IWidgetRGBStripConfig, type IWidgetPFDProps, type IWidgetPFDData, type IWidgetPFDLimits, type IWidgetMapProps, type IWidgetMapData, type IGraphProps, type IGraphDataObject, type IGraphHistoryPoint, type IGraphHistorySeries, type ITableHeader, type ITableText, type ITableSelect, type ITableButton, type ITableProgressBar, type ITableImage, type ITableContent, type ITableProps, type ITabsProps, type IJoystickProps, type IFileAttachProps, type ICarouselProps, type IReceivingDataObject, type IVideoViewerProps, type IPeriodChartProps, type IPeriodChartLevel, } from "./types";

package/dist/index.js

@@ -55,5 +55,6 @@ export * from "./locales/i18n";
 export * from "./locales/languages";
 export * from "./locales/localize";
 export { widgetAccentStyle } from "./widgetAccent";
+export { applyDragGhost, clearDragGhost, createDropPlaceholder } from "./dragStyle";
 export * from "./ModalStackStore";
 export {} from "./types";

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.49.0",
+  "version": "1.51.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Oleg-Perevyshin/ElementsUI.git"