poe-svelte-ui-lib 1.38.2 → 1.40.0

package/README.md

@@ -59,7 +59,19 @@ npm install poe-svelte-ui-lib
 
 **Витрина повторяет конструктор DevCloud:** слева компонент и код (прижат к низу), справа панель свойств шириной `24rem` с тем же оформлением, что в облаке, — переполнение подписей видно сразу. Кнопка (i) в шапке панели открывает описание компонента.
 
-**Описания компонентов (i)** — ключи `component.info.<Тип>` в `src/lib/locales/translations.ts` (ru/en/zh, Markdown). Один источник для витрины и конструктора DevCloud: облако показывает кнопку (i) у любого компонента, для которого есть описание. Добавляя компонент, допишите и описание: для чего он, какую переменную устройства показывает, что и когда отправляет, главные настройки и ограничения.
+**Описания компонентов (i)** — ключи `component.info.<Тип>` в `src/lib/locales/translations.ts` (ru/en/zh, Markdown). Один источник для витрины и конструктора DevCloud: облако показывает кнопку (i) у любого компонента, для которого есть описание. Добавляя компонент, допишите описание строго по шаблону — разделы всегда в этом порядке, неприменимые опускаются:
+
+| Раздел                | Что писать                                                                                                                                                                                           |
+| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `🎯 **Назначение**`   | 1–2 фразы: что это и когда применять                                                                                                                                                                 |
+| `📦 **Пакет данных**` | откуда данные (переменная, группа полей, объект ответа), каким пакетом и как часто их слать, что и когда компонент отправляет сам или «только отображение»; не связан с устройством — так и написать |
+| `🔑 **Ключи**`        | по пункту на ключ: `` `Ключ` — тип, единицы, смысл``, обязательность; у простых компонентов — формат значения переменной                                                                             |
+| `✨ **Особенности**`  | поведение, ограничения, советы, связь с другими компонентами                                                                                                                                         |
+| `⚙️ **Настройки**`    | что меняется в панели свойств                                                                                                                                                                        |
+
+Пункты — списком `- `, без вложенных списков; имена ключей и значения — в обратных кавычках; одинаковые для нескольких виджетов ключи (`Lat`, `Lon`, `DevName`...) описываются одинаково.
+
+**README компонента** (`src/lib/<Компонент>/README.md`, вкладка «Инфо» витрины) — развёрнутая документация для разработчика. Первые разделы повторяют описание (i) и не должны ему противоречить, дальше идут разработческие: `## Назначение` (плюс заметка о размерах) → `## Пакет данных` (плюс `### Протокол устройства` / пример кода прошивки) → `## Ключи` (таблица «Ключ / Описание», те же формулировки, что в (i)) → `## Особенности` (поведение, ограничения) → `## Пропсы` (таблица «Название / Тип / По умолчанию / Описание», колбэки — `### Колбэки`) → `## Примеры` (Svelte) → `## Конструктор свойств (<Компонент>Props.svelte)` → `## Внутреннее устройство`.
 
 **Иконки вариантов панелей свойств** — `src/lib/libIcons/propsIcons.ts` (контурные SVG 24×24 строками), подставляются в `IOption.icon` в `options.ts`.
 

package/dist/Accordion/README.md

@@ -1,8 +1,36 @@
 # Accordion Component
 
-## Описание
+## Назначение
 
