@dxtmisha/wiki 0.39.2 → 0.39.3

package/src/media/mdx/Image/adaptive.en.mdx

@@ -1,75 +0,0 @@
-## Adaptive scaling
-
-The `adaptive`, `adaptiveGroup`, `adaptiveAlways`, `objectWidth`, and `objectHeight` properties control automatic image scaling to ensure visual consistency of physical object sizes across different images.
-
-**Properties:**
-
-- `adaptive` — enables adaptive scaling mode
-- `adaptiveGroup` — group name for scale synchronization (default `'basic'`)
-- `objectWidth` — physical width of the object in the image in millimeters
-- `objectHeight` — physical height of the object in the image in millimeters
-- `adaptiveAlways` — perform calculations even for invisible elements
-
-Properties work together to ensure proportional display of images with objects of different physical sizes. When `adaptive` is activated, the component starts tracking element dimensions and comparing them with other images in the same group, automatically selecting the optimal scale for each element.
-
-The `objectWidth` or `objectHeight` properties specify the real physical dimensions of the object in the image in millimeters. These values are necessary for calculating the scaling coefficient — the component uses them to determine how much to enlarge or reduce the image so that objects in different images appear the same size. It is sufficient to specify only one property — either width or height.
-
-The component automatically determines which axis (horizontal or vertical) to scale on, based on available dimensions and image proportions. If `objectWidth` is specified, scaling will occur horizontally, if `objectHeight` — vertically. This allows flexible work with images of different orientations.
-
-Elements with the same `adaptiveGroup` value scale synchronously, ensuring consistent visual object sizes across all images in the group. This is especially useful when displaying product galleries or comparison tables where maintaining visual size correspondence is important.
-
-For performance optimization, scaling calculations are performed only for visible elements within the viewport plus a small margin. If an element is outside the visible area, calculations are paused until the element appears on screen. The `adaptiveAlways` property disables this optimization and forces the component to constantly recalculate the scale regardless of element visibility.
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const phone1 = ref('/images/phone-model-a.png')
-const phone2 = ref('/images/phone-model-b.png')
-const phone3 = ref('/images/phone-model-c.png')
-</script>
-
-<template>
-  <!-- Basic usage with object width -->
-  <Image
-    :value="phone1"
-    adaptive
-    object-width="76.2"
-  />
-
-  <!-- Multiple images in one group -->
-  <Image
-    :value="phone1"
-    adaptive
-    adaptive-group="phones"
-    object-width="76.2"
-  />
-  <Image
-    :value="phone2"
-    adaptive
-    adaptive-group="phones"
-    object-width="71.9"
-  />
-  <Image
-    :value="phone3"
-    adaptive
-    adaptive-group="phones"
-    object-width="129.9"
-  />
-
-  <!-- With height instead of width -->
-  <Image
-    adaptive
-    object-height="154.8"
-    :value="phone1"
-  />
-
-  <!-- Constant scaling -->
-  <Image
-    adaptive
-    adaptive-always
-    object-width="76.2"
-    :value="phone1"
-  />
-</template>
-```

package/src/media/mdx/Image/adaptive.ru.mdx

@@ -1,75 +0,0 @@
-## Адаптивное масштабирование
-
-Свойства `adaptive`, `adaptiveGroup`, `adaptiveAlways`, `objectWidth` и `objectHeight` управляют автоматическим масштабированием изображений для обеспечения визуального соответствия физических размеров объектов на разных изображениях.
-
-**Свойства:**
-
-- `adaptive` — включает режим адаптивного масштабирования
-- `adaptiveGroup` — название группы для синхронизации масштаба (по умолчанию `'basic'`)
-- `objectWidth` — физическая ширина объекта на изображении в миллиметрах
-- `objectHeight` — физическая высота объекта на изображении в миллиметрах
-- `adaptiveAlways` — выполнять расчёты даже для невидимых элементов
-
-Свойства работают совместно для обеспечения пропорционального отображения изображений с объектами разных физических размеров. При активации `adaptive` компонент начинает отслеживать размеры элемента и сравнивать их с другими изображениями в той же группе, автоматически подбирая оптимальный масштаб для каждого элемента.
-
-Свойства `objectWidth` или `objectHeight` задают реальные физические размеры объекта на изображении в миллиметрах. Эти значения необходимы для расчёта коэффициента масштабирования — компонент использует их для определения, во сколько раз нужно увеличить или уменьшить изображение, чтобы объекты на разных изображениях выглядели одинакового размера. Достаточно указать только одно из свойств — либо ширину, либо высоту.
-
-Компонент автоматически определяет, по какой оси (горизонтальной или вертикальной) производить масштабирование, основываясь на доступных размерах и пропорциях изображения. Если указан `objectWidth`, масштабирование будет происходить по горизонтали, если `objectHeight` — по вертикали. Это позволяет гибко работать с изображениями разных ориентаций.
-
-Элементы с одинаковым значением `adaptiveGroup` масштабируются синхронно, обеспечивая одинаковый визуальный размер объектов на всех изображениях группы. Это особенно полезно при отображении галерей продуктов или сравнительных таблиц, где важно сохранить визуальное соответствие размеров.
-
-Для оптимизации производительности расчёты масштабирования выполняются только для видимых элементов в пределах области просмотра (viewport) плюс небольшой запас. Если элемент находится за пределами видимой области, расчёты приостанавливаются до момента, когда элемент появится на экране. Свойство `adaptiveAlways` отключает эту оптимизацию и заставляет компонент постоянно пересчитывать масштаб независимо от видимости элемента.
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const phone1 = ref('/images/phone-model-a.png')
-const phone2 = ref('/images/phone-model-b.png')
-const phone3 = ref('/images/phone-model-c.png')
-</script>
-
-<template>
-  <!-- Базовое использование с шириной объекта -->
-  <Image
-    :value="phone1"
-    adaptive
-    object-width="76.2"
-  />
-
-  <!-- Несколько изображений в одной группе -->
-  <Image
-    :value="phone1"
-    adaptive
-    adaptive-group="phones"
-    object-width="76.2"
-  />
-  <Image
-    :value="phone2"
-    adaptive
-    adaptive-group="phones"
-    object-width="71.9"
-  />
-  <Image
-    :value="phone3"
-    adaptive
-    adaptive-group="phones"
-    object-width="129.9"
-  />
-
-  <!-- С высотой вместо ширины -->
-  <Image
-    adaptive
-    object-height="154.8"
-    :value="phone1"
-  />
-
-  <!-- Постоянное масштабирование -->
-  <Image
-    adaptive
-    adaptive-always
-    object-width="76.2"
-    :value="phone1"
-  />
-</template>
-```

