poe-svelte-ui-lib 1.87.0 → 1.89.0

package/README.md

@@ -74,7 +74,7 @@ npm install poe-svelte-ui-lib
 |---|---|
 | `component` | Компонент интерфейса и его свойства |
 | `onPropertyChange` | Сообщает об изменении свойств, имени, доступа или события |
-| `forConstructor` | `true` — полная панель конструктора, `false` — упрощённая для редактирования |
+| `forConstructor` | `true` - полная панель конструктора, `false` - упрощённая для редактирования |
 
 ## Протоколы
 

package/dist/Accordion/Accordion.svelte

@@ -1,4 +1,4 @@
-<!-- $lib/Accordion/Accordion.svelte — заголовок не увеличивается при раскрытии, радиус 14. Мастер-цвет (componentClass) — как у смарт-виджетов: иконка и текст заголовка цветом, фон заголовка — его мягким оттенком. -->
+<!-- $lib/Accordion/Accordion.svelte - заголовок не увеличивается при раскрытии, радиус 14. Мастер-цвет (componentClass) - как у смарт-виджетов: иконка и текст заголовка цветом, фон заголовка - его мягким оттенком. -->
 <script lang="ts">
   import { slide } from "svelte/transition"
   import type { IAccordionProps } from "../types"
@@ -26,7 +26,7 @@
   transition:slide={{ duration: 200 }}
 >
   <div class="overflow-hidden rounded-[14px] border border-(--hairline-color) bg-(--back-color)">
-    <!-- Фон заголовка — мягкий оттенок мастер-цвета (светлый в светлой теме, тёмный в тёмной), текст — мастер-цвет с цветом шрифта 60/40, раскрытое содержимое остаётся на чистом фоне (--back-color). -->
+    <!-- Фон заголовка - мягкий оттенок мастер-цвета (светлый в светлой теме, тёмный в тёмной), текст - мастер-цвет с цветом шрифта 60/40, раскрытое содержимое остаётся на чистом фоне (--back-color). -->
     <button
       class="flex w-full cursor-pointer items-center justify-between gap-3 bg-(--accent-soft) px-4 py-3 text-left text-[color-mix(in_srgb,var(--accent-color)_60%,var(--font-color))] transition-colors duration-150 hover:bg-[color-mix(in_srgb,var(--accent-color)_12%,var(--accent-soft))]"
       onclick={toggle}

package/dist/Accordion/README.md

@@ -26,7 +26,7 @@
 | `id` | `string` | `crypto.randomUUID()` | Идентификатор |
 | `isOpen` | `boolean` | `false` | Открыт ли. Можно связать через `bind:isOpen` |
 | `wrapperClass` | `string` | `""` | Классы обёртки |
-| `componentClass` | `string` | `""` | Мастер-цвет: `bg-red`, `bg-green` и другие из `COLOR_OPTIONS`. Пусто — акцент темы |
+| `componentClass` | `string` | `""` | Мастер-цвет: `bg-red`, `bg-green` и другие из `COLOR_OPTIONS`. Пусто - акцент темы |
 | `size` | `{ width, height }` | `1 × 1` | Сетка содержимого: колонки и строки |
 | `label.name` | `string` | `""` | Заголовок |
 | `label.class` | `string` | `"text-left"` | Классы текста заголовка |

package/dist/Button/Button.svelte

@@ -1,4 +1,4 @@
-<!-- $lib/Button/Button.svelte — кнопка: роль по значению bg-*, радиус 10px (иконка без подписи — круг), высота 32px, кольцо фокуса, иконка в потоке через flex + gap -->
+<!-- $lib/Button/Button.svelte - кнопка: роль по значению bg-*, радиус 10px (иконка без подписи - круг), высота 32px, кольцо фокуса, иконка в потоке через flex + gap -->
 <script lang="ts">
   import { onMount } from "svelte"
   import type { IButtonProps } from "../types"
@@ -39,7 +39,7 @@
 
   const isIconOnly = $derived(!!content?.icon && !content.name?.trim())
 
