@dxtmisha/wiki 0.24.1 → 0.24.3

package/src/media/mdx/MotionTransform/animationHeadPosition.en.mdx

@@ -2,29 +2,17 @@
 
 The `animationHeadPosition` property controls how the Head area behaves during show/hide animations.
 
-```
-animationHeadPosition?: 'top' | 'toBottom'
-```
-
-### Values
-
-- **`top`** — Keeps the Head at the top during transition (default)
-- **`toBottom`** — Animates the Head toward the bottom together with content
+**Possible values:**
 
-### When to use
+- `'top'` — keeps the Head at the top during transition (default)
+- `'toBottom'` — animates the Head toward the bottom together with content
 
-- **Collapsing layouts** — When the header should travel with expanding/collapsing content
-- **Smooth transitions** — For creating more natural motion perception
-- **Content hierarchy** — When header position affects content flow understanding
+Synchronizes header movement with content animation using CSS transforms for smooth transitions. Suitable for collapsing layouts when the header should travel with expanding content. When the `section` property is enabled (set to `true`), the `animationHeadPosition` parameter is ignored and does not affect animation behavior.
 
-### Features
+```html
+<!-- Head stays at top -->
+<MotionTransform animationHeadPosition="top" />
 
-- **Motion coordination** — Synchronizes header movement with content animation
-- **Flexible positioning** — Adapts to different layout requirements
-- **Performance optimized** — Uses CSS transforms for smooth animations
-
-### Limitations
-
-- **When `section` is enabled** — If the `section` property is set to `true`, then `animationHeadPosition` is ignored and does not affect animation behavior
-
-> Combine with `animationShow` to fine‑tune the overall motion experience.
+<!-- Head moves down with content -->
+<MotionTransform animationHeadPosition="toBottom" />
+```

package/src/media/mdx/MotionTransform/animationHeadPosition.ru.mdx

@@ -2,29 +2,17 @@
 
 Свойство `animationHeadPosition` определяет поведение области Head во время анимаций показа/скрытия.
 
-```
-animationHeadPosition?: 'top' | 'toBottom'
-```
-
-### Значения
-
-- **`top`** — Сохраняет Head вверху во время перехода (по умолчанию)
-- **`toBottom`** — Анимирует Head вниз вместе с контентом
+**Возможные значения:**
 
-### Когда использовать
+- `'top'` — сохраняет Head вверху во время перехода (по умолчанию)
+- `'toBottom'` — анимирует Head вниз вместе с контентом
 
-- **Сворачиваемые макеты** — Когда заголовок должен перемещаться вместе с разворачивающимся/сворачивающимся содержимым
-- **Плавные переходы** — Для создания более естественного восприятия движения
-- **Иерархия контента** — Когда позиция заголовка влияет на понимание потока содержимого
+Синхронизирует движение заголовка с анимацией контента, используя CSS-трансформации для плавных переходов. Подходит для сворачиваемых макетов, когда заголовок должен перемещаться вместе с разворачивающимся содержимым. При включенном свойстве `section` (установлено в `true`) параметр `animationHeadPosition` игнорируется и не влияет на поведение анимации.
 
-### Особенности
+```html
+<!-- Head остается вверху -->
+<MotionTransform animationHeadPosition="top" />
 
-- **Координация движения** — Синхронизирует движение заголовка с анимацией контента
-- **Гибкое позиционирование** — Адаптируется к различным требованиям макета
-- **Оптимизация производительности** — Использует CSS-трансформации для плавных анимаций
-
-### Ограничения
-
-- **При включенном `section`** — Если свойство `section` установлено в `true`, то `animationHeadPosition` игнорируется и не влияет на поведение анимации
-
-> Комбинируйте с `animationShow` для точной настройки общего восприятия движения.
+<!-- Head движется вниз с контентом -->
+<MotionTransform animationHeadPosition="toBottom" />
+```

package/src/media/mdx/MotionTransform/classes.en.mdx

