@dxtmisha/wiki 0.39.2 → 0.39.3

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

@@ -1,25 +0,0 @@
-## 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

@@ -1,39 +0,0 @@
-### `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

@@ -1,39 +0,0 @@
-### `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

@@ -1,6 +0,0 @@
-- `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

@@ -1,9 +0,0 @@
-- `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

@@ -1,9 +0,0 @@
-- `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

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

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

@@ -1,32 +0,0 @@
-## 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

@@ -1,32 +0,0 @@
-## Зоны игнорирования
-
-Свойства для исключения элементов из проверок клика снаружи и логики автозакрытия.
-
-**Свойства:**
-
-- `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

@@ -1,51 +0,0 @@
-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

@@ -1,51 +0,0 @@
-Низкоуровневая утилита для управления трансформациями элементов, переходами состояний и потоками взаимодействия в компонентах с оконным поведением.
-
-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

@@ -1,5 +0,0 @@
-- `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

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

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

@@ -1,19 +0,0 @@
-## 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

@@ -1,19 +0,0 @@
-## Управление состоянием через 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

@@ -1,67 +0,0 @@
-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

@@ -1,38 +0,0 @@
-## 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

@@ -1,38 +0,0 @@
-## Описание
-
-Семантический компонент-контейнер верхнего уровня, предназначенный для обертки основного содержимого страницы. По умолчанию использует тег `<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) и не должен включать повторяющиеся элементы навигации.

package/src/media/mdx/Page/wikiMdxPage.ts

@@ -1,19 +0,0 @@
-import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
-
-import pageEn from './page.en.mdx'
-import pageRu from './page.ru.mdx'
-
-/**
- * MDX files for Page component
- *
- * MDX файлы для компонента Page
- */
-export const wikiMdxPage: StorybookComponentsMdxItem = {
-  name: 'Page',
-  descriptions: {
-    block: {
-      en: pageEn,
-      ru: pageRu
-    }
-  }
-}

package/src/media/mdx/Progress/circular.en.mdx

@@ -1,24 +0,0 @@
-## Circular Progress and Related Parameters
-
-The `circular` property enables circular progress indicator display mode as a ring indicator. For optimal control over appearance and behavior, it is recommended to use it together with additional properties.
-
-**Properties:**
-
-- `circular` — enables circular progress display mode
-- `dense` — removes internal padding for compact placement in small elements
-
-The `circular` property activates a ring progress indicator that fills around the circumference proportionally to the current value. `dense` removes padding, making the indicator more compact for placement in limited space.
-
-```html
-<!-- Basic circular progress -->
-<Progress circular />
-
-<!-- Compact circular progress -->
-<Progress circular dense />
-
-<!-- With specific value -->
-<Progress circular :value="75" />
-
-<!-- Compact with value -->
-<Progress circular dense :value="50" />
-```

package/src/media/mdx/Progress/circular.ru.mdx

@@ -1,24 +0,0 @@
-## Круглый прогресс и связанные параметры
-
-Свойство `circular` включает режим круглого отображения индикатора прогресса в виде кольцевого индикатора. Для оптимального контроля над внешним видом и поведением рекомендуется использовать его совместно с дополнительными свойствами.
-
-**Свойства:**
-
-- `circular` — включает режим круглого отображения прогресса
-- `dense` — убирает внутренние отступы для компактного размещения в маленьких элементах
-
-Свойство `circular` активирует кольцевой индикатор прогресса, который заполняется по окружности пропорционально текущему значению. `dense` убирает padding, делая индикатор более компактным для размещения в ограниченном пространстве.
-
-```html
-<!-- Базовый круглый прогресс -->
-<Progress circular />
-
-<!-- Компактный круглый прогресс -->
-<Progress circular dense />
-
-<!-- С определенным значением -->
-<Progress circular :value="75" />
-
-<!-- Компактный со значением -->
-<Progress circular dense :value="50" />
-```

package/src/media/mdx/Progress/delays.en.mdx

@@ -1,24 +0,0 @@
-## Progress Delay Management
-
-The `delay` and `delayHide` properties control timing parameters for showing and hiding the progress indicator. These properties allow creating a smoother user experience by avoiding flickers during fast operations.
-
-**Properties:**
-
-- `delay` — delay before showing the indicator in milliseconds, defaults to `360`
-- `delayHide` — delay before hiding the indicator in milliseconds, defaults to `200`
-
-The standard `delay="360"` value is proven in practice and suitable for most cases. Increase `delay` for rapid operations where the indicator might interfere with perception. Decrease for long operations where immediate feedback is important.
-
-```html
-<!-- Standard delays -->
-<Progress delay="360" delayHide="200" />
-
-<!-- Fast appearance -->
-<Progress delay="100" delayHide="200" />
-
-<!-- Slow appearance -->
-<Progress delay="800" delayHide="300" />
-
-<!-- No delays -->
-<Progress delay="0" delayHide="0" />
-```

package/src/media/mdx/Progress/delays.ru.mdx

@@ -1,24 +0,0 @@
-## Управление задержками прогресса
-
-Свойства `delay` и `delayHide` контролируют временные параметры появления и скрытия индикатора прогресса. Эти свойства позволяют создавать более плавный пользовательский опыт, избегая мерцаний при быстрых операциях.
-
-**Свойства:**
-
-- `delay` — задержка перед показом индикатора в миллисекундах, по умолчанию `360`
-- `delayHide` — задержка перед скрытием индикатора в миллисекундах, по умолчанию `200`
-
-Стандартное значение `delay="360"` проверено на практике и подходит для большинства случаев. Увеличивайте `delay` для очень быстрых операций, где индикатор может помешать восприятию. Уменьшайте для долгих операций, где важна немедленная обратная связь.
-
-```html
-<!-- Стандартные задержки -->
-<Progress delay="360" delayHide="200" />
-
-<!-- Быстрое появление -->
-<Progress delay="100" delayHide="200" />
-
-<!-- Медленное появление -->
-<Progress delay="800" delayHide="300" />
-
-<!-- Без задержек -->
-<Progress delay="0" delayHide="0" />
-```