@dxtmisha/wiki 0.39.1 → 0.39.2

package/src/media/functional/figma-code/classes/FigmaStorage/FigmaStorage.vi.mdx

@@ -0,0 +1,90 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/figma-code/Classes/FigmaStorage - Quản lý Lưu trữ'/>
+
+# Lớp FigmaStorage
+
+Một lớp để quản lý `PluginData` trong Figma một cách mạnh mẽ. Nó cung cấp một API cấp cao để lưu trữ, truy xuất và kiểm soát thời hạn của dữ liệu trên các node Figma (mặc định là node gốc của tài liệu), hỗ trợ bộ nhớ đệm (caching) và các giá trị mặc định.
+
+## Các tính năng chính
+
+- **Tính kiên trì (Persistence)** — Bao bọc `getPluginData` và `setPluginData` để lưu trữ dữ liệu liền mạch.
+- **Bộ nhớ đệm (In-Memory Caching)** — Lưu trữ các giá trị trong thực thể để truy cập nhanh trong ngữ cảnh thực thi hiện tại.
+- **Logic hết hạn** — Hỗ trợ lưu trữ dựa trên thời gian để vô hiệu hóa dữ liệu lỗi thời.
+- **Giá trị chức năng** — Hỗ trợ truyền các hàm dưới dạng giá trị hoặc giá trị mặc định để tạo dữ liệu động.
+
+## Khởi tạo
+
+Khởi tạo đối tượng bằng cách gọi hàm dựng `FigmaStorage(name, item, cache)`.
+
+### Tham số Generics
+
+Lớp hỗ trợ một tham số generic để quản lý dữ liệu có định kiểu:
+- `T` — Kiểu dữ liệu của giá trị được lưu trữ và truy xuất.
+
+**Tham số:**
+- `name: string` — Tên khóa duy nhất cho mục lưu trữ.
+- `item: PluginDataMixin = figma.root` — Node Figma nơi dữ liệu sẽ được lưu trữ. Mặc định là `figma.root`.
+- `cache: number` — (Tùy chọn) Thời gian sống (TTL) tính bằng giây cho dữ liệu được lưu trữ.
+
+```typescript
+import { FigmaStorage } from '@dxtmisha/figma-code'
+
+// 1. Khởi tạo với kiểu dữ liệu ngầm định
+const settings = new FigmaStorage('plugin-settings')
+
+// 2. Sử dụng generics để định kiểu nghiêm ngặt
+interface MyData { theme: string; version: number }
+const typedSettings = new FigmaStorage<MyData>('app-data')
+
+// 3. Khởi tạo với bộ nhớ đệm 1 giờ
+const cacheSettings = new FigmaStorage('cache', figma.root, 3600)
+```
+
+## Các phương thức
+
+### `get`
+
+Truy xuất dữ liệu từ bộ lưu trữ với hỗ trợ các giá trị mặc định và xác thực bộ nhớ đệm.
+
+**Tham số:**
+- `defaultValue: T | (() => T)` — (Tùy chọn) Giá trị được trả về (và bộ lưu trữ) nếu bộ lưu trữ trống hoặc hết hạn.
+
+**Trả về:** `T | undefined`
+
+```javascript
+const val = settings.get('default_val')
+```
+
+### `set`
+
+Cập nhật dữ liệu trong cả bộ nhớ đệm trong bộ nhớ và `PluginData` của node Figma.
+
+**Tham số:**
+- `value: T | (() => T)` — (Tùy chọn) Giá trị mới hoặc một hàm trả về giá trị mới.
+
+**Trả về:** `T | undefined`
+
+```javascript
+settings.set({ theme: 'dark' })
+```
+
+### `remove`
+
+Xóa dữ liệu khỏi cả bộ nhớ đệm trong bộ nhớ và `PluginData` của node Figma.
+
+**Trả về:** `this`
+
+```javascript
+settings.remove()
+```
+
+### `getName`
+
+Trả về tên khóa được sử dụng cho thực thể lưu trữ này.
+
+**Trả về:** `string`
+
+```javascript
+console.log(settings.getName())
+```

package/src/media/functional/figma-code/classes/FigmaTopLevelFrames/FigmaTopLevelFrames.en.mdx