package/src/media/mdx/Image/event.load.en.mdx

@@ -1,39 +0,0 @@
-### `load`
-
-Event fires after the image is loaded.
-
-**Parameters:**
-- `image: ImageEventData` — object with image data
-
-**ImageEventData structure:**
-- `type: ImageTypeItem` — image type (`'image'`, `'icon'`, `'pdf'`, `'file'`, `'flag'`, `'color'`, etc.)
-- `image: ImageEventItem` — image data (`ImageItem` object, URL string, or `undefined`)
-
-**ImageItem structure (when image is an object):**
-- `width: number` — image width
-- `height: number` — image height
-- `image: HTMLImageElement` — image DOM element
-- `src: string` — image source (URL)
-
-```html
-<script setup>
-const handleLoad = (data) => {
-  console.log('Image type:', data.type)
-
-  if (typeof data.image === 'object' && data.image) {
-    console.log('Width:', data.image.width)
-    console.log('Height:', data.image.height)
-    console.log('URL:', data.image.src)
-  } else {
-    console.log('Image URL:', data.image)
-  }
-}
-</script>
-
-<template>
-  <Image
-    src="/path/to/image.jpg"
-    @load="handleLoad"
-  />
-</template>
-```

package/src/media/mdx/Image/event.load.ru.mdx