@@ -1,32 +1,25 @@
-## Helper Classes
+## CSS Classes for Behavior Control
 
-The MotionTransform component provides a set of helper CSS classes to manage the states and styling of its elements.
+**State classes:**
 
-### State Classes
+- `*--open` — component is fully open and its content is visible
+- `*--show` — component is visible or in the process of open/close animation
+- `*--window` — component operates in window mode (with teleportation)
+- `*--click` — added briefly on click for feedback effects
 
-These classes are dynamically added to the component's root element to reflect its current state.
+**Control classes:**
 
-- **`*--open`**: Indicates that the component is fully open and its content is visible.
-- **`*--show`**: Added when the component is visible or in the process of an open/close animation. Useful for managing transitions.
-- **`*--window`**: Applied when the component is operating in a window-like mode (e.g., with teleportation).
-- **`*--click`**: Added briefly on click for creating feedback effects.
+- `*--close` — applied to element to trigger MotionTransform closing on click
+- `*--none` — disables default behavior (open/close) for the element
+- `*--noneGlobal` — globally disables MotionTransform events
 
-### Control Classes
+**Element classes:**
 
-These classes can be added to child elements to control the component's behavior.
-
-- **`*--close`**: Applied to an element that should trigger the closing of MotionTransform on click.
-- **`*--none`**: Disables the default behavior (e.g., open/close) for the element it is applied to.
-- **`*--noneGlobal`**: Globally disables MotionTransform-related events while this class is present on an element.
-
-### Element Classes
-
-These classes are used for styling the internal parts of the component.
-
-- **`*__context`**: Class for the context element, which can be used for positioning.
-- **`*__head`**: Class for the header area, which often acts as a trigger.
-- **`*__body`**: Class for the content area that appears and disappears.
-- **`*__backdrop`**: Class for the backdrop element, which can be used to create an overlay effect.
-- **`*__scrim`**: Class for the scrim layer, often used in modal modes.
-- **`*__clickNone`**: Class for an element that should ignore clicks.
+- `*__context` — class for context element for positioning
+- `*__head` — class for header area that acts as a trigger
+- `*__body` — class for content area that appears and disappears
+- `*__backdrop` — class for backdrop element to create overlay effect
+- `*__scrim` — class for scrim layer in modal modes
+- `*__clickNone` — class for element that ignores clicks
 
+Where `*` is the component class name (e.g., `d1-motion-transform`, `m3-motion-transform`).

package/src/media/mdx/MotionTransform/classes.ru.mdx

@@ -1,32 +1,25 @@
-## Вспомогательные классы
+## CSS классы для управления поведением
 
-Компонент MotionTransform предоставляет набор вспомогательных CSS-классов для управления состояниями и стилизации его элементов.
+**Классы состояний:**
 
-### Классы состояний
+- `*--open` — компонент полностью открыт и его содержимое видимо
+- `*--show` — компонент видим или находится в процессе анимации открытия/закрытия
+- `*--window` — компонент работает в режиме окна (с телепортацией)
+- `*--click` — добавляется на короткое время при клике для эффектов обратной связи
 
-Эти классы динамически добавляются к корневому элементу компонента для отражения его текущего состояния.
+**Классы управления:**
 
-- **`*--open`**: Указывает, что компонент полностью открыт и его содержимое видимо.
-- **`*--show`**: Добавляется, когда компонент видим или находится в процессе анимации открытия/закрытия. Полезен для управления переходами.
-- **`*--window`**: Применяется, когда компонент работает в режиме, подобном окну (например, с телепортацией).
-- **`*--click`**: Добавляется на короткое время при клике на компонент, позволяя создавать эффекты обратной связи.
+- `*--close` — применяется к элементу для закрытия MotionTransform при клике
+- `*--none` — отключает стандартное поведение (открытие/закрытие) для элемента
+- `*--noneGlobal` — глобально отключает события MotionTransform
 