@@ -0,0 +1,45 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/figma-code/Classes/FigmaTopLevelFrames - Top-Level Frame Management'/>
+
+# FigmaTopLevelFrames Class
+
+A static utility class for managing, caching, and communicating the list of top-level frames within the Figma plugin environment. It bridges the gap between the Figma document structure and the plugin UI via a dedicated messenger.
+
+## Key Features
+
+- **Automated Caching** — Efficiently manages a singleton-like cache of formatted frame data.
+- **Messenger Integration** — Simplifies bidirectional communication between the plugin and the UI regarding frame lists.
+- **Node Processing** — Leverages `FigmaFrame` to extract and format core node properties (ID, name, JPG export) for UI display.
+
+## Static Methods
+
+### `getListData`
+
+Retrieves and caches the formatted list of top-level frames. It processes each main frame from the current page, extracting its ID, name, and exporting it to a JPG format.
+
+**Returns:** `Promise<UiFigmaFramesList>` — A promise that resolves to the array of formatted frame data.
+
+```typescript
+const frames = await FigmaTopLevelFrames.getListData()
+```
+
+### `send`
+
+Sets up a listener for frame requests using the plugin messenger. When the `UI_FIGMA_FRAMES_POST_NAME` message is received from the UI, it automatically fetches the latest data and posts it back.
+
+**Returns:** `void`
+
+```typescript
+FigmaTopLevelFrames.send()
+```
+
+## Types
+
+### `UiFigmaFramesList`
+
+An array of objects representing the processed frame data for the UI.
+- `id: string` — Unique Figma node ID.
+- `name: string` — Display name of the frame.
+- `image: Uint8Array | string` — Exported JPG data.
+- `item: FigmaItem` — The wrapped `FigmaItem` instance for further operations.

package/src/media/functional/figma-code/classes/FigmaTopLevelFrames/FigmaTopLevelFrames.ru.mdx

@@ -0,0 +1,45 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/figma-code/Classes/FigmaTopLevelFrames - Управление фреймами верхнего уровня'/>
+
+# Класс FigmaTopLevelFrames
+
+Статический утилитарный класс для управления, кэширования и передачи списка фреймов верхнего уровня в среде плагина Figma. Он служит связующим звеном между структурой документа Figma и UI плагина через выделенный мессенджер.
+
+## Ключевые особенности
+
+- **Автоматическое кэширование** — эффективно управляет кэшем отформатированных данных фреймов по принципу синглтона.
+- **Интеграция с мессенджером** — упрощает двустороннюю связь между плагином и UI относительно списков фреймов.
+- **Обработка узлов** — использует `FigmaFrame` для извлечения и форматирования основных свойств узлов (ID, имя, экспорт в JPG) для отображения в UI.
+
+## Статические методы
+
+### `getListData`
+
+Получает и кэширует отформатированный список фреймов верхнего уровня. Он обрабатывает каждый основной фрейм с текущей страницы, извлекая его ID, имя и экспортируя его в формат JPG.
+
+**Возвращает:** `Promise<UiFigmaFramesList>` — Промис, который разрешается в массив отформатированных данных фреймов.
+
+```typescript
+const frames = await FigmaTopLevelFrames.getListData()
+```
+
+### `send`
+
+Настраивает прослушиватель запросов фреймов с помощью мессенджера плагина. При получении сообщения `UI_FIGMA_FRAMES_POST_NAME` из UI, он автоматически получает актуальные данные и отправляет их обратно.
+
+**Возвращает:** `void`
+
+```typescript
+FigmaTopLevelFrames.send()
+```
+
+## Типы
+
+### `UiFigmaFramesList`
+
+Массив объектов, представляющих обработанные данные фреймов для UI.
+- `id: string` — уникальный ID узла Figma.
+- `name: string` — отображаемое имя фрейма.
+- `image: Uint8Array | string` — экспортированные данные JPG.
+- `item: FigmaItem` — экземпляр обертки `FigmaItem` для дальнейших операций.

package/src/media/functional/figma-code/classes/FigmaTopLevelFrames/FigmaTopLevelFrames.vi.mdx

