@dxtmisha/wiki 0.59.1 → 0.64.0

package/dist/{wikiDescriptions-Dbkpa2Je.js → wikiDescriptions-n3cFkYRZ.js}

@@ -330,6 +330,36 @@ var e = [
 			description: "\nSmall visual indicator used to display status, counts, notifications, or short labels (tags). Typically positioned over the corner of another element (like an icon or avatar) or used inline.\nFeatures numeric handling with label-max cap (e.g., \"99+\"), dot-only mode for status indication, and support for icons. Includes flexible positioning (overlap: rectangular or circular) and various color variants.\nControlled primarily through the label, icon, and dot props. Use for unread counts, online status indicators, or marking items as \"New\" or \"Sale\" in e-commerce contexts.\n    "
 		}
 	},
+	{
+		name: "Bleed",
+		description: {
+			en: "A component that allows content to expand beyond the horizontal boundaries of its parent container",
+			ru: "Компонент, позволяющий контенту выходить за горизонтальные границы родительского контейнера"
+		},
+		possibilities: {
+			en: [
+				"automatic calculation of negative margins",
+				"flexible tag selection",
+				"useful for full-width images or blocks in padded containers"
+			],
+			ru: [
+				"автоматический расчет отрицательных отступов",
+				"гибкий выбор HTML-тега",
+				"полезно для изображений или блоков во всю ширину в контейнерах с отступами"
+			]
+		},
+		import: [],
+		render: "\n      <DesignComponent v-bind=\"args\">\n        <p>Bleed allows content to expand beyond the horizontal boundaries of its parent container.</p>\n        <p>This is useful for full-width images or decorative blocks in articles.</p>\n        <p>The component applies negative horizontal margins based on the margin-x property.</p>\n      </DesignComponent>\n    ",
+		stories: [],
+		documentation: {
+			body: "\n<StorybookDescriptions componentName={'Bleed'} type={'bleed'}/>\n    ",
+			slots: "\n<StorybookDescriptions componentName={'Slot'} type={'default'}/>\n    "
+		},
+		ai: {
+			render: "\n<div :class=\"classDemo.item\">\n  <Bleed v-bind=\"args\">\n    <p>The component allows content to expand beyond the boundaries of the parent container by applying negative horizontal margins.</p>\n  </Bleed>\n</div>\n    ",
+			description: "\nThe Bleed component is used to break elements out of their parent container's horizontal padding. It applies negative horizontal margins equal to the specified margin-x value.\nCommonly used in article layouts to make images or breakout sections take up the full width of the viewport or a wider area than the text column.\n    "
+		}
+	},
 	{
 		name: "Bars",
 		description: {
@@ -961,6 +991,29 @@ var e = [
 			description: "\nSpecialized modal component for standardized user interactions such as alerts, confirmations, and status messages. Extends the Modal component with a predefined layout for icons, titles, and action buttons.\nFeatures built-in success/error states with automatic icon switching and content styling. Supports flexible positioning of images (top/left) and integrates with Window, Bars, and Actions for a consistent footer.\nControlled via v-model:open and various content props (label, description). Use for critical operations requiring user confirmation, operation success/fail alerts, or informative system messages.\n    "
 		}
 	},
+	{
+		name: "Divider",
+		description: {
+			en: "A component for visual separation of content blocks",
+			ru: "Компонент для визуального разделения блоков контента"
+		},
+		possibilities: {
+			en: [
+				"customizable line width and color via tokens",
+				"clean and minimal design",
+				"used to improve visual hierarchy"
+			],
+			ru: [
+				"настраиваемая ширина и цвет линии через токены",
+				"чистый и минималистичный дизайн",
+				"используется для улучшения визуальной иерархии"
+			]
+		},
+		import: [],
+		stories: [],
+		documentation: { body: "\n<StorybookDescriptions componentName={'Divider'} type={'divider'}/>\n    " },
+		ai: { description: "\nA simple horizontal line used to separate content or sections. It helps in organizing information and creating a clear visual structure in the interface.\n    " }
+	},
 	{
 		name: "Dummy",
 		description: {
@@ -2738,6 +2791,73 @@ var e = [
 		},
 		ai: { description: "\nVisual representation element for a single notification message, typically orchestrated by the Snackbar component. Designed for concise informational alerts, success messages, or quick-action prompts.\nFeatures a flexible internal structure with support for labels, detailed descriptions, and material-symbol icons (leading/trailing). Includes integrated action button support, a mandatory close button, and support for rendering custom HTML or Vue components as message bodies.\nControlled via simple content props or an actions-list array for complex button configurations. Use as the base message unit for all system feedback, ensuring high visibility and accessibility through automatic ARIA status role implementation.\n    " }
 	},
+	{
+		name: "Switch",
+		description: {
+			en: "Interactive toggle switch component for binary on/off state selection",
+			ru: "Интерактивный переключатель (тогл) для выбора бинарного состояния «включено»/«выключено»"
+		},
+		possibilities: {
+			en: [
+				"binary toggling states (on / off)",
+				"built-in validation support with custom messages",
+				"label and description text support",
+				"customizable track and slider elements",
+				"disabled and loading states",
+				"ripple effect on interaction",
+				"skeleton state for loading placeholders",
+				"adaptive layout options",
+				"form integration with name and value attributes"
+			],
+			ru: [
+				"бинарные переключаемые состояния (вкл / выкл)",
+				"встроенная поддержка валидации с пользовательскими сообщениями",
+				"поддержка текста метки и описания",
+				"настраиваемые элементы трека и ползунка",
+				"состояния отключения и загрузки",
+				"эффект волны при взаимодействии",
+				"состояние скелетона для заполнителей загрузки",
+				"опции адаптивной разметки",
+				"интеграция с формами через атрибуты name и value"
+			]
+		},
+		import: ["import { ref } from 'vue'"],
+		stories: [
+			{
+				id: "SwitchVModel",
+				name: {
+					en: "Two-way binding (v-model)",
+					ru: "Двусторонняя привязка (v-model)"
+				},
+				setup: "\n      return {\n        switchValue: ref(false)\n      }\n      ",
+				template: "\n        <div class=\"wiki-storybook-flex-column\">\n          <div class=\"wiki-storybook-flex\">\n            <button class=\"wiki-storybook-button\" @click=\"switchValue = !switchValue\">Toggle {{ switchValue }}</button>\n          </div>\n          <DesignComponent\n            v-model=\"switchValue\"\n            label=\"Switch with v-model\"\n          />\n        </div>\n      "
+			},
+			{
+				id: "SwitchSkeleton",
+				name: {
+					en: "Skeleton",
+					ru: "Скелетон"
+				},
+				components: ["Skeleton"],
+				template: "\n        <DesignSkeleton :active=\"true\">\n          <div class=\"wiki-storybook-flex-column\">\n            <DesignComponent isSkeleton label=\"Loading switch\" />\n            <DesignComponent isSkeleton label=\"Another loading switch\" />\n          </div>\n        </DesignSkeleton>\n      "
+			},
+			{
+				id: "SwitchSlots",
+				name: {
+					en: "Slots usage",
+					ru: "Использование слотов"
+				},
+				template: "\n        <DesignComponent>\n          <template #default>\n            <strong>Custom label slot</strong>\n          </template>\n          <template #description>\n            <em>Custom description slot</em>\n          </template>\n        </DesignComponent>\n      "
+			}
+		],
+		documentation: {
+			body: "\n<StorybookDescriptions componentName={'Switch'} type={'switch'}/>\n\n<StorybookDescriptions componentName={'Checkbox'} type={'value'}/>\n<StorybookDescriptions componentName={'Checkbox'} type={'selected'}/>\n<StorybookDescriptions componentName={'Value'} type={'v-model'}/>\n<Canvas of={Component.SwitchVModel}/>\n\n<StorybookDescriptions componentName={'Style'} type={'isSkeleton'}/>\n<Canvas of={Component.SwitchSkeleton}/>\n    ",
+			events: "\n<StorybookDescriptions componentName={'Event'} type={'input'}/>\n<StorybookDescriptions componentName={'Event'} type={'change'}/>\n    ",
+			expose: "\n<StorybookDescriptions componentName={'Expose'} type={'value'}/>\n<StorybookDescriptions componentName={'Expose'} type={'checkValidity'}/>\n<StorybookDescriptions componentName={'Expose'} type={'validationMessage'}/>\n    ",
+			slots: "\n<Canvas of={Component.SwitchSlots}/>\n<StorybookDescriptions componentName={'Slot'} type={'label'}/>\n<StorybookDescriptions componentName={'Slot'} type={'description'}/>\n    "
+		},
+		ai: { description: "\nForm control component representing a physical switch to toggle settings or binary choices on/off.\nInherits behavior and accessibility features from Checkbox but provides a distinct sliding track visual representation.\nSupports primary labels, details descriptions, custom track customization, built-in validation states, loading states, and adaptive design layouts.\nControlled via v-model and emits @input/@change events. Use for instant toggles of features or preferences.\n    " }
+	},
 	{
 		name: "TabItem",
 		description: {
@@ -2948,6 +3068,62 @@ var e = [
 		},
 		ai: { description: "\nLow-level functional engine for multi-line inputs that provides precise, real-time height adjustment based on content. Implements a reliable cloning mechanism to calculate scroll-free container heights while respecting parent padding and font styles.\nFeatures automated height synchronization during content changes, supporting smooth CSS transitions and native textarea attributes via inputAttrs. Operates as a foundational tool for the Textarea component, ensuring character entry never triggers unwanted shift or overflow.\nPrimarily integrated as a subcomponent; should generally not be manually used for standalone input fields. Controlled via reactive value bindings, serving as the high-performance core for any dynamic data entry element requiring responsive layout scaling.\n    " }
 	},
+	{
+		name: "TextDescription",
+		description: {
+			en: "A simple component for displaying text description with dynamic HTML tag support",
+			ru: "Простой компонент для отображения текстового описания с поддержкой динамического HTML-тега"
+		},
+		possibilities: {
+			en: [
+				"renders text from description property or description slot",
+				"supports dynamic HTML tags (span, div, p, etc.)",
+				"fully compatible with standard design tokens",
+				"clean and lightweight DOM output"
+			],
+			ru: [
+				"выводит текст из свойства description или слота описания",
+				"поддерживает динамические HTML-теги (span, div, p и т.д.)",
+				"полностью совместим со стандартными токенами дизайна",
+				"чистый и легковесный DOM"
+			]
+		},
+		import: [],
+		stories: [],
+		documentation: {
+			body: "\n<StorybookDescriptions componentName={'TextDescription'} type={'textDescription'}/>\n    ",
+			slots: "\n<StorybookDescriptions componentName={'Slot'} type={'description'}/>\n    "
+		},
+		ai: { description: "\nA utility component for displaying textual descriptions. Supports description slot injection, custom HTML tags via \"tag\" property (defaults to \"span\"), and clean semantic output. Integrated with DescriptionInclude for standardized description rendering.\n    " }
+	},
+	{
+		name: "TextLabel",
+		description: {
+			en: "A simple component for displaying text or labels with dynamic HTML tag support",
+			ru: "Простой компонент для отображения текста или меток с поддержкой динамического HTML-тега"
+		},
+		possibilities: {
+			en: [
+				"renders text from label property or default slot",
+				"supports dynamic HTML tags (span, div, p, h1-h6, etc.)",
+				"fully compatible with standard design tokens",
+				"clean and lightweight DOM output"
+			],
+			ru: [
+				"выводит текст из свойства label или слота по умолчанию",
+				"поддерживает динамические HTML-теги (span, div, p, h1-h6 и т.д.)",
+				"полностью совместим со стандартными токенами дизайна",
+				"чистый и легковесный DOM"
+			]
+		},
+		import: [],
+		stories: [],
+		documentation: {
+			body: "\n<StorybookDescriptions componentName={'TextLabel'} type={'textLabel'}/>\n    ",
+			slots: "\n<StorybookDescriptions componentName={'Slot'} type={'default'}/>\n    "
+		},
+		ai: { description: "\nA utility component for displaying text and labels. Supports slot injection, custom HTML tags via \"tag\" property (defaults to \"span\"), and clean semantic output. Integrated with LabelInclude for standardized text rendering.\n    " }
+	},
 	{
 		name: "Tooltip",
 		description: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dxtmisha/wiki",
   "private": false,
-  "version": "0.59.1",
+  "version": "0.64.0",
   "type": "module",
   "description": "Wiki documentation and storybook utilities for DXT UI design system",
   "keywords": [

package/src/media/functional/functional/api/api.en.mdx

@@ -13,9 +13,11 @@ The main task of these tools is to automate routine operations: tracking loading
 ## Available Tools
 
 - `useApiRef` — Reactive data retrieval (GET) with automatic execution and storage in a `ref`.
+- `useApiAsyncRef` — Asynchronous version of `useApiRef` for immediate initialization (SSR).
 - `useApiRequest` — Base hook for manual execution of any HTTP requests (returns the `send` method).
 - `useApiPost / Put / Delete` — Specialized wrappers for mutations (create, update, delete).
 - `useApiManagementRef` — A comprehensive orchestrator combining GET requests, search, formatting, and mutations into a single cycle.
+- `useApiManagementAsyncRef` — Asynchronous orchestrator for immediate initialization (SSR).
 
 ## How to Work with Them
 
@@ -71,4 +73,29 @@ const {
 // After calling sendDelete(), the main 'list' will update AUTOMATICALLY!
 ```
 
+## Error Handling
+
+The API hooks use a contract-based error management system. Instead of manually handling every response status in your components, you define a "base" of expected errors and let the system resolve them automatically.
+
+### Workflow:
+1.  **Define a Contract (`errorContract`)**: You pass a list of potential error patterns (a contract) to the hook. This serves as a database of errors you want to handle specifically.
+2.  **Automatic Matching**: When a request fails (status ≥ 400), the system compares the response against your contract. It matches based on:
+    *   **HTTP Status**: e.g., `404` or `500`.
+    *   **Error Code**: A specific string code extracted from the JSON response body (e.g., `'USER_NOT_FOUND'`).
+    *   **URL Pattern**: Specific endpoints or patterns (RegExp).
+    *   **Custom Validation**: A function that returns `true` if the response matches the error.
+3.  **Data Resolution**: If a match is found, the system populates the reactive `errorItem` property with structured data, including the localized message and the resolved error code.
+4.  **UI Implementation**: In your component, you simply use the `errorItem` to display messages or toggle UI states, confident that the matching logic is handled centrally.
+
+This system ensures that your components remain clean and focused on display logic, while error identification remains declarative and reusable.
+
+## Server-Side Rendering (SSR)
+
+All API hooks are designed with **Server-Side Rendering (SSR)** support in mind. To ensure data is pre-fetched on the server before the page is sent to the client, you have two options:
+
+1.  **Async Versions**: Use `useApiAsyncRef` or `useApiManagementAsyncRef`. These hooks automatically call `initSsr()` upon creation, ensuring the request is executed during server-side rendering.
+2.  **Manual `initSsr()`**: For standard hooks (like `useApiRef`), you must explicitly call the `.initSsr()` method inside the component's `setup()` block.
+
+This prevents "content flickering" (where users see empty states or skeletons followed by data loading on the client) and improves SEO by providing fully populated HTML from the server.
+
 This architecture allows you to describe data logic declaratively, focusing on request configuration rather than manual management of loading states and list updates.

package/src/media/functional/functional/api/api.ru.mdx

@@ -13,9 +13,11 @@ import {Meta} from '@storybook/addon-docs/blocks'
 ## Доступные инструменты
 
 - `useApiRef` — Реактивное получение данных (GET) с автоматическим запуском и хранением в `ref`.
+- `useApiAsyncRef` — Асинхронная версия `useApiRef` для немедленной инициализации (SSR).
 - `useApiRequest` — Базовый хук для ручного выполнения любых HTTP-запросов (возвращает метод `send`).
 - `useApiPost / Put / Delete` — Специализированные обертки для мутаций (создание, обновление, удаление).
 - `useApiManagementRef` — Комплексный оркестратор, объединяющий GET-запросы, поиск, форматирование и мутации в единый цикл.
+- `useApiManagementAsyncRef` — Асинхронный оркестратор для немедленной инициализации (SSR).
 
 ## Как с ними работать
 
@@ -71,4 +73,29 @@ const {
 // После вызова sendDelete() основной список list обновится САМ!
 ```
 
+## Работа с ошибками
+
+Хуки API используют систему управления ошибками на основе контрактов. Вместо того чтобы вручную обрабатывать каждый статус ответа в компонентах, вы определяете «базу» ожидаемых ошибок, и система разрешает их автоматически.
+
+### Процесс работы:
+1.  **Определение контракта (`errorContract`)**: Вы передаете хуку список возможных шаблонов ошибок (контракт). Это служит вашей базой данных для ошибок, которые требуют специфической обработки.
+2.  **Автоматическое сопоставление**: Если запрос завершается неудачей (статус ≥ 400), система сравнивает ответ с вашим контрактом. Сопоставление происходит по следующим критериям:
+    *   **HTTP-статус**: например, `404` или `500`.
+    *   **Код ошибки**: специфический строковый код, извлеченный из JSON-тела ответа (например, `'USER_NOT_FOUND'`).
+    *   **Шаблон URL**: конкретные эндпоинты или паттерны (RegExp).
+    *   **Пользовательская валидация**: функция, которая возвращает `true`, если ответ соответствует ошибке.
+3.  **Разрешение данных**: Если совпадение найдено, система заполняет реактивное свойство `errorItem` структурированными данными, включая локализованное сообщение и разрешенный код ошибки.
+4.  **Реализация в UI**: В своем компоненте вы просто используете `errorItem` для отображения сообщений или переключения состояний интерфейса, будучи уверенными, что логика идентификации ошибок вынесена в контракт.
+
+Эта система гарантирует, что ваши компоненты останутся чистыми и сфокусированными на логике отображения, в то время как идентификация ошибок остается декларативной и переиспользуемой.
+
+## Работа в SSR
+
+Все хуки для работы с API спроектированы с учетом поддержки **Server-Side Rendering (SSR)**. Чтобы данные были предзагружены на сервере до отправки страницы клиенту, у вас есть два варианта:
+
+1.  **Асинхронные версии**: Используйте `useApiAsyncRef` или `useApiManagementAsyncRef`. Эти хуки автоматически вызывают `initSsr()` при создании, что гарантирует выполнение запроса во время серверного рендеринга.
+2.  **Ручной вызов `initSsr()`**: Для стандартных хуков (например, `useApiRef`) необходимо явно вызвать метод `.initSsr()` внутри блока `setup()` компонента.
+
+Это позволяет избежать «мерцания» контента (когда пользователь видит пустую страницу или скелетон, а затем данные подгружаются на клиенте) и улучшает SEO, предоставляя полностью заполненный HTML с сервера.
+
 Такая архитектура позволяет описывать логику работы с данными декларативно, фокусируясь на конфигурации запросов, а не на ручном управлении состояниями загрузки и обновлении списков.

package/src/media/functional/functional/api/api.vi.mdx

@@ -13,9 +13,11 @@ Nhiệm vụ chính của các công cụ này là tự động hóa các tác v
 ## Các công cụ hiện có
 
 - `useApiRef` — Truy xuất dữ liệu phản hồi (GET) với tính năng tự động chạy và lưu trữ trong `ref`.
+- `useApiAsyncRef` — Phiên bản bất đồng bộ của `useApiRef` để khởi tạo ngay lập tức (SSR).
 - `useApiRequest` — Hook cơ bản để thực hiện thủ công bất kỳ yêu cầu HTTP nào (trả về phương thức `send`).
 - `useApiPost / Put / Delete` — Các lớp vỏ chuyên dụng cho các thay đổi (tạo, cập nhật, xóa).
 - `useApiManagementRef` — Bộ điều phối toàn diện, kết hợp các yêu cầu GET, tìm kiếm, định dạng và thay đổi thành một chu kỳ duy nhất.
+- `useApiManagementAsyncRef` — Bộ điều phối bất đồng bộ để khởi tạo ngay lập tức (SSR).
 
 ## Cách làm việc với chúng
 
@@ -71,4 +73,29 @@ const {
 // Sau khi gọi sendDelete(), danh sách chính 'list' sẽ TỰ ĐỘNG cập nhật!
 ```
 
+## Xử lý lỗi
+
+Các hook API sử dụng hệ thống quản lý lỗi dựa trên hợp đồng. Thay vì xử lý thủ công từng trạng thái phản hồi trong các component, bạn xác định một "cơ sở" các lỗi dự kiến và để hệ thống tự động giải quyết chúng.
+
+### Quy trình làm việc:
+1.  **Xác định Hợp đồng (`errorContract`)**: Bạn truyền một danh sách các mẫu lỗi tiềm năng (một hợp đồng) cho hook. Điều này đóng vai trò như một cơ sở dữ liệu về các lỗi bạn muốn xử lý cụ thể.
+2.  **So khớp tự động**: Khi một yêu cầu thất bại (trạng thái ≥ 400), hệ thống sẽ so sánh phản hồi với hợp đồng của bạn. Nó khớp dựa trên:
+    *   **Trạng thái HTTP**: ví dụ: `404` hoặc `500`.
+    *   **Mã lỗi**: Một mã chuỗi cụ thể được trích xuất từ thân phản hồi JSON (ví dụ: `'USER_NOT_FOUND'`).
+    *   **Mẫu URL**: Các endpoint cụ thể hoặc các mẫu (RegExp).
+    *   **Xác thực tùy chỉnh**: Một hàm trả về `true` nếu phản hồi khớp với lỗi.
+3.  **Giải quyết dữ liệu**: Nếu tìm thấy sự phù hợp, hệ thống sẽ điền vào thuộc tính reactive `errorItem` các dữ liệu có cấu trúc, bao gồm thông báo đã được bản địa hóa và mã lỗi đã được giải quyết.
+4.  **Triển khai UI**: Trong component của mình, bạn chỉ cần sử dụng `errorItem` để hiển thị thông báo hoặc chuyển đổi trạng thái UI, tin tưởng rằng logic so khớp lỗi đã được xử lý tập trung.
+
+Hệ thống này đảm bảo rằng các component của bạn luôn sạch sẽ và tập trung vào logic hiển thị, trong khi việc nhận diện lỗi vẫn mang tính khai báo và có thể tái sử dụng.
+
+## Server-Side Rendering (SSR)
+
+Tất cả các hook API được thiết kế với sự hỗ trợ cho **Server-Side Rendering (SSR)**. Để đảm bảo dữ liệu được lấy trước trên máy chủ trước khi trang được gửi đến máy khách, bạn có hai lựa chọn:
+
+1.  **Phiên bản bất đồng bộ**: Sử dụng `useApiAsyncRef` hoặc `useApiManagementAsyncRef`. Các hook này tự động gọi `initSsr()` khi được tạo, đảm bảo yêu cầu được thực thi trong quá trình render phía máy chủ.
+2.  **Gọi `initSsr()` thủ công**: Đối với các hook tiêu chuẩn (như `useApiRef`), bạn phải gọi phương thức `.initSsr()` một cách rõ ràng bên trong khối `setup()` của component.
+
+Điều này giúp ngăn chặn hiện tượng "nhấp nháy nội dung" (khi người dùng thấy trạng thái trống hoặc skeleton trước khi dữ liệu được tải ở máy khách) và cải thiện SEO bằng cách cung cấp HTML đã có đầy đủ dữ liệu từ máy chủ.
+
 Kiến trúc này cho phép bạn mô tả logic làm việc với dữ liệu một cách khai báo, tập trung vào cấu hình yêu cầu thay vì quản lý thủ công các trạng thái tải và cập nhật danh sách.

package/src/media/functional/functional/composables/useApiAsyncRef/useApiAsyncRef.en.mdx

@@ -21,11 +21,32 @@ The parameters are identical to `useApiRef`.
 - `conditions?: RefType<boolean>` — request conditions.
 - `transformation?: (data: T, isResponseContractValid?: ApiDataValidation) => ApiData<R>` — data transformation.
 - `validateResponseContract?: (data: T) => ApiDataValidation` — contract validation.
+- `errorContract?: ApiErrorStorageList` — storage of response error contracts.
 - `unmounted?: boolean` — removal from cache on unmount.
 - `apiInstance?: ApiInstance` — API instance.
 
 ## Return Value
-Returns the `UseApiRef<R>` object. The structure of the `UseApiRef` object is identical to the return value of [`useApiRef`](./useApiRef.en.mdx).
+Returns the `UseApiRef<R>` object:
+
+**Reactive states:**
+- `data: ComputedRef<ApiData<R> | undefined>` — reactive data.
+- `item: Ref<ApiData<R> | undefined>` — reactive item.
+- `errorItem: ComputedRef<ApiErrorItem | undefined>` — current error object if the request failed.
+- `isResponseContractValid: ComputedRef<boolean>` — `true` if the response contract is valid.
+- `responseValidationResult: ComputedRef<ApiDataValidation | undefined>` — detailed contract validation result.
+- `length: ComputedRef<number>` — count of elements in the list.
+- `starting: ComputedRef<boolean>` — flag for initial loading phase.
+- `loading: Ref<boolean>` — current loading status.
+- `reading: Ref<boolean>` — flag for active data processing.
+
+**Methods:**
+- `isStarting(): boolean`, `isLoading(): boolean`, `isReading(): boolean` — status check methods.
+- `getItem(): ApiData<R> | undefined` — get current data value without reactivity.
+- `init(awaitFetch?: boolean): Promise<void>` — manual initialization.
+- `initSsr(): void` — SSR initialization.
+- `reset(): Promise<void>` — force re-run the request.
+- `stop(): void` — stop observation and clear data.
+- `abort(): void` — cancel the current HTTP request.
 
 ## Example
 

package/src/media/functional/functional/composables/useApiAsyncRef/useApiAsyncRef.ru.mdx

@@ -21,11 +21,32 @@ import {Meta} from '@storybook/addon-docs/blocks'
 - `conditions?: RefType<boolean>` — условия выполнения запроса.
 - `transformation?: (data: T, isResponseContractValid?: ApiDataValidation) => ApiData<R>` — преобразование данных.
 - `validateResponseContract?: (data: T) => ApiDataValidation` — валидация контракта.
+- `errorContract?: ApiErrorStorageList` — хранилище контрактов ошибок ответа.
 - `unmounted?: boolean` — удаление из кэша при размонтировании.
 - `apiInstance?: ApiInstance` — экземпляр API.
 
 ## Возвращаемое значение
-Возвращает объект `UseApiRef<R>`. Состав объекта `UseApiRef` полностью идентичен возвращаемому значению [`useApiRef`](./useApiRef.ru.mdx).
+Возвращает объект `UseApiRef<R>`:
+
+**Реактивные состояния:**
+- `data: ComputedRef<ApiData<R> | undefined>` — реактивные данные.
+- `item: Ref<ApiData<R> | undefined>` — реактивный элемент.
+- `errorItem: ComputedRef<ApiErrorItem | undefined>` — текущий объект ошибки, если запрос не удался.
+- `isResponseContractValid: ComputedRef<boolean>` — `true`, если контракт ответа валиден.
+- `responseValidationResult: ComputedRef<ApiDataValidation | undefined>` — подробный результат валидации контракта.
+- `length: ComputedRef<number>` — количество элементов в списке.
+- `starting: ComputedRef<boolean>` — флаг начальной фазы загрузки.
+- `loading: Ref<boolean>` — текущий статус загрузки.
+- `reading: Ref<boolean>` — флаг активной обработки данных.
+
+**Методы:**
+- `isStarting(): boolean`, `isLoading(): boolean`, `isReading(): boolean` — методы проверки статуса.
+- `getItem(): ApiData<R> | undefined` — получить текущее значение данных без реактивности.
+- `init(awaitFetch?: boolean): Promise<void>` — ручная инициализация.
+- `initSsr(): void` — инициализация для SSR.
+- `reset(): Promise<void>` — принудительный перезапуск запроса.
+- `stop(): void` — остановка наблюдения и очистка данных.
+- `abort(): void` — отмена текущего HTTP-запроса.
 
 ## Пример
 

package/src/media/functional/functional/composables/useApiAsyncRef/useApiAsyncRef.vi.mdx

@@ -21,11 +21,32 @@ Các tham số hoàn toàn giống với `useApiRef`.
 - `conditions?: RefType<boolean>` — điều kiện thực thi.
 - `transformation?: (data: T, isResponseContractValid?: ApiDataValidation) => ApiData<R>` — chuyển đổi dữ liệu.
 - `validateResponseContract?: (data: T) => ApiDataValidation` — xác thực hợp đồng dữ liệu.
+- `errorContract?: ApiErrorStorageList` — nơi lưu trữ hợp đồng lỗi phản hồi.
 - `unmounted?: boolean` — có xóa khỏi cache khi unmount hay không.
 - `apiInstance?: ApiInstance` — instance của API.
 
 ## Giá trị trả về
-Trả về đối tượng `UseApiRef<R>`. Cấu trúc của đối tượng `UseApiRef` hoàn toàn giống với giá trị trả về của [`useApiRef`](./useApiRef.vi.mdx).
+Trả về đối tượng `UseApiRef<R>`:
+
+**Trạng thái phản ứng:**
+- `data: ComputedRef<ApiData<R> | undefined>` — dữ liệu reactive.
+- `item: Ref<ApiData<R> | undefined>` — phần tử reactive.
+- `errorItem: ComputedRef<ApiErrorItem | undefined>` — đối tượng lỗi hiện tại nếu yêu cầu thất bại.
+- `isResponseContractValid: ComputedRef<boolean>` — `true` nếu hợp đồng phản hồi hợp lệ.
+- `responseValidationResult: ComputedRef<ApiDataValidation | undefined>` — kết quả chi tiết xác thực hợp đồng.
+- `length: ComputedRef<number>` — số lượng phần tử trong danh sách.
+- `starting: ComputedRef<boolean>` — cờ cho giai đoạn tải ban đầu.
+- `loading: Ref<boolean>` — trạng thái tải hiện tại.
+- `reading: Ref<boolean>` — cờ xử lý dữ liệu đang hoạt động.
+
+**Phương thức:**
+- `isStarting(): boolean`, `isLoading(): boolean`, `isReading(): boolean` — các phương thức kiểm tra trạng thái.
+- `getItem(): ApiData<R> | undefined` — lấy giá trị dữ liệu hiện tại không cần phản ứng.
+- `init(awaitFetch?: boolean): Promise<void>` — khởi tạo thủ công.
+- `initSsr(): void` — khởi tạo cho SSR.
+- `reset(): Promise<void>` — buộc chạy lại yêu cầu.
+- `stop(): void` — dừng theo dõi và xóa dữ liệu.
+- `abort(): void` — hủy yêu cầu HTTP hiện tại.
 
 ## Ví dụ
 

package/src/media/functional/functional/composables/useApiDelete/useApiDelete.en.mdx

@@ -4,31 +4,35 @@ import { Meta } from '@storybook/addon-docs/blocks'
 
 # `useApiDelete`
 
-Returns an object with a loading state and a `send` method for executing API `DELETE` requests.
+Returns an object with a loading state and a `send` method for executing API `DELETE` requests. It is a convenient wrapper over `useApiRequest` that pre-fills the `DELETE` method. Accepts settings as a single `UseApiDeleteSetup` object.
 
 **Parameters:**
-- `path?: RefOrNormal<string | undefined>` — Path to the API endpoint (can be reactive).
-- `action?: (data: Return | undefined) => Promise<void> | void` — Callback action to perform after the request completes successfully.
-- `transformation?: (data: T) => Return` — Function to transform the response data before it is returned or passed to the `action`.
-- `toData: boolean = true` — Whether to extract the `data` field from the response.
-- `options?: ApiOptions` — Additional request options (`ApiFetch` object parameter).
-- `apiInstance?: ApiInstance` — API instance to use for the request. Defaults to `Api.getItem()`.
+- `setup: UseApiDeleteSetup` — Configuration setup object:
+  - `path?: RefOrNormal<string | undefined>` — Path to the API endpoint (can be reactive).
+  - `action?: (data: Return | undefined) => Promise<void> | void` — Callback action to perform after the request completes successfully.
+  - `transformation?: (data: T) => Return` — Function to transform the response data before it is returned or passed to the `action`.
+  - `validateRequestContract?: (data: Request) => ApiDataValidation & Return` — Request contract validation function.
+  - `validateResponseContract?: (data: T) => ApiDataValidation & Return` — Response contract validation function.
+  - `errorContract?: ApiErrorStorageList` — storage of response error contracts.
+  - `toData?: boolean` — Whether to extract the `data` field from the response. Defaults to `true`.
+  - `options?: ApiOptions` — Additional request options (`ApiFetch` object parameter).
+  - `apiInstance?: ApiInstance` — API instance to use for the request. Defaults to `Api.getItem()`.
 
 **Returns:**
 An object with the following properties:
 - `loading: Ref<boolean>` — Reactive loading state. It becomes `true` while the request is in progress and `false` after it completes or fails.
-- `send(request?: Request): Promise<Return | undefined>` — An asynchronous method for sending the `DELETE` request. It automatically manages the `loading` state, applies the transformation function to the response, executes the `action` callback on success, and safely handles errors by logging them to the console.
+- `send(request?: Request): Promise<Return | undefined>` — An asynchronous method for sending the `DELETE` request. It automatically manages the `loading` state, validates the request and response contracts, applies the transformation function to the response, executes the `action` callback on success, and safely handles errors by logging them to the console.
 
 ```typescript
 import { useApiDelete } from '@dxtmisha/functional'
 
-const { loading, send } = useApiDelete(
-  '/api/delete',
-  (data) => console.log('Action complete:', data),
-  (raw) => ({ ...raw, processed: true }),
-  true,
-  { cache: false }
-)
+const { loading, send } = useApiDelete({
+  path: '/api/delete',
+  action: (data) => console.log('Action complete:', data),
+  transformation: (raw) => ({ ...raw, processed: true }),
+  toData: true,
+  options: { cache: false }
+})
 
 const handleDelete = async () => {
   const result = await send({ id: 1 })

package/src/media/functional/functional/composables/useApiDelete/useApiDelete.ru.mdx

@@ -4,31 +4,35 @@ import { Meta } from '@storybook/addon-docs/blocks'
 
 # `useApiDelete`
 
-Возвращает объект с состоянием загрузки и методом `send` для выполнения `DELETE`-запросов к API.
+Возвращает объект с состоянием загрузки и методом `send` для выполнения `DELETE`-запросов к API. Является удобной оберткой над `useApiRequest` с предустановленным методом `DELETE`. Принимает настройки в виде единого объекта `UseApiDeleteSetup`.
 
 **Параметры:**
-- `path?: RefOrNormal<string | undefined>` — Путь к endpoint API (может быть реактивным).
-- `action?: (data: Return | undefined) => Promise<void> | void` — Действие (коллбэк), выполняемое после успешного завершения запроса.
-- `transformation?: (data: T) => Return` — Функция трансформации ответа от сервера перед возвращением или передачей в `action`.
-- `toData: boolean = true` — Извлекать ли поле `data` из ответа.
-- `options?: ApiOptions` — Дополнительные опции запроса (объект параметров `ApiFetch`).
-- `apiInstance?: ApiInstance` — Экземпляр API, используемый для выполнения запроса. По умолчанию `Api.getItem()`.
+- `setup: UseApiDeleteSetup` — Объект настроек запроса:
+  - `path?: RefOrNormal<string | undefined>` — Путь к endpoint API (может быть реактивным).
+  - `action?: (data: Return | undefined) => Promise<void> | void` — Действие (коллбэк), выполняемое после успешного завершения запроса.
+  - `transformation?: (data: T) => Return` — Функция трансформации ответа от сервера перед возвращением или передачей в `action`.
+  - `validateRequestContract?: (data: Request) => ApiDataValidation & Return` — Функция валидации контракта отправляемого запроса.
+  - `validateResponseContract?: (data: T) => ApiDataValidation & Return` — Функция валидации контракта полученного ответа.
+  - `errorContract?: ApiErrorStorageList` — хранилище контрактов ошибок ответа.
+  - `toData?: boolean` — Извлекать ли поле `data` из ответа. По умолчанию `true`.
+  - `options?: ApiOptions` — Дополнительные опции запроса (объект параметров `ApiFetch`).
+  - `apiInstance?: ApiInstance` — Экземпляр API, используемый для выполнения запроса. По умолчанию `Api.getItem()`.
 
 **Возвращает:**
 Объект со следующими свойствами:
 - `loading: Ref<boolean>` — Реактивное состояние загрузки. Принимает значение `true` во время выполнения запроса и `false` после его завершения или ошибки.
-- `send(request?: Request): Promise<Return | undefined>` — Асинхронный метод для отправки `DELETE`-запроса. Он автоматически управляет состоянием `loading`, применяет функцию трансформации к ответу, вызывает коллбэк `action` при успехе и безопасно обрабатывает ошибки.
+- `send(request?: Request): Promise<Return | undefined>` — Асинхронный метод для отправки `DELETE`-запроса. Он автоматически управляет состоянием `loading`, проверяет контракты валидации запроса и ответа, применяет функцию трансформации к ответам, вызывает коллбэк `action` при успехе и безопасно обрабатывает ошибки.
 
 ```typescript
 import { useApiDelete } from '@dxtmisha/functional'
 
-const { loading, send } = useApiDelete(
-  '/api/delete',
-  (data) => console.log('Действие завершено:', data),
-  (raw) => ({ ...raw, processed: true }),
-  true,
-  { cache: false }
-)
+const { loading, send } = useApiDelete({
+  path: '/api/delete',
+  action: (data) => console.log('Действие завершено:', data),
+  transformation: (raw) => ({ ...raw, processed: true }),
+  toData: true,
+  options: { cache: false }
+})
 
 const handleDelete = async () => {
   const result = await send({ id: 1 })