@dxtmisha/wiki 0.39.3 → 0.39.5

package/src/media/mdx/MotionAxis/v-model.ru.mdx

@@ -0,0 +1,30 @@
+## Управление состоянием через v-model
+
+Двусторонняя привязка выбранного слайда через `v-model:selected`.
+
+**Параметры:**
+- `selected: string | number` — идентификатор выбранного слайда
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref('slide1')
+</script>
+
+<template>
+  <div class="buttons">
+    <button @click="selected = 'slide1'">Слайд 1</button>
+    <button @click="selected = 'slide2'">Слайд 2</button>
+  </div>
+
+  <MotionAxis v-model:selected="selected">
+    <template #slide1>
+      <div>Контент слайда 1</div>
+    </template>
+    <template #slide2>
+      <div>Контент слайда 2</div>
+    </template>
+  </MotionAxis>
+</template>
+```

package/src/media/mdx/MotionAxis/wikiMdxMotionAxis.ts

@@ -0,0 +1,49 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import classesEn from './classes.en.mdx'
+import classesRu from './classes.ru.mdx'
+import eventEn from './event.en.mdx'
+import eventRu from './event.ru.mdx'
+import exposeEn from './expose.en.mdx'
+import exposeRu from './expose.ru.mdx'
+import motionAxisEn from './motionAxis.en.mdx'
+import motionAxisRu from './motionAxis.ru.mdx'
+import slotsEn from './slots.en.mdx'
+import slotsRu from './slots.ru.mdx'
+import vModelEn from './v-model.en.mdx'
+import vModelRu from './v-model.ru.mdx'
+
+/**
+ * MDX files for MotionAxis component
+ *
+ * MDX файлы для компонента MotionAxis
+ */
+export const wikiMdxMotionAxis: StorybookComponentsMdxItem = {
+  name: 'MotionAxis',
+  descriptions: {
+    'classes': {
+      en: classesEn,
+      ru: classesRu
+    },
+    'events': {
+      en: eventEn,
+      ru: eventRu
+    },
+    'expose': {
+      en: exposeEn,
+      ru: exposeRu
+    },
+    'motionAxis': {
+      en: motionAxisEn,
+      ru: motionAxisRu
+    },
+    'slots': {
+      en: slotsEn,
+      ru: slotsRu
+    },
+    'v-model': {
+      en: vModelEn,
+      ru: vModelRu
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+## Head position animation
+
+The `animationHeadPosition` property controls how the Head area behaves during show/hide animations.
+
+**Possible values:**
+
+- `'top'` — keeps the Head at the top during transition (default)
+- `'toBottom'` — animates the Head toward the bottom together with content
+
+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.
+
+```html
+<!-- Head stays at top -->
+<MotionTransform animationHeadPosition="top" />
+
+<!-- Head moves down with content -->
+<MotionTransform animationHeadPosition="toBottom" />
+```

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

@@ -0,0 +1,18 @@
+## Анимация позиции заголовка
+
+Свойство `animationHeadPosition` определяет поведение области Head во время анимаций показа/скрытия.
+
+**Возможные значения:**
+
+- `'top'` — сохраняет Head вверху во время перехода (по умолчанию)
+- `'toBottom'` — анимирует Head вниз вместе с контентом
+
+Синхронизирует движение заголовка с анимацией контента, используя CSS-трансформации для плавных переходов. Подходит для сворачиваемых макетов, когда заголовок должен перемещаться вместе с разворачивающимся содержимым. При включенном свойстве `section` (установлено в `true`) параметр `animationHeadPosition` игнорируется и не влияет на поведение анимации.
+
+```html
+<!-- Head остается вверху -->
+<MotionTransform animationHeadPosition="top" />
+
+<!-- Head движется вниз с контентом -->
+<MotionTransform animationHeadPosition="toBottom" />
+```

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

@@ -0,0 +1,25 @@
+## CSS Classes for Behavior Control
+
+**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
+
+**Control classes:**
+
+- `*--close` — applied to element to trigger MotionTransform closing on click
+- `*--none` — disables default behavior (open/close) for the element
+- `*--noneGlobal` — globally disables MotionTransform events
+
+**Element classes:**
+
+- `*__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

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

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