@@ -1,39 +0,0 @@
-### `load`
-
-Событие срабатывает после загрузки изображения.
-
-**Параметры:**
-- `image: ImageEventData` — объект с данными изображения
-
-**Структура ImageEventData:**
-- `type: ImageTypeItem` — тип изображения (`'image'`, `'icon'`, `'pdf'`, `'file'`, `'flag'`, `'color'` и др.)
-- `image: ImageEventItem` — данные изображения (объект `ImageItem`, строка URL или `undefined`)
-
-**Структура ImageItem (если image - объект):**
-- `width: number` — ширина изображения
-- `height: number` — высота изображения
-- `image: HTMLImageElement` — DOM элемент изображения
-- `src: string` — источник изображения (URL)
-
-```html
-<script setup>
-const handleLoad = (data) => {
-  console.log('Тип изображения:', data.type)
-
-  if (typeof data.image === 'object' && data.image) {
-    console.log('Ширина:', data.image.width)
-    console.log('Высота:', data.image.height)
-    console.log('URL:', data.image.src)
-  } else {
-    console.log('URL изображения:', data.image)
-  }
-}
-</script>
-
-<template>
-  <Image
-    src="/path/to/image.jpg"
-    @load="handleLoad"
-  />
-</template>
-```

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

@@ -1,12 +0,0 @@
-- `type: ComputedRef<ImageTypeItem>` — Type of the loaded image.
-
-> **ImageTypeItem values:**
-> `pdf`, `file`, `array`, `image`, `flag`, `flag-compressed`, `color`, `public`, `filled`, `outlined`, `round`, `sharp`, `two-tone`, `material`, `icon`.
-
-- `data: Ref<ImageEventItem>` — Information about the loaded image, including its source and metadata.
-
-> **ImageEventItem:**
-> - `src: string` — source URL.
-> - `width: number` — image width.
-> - `height: number` — image height.
-> - `image: HTMLImageElement` — DOM element of the image.

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

@@ -1,12 +0,0 @@
-- `type: ComputedRef<ImageTypeItem>` — Тип загруженного изображения.
-
-> **Значения ImageTypeItem:**
-> `pdf`, `file`, `array`, `image`, `flag`, `flag-compressed`, `color`, `public`, `filled`, `outlined`, `round`, `sharp`, `two-tone`, `material`, `icon`.
-
-- `data: Ref<ImageEventItem>` — Информация о загруженном изображении, включая его источник и метаданные.
-
-> **ImageEventItem:**
-> - `src: string` — URL-источник.
-> - `width: number` — ширина изображения.
-> - `height: number` — высота изображения.
-> - `image: HTMLImageElement` — DOM-элемент изображения.

package/src/media/mdx/Image/flag.en.mdx

@@ -1,23 +0,0 @@
-## Flags
-
-The `Image` component supports displaying country flags. A special format for the `value` property is used for this purpose.
-
-**Formats:**
-
-- `flag-xx` — standard flag (where `xx` is the ISO 3166-1 alpha-2 country code)
-- `f-xx` — compressed flag (where `xx` is the ISO 3166-1 alpha-2 country code)
-
-**Features:**
-
-- Automatic flag type detection by prefix
-- Support for all countries according to ISO 3166-1 alpha-2 standard
-
-```html
-<template>
-  <!-- Standard US flag -->
-  <Image value="flag-us" />
-
-  <!-- Compressed Germany flag -->
-  <Image value="f-de" />
-</template>
-```

package/src/media/mdx/Image/flag.ru.mdx