@@ -0,0 +1,45 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/figma-code/Classes/FigmaTopLevelFrames - Quản lý frame cấp cao nhất'/>
+
+# Lớp FigmaTopLevelFrames
+
+Một lớp tiện ích tĩnh (static utility class) dùng để quản lý, lưu trữ bộ nhớ đệm (cache) và truyền tải danh sách các frame cấp cao nhất trong môi trường plugin Figma. Nó đóng vai trò là cầu nối giữa cấu trúc tài liệu Figma và giao diện người dùng (UI) của plugin thông qua một messenger chuyên dụng.
+
+## Các tính năng chính
+
+- **Tự động lưu bộ nhớ đệm** — Quản lý hiệu quả bộ nhớ đệm của dữ liệu frame đã được định dạng theo mô hình singleton.
+- **Tích hợp Messenger** — Đơn giản hóa việc giao tiếp hai chiều giữa plugin và giao diện người dùng về danh sách các frame.
+- **Xử lý các Node** — Sử dụng `FigmaFrame` để trích xuất và định dạng các thuộc tính cốt lõi của node (ID, tên, xuất JPG) để hiển thị trên UI.
+
+## Các phương thức tĩnh (Static Methods)
+
+### `getListData`
+
+Lấy và lưu vào bộ nhớ đệm danh sách các frame cấp cao nhất đã được định dạng. Nó xử lý từng frame chính từ trang hiện tại, trích xuất ID, tên và xuất nó sang định dạng JPG.
+
+**Trả về:** `Promise<UiFigmaFramesList>` — Một promise sẽ trả về mảng dữ liệu frame đã được định dạng.
+
+```typescript
+const frames = await FigmaTopLevelFrames.getListData()
+```
+
+### `send`
+
+Thiết lập một listener cho các yêu cầu frame bằng cách sử dụng messenger của plugin. Khi nhận được thông báo `UI_FIGMA_FRAMES_POST_NAME` từ giao diện người dùng (UI), nó sẽ tự động lấy dữ liệu mới nhất và gửi ngược lại cho UI.
+
+**Trả về:** `void`
+
+```typescript
+FigmaTopLevelFrames.send()
+```
+
+## Các kiểu dữ liệu (Types)
+
+### `UiFigmaFramesList`
+
+Một mảng các đối tượng đại diện cho dữ liệu frame đã được xử lý cho UI.
+- `id: string` — ID duy nhất của node Figma.
+- `name: string` — Tên hiển thị của frame.
+- `image: Uint8Array | string` — Dữ liệu JPG đã được xuất.
+- `item: FigmaItem` — Instance của `FigmaItem` để thực hiện các thao tác tiếp theo.

package/src/media/functional/figma-code/composables/useFigmaStorage/useFigmaStorage.en.mdx

@@ -0,0 +1,30 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/figma-code/Composables/useFigmaStorage - Storage management'/>
+
+# `useFigmaStorage`
+
+Composable for managing data in Figma's `PluginData`. It uses a singleton pattern to ensure that multiple calls with the same key and node return the same `FigmaStorage` instance.
+
+**Parameters:**
+- `name: string` — the unique key name for the storage item.
+- `item?: PluginDataMixin` — (Optional) the Figma node where the data is stored. Defaults to `figma.root`.
+- `cache?: number` — (Optional) cache time in seconds (TTL).
+
+**Returns:**
+- `FigmaStorage<T>` — an instance of the `FigmaStorage` class for data management.
+
+## Usage Example
+
+```typescript
+import { useFigmaStorage } from '@dxtmisha/figma-code'
+
+// 1. Initialize storage for plugin settings
+const settings = useFigmaStorage('settings')
+
+// 2. Retrieve data with a default value
+const theme = settings.get('dark')
+
+// 3. Update data
+settings.set('light')
+```

package/src/media/functional/figma-code/composables/useFigmaStorage/useFigmaStorage.ru.mdx

@@ -0,0 +1,30 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/figma-code/Composables/useFigmaStorage - Управление хранилищем'/>
+
+# `useFigmaStorage`
+
+Composable для управления данными в `PluginData` Figma. Использует паттерн singleton, гарантируя, что несколько вызовов с одинаковым ключом и узлом вернут один и тот же экземпляр `FigmaStorage`.
+
+**Параметры:**
+- `name: string` — уникальное имя ключа для элемента хранилища.
+- `item?: PluginDataMixin` — (Опционально) узел Figma, в котором хранятся данные. По умолчанию — `figma.root`.
+- `cache?: number` — (Опционально) время кэширования в секундах (TTL).
+
+**Возвращает:**
+- `FigmaStorage<T>` — экземпляр класса `FigmaStorage` для управления данными.
+
+## Пример использования
+
+```typescript
+import { useFigmaStorage } from '@dxtmisha/figma-code'
+
+// 1. Инициализация хранилища для настроек плагина
+const settings = useFigmaStorage('settings')
+
+// 2. Получение данных со значением по умолчанию
+const theme = settings.get('dark')
+
+// 3. Обновление данных
+settings.set('light')
+```