-### Классы управления
+**Классы элементов:**
 
-Эти классы можно добавлять к дочерним элементам для управления поведением компонента.
-
-- **`*--close`**: Применяется к элементу, который должен инициировать закрытие MotionTransform при клике.
-- **`*--none`**: Отключает стандартное поведение (например, открытие/закрытие) для элемента, на котором он установлен.
-- **`*--noneGlobal`**: Глобально отключает события, связанные с MotionTransform, пока этот класс присутствует на элементе.
-
-### Классы элементов
-
-Эти классы используются для стилизации внутренних частей компонента.
-
-- **`*__context`**: Класс для контекстного элемента, который может использоваться для позиционирования.
-- **`*__head`**: Класс для области заголовка, которая часто выступает в роли триггера.
-- **`*__body`**: Класс для области содержимого, которая появляется и исчезает.
-- **`*__backdrop`**: Класс для элемента заднего фона, который может использоваться для создания эффекта наложения.
-- **`*__scrim`**: Класс для затемняющего слоя, часто используемого в модальных режимах.
-- **`*__clickNone`**: Класс для элемента, который должен игнорировать клики.
+- `*__context` — класс для контекстного элемента для позиционирования
+- `*__head` — класс для области заголовка, которая выступает в роли триггера
+- `*__body` — класс для области содержимого, которая появляется и исчезает
+- `*__backdrop` — класс для элемента заднего фона для создания эффекта наложения
+- `*__scrim` — класс для затемняющего слоя в модальных режимах
+- `*__clickNone` — класс для элемента, который игнорирует клики
 
+Где `*` — название класса компонента (например, `d1-motion-transform`, `m3-motion-transform`).

package/src/media/mdx/MotionTransform/events.en.mdx

@@ -1,51 +1,39 @@
 ### `transform`
 
-Event that triggers when MotionTransform state changes with full event context.
-
-```
-@transform="onTransform"
-```
+Event fires when MotionTransform state changes with full event context.
+
+**Parameters:**
+- `event: Event | undefined` — DOM event that triggered the change (if any)
+- `options: MotionTransformEmitOptions` — object with transform data
+
+**MotionTransformEmitOptions structure:**
+- `type: 'head' | 'body' | 'top' | 'script'` — area type that initiated the event
+- `open: boolean` — current open state (`true` - open, `false` - closed)
+
+```html
+<script setup>
+const handleTransform = (event, options) => {
+  console.log('Event:', event)
+  console.log('Type:', options.type)
+  console.log('Open state:', options.open)
+}
+</script>
 
-Handler signature:
-```
-function onTransform (event: Event | undefined, options: MotionTransformEmitOptions)
+<template>
+  <MotionTransform @transform="handleTransform">
+    <template #head>
+      <div>Header</div>
+    </template>
+    <template #body>
+      <p>Content</p>
+    </template>
+  </MotionTransform>
+</template>
 ```
 
-Parameters:
-- `event` — the DOM event that triggered the change (if any)
-- `options` — transform data: type, open state
-
 ### `transformLite`
 
-Lightweight event that triggers when MotionTransform state changes without event context.
-
-```
-@transform-lite="onTransformLite"
-```
-
-Handler signature:
-```
-function onTransformLite (options: MotionTransformEmitOptions)
-```
-
-Parameters:
-- `options` — transform data: type ('head' | 'body' | 'top' | 'script') and open state
-
-#### MotionTransformEmitOptions
-
-Object with transform state data passed to event handlers.
-
-```
-MotionTransformEmitOptions: {
-  type: 'head' | 'body' | 'top' | 'script'
-  open: boolean
-}
-```
+Event fires when MotionTransform state changes without DOM event context (lightweight version).
 
-Fields:
-- **`type`** — the area type that initiated the event:
-  - `'head'` — header area
-  - `'body'` — content area
-  - `'top'` — top area
-  - `'script'` — programmatic change
-- **`open`** — current open state (true = open, false = closed)
+**Parameters:**
+- `options: MotionTransformEmitOptions` — object with transform data

package/src/media/mdx/MotionTransform/events.ru.mdx

@@ -1,51 +1,39 @@
 ### `transform`
 
-Событие, которое срабатывает при изменении состояния MotionTransform с полным контекстом события.
-
-```
-@transform="onTransform"
-```
+Событие срабатывает при изменении состояния MotionTransform с полным контекстом события.
+
+**Параметры:**
+- `event: Event | undefined` — DOM-событие, которое вызвало изменение (если есть)
+- `options: MotionTransformEmitOptions` — объект с данными трансформации
+
+**Структура MotionTransformEmitOptions:**
+- `type: 'head' | 'body' | 'top' | 'script'` — тип области, которая инициировала событие
+- `open: boolean` — текущее состояние открытия (`true` - открыто, `false` - закрыто)
+
+```html
+<script setup>
+const handleTransform = (event, options) => {
+  console.log('Событие:', event)
+  console.log('Тип:', options.type)
+  console.log('Состояние открытия:', options.open)
+}
+</script>
 