-Аккордеон - это UI-компонент, который позволяет скрывать и отображать содержимое в виде раскрывающегося блока. Компонент предоставляет возможность настройки внешнего вида, размеров, иконок, изображений фона и других параметров через систему пропсов.
+Сворачиваемый блок для группировки компонентов: настройки, диагностика, редко используемые разделы.
+
+## Пакет данных
+
+Не связан с устройством — сам ничего не читает и не отправляет.
+
+## Особенности
+
+- Перетащите компоненты внутрь — у аккордеона своя сетка, её размер задаётся при создании и ресайзе
+- Заголовок с иконкой открывает и закрывает содержимое
+- По высоте занимает одну строку сетки и растягивается по содержимому
+
+### Адаптивность
+
+- Компонент использует Tailwind CSS для адаптивного дизайна
+- Сетка содержимого адаптируется под размеры экрана (sm:p-3)
+- Используются относительные единицы измерения для обеспечения масштабируемости
+
+### Ограничения
+
+- При использовании изображения фона высота строк сетки устанавливается в `minmax(6.5rem, auto)` вместо `auto`
+- Необходимо убедиться, что переданный компонент иконки является валидным Svelte компонентом или SVG строкой
+- Размеры сетки должны быть положительными числами (по умолчанию 1x1)
+
+### Производительность
+
+- Компонент использует оптимизации Svelte для минимизации перерисовок
+- Содержимое аккордеона рендерится только при его открытии (`{#if isOpen}`)
+- Используется эффективное объединение классов через `twMerge`
 
 ## Пропсы
 
@@ -21,7 +49,7 @@
 | `children`     | `Snippet`                                              | `undefined`           | Слот для содержимого, которое будет отображаться при открытии |
 | `image`        | `string`                                               | `""`                  | URL изображения для фона содержимого аккордеона               |
 
-## События
+### Колбэки
 
 Компонент не генерирует специфические события, но использует встроенную функцию `toggle()` для переключения состояния открытия/закрытия при клике на кнопку заголовка.
 