-  /* bg-(--bg-color) намеренно не входит в roleClass: он приклеивается к готовому className вне twMerge (см. разметку ниже) — иначе twMerge видит его и явный bg-* из componentClass (bg-red, bg-max…) как конфликтующие утилиты одной группы и вырезает один из них, из-за чего заливка кнопки пропадает. */
+  /* bg-(--bg-color) намеренно не входит в roleClass: он приклеивается к готовому className вне twMerge (см. разметку ниже) - иначе twMerge видит его и явный bg-* из componentClass (bg-red, bg-max…) как конфликтующие утилиты одной группы и вырезает один из них, из-за чего заливка кнопки пропадает. */
   const roleBg = $derived.by(() => {
     if (disabled) return "bg-(--gray-color)"
     if (role === "plain") return "bg-transparent"

package/dist/Button/ButtonProps.svelte

@@ -23,7 +23,7 @@
     forConstructor?: boolean
   } = $props()
 
-  /* Argument пуст — поле ниже лишь визуально показывает "ModCfg", реальное значение нужно проставить в состояние */
+  /* Argument пуст - поле ниже лишь визуально показывает "ModCfg", реальное значение нужно проставить в состояние */
   $effect(() => {
     if (!component.eventHandler?.Argument) onPropertyChange({ eventHandler: { Argument: "ModCfg" } })
   })

package/dist/Button/README.md

@@ -65,4 +65,4 @@
 |---|---|---|
 | `component` | `UIComponent & { properties: Partial<IButtonProps> }` | Компонент и его свойства |
 | `onPropertyChange` | `(updates) => void` | Сообщает об изменении свойств |
-| `forConstructor` | `boolean` | `true` — полная панель конструктора, `false` — упрощённая для редактирования |
+| `forConstructor` | `boolean` | `true` - полная панель конструктора, `false` - упрощённая для редактирования |

package/dist/CommonSnippets.svelte

@@ -53,7 +53,8 @@
     onUpdate={(value) => {
       updateProperty("id", (value as UI.IOption).value as string, component, onPropertyChange)
       onPropertyChange({
-        name: (value as UI.IOption).name?.split("—")[1]?.trim(),
+        /* \u041f\u043e\u0434\u043f\u0438\u0441\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0438\u0437 \u043e\u0431\u043b\u0430\u043a\u0430 \u00ab<id> - <\u0438\u043c\u044f>\u00bb: \u0438\u043c\u044f - \u0432\u0441\u0451 \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u044f; \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0438 \u0434\u043b\u0438\u043d\u043d\u043e\u0435 \u0442\u0438\u0440\u0435 (\u2014) \u0441\u0442\u0430\u0440\u044b\u0445 \u043f\u043e\u0434\u043f\u0438\u0441\u0435\u0439 */
+        name: (value as UI.IOption).name?.match(/\s[\u2014-]\s(.*)/)?.[1]?.trim(),
         eventHandler: { Variables: [(value as UI.IOption).value as string] },
       })
     }}
@@ -238,7 +239,7 @@
   icons: { array: [string, string[]][]; selectArray?: false }
   icon: string | string[]
   updateProperty: (icon: string | string[]) => {}
-  /* compact — для строк списков в одну линию: квадратная кнопка с текущей иконкой и подсказкой вместо кнопки с текстом */
+  /* compact - для строк списков в одну линию: квадратная кнопка с текущей иконкой и подсказкой вместо кнопки с текстом */
   compact?: boolean
 })}
   <div class={initialValue.compact ? "relative flex shrink-0 items-center gap-1" : "relative mt-6 flex w-full gap-2"}>

package/dist/CopiedChip.svelte

@@ -1,4 +1,4 @@
-<!-- $lib/CopiedChip.svelte — общая всплывающая метка «Скопировано» после клика на кнопку копирования -->
+<!-- $lib/CopiedChip.svelte - общая всплывающая метка «Скопировано» после клика на кнопку копирования -->
 <script lang="ts">
   import { T } from "./locales/i18n"
   import { fade } from "svelte/transition"

package/dist/Divider/Divider.svelte

@@ -1,4 +1,4 @@
-<!-- $lib/Divider/Divider.svelte — волосяная линия вместо скруглённой полосы 2px. -->
+<!-- $lib/Divider/Divider.svelte - волосяная линия вместо скруглённой полосы 2px. -->
 <script lang="ts">
   import { twMerge } from "tailwind-merge"
   import type { IDividerProps } from "../types"

package/dist/Divider/README.md

@@ -25,7 +25,7 @@
 | `wrapperClass` | `string` | `""` | Классы обёртки |
 | `type` | `"line" \| "empty"` | `"line"` | Линия или пустой отступ |
 | `width` | `number` | `1` | Толщина линии, пикселей |
-| `color` | `string` | `""` | Цвет: `bg-max`, `bg-red`, `bg-yellow`, `bg-green`, `bg-blue`, `bg-purple`, `bg-gray`. Пусто — нейтральный |
+| `color` | `string` | `""` | Цвет: `bg-max`, `bg-red`, `bg-yellow`, `bg-green`, `bg-blue`, `bg-purple`, `bg-gray`. Пусто - нейтральный |
 | `anchor` | `"top" \| "center" \| "bottom"` | `"center"` | Где стоит линия по высоте |
 
 Колбэков нет.

package/dist/Dragging.svelte