package/src/media/functional/figma-code/composables/useFigmaStorage/useFigmaStorage.vi.mdx

@@ -0,0 +1,30 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/figma-code/Composables/useFigmaStorage - Quản lý lưu trữ'/>
+
+# `useFigmaStorage`
+
+Composable để quản lý dữ liệu trong `PluginData` của Figma. Nó sử dụng mô hình singleton để đảm bảo rằng nhiều lần gọi với cùng một khóa và node sẽ trả về cùng một thực thể `FigmaStorage`.
+
+**Tham số:**
+- `name: string` — tên khóa duy nhất cho mục lưu trữ.
+- `item?: PluginDataMixin` — (Tùy chọn) node Figma nơi dữ liệu được lưu trữ. Mặc định là `figma.root`.
+- `cache?: number` — (Tùy chọn) thời gian lưu bộ nhớ đệm tính bằng giây (TTL).
+
+**Trả về:**
+- `FigmaStorage<T>` — một thực thể của lớp `FigmaStorage` để quản lý dữ liệu.
+
+## Ví dụ sử dụng
+
+```typescript
+import { useFigmaStorage } from '@dxtmisha/figma-code'
+
+// 1. Khởi tạo lưu trữ cho cài đặt plugin
+const settings = useFigmaStorage('settings')
+
+// 2. Truy xuất dữ liệu với giá trị mặc định
+const theme = settings.get('dark')
+
+// 3. Cập nhật dữ liệu
+settings.set('light')
+```

package/src/media/functional/figma-ref/composables/useFigmaUiFrames/useFigmaUiFrames.en.mdx

@@ -0,0 +1,26 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/figma-ref/Composables/useFigmaUiFrames - List of top-level frames'/>
+
+# `useFigmaUiFrames`
+
+Composable for managing and observing the list of top-level frames in the Figma UI.
+
+**Returns:**
+An object with the following properties:
+- `frames: ComputedRef<UiFigmaFramesList>` — A reactive list of top-level frames. Automatically updates when data is received.
+- `loading: ComputedRef<boolean>` — A reactive flag indicating whether the frames are currently being fetched from the Figma plugin.
+
+```typescript
+import { useFigmaUiFrames } from '@dxtmisha/figma-ref'
+
+const { frames, loading } = useFigmaUiFrames()
+
+// Use loading to show a progress indicator
+if (loading.value) {
+  console.log('Fetching frames...')
+}
+
+// Use frames to render the list
+console.log('Frames:', frames.value)
+```

package/src/media/functional/figma-ref/composables/useFigmaUiFrames/useFigmaUiFrames.ru.mdx

@@ -0,0 +1,26 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/figma-ref/Composables/useFigmaUiFrames - Список фреймов верхнего уровня'/>
+
+# `useFigmaUiFrames`
+
+Композабл для управления и наблюдения за списком фреймов верхнего уровня в UI Figma.
+
+**Возвращает:**
+Объект со следующими свойствами:
+- `frames: ComputedRef<UiFigmaFramesList>` — Реактивный список фреймов верхнего уровня. Автоматически обновляется при получении данных.
+- `loading: ComputedRef<boolean>` — Реактивный флаг, указывающий, загружаются ли в данный момент фреймы из плагина Figma.
+
+```typescript
+import { useFigmaUiFrames } from '@dxtmisha/figma-ref'
+
+const { frames, loading } = useFigmaUiFrames()
+
+// Используйте loading для отображения индикатора прогресса
+if (loading.value) {
+  console.log('Загрузка фреймов...')
+}
+
+// Используйте frames для рендеринга списка
+console.log('Фреймы:', frames.value)
+```

package/src/media/functional/figma-ref/composables/useFigmaUiFrames/useFigmaUiFrames.vi.mdx

