poe-svelte-ui-lib 1.43.0 → 1.44.1

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,
@@ -88,7 +89,7 @@
     label={{ name: $T("constructor.props.open") }}
     value={component.properties.isOpen}
     options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
-    onChange={(value) => updateProperty("isOpen", value, component, onPropertyChange)}
+    onChange={(value) => updateProperty("isOpen", value === 1, component, onPropertyChange)}
   />
 {/snippet}
 
@@ -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>)}
@@ -172,7 +159,7 @@
     label={{ name: $T("constructor.props.disabled") }}
     value={(component.properties as UI.IInputProps | UI.ISwitchProps | UI.ISliderProps | UI.IFileAttachProps)?.disabled ? 1 : 0}
     options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
-    onChange={(value) => updateProperty("disabled", value, component, onPropertyChange)}
+    onChange={(value) => updateProperty("disabled", value === 1, component, onPropertyChange)}
   />
 {/snippet}
 
@@ -194,7 +181,7 @@
     label={{ name: $T("constructor.props.readonly") }}
     value={Number((component.properties as UI.IInputProps | UI.IJoystickProps | UI.IWidgetProps).readonly)}
     options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
-    onChange={(value) => updateProperty("readonly", value, component, onPropertyChange)}
+    onChange={(value) => updateProperty("readonly", value === 1, component, onPropertyChange)}
   />
 {/snippet}
 
@@ -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/Graph/Graph.svelte

@@ -15,6 +15,7 @@
 </script>
 
 <script lang="ts">
+  import { T } from "../locales/i18n"
   import { onMount } from "svelte"
   import Select from "../Select/Select.svelte"
   import type { IGraphDataObject, IGraphProps } from "../types"
@@ -416,27 +417,23 @@
       {#if !isHistoryMode}
         <!-- Развертка по горизонтали -->
         <Select
-          label={{ name: "Refresh Rate", class: "" }}
+          label={{ name: $T("ui.graph.refresh"), class: "" }}
           options={REFRESH_OPTIONS}
           value={REFRESH_OPTIONS.find((o) => o.value == selectedRefreshRate)}
           onUpdate={(value) => (selectedRefreshRate = (value as IOption).value as number)}
         />
       {/if}
 
-      <!-- Переменные и их значение -->
-      <div>
-        <h5 class="px-4">Values</h5>
-        <table class="w-full font-mono text-sm">
-          <tbody>
-            {#each graphData as data, i (data.id)}
-              <tr>
-                <td><div class="mr-2 h-4 w-4 rounded-full" style="background-color: {data.color}"></div></td>
-                <td class="w-24 truncate text-left font-semibold">{data.name}</td>
-                <td class="w-16 text-right">{currentValues[i]?.toFixed(2)}</td>
-              </tr>
-            {/each}
-          </tbody>
-        </table>
+      <!-- Переменные и их значение: сетка, а не таблица — имя обрезается «…», значение не переносится -->
+      <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]">
+          {#each graphData as data, i (data.id)}
+            <span class="size-2.5 rounded-full" style="background-color: {data.color}"></span>
+            <span class="truncate font-semibold" title={data.name}>{data.name}</span>
+            <span class="text-right whitespace-nowrap tabular-nums">{currentValues[i]?.toFixed(2)}</span>
+          {/each}
+        </div>
       </div>
     </div>
   </div>

package/dist/Graph/GraphProps.svelte

@@ -35,7 +35,7 @@
     label={{ name: $T("constructor.props.istest") }}
     value={component.properties.isTest}
     options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
-    onChange={(value) => updateProperty("isTest", value, component, onPropertyChange)}
+    onChange={(value) => updateProperty("isTest", value === 1, component, onPropertyChange)}
   />
 {/snippet}
 

package/dist/Graph/README.md

@@ -19,6 +19,7 @@
 ## Особенности
 
 - Для накопленных по периодам значений (энергия за час/сутки) лучше «Диаграмма по периодам»
+- Справа от графика — развёртка и текущие значения серий: каждая серия в одну строку (цвет, имя, значение), длинное имя обрезается «…» с полным именем во всплывающей подсказке
 
 ### Адаптивность
 

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,6 +1,9 @@
 <script lang="ts">
+  import TextsEditor from "../TextsEditor.svelte"
   import { getContext } from "svelte"
   import { T } from "../locales/i18n"
+  import translations from "../locales/translations"
+  import { LANGUAGE_CODES } from "../locales/localize"
   import type { IInputProps, UIComponent, IOption, IUIComponentHandler } from "../types"
   import * as UI from ".."
   import { optionsStore, findColorOption } from "../options"
@@ -33,6 +36,12 @@
   )
 
   /* Обновление свойства */
+  /* Подсказка битового режима «Максимальное число: N» сразу на всех языках — иначе записалась бы на языке интерфейса конструктора */
+  const maxNumInfo = (range: { start: number; end: number }) => {
+    const max = Math.pow(2, range.end - range.start + 1) - 1
+    return Object.fromEntries(LANGUAGE_CODES.map((lang, i) => [lang, `${translations["constructor.props.maxnum"][i]}: ${max}`]))
+  }
+
   const updateProperty = (path: string, value: string | object | boolean | number | RegExp) => {
     const newProperties = JSON.parse(JSON.stringify(component.properties))
     if (path === "regExp") {
@@ -111,11 +120,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()}
@@ -141,7 +146,7 @@
         updateProperty("number.minNum", 0)
         updateProperty("number.maxNum", Math.pow(2, component.properties.range.end - component.properties.range.start + 1) - 1)
         updateProperty("number.step", 1)
-        updateProperty("help.info", `${$T("constructor.props.maxnum")}: ${component.properties.number.maxNum}`)
+        updateProperty("help.info", maxNumInfo(component.properties.range))
       } else {
         updateProperty("help.info", "")
       }
@@ -250,29 +255,13 @@
           updateProperty("number.minNum", 0)
           updateProperty("number.maxNum", Math.pow(2, component.properties.range.end - component.properties.range.start + 1) - 1)
           updateProperty("number.step", 1)
-          updateProperty("help.info", `${$T("constructor.props.maxnum")}: ${component.properties.number.maxNum}`)
+          updateProperty("help.info", maxNumInfo({ start: value[0] as number, end: value[1] as number }))
         }
       }}
     />
   {/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
@@ -368,7 +357,7 @@
     label={{ name: $T("constructor.props.disabled") }}
     value={component.properties.disabled}
     options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
-    onChange={(value) => updateProperty("disabled", value)}
+    onChange={(value) => updateProperty("disabled", value === 1)}
   />
 {/snippet}
 
@@ -381,8 +370,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 +397,6 @@
       <CommonSnippets snippet="BitModeInfo" {component} {onPropertyChange} />
     </PropsGroup>
     <PropsGroup label={$T("constructor.props.group.behavior")}>
-      {@render InputPlaceholder()}
-      {@render InputInfo()}
       {@render InputAutocomplete()}
       {@render InputSettings()}
       {@render InputDisabled()}