-Сигнатура обработчика:
-```
-function onTransform (event: Event | undefined, options: MotionTransformEmitOptions)
+<template>
+  <MotionTransform @transform="handleTransform">
+    <template #head>
+      <div>Заголовок</div>
+    </template>
+    <template #body>
+      <p>Содержимое</p>
+    </template>
+  </MotionTransform>
+</template>
 ```
 
-Параметры:
-- `event` — DOM‑событие, которое вызвало изменение (если есть)
-- `options` — данные трансформации: тип, состояние открытия
-
 ### `transformLite`
 
-Облегчённое событие, которое срабатывает при изменении состояния MotionTransform без контекста события.
-
-```
-@transform-lite="onTransformLite"
-```
-
-Сигнатура обработчика:
-```
-function onTransformLite (options: MotionTransformEmitOptions)
-```
-
-Параметры:
-- `options` — данные трансформации: тип ('head' | 'body' | 'top' | 'script') и состояние открытия
-
-#### MotionTransformEmitOptions
-
-Объект с данными о состоянии трансформации, передаваемый в обработчики событий.
-
-```
-MotionTransformEmitOptions: {
-  type: 'head' | 'body' | 'top' | 'script'
-  open: boolean
-}
-```
+Событие срабатывает при изменении состояния MotionTransform без контекста DOM-события (облегчённая версия).
 
-Поля:
-- **`type`** — тип области, которая инициировала событие:
-  - `'head'` — область заголовка
-  - `'body'` — область содержимого
-  - `'top'` — верхняя область
-  - `'script'` — программное изменение
-- **`open`** — текущее состояние открытия (true = открыто, false = закрыто)
+**Параметры:**
+- `options: MotionTransformEmitOptions` — объект с данными трансформации

package/src/media/mdx/MotionTransform/expose.isShow.en.mdx

@@ -1,7 +1,5 @@
 ### `isShow`
 
-Computed property that indicates whether the component is currently shown or being prepared for display.
+Computed state indicating whether the component is displayed or being prepared for display (including animation state).
 
-```
-readonly isShow: ComputedRef<boolean>
-```
+**Type:** `ComputedRef<boolean>`

package/src/media/mdx/MotionTransform/expose.isShow.ru.mdx

@@ -1,7 +1,5 @@
 ### `isShow`
 
-Вычисляемое свойство, которое указывает, отображается ли компонент в данный момент или идет подготовка к отображению.
+Вычисляемое состояние, указывающее отображается ли компонент или готовится к отображению (включая состояние анимации).
 
-```
-readonly isShow: ComputedRef<boolean>
-```
+**Тип:** `ComputedRef<boolean>`

package/src/media/mdx/MotionTransform/ignore.en.mdx

@@ -1,34 +1,32 @@
 ## Ignore zones
 