@@ -0,0 +1,39 @@
+### `transform`
+
+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>
+
+<template>
+  <Component @transform="handleTransform">
+    <template #head>
+      <div>Header</div>
+    </template>
+    <template #body>
+      <p>Content</p>
+    </template>
+  </Component>
+</template>
+```
+
+### `transformLite`
+
+Event fires when MotionTransform state changes without DOM event context (lightweight version).
+
+**Parameters:**
+- `options: MotionTransformEmitOptions` — object with transform data

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

@@ -0,0 +1,39 @@
+### `transform`
+
+Событие срабатывает при изменении состояния 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>
+
+<template>
+  <Component @transform="handleTransform">
+    <template #head>
+      <div>Заголовок</div>
+    </template>
+    <template #body>
+      <p>Содержимое</p>
+    </template>
+  </Component>
+</template>
+```
+
+### `transformLite`
+
+Событие срабатывает при изменении состояния MotionTransform без контекста DOM-события (облегчённая версия).
+
+**Параметры:**
+- `options: MotionTransformEmitOptions` — объект с данными трансформации

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

@@ -0,0 +1,6 @@
+- `open: Ref<boolean>` — reactive open state.
+- `isShow: ComputedRef<boolean>` — computed visibility state.
+- `setOpen(open: boolean): void` — sets the open state.
+- `toOpen(): void` — transitions to the open state.
+- `toClose(): void` — transitions to the close state.
+- `toggle(): void` — toggles the open state.

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

@@ -0,0 +1,9 @@
+- `motionTransformElement: Ref<ConstrBind<MotionTransformExpose> | undefined>` — Reactive reference to the nested MotionTransform component's expose API, providing programmatic access to control methods.
+
+> **Methods via motionTransformElement.value:**
+> - `open: Ref<boolean>` — reactive open state
+> - `isShow: ComputedRef<boolean>` — computed visibility state
+> - `setOpen(open: boolean): void` — set open state
+> - `toOpen(): void` — open component
+> - `toClose(): void` — close component
+> - `toggle(): void` — toggle state

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

@@ -0,0 +1,9 @@
+- `motionTransformElement: Ref<ConstrBind<MotionTransformExpose> | undefined>` — Реактивная ссылка на expose API вложенного компонента MotionTransform, предоставляющая программный доступ к методам управления.
+
+> **Методы через motionTransformElement.value:**
+> - `open: Ref<boolean>` — реактивное состояние открытия
+> - `isShow: ComputedRef<boolean>` — вычисляемое состояние видимости
+> - `setOpen(open: boolean): void` — установить состояние открытия
+> - `toOpen(): void` — открыть компонент
+> - `toClose(): void` — закрыть компонент
+> - `toggle(): void` — переключить состояние

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

@@ -0,0 +1,6 @@
+- `open: Ref<boolean>` — реактивное состояние открытия.
+- `isShow: ComputedRef<boolean>` — вычисляемое состояние видимости.
+- `setOpen(open: boolean): void` — устанавливает состояние открытия.
+- `toOpen(): void` — переводит в состояние открытия.
+- `toClose(): void` — переводит в состояние закрытия.
+- `toggle(): void` — переключает состояние открытия.

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

@@ -0,0 +1,32 @@
+## Ignore zones
+
+Properties that exclude elements from outside-click checks and auto-close logic.
+
+**Properties:**
+
+- `ignore` — DOM element reference or CSS selector to exclude from outside-click detection
+- `ignoreSelector` — CSS selector to exclude multiple elements simultaneously
+
+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.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const triggerButton = ref()
+</script>
+
+<template>
+  <!-- Ignoring specific element -->
+  <MotionTransform :ignore="triggerButton" />
+
+  <!-- Ignoring by selector -->
+  <MotionTransform ignoreSelector=".trigger-button" />
+
+  <!-- Combining both properties -->
+  <MotionTransform
+    :ignore="triggerButton"
+    ignoreSelector=".helper-controls"
+  />
+</template>
+```

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

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

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

@@ -0,0 +1,51 @@
+Low-level utility for managing element transforms, state transitions, and interaction flows in components with window-like behavior.
+
+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.
+
+**Key Features:**
+
+- 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
+
+**Typical Use Cases:**
+
+- Base utility for Window, Menu, Dialog components
+- Managing open/close animations
+- State coordination in popup elements
+- Component library development with window-like behavior
+
+```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
+)
+
+// 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