@@ -1,23 +0,0 @@
-## Флаги
-
-Компонент `Image` поддерживает отображение флагов стран. Для этого используется специальный формат значения свойства `value`.
-
-**Форматы:**
-
-- `flag-xx` — стандартный флаг (где `xx` — код страны ISO 3166-1 alpha-2)
-- `f-xx` — сжатый флаг (где `xx` — код страны ISO 3166-1 alpha-2)
-
-**Особенности:**
-
-- Автоматическое определение типа флага по префиксу
-- Поддержка всех стран по стандарту ISO 3166-1 alpha-2
-
-```html
-<template>
-  <!-- Стандартный флаг США -->
-  <Image value="flag-us" />
-
-  <!-- Сжатый флаг Германии -->
-  <Image value="f-de" />
-</template>
-```

package/src/media/mdx/Image/image.en.mdx

@@ -1,51 +0,0 @@
-Universal component for displaying images, icons, flags, and PDF documents with advanced size, positioning, and adaptability controls.
-
-Image provides a flexible API for working with various types of visual content. The component automatically detects the source type (image, icon, color, file), selects the optimal rendering method (`<img>`, `background-image`, `<picture>`, `<object>`, or icon font), and supports advanced cropping and adaptation features.
-
-**Key Features:**
-
-- Support for multiple source types (URL, File, PDF, Material Icons, flags, colors)
-- Flexible rendering with automatic choice between background and img tag
-- Adaptive scaling with aspect ratio preservation and srcset support
-- Display control via fill modes and coordinate cropping
-- Styling support with masks and color filling
-- Integration with Material Symbols and system flags
-
-**Typical Use Cases:**
-
-- Responsive images with picture and srcset
-- Interface icons (Material Design or SVG masks)
-- User avatars with automatic cropping
-- Previews of uploaded files and PDF documents
-- Background images with complex positioning
-- Displaying country flags via CSS sprites
-
-```html
-<script setup>
-import { ref } from 'vue'
-import { Image } from '@dxtmisha/constructor'
-
-const imageUrl = ref('https://example.com/image.jpg')
-</script>
-
-<template>
-  <!-- Background image with cropping -->
-  <Image
-    :value="imageUrl"
-    size="cover"
-    :coordinator="[10, 10, 10, 10]"
-  />
-
-  <!-- SEO-friendly image -->
-  <Image
-    :value="imageUrl"
-    tag-img
-    alt="Description"
-  />
-
-  <!-- Material Design Icon -->
-  <Image value="filled-home" />
-</template>
-```
-
-> The component automatically manages content type and optimizes display based on the source.

package/src/media/mdx/Image/image.ru.mdx

@@ -1,51 +0,0 @@
-Универсальный компонент для отображения изображений, иконок, флагов и PDF-документов с расширенными возможностями управления размером, позиционированием и адаптивностью.
-
-Image предоставляет гибкий API для работы с различными типами визуального контента. Компонент автоматически определяет тип источника (изображение, иконка, цвет, файл), выбирает оптимальный способ рендеринга (`<img>`, `background-image`, `<picture>`, `<object>` или иконочный шрифт) и поддерживает продвинутые функции кадрирования и адаптации.
-
-**Основные возможности:**
-
-- Поддержка множества типов источников (URL, File, PDF, Material Icons, флаги, цвета)
-- Гибкий рендеринг с автоматическим выбором между фоном и тегом img
-- Адаптивное масштабирование с сохранением пропорций и поддержкой srcset
-- Управление отображением через режимы заполнения и координатное кадрирование
-- Стилизация с поддержкой масок и заливки цветом
-- Интеграция с Material Symbols и системными флагами
-
-**Типичные сценарии использования:**
-
-- Адаптивные изображения с picture и srcset
-- Иконки интерфейса (Material Design или SVG маски)
-- Аватары пользователей с автоматическим кадрированием
-- Превью загружаемых файлов и PDF документов
-- Фоновые изображения со сложным позиционированием
-- Отображение флагов стран через CSS спрайты
-
-```html
-<script setup>
-import { ref } from 'vue'
-import { Image } from '@dxtmisha/constructor'
-
-const imageUrl = ref('https://example.com/image.jpg')
-</script>
-
-<template>
-  <!-- Фоновое изображение с кадрированием -->
-  <Image
-    :value="imageUrl"
-    size="cover"
-    :coordinator="[10, 10, 10, 10]"
-  />
-
-  <!-- SEO-дружественное изображение -->
-  <Image
-    :value="imageUrl"
-    tag-img
-    alt="Описание"
-  />
-
-  <!-- Иконка Material Design -->
-  <Image value="filled-home" />
-</template>
-```
-
-> Компонент автоматически управляет типом контента и оптимизирует отображение в зависимости от источника.

