@dxtmisha/wiki 0.39.2 → 0.39.3

package/src/media/descriptions/wikiDescriptionsGrid.ts

@@ -1,68 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for Grid component properties
- *
- * Описания свойств компонента Grid
- */
-export const wikiDescriptionsGrid: StorybookComponentsDescriptionItem = {
-  name: 'Grid',
-  description: {
-    en: 'Layout component for creating grid structures with customizable columns',
-    ru: 'Компонент макета для создания сеточных структур с настраиваемыми колонками'
-  },
-  possibilities: {
-    en: [
-      'configurable number of columns',
-      'gap customization',
-      'responsive layout support'
-    ],
-    ru: [
-      'настраиваемое количество колонок',
-      'настройка отступов (gap)',
-      'поддержка адаптивной верстки'
-    ]
-  },
-  import: [],
-  render: `
-    <DesignComponent>
-        <div
-          class="wiki-storybook-dummy wiki-storybook-dummy--color--blue wiki-storybook-dummy--size--sm"
-          style="grid-column: span 2;"
-        />
-        <div
-          class="wiki-storybook-dummy wiki-storybook-dummy--color--red wiki-storybook-dummy--size--sm"
-          style="grid-column: span 4;"
-        />
-        <div
-          class="wiki-storybook-dummy wiki-storybook-dummy--color--green wiki-storybook-dummy--size--sm"
-          style="grid-column: span 6;"
-        />
-    </DesignComponent>
-  `,
-  stories: [],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'Grid'} type={'grid'}/>
-    `,
-    slots: `
-<StorybookDescriptions componentName={'Slot'} type={'default'}/>
-    `
-  },
-  ai: {
-    render: `
-      <div :class="classDemo.item">
-        <Grid v-bind="args">
-          <div style="grid-column: span 4;">1</div>
-          <div style="grid-column: span 4;">2</div>
-          <div style="grid-column: span 4;">3</div>
-        </Grid>
-      </div>
-    `,
-    description: `
-Layout utility designed to manage the arrangement of items in a flexible, column-based system. Provides a standardized way to create responsive multi-column layouts across different screen sizes.
-Features a default 12-column grid structure with customizable gaps and responsive breakpoint support. Works in tandem with GridItem to provide precise control over column spans and alignment.
-Controlled primarily via CSS variables for columns and gaps. Use as a top-level container for dashboard widgets, form layouts, or any content requiring a structured multi-column arrangement.
-    `
-  }
-}

package/src/media/descriptions/wikiDescriptionsGridItem.ts

@@ -1,55 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for GridItem component properties
- *
- * Описания свойств компонента GridItem
- */
-export const wikiDescriptionsGridItem: StorybookComponentsDescriptionItem = {
-  name: 'GridItem',
-  description: {
-    en: 'Individual item within a Grid component',
-    ru: 'Отдельный элемент внутри компонента Grid'
-  },
-  possibilities: {
-    en: [
-      'configurable span across columns',
-      'responsive span settings (base, sm, md, lg, xl, 2xl)'
-    ],
-    ru: [
-      'настраиваемый охват колонок (span)',
-      'адаптивные настройки охвата (base, sm, md, lg, xl, 2xl)'
-    ]
-  },
-  import: [],
-  render: `
-    <div class="wiki-storybook-group">
-      <DesignComponent v-bind="args">
-        <div class="wiki-storybook-dummy wiki-storybook-dummy--color--blue wiki-storybook-dummy--size--sm"/>
-      </DesignComponent>
-    </div>
-  `,
-  stories: [],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'GridItem'} type={'gridItem'}/>
-    `,
-    slots: `
-<StorybookDescriptions componentName={'Slot'} type={'default'}/>
-    `
-  },
-  ai: {
-    render: `
-<div :class="classDemo.item" style="min-height: 48px;">
-  <div style="display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px;">
-    <GridItem v-bind="args">Item</GridItem>
-  </div>
-</div>
-    `,
-    description: `
-Individual cell unit within a Grid layout, providing granular control over column spanning across various screen resolutions. Enables building complex, responsive layouts with minimal CSS.
-Features responsive span settings for all major breakpoints (base, sm, md, lg, xl, 2xl). Allows items to occupy different widths on mobile vs desktop, ensuring optimal use of screen space.
-Controlled via the base prop for default span and breakpoint-specific props (e.g., md="6"). Use inside a Grid container to define local widths for UI elements, widgets, or form fields.
-    `
-  }
-}