-Properties that exclude elements from outside-click checks and auto-close logic: `ignore` accepts a DOM element or selector, while `ignoreSelector` accepts any CSS selector for multiple/dynamic matches.
+Properties that exclude elements from outside-click checks and auto-close logic.
 
-```
-ignore?: HTMLElement | string
-ignoreSelector?: string
-```
-
-### Properties
+**Properties:**
 
-- **`ignore`** — Element reference or CSS selector to exclude from outside-click detection
-- **`ignoreSelector`** — CSS selector that can match multiple elements for exclusion
+- `ignore` — DOM element reference or CSS selector to exclude from outside-click detection
+- `ignoreSelector` — CSS selector to exclude multiple elements simultaneously
 
-### When to use
+Both properties work together during outside-click evaluation. `ignore` is more precise and faster for single elements, can reference a specific DOM element directly. `ignoreSelector` is more flexible, can match multiple elements with a single selector, better suited for dynamic content. Use for trigger buttons, helper controls, and nested interactive areas.
 
-- **Trigger buttons** — Prevent the trigger from closing the component when clicked
-- **Helper controls** — Keep auxiliary UI elements from interfering with auto-close
-- **Nested interactive areas** — Maintain functionality of embedded components
-- **Dynamic content** — Handle elements that appear/disappear during interaction
+```html
+<script setup>
+import { ref } from 'vue'
 
-### Comparison
+const triggerButton = ref()
+</script>
 
-- **`ignore`** — More precise, can reference a specific DOM element directly
-- **`ignoreSelector`** — More flexible, can match multiple elements with a single selector
-- **Performance** — `ignore` is faster for single elements, `ignoreSelector` is better for collections
+<template>
+  <!-- Ignoring specific element -->
+  <MotionTransform :ignore="triggerButton" />
 
-### Features
+  <!-- Ignoring by selector -->
+  <MotionTransform ignoreSelector=".trigger-button" />
 
-- **Event coordination** — Both properties work together during outside-click evaluation
-- **Selector flexibility** — Support for any valid CSS selector patterns
-- **Dynamic updates** — Changes are reflected immediately in click detection
-
-> Keep selectors specific to avoid unintended matches that could prevent auto-close functionality.
+  <!-- Combining both properties -->
+  <MotionTransform
+    :ignore="triggerButton"
+    ignoreSelector=".helper-controls"
+  />
+</template>
+```

package/src/media/mdx/MotionTransform/ignore.ru.mdx

@@ -1,34 +1,32 @@
 ## Зоны игнорирования
 
-Свойства для исключения элементов из проверок клика снаружи и логики автозакрытия: `ignore` принимает ссылку на DOM‑элемент или селектор, `ignoreSelector` — любой CSS‑селектор для множественных/динамических совпадений.
+Свойства для исключения элементов из проверок клика снаружи и логики автозакрытия.
 
-```
-ignore?: HTMLElement | string
-ignoreSelector?: string
-```
-
-### Свойства
+**Свойства:**
 
-- **`ignore`** — Ссылка на элемент или CSS‑селектор для исключения из обнаружения внешних кликов
-- **`ignoreSelector`** — CSS‑селектор, который может соответствовать нескольким элементам для исключения
+- `ignore` — ссылка на DOM-элемент или CSS-селектор для исключения из обнаружения внешних кликов
+- `ignoreSelector` — CSS-селектор для исключения нескольких элементов одновременно
 
-### Когда использовать
+Оба свойства работают вместе при оценке внешних кликов. `ignore` более точный и быстрее для одиночных элементов, может ссылаться на конкретный DOM-элемент напрямую. `ignoreSelector` более гибкий, может соответствовать нескольким элементам одним селектором, лучше подходит для динамического контента. Используйте для кнопок-триггеров, вспомогательных элементов и вложенных интерактивных областей.
 