package/src/media/mdx/Image/img-tag.en.mdx

@@ -1,105 +0,0 @@
-## Using the img tag
-
-The `tagImg`, `srcset`, `picture`, `alt`, `lazy`, `preloadOffset` and `fetchPriority` properties are designed to control the image display mode using the HTML `<img>` tag instead of a background image.
-
-**Properties:**
-
-- `tagImg` — use the `<img>` tag instead of a background image
-- `srcset` — set of image sources for different screen resolutions
-- `picture` — sources for different display conditions using the `<picture>` tag
-- `alt` — alternative text for the image
-- `lazy` — enables lazy loading of the image
-- `preloadOffset` — offset for image preloading (default `1024px`)
-- `fetchPriority` — image loading priority (`low`, `high`, `auto`)
-
-The properties work together: if `tagImg` is not set or equals `false`, the image is displayed as a CSS background via `background-image`. When `tagImg` is activated (value `true`), the component uses the semantic HTML `<img>` tag, providing better accessibility and SEO optimization. The `alt` property defines alternative text that is displayed when the image is unavailable and is used by screen readers for people with disabilities.
-
-The `srcset` property allows you to provide multiple versions of an image for different pixel densities and screen sizes. It accepts a string in the standard `srcset` attribute format or an object where keys are width descriptors (numbers or strings like `'2x'`) and values are image URLs. When using numeric keys, the `w` suffix (width descriptor) is automatically added. The browser automatically selects the optimal image based on screen size and pixel density.
-
-The `picture` property enables the use of the HTML `<picture>` tag for art direction — when you need to load different images depending on screen size or other media query conditions. It accepts an object where keys are media conditions (such as screen width in pixels) and values are image URLs, or an array of objects with `<source>` attributes. When using an object, media queries like `(width >= 768px)` are automatically generated. The `<picture>` tag provides more flexible control over image selection compared to `srcset`, allowing you to load images with different aspect ratios or content for various viewing conditions.
-
-The `lazy` property activates native browser lazy loading via the `loading="lazy"` attribute. Images with this attribute are loaded only when approaching the visible screen area, which significantly speeds up initial page load and reduces traffic consumption. It is especially effective for pages with a large number of images or long lists.
-
-The `preloadOffset` property defines the pixel offset for preloading images when using lazy loading. The default value is `1024px`, which means the image starts loading 1024 pixels before it enters the visible area. This ensures smooth image loading without delays during scrolling. You can specify either a numeric value or a string with a unit of measurement.
-
-The `fetchPriority` property allows you to control the browser's image loading priority. It accepts three values: `high` — high priority for critical images (such as hero images or main banners), `low` — low priority for secondary images, `auto` — the browser determines the priority automatically (default value). Proper use of this property helps optimize page loading by ensuring fast loading of important content.
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const productImage = ref('/images/product.jpg')
-</script>
-
-<template>
-  <!-- Basic usage -->
-  <Image
-    :value="productImage"
-    tag-img
-    alt="Product description"
-  />
-
-  <!-- With lazy loading -->
-  <Image
-    :value="productImage"
-    tag-img
-    alt="Product"
-    lazy
-  />
-
-  <!-- With srcset object -->
-  <Image
-    :value="productImage"
-    tag-img
-    alt="Responsive image"
-    :srcset="{
-      '1x': '/images/product.jpg',
-      '2x': '/images/product@2x.jpg'
-    }"
-  />
-
-  <!-- With picture for different screen sizes -->
-  <Image
-    :value="productImage"
-    tag-img
-    alt="Responsive image for different devices"
-    :picture="{
-      768: '/images/product-tablet.jpg',
-      1024: '/images/product-desktop.jpg'
-    }"
-  />
-
-  <!-- With preload offset configuration -->
-  <Image
-    :value="productImage"
-    tag-img
-    alt="Image with early preload"
-    lazy
-    preload-offset="2048px"
-  />
-
-  <!-- With high loading priority -->
-  <Image
-    :value="productImage"
-    tag-img
-    alt="Main page image"
-    fetch-priority="high"
-  />
-
-  <!-- Complex example -->
-  <Image
-    :value="productImage"
-    tag-img
-    alt="Responsive product image"
-    lazy
-    preload-offset="1536px"
-    fetch-priority="low"
-    :srcset="{
-      '1x': '/images/product.jpg',
-      '2x': '/images/product@2x.jpg',
-      '3x': '/images/product@3x.jpg'
-    }"
-  />
-</template>
-```
-

package/src/media/mdx/Image/img-tag.ru.mdx

@@ -1,105 +0,0 @@
-## Использование тега img
-
-Свойства `tagImg`, `srcset`, `picture`, `alt`, `lazy`, `preloadOffset` и `fetchPriority` предназначены для управления режимом отображения изображения через HTML-тег `<img>` вместо фонового изображения.
-
-**Свойства:**
-
-- `tagImg` — использовать тег `<img>` вместо фонового изображения
-- `srcset` — набор источников изображения для разных разрешений экрана
-- `picture` — источники для разных условий отображения с использованием тега `<picture>`
-- `alt` — альтернативный текст для изображения
-- `lazy` — включает ленивую загрузку изображения
-- `preloadOffset` — смещение для предзагрузки изображения (по умолчанию `1024px`)
-- `fetchPriority` — приоритет загрузки изображения (`low`, `high`, `auto`)
-
-Свойства работают совместно: если `tagImg` не задан или равен `false`, изображение отображается как CSS-фон через `background-image`. При активации `tagImg` (значение `true`), компонент использует семантический HTML-тег `<img>`, обеспечивая лучшую доступность и SEO-оптимизацию. Свойство `alt` определяет альтернативный текст, который отображается при недоступности изображения и используется программами чтения с экрана для людей с ограниченными возможностями.
-
-Свойство `srcset` позволяет предоставить несколько версий изображения для разных плотностей пикселей и размеров экрана. Принимает строку в формате стандартного атрибута `srcset` или объект, где ключи — это дескрипторы ширины (числа или строки вроде `'2x'`), а значения — URL изображений. При использовании числовых ключей автоматически добавляется суффикс `w` (width descriptor). Браузер самостоятельно выбирает оптимальное изображение на основе размера экрана и плотности пикселей.
-
-Свойство `picture` позволяет использовать HTML-тег `<picture>` для art direction — когда требуется загружать разные изображения в зависимости от размера экрана или других условий медиа-запросов. Принимает объект, где ключи — это медиа-условия (например, ширина экрана в пикселях), а значения — URL изображений, или массив объектов с атрибутами `<source>`. При использовании объекта автоматически генерируются медиа-запросы вида `(width >= 768px)`. Тег `<picture>` обеспечивает более гибкий контроль над выбором изображения по сравнению с `srcset`, позволяя загружать изображения разных пропорций или содержания для различных условий просмотра.
-
-Свойство `lazy` активирует нативную ленивую загрузку браузера через атрибут `loading="lazy"`. Изображения с этим атрибутом загружаются только при приближении к видимой области экрана, что значительно ускоряет начальную загрузку страницы и снижает потребление трафика. Особенно эффективно для страниц с большим количеством изображений или длинных списков.
-
-Свойство `preloadOffset` определяет смещение в пикселях для предварительной загрузки изображений при использовании ленивой загрузки. По умолчанию установлено значение `1024px`, что означает начало загрузки изображения за 1024 пикселя до того, как оно попадет в видимую область. Это обеспечивает плавную загрузку изображений без задержек при прокрутке. Можно указать как числовое значение, так и строку с единицей измерения.
-
-Свойство `fetchPriority` позволяет управлять приоритетом загрузки изображения браузером. Принимает три значения: `high` — высокий приоритет для критически важных изображений (например, главный баннер или hero-изображение), `low` — низкий приоритет для второстепенных изображений, `auto` — браузер самостоятельно определяет приоритет (значение по умолчанию). Правильное использование этого свойства помогает оптимизировать загрузку страницы, обеспечивая быструю загрузку важного контента.
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const productImage = ref('/images/product.jpg')
-</script>
-
-<template>
-  <!-- Базовое использование -->
-  <Image
-    :value="productImage"
-    tag-img
-    alt="Описание продукта"
-  />
-
-  <!-- С ленивой загрузкой -->
-  <Image
-    :value="productImage"
-    tag-img
-    alt="Товар"
-    lazy
-  />
-
-  <!-- С srcset объектом -->
-  <Image
-    :value="productImage"
-    tag-img
-    alt="Адаптивное изображение"
-    :srcset="{
-      '1x': '/images/product.jpg',
-      '2x': '/images/product@2x.jpg'
-    }"
-  />
-
-  <!-- С picture для разных размеров экрана -->
-  <Image
-    :value="productImage"
-    tag-img
-    alt="Адаптивное изображение для разных устройств"
-    :picture="{
-      768: '/images/product-tablet.jpg',
-      1024: '/images/product-desktop.jpg'
-    }"
-  />
-
-  <!-- С настройкой предзагрузки -->
-  <Image
-    :value="productImage"
-    tag-img
-    alt="Изображение с ранней предзагрузкой"
-    lazy
-    preload-offset="2048px"
-  />
-
-  <!-- С высоким приоритетом загрузки -->
-  <Image
-    :value="productImage"
-    tag-img
-    alt="Главное изображение страницы"
-    fetch-priority="high"
-  />
-
-  <!-- Комплексный пример -->
-  <Image
-    :value="productImage"
-    tag-img
-    alt="Адаптивное изображение товара"
-    lazy
-    preload-offset="1536px"
-    fetch-priority="low"
-    :srcset="{
-      '1x': '/images/product.jpg',
-      '2x': '/images/product@2x.jpg',
-      '3x': '/images/product@3x.jpg'
-    }"
-  />
-</template>
-```
-

