@dxtmisha/wiki 0.39.1 → 0.39.3

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)

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

@@ -0,0 +1,66 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional/! Về thư viện'/>
+
+# [@dxtmisha/functional](https://github.com/dxtmisha/dxt-ui/tree/main/packages/functional)
+
+`@dxtmisha/functional` là một thư viện chứa các tiện ích, lớp cơ sở (base class) và composable dùng cho việc phát triển web phức tạp trên Vue 3.
+
+Các ứng dụng frontend hiện đại đòi hỏi phải quản lý hàng tá tiến trình bất đồng bộ: lấy dữ liệu thông qua API, đồng bộ hóa các tab, làm việc với bộ nhớ cục bộ, định dạng ngày tháng và thích ứng với ngôn ngữ của người dùng. Thông thường, lập trình viên giải quyết những vấn đề này theo cách cục bộ bên trong các component, dẫn đến việc lặp lại code, các tệp `.vue` trở nên "cồng kềnh", và xảy ra lỗi liên quan đến việc không dọn dẹp các sự kiện hay bộ đếm thời gian. Gói này hoạt động dựa trên cơ sở của [@dxtmisha/functional-basic](https://github.com/dxtmisha/dxt-ui/tree/main/packages/functional), cung cấp các lớp bọc phản ứng và các giải pháp kiến trúc được tạo ra đặc biệt để giải quyết những vấn đề này trong hệ sinh thái Vue (Composition API).
+
+## Cài đặt
+
+```bash
+npm i @dxtmisha/functional
+```
+
+## Tại sao cần thư viện này?
+
+Ý tưởng chính của gói là tách biệt logic nghiệp vụ thông thường và logic phụ (side effect) ra khỏi các component, làm cho quá trình này được định kiểu nghiêm ngặt và mặc định mang tính phản ứng (reactive).
+
+Bạn không còn cần phải tự đồng bộ hóa các yêu cầu HTTP với trạng thái cục bộ của giao diện, viết wrapper để lưu cache dữ liệu phản ứng hay phát minh ra cách làm việc với LocalStorage bên trong component nữa. Thư viện cung cấp sẵn các cấu trúc phản ứng để tự động đảm nhận công việc này. Bạn chỉ cần gọi composable hoặc class cần thiết, và ở phần lõi bên dưới, thư viện sẽ tự động quản lý các tham chiếu phản ứng (`ref`), theo dõi vòng đời của Vue, dọp dẹp bộ nhớ (garbage collector) khi component bị unmount, và duy trì hệ thống định kiểu TypeScript nghiêm ngặt.
+
+## Các đặc điểm nổi bật và Phương pháp phát triển
+
+**Tích hợp hoàn toàn với Composition API**
+Mỗi tiện ích trong thư viện đều được thiết kế xoay quanh hệ thống phản ứng của Vue 3. Dữ liệu từ kho lưu trữ trữ, phản hồi API, hay ngôn ngữ của hệ thống luôn được trả về dưới dạng các đối tượng phản ứng (reactive objects). Nếu cấu hình thay đổi, tất cả các component phụ thuộc vào dữ liệu đó đều sẽ tự động cập nhật.
+
+**Phân tách cấu trúc rõ ràng (Separation of Concerns)**
+Về tư tưởng kiến trúc, gói này khuyến khích nhà phát triển viết các component "mỏng". Toàn bộ logic validate form, quản lý nhiều trạng thái phức tạp (`loading`, `error`, `success`), chuẩn bị dữ liệu gọi API và lưu trữ cache đều được gom vào trong những class hay composable chuyên dụng. File `.vue` chỉ còn giữ lại việc khai báo liên kết cho các biến đối với giao diện (template).
+
+**An toàn kiểu dữ liệu (Type Safety)**
+Nhờ hệ thống giao diện Interface của TypeScript rất tối ưu, bộ code này bảo vệ tỷ lệ an toàn kiểu đạt 100% giữa kho dữ liệu API, bộ nhớ, và phía màn hình UI. Thuộc tính suy luận kiểu tự động (Type inference) cùng các Generic chống lại tình trạng sai chính tả hoặc trục trặc phát sinh khi sửa cấu trúc (Refactoring). IDE luôn nhận diện được dữ liệu nhận lại những trường (fields) gì từ API và gọi ra những method (hàm phương thức) nào trực thuộc Class.
+
+**Quản lý tài nguyên dễ dự đoán**
+Đảm bảo quản lý bảo mật thông tin và giải phóng tối ưu vùng lưu trữ RAM cho bộ nhớ. Nếu ứng dụng (component) có sinh lệnh báo với server hoặc liên tục tiếp nhận thông tin cập nhật (listener) mà bị hủy đi, mọi process và tiến trình chạy kèm sẽ được xử lý chấm dứt đúng quy chuẩn, bảo vệ cho ứng dụng của bạn không rò rỉ và tràn tốn Memory.
+
+## Thư viện có thể làm gì?
+
+Thư viện đáp ứng đầy đủ tất cả nhu cầu thiết yếu nhất khi bạn muốn phát triển một ứng dụng mạng lưới frontend mức độ đa nhiệm lớn:
+
+**Gọi mạng từ xa (Requests API)**
+Bao trọn nhóm composable đặc tả quy cách gọi server (`useApiGet`, `useApiPost`, `useApiPut`, `useApiDelete`, `useApiRequest`). Khi mới gọi, chúng đã trả về đầy đủ đối tượng mang thông số có sẵn, chứa đựng trạng thái theo dõi tiến trình (`loading`), cập nhật lưu lỗi lại, và các dữ liệu hoàn thành (`item`, `list`). Hệ thống "có sẵn" còn đem khả năng lưu giữ, huỷ nhanh (cancel) truy vết cũ dư thừa đi không gửi nhầm kết quả (tính chất siêu cần cho Live search lập lại truy vấn), tuỳ chọn cấu hình cực kì gọn nhẹ trong Header.
+
+**Bộ duy trì tình trạng (State storages)**
+Bao trọn các hook (`useStorageRef`, `useSessionRef`, `useCookieRef`, `useHashRef`). Chúng làm công cụ kết dính mọi biến khai báo Vue lên vùng bộ nhớ ảo có sẵn trên trình duyệt LocalStorage, SessionStorage, dấu `#` URL hash, hay trên tệp Cookie theo tiêu chuẩn. Chúng cho bạn thỏa thích xử lý biến như một tham trị `ref` tại gốc, rồi trình gói hỗ trợ (library) thực thi những việc gắn kết (sync) thông tin cho trình duyệt Browser lưu lâu dài, tức tốc phổ truyền tín hiệu tới cả màn hình hiển thị trong từng Tab (cửa sổ web) được người dùng song hành để duy trì sử dụng.
+
+**Chuẩn Hóa Đa Ngôn Ngữ (Internationalization) & Format**
+Dành bao trọn bộ nhóm xử lý cực chuẩn chỉnh (`useTranslateRef`, `useGeoIntlRef`, `DatetimeRef` hay `GeoFlagRef`), thực thi phản xạ nhận diện các hiệu ứng tại từng tham số (Thay mã nguồn Tiếng, lựa ngoại tệ hay thay Vùng Quốc gia). Những tính chất cập nhật Format tự làm tự tái hiện (Tiếng nói dịch chuyển ngay, đổi thay biểu định Giá, lịch chuyển đổi tháng ngày). Phần việc tái lắp component thực hiện độc lập, nhà tạo tác (dev) không gõ tạo liên lạc các listener phiền toái kia nữa. 
+
+**Nâng Tầm Kiểu Mẫu Giao Diện (Engineering UI - Components)**
+Sở hữu phân cấp Class cốt lõi tiêu chuẩn gồm: `DesignAbstract`, `DesignComp`, `DesignChanged`, `DesignAsyncAbstract`. Sự bao quanh vững chắc đã che phủ kín (encapsulate) mọi phần logic hoạt động chuyên biệt xử lý ở cấp chuyên sâu không rập khuôn (Custom selectors, Form hỗn hợp, Các sổ Modal pop up biến chuyển states liên tục), rồi xếp chia chúng tự chủ hoàn toán về các Classes. Nắn tạo việc tính toán các hàm vụ (business logic) sẽ dễ dàng ngắt gắn tại các trang markup tĩnh (HTML), thực hiện kiểm thử an hòa thuận lợi (Testable code), cùng mục đích mang những cấu trúc trên đem trao vào tái triển khai ở phần mềm khác (Re-usable func).
+
+**Công Cụ Hỗ Trợ Đầy Sức Phản Ứng Khác**
+Gom chứa tính năng giải toả xử lí các góc ứng suất phụ phản ứng:
+- Kẻ thiết định SEO bằng code (`useMeta`), nắn bóp nội hàm tags trên tính trạng màn hình;
+- Điệp truyền dữ liệu giữa các web window theo cấp thời lượng Live Real-Time (`useBroadcastValueRef`);
+- Phân luồng tín hiệu trạng thái điều tiết đường chuyền Loading (`useLoadingRef`);
+- Gọi sự chạy chức năng song hành mà nhẹ tựa bay ngay trên cỗ máy xử lí tạo mã Vue bằng `computedAsync` và `toComputed`.
+
+## Dành cho ai?
+
+Bộ tài nguyên chuyên tâm phục vụ toàn thể đội thi công Frontend Developers đang nặn chế những bộ mã nguồn công nghiệp kinh doanh siêu cỡ lớn, khối bảng mạch Dashboard bao phủ chằng chịt, hoặc đội tự nặn cho mình một khuôn Framework UI từ lõi công nghệ hệ Vue 3. Khử đi triệt để thói gõ tạo Boilerplate lặp liên hồi tốn không gian, tạo những khung sườn đã kinh qua ứng kiểm định hoàn hảo nhất của Patterns (kiểu hình tái thiết hệ sinh thái Dev) bảo toàn chất lương trong tạo dựng an toàn.
+
+## 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/api/api.en.mdx

@@ -0,0 +1,74 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional/# API Hooks'/>
+
+# API Hooks
+
+A set of tools for efficient backend interaction, fully integrated with **Vue 3 (Composition API)**.
+
+## Features
+
+The main task of these tools is to automate routine operations: tracking loading states (`loading`), handling errors, and synchronizing data across different parts of the interface. All hooks support reactive parameters, allowing for the creation of dynamic requests that automatically update when input filters or paths change.
+
+## Available Tools
+
+- `useApiRef` — Reactive data retrieval (GET) with automatic execution and storage in a `ref`.
+- `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.
+
+## How to Work with Them
+
+For simple data display, using `useApiRef` is sufficient. You don't need to manually call a load function — the request is executed automatically as soon as you access the `data` property. If the API path is a reactive ref, the hook will track its changes and load new data by itself.
+
+```typescript
+import { useApiRef } from '@dxtmisha/functional'
+
+// Data will load automatically when accessing 'data'
+const { data, loading } = useApiRef('api/profile')
+```
+
+If you need to perform an action on an event (e.g., saving a form), mutation hooks are used. They return a `send` method that can be called in an event handler, and a `loading` flag to disable buttons.
+
+```typescript
+import { useApiPost } from '@dxtmisha/functional'
+
+const { send, loading } = useApiPost('api/save')
+
+const onSave = async () => {
+  await send({ data: { name: 'Dxt' } })
+}
+```
+
+## useApiManagementRef
+
+The most powerful approach is using `useApiManagementRef`. It acts as a full hub for managing data in complex interfaces (like tables). It links the GET request with mutations: as soon as you successfully execute `sendDelete` or `sendPost`, the orchestrator automatically calls `reset()` for the main list, and the data on the screen updates automatically.
+
+### Key Capabilities:
+- **Automation**: Full synchronization between data reading and modification.
+- **Integration**: Includes search (`useSearchRef`) and formatting (`useFormattersRef`) functionality.
+- **Skeleton**: Support for placeholders during loading to prevent layout shifts.
+- **Flexibility**: Configuration of individual paths and transformations for each request type (GET, POST, PUT, DELETE).
+
+```typescript
+import { ref } from 'vue'
+import { useApiManagementRef } from '@dxtmisha/functional'
+
+const search = ref('')
+const { 
+  list, 
+  sendPost, 
+  sendDelete 
+} = useApiManagementRef(
+  { path: 'api/items' },      // Listen to GET
+  undefined,                  // Formatters
+  { columns: ['name'], value: search }, // Live search
+  { path: 'api/items/add' },  // POST setup
+  undefined,
+  { path: 'api/items/delete' } // DELETE setup
+)
+
+// After calling sendDelete(), the main 'list' will update AUTOMATICALLY!
+```
+
+This architecture allows you to describe data logic declaratively, focusing on request configuration rather than manual management of loading states and list updates.