-- **Кнопки‑триггеры** — Предотвращение закрытия компонента при клике на триггер
-- **Вспомогательные элементы** — Сохранение функциональности дополнительных UI‑элементов
-- **Вложенные интерактивные области** — Поддержка функциональности встроенных компонентов
-- **Динамический контент** — Обработка элементов, которые появляются/исчезают во время взаимодействия
+```html
+<script setup>
+import { ref } from 'vue'
 
-### Сравнение
+const triggerButton = ref()
+</script>
 
-- **`ignore`** — Более точный, может ссылаться на конкретный DOM‑элемент напрямую
-- **`ignoreSelector`** — Более гибкий, может соответствовать нескольким элементам одним селектором
-- **Производительность** — `ignore` быстрее для одиночных элементов, `ignoreSelector` лучше для коллекций
+<template>
+  <!-- Игнорирование конкретного элемента -->
+  <MotionTransform :ignore="triggerButton" />
 
-### Особенности
+  <!-- Игнорирование по селектору -->
+  <MotionTransform ignoreSelector=".trigger-button" />
 
-- **Координация событий** — Оба свойства работают вместе при оценке внешних кликов
-- **Гибкость селекторов** — Поддержка любых валидных паттернов CSS‑селекторов
-- **Динамические обновления** — Изменения сразу отражаются в обнаружении кликов
-
-> Делайте селекторы специфичными, чтобы избежать непреднамеренных совпадений, которые могут помешать функциональности автозакрытия.
+  <!-- Комбинация обоих свойств -->
+  <MotionTransform
+    :ignore="triggerButton"
+    ignoreSelector=".helper-controls"
+  />
+</template>
+```

package/src/media/mdx/MotionTransform/motionTransform.en.mdx

@@ -1,22 +1,51 @@
-MotionTransform is a low-level utility that orchestrates element transforms, state transitions, and interaction flows for window-like UI. It centralizes open/show/teleport flags, measures size, updates CSS variables, and coordinates events for smooth, predictable motion.
+Low-level utility for managing element transforms, state transitions, and interaction flows in components with window-like behavior.
 
-### Purpose
+MotionTransform centralizes management of open/show/teleport states, measures element sizes, updates CSS variables, and coordinates events to create smooth and predictable animations. Provides unified API for component visibility control, click handling, and automatic closing with support for ignore zones.
 
-- **Centralized motion control** — Unified API for managing component visibility and animation states
-- **Event coordination** — Handles click interactions, auto-close behavior, and ignore zones
-- **Performance optimization** — Efficient DOM manipulation and CSS variable updates
-- **Developer experience** — Clean separation between UI logic and motion mechanics
+**Key Features:**
 
-### Core capabilities
+- Centralized state management (open, show, teleport)
+- Click event and auto-close coordination
+- Size measurement and CSS variable updates
+- DOM helpers for working with refs, portals, and classes
+- Programmatic control through imperative methods
+- Configurable event ignore zones
+- Optimized DOM manipulation
 
-- **State management** — Computed accessors for open, show, teleport with simple control API
-- **Element handling** — DOM helpers for refs, portals, and class bindings
-- **Size coordination** — Measurements and CSS variables to drive smooth transitions
-- **Event processing** — Click/auto-close handling with configurable ignore zones
-- **Programmatic control** — Imperative methods to open/close and synchronize component flows
+**Typical Use Cases:**
 
-### Integration
+- Base utility for Window, Menu, Dialog components
+- Managing open/close animations
+- State coordination in popup elements
+- Component library development with window-like behavior
 
-MotionTransform is designed as a foundational utility for component developers. Use it inside higher-level components when you need consistent behavior, predictable transitions, and clean separation between UI and motion logic.
+```html
+<script setup>
+import { ref } from 'vue'
+import { MotionTransform } from '@dxtmisha/constructor'
 
-> This is a low-level utility intended for component library development rather than direct application use.
+const element = ref()
+const elementContext = ref()
+
+const motion = new MotionTransform(
+  { open: false, autoClose: true },
+  // ...other params
+)
+
+// Programmatic control
+motion.go.toOpen()
+motion.go.toClose()
+
+// State access
+const isOpen = motion.state.isOpen
+const isShow = motion.state.isShow
+</script>
+
+<template>
+  <div ref="element">
+    <!-- Content with managed transform -->
+  </div>
+</template>
+```
+
+> This is a low-level utility for component library development, not intended for direct use in applications.