@@ -75,28 +103,6 @@
 </UI.Accordion>
 ```
 
-## Внутренняя архитектура
-
-### Реактивность
-
-- Переменная `isOpen` является реактивной и управляет состоянием отображения содержимого
-- Функция `toggle()` изменяет состояние `isOpen`, вызывая повторный рендеринг компонента
-
-### Сторы и зависимости
-
-- Используется стор `twMerge` для объединения Tailwind CSS классов
-- Применяется переход `slide` из `svelte/transition` для анимации открытия/закрытия
-
-### Директивы
-
-- `transition:slide` для анимации открытия/закрытия содержимого
-- `@render children` для отображения переданного содержимого
-- `bind:isOpen` в конструкторе свойств для двусторонней привязки состояния
-
-### Слоты
-
-- `children` - слот для содержимого, которое отображается внутри аккордеона при его открытии
-
 ## Конструктор свойств (AccordionProps.svelte)
 
 ### Описание
@@ -120,22 +126,29 @@
 - Использует систему локализации через `$T('constructor.props.*')`
 - Поддерживает валидацию числовых значений (min/max) для размеров
 
-## Заметки
+### Что настраивается
 
-### Адаптивность
+- Заголовок, иконка, «Открыт по умолчанию» — состояние при загрузке интерфейса
+- Картинка фона — изображение под содержимым (например схема устройства), поверх неё располагаются компоненты
 
-- Компонент использует Tailwind CSS для адаптивного дизайна
-- Сетка содержимого адаптируется под размеры экрана (sm:p-3)
-- Используются относительные единицы измерения для обеспечения масштабируемости
+## Внутреннее устройство
 
-### Ограничения
+### Реактивность
 
-- При использовании изображения фона высота строк сетки устанавливается в `minmax(6.5rem, auto)` вместо `auto`
-- Необходимо убедиться, что переданный компонент иконки является валидным Svelte компонентом или SVG строкой
-- Размеры сетки должны быть положительными числами (по умолчанию 1x1)
+- Переменная `isOpen` является реактивной и управляет состоянием отображения содержимого
+- Функция `toggle()` изменяет состояние `isOpen`, вызывая повторный рендеринг компонента
 
-### Производительность
+### Сторы и зависимости
 
-- Компонент использует оптимизации Svelte для минимизации перерисовок
-- Содержимое аккордеона рендерится только при его открытии (`{#if isOpen}`)
-- Используется эффективное объединение классов через `twMerge`
+- Используется стор `twMerge` для объединения Tailwind CSS классов
+- Применяется переход `slide` из `svelte/transition` для анимации открытия/закрытия
+
+### Директивы
+
+- `transition:slide` для анимации открытия/закрытия содержимого
+- `@render children` для отображения переданного содержимого
+- `bind:isOpen` в конструкторе свойств для двусторонней привязки состояния
+
+### Слоты
+
+- `children` - слот для содержимого, которое отображается внутри аккордеона при его открытии

package/dist/Button/README.md

@@ -1,8 +1,41 @@
 # Button Component
 
-## Описание
+## Назначение
 
-Кнопка - это интерактивный UI-компонент, который предоставляет возможность выполнения действий при клике. Компонент поддерживает настройку внешнего вида, иконок, информационных подсказок, горячих клавиш и другие параметры через систему пропсов.
+Отправляет команду на устройство по нажатию.
+
+## Пакет данных
+
+- По нажатию уходит пакет **Заголовок** + **Аргумент**, например `SET` + `Restart`
+- **Переменные** — текущие значения других компонентов кладутся в тот же пакет: так делается кнопка «Сохранить» для полей с аргументом `NoSend`
+- **Фиксированное значение** (JSON) — отправляется как есть вместо переменных, например `{"Mode": 2}`
+- Значение с устройства кнопка не показывает
+
+## Ключи
+
+| Ключ           | Описание                                                                                    |
+| -------------- | ------------------------------------------------------------------------------------------- |
+| `<переменные>` | имена через пробел (имя переменной не содержит пробелов), например `CFG.StaSSID CFG.StaPSK` |
+
+## Особенности
+
+### Адаптивность
+
+- Компонент использует Tailwind CSS для адаптивного дизайна
+- Используются относительные единицы измерения для обеспечения масштабируемости
+- Подсказки автоматически позиционируются в зависимости от стороны отображения
+
+### Ограничения
+
+- При использовании только иконки (без текста) кнопка становится прозрачной без фона
+- Горячие клавиши регистрируются глобально и могут конфликтовать с другими компонентами
+- Подсказки не поддерживают HTML-разметку, отображают только текст
+
+### Производительность
+
+- Компонент использует оптимизации Svelte для минимизации перерисовок
+- Обработчики клавиатуры удаляются при размонтировании компонента
+- Используется эффективное объединение классов через `twMerge`
 
 ## Пропсы
 
@@ -27,7 +60,7 @@
 | `keyBind.showHint`  | `boolean`                                              | `true`                | Показывать ли подсказку о горячих клавишах                                                                                                      |
 | `onClick`           | `() => void`                                           | `undefined`           | Обработчик клика по кнопке                                                                                                                      |
 
-## События
+### Колбэки
 
 | Название | Тип        | Описание                                                                |
 | -------- | ---------- | ----------------------------------------------------------------------- |
@@ -99,30 +132,6 @@
 </div>
 ```
 
-## Внутренняя архитектура
-
-### Реактивность
-
-- Переменная `showInfo` управляет видимостью информационной подсказки
-- Переменная `svgSize` вычисляет размеры SVG иконки на основе классов
-- Объект `tooltipConfig` содержит конфигурацию позиционирования подсказок
-
-### Сторы и зависимости
-
-- Используется стор `twMerge` для объединения Tailwind CSS классов
-- Применяется переход `fly` из `svelte/transition` для анимации подсказки
-- Используется `onMount` для подписки и отписки от глобальных событий клавиатуры
-
-### Директивы
-
-- `transition:fly` для анимации появления/скрытия информационной подсказки
-- Обработчики `onmouseenter` и `onmouseleave` для показа/скрытия подсказки
-- Обработчик `onclick` для активации кнопки
-
-### Слоты
-
-- Компонент не использует внешних слотов
-
 ## Конструктор свойств (ButtonProps.svelte)
 
 ### Описание
@@ -146,22 +155,30 @@
 - Использует систему локализации через `$T('constructor.props.*')`
 - Поддерживает валидацию вводимых данных через регулярные выражения
 
-## Заметки
+### Что настраивается
 
-### Адаптивность
+- Текст, иконка, цвет, подсказка при наведении
 
-- Компонент использует Tailwind CSS для адаптивного дизайна
-- Используются относительные единицы измерения для обеспечения масштабируемости
-- Подсказки автоматически позиционируются в зависимости от стороны отображения
+## Внутреннее устройство
 
-### Ограничения
+### Реактивность
 
-- При использовании только иконки (без текста) кнопка становится прозрачной без фона
-- Горячие клавиши регистрируются глобально и могут конфликтовать с другими компонентами
-- Подсказки не поддерживают HTML-разметку, отображают только текст
+- Переменная `showInfo` управляет видимостью информационной подсказки
+- Переменная `svgSize` вычисляет размеры SVG иконки на основе классов
+- Объект `tooltipConfig` содержит конфигурацию позиционирования подсказок
 
-### Производительность
+### Сторы и зависимости
 
-- Компонент использует оптимизации Svelte для минимизации перерисовок
-- Обработчики клавиатуры удаляются при размонтировании компонента
-- Используется эффективное объединение классов через `twMerge`
+- Используется стор `twMerge` для объединения Tailwind CSS классов
+- Применяется переход `fly` из `svelte/transition` для анимации подсказки
+- Используется `onMount` для подписки и отписки от глобальных событий клавиатуры
+
+### Директивы
+
+- `transition:fly` для анимации появления/скрытия информационной подсказки
+- Обработчики `onmouseenter` и `onmouseleave` для показа/скрытия подсказки
+- Обработчик `onclick` для активации кнопки
+
+### Слоты
+
+- Компонент не использует внешних слотов

package/dist/Carousel/README.md

@@ -1,8 +1,32 @@
 # Carousel Component
 
-## Описание
+## Назначение
 
-Карусель - это интерактивный UI-компонент, который позволяет просматривать контент в виде прокручиваемой ленты с возможностью навигации по стрелкам.
+Прокручиваемая лента карточек с навигацией стрелками — в GUIPreview облака и WebApp переключает модули устройства.
+
+## Пакет данных
+
+Не связан с устройством — содержимое передаётся снаружи.
+
+## Особенности
+
+### Адаптивность
+
+- Компонент использует Tailwind CSS для адаптивного дизайна
+- Стрелки навигации автоматически скрываются при достижении начала или конца карусели
+- Используются относительные единицы измерения для обеспечения масштабируемости
+
+### Ограничения
+
+- Для корректного отображения элементы внутри карусели должны иметь фиксированную ширину
+- Компонент не поддерживает вертикальную прокрутку
+- Значение `scrollValue` влияет на величину прокрутки при нажатии стрелок
+
+### Производительность
+
+- Компонент использует оптимизации Svelte для минимизации перерисовок
+- Обработчики событий и `ResizeObserver` корректно удаляются при размонтировании
+- Используется эффективное объединение классов через `twMerge`
 
 ## Пропсы
 
@@ -16,7 +40,7 @@
 | `scrollValue`  | `number`  | `200`                 | Значение прокрутки при нажатии на стрелки (в пикселях)      |
 | `children`     | `Snippet` | `undefined`           | Слот для содержимого, которое будет отображаться в карусели |
 
-## События
+### Колбэки
 
 Компонент не принимает коллбэк-пропсы и не генерирует событий.
 
@@ -94,7 +118,7 @@
 </UI.Carousel>
 ```
 
-## Внутренняя архитектура
+## Внутреннее устройство
 
 ### Реактивность
 
@@ -118,23 +142,3 @@
 ### Слоты
 
 - `children` - слот для содержимого, которое отображается внутри карусели
-
-## Заметки
-
-### Адаптивность
-
-- Компонент использует Tailwind CSS для адаптивного дизайна
-- Стрелки навигации автоматически скрываются при достижении начала или конца карусели
-- Используются относительные единицы измерения для обеспечения масштабируемости
-
-### Ограничения
-
-- Для корректного отображения элементы внутри карусели должны иметь фиксированную ширину
-- Компонент не поддерживает вертикальную прокрутку
-- Значение `scrollValue` влияет на величину прокрутки при нажатии стрелок
-
-### Производительность
-
-- Компонент использует оптимизации Svelte для минимизации перерисовок
-- Обработчики событий и `ResizeObserver` корректно удаляются при размонтировании
-- Используется эффективное объединение классов через `twMerge`

package/dist/CommonSnippets.svelte

@@ -94,7 +94,6 @@
         | UI.IAccordionProps
         | UI.IInputProps
         | UI.ISwitchProps
-        | UI.IColorPickerProps
         | UI.ISliderProps
         | UI.IGraphProps
         | UI.ITableProps<object>
@@ -120,7 +119,6 @@
               | UI.IAccordionProps
               | UI.IInputProps
               | UI.ISwitchProps
-              | UI.IColorPickerProps
               | UI.ISliderProps
               | UI.IGraphProps
               | UI.ITableProps<object>
@@ -143,7 +141,6 @@
         | UI.IAccordionProps
         | UI.IInputProps
         | UI.ISwitchProps
-        | UI.IColorPickerProps
         | UI.ISliderProps
         | UI.IGraphProps
         | UI.ITableProps<object>
@@ -195,7 +192,7 @@
 {#snippet Readonly()}
   <UI.Switch
     label={{ name: $T("constructor.props.readonly") }}
-    value={Number((component.properties as UI.IColorPickerProps | UI.IInputProps | UI.IJoystickProps | UI.IWidgetProps).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)}
   />

package/dist/Divider/README.md

@@ -1,8 +1,27 @@
 # Divider Component
 
-## Описание
+## Назначение
 
-Разделитель — UI-компонент для визуального и/или пространственного разделения элементов, расположенных друг под другом в конструкторе интерфейса. Занимает столько места по высоте, сколько выделено ему в сетке (аналогично `Map`/`VideoViewer` — компонент реально резервирует указанную высоту, а не сжимается по контенту). Поддерживает два режима: видимая полоса или чистый отступ без линии, настраиваемую толщину и цвет полосы, и привязку полосы к верху/центру/низу выделенной области. Величина зазора вокруг полосы регулируется не отдельным пропсом, а высотой самого компонента в сетке конструктора.
+Визуально разделяет группы компонентов.
+
+## Пакет данных
+
+Не связан с устройством.
+
+## Особенности
+
+### Адаптивность
+
+- Ширина полосы всегда 100% ширины выделенной области, толщина настраивается отдельно
+- Величина зазора вокруг полосы не выделена в отдельный пропс намеренно — компонент всегда занимает полную высоту, выделенную ему в сетке конструктора (см. Ограничения), поэтому нужный зазор достигается изменением высоты самого компонента, а `anchor` определяет положение полосы внутри этой высоты
+
+### Ограничения
+
+- В превью (`GUIPreview.svelte`) компонент всегда получает явную высоту по размеру сетки (как `Map`/`VideoViewer`) — без этого пустая ячейка без компонента схлопывается почти в ноль, так как сетка превью не резервирует высоту неиспользуемых строк
+
+### Производительность
+
+- Компонент не содержит состояния и внутренних эффектов, перерисовывается только при изменении пропсов
 
 ## Пропсы
 
@@ -15,7 +34,7 @@
 | `color`        | `string`                        | `""`                  | Класс цвета полосы из общей палитры (`bg-max`, `bg-red`, `bg-yellow`, `bg-green`, `bg-blue`, `bg-purple`, `bg-gray`); при пустом значении полоса красится в нейтральный `--hairline-color`, при заданном `bg-*` — в `--bg-color` (как в `Button.svelte`) |
 | `anchor`       | `"top" \| "center" \| "bottom"` | `"center"`            | Положение полосы внутри выделенной компоненту высоты сетки                                                                                                                                                                                               |
 
-## События
+### Колбэки
 
 Компонент не генерирует специфические события.
 
@@ -51,25 +70,6 @@
 <UI.Divider type="empty" />
 ```
 
-## Внутренняя архитектура
-
-### Реактивность
-
-- Объект `anchorClass` определяет CSS-классы `justify-*` для положения полосы (`top`/`center`/`bottom`)
-
-### Сторы и зависимости
-
-- Используется `twMerge` для объединения Tailwind CSS классов
-
-### Директивы
-
-- `twMerge` для объединения классов обёртки и полосы
-- `$props()` для получения пропсов компонента
-
-### Слоты
-
-- Компонент не использует внешних слотов
-
 ## Конструктор свойств (DividerProps.svelte)
 
 ### Описание
@@ -90,17 +90,27 @@
 - `color` — переиспользует общий сниппет `CommonSnippets snippet="Colors"`, но привязан к собственному свойству `color`, а не к `wrapperClass`
 - `width` — числовой ввод (1-20 px)
 
-## Заметки
+### Что настраивается
 
-### Адаптивность
+- Тип: **линия** или **пустое место** (отступ без линии)
+- Привязка: линия сверху, по центру или снизу ячейки
+- Цвет и толщина линии
 
-- Ширина полосы всегда 100% ширины выделенной области, толщина настраивается отдельно
-- Величина зазора вокруг полосы не выделена в отдельный пропс намеренно — компонент всегда занимает полную высоту, выделенную ему в сетке конструктора (см. Ограничения), поэтому нужный зазор достигается изменением высоты самого компонента, а `anchor` определяет положение полосы внутри этой высоты
+## Внутреннее устройство
 
-### Ограничения
+### Реактивность
 
-- В превью (`GUIPreview.svelte`) компонент всегда получает явную высоту по размеру сетки (как `Map`/`VideoViewer`) — без этого пустая ячейка без компонента схлопывается почти в ноль, так как сетка превью не резервирует высоту неиспользуемых строк
+- Объект `anchorClass` определяет CSS-классы `justify-*` для положения полосы (`top`/`center`/`bottom`)
 
-### Производительность
+### Сторы и зависимости
 
-- Компонент не содержит состояния и внутренних эффектов, перерисовывается только при изменении пропсов
+- Используется `twMerge` для объединения Tailwind CSS классов
+
+### Директивы
+
+- `twMerge` для объединения классов обёртки и полосы
+- `$props()` для получения пропсов компонента
+
+### Слоты
+
+- Компонент не использует внешних слотов

package/dist/FileAttach/README.md

@@ -1,8 +1,41 @@
 # FileAttach Component
 
-## Описание
+## Назначение
 
-Прикрепление файла - это UI-компонент, который позволяет пользователям выбирать файлы или изображения с их устройства. Компонент поддерживает два режима работы: для обычных файлов и для изображений с предварительным просмотром.
+Закачивает выбранный файл в файловую систему устройства.
+
+## Пакет данных
+
+- После выбора файл уходит частями командой `SET FS`: `UploadStart` → `UploadChunk` → `UploadDone`
+- Файлы с устройства компонент не показывает
+
+## Ключи
+
+| Ключ   | Описание                                                |
+| ------ | ------------------------------------------------------- |
+| `Name` | имя файла, не длиннее 31 символа (ограничение прошивки) |
+
+## Особенности
+
+- Для списка файлов, удаления и прогресса закачки используйте виджет «Файловая система»
+
+### Адаптивность
+
+- Компонент использует Tailwind CSS для адаптивного дизайна
+- Изображения масштабируются с учетом режима (cover/contain)
+- Используются относительные единицы измерения для обеспечения масштабируемости
+
+### Ограничения
+
+- При работе с изображениями компонент автоматически создает URL предварительного просмотра
+- Принимаемые MIME-типы определяются строкой `accept`, которая должна соответствовать спецификации HTML
+- Для изображений поддерживается только предварительный просмотр, сохранение происходит через обработчик
+
+### Производительность
+
+- Компонент использует оптимизации Svelte для минимизации перерисовок
+- URL предварительного просмотра создаются только при необходимости
+- Используется эффективное объединение классов через `twMerge`
 
 ## Пропсы
 
@@ -25,7 +58,7 @@
 | `currentImage`      | `string \| null`                             | `""`                  | Текущее изображение (для связывания)                             |
 | `onChange`          | `(event: Event, file: File \| null) => void` | `() => {}`            | Обработчик изменения файла                                       |
 
-## События
+### Колбэки
 
 | Название | Тип                                        | Описание                                                                                    |
 | -------- | ------------------------------------------ | ------------------------------------------------------------------------------------------- |
@@ -94,29 +127,6 @@
 />
 ```
 
-## Внутренняя архитектура
-
-### Реактивность
-
-- Переменная `previewUrl` вычисляет URL для предварительного просмотра изображения (из `currentImage` или из только что выбранного файла)
-- Переменная `fileName` хранит имя выбранного файла
-- Объект `ID` генерирует уникальный идентификатор для элемента ввода
-
-### Сторы и зависимости
-
-- Используется стор `twMerge` для объединения Tailwind CSS классов
-- Используется `URL.createObjectURL` для мгновенного превью выбранного файла — предыдущий blob-URL отзывается через `URL.revokeObjectURL` перед созданием нового и при размонтировании компонента
-
-### Директивы
-
-- `bind:currentImage` для двусторонней привязки текущего изображения
-- Обработчик `onchange` для отслеживания изменения файла
-- Обработчик `onclick` для активации выбора файла
-
-### Слоты
-
-- Компонент не использует внешних слотов
-
 ## Конструктор свойств (FileAttachProps.svelte)
 
 ### Описание
@@ -139,22 +149,30 @@
 - Имеет различные наборы полей в зависимости от режима (`forConstructor`)
 - Использует систему локализации через `$T('constructor.props.*')`
 
-## Заметки
+### Что настраивается
 
-### Адаптивность
+- Вид: **Файл** — кнопка с именем выбранного файла; **Изображение** — квадратное превью, картинка сразу показывается локально
+- «Допустимые файлы» (`accept`) — фильтр в окне выбора, например `.bin, .pem`
 
-- Компонент использует Tailwind CSS для адаптивного дизайна
-- Изображения масштабируются с учетом режима (cover/contain)
-- Используются относительные единицы измерения для обеспечения масштабируемости
+## Внутреннее устройство
 
-### Ограничения
+### Реактивность
 
-- При работе с изображениями компонент автоматически создает URL предварительного просмотра
-- Принимаемые MIME-типы определяются строкой `accept`, которая должна соответствовать спецификации HTML
-- Для изображений поддерживается только предварительный просмотр, сохранение происходит через обработчик
+- Переменная `previewUrl` вычисляет URL для предварительного просмотра изображения (из `currentImage` или из только что выбранного файла)
+- Переменная `fileName` хранит имя выбранного файла
+- Объект `ID` генерирует уникальный идентификатор для элемента ввода
 
-### Производительность
+### Сторы и зависимости
 
-- Компонент использует оптимизации Svelte для минимизации перерисовок
-- URL предварительного просмотра создаются только при необходимости
-- Используется эффективное объединение классов через `twMerge`
+- Используется стор `twMerge` для объединения Tailwind CSS классов
+- Используется `URL.createObjectURL` для мгновенного превью выбранного файла — предыдущий blob-URL отзывается через `URL.revokeObjectURL` перед созданием нового и при размонтировании компонента
+
+### Директивы
+
+- `bind:currentImage` для двусторонней привязки текущего изображения
+- Обработчик `onchange` для отслеживания изменения файла
+- Обработчик `onclick` для активации выбора файла
+
+### Слоты
+
+- Компонент не использует внешних слотов