@@ -39,7 +39,7 @@
 
   /* Перетаскивание с MouseEvent */
   const startDrag = async (e: MouseEvent) => {
-    /* Строка ищется только внутри своего списка — id вида item-N есть и у других списков на странице */
+    /* Строка ищется только внутри своего списка - id вида item-N есть и у других списков на странице */
     const movedElement = container.querySelector(
       containerIndex == null ? `#${elementsId}-${elementIndex}` : `#${elementsId}-${elementIndex}-${containerIndex}`,
     ) as HTMLElement
@@ -49,7 +49,7 @@
     const element = movedElement.cloneNode(true) as HTMLElement
     const rect = movedElement.getBoundingClientRect()
 
-    /* Визуальный эффект перетаскивания — общий для библиотеки и приложений (dragStyle.ts) */
+    /* Визуальный эффект перетаскивания - общий для библиотеки и приложений (dragStyle.ts) */
     element.id = "drag-element"
     element.style.position = "fixed"
     element.style.zIndex = "9999"
@@ -93,7 +93,7 @@
     const ghost = dragState.ghostElement
     ghost.style.top = `${e.clientY - dragState.offsetY}px`
 
-    /* Место вставки — перед первой строкой, середина которой ниже курсора (иначе — в конец): меняется только при пересечении середины строки, без дрожания на границах. Соседние строки сдвигаются плавно (animateReorder) */
+    /* Место вставки - перед первой строкой, середина которой ниже курсора (иначе - в конец): меняется только при пересечении середины строки, без дрожания на границах. Соседние строки сдвигаются плавно (animateReorder) */
     const items = commandItems.filter((item) =>
       dragState.containerIndex === null ? true : Number(item.id.split("-")[2]) === dragState.containerIndex,
     ) as HTMLElement[]
@@ -101,7 +101,7 @@
     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) {

package/dist/FileAttach/FileAttach.svelte

@@ -4,7 +4,7 @@
   import { twMerge } from "tailwind-merge"
   import Button from "../Button/Button.svelte"
 
-  /* Иконка «открыть файл» для type "button" — документ со стрелкой вверх, контур 1.75 как у остальных кнопок */
+  /* Иконка «открыть файл» для type "button" - документ со стрелкой вверх, контур 1.75 как у остальных кнопок */
   const OPEN_FILE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/><path d="M12 18v-6"/><path d="m9 15 3-3 3 3"/></svg>`
 
   let {
@@ -49,7 +49,7 @@
     }
 
     onChange(event, file)
-    /* Кнопка «Открыть файл» — повторный выбор того же файла тоже должен срабатывать */
+    /* Кнопка «Открыть файл» - повторный выбор того же файла тоже должен срабатывать */
     if (type === "button") input.value = ""
   }
 
@@ -59,14 +59,14 @@
   }
 </script>
 
-<!-- По design-handoff (раздел 9): зона сброса — пунктир 1 px с радиусом 12 вместо залитой кнопки, высота как у Input; «Выбрать файл» — акцентный текст, имя файла — обычным цветом, пока не выбрано — бледным. -->
+<!-- По design-handoff (раздел 9): зона сброса - пунктир 1 px с радиусом 12 вместо залитой кнопки, высота как у Input; «Выбрать файл» - акцентный текст, имя файла - обычным цветом, пока не выбрано - бледным. -->
 <div class={twMerge(`flex flex-col items-center gap-1`, wrapperClass)}>
   {#if label.name}
     <span class={twMerge(`w-full text-[12px] font-semibold text-(--muted-color)`, label.class)}>{label.name}</span>
   {/if}
 
   {#if type === "button"}
-    <!-- Иконочная кнопка с подсказкой, как UI.Button; выбор файла — скрытый input за ней -->
+    <!-- Иконочная кнопка с подсказкой, как UI.Button; выбор файла - скрытый input за ней -->
     <Button {componentClass} {disabled} content={{ icon: icon ?? OPEN_FILE_ICON, info }} onClick={triggerFileInput} />
     <input id={ID} type="file" class="hidden" {accept} {disabled} onchange={handleFileChange} />
   {:else if type === "image"}

package/dist/Graph/Graph.svelte

@@ -2,7 +2,7 @@
 <script module lang="ts">
   import type { IOption } from "../types"
 
-  /* Константы и настройки — экспортируются для переиспользования в GraphProps.svelte (редактор конструктора) */
+  /* Константы и настройки - экспортируются для переиспользования в GraphProps.svelte (редактор конструктора) */
   export const REFRESH_OPTIONS: IOption[] = [
     { id: "RefreshOption-AUTO", name: "AUTO", value: 0, class: "" },
     { id: "RefreshOption-50", name: "50", value: 50, class: "" },
@@ -72,7 +72,7 @@
     }
   }
 
-  /* Тултип при наведении — время и значения всех серий в ближайшей к курсору точке */
+  /* Тултип при наведении - время и значения всех серий в ближайшей к курсору точке */
   let tooltip = $state<{ visible: boolean; x: number; y: number; time: number; items: { name: string; value: number; color: string }[] }>({
     visible: false,
     x: 0,
@@ -155,7 +155,7 @@
         drawAllGraphs()
       }, selectedRefreshRate)
     } else if (selectedRefreshRate == 0 && !isTest) {
-      /* AUTO: streamingData не несёт признак "новый пакет" — опрашиваем каждые 10мс, рисуем точку только при реальном изменении значений */
+      /* AUTO: streamingData не несёт признак "новый пакет" - опрашиваем каждые 10мс, рисуем точку только при реальном изменении значений */
       intervalId = setInterval(() => {
         if (!streamingData.data || streamingData.data.length === 0) return
         const newValues = (streamingData.data as IGraphDataObject[]).map((dataset) => dataset.value)
@@ -198,7 +198,7 @@
     return () => resizeObserver.disconnect()
   })
 
-  /* Общая геометрия осей — переиспользуется отрисовкой и обработчиком наведения мыши, чтобы не дублировать формулы */
+  /* Общая геометрия осей - переиспользуется отрисовкой и обработчиком наведения мыши, чтобы не дублировать формулы */
   const computeGeometry = () => {
     const padding = { top: 10, right: 10, bottom: 20, left: 35 }
     const graphWidth = width - padding.left - padding.right
@@ -209,7 +209,7 @@
     const maxX = allPoints.length ? Math.max(...allPoints.map((p) => p.x)) : 1
     const timeSpan = maxX - minX || 1
 
-    /* Авто-масштаб по данным (±10%): статический — разово по массиву, живой — через сглаженный liveYRange (updateLiveYRange) */
+    /* Авто-масштаб по данным (±10%): статический - разово по массиву, живой - через сглаженный liveYRange (updateLiveYRange) */
     let yMin: number
     let yMax: number
     if (isHistoryMode) {
@@ -230,7 +230,7 @@
     return { padding, graphWidth, graphHeight, minX, maxX, timeSpan, yMin, yMax, ySpan, getX, getY }
   }
 
-  /* Бинарный поиск ближайшей по времени точки — точки в graphData всегда отсортированы по x (по построению) */
+  /* Бинарный поиск ближайшей по времени точки - точки в graphData всегда отсортированы по x (по построению) */
   const findNearestPoint = (points: { x: number; y: number }[], t: number): { x: number; y: number } | null => {
     if (points.length === 0) return null
     let lo = 0
@@ -246,7 +246,7 @@
 
   const pad2 = (n: number) => String(n).padStart(2, "0")
 
-  /* Компактная адаптивная подпись сетки по оси X: относительное время для живого режима, дата/время — для статического */
+  /* Компактная адаптивная подпись сетки по оси X: относительное время для живого режима, дата/время - для статического */
   const formatAxisLabel = (t: number, spanMs: number): string => {
     if (!isHistoryMode) return `${((t - Date.now()) / 1000).toFixed(0)}s`
     const d = new Date(t)
@@ -302,7 +302,7 @@
     drawAllGraphs()
   }
 
-  /* Прозрачность линий сетки — общая с PeriodChart (border-(--faint-color)/40) */
+  /* Прозрачность линий сетки - общая с PeriodChart (border-(--faint-color)/40) */
   const GRID_ALPHA = 0.4
 
   const drawAllGraphs = () => {
@@ -390,7 +390,7 @@
   {/if}
 
   <div class="flex w-full min-w-0 flex-row gap-4">
-    <!-- График: холст абсолютно поверх контейнера — его пиксельная ширина не распирает контейнер, иначе в сетке/flex с 1fr ширина растёт по кругу (ResizeObserver) -->
+    <!-- График: холст абсолютно поверх контейнера - его пиксельная ширина не распирает контейнер, иначе в сетке/flex с 1fr ширина растёт по кругу (ResizeObserver) -->
     <!-- design-handoff, раздел 9: рамка --hairline-color без тени, тултип в оформлении общего Tooltip.svelte -->
     <div bind:this={container} class="relative h-64 min-w-0 grow overflow-hidden rounded-[14px] border border-(--hairline-color)">
       <canvas class="absolute inset-0 h-full w-full bg-(--back-color)" bind:this={canvas} onmousemove={handleMouseMove} onmouseleave={handleMouseLeave}
@@ -425,7 +425,7 @@
         />
       {/if}
 
-      <!-- Переменные и их значение: сетка, а не таблица — имя обрезается «…», значение не переносится -->
+      <!-- Переменные и их значение: сетка, а не таблица - имя обрезается «…», значение не переносится -->
       <div class="flex flex-col gap-1">
         <h5 class="text-[12px] font-semibold text-(--muted-color)">{$T("ui.graph.values")}</h5>
         <div class="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-2 gap-y-1 text-[13px]">

package/dist/Graph/README.md

@@ -45,7 +45,7 @@
 | `wrapperClass` | `string` | `""` | Классы обёртки |
 | `label.name`, `label.class` | `string` | `""` | Заголовок и его классы |
 | `streamingData.data` | `{ name, value }[] \| null` | `[]` | Текущие значения линий для живого режима |
-| `refreshRate` | `number` | `0` | Период добавления точек, мс. `0` — по изменению значений |
+| `refreshRate` | `number` | `0` | Период добавления точек, мс. `0` - по изменению значений |
 | `historyData` | `{ name, points: { value, timestamp }[] }[]` | `[]` | Готовый ряд для статического режима. `timestamp` в миллисекундах, как `Date.now()` |
 | `isTest` | `boolean` | `false` | Режим имитации: случайные данные, точка каждые 50 мс |
 

package/dist/Input/Input.svelte

@@ -1,4 +1,4 @@
-<!-- $lib/Input/Input.svelte — радиус 10, высота 32 (h-8), выравнивание по левому краю, кольцо фокуса. -->
+<!-- $lib/Input/Input.svelte - радиус 10, высота 32 (h-8), выравнивание по левому краю, кольцо фокуса. -->
 <script lang="ts">
   import { T } from "../locales/i18n"
   import type { IInputProps } from "../types"
@@ -86,7 +86,7 @@
 
 <div class={twMerge(`relative flex w-full flex-col gap-1 ${type === "text-area" ? "h-full" : ""}`, wrapperClass)}>
   {#if label.name}
-    <!-- Метка слева, 12/600 — вместо центрированного h5 -->
+    <!-- Метка слева, 12/600 - вместо центрированного h5 -->
     <span class={twMerge(`text-[12px] font-semibold text-(--muted-color)`, label.class)}>{label.name}</span>
   {/if}
 

package/dist/Input/InputProps.svelte

@@ -33,14 +33,14 @@
   const initialAlign = $derived(findOptionByClass($optionsStore.TEXT_ALIGN_OPTIONS, component.properties.label?.class, "text-"))
 
   /* Обновление свойства */
-  /* Подсказка битового режима «Максимальное число: N» сразу на всех языках — иначе записалась бы на языке интерфейса конструктора */
+  /* Подсказка битового режима «Максимальное число: N» сразу на всех языках - иначе записалась бы на языке интерфейса конструктора */
   const maxNumInfo = (range: { start: number; end: number }) => {
     const max = Math.pow(2, range.end - range.start + 1) - 1
     const row = translations["constructor.props.maxnum"]
     return Object.fromEntries(LANGUAGE_CODES.map((lang) => [lang, `${row[lang] || row[DEFAULT_LANGUAGE]}: ${max}`]))
   }
 
-  /* Диапазон битов поля bitMode; без range в свойствах — один нулевой бит */
+  /* Диапазон битов поля bitMode; без range в свойствах - один нулевой бит */
   const bitRange = $derived(component.properties.range ?? { start: 0, end: 0 })
 
   const updateProperty = (path: string, value: string | object | boolean | number | RegExp) => {
@@ -105,7 +105,11 @@
     value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
     onUpdate={(value) => {
       updateProperty("id", (value as IOption).value as string)
-      onPropertyChange({ name: (value as IOption).name?.split("—")[1]?.trim(), eventHandler: { Variables: [(value as IOption).value as string] } })
+      /* \u041f\u043e\u0434\u043f\u0438\u0441\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0438\u0437 \u043e\u0431\u043b\u0430\u043a\u0430 \u00ab<id> - <\u0438\u043c\u044f>\u00bb: \u0438\u043c\u044f - \u0432\u0441\u0451 \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u044f; \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0438 \u0434\u043b\u0438\u043d\u043d\u043e\u0435 \u0442\u0438\u0440\u0435 (\u2014) \u0441\u0442\u0430\u0440\u044b\u0445 \u043f\u043e\u0434\u043f\u0438\u0441\u0435\u0439 */
+      onPropertyChange({
+        name: (value as IOption).name?.match(/\s[\u2014-]\s(.*)/)?.[1]?.trim(),
+        eventHandler: { Variables: [(value as IOption).value as string] },
+      })
     }}
   />
 {/snippet}

package/dist/Joystick/Joystick.svelte

@@ -202,7 +202,7 @@
         </div>
       </div>
 
-      <!-- Кнопка 0 — 32 px по общему правилу кнопок-иконок (design-handoff, раздел 9) -->
+      <!-- Кнопка 0 - 32 px по общему правилу кнопок-иконок (design-handoff, раздел 9) -->
       <div class="absolute {label.name ? 'top-4' : 'top-0'} w-55 flex items-center justify-end">
         <button
           class="flex size-[32px] cursor-pointer items-center justify-center rounded-full border border-(--hairline-color) bg-(--back-color) p-0.5 text-[15px] font-semibold

package/dist/Modal.svelte

@@ -1,4 +1,4 @@
-<!-- $lib/Modal.svelte — модальное окно: радиус 20, шапка и подвал через линии, подложка 40% с размытием, стек окон, закрытие по Escape и клику вне окна -->
+<!-- $lib/Modal.svelte - модальное окно: радиус 20, шапка и подвал через линии, подложка 40% с размытием, стек окон, закрытие по Escape и клику вне окна -->
 <script lang="ts">
   import { T } from "./locales/i18n"
   import { type Snippet } from "svelte"
@@ -104,7 +104,7 @@
       </div>
 
       {#if footer}
-        <!-- Подтверждающее действие — крайнее справа; row-reverse сохранён, поэтому порядок сниппетов в вызовах менять не нужно -->
+        <!-- Подтверждающее действие - крайнее справа; row-reverse сохранён, поэтому порядок сниппетов в вызовах менять не нужно -->
         <div class="flex flex-row-reverse items-center justify-start gap-2 border-t border-(--hairline-color) bg-(--container-color) px-5 py-3">
           {@render footer?.()}
         </div>

package/dist/PeriodChart/PeriodChart.svelte

@@ -1,10 +1,10 @@
-<!-- $lib/PeriodChart/PeriodChart.svelte — столбики за период и сегментированный переключатель периода, акцент только у выбранного -->
+<!-- $lib/PeriodChart/PeriodChart.svelte - столбики за период и сегментированный переключатель периода, акцент только у выбранного -->
 <script module lang="ts">
   import type { IPeriodChartLevel } from "../types"
 
   const randomLevelData = (n: number) => Array.from({ length: n }, () => Math.round(Math.random() * 100))
 
-  /* Демо-уровни, когда levels не заданы; name — ключ перевода */
+  /* Демо-уровни, когда levels не заданы; name - ключ перевода */
   export const DEFAULT_LEVELS: IPeriodChartLevel[] = [
     { name: "ui.period.year", data: randomLevelData(12) },
     { name: "ui.period.month", data: randomLevelData(31) },
@@ -51,7 +51,7 @@
     return { step, top: step * count, ticks: Array.from({ length: count + 1 }, (_, i) => step * (count - i)) }
   })
 
-  /* Подпись деления: k/M для больших значений, число знаков после запятой — по величине шага */
+  /* Подпись деления: k/M для больших значений, число знаков после запятой - по величине шага */
   const formatTick = (v: number) => {
     const [div, suffix] = axis.top >= 1e6 ? [1e6, "M"] : axis.top >= 1e4 ? [1e3, "k"] : [1, ""]
     const step = axis.step / div

package/dist/PeriodChart/PeriodChartProps.svelte

@@ -47,7 +47,7 @@
       .filter((s) => s.length > 0)
   const formatStrings = (arr: string[] | undefined): string => (arr || []).join(", ")
 
-  /* eventHandler.Variables — список всех PWR.*-переменных со всех уровней, чтобы рантайм подписался на них разом */
+  /* eventHandler.Variables - список всех PWR.*-переменных со всех уровней, чтобы рантайм подписался на них разом */
   const updateLevels = (levels: IPeriodChartLevel[]) => {
     updateProperty("levels", levels, component, onPropertyChange)
     onPropertyChange({ eventHandler: { Variables: levels.map((l) => l.variable).filter((v): v is string => !!v) } })

package/dist/ProgressBar/ProgressBar.svelte

@@ -1,4 +1,4 @@
-<!-- $lib/ProgressBar/ProgressBar.svelte — полоса 6px, подпись и значение над ней -->
+<!-- $lib/ProgressBar/ProgressBar.svelte - полоса 6px, подпись и значение над ней -->
 <script lang="ts">
   import { twMerge } from "tailwind-merge"
   import type { IProgressBarProps, IReceivingDataObject } from "../types"

package/dist/PropsGroup.svelte

@@ -1,4 +1,4 @@
-<!-- $lib/PropsGroup.svelte — карточка-группа полей для панелей свойств конструктора (*Props.svelte). Визуальный язык взят из уже принятого вложенного оформления смарт-виджетов (WidgetWiFi.svelte/WidgetDeviceInfo.svelte: rounded-[10px] border bg-(--back-color) p-3 + подпись text-[12px] font-semibold text-(--muted-color)) — общий premium-вид панелей вместо голых flex-колонок без оформления. -->
+<!-- $lib/PropsGroup.svelte - карточка-группа полей для панелей свойств конструктора (*Props.svelte). Визуальный язык взят из уже принятого вложенного оформления смарт-виджетов (WidgetWiFi.svelte/WidgetDeviceInfo.svelte: rounded-[10px] border bg-(--back-color) p-3 + подпись text-[12px] font-semibold text-(--muted-color)) - общий premium-вид панелей вместо голых flex-колонок без оформления. -->
 <script lang="ts">
   import { twMerge } from "tailwind-merge"
   import type { Snippet } from "svelte"

package/dist/PropsListHeader.svelte

@@ -1,4 +1,4 @@
-<!-- $lib/PropsListHeader.svelte — подписи колонок над однострочными элементами списка в окнах свойств (вместо подписи у каждого поля); gridClass — тот же шаблон колонок, что у строк списка, пустая подпись — колонка без заголовка (ручка, удаление) -->
+<!-- $lib/PropsListHeader.svelte - подписи колонок над однострочными элементами списка в окнах свойств (вместо подписи у каждого поля); gridClass - тот же шаблон колонок, что у строк списка, пустая подпись - колонка без заголовка (ручка, удаление) -->
 <script lang="ts">
   let { gridClass, captions }: { gridClass: string; captions: string[] } = $props()
 </script>

package/dist/PropsListModal.svelte

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

package/dist/Select/Select.svelte

@@ -1,4 +1,4 @@
-<!-- $lib/Select/Select.svelte — радиус 10, высота 36, выравнивание по левому краю, список — единственный элемент с тенью, группа type="buttons" без разрывов. -->
+<!-- $lib/Select/Select.svelte - радиус 10, высота 36, выравнивание по левому краю, список - единственный элемент с тенью, группа type="buttons" без разрывов. -->
 <script lang="ts" generics="T = unknown">
   import { slide } from "svelte/transition"
   import { onMount } from "svelte"
@@ -14,7 +14,7 @@
   let portalElement: HTMLDivElement | undefined = $state()
   let anchorRect: { top: number; bottom: number; left: number; width: number } | null = $state(null)
 
-  /* Список вариантов выносится в document.body (портал), чтобы его не обрезал overflow-hidden/overflow-auto ближайшего скроллящегося предка (например, панель свойств конструктора). Позиция считается от dropdownElement и обновляется, пока список открыт, при скролле/резайзе где угодно на странице. Атрибут data-ui-portal на контейнере — чтобы Modal.svelte не принимал клик по опции (физически лежащей вне [data-modal]) за клик "снаружи" и не закрывался. */
+  /* Список вариантов выносится в document.body (портал), чтобы его не обрезал overflow-hidden/overflow-auto ближайшего скроллящегося предка (например, панель свойств конструктора). Позиция считается от dropdownElement и обновляется, пока список открыт, при скролле/резайзе где угодно на странице. Атрибут data-ui-portal на контейнере - чтобы Modal.svelte не принимал клик по опции (физически лежащей вне [data-modal]) за клик "снаружи" и не закрывался. */
   function portal(node: HTMLElement) {
     document.body.appendChild(node)
     return {
@@ -124,7 +124,7 @@
     onUpdate?.(selectedOption)
   }
 
-  /* Общая база поля — та же, что у Input */
+  /* Общая база поля - та же, что у Input */
   const fieldBase = `h-8 w-full rounded-[10px] border border-(--border-color) bg-(--field-color) px-3 text-left text-[14px]
     transition-[border-color,box-shadow] duration-150 outline-none
     focus:border-(--accent-color) focus:shadow-(--focus-shadow-color)`
@@ -209,7 +209,7 @@
           {@const selected = value !== null && isSelected(option)}
           {@const hasOwnColor = !!option.class?.split(/\s+/).find((c) => c.startsWith("bg-"))}
           <!-- Заливка вне twMerge, чтобы не конфликтовать с bg-* из option.class: опции со своим цветом показывают его всегда и отмечаются рамкой, обычный сегмент-контрол заливает только выбранный пункт -->
-          <!-- Обёртка — позиционирующий предок подсказки; без overflow-hidden у группы, чтобы подсказка не обрезалась -->
+          <!-- Обёртка - позиционирующий предок подсказки; без overflow-hidden у группы, чтобы подсказка не обрезалась -->
           <div class="relative flex {fitContent ? '' : 'min-w-0 flex-1'}">
             <button
               id={option.id}

package/dist/Select/SelectProps.svelte

@@ -44,7 +44,7 @@
         : ($optionsStore.SELECT_VALUE_TYPE_OPTIONS[0] as ValueTypeOption),
   )
 
-  /* Диапазон битов bitMode; без range в свойствах — один нулевой бит */
+  /* Диапазон битов bitMode; без range в свойствах - один нулевой бит */
   const bitRange = $derived(component.properties.range ?? { start: 0, end: 0 })
 
   let Header: IOption = $derived(
@@ -65,7 +65,7 @@
     ),
   )
 
-  /* Argument пуст — поле ниже лишь визуально показывает "ModCfg", реальное значение нужно проставить в состояние */
+  /* Argument пуст - поле ниже лишь визуально показывает "ModCfg", реальное значение нужно проставить в состояние */
   $effect(() => {
     if (!component.eventHandler?.Argument) onPropertyChange({ eventHandler: { Argument: "ModCfg" } })
   })

package/dist/Slider/Slider.svelte

@@ -1,4 +1,4 @@
-<!-- $lib/Slider/Slider.svelte — дорожка 4px, ползунок 18px; в диапазонном режиме оба <input> на всю ширину с одинаковыми min/max наложены друг на друга, события ловит только ::thumb, клик по пустой дорожке ползунок не двигает -->
+<!-- $lib/Slider/Slider.svelte - дорожка 4px, ползунок 18px; в диапазонном режиме оба <input> на всю ширину с одинаковыми min/max наложены друг на друга, события ловит только ::thumb, клик по пустой дорожке ползунок не двигает -->
 <script lang="ts">
   import { T } from "../locales/i18n"
   import type { ISliderProps } from "../types"
@@ -6,7 +6,7 @@
 
   let {
     id = crypto.randomUUID(),
-    /* Было "bg-blue" — декоративная заливка. Цвет заливки дорожки берётся из --bg-color, который задаётся классом bg-* в вызове; без него используется акцент. */
+    /* Было "bg-blue" - декоративная заливка. Цвет заливки дорожки берётся из --bg-color, который задаётся классом bg-* в вызове; без него используется акцент. */
     wrapperClass = "",
     label = { name: "", class: "" },
     type = "single",
@@ -25,7 +25,7 @@
   let lowerValue = $derived(isRange && Array.isArray(value) ? value[0] : number.minNum)
   let upperValue = $derived(isRange && Array.isArray(value) ? value[1] : number.maxNum)
 
-  /* Позиция значения в процентах — для отрисовки заливки */
+  /* Позиция значения в процентах - для отрисовки заливки */
   const pct = (v: number) => {
     const span = Math.abs((number.maxNum ?? 10) - (number.minNum ?? 0)) || 1
     return Math.max(0, Math.min(100, ((v - (number.minNum ?? 0)) / span) * 100))
@@ -71,8 +71,8 @@
     return Number(num.toFixed(2))
   }
 
-  /* Единые классы для нативного ползунка: высота input РАВНА высоте thumb (18px) — тогда центрирование по вертикали отдаётся обычному flexbox родителя (items-center), без ручного margin-top на ::-webkit-slider-thumb. Такой margin-top пришлось бы подбирать под конкретную высоту трека, и он даёт разный результат в Chromium и Safari/WebKit — при равных высотах input и thumb смещения нет по определению, это работает одинаково везде. */
-  /* Бегунок: было border-(--hairline-color) (почти прозрачная линия) + мягкая тень — на светлом фоне белый кружок буквально сливался с дорожкой. Рамка в 2px цветом заливки даёт чёткий, "премиальный" контур вместо почти невидимой линии. */
+  /* Единые классы для нативного ползунка: высота input РАВНА высоте thumb (18px) - тогда центрирование по вертикали отдаётся обычному flexbox родителя (items-center), без ручного margin-top на ::-webkit-slider-thumb. Такой margin-top пришлось бы подбирать под конкретную высоту трека, и он даёт разный результат в Chromium и Safari/WebKit - при равных высотах input и thumb смещения нет по определению, это работает одинаково везде. */
+  /* Бегунок: было border-(--hairline-color) (почти прозрачная линия) + мягкая тень - на светлом фоне белый кружок буквально сливался с дорожкой. Рамка в 2px цветом заливки даёт чёткий, "премиальный" контур вместо почти невидимой линии. */
   const THUMB = `w-full appearance-none bg-transparent h-[18px]
     [&::-webkit-slider-runnable-track]:h-[18px] [&::-webkit-slider-runnable-track]:bg-transparent
     [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:size-[18px]
@@ -85,7 +85,7 @@
     [&::-moz-range-thumb]:shadow-[0_1px_4px_rgb(16_24_40/0.35)]
     focus-visible:outline-none`
 
-  /* Двойной слайдер: оба input на всю ширину трека с ОДИНАКОВЫМ min/max, наложены друг на друга. pointer-events выключен на самом input и включён только на ::thumb (класс .range-overlay ниже) — тянуть можно исключительно за конкретный бегунок. Tailwind не генерирует CSS для сочетания произвольного варианта псевдоэлемента с pointer-events-*, поэтому это обычный style-блок ниже, а не класс. */
+  /* Двойной слайдер: оба input на всю ширину трека с ОДИНАКОВЫМ min/max, наложены друг на друга. pointer-events выключен на самом input и включён только на ::thumb (класс .range-overlay ниже) - тянуть можно исключительно за конкретный бегунок. Tailwind не генерирует CSS для сочетания произвольного варианта псевдоэлемента с pointer-events-*, поэтому это обычный style-блок ниже, а не класс. */
 </script>
 
 <div class={twMerge(`relative flex w-full flex-col gap-1.5`, wrapperClass)}>
@@ -96,7 +96,7 @@
   <div class="flex w-full items-center gap-3">
     <!-- Дорожка -->
     <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="relative flex h-8 flex-1 items-center {disabled ? 'cursor-not-allowed opacity-45' : ''}">
-      <!-- Фон дорожки 6px — --container-color здесь давал слишком слабый контраст с фоном страницы (#f0f2f5 на белом), дорожка визуально пропадала; --border-color заметно контрастнее и совпадает с рамкой счётчика ниже. -->
+      <!-- Фон дорожки 6px - --container-color здесь давал слишком слабый контраст с фоном страницы (#f0f2f5 на белом), дорожка визуально пропадала; --border-color заметно контрастнее и совпадает с рамкой счётчика ниже. -->
       <div class="pointer-events-none absolute inset-x-0 top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-(--border-color)"></div>
       <!-- Заливка -->
       {#if isRange}
@@ -218,7 +218,7 @@
 </div>
 
 <style>
-  /* Двойной слайдер: оба input наложены на всю ширину трека, дорожка каждого не должна перехватывать клик — только его собственный thumb. */
+  /* Двойной слайдер: оба input наложены на всю ширину трека, дорожка каждого не должна перехватывать клик - только его собственный thumb. */
   .range-overlay {
     pointer-events: none;
   }

package/dist/Switch/Switch.svelte

@@ -1,4 +1,4 @@
-<!-- $lib/Switch/Switch.svelte — тумблер, геометрия считается от пропа height; чекбокс 20px с радиусом 6 -->
+<!-- $lib/Switch/Switch.svelte - тумблер, геометрия считается от пропа height; чекбокс 20px с радиусом 6 -->
 <script lang="ts">
   import { twMerge } from "tailwind-merge"
   import type { ISwitchProps } from "../types"
@@ -58,7 +58,7 @@
 {#if type !== "checkbox"}
   <div class={twMerge(`relative flex w-full flex-col items-center justify-center gap-1.5`, wrapperClass)}>
     {#if label.name}
-      <!-- Подпись по умолчанию по центру — над переключателем, который тоже по центру; выравнивание из label.class важнее -->
+      <!-- Подпись по умолчанию по центру - над переключателем, который тоже по центру; выравнивание из label.class важнее -->
       <h5 class={twMerge(`w-full text-center text-[12px] font-semibold text-(--muted-color)`, label.class)}>{label.name}</h5>
     {/if}
     <div class="flex w-full {type == 'vertical' ? 'flex-wrap' : ''} items-center justify-around gap-4">
@@ -90,7 +90,7 @@
                 disabled={option.disabled}
                 onchange={() => handleToggle(index)}
               />
-              <!-- Дорожка: акцент во включённом состоянии, нейтральная серая в выключенном. Фолбэк var(--accent-color) — большинство вызовов Switch не передают wrapperClass с ролью цвета (bg-blue и т.п.), без фолбэка --bg-color остаётся не задан и дорожка становится невидимой при включении. -->
+              <!-- Дорожка: акцент во включённом состоянии, нейтральная серая в выключенном. Фолбэк var(--accent-color) - большинство вызовов Switch не передают wrapperClass с ролью цвета (bg-blue и т.п.), без фолбэка --bg-color остаётся не задан и дорожка становится невидимой при включении. -->
               <span
                 class="relative flex items-center rounded-full transition-colors duration-200
                   {checkedOptions[index] ? 'bg-(--bg-color,var(--accent-color))' : 'bg-(--border-color)'}

package/dist/Switch/SwitchProps.svelte

@@ -98,7 +98,7 @@
         {/if}
         {#each component.properties.options || [] as option, index (option.id)}
           <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 символов) в битовом режиме, не переводится -->
+            <!-- Имя варианта - короткая метка бита (до 4 символов) в битовом режиме, не переводится -->
             <UI.Input
               value={option.name}
               maxlength={4}