package/src/media/mdx/MotionTransform/motionTransform.ru.mdx

@@ -1,22 +1,51 @@
- MotionTransform — низкоуровневая утилита, которая управляет трансформациями элементов, переходами состояний и событиями взаимодействия для «оконного» поведения UI. Централизует флаги open/show/teleport, измеряет размеры, обновляет CSS‑переменные и координирует события для плавных анимаций.
+Низкоуровневая утилита для управления трансформациями элементов, переходами состояний и потоками взаимодействия в компонентах с оконным поведением.
 
-### Назначение
+MotionTransform централизует управление состояниями открытия/отображения/телепортации, измеряет размеры элементов, обновляет CSS-переменные и координирует события для создания плавных и предсказуемых анимаций. Предоставляет единый API для работы с видимостью компонентов, обработки кликов и автоматического закрытия с поддержкой игнорируемых зон.
 
-- **Централизованное управление движением** — Единый API для управления видимостью компонентов и состояниями анимации
-- **Координация событий** — Обрабатывает клики, поведение автозакрытия и зоны игнорирования
-- **Оптимизация производительности** — Эффективная DOM‑манипуляция и обновление CSS‑переменных
-- **Удобство разработки** — Чёткое разделение между UI‑логикой и механикой движения
+**Основные возможности:**
 
-### Основные возможности
+- Централизованное управление состояниями (open, show, teleport)
+- Координация событий кликов и автозакрытия
+- Измерение размеров и обновление CSS-переменных
+- DOM-хелперы для работы с refs, порталами и классами
+- Программное управление через императивные методы
+- Настраиваемые зоны игнорирования событий
+- Оптимизированная работа с DOM
 
-- **Управление состоянием** — Вычисляемые аксессоры для open, show, teleport с простым API управления
-- **Работа с элементами** — DOM‑помощники для ссылок, порталов и привязки классов
-- **Координация размеров** — Измерения и CSS‑переменные для управления плавными переходами
-- **Обработка событий** — Обработка кликов/автозакрытия с настраиваемыми зонами игнорирования
-- **Программное управление** — Императивные методы для открытия/закрытия и синхронизации потоков компонентов
+**Типичные сценарии использования:**
 
-### Интеграция
+- Базовая утилита для компонентов Window, Menu, Dialog
+- Управление анимациями открытия/закрытия
+- Координация состояний в всплывающих элементах
+- Разработка библиотек компонентов с оконным поведением
 
-MotionTransform предназначена как базовая утилита для разработчиков компонентов. Используйте её внутри компонентов верхнего уровня, когда нужна согласованность поведения, предсказуемые переходы и чёткое разделение UI и логики движения.
+```html
+<script setup>
+import { ref } from 'vue'
+import { MotionTransform } from '@dxtmisha/constructor'
 
-> Это низкоуровневая утилита, предназначенная для разработки библиотек компонентов, а не для прямого использования в приложениях.
+const element = ref()
+const elementContext = ref()
+
+const motion = new MotionTransform(
+  { open: false, autoClose: true },
+  // ...other params
+)
+
+// Программное управление
+motion.go.toOpen()
+motion.go.toClose()
+
+// Доступ к состояниям
+const isOpen = motion.state.isOpen
+const isShow = motion.state.isShow
+</script>
+
+<template>
+  <div ref="element">
+    <!-- Контент с управляемой трансформацией -->
+  </div>
+</template>
+```
+
+> Это низкоуровневая утилита для разработки библиотек компонентов, не предназначенная для прямого использования в приложениях.