@@ -0,0 +1,26 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/figma-ref/Composables/useFigmaUiFrames - Danh sách các frame cấp cao nhất'/>
+
+# `useFigmaUiFrames`
+
+Composable để quản lý và theo dõi danh sách các frame cấp cao nhất trong Figma UI.
+
+**Giá trị trả về:**
+Một đối tượng với các thuộc tính sau:
+- `frames: ComputedRef<UiFigmaFramesList>` — Một danh sách reactivity chứa các frame cấp cao nhất. Tự động cập nhật khi nhận được dữ liệu.
+- `loading: ComputedRef<boolean>` — Một biến reactivity cho biết các frame có đang được lấy từ plugin Figma hay không.
+
+```typescript
+import { useFigmaUiFrames } from '@dxtmisha/figma-ref'
+
+const { frames, loading } = useFigmaUiFrames()
+
+// Sử dụng loading để hiển thị chỉ báo tiến trình
+if (loading.value) {
+  console.log('Đang lấy danh sách frame...')
+}
+
+// Sử dụng frames để hiển thị danh sách
+console.log('Danh sách frame:', frames.value)
+```

package/src/media/functional/figma-ref/composables/useFigmaUiSelected/useFigmaUiSelected.en.mdx

@@ -0,0 +1,32 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/figma-ref/Composables/useFigmaUiSelected - Selected frames'/>
+
+# `useFigmaUiSelected`
+
+Composable for managing and observing the list of selected frames in the Figma UI.
+
+**Returns:**
+An object with the following properties:
+- `selected: ComputedRef<string[]>` — A reactive list of selected frame IDs. Automatically updates when selection changes in Figma.
+- `loading: ComputedRef<boolean>` — A reactive flag indicating whether the selection data is currently being fetched from the Figma plugin.
+- `isSelected(id: string): ComputedRef<boolean>` — A function that returns a reactive boolean indicating if a specific frame ID is currently selected.
+- `toggleSelected(id: string, selected: boolean): void` — A function to update the selection state of a frame in Figma.
+
+```typescript
+import { useFigmaUiSelected } from '@dxtmisha/figma-ref'
+
+const { selected, loading, isSelected, toggleSelected } = useFigmaUiSelected()
+
+// Check if a specific frame is selected
+const frameId = '123:456'
+const isFrameSelected = isSelected(frameId)
+
+// Toggle selection
+const handleToggle = () => {
+  toggleSelected(frameId, !isFrameSelected.value)
+}
+
+// Watch for selection changes
+console.log('Currently selected IDs:', selected.value)
+```

package/src/media/functional/figma-ref/composables/useFigmaUiSelected/useFigmaUiSelected.ru.mdx

@@ -0,0 +1,32 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/figma-ref/Composables/useFigmaUiSelected - Выбранные фреймы'/>
+
+# `useFigmaUiSelected`
+
+Композабл для управления и наблюдения за списком выбранных фреймов в интерфейсе Figma.
+
+**Возвращает:**
+Объект со следующими свойствами:
+- `selected: ComputedRef<string[]>` — Реактивный список ID выбранных фреймов. Автоматически обновляется при изменении выбора в Figma.
+- `loading: ComputedRef<boolean>` — Реактивный флаг, указывающий, загружаются ли в данный момент данные о выборе из плагина Figma.
+- `isSelected(id: string): ComputedRef<boolean>` — Функция, возвращающая реактивное логическое значение, указывающее, выбран ли в данный момент конкретный ID фрейма.
+- `toggleSelected(id: string, selected: boolean): void` — Функция для обновления состояния выбора фрейма в Figma.
+
+```typescript
+import { useFigmaUiSelected } from '@dxtmisha/figma-ref'
+
+const { selected, loading, isSelected, toggleSelected } = useFigmaUiSelected()
+
+// Проверка, выбран ли конкретный фрейм
+const frameId = '123:456'
+const isFrameSelected = isSelected(frameId)
+
+// Переключение выбора
+const handleToggle = () => {
+  toggleSelected(frameId, !isFrameSelected.value)
+}
+
+// Наблюдение за изменениями выбора
+console.log('Текущие ID выбранных фреймов:', selected.value)
+```

package/src/media/functional/figma-ref/composables/useFigmaUiSelected/useFigmaUiSelected.vi.mdx