@@ -0,0 +1,51 @@
+Низкоуровневая утилита для управления трансформациями элементов, переходами состояний и потоками взаимодействия в компонентах с оконным поведением.
+
+MotionTransform централизует управление состояниями открытия/отображения/телепортации, измеряет размеры элементов, обновляет CSS-переменные и координирует события для создания плавных и предсказуемых анимаций. Предоставляет единый API для работы с видимостью компонентов, обработки кликов и автоматического закрытия с поддержкой игнорируемых зон.
+
+**Основные возможности:**
+
+- Централизованное управление состояниями (open, show, teleport)
+- Координация событий кликов и автозакрытия
+- Измерение размеров и обновление CSS-переменных
+- DOM-хелперы для работы с refs, порталами и классами
+- Программное управление через императивные методы
+- Настраиваемые зоны игнорирования событий
+- Оптимизированная работа с DOM
+
+**Типичные сценарии использования:**
+
+- Базовая утилита для компонентов Window, Menu, Dialog
+- Управление анимациями открытия/закрытия
+- Координация состояний в всплывающих элементах
+- Разработка библиотек компонентов с оконным поведением
+
+```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>
+```
+
+> Это низкоуровневая утилита для разработки библиотек компонентов, не предназначенная для прямого использования в приложениях.

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

@@ -0,0 +1,5 @@
+- `control(props: MotionTransformControlItem): any` — Slot for placing the trigger element that controls the animation.
+- `default: any` — Slot for placing the content that will be animated.
+
+> **MotionTransformControlItem:**
+> - `onclick: (event) => void` — handler for opening/closing the transformed element.

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

@@ -0,0 +1,5 @@
+- `control(props: MotionTransformControlItem): any` — Слот для размещения триггерного элемента, управляющего анимацией.
+- `default: any` — Слот для размещения контента, который будет анимирован.
+
+> **MotionTransformControlItem:**
+> - `onclick: (event) => void` — обработчик открытия/закрытия трансформируемого элемента.

package/src/media/mdx/MotionTransform/v-model.en.mdx

@@ -0,0 +1,19 @@
+## State Management via v-model
+
+Two-way binding of component open state via `v-model:open`.
+
+**Parameters:**
+- `open: boolean` — component open state
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const isOpen = ref(false)
+</script>
+
+<template>
+  <button @click="isOpen = true">Open</button>
+  <Component v-model:open="isOpen"/>
+</template>
+```

package/src/media/mdx/MotionTransform/v-model.ru.mdx

@@ -0,0 +1,19 @@
+## Управление состоянием через v-model
+
+Двусторонняя привязка состояния открытия компонента через `v-model:open`.
+
+**Параметры:**
+- `open: boolean` — состояние открытия компонента
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const isOpen = ref(false)
+</script>
+
+<template>
+  <button @click="isOpen = true">Открыть</button>
+  <Component v-model:open="isOpen"/>
+</template>
+```

package/src/media/mdx/MotionTransform/wikiMdxMotionTransform.ts

