poe-svelte-ui-lib 1.43.0 → 1.44.0

package/README.md

@@ -1,6 +1,35 @@
 # poe-svelte-ui-lib
 
-Набор UI-компонентов на Svelte 5 (в режиме рун) для конструктора интерфейсов устройств: поля ввода, селекторы, таблицы, графики, виджеты устройства (WiFi, информация об устройстве) и вспомогательные примитивы (модалки, перетаскивание, drag&drop-конструктор свойств).
+Библиотека компонентов на Svelte 5 (руны) для интерфейсов устройств компании. Один и тот же компонент выглядит и ведёт себя одинаково везде, где он используется:
+
+- **DevCloud** — облако: конструктор GUI устройства, панель управления, документация;
+- **WebApp** — локальный веб-интерфейс прошивок ProdFactory-ESP, встроенный в устройство;
+- **SYP-DevTerminal** — настольный терминал разработчика.
+
+Витрина с живыми примерами: [oleg-perevyshin.github.io/ElementsUI](https://oleg-perevyshin.github.io/ElementsUI/).
+
+## Состав
+
+**Смарт-виджеты** — готовые блоки под конкретную задачу, работают с группой полей прошивки по префиксу, переменные привязывать не нужно; шапка со сворачиванием и мастер-цветом:
+
+- `WidgetWiFi` — настройка сети: режим, клиент, точка доступа, поиск сетей;
+- `WidgetDeviceInfo` — паспорт устройства и основные настройки, перезагрузка;
+- `WidgetFileSystem` — память, список файлов, удаление и закачка;
+- `WidgetStackInfo` — отладка: свободная память и запас стека задач;
+- `WidgetRGBStrip` — адресная светодиодная лента: цвет, эффекты, параметры ленты;
+- `WidgetPFD` — пилотажный дисплей: авиагоризонт, ленты, маршрут, связь, сообщения автопилота;
+- `WidgetMap` — карта объектов с траекториями, несколько групп-объектов на одной карте.
+
+**Компоненты** — привязываются к одной переменной устройства: `Input`, `Select`, `Switch`, `Slider`, `Button`, `Joystick`, `ProgressBar`, `Graph`, `PeriodChart`, `Table`, `FileAttach`, `VideoViewer`, `TextField`, `Widget` (карточка одного значения).
+
+**Раскладка** — `Accordion`, `Tabs`, `Divider`, `Carousel`, `Modal`.
+
+## Как устроено
+
+- **Компонент только отображает и сообщает.** Он получает значения через пропсы и отдаёт изменения колбэками (`onUpdate`, `onChange`, `onSave`…). С сетью, WebSocket и `DeviceStore` работает приложение (`GUIPreview` в DevCloud и WebApp): значения переменных устройства хранятся под ключами `<ModSN>|<ключ>`, смарт-виджеты читают свою группу (`MAV.Lat`, `CFG.DevName`…).
+- **Конструктор свойств.** У каждого компонента есть `<Компонент>Props.svelte` — панель свойств для конструктора DevCloud.
+- **Описания.** Короткое описание (i) — `component.info.<Тип>` в переводах (ru/en/zh), его показывают конструктор облака и витрина; развёрнутое — README рядом с исходником компонента.
+- **Тема** — один файл `poe-svelte-ui-lib/theme.css` для всех приложений: палитра светлой и тёмной темы, типографика, Markdown, роли заливки.
 
 ## Установка
 
@@ -11,7 +40,7 @@ npm install poe-svelte-ui-lib
 ### Требования (peerDependencies)
 
 - `svelte ^5.0.0`
-- `tailwindcss ^4.0.0` — компоненты стилизуются исключительно Tailwind-утилитами и CSS-переменными темы, без собственного скомпилированного CSS в пакете
+- `tailwindcss ^4.0.0` — компоненты стилизуются Tailwind-утилитами и CSS-переменными темы; сама тема поставляется файлом `theme.css`
 
 ### Подключение стилей и темы
 
@@ -26,7 +55,7 @@ npm install poe-svelte-ui-lib
 /* дальше — только собственные отличия приложения, например :root { min-width: 640px; } */
 ```
 
-**Предпросмотр темы** — страница «Тема» витрины (`src/routes/components/theme`): один и тот же интерфейс облака (шапка устройства, палитра токенов, кнопки во всех ролях, поля, таблица, виджеты, типографика, Markdown) на одной странице; тема переключается глобально кнопкой в шапке витрины. Правьте `theme.css` и смотрите результат там.
+**Предпросмотр темы** — вкладка «Тема» на главной витрины (`src/routes/ThemePreview.svelte`): типовой интерфейс облака (шапка устройства, палитра токенов, кнопки во всех ролях, поля, таблица, виджеты, типографика, Markdown); тема переключается кнопкой в шапке витрины. Правьте `theme.css` и смотрите результат там.
 
 Текст в Markdown, таблицы и код переносятся по ширине контейнера — горизонтальной прокрутки быть не должно, только вертикальная. Markdown рендерится с `breaks: true` (как в облаке), поэтому абзац и пункт списка пишутся одной строкой — ручной перенос внутри абзаца превращается в разрыв строки.
 
@@ -48,7 +77,7 @@ npm install poe-svelte-ui-lib
 
 Необязательный токен `--table-header-color` — фон шапки `Table` (по умолчанию `--container-color`); смарт-виджеты задают его сами из мастер-цвета.
 
-Справочник по регулярным выражениям (`docs/info/RegExp.md`) и протокол обмена данными с устройством (`docs/info/ExchangeRules.md`) — вспомогательные материалы для тех, кто настраивает валидацию полей и работу с `DeviceStore`.
+Справочник по регулярным выражениям для проверки полей ввода — вкладка «Регулярные выражения» на главной витрины (`src/routes/RegExp.md`). Протокол обмена с устройством описан в документации DevCloud (разделы «Протокол устройства» и «Обмен данными с устройством»).
 
 ## Использование
 
@@ -63,7 +92,7 @@ npm install poe-svelte-ui-lib
 <UI.Button content={{ name: "Сохранить" }} onClick={() => console.log(value)} />
 ```
 
-Полный список компонентов и типов — в `src/lib/index.ts`. У каждого компонента есть README рядом с исходником (`src/lib/<Component>/README.md`, для `Modal`/`Dragging` — `src/lib/<Component>.README.md`) с описанием пропсов, примерами и внутренним устройством; живая витрина всех компонентов — `npm run dev` → `/components/all`.
+Полный список компонентов и типов — в `src/lib/index.ts`. У каждого компонента есть README рядом с исходником (`src/lib/<Component>/README.md`, для `Modal`/`Dragging` — `src/lib/<Component>.README.md`) с описанием пропсов, примерами и внутренним устройством; живая витрина — `npm run dev`: на главной вкладки «Обзор» (этот README), «Тема» (предпросмотр `theme.css`) и «Регулярные выражения», дальше страница на каждый компонент.
 
 **Витрина повторяет конструктор DevCloud:** слева компонент и код (прижат к низу), справа панель свойств шириной `24rem` с тем же оформлением, что в облаке, — переполнение подписей видно сразу. Кнопка (i) в шапке панели открывает описание компонента.
 
@@ -81,6 +110,11 @@ npm install poe-svelte-ui-lib
 
 **README компонента** (`src/lib/<Компонент>/README.md`, вкладка «Инфо» витрины) — развёрнутая документация для разработчика. Первые разделы повторяют описание (i) и не должны ему противоречить, дальше идут разработческие: `## Назначение` (плюс заметка о размерах) → `## Пакет данных` (плюс `### Протокол устройства` / пример кода прошивки) → `## Ключи` (таблица «Ключ / Описание», те же формулировки, что в (i)) → `## Особенности` (поведение, ограничения) → `## Пропсы` (таблица «Название / Тип / По умолчанию / Описание», колбэки — `### Колбэки`) → `## Примеры` (Svelte) → `## Конструктор свойств (<Компонент>Props.svelte)` → `## Внутреннее устройство`.
 
+**Языки (ru/en/zh) — два слоя:**
+
+- **Встроенные тексты компонентов** (подписи полей виджетов, кнопки, подсказки, `aria-label`) — только через словарь `src/lib/locales/translations.ts` и `$T("ключ")`; строка с числами — параметрами: `$T("widget.fs.files", { n: files.length })` на ключ `"Файлов: {n}"`. Русских литералов в разметке и скриптах компонентов быть не должно. Списки вариантов с подписями — `$derived`, иначе не переключатся при смене языка. Исключение — шкалы прибора `WidgetPFD`: там общепринятые авиационные сокращения (`SPD`, `ALT`, `AS`, `VS`, `NO DATA`) на всех языках, переводятся только подсказки и строки состояния.
+- **Тексты, введённые в конструкторе** (`label.name`, `placeholder`, `options[].name`, вкладки, заголовки колонок, подписи переключателя и т.п.) — тип `LocalizedText` (`locales/localize.ts`): простая строка (только `ru`) или объект `{ ru, en, zh }`; при отсутствии перевода показывается `ru`, затем первый непустой. Компоненты получают уже готовые строки: приложение разрешает описание GUI функцией `localizeDeep(UIBlocks, язык)` перед рендером. Окна свойств (`*Props.svelte`) тексты не показывают и не правят — у каждого компонента одна кнопка «Тексты и переводы» (`TextsEditor`): модальное окно само собирает все тексты компонента (`collectTexts` по полям `name`, `label`, `labels`, `placeholder`, `text`, `info`, `title`, `captionLeft`/`captionRight`, `units`/`unit`, `footer`, `hiddenInfo`, `alt`; технические `id`, `class`, `icon`, `keys`, данные — никогда; у `Switch` варианты — короткие метки битов битового режима, их имя правится в окне свойств и не переводится — `NOT_TEXTS` в `TextsEditor.svelte`) и даёт по три поля RU/EN/ZH. Сохранение (`packLocalized`): пусто — `""`, только RU — строка, иначе объект из заполненных языков. Читая текст в окне свойств для логики, берите `localizeText(поле, "ru")` — поле может быть объектом. Заголовок смарт-виджета по умолчанию пустой — виджет показывает своё название из словаря на текущем языке.
+
 **Иконки вариантов панелей свойств** — `src/lib/libIcons/propsIcons.ts` (контурные SVG 24×24 строками), подставляются в `IOption.icon` в `options.ts`.
 
 ## Разработка

package/dist/Accordion/Accordion.svelte

@@ -1,14 +1,16 @@
-<!-- $lib/Accordion/Accordion.svelte — заголовок больше не увеличивается при раскрытии,
-     тень на hover заменена фоном, радиус 14. Логика toggle не тронута. -->
+<!-- $lib/Accordion/Accordion.svelte — заголовок не увеличивается при раскрытии, радиус 14.
+     Мастер-цвет (componentClass) — как у смарт-виджетов: иконка и текст заголовка цветом, фон заголовка — его мягким оттенком. -->
 <script lang="ts">
   import { slide } from "svelte/transition"
   import type { IAccordionProps } from "../types"
   import { twMerge } from "tailwind-merge"
+  import { widgetAccentStyle } from "../widgetAccent"
 
   let {
     id = crypto.randomUUID(),
-    isOpen = false,
+    isOpen = $bindable(false),
     wrapperClass = "",
+    componentClass = "",
     size = { width: 1, height: 1 },
     label = { name: "", class: "text-left", icon: null },
     children,
@@ -18,18 +20,24 @@
   const toggle = () => (isOpen = !isOpen)
 </script>
 
-<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge(`w-full`, wrapperClass)} transition:slide={{ duration: 200 }}>
+<div
+  id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
+  class={twMerge(`w-full`, wrapperClass)}
+  style={widgetAccentStyle(componentClass)}
+  transition:slide={{ duration: 200 }}
+>
   <div class="overflow-hidden rounded-[14px] border border-(--hairline-color) bg-(--back-color)">
-    <!-- Заголовок темнее контента (--container-color), а не наоборот: так он читается
-         как отдельная кликабельная полоса, а раскрытое содержимое остаётся на чистом
-         светлом фоне (--back-color) — там часто лежат вложенные карточки/поля. -->
+    <!-- Фон заголовка — мягкий оттенок мастер-цвета (светлый в светлой теме, тёмный в тёмной), текст — мастер-цвет с цветом шрифта 60/40,
+         раскрытое содержимое остаётся на чистом фоне (--back-color). -->
     <button
-      class="flex w-full cursor-pointer items-center justify-between gap-3 bg-(--container-color) px-4 py-3 text-left transition-colors duration-150 hover:bg-(--border-color)"
+      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}
     >
       <div class="flex min-w-0 flex-1 items-center gap-3">
         {#if label?.icon}
-          <span class="flex h-[18px] w-[18px] shrink-0 items-center justify-center text-(--muted-color) [&_svg]:h-full [&_svg]:w-full">
+          <span
+            class="flex h-[18px] w-[18px] shrink-0 items-center justify-center text-[color-mix(in_srgb,var(--accent-color)_60%,var(--font-color))] [&_svg]:h-full [&_svg]:w-full"
+          >
             {#if typeof label?.icon === "string"}
               {@html label.icon}
             {:else}
@@ -43,7 +51,7 @@
 
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        class="h-[14px] w-[14px] shrink-0 text-(--faint-color) transition-transform duration-200"
+        class="h-[14px] w-[14px] shrink-0 text-[color-mix(in_srgb,var(--accent-color)_60%,var(--font-color))] transition-transform duration-200"
         style="transform: rotate({isOpen ? 180 : 0}deg)"
         viewBox="0 0 24 24"
       >

package/dist/Accordion/Accordion.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { IAccordionProps } from "../types";
-declare const Accordion: import("svelte").Component<IAccordionProps, {}, "">;
+declare const Accordion: import("svelte").Component<IAccordionProps, {}, "isOpen">;
 type Accordion = ReturnType<typeof Accordion>;
 export default Accordion;

package/dist/Accordion/AccordionProps.svelte

@@ -9,6 +9,7 @@
   import CrossIcon from "../libIcons/CrossIcon.svelte"
   import CommonSnippets from "../CommonSnippets.svelte"
   import PropsGroup from "../PropsGroup.svelte"
+  import WidgetAccentPicker from "../WidgetAccentPicker.svelte"
 
   const {
     component,
@@ -113,6 +114,10 @@
       />
     </PropsGroup>
     <PropsGroup label={$T("constructor.props.group.appearance")} contentClass="items-center">
+      <WidgetAccentPicker
+        value={component.properties.componentClass ?? ""}
+        onUpdate={(value) => updateProperty("componentClass", value, component, onPropertyChange)}
+      />
       {@render AccordionBackgroundImage()}
     </PropsGroup>
   </div>
@@ -141,6 +146,10 @@
       {@render AccordionIsOpen()}
     </PropsGroup>
     <PropsGroup label={$T("constructor.props.group.appearance")} contentClass="items-center">
+      <WidgetAccentPicker
+        value={component.properties.componentClass ?? ""}
+        onUpdate={(value) => updateProperty("componentClass", value, component, onPropertyChange)}
+      />
       {@render AccordionBackgroundImage()}
     </PropsGroup>
   </div>

package/dist/Accordion/README.md

@@ -12,6 +12,7 @@
 
 - Перетащите компоненты внутрь — у аккордеона своя сетка, её размер задаётся при создании и ресайзе
 - Заголовок с иконкой открывает и закрывает содержимое
+- Мастер-цвет — как у смарт-виджетов (`widgetAccentStyle`): иконка, текст и стрелка заголовка — цветом из палитры, смешанным с цветом шрифта (читается в обеих темах), фон заголовка — его мягким оттенком (`--<цвет>-soft`: очень светлый в светлой теме, тёмный в тёмной); без выбора — акцент темы. Цвет из `label.class` перекрывает цвет текста
 - По высоте занимает одну строку сетки и растягивается по содержимому
 
 ### Адаптивность
@@ -30,20 +31,21 @@
 
 ## Пропсы
 
-| Название       | Тип                                                    | По умолчанию          | Описание                                                      |
-| -------------- | ------------------------------------------------------ | --------------------- | ------------------------------------------------------------- |
-| `id`           | `string`                                               | `crypto.randomUUID()` | Уникальный идентификатор компонента                           |
-| `isOpen`       | `boolean`                                              | `false`               | Состояние открытия/закрытия аккордеона                        |
-| `wrapperClass` | `string`                                               | `""`                  | Дополнительные CSS-классы для обертки компонента              |
-| `size`         | `object`                                               | `-`                   | Размеры сетки содержимого (количество колонок и строк)        |
-| `size.height`  | `number`                                               | `1`                   | Количество строк в сетке содержимого                          |
-| `size.width`   | `number`                                               | `1`                   | Количество колонок в сетке содержимого                        |
-| `label`        | `object`                                               | `-`                   | Настройки заголовка аккордеона                                |
-| `label.name`   | `string`                                               | `""`                  | Текст заголовка аккордеона                                    |
-| `label.class`  | `string`                                               | `"text-left"`         | CSS-классы для стилизации текста заголовка                    |
-| `label.icon`   | `ConstructorOfATypedSvelteComponent \| string \| null` | `null`                | Иконка, отображаемая в заголовке (SVG строка или компонент)   |
-| `children`     | `Snippet`                                              | `undefined`           | Слот для содержимого, которое будет отображаться при открытии |
-| `image`        | `string`                                               | `""`                  | URL изображения для фона содержимого аккордеона               |
+| Название         | Тип                                                    | По умолчанию          | Описание                                                                                 |
+| ---------------- | ------------------------------------------------------ | --------------------- | ---------------------------------------------------------------------------------------- |
+| `id`             | `string`                                               | `crypto.randomUUID()` | Уникальный идентификатор компонента                                                      |
+| `isOpen`         | `boolean`                                              | `false`               | Состояние открытия/закрытия; `$bindable` — `bind:isOpen` получает раскрытие по клику     |
+| `wrapperClass`   | `string`                                               | `""`                  | Дополнительные CSS-классы для обертки компонента                                         |
+| `componentClass` | `string`                                               | `""`                  | Мастер-цвет: роль `bg-red`, `bg-green`... из палитры `COLOR_OPTIONS`; `""` — акцент темы |
+| `size`           | `object`                                               | `-`                   | Размеры сетки содержимого (количество колонок и строк)                                   |
+| `size.height`    | `number`                                               | `1`                   | Количество строк в сетке содержимого                                                     |
+| `size.width`     | `number`                                               | `1`                   | Количество колонок в сетке содержимого                                                   |
+| `label`          | `object`                                               | `-`                   | Настройки заголовка аккордеона                                                           |
+| `label.name`     | `string`                                               | `""`                  | Текст заголовка аккордеона                                                               |
+| `label.class`    | `string`                                               | `"text-left"`         | CSS-классы для стилизации текста заголовка                                               |
+| `label.icon`     | `ConstructorOfATypedSvelteComponent \| string \| null` | `null`                | Иконка, отображаемая в заголовке (SVG строка или компонент)                              |
+| `children`       | `Snippet`                                              | `undefined`           | Слот для содержимого, которое будет отображаться при открытии                            |
+| `image`          | `string`                                               | `""`                  | URL изображения для фона содержимого аккордеона                                          |
 
 ### Колбэки
 
@@ -121,7 +123,7 @@
 
 ### Что настраивается
 
-- Заголовок, иконка, «Открыт по умолчанию» — состояние при загрузке интерфейса
+- Заголовок, иконка, мастер-цвет заголовка, «Открыт по умолчанию» — состояние при загрузке интерфейса
 - Картинка фона — изображение под содержимым (например схема устройства), поверх неё располагаются компоненты
 
 ## Внутреннее устройство

package/dist/Button/ButtonProps.svelte

@@ -1,5 +1,7 @@
 <!-- $lib/ElementsUI/ButtonProps.svelte -->
 <script lang="ts">
+  import TextsEditor from "../TextsEditor.svelte"
+  import { localizeText } from "../locales/localize"
   import { T } from "../locales/i18n"
   import { type UIComponent, type IButtonProps, type IOption, updateProperty, type IUIComponentHandler } from "../types"
   import * as UI from ".."
@@ -40,11 +42,11 @@
   )
   const updateIconProperty = (propertyName: string, value: string) => {
     updateProperty(propertyName, value, component, onPropertyChange)
-    if (component.properties.content.icon && !component.properties.content.name?.trim())
+    if (component.properties.content.icon && !localizeText(component.properties.content.name, "ru").trim())
       updateProperty("componentClass", twMerge((component.properties as UI.IButtonProps).componentClass, "w-fit p-2"), component, onPropertyChange)
     else if (
-      (component.properties.content.icon && component.properties.content.name?.trim()) ||
-      (!component.properties.content.icon && !component.properties.content.name?.trim())
+      (component.properties.content.icon && localizeText(component.properties.content.name, "ru").trim()) ||
+      (!component.properties.content.icon && !localizeText(component.properties.content.name, "ru").trim())
     )
       updateProperty("componentClass", twMerge((component.properties as UI.IButtonProps).componentClass, "w-full px-1 py-1"), component, onPropertyChange)
   }
@@ -100,15 +102,11 @@
 {/snippet}
 
 {#snippet ButtonName()}
-  <UI.Input
-    label={{ name: $T("constructor.props.name") }}
-    value={component.properties.content.name}
-    onUpdate={(value) => updateIconProperty("content.name", value as string)}
-  />
+  <TextsEditor {component} {onPropertyChange} />
 {/snippet}
 
 {#snippet ButtonHeight()}
-  {#if !(!component.properties.content.name?.trim() && component.properties.content.icon)}
+  {#if !(!localizeText(component.properties.content.name, "ru").trim() && component.properties.content.icon)}
     <UI.Select
       label={{ name: $T("constructor.props.height") }}
       type="buttons"
@@ -120,14 +118,6 @@
   {/if}
 {/snippet}
 
-{#snippet ButtonInfo()}
-  <UI.Input
-    label={{ name: $T("constructor.props.info") }}
-    value={component.properties.content.info.text}
-    onUpdate={(value) => updateProperty("content.info.text", value as string, component, onPropertyChange)}
-  />
-{/snippet}
-
 {#snippet ButtonInfoSide()}
   <UI.Select
     label={{ name: $T("constructor.props.info.side") }}
@@ -197,7 +187,6 @@
     </PropsGroup>
     <PropsGroup label={$T("constructor.props.group.content")}>
       {@render ButtonName()}
-      {@render ButtonInfo()}
       {@render ButtonInfoSide()}
     </PropsGroup>
     <PropsGroup label={$T("constructor.props.group.appearance")}>

package/dist/CommonSnippets.svelte

@@ -5,6 +5,7 @@
   import { optionsStore } from "./options"
   import { updateProperty } from "./types"
   import { twMerge } from "tailwind-merge"
+  import TextsEditor from "./TextsEditor.svelte"
 
   let {
     snippet = "",
@@ -87,21 +88,7 @@
 {/snippet}
 
 {#snippet Label()}
-  <UI.Input
-    label={{ name: $T("constructor.props.label") }}
-    value={(
-      component.properties as
-        | UI.IAccordionProps
-        | UI.IInputProps
-        | UI.ISwitchProps
-        | UI.ISliderProps
-        | UI.IGraphProps
-        | UI.ITableProps<object>
-        | UI.IFileAttachProps
-        | UI.IJoystickProps
-    ).label?.name}
-    onUpdate={(value) => updateProperty("label.name", value as string, component, onPropertyChange)}
-  />
+  <TextsEditor {component} {onPropertyChange} />
 {/snippet}
 
 {#snippet LabelAlign(initialAlign: UI.IOption<string>)}
@@ -203,7 +190,7 @@
     <UI.TextField
       wrapperClass="mt-5 shadow-(--border-shadow-color) bg-(--blue-color)/20"
       content={{
-        name: "Выберите битовый диапазон в рамках глобальной переменной для данного компонента.",
+        name: $T("ui.bit_range"),
       }}
       background
     />

package/dist/CopiedChip.svelte

@@ -5,6 +5,7 @@
      ComponentExample — опечатка в классе позиционирования (right-1..5,
      невалидный Tailwind-класс, физически ничего не позиционировал). -->
 <script lang="ts">
+  import { T } from "./locales/i18n"
   import { fade } from "svelte/transition"
 
   let { show = false, class: className = "" }: { show?: boolean; class?: string } = $props()
@@ -15,6 +16,6 @@
     class="{className} absolute flex items-center gap-1 rounded-lg bg-(--green-soft) px-2 py-1 text-[11px] font-bold whitespace-nowrap text-(--green-color)"
     transition:fade={{ duration: 150 }}
   >
-    Скопировано
+    {$T("ui.copied")}
   </span>
 {/if}

package/dist/Input/Input.svelte

@@ -2,6 +2,7 @@
      кольцо фокуса вместо размытой тени. Вся логика (regExp, roundToClean,
      handleInputChange, счётчик, копирование) не тронута. -->
 <script lang="ts">
+  import { T } from "../locales/i18n"
   import type { IInputProps } from "../types"
   import { twMerge } from "tailwind-merge"
   import InfoIcon from "../libIcons/InfoIcon.svelte"
@@ -142,7 +143,7 @@
         type="button"
         class="absolute right-1.5 flex size-7 cursor-pointer items-center justify-center rounded-lg border-none bg-transparent text-(--faint-color) transition-colors duration-150 hover:bg-(--container-color) hover:text-(--font-color)"
         onclick={() => (showPassword = !showPassword)}
-        aria-label={showPassword ? "Скрыть пароль" : "Показать пароль"}
+        aria-label={showPassword ? $T("ui.password.hide") : $T("ui.password.show")}
       >
         {#if showPassword}
           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
@@ -176,7 +177,7 @@
           isCopied = true
           setTimeout(() => (isCopied = false), 1000)
         }}
-        aria-label="Копировать текст"
+        aria-label={$T("ui.copy_text")}
       >
         {#if !isCopied}
           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
@@ -208,7 +209,7 @@
             value = roundToClean(Number(value) + (number.step ?? 1))
             onUpdate(value as number)
           }}
-          aria-label="Увеличить">▲</button
+          aria-label={$T("ui.increase")}>▲</button
         >
         <button
           class="flex h-1/2 w-full items-center justify-center text-[11px] leading-none text-(--muted-color) transition-colors duration-150 hover:bg-(--container-color) hover:text-(--font-color)"
@@ -223,7 +224,7 @@
             value = roundToClean(Number(value) - (number.step ?? 1))
             onUpdate(value as number)
           }}
-          aria-label="Уменьшить">▼</button
+          aria-label={$T("ui.decrease")}>▼</button
         >
       </div>
     {/if}
@@ -236,7 +237,7 @@
           : ''} {disabled ? 'opacity-50' : 'cursor-pointer hover:text-(--accent-color)'}"
         onmouseenter={() => (showInfo = true)}
         onmouseleave={() => (showInfo = false)}
-        aria-label={showInfo ? "Скрыть инфо" : "Показать инфо"}
+        aria-label={showInfo ? $T("ui.info.hide") : $T("ui.info.show")}
       >
         <InfoIcon />
       </button>
@@ -251,6 +252,6 @@
        лишнего зазора, когда ошибки нет) и не абсолютным позиционированием (не наезжает на
        соседний контент при плотной вертикальной раскладке) — просто раздвигает то, что ниже,
        как везде в вебе. -->
-    <span class="block text-[12px] font-semibold text-(--red-color)">Неверный формат</span>
+    <span class="block text-[12px] font-semibold text-(--red-color)">{$T("ui.invalid_format")}</span>
   {/if}
 </div>

package/dist/Input/InputProps.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import TextsEditor from "../TextsEditor.svelte"
   import { getContext } from "svelte"
   import { T } from "../locales/i18n"
   import type { IInputProps, UIComponent, IOption, IUIComponentHandler } from "../types"
@@ -111,11 +112,7 @@
 {/snippet}
 
 {#snippet InputLabel()}
-  <UI.Input
-    label={{ name: $T("constructor.props.label") }}
-    value={component.properties.label.name}
-    onUpdate={(value) => updateProperty("label.name", value as string)}
-  />
+  <TextsEditor {component} {onPropertyChange} />
 {/snippet}
 
 {#snippet InputLabelAlign()}
@@ -257,22 +254,6 @@
   {/if}
 {/snippet}
 
-{#snippet InputPlaceholder()}
-  <UI.Input
-    label={{ name: $T("constructor.props.placeholder") }}
-    value={component.properties.placeholder as string}
-    onUpdate={(value) => updateProperty("placeholder", value)}
-  />
-{/snippet}
-
-{#snippet InputInfo()}
-  <UI.Input
-    label={{ name: $T("constructor.props.info") }}
-    value={component.properties.help.info as string}
-    onUpdate={(value) => updateProperty("help.info", value)}
-  />
-{/snippet}
-
 {#snippet InputSettings()}
   {#if component.properties.type !== "bitMode"}
     <UI.Select
@@ -381,8 +362,6 @@
     </PropsGroup>
     <PropsGroup label={$T("constructor.props.group.value")}>
       {@render InputValue()}
-      {@render InputPlaceholder()}
-      {@render InputInfo()}
       {@render InputSettings()}
       <CommonSnippets snippet="BitModeInfo" {component} {onPropertyChange} />
     </PropsGroup>
@@ -410,8 +389,6 @@
       <CommonSnippets snippet="BitModeInfo" {component} {onPropertyChange} />
     </PropsGroup>
     <PropsGroup label={$T("constructor.props.group.behavior")}>
-      {@render InputPlaceholder()}
-      {@render InputInfo()}
       {@render InputAutocomplete()}
       {@render InputSettings()}
       {@render InputDisabled()}

package/dist/Joystick/JoystickProps.svelte

@@ -39,21 +39,6 @@
         { name: $T("constructor.props.joystick.roll.axe"), info: $T("constructor.props.joystick.axes.info"), regExp: /^[\p{L}0-9\-_"':{}]*$/u },
       ]}
       <div class="flex flex-col gap-1">
-        <UI.Input
-          label={{ name: axesOptions[index].name }}
-          value={axe.name}
-          help={{ info: axesOptions[index].info, regExp: axesOptions[index].regExp }}
-          maxlength={20}
-          onUpdate={(value) => {
-            updateProperty(
-              "axes",
-              component.properties.axes.map((a: any, i: number) => (i === index ? { ...a, name: value } : a)),
-              component,
-              onPropertyChange,
-            )
-          }}
-        />
-
         <CommonSnippets
           snippet="MinMaxStep"
           initialValue={{

package/dist/Modal.svelte

@@ -1,6 +1,7 @@
 <!-- $lib/Modal.svelte — радиус 20, шапка и подвал через линии,
      подложка 40% + blur. Логика стека, Escape и клика вне окна не тронута. -->
 <script lang="ts">
+  import { T } from "./locales/i18n"
   import { type Snippet } from "svelte"
   import { fade, scale } from "svelte/transition"
   import { twMerge } from "tailwind-merge"
@@ -96,7 +97,7 @@
         <button
           class="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-lg text-(--faint-color) transition-colors duration-150 hover:bg-(--container-color) hover:text-(--font-color) [&_svg]:size-4"
           onclick={onCancel}
-          aria-label="Закрыть"
+          aria-label={$T("ui.close")}
         >
           <CrossIcon />
         </button>

package/dist/PeriodChart/PeriodChart.svelte

@@ -5,15 +5,17 @@
 
   const randomLevelData = (n: number) => Array.from({ length: n }, () => Math.round(Math.random() * 100))
 
+  /* Демо-уровни, когда levels не заданы; name — ключ перевода */
   export const DEFAULT_LEVELS: IPeriodChartLevel[] = [
-    { name: "Год", data: randomLevelData(12) },
-    { name: "Месяц", data: randomLevelData(31) },
-    { name: "Сутки", data: randomLevelData(24) },
-    { name: "Час", data: randomLevelData(6) },
+    { name: "ui.period.year", data: randomLevelData(12) },
+    { name: "ui.period.month", data: randomLevelData(31) },
+    { name: "ui.period.day", data: randomLevelData(24) },
+    { name: "ui.period.hour", data: randomLevelData(6) },
   ]
 </script>
 
 <script lang="ts">
+  import { T } from "../locales/i18n"
   import { twMerge } from "tailwind-merge"
   import type { IPeriodChartProps } from "../types"
 
@@ -23,7 +25,7 @@
        вызовы, которым нужен цвет, по-прежнему могут передать bg-* явно. */
     wrapperClass = "",
     label = { name: "", class: "" },
-    levels = DEFAULT_LEVELS,
+    levels: levelsProp,
     unit = "",
     onLevelChange = () => {},
   }: IPeriodChartProps = $props()
@@ -35,6 +37,7 @@
     if (currentLevelIndex >= levels.length) currentLevelIndex = 0
   })
 
+  const levels = $derived(levelsProp ?? DEFAULT_LEVELS.map((level) => ({ ...level, name: $T(level.name) })))
   const currentLevel = $derived<IPeriodChartLevel | undefined>(levels[currentLevelIndex])
   const values = $derived(currentLevel?.data ?? [])
 
@@ -103,7 +106,7 @@
   <!-- Столбчатый график -->
   <div class="relative flex w-full flex-col gap-1.5 rounded-[12px] border border-(--hairline-color) bg-(--back-color) p-3.5">
     {#if values.length === 0}
-      <div class="flex h-40 w-full items-center justify-center text-[13px] text-(--faint-color)">Нет данных</div>
+      <div class="flex h-40 w-full items-center justify-center text-[13px] text-(--faint-color)">{$T("ui.no_data")}</div>
     {:else}
       <div class="flex w-full gap-2">
         <!-- Шкала Y: подписи нулевой высоты, центр каждой ровно на своей линии сетки -->

package/dist/PeriodChart/PeriodChartProps.svelte

@@ -49,14 +49,6 @@
   }
 </script>
 
-{#snippet PeriodChartUnit()}
-  <UI.Input
-    label={{ name: $T("constructor.props.units") }}
-    value={component.properties.unit}
-    onUpdate={(value) => updateProperty("unit", value, component, onPropertyChange)}
-  />
-{/snippet}
-
 {#snippet PeriodChartLevels()}
   <PropsGroup label={$T("constructor.props.periodchart.title")} wrapperClass="mt-3">
     {#snippet headerActions()}
@@ -85,16 +77,6 @@
             onUpdate={(updatedArray) => updateLevels(updatedArray)}
           />
           <div class="flex flex-wrap items-end gap-2">
-            <UI.Input
-              label={{ name: $T("constructor.props.optionname") }}
-              wrapperClass="min-w-28 flex-1"
-              value={level.name}
-              onUpdate={(value) => {
-                const levels = [...(component.properties?.levels || [])]
-                levels[index] = { ...levels[index], name: value as string }
-                updateLevels(levels)
-              }}
-            />
             <UI.Select
               label={{ name: $T("constructor.props.variable") }}
               wrapperClass="min-w-32 flex-1"
@@ -153,9 +135,6 @@
       <CommonSnippets snippet="Colors" initialValue={{ color: initialColor, uselessColors: ["bg-max"] }} {component} {onPropertyChange} />
       <CommonSnippets snippet="Label" {component} {onPropertyChange} />
     </PropsGroup>
-    <PropsGroup label={$T("constructor.props.group.value")}>
-      {@render PeriodChartUnit()}
-    </PropsGroup>
   </div>
   {@render PeriodChartLevels()}
 {:else}
@@ -168,7 +147,6 @@
     <PropsGroup label={$T("constructor.props.group.value")}>
       <CommonSnippets snippet="WrapperClass" {component} {onPropertyChange} />
       <CommonSnippets snippet="Colors" initialValue={{ color: initialColor, uselessColors: ["bg-max"] }} {component} {onPropertyChange} />
-      {@render PeriodChartUnit()}
     </PropsGroup>
   </div>
   {@render PeriodChartLevels()}