@@ -0,0 +1,32 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/figma-ref/Composables/useFigmaUiSelected - Các frame được chọn'/>
+
+# `useFigmaUiSelected`
+
+Composable để quản lý và theo dõi danh sách các frame được chọn trong Figma UI.
+
+**Giá trị trả về:**
+Một đối tượng với các thuộc tính sau:
+- `selected: ComputedRef<string[]>` — Một danh sách reactivity chứa các ID của frame được chọn. Tự động cập nhật khi lựa chọn thay đổi trong Figma.
+- `loading: ComputedRef<boolean>` — Một biến reactivity cho biết dữ liệu lựa chọn có đang được lấy từ plugin Figma hay không.
+- `isSelected(id: string): ComputedRef<boolean>` — Một hàm trả về giá trị boolean reactivity cho biết một ID frame cụ thể có đang được chọn hay không.
+- `toggleSelected(id: string, selected: boolean): void` — Một hàm để cập nhật trạng thái chọn của một frame trong Figma.
+
+```typescript
+import { useFigmaUiSelected } from '@dxtmisha/figma-ref'
+
+const { selected, loading, isSelected, toggleSelected } = useFigmaUiSelected()
+
+// Kiểm tra xem một frame cụ thể có được chọn không
+const frameId = '123:456'
+const isFrameSelected = isSelected(frameId)
+
+// Chuyển đổi trạng thái chọn
+const handleToggle = () => {
+  toggleSelected(frameId, !isFrameSelected.value)
+}
+
+// Theo dõi các ID hiện đang được chọn
+console.log('Các ID hiện đang được chọn:', selected.value)
+```

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