package/src/media/mdx/Image/size.en.mdx

@@ -1,32 +0,0 @@
-## Image display control
-
-The `size`, `coordinator`, `x`, and `y` properties allow you to precisely control image scaling, visible area, and positioning within the container.
-
-**Properties:**
-
-- `size` — scaling and fill mode of the image (`auto`, `contain`, `cover`)
-- `coordinator` — array of coordinates for cropping the display area `[left, top, right, bottom]` in percentages
-- `x` — horizontal offset of the image (pixels, percentages)
-- `y` — vertical offset of the image (pixels, percentages)
-
-Properties work together or individually. The `size` value defines the scaling mode: `auto` uses the original size, `contain` fits the image completely, `cover` fills the container with possible cropping. The `coordinator` property sets the visible area by cropping the image at specified coordinates. The `x` and `y` parameters shift the image relative to the container for precise positioning.
-
-```html
-<!-- Scaling mode -->
-<Image value="image.png" size="contain" />
-
-<!-- Cropping by coordinates -->
-<Image value="image.png" :coordinator="[10, 20, 100, 80]" />
-
-<!-- Position offset -->
-<Image value="image.png" x="15" y="-10" />
-
-<!-- Combined parameters -->
-<Image
-  value="image.png"
-  size="cover"
-  :coordinator="[0, 0, 100, 50]"
-  x="10"
-  y="5"
-/>
-```