package/src/media/descriptions/wikiDescriptionsGroup.ts

@@ -1,118 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for Group component properties
- *
- * Описания свойств компонента Group
- */
-export const wikiDescriptionsGroup: StorybookComponentsDescriptionItem = {
-  name: 'Group',
-  description: {
-    en: 'A structural component designed to group related content with support for headers, descriptions, and flexible layout options. It uses the <div> tag and <h4> header by default.',
-    ru: 'Структурный компонент, предназначенный для группировки связанного контента с поддержкой заголовков, описаний и гибких настроек макета. По умолчанию использует тег <div> и заголовок <h4>.'
-  },
-  possibilities: {
-    en: [
-      'standardized grouping of content using <div> tag',
-      'support for titles (h4 by default), labels, descriptions, and captions',
-      'support for icons',
-      'fully inherits Block component capabilities'
-    ],
-    ru: [
-      'стандартизированная группировка контента с использованием тега <div>',
-      'поддержка заголовков (h4 по умолчанию), меток, описаний и подписей',
-      'поддержка иконок',
-      'полностью наследует возможности компонента Block'
-    ]
-  },
-  import: [],
-  render: `
-      <DesignComponent v-bind="args">
-        <p>
-          The Group component serves as a container for grouping thematic content within a page or another component.
-          It defaults to using the <code>&lt;div&gt;</code> HTML tag and <code>&lt;h4&gt;</code> for headlines.
-        </p>
-        <p>
-          It inherits all the features of the Block component, providing a consistent way to handle headers, descriptions, and icons.
-        </p>
-      </DesignComponent>
-    `,
-  stories: [
-    {
-      id: 'GroupBasic',
-      name: {
-        en: 'Basic',
-        ru: 'Базовые'
-      },
-      template: `
-        <DesignComponent
-          headline="Notifications"
-          label="Settings"
-          icon="notifications"
-          description="Configure how you receive notifications and manage your alert settings for a better user experience."
-        >
-          <p>
-            Control how and when you receive updates from the system. You can choose to be notified about
-            important account activities, new features, and marketing updates.
-          </p>
-          <p>
-            Tailor your preferences to stay informed without being overwhelmed by unnecessary messages.
-            Changes are saved automatically and applied within a few minutes.
-          </p>
-        </DesignComponent>
-      `
-    },
-    {
-      id: 'GroupSlots',
-      name: {
-        en: 'Slots usage',
-        ru: 'Использование слотов'
-      },
-      template: `
-        <DesignComponent>
-          <template #default>Default slot</template>
-          <template #headline>Headline slot</template>
-          <template #label>Label slot</template>
-          <template #description>Description slot</template>
-          <template #caption>Caption slot</template>
-          <template #trailing>Trailing slot</template>
-        </DesignComponent>
-      `
-    }
-  ],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'Group'} type={'group'}/>
-<Canvas of={Component.GroupBasic}/>
-
-<StorybookDescriptions componentName={'Block'} type={'differences'}/>
-`,
-    slots: `
-<Canvas of={Component.GroupSlots}/>
-<StorybookDescriptions componentName={'Slot'} type={'default'}/>
-<StorybookDescriptions componentName={'Slot'} type={'headline'}/>
-<StorybookDescriptions componentName={'Slot'} type={'label'}/>
-<StorybookDescriptions componentName={'Slot'} type={'description'}/>
-<StorybookDescriptions componentName={'Slot'} type={'caption'}/>
-<StorybookDescriptions componentName={'Slot'} type={'trailing'}/>
-`,
-    expose: `
-<StorybookDescriptions componentName={'Expose'} type={'labelId'}/>
-<StorybookDescriptions componentName={'Expose'} type={'descriptionId'}/>
-`
-  },
-  ai: {
-    render: `
-<div :class="classDemo.item">
-  <Group v-bind="args">
-      Content of the group.
-  </Group>
-</div>
-    `,
-    description: `
-Structural component for organizing related content with a standardized header hierarchy. Acts as a semantic wrapper for subsections or grouping elements within a larger section or card.
-Features support for headlines (h4 by default), labels, icons, and descriptions. Inherits all capabilities of the Block component, providing a consistent layout for titles and body content.
-Controlled via headline, label, and description props. Use for grouping settings, categorizing information, or breaking down complex forms into logical, titled segments.
-    `
-  }
-}

package/src/media/descriptions/wikiDescriptionsHorizontalScroll.ts

@@ -1,93 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-export const wikiDescriptionsHorizontalScroll: StorybookComponentsDescriptionItem = {
-  name: 'HorizontalScroll',
-  description: {
-    en: 'Component for creating a horizontally scrollable container. Supports smooth scrolling to the selected element.',
-    ru: 'Компонент для создания горизонтально прокручиваемого контейнера. Поддерживает плавную прокрутку к выбранному элементу.'
-  },
-  possibilities: {
-    en: [
-      'horizontal scrolling of content',
-      'automatic scrolling to the selected element on mount',
-      'support for custom tags',
-      'slot for content with binding data for items'
-    ],
-    ru: [
-      'горизонтальная прокрутка контента',
-      'автоматическая прокрутка к выбранному элементу при монтировании',
-      'поддержка пользовательских тегов',
-      'слот для контента с данными привязки для элементов'
-    ]
-  },
-  render: `
-    <DesignComponent v-bind="args">
-      <template #default="{ classItem }">
-        <div class="wiki-storybook-flex-center" :class="classItem" style="width: 256px; height: 128px; background: oklch(0.94 0.06 25);">Item 1</div>
-        <div class="wiki-storybook-flex-center" :class="classItem" style="width: 256px; height: 128px; background: oklch(0.95 0.06 50);">Item 2</div>
-        <div class="wiki-storybook-flex-center" :class="classItem" style="width: 256px; height: 128px; background: oklch(0.96 0.07 70);">Item 3</div>
-        <div class="wiki-storybook-flex-center" :class="classItem" style="width: 256px; height: 128px; background: oklch(0.97 0.08 85);">Item 4</div>
-        <div class="wiki-storybook-flex-center" :class="classItem" style="width: 256px; height: 128px; background: oklch(0.96 0.08 110);">Item 5</div>
-        <div class="wiki-storybook-flex-center" :class="classItem" style="width: 256px; height: 128px; background: oklch(0.95 0.07 140);">Item 6</div>
-        <div class="wiki-storybook-flex-center" :class="classItem" style="width: 256px; height: 128px; background: oklch(0.95 0.06 160);">Item 7</div>
-        <div class="wiki-storybook-flex-center" :class="classItem" style="width: 256px; height: 128px; background: oklch(0.94 0.05 175);">Item 8</div>
-        <div class="wiki-storybook-flex-center" :class="classItem" style="width: 256px; height: 128px; background: oklch(0.94 0.05 195);">Item 9</div>
-        <div class="wiki-storybook-flex-center" :class="classItem" style="width: 256px; height: 128px; background: oklch(0.94 0.05 215);">Item 10</div>
-        <div class="wiki-storybook-flex-center" :class="classItem" style="width: 256px; height: 128px; background: oklch(0.93 0.05 240);">Item 11</div>
-        <div class="wiki-storybook-flex-center" :class="classItem" style="width: 256px; height: 128px; background: oklch(0.93 0.06 265);">Item 12</div>
-        <div class="wiki-storybook-flex-center" :class="classItem" style="width: 256px; height: 128px; background: oklch(0.93 0.07 285);">Item 13</div>
-        <div class="wiki-storybook-flex-center" :class="classItem" style="width: 256px; height: 128px; background: oklch(0.93 0.08 305);">Item 14</div>
-        <div class="wiki-storybook-flex-center" :class="classItem" style="width: 256px; height: 128px; background: oklch(0.93 0.08 325);">Item 15</div>
-        <div class="wiki-storybook-flex-center" :class="classItem" style="width: 256px; height: 128px; background: oklch(0.93 0.08 345);">Item 16</div>
-      </template>
-    </DesignComponent>
-  `,
-  stories: [
-    {
-      id: 'HorizontalScrollBasic',
-      name: {
-        en: 'Basic Usage',
-        ru: 'Базовое использование'
-      },
-      template: `
-        <div class="wiki-storybook-flex-column">
-          <DesignComponent style="width: 100%;">
-            <template #default="{ classItem }">
-              <div class="wiki-storybook-flex-center" :class="classItem" style="height: 128px; background: oklch(0.93 0.08 305);">Item 1</div>
-              <div class="wiki-storybook-flex-center" :class="classItem" style="height: 128px; background: oklch(0.93 0.08 325);">Item 2</div>
-              <div class="wiki-storybook-flex-center" :class="classItem" style="height: 128px; background: oklch(0.93 0.08 345);">Item 3</div>
-            </template>
-          </DesignComponent>
-
-          <DesignComponent style="width: 100%;">
-            <template #default="{ classItem, classItemSelected }">
-              <div class="wiki-storybook-flex-center" :class="classItem" style="width: 256px; height: 128px; background: oklch(0.94 0.06 25);">Item 1</div>
-              <div class="wiki-storybook-flex-center" :class="classItem" style="width: 256px; height: 128px; background: oklch(0.95 0.06 50);">Item 2</div>
-              <div class="wiki-storybook-flex-center" :class="classItem" style="width: 256px; height: 128px; background: oklch(0.96 0.07 70);">Item 3</div>
-              <div class="wiki-storybook-flex-center" :class="[classItem, classItemSelected]" style="width: 256px; height: 128px; background: oklch(0.97 0.08 85);">Item 4</div>
-              <div class="wiki-storybook-flex-center" :class="classItem" style="width: 256px; height: 128px; background: oklch(0.96 0.08 110);">Item 5</div>
-              <div class="wiki-storybook-flex-center" :class="classItem" style="width: 256px; height: 128px; background: oklch(0.95 0.07 140);">Item 6</div>
-            </template>
-          </DesignComponent>
-        </div>
-      `
-    }
-  ],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'HorizontalScroll'} type={'horizontalScroll'}/>
-<StorybookDescriptions componentName={'HorizontalScroll'} type={'selected'}/>
-<Canvas of={Component.HorizontalScrollBasic}/>
-    `,
-    expose: `
-<StorybookDescriptions componentName={'HorizontalScroll'} type={'expose.toSelected'}/>
-    `
-  },
-  ai: {
-    description: `
-Container component that enables horizontal scrolling for large content sets like galleries, item lists, or tab bars. Ensures smooth navigation when the body exceeds the viewport width.
-Features automated scroll-to-selected behavior on mount and exposes a programmatic method (toSelected) for navigation. Provides scoped slot bindings to ensure correct item styling and selection tracking.
-Controlled via the tag prop for root element customization. Use for product carousels, category filters, or any horizontally-oriented navigation menus in space-constrained layouts.
-    `
-  }
-}