@@ -0,0 +1,66 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional/! About library'/>
+
+# [@dxtmisha/functional](https://github.com/dxtmisha/dxt-ui/tree/main/packages/functional)
+
+`@dxtmisha/functional` is a library of utilities, base classes, and composables for complex web development in Vue 3. 
+
+Modern frontend applications require managing dozens of asynchronous processes: fetching data via APIs, synchronizing tabs, working with local storages, formatting dates, and adapting to the user's locale. Often, developers solve these tasks locally within components, leading to code duplication, "bloated" `.vue` files, and bugs related to clearing subscriptions or timers. The package operates on the foundation of [@dxtmisha/functional-basic](https://github.com/dxtmisha/dxt-ui/tree/main/packages/functional), providing reactive wrappers and architectural solutions specifically created to address these issues within the Vue ecosystem (Composition API).
+
+## Installation
+
+```bash
+npm i @dxtmisha/functional
+```
+
+## Why is this library needed?
+
+The main idea of the package is to extract standard business logic and side effects outside of components, making this process strictly typed and reactive by default.
+
+You no longer need to manually synchronize HTTP requests with the local state of the screen, write wrappers for reactive data caching, or invent solutions for working with LocalStorage inside components. The library provides ready-made reactive abstractions that take this work upon themselves. You simply call the necessary composable or class, and under the hood, the library manages reactive references (`ref`), monitors the Vue lifecycle, cleans up garbage collectors upon component unmounting, and maintains strict TypeScript typing.
+
+## Features and Development Approach
+
+**Full integration with Composition API**
+Every utility in the library is designed with Vue 3's reactivity system in mind. Data from storages, API responses, or system locales are always returned as reactive objects. If the configuration changes, all dependent components are updated automatically.
+
+**Architectural Separation of Concerns**
+The package ideologically encourages developers to write "thin" components. All validation logic, complex state management (`loading`, `error`, `success`), data preparation, and caching are extracted into specialized classes and composables. The `.vue` file is left with only declarative variable bindings to the template.
+
+**Type Safety**
+Thanks to powerful TypeScript interfaces, the package ensures 100% type coverage between APIs, storages, and the UI. Generics and smart type inference protect against typos and refactoring errors. The IDE always knows what fields a request returned and what methods can be called on a class.
+
+**Predictable Resource Management**
+The library takes care of safely managing subscriptions and freeing memory. If a component that initiated an API request or listened to a global event is unmounted, its associated tasks and watchers will be correctly terminated, preventing memory leaks in the application.
+
+## What can it do?
+
+The library covers all key needs when developing a complex frontend:
+
+**Network requests (API)** 
+A set of composables (`useApiGet`, `useApiPost`, `useApiPut`, `useApiDelete`, `useApiRequest`) encapsulating the logic of server interaction. Upon being called, they return an object with built-in fields: the current loading state (`loading`), recorded errors, and the received data (`item`, `list`). Out of the box, they can cache responses, automatically cancel outdated previous requests (especially important for live search), and are easily configured via headers.
+
+**State storages** 
+Reactive hooks like `useStorageRef`, `useSessionRef`, `useCookieRef`, and `useHashRef`. They allow directly binding a reactive variable to LocalStorage, SessionStorage, URL hash, or a cookie file. You simply work with this variable like a normal `ref` in the code, and the library synchronizes it with the browser's persistent storage, instantly propagating changes even to other open user tabs.
+
+**Internationalization and formatting** 
+Tools like `useTranslateRef`, `useGeoIntlRef`, `DatetimeRef`, and `GeoFlagRef` are functions that respond on the fly to changes in environment parameters (changing language, selecting a different currency, or region). They automatically rebuild date formats, adapt currencies, and translate texts. Component updates happen independently, without writing additional event listeners.
+
+**UI Component Engineering**
+The base class system: `DesignAbstract`, `DesignComp`, `DesignChanged`, `DesignAsyncAbstract`. It allows developers to encapsulate the internal logic of non-standard UI elements (custom selectors, complex forms, modal windows with states) into independent classes. This makes business logic detachable from the markup, easy to test, and allows functionality to be reused in other projects.
+
+**Auxiliary utilities**
+The package includes many focused reactive solutions:
+- `useMeta` for reactive manipulation of SEO tags depending on the page state;
+- `useBroadcastValueRef` for establishing a real-time data exchange channel between browser windows;
+- `useLoadingRef` for centralized control over loading indicators;
+- Functions `computedAsync` and `toComputed` for elegantly executing asynchronous operations within Vue 3.
+
+## Who is this for?
+
+The package is intended for developers building multipage business applications, complex control panels (dashboards), or their own UI frameworks using Vue 3 technologies. It radically reduces the amount of boilerplate code, offering instead proven and safe development patterns.
+
+## Git
+
+[https://github.com/dxtmisha/dxt-ui/tree/main/packages/functional](https://github.com/dxtmisha/dxt-ui/tree/main/packages/functional)

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

@@ -0,0 +1,66 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional/! О библиотеке'/>
+
+# [@dxtmisha/functional](https://github.com/dxtmisha/dxt-ui/tree/main/packages/functional)
+
+`@dxtmisha/functional` — это библиотека утилит, базовых классов и composables для сложной веб-разработки на Vue 3. 
+
+Современные фронтенд-приложения требуют управления десятками асинхронных процессов: получением данных по API, синхронизацией вкладок, работой с локальными хранилищами, форматированием дат и адаптацией под локаль пользователя. Часто разработчики решают эти задачи локально внутри компонентов, что приводит к дублированию кода, "разбуханию" файлов `.vue` и ошибкам при очистке подписок или таймеров. Пакет работает на базе [@dxtmisha/functional-basic](https://github.com/dxtmisha/dxt-ui/tree/main/packages/functional) и предоставляет реактивные обертки и архитектурные решения, специально созданные для решения этих проблем в экосистеме Vue (Composition API).
+
+## Установка
+
+```bash
+npm i @dxtmisha/functional
+```
+
+## Зачем нужна эта библиотека?
+
+Основная идея пакета — вынести типовую бизнес-логику и работу с побочными эффектами за пределы компонентов, сделав этот процесс строго типизированным и реактивным по умолчанию.
+
+Вам больше не нужно вручную синхронизировать HTTP-запросы с локальным состоянием экрана, писать обертки для реактивного кеширования данных или изобретать решения для работы с LocalStorage внутри компонентов. Библиотека предоставляет готовые реактивные абстракции, которые берут эту работу на себя. Вы просто вызываете нужный composable или класс, а под капотом библиотека сама управляет реактивными ссылками (`ref`), следит за жизненным циклом Vue, очищает сборщики мусора при размонтировании компонента и сохраняет строгую типизацию TypeScript. 
+
+## Особенности и подход к разработке
+
+**Полная интеграция с Composition API**
+Каждая утилита в библиотеке спроектирована с учетом работы реактивности Vue 3. Данные из хранилищ, ответы от API или системная локаль всегда возвращаются в виде реактивных объектов. Если конфигурация меняется, все зависящие от нее компоненты обновляются автоматически.
+
+**Архитектурное разделение (Separation of Concerns)**
+Пакет идеологически подталкивает разработчика писать "тонкие" компоненты. Вся логика валидации, управления сложными состояниями (`loading`, `error`, `success`), подготовки данных и кеширования вынесена в специализированные классы и composables. В `.vue` файле остается только декларативная привязка переменных к шаблону.
+
+**Безопасность типов**
+Благодаря мощным TypeScript-интерфейсам, пакет обеспечивает 100% покрытие типов между API, хранилищами и UI. Дженерики и умное выведение типов защищают от опечаток и ошибок рефакторинга. IDE всегда знает, какие поля вернул запрос и какие методы можно вызвать у класса.
+
+**Предсказуемое управление ресурсами**
+Библиотека берет на себя безопасное управление подписками и освобождение памяти. Если компонент, вызвавший запрос к API или слушающий глобальное событие, был уничтожен (unmounted), связанные с ним задачи и watcher-ы будут корректно завершены, предотвращая утечки памяти в приложении.
+
+## Что она умеет?
+
+Библиотека закрывает все ключевые потребности при разработке сложного фронтенда:
+
+**Сетевые запросы (API)** 
+Набор composables (`useApiGet`, `useApiPost`, `useApiPut`, `useApiDelete`, `useApiRequest`), инкапсулирующих логику работы с сервером. При вызове они возвращают объект со встроенными полями: текущим состоянием загрузки (`loading`), зафиксированными ошибками и полученными данными (`item`, `list`). Они из коробки умеют кешировать ответы, автоматически отменять устаревшие предыдущие запросы (особенно важно для живого поиска) и легко настраиваются через заголовки.
+
+**Хранилища состояния** 
+Реактивные хуки `useStorageRef`, `useSessionRef`, `useCookieRef` и `useHashRef`. Позволяют напрямую привязать реактивную переменную к LocalStorage, SessionStorage, URL-хешу или cookie-файлу. Вы просто работаете с этой переменной как с обычным `ref` в коде, а библиотека сама синхронизирует ее с постоянным хранилищем браузера, моментально распространяя изменения даже на другие открытые вкладки пользователя.
+
+**Интернационализация и форматирование** 
+Инструменты `useTranslateRef`, `useGeoIntlRef`, `DatetimeRef` и `GeoFlagRef` — это функции, которые на лету реагируют на изменение параметров среды (смена языка, выбор другой валюты или региона). Они автоматически перестраивают форматы дат, адаптируют валюты и переводят тексты. Обновление компонентов происходит самостоятельно, без написания дополнительных слушателей событий.
+
+**Инженерия UI-компонентов**
+Система базовых классов `DesignAbstract`, `DesignComp`, `DesignChanged`, `DesignAsyncAbstract`. Позволяет разработчикам инкапсулировать внутреннюю логику нестандартных UI-элементов (кастомные селекторы, сложные формы, модальные окна со стейтами) в независимые классы. Это делает бизнес-логику отделяемой от верстки, легкой для тестирования и позволяет переиспользовать функционал в других проектах.
+
+**Вспомогательные утилиты**
+Пакет включает множество точечных реактивных решений:
+- `useMeta` для реактивного манипулирования SEO-тегами в зависимости от состояния страницы;
+- `useBroadcastValueRef` для установки канала обмена данными между окнами браузера в реальном времени;
+- `useLoadingRef` для централизованного контроля за индикаторами загрузки;
+- Функции `computedAsync` и `toComputed` для элегантного выполнения асинхронных операций внутри Vue 3.
+
+## Для кого это?
+
+Пакет предназначен для разработчиков, строящих многостраничные бизнес-приложения, сложные панели управления (dashboards) или собственные UI-фреймворки на технологиях Vue 3. Он радикально сокращает количество шаблонного (boilerplate) кода, предлагая взамен проверенные и безопасные паттерны разработки.
+
+## Git
+
+[https://github.com/dxtmisha/dxt-ui/tree/main/packages/functional](https://github.com/dxtmisha/dxt-ui/tree/main/packages/functional)