@@ -0,0 +1,67 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import animationHeadPositionEn from './animationHeadPosition.en.mdx'
+import animationHeadPositionRu from './animationHeadPosition.ru.mdx'
+import classesEn from './classes.en.mdx'
+import classesRu from './classes.ru.mdx'
+import eventsEn from './events.en.mdx'
+import eventsRu from './events.ru.mdx'
+import exposeEn from './expose.en.mdx'
+import exposeRu from './expose.ru.mdx'
+import exposeMotionTransformElementEn from './expose.motionTransformElement.en.mdx'
+import exposeMotionTransformElementRu from './expose.motionTransformElement.ru.mdx'
+import ignoreEn from './ignore.en.mdx'
+import ignoreRu from './ignore.ru.mdx'
+import motionTransformEn from './motionTransform.en.mdx'
+import motionTransformRu from './motionTransform.ru.mdx'
+import slotsEn from './slots.en.mdx'
+import slotsRu from './slots.ru.mdx'
+import vModelEn from './v-model.en.mdx'
+import vModelRu from './v-model.ru.mdx'
+
+/**
+ * MDX files for MotionTransform component
+ *
+ * MDX файлы для компонента MotionTransform
+ */
+export const wikiMdxMotionTransform: StorybookComponentsMdxItem = {
+  name: 'MotionTransform',
+  descriptions: {
+    'animationHeadPosition': {
+      en: animationHeadPositionEn,
+      ru: animationHeadPositionRu
+    },
+    'classes': {
+      en: classesEn,
+      ru: classesRu
+    },
+    'events': {
+      en: eventsEn,
+      ru: eventsRu
+    },
+    'expose': {
+      en: exposeEn,
+      ru: exposeRu
+    },
+    'expose.motionTransformElement': {
+      en: exposeMotionTransformElementEn,
+      ru: exposeMotionTransformElementRu
+    },
+    'ignore': {
+      en: ignoreEn,
+      ru: ignoreRu
+    },
+    'motionTransform': {
+      en: motionTransformEn,
+      ru: motionTransformRu
+    },
+    'slots': {
+      en: slotsEn,
+      ru: slotsRu
+    },
+    'v-model': {
+      en: vModelEn,
+      ru: vModelRu
+    }
+  }
+}

package/src/media/mdx/Page/page.en.mdx

@@ -0,0 +1,38 @@
+## Description
+
+A top-level semantic container component designed to wrap the main content of a page. It uses the `<main>` tag by default.
+
+Page provides capabilities for displaying main headlines, labels, descriptions, captions, and icons. The main purpose of the component is to designate the unique part of the document's content, which is critical for accessibility and SEO. The headline is rendered as `<h1>` by default.
+
+**Key Features:**
+
+- Semantic wrapper for main content (`<main>` tag)
+- Support for main headlines (default `<h1>`), labels, descriptions, and captions
+- Support for icons
+- Customizable layout and spacing
+- Full support for slots for content customization
+
+**Typical Use Cases:**
+
+- Wrapper for unique page content
+- Main application screen
+- Article or documentation page
+- Root element for routed components (views)
+
+```html
+<script setup>
+import { ref } from 'vue'
+</script>
+
+<template>
+  <Page
+    headline="Main Page Title"
+    label="Category"
+    description="Brief description of the page content"
+  >
+    <p>Unique page content...</p>
+  </Page>
+</template>
+```
+
+> Page should be used once per page (or per active view) and should not include repeated navigation elements.

package/src/media/mdx/Page/page.ru.mdx

@@ -0,0 +1,38 @@
+## Описание
+
+Семантический компонент-контейнер верхнего уровня, предназначенный для обертки основного содержимого страницы. По умолчанию использует тег `<main>`.
+
+Page предоставляет возможности для отображения главных заголовков, меток, описаний, подписей и иконок. Основное назначение компонента — обозначение уникальной части содержимого документа, что критически важно для доступности (accessibility) и SEO. Заголовок по умолчанию рендерится как `<h1>`.
+
+**Основные возможности:**
+
+- Семантическая обертка основного контента (тег `<main>`)
+- Поддержка главных заголовков (по умолчанию `<h1>`), меток, описаний и подписей
+- Поддержка иконок
+- Настраиваемый макет и отступы
+- Полная поддержка слотов для кастомизации контента
+
+**Типичные сценарии использования:**
+
+- Обертка для уникального контента страницы
+- Главный экран приложения
+- Страница статьи или документации
+- Корневой элемент для маршрутизируемых компонентов (views)
+
+```html
+<script setup>
+import { ref } from 'vue'
+</script>
+
+<template>
+  <Page
+    headline="Главный заголовок страницы"
+    label="Категория"
+    description="Краткое описание содержимого страницы"
+  >
+    <p>Уникальный контент страницы...</p>
+  </Page>
+</template>
+```
+
+> Page должен использоваться один раз на странице (или в активном view) и не должен включать повторяющиеся элементы навигации.