package/src/media/descriptions/wikiDescriptionsIcon.ts

@@ -1,134 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-export const wikiDescriptionsIcon: StorybookComponentsDescriptionItem = {
-  name: 'Icon',
-  description: {
-    en: 'A component for displaying vector icons with support for state management, automatic directionality adaptation, and design system styling.',
-    ru: 'Компонент для отображения векторных иконок с поддержкой управления состоянием, автоматической адаптацией направления и стилизацией дизайн-системы.'
-  },
-  possibilities: {
-    en: [
-      'rendering icons by identifier',
-      'toggling between two icons based on the active state',
-      'automatic mirroring for RTL languages',
-      'integration with the color palette and inverse mode',
-      'displaying a skeleton loader placeholder'
-    ],
-    ru: [
-      'рендеринг иконок по идентификатору',
-      'переключение между двумя иконками в зависимости от активного состояния',
-      'автоматическое зеркалирование для RTL языков',
-      'интеграция с цветовой палитрой и инверсный режим',
-      'отображение заполнителя (скелетона) при загрузке'
-    ]
-  },
-  import: [],
-  stories: [
-    {
-      id: 'IconState',
-      name: {
-        en: 'Icon state',
-        ru: 'Состояние иконки'
-      },
-      template: `
-        <div class="wiki-storybook-group">
-          <div class="wiki-storybook-item wiki-storybook-item--squared--xs wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Default</div>
-            <DesignComponent icon="home"/>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--xs wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Active</div>
-            <DesignComponent icon="heart_minus" iconActive="favorite" :active="true"/>
-          </div>
-        </div>
-      `
-    },
-    {
-      id: 'IconDirection',
-      name: {
-        en: 'Direction',
-        ru: 'Направление компонента'
-      },
-      template: `
-        <div class="wiki-storybook-group">
-          <div class="wiki-storybook-item wiki-storybook-item--squared--xs wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">LTR</div>
-            <DesignComponent dir icon="arrow_forward"/>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--xs wiki-storybook-item--center wiki-storybook-item--rtl">
-            <div class="wiki-storybook-item__label">RTL</div>
-            <DesignComponent dir icon="arrow_forward"/>
-          </div>
-        </div>
-      `
-    },
-    {
-      id: 'IconPalette',
-      name: {
-        en: 'Palette',
-        ru: 'Палитра'
-      },
-      template: `
-        <div class="wiki-storybook-group">
-          <div class="wiki-storybook-item wiki-storybook-item--squared--xs wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Basic</div>
-            <DesignComponent icon="home" size="lg"/>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--xs wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Palette</div>
-            <DesignComponent icon="home" size="lg" asPalette/>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--xs wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Inverse</div>
-            <DesignComponent icon="home" size="lg" asPalette inverse/>
-          </div>
-        </div>
-      `
-    },
-    {
-      id: 'IconSkeleton',
-      name: {
-        en: 'Skeleton',
-        ru: 'Скелетон'
-      },
-      components: ['Skeleton'],
-      template: `
-        <DesignSkeleton :active="true">
-          <DesignComponent isSkeleton icon="home" rounded="md"/>
-        </DesignSkeleton>
-      `
-    }
-
-  ],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'Icon'} type={'icon'}/>
-<Canvas of={Component.IconState}/>
-
-<StorybookDescriptions componentName={'Style'} type={'dir'}/>
-<Canvas of={Component.IconDirection}/>
-
-<StorybookDescriptions componentName={'Style'} type={'asPalette'}/>
-<Canvas of={Component.IconPalette}/>
-
-<StorybookDescriptions componentName={'Style'} type={'isSkeleton'}/>
-<Canvas of={Component.IconSkeleton}/>
-    `,
-    events: `
-<StorybookDescriptions componentName={'Image'} type={'event.load'}/>
-    `,
-    expose: `
-<StorybookDescriptions componentName={'Icon'} type={'expose.isActive'}/>
-    `,
-    slots: `
-<StorybookDescriptions componentName={'Slot'} type={'default'}/>
-    `
-  },
-  ai: {
-    description: `
-Vector icon component, typically utilizing the Material Symbols library. Supports dynamic state management, automatic mirroring for RTL languages, and deep integration with the design system's palette.
-Features toggle-able states (active/inactive) with specific icons for each, built-in skeleton loading (isSkeleton), and directionality adaptation. Customizing via size, palette, and inverse props ensures visual consistency across all themes.
-Controlled via the icon and iconActive props and various styling flags. Use for navigation links, action buttons, status indicators, or any UI element requiring concise visual representation.
-    `
-  }
-}

package/src/media/descriptions/wikiDescriptionsImage.ts

@@ -1,197 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-export const wikiDescriptionsImage: StorybookComponentsDescriptionItem = {
-  name: 'Image',
-  description: {
-    en: 'Component for displaying images and icons. Based on `ImageDesign` and supports working with files, links, and icon names.',
-    ru: 'Компонент для отображения изображений и иконок. Основан на `ImageDesign` и поддерживает работу с файлами, ссылками и именами икон'
-  },
-  possibilities: {
-    en: [
-      'support for various source types: string, `File`, image or PDF address',
-      'adaptive sizing with `adaptive`, `objectWidth`, `objectHeight`',
-      'cropping and positioning via `coordinator`, `x`, `y`',
-      'rotation or hiding the component with properties `turn`, `hide`, `disabled`',
-      'mode selection for filling (`size`: `auto`, `contain`, `cover`)'
-    ],
-    ru: [
-      'поддержка различных типов исходников: строка, `File`, адрес картинки или PDF',
-      'адаптивное измерение с помощью `adaptive`, `objectWidth`, `objectHeight`',
-      'обрезка и позиционирование через `coordinator`, `x`, `y`',
-      'поворот или скрытие компонента свойствами `turn`, `hide`, `disabled`',
-      'выбор режима заполнения (`size`: `auto`, `contain`, `cover`)'
-    ]
-  },
-  render: `
-      <div class="wiki-storybook-item wiki-storybook-item--widescreen wiki-storybook-item--squared--sm">
-        <DesignComponent v-bind="args"/>
-      </div>
-    `,
-  import: [
-    'import { demoPdf, image1, phone1, phone2, phone3 } from \'@dxtmisha/wiki/media\''
-  ],
-  stories: [
-    {
-      id: 'ImageType',
-      name: {
-        en: 'Value type',
-        ru: 'Тип значения'
-      },
-      setup: `
-      return {
-        image1,
-        demoPdf
-      }
-      `,
-      template: `
-        <div class="wiki-storybook-group">
-          <div class="wiki-storybook-item wiki-storybook-item--widescreen wiki-storybook-item--squared--lg">
-            <div class="wiki-storybook-item__label">Icon</div>
-            <DesignComponent value="home"/>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--widescreen wiki-storybook-item--squared--lg">
-            <div class="wiki-storybook-item__label">Image/ contain</div>
-            <DesignComponent :value="image1"/>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--rectangle wiki-storybook-item--squared--max">
-            <div class="wiki-storybook-item__label">PDF</div>
-            <DesignComponent :value="demoPdf"/>
-          </div>
-        </div>
-      `
-    },
-    {
-      id: 'ImageSize',
-      name: {
-        en: 'Display control',
-        ru: 'Отображение'
-      },
-      setup: `
-      return {
-        image1
-      }
-      `,
-      template: `
-        <div class="wiki-storybook-group">
-          <div class="wiki-storybook-item wiki-storybook-item--squared--md">
-            <div class="wiki-storybook-item__label">size: auto (default)</div>
-            <DesignComponent :value="image1" size="auto" tag-img/>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--md">
-            <div class="wiki-storybook-item__label">size: contain</div>
-            <DesignComponent :value="image1" size="contain" tag-img/>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--md">
-            <div class="wiki-storybook-item__label">size: cover</div>
-            <DesignComponent :value="image1" size="cover" tag-img/>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--md">
-            <div class="wiki-storybook-item__label">coordinator</div>
-            <DesignComponent :value="image1" :coordinator="[60, 10, 10, 40]" tag-img/>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--md">
-            <div class="wiki-storybook-item__label">x, y</div>
-            <DesignComponent :value="image1" x="20%" y="-10%" tag-img/>
-          </div>
-        </div>
-      `
-    },
-    {
-      id: 'ImageTagImg',
-      name: {
-        en: 'Using img tag',
-        ru: 'Использование тега img'
-      },
-      setup: `
-      return {
-        image1
-      }
-      `,
-      template: `
-        <div class="wiki-storybook-group">
-          <div class="wiki-storybook-item wiki-storybook-item--squared--md">
-            <div class="wiki-storybook-item__label">Background (default)</div>
-            <DesignComponent :value="image1"/>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--md">
-            <div class="wiki-storybook-item__label">tag-img + alt</div>
-            <DesignComponent :value="image1" tag-img alt="Example image"/>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--md">
-            <div class="wiki-storybook-item__label">tag-img + lazy + srcset</div>
-            <DesignComponent :value="image1" tag-img lazy alt="Responsive image" :srcset="{ '1x': image1, '2x': image1 }"/>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--md">
-            <div class="wiki-storybook-item__label">tag-img + picture</div>
-            <DesignComponent :value="image1" tag-img alt="Adaptive image" :picture="{ 768: image1, 1024: image1 }"/>
-          </div>
-        </div>
-      `
-    },
-    {
-      id: 'ImageAdaptive',
-      name: {
-        en: 'Adapted images',
-        ru: 'Адаптированные изображения'
-      },
-      setup: `
-      return {
-        phone1,
-        phone2,
-        phone3
-      }
-      `,
-      template: `
-        <div class="wiki-storybook-group">
-          <div class="wiki-storybook-item wiki-storybook-item--squared--md">
-            <DesignComponent :value="phone1" adaptive object-width="76.2"/>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--md">
-            <DesignComponent :value="phone2" adaptive object-width="71.9"/>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--md">
-            <DesignComponent :value="phone3" adaptive object-width="129.9" tag-img/>
-          </div>
-        </div>
-      `
-    }
-  ],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'Image'} type={'image'}/>
-<StorybookDescriptions componentName={'Image'} type={'value'}/>
-<StorybookDescriptions componentName={'Image'} type={'flag'}/>
-<Canvas of={Component.ImageType}/>
-
-<StorybookDescriptions componentName={'Image'} type={'img-tag'}/>
-<Canvas of={Component.ImageTagImg}/>
-
-<StorybookDescriptions componentName={'Image'} type={'size'}/>
-<Canvas of={Component.ImageSize}/>
-
-<StorybookDescriptions componentName={'Image'} type={'adaptive'}/>
-<Canvas of={Component.ImageAdaptive}/>
-    `,
-    events: `
-<StorybookDescriptions componentName={'Image'} type={'event.load'}/>
-    `,
-    expose: `
-<StorybookDescriptions componentName={'Image'} type={'expose'}/>
-    `
-  },
-  ai: {
-    render: `
-<div
-  :class="classDemo.item"
-  style="position: relative; width: 48px; height: 48px;"
->
-  <Image v-bind="args"/>
-</div>
-    `,
-    description: `
-Universal component for displaying graphic content, including images, Material icons, and PDF files. Automatically detects the content type based on the value string or File object provided.
-Features multiple display modes (contain, cover, auto), adaptive scaling (objectWidth/Height), and standard img tag support for SEO and lazy loading. Includes advanced positioning via coordinator and x/y props.
-Controlled via the value prop and various sizing/rendering flags. Use for avatars, product photos, system icons, or embedded PDF documents requiring specific cropping and aspect ratio control.
-    `
-  }
-}