@dxtmisha/wiki 0.57.3 → 0.57.4

package/src/media/functional/ui-figma/frames/frames.vi.mdx

@@ -0,0 +1,58 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/# UI Figma/# Làm việc với Frame'/>
+
+# Làm việc với Frame
+
+Thư viện cung cấp các công cụ để quản lý danh sách các frame trên trang Figma hiện tại và theo dõi các phần tử được chọn. Điều này cho phép bạn xây dựng các giao diện điều hướng phức tạp và hệ thống chọn hàng loạt bên trong plugin của mình.
+
+## Backend (Backend / plugin/code.ts)
+
+Để đồng bộ hóa dữ liệu frame tự động, các trình xử lý tương ứng phải được khởi tạo ở phía plugin.
+
+### Khởi tạo
+```typescript
+import { FigmaTopLevelFrames, FigmaFramesSelected } from '@dxtmisha/figma-code'
+
+// Kích hoạt trình lắng nghe cho danh sách frame và quản lý vùng chọn
+FigmaTopLevelFrames.send()
+FigmaFramesSelected.send()
+```
+
+## Giao diện (UI / Iframe)
+
+Dữ liệu về tất cả các frame trên trang và các công cụ để quản lý danh sách vùng chọn nội bộ của plugin có sẵn trong giao diện.
+
+### Danh sách Frame của trang (Vue)
+Cho phép bạn lấy danh sách tất cả các frame và section tại thư mục gốc của trang hiện tại kèm theo ảnh chụp màn hình.
+
+```typescript
+import { useFigmaUiFrames } from '@dxtmisha/figma-ref'
+
+const { frames, loading } = useFigmaUiFrames()
+
+/* frames.value chứa danh sách các đối tượng:
+  {
+    id: string,
+    name: string,
+    image: Uint8Array | string // Ảnh chụp màn hình JPG
+  }
+*/
+```
+
+### Các phần tử được chọn trong Plugin (Vue)
+Một cơ chế để theo dõi và sửa đổi danh sách các phần tử "được chọn" trong giao diện của plugin. Trạng thái này được duy trì trên toàn cầu ở cấp độ phiên plugin.
+
+```typescript
+import { useFigmaUiSelected } from '@dxtmisha/figma-ref'
+
+const { 
+  selected,       // Danh sách ID các frame được chọn
+  isSelected,     // Hàm kiểm tra: isSelected(id)
+  toggleSelected, // Hàm chuyển đổi: toggleSelected(id, boolean)
+} = useFigmaUiSelected()
+
+// Ví dụ sử dụng:
+const active = isSelected('1:123')
+const toggle = () => toggleSelected('1:123', !active.value)
+```

package/src/media/functional/ui-figma/messenger/messenger.en.mdx

@@ -0,0 +1,67 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/# UI Figma/# Messenger System'/>
+
+# Working with Messages (Messenger)
+
+The messaging mechanism is the central link in the architecture of Figma plugins. Since the "Code Side" (Sandbox) and the "Interface Side" (UI) run in isolated environments, any interaction between them requires the use of the `postMessage` system.
+
+The library simplifies this process by providing standardized messengers and automatic routing.
+
+## Initialization and Security
+
+Figma plugins operate in an environment where multiple plugins can be active simultaneously. To prevent message conflicts and ensure that your UI only processes data from your specific plugin, the library uses the `FigmaPostCode` system.
+
+Both the **Backend** and the **Interface** must be initialized with the same unique identifier (typically the `id` from your `manifest.json`) before using the messengers.
+
+```typescript
+import { FigmaPostCode } from '@dxtmisha/figma'
+import manifest from '../manifest.json'
+
+// Must be called on both sides (Code and UI)
+FigmaPostCode.set(manifest.id)
+```
+
+## Backend (Backend / plugin/code.ts)
+
+On the code side, the `FigmaPluginMessenger` class is used to subscribe to events and send data to the UI.
+
+```typescript
+import { FigmaPostCode } from '@dxtmisha/figma'
+import { FigmaPluginMessenger } from '@dxtmisha/figma-code'
+import manifest from '../manifest.json'
+
+// 1. Initialize identification
+FigmaPostCode.set(manifest.id)
+
+// 2. Work with the messenger
+const messenger = FigmaPluginMessenger.getInstance()
+
+messenger.add('my-action', (data) => {
+  console.log('Data received:', data)
+  messenger.post('my-action', { status: 'success' })
+})
+```
+
+## Interface (UI / Iframe)
+
+In the interface, the mirror class `FigmaUiMessenger` is used for interaction with the backend.
+
+```typescript
+import { FigmaPostCode } from '@dxtmisha/figma'
+import { FigmaUiMessenger } from '@dxtmisha/figma'
+import manifest from '../manifest.json'
+
+// 1. Initialize identification (same ID as backend)
+FigmaPostCode.set(manifest.id)
+
+// 2. Work with the messenger
+const messenger = FigmaUiMessenger.getInstance()
+
+messenger.post('my-action', { payload: 'hello' })
+
+messenger.add('my-action', (result) => {
+  console.log('Result:', result)
+})
+```
+

package/src/media/functional/ui-figma/messenger/messenger.ru.mdx

@@ -0,0 +1,67 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/# UI Figma/# Система мессенджеров'/>
+
+# Работа с сообщениями (Messenger)
+
+Механизм сообщений — центральное звено архитектуры Figma-плагинов. Поскольку «сторона кода» (Sandbox) и «сторона интерфейса» (UI) работают в изолированных средах, любое взаимодействие между ними требует использования системы `postMessage`.
+
+Библиотека упрощает этот процесс, предоставляя стандартизированные мессенджеры и автоматическую маршрутизацию.
+
+## Инициализация и безопасность
+
+Плагины Figma работают в среде, где одновременно могут быть активны несколько плагинов. Чтобы предотвратить конфликты сообщений и гарантировать, что ваш UI обрабатывает данные только от вашего конкретного плагина, библиотека использует систему `FigmaPostCode`.
+
+Обе стороны (**Бэкенд** и **Интерфейс**) должны быть инициализированы одним и тем же уникальным идентификатором (обычно это `id` из вашего `manifest.json`) перед использованием мессенджеров.
+
+```typescript
+import { FigmaPostCode } from '@dxtmisha/figma'
+import manifest from '../manifest.json'
+
+// Необходимо вызвать на обеих сторонах (Code и UI)
+FigmaPostCode.set(manifest.id)
+```
+
+## Бэкенд (Backend / plugin/code.ts)
+
+На стороне кода используется класс `FigmaPluginMessenger` для подписки на события и отправки данных в UI.
+
+```typescript
+import { FigmaPostCode } from '@dxtmisha/figma'
+import { FigmaPluginMessenger } from '@dxtmisha/figma-code'
+import manifest from '../manifest.json'
+
+// 1. Инициализация идентификации
+FigmaPostCode.set(manifest.id)
+
+// 2. Работа с мессенджером
+const messenger = FigmaPluginMessenger.getInstance()
+
+messenger.add('my-action', (data) => {
+  console.log('Данные получены:', data)
+  messenger.post('my-action', { status: 'success' })
+})
+```
+
+## Интерфейс (UI / Iframe)
+
+В интерфейсе используется зеркальный класс `FigmaUiMessenger` для взаимодействия с бэкендом.
+
+```typescript
+import { FigmaPostCode } from '@dxtmisha/figma'
+import { FigmaUiMessenger } from '@dxtmisha/figma'
+import manifest from '../manifest.json'
+
+// 1. Инициализация идентификации (тот же ID, что и в бэкенде)
+FigmaPostCode.set(manifest.id)
+
+// 2. Работа с мессенджером
+const messenger = FigmaUiMessenger.getInstance()
+
+messenger.post('my-action', { payload: 'hello' })
+
+messenger.add('my-action', (result) => {
+  console.log('Результат:', result)
+})
+```
+

package/src/media/functional/ui-figma/messenger/messenger.vi.mdx

@@ -0,0 +1,67 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/# UI Figma/# Hệ thống Messenger'/>
+
+# Làm việc với tin nhắn (Messenger)
+
+Cơ chế gửi tin nhắn là mắt xích trung tâm trong kiến trúc của các plugin Figma. Vì "Phía Mã" (Sandbox) và "Phía Giao diện" (UI) chạy trong các môi trường biệt lập, nên bất kỳ tương tác nào giữa chúng đều yêu cầu sử dụng hệ thống `postMessage`.
+
+Thư viện đơn giản hóa quy trình này bằng cách cung cấp các messenger tiêu chuẩn hóa và định tuyến tự động.
+
+## Khởi tạo và Bảo mật
+
+Các plugin Figma hoạt động trong môi trường có thể có nhiều plugin cùng hoạt động. Để ngăn chặn xung đột tin nhắn và đảm bảo UI của bạn chỉ xử lý dữ liệu từ plugin cụ thể của mình, thư viện sử dụng hệ thống `FigmaPostCode`.
+
+Cả **Backend** và **Giao diện** phải được khởi tạo với cùng một mã định danh duy nhất (thường là `id` từ `manifest.json` của bạn) trước khi sử dụng messenger.
+
+```typescript
+import { FigmaPostCode } from '@dxtmisha/figma'
+import manifest from '../manifest.json'
+
+// Phải được gọi ở cả hai phía (Code và UI)
+FigmaPostCode.set(manifest.id)
+```
+
+## Backend (Backend / plugin/code.ts)
+
+Về phía mã, lớp `FigmaPluginMessenger` được sử dụng để đăng ký các sự kiện và gửi dữ liệu đến UI.
+
+```typescript
+import { FigmaPostCode } from '@dxtmisha/figma'
+import { FigmaPluginMessenger } from '@dxtmisha/figma-code'
+import manifest from '../manifest.json'
+
+// 1. Khởi tạo định danh
+FigmaPostCode.set(manifest.id)
+
+// 2. Làm việc với messenger
+const messenger = FigmaPluginMessenger.getInstance()
+
+messenger.add('my-action', (data) => {
+  console.log('Dữ liệu đã nhận:', data)
+  messenger.post('my-action', { status: 'success' })
+})
+```
+
+## Giao diện (UI / Iframe)
+
+Trong giao diện, lớp gương `FigmaUiMessenger` được sử dụng để tương tác với backend.
+
+```typescript
+import { FigmaPostCode } from '@dxtmisha/figma'
+import { FigmaUiMessenger } from '@dxtmisha/figma'
+import manifest from '../manifest.json'
+
+// 1. Khởi tạo định danh (cùng ID với backend)
+FigmaPostCode.set(manifest.id)
+
+// 2. Làm việc với messenger
+const messenger = FigmaUiMessenger.getInstance()
+
+messenger.post('my-action', { payload: 'hello' })
+
+messenger.add('my-action', (result) => {
+  console.log('Kết quả:', result)
+})
+```
+

package/src/media/functional/ui-figma/selection/selection.en.mdx

@@ -0,0 +1,65 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/# UI Figma/# Frame Selection'/>
+
+# Working with Selection
+
+The selection system provides a connection between the Figma canvas and the plugin interface. It allows the application to react to user actions in the editor and manage focus programmatically.
+
+## Backend (Backend / plugin/code.ts)
+
+On the plugin's code side, it is necessary to initialize synchronization mechanisms and, if needed, use functions for programmatic focus.
+
+#### Initialization
+Call one of the functions depending on the required level of control:
+
+- **`setupFrameSelection()`** — Recommended. Sets up bidirectional communication (tracking + programmatic selection from the UI).
+- **`makeFigmaFrameSelection()`** — Sets up only tracking of changes on the Figma canvas (Backend -> UI).
+
+```typescript
+import { setupFrameSelection } from '@dxtmisha/figma-code'
+
+// Called once during plugin startup
+setupFrameSelection()
+```
+
+#### Programmatic Management
+If you need to select an object and focus the camera on it directly from the backend code:
+
+```typescript
+import { toFrameSelection } from '@dxtmisha/figma-code'
+
+await toFrameSelection('12:34')
+```
+
+## Interface (UI / Iframe)
+
+Tools for retrieving current selection data and commanding changes from the plugin interface.
+
+#### Reactive Usage (Vue)
+The most convenient way is through the `useFigmaFrameSelection` composable.
+
+```typescript
+import { useFigmaFrameSelection } from '@dxtmisha/figma-ref'
+
+const { 
+  selection,    // List of selected frames (ComputedRef)
+  setSelection, // Method to change selection: setSelection(id)
+  loading       // Loading state
+} = useFigmaFrameSelection()
+```
+
+#### Direct Control (JavaScript)
+If you are not using Vue, you can send a command or manually subscribe to changes:
+
+```typescript
+import { sendFrameSelection, fetchFrameSelection } from '@dxtmisha/figma'
+
+// Change selection
+sendFrameSelection('12:34')
+
+// Subscribe to changes manually
+fetchFrameSelection((selection) => {
+  console.log('Current selection:', selection)
+})
+```

package/src/media/functional/ui-figma/selection/selection.ru.mdx

@@ -0,0 +1,65 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/# UI Figma/# Работа с выделением'/>
+
+# Работа с выделением
+
+Система выделения обеспечивает связь между холстом Figma и интерфейсом плагина. Она позволяет приложению реагировать на действия пользователя в редакторе и управлять фокусом программно.
+
+## Бэкенд (Backend / plugin/code.ts)
+
+На стороне кода плагина необходимо инициализировать механизмы синхронизации и, при необходимости, использовать функции для программного фокуса.
+
+#### Инициализация
+Вызовите одну из функций в зависимости от требуемого уровня контроля:
+
+- **`setupFrameSelection()`** — Рекомендуется. Настраивает двустороннюю связь (отслеживание + программное выделение из UI).
+- **`makeFigmaFrameSelection()`** — Настраивает только отслеживание изменений на холсте Figma (Backend -> UI).
+
+```typescript
+import { setupFrameSelection } from '@dxtmisha/figma-code'
+
+// Вызывается один раз при старте плагина
+setupFrameSelection()
+```
+
+#### Программное управление
+Если нужно выделить объект и сфокусировать на нем камеру прямо из кода бэкенда:
+
+```typescript
+import { toFrameSelection } from '@dxtmisha/figma-code'
+
+await toFrameSelection('12:34')
+```
+
+## Интерфейс (UI / Iframe)
+
+Инструменты для получения данных о текущем выделении и подачи команд на его изменение из интерфейса плагина.
+
+#### Реактивное использование (Vue)
+Самый удобный способ работы через композитор `useFigmaFrameSelection`.
+
+```typescript
+import { useFigmaFrameSelection } from '@dxtmisha/figma-ref'
+
+const { 
+  selection,    // Список выделенных фреймов (ComputedRef)
+  setSelection, // Метод для смены выделения: setSelection(id)
+  loading       // Состояние загрузки
+} = useFigmaFrameSelection()
+```
+
+#### Прямое управление (JavaScript)
+Если вы не используете Vue, можно отправить команду или вручную подписаться на изменения:
+
+```typescript
+import { sendFrameSelection, fetchFrameSelection } from '@dxtmisha/figma'
+
+// Сменить выделение
+sendFrameSelection('12:34')
+
+// Подписаться на изменения вручную
+fetchFrameSelection((selection) => {
+  console.log('Текущее выделение:', selection)
+})
+```

package/src/media/functional/ui-figma/selection/selection.vi.mdx

@@ -0,0 +1,65 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/# UI Figma/# Quản lý vùng chọn'/>
+
+# Quản lý vùng chọn
+
+Hệ thống vùng chọn cung cấp sự kết nối giữa canvas Figma và giao diện plugin. Nó cho phép ứng dụng phản ứng với các hành động của người dùng trong trình chỉnh sửa và quản lý tiêu điểm theo chương trình.
+
+## Backend (Backend / plugin/code.ts)
+
+Về phía mã của plugin, cần phải khởi tạo các cơ chế đồng bộ hóa và, nếu cần, sử dụng các hàm để lấy nét theo chương trình.
+
+#### Khởi tạo
+Gọi một trong các hàm tùy thuộc vào mức độ kiểm soát yêu cầu:
+
+- **`setupFrameSelection()`** — Được khuyến nghị. Thiết lập giao tiếp hai chiều (theo dõi + chọn theo chương trình từ UI).
+- **`makeFigmaFrameSelection()`** — Chỉ thiết lập theo dõi các thay đổi trên canvas Figma (Backend -> UI).
+
+```typescript
+import { setupFrameSelection } from '@dxtmisha/figma-code'
+
+// Được gọi một lần khi khởi động plugin
+setupFrameSelection()
+```
+
+#### Quản lý theo chương trình
+Nếu bạn cần chọn một đối tượng và lấy nét camera vào đối tượng đó trực tiếp từ mã backend:
+
+```typescript
+import { toFrameSelection } from '@dxtmisha/figma-code'
+
+await toFrameSelection('12:34')
+```
+
+## Giao diện (UI / Iframe)
+
+Các công cụ để lấy dữ liệu vùng chọn hiện tại và ra lệnh thay đổi từ giao diện plugin.
+
+#### Sử dụng phản hồi (Vue)
+Cách thuận tiện nhất là thông qua `useFigmaFrameSelection` composable.
+
+```typescript
+import { useFigmaFrameSelection } from '@dxtmisha/figma-ref'
+
+const { 
+  selection,    // Danh sách các frame được chọn (ComputedRef)
+  setSelection, // Phương thức thay đổi vùng chọn: setSelection(id)
+  loading       // Trạng thái tải
+} = useFigmaFrameSelection()
+```
+
+#### Điều khiển trực tiếp (JavaScript)
+Nếu bạn không sử dụng Vue, bạn có thể gửi lệnh hoặc đăng ký thay đổi thủ công:
+
+```typescript
+import { sendFrameSelection, fetchFrameSelection } from '@dxtmisha/figma'
+
+// Thay đổi vùng chọn
+sendFrameSelection('12:34')
+
+// Đăng ký thay đổi thủ công
+fetchFrameSelection((selection) => {
+  console.log('Vùng chọn hiện tại:', selection)
+})
+```

package/src/media/functional/ui-figma/storage/storage.en.mdx

@@ -0,0 +1,53 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/# UI Figma/# Data Storage'/>
+
+# Working with Storage
+
+Figma provides two main mechanisms for saving data: local user storage and shared document storage. The library offers typed wrappers for both methods, providing convenient access and synchronization.
+
+## Backend (Backend / plugin/code.ts)
+
+On the plugin code side, it is necessary to initialize message listeners to synchronize data with the interface.
+
+### Initialization
+```typescript
+import { setupStorage, setupClientStorage } from '@dxtmisha/figma-code'
+
+// Activate listeners for both storage types
+setupStorage()
+setupClientStorage()
+```
+
+### Direct Usage
+You can work with storage data directly in the backend code:
+
+```typescript
+import { FigmaStorage, FigmaClientStorage } from '@dxtmisha/figma-code'
+
+// Shared document storage
+const storage = FigmaStorage.getInstance<string>('project-theme')
+storage.set('dark')
+
+// Personal user storage
+const client = FigmaClientStorage.getInstance<boolean>('show-onboarding')
+await client.set(true)
+```
+
+## Interface (UI / Iframe)
+
+In the plugin interface, data is accessible through reactive hooks that automatically synchronize with the backend.
+
+### Reactive Usage (Vue)
+```typescript
+import { useFigmaStorage, useFigmaClientStorage } from '@dxtmisha/figma-ref'
+
+// Synchronization with the document
+const { item: theme } = useFigmaStorage('project-theme', 'light')
+
+// Synchronization with personal user settings
+const { item: isSeen } = useFigmaClientStorage('show-onboarding', false)
+
+// When .value changes, data is automatically sent to Figma
+theme.value = 'dark'
+```

package/src/media/functional/ui-figma/storage/storage.ru.mdx

@@ -0,0 +1,53 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/# UI Figma/# Работа с хранилищем'/>
+
+# Работа с хранилищем
+
+Figma предоставляет два основных механизма сохранения данных: локальное хранилище пользователя и общее хранилище документа. Библиотека предлагает типизированные обертки для обоих методов, обеспечивая удобный доступ и синхронизацию.
+
+## Бэкенд (Backend / plugin/code.ts)
+
+На стороне кода плагина необходимо инициализировать слушатели сообщений для синхронизации данных с интерфейсом.
+
+### Инициализация
+```typescript
+import { setupStorage, setupClientStorage } from '@dxtmisha/figma-code'
+
+// Активация слушателей для обоих типов хранилищ
+setupStorage()
+setupClientStorage()
+```
+
+### Использование напрямую
+Вы можете работать с данными хранилища прямо в коде бэкенда:
+
+```typescript
+import { FigmaStorage, FigmaClientStorage } from '@dxtmisha/figma-code'
+
+// Общее хранилище документа
+const storage = FigmaStorage.getInstance<string>('project-theme')
+storage.set('dark')
+
+// Личное хранилище пользователя
+const client = FigmaClientStorage.getInstance<boolean>('show-onboarding')
+await client.set(true)
+```
+
+## Интерфейс (UI / Iframe)
+
+В интерфейсе плагина данные доступны через реактивные хуки, которые автоматически синхронизируются с бэкендом.
+
+### Реактивное использование (Vue)
+```typescript
+import { useFigmaStorage, useFigmaClientStorage } from '@dxtmisha/figma-ref'
+
+// Синхронизация с документом
+const { item: theme } = useFigmaStorage('project-theme', 'light')
+
+// Синхронизация с личными настройками пользователя
+const { item: isSeen } = useFigmaClientStorage('show-onboarding', false)
+
+// При изменении .value данные автоматически улетают в Figma
+theme.value = 'dark'
+```

package/src/media/functional/ui-figma/storage/storage.vi.mdx

@@ -0,0 +1,53 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/# UI Figma/# Lưu trữ dữ liệu'/>
+
+# Làm việc với bộ nhớ (Storage)
+
+Figma cung cấp hai cơ chế chính để lưu dữ liệu: bộ nhớ người dùng cục bộ và bộ nhớ tài liệu dùng chung. Thư viện cung cấp các trình bao bọc (wrapper) được định kiểu cho cả hai phương pháp, giúp truy cập và đồng bộ hóa thuận tiện.
+
+## Backend (Backend / plugin/code.ts)
+
+Về phía mã của plugin, cần phải khởi tạo các trình lắng nghe tin nhắn để đồng bộ hóa dữ liệu với giao diện.
+
+### Khởi tạo
+```typescript
+import { setupStorage, setupClientStorage } from '@dxtmisha/figma-code'
+
+// Kích hoạt trình lắng nghe cho cả hai loại bộ nhớ
+setupStorage()
+setupClientStorage()
+```
+
+### Sử dụng trực tiếp
+Bạn có thể làm việc với dữ liệu bộ nhớ trực tiếp trong mã backend:
+
+```typescript
+import { FigmaStorage, FigmaClientStorage } from '@dxtmisha/figma-code'
+
+// Bộ nhớ tài liệu dùng chung
+const storage = FigmaStorage.getInstance<string>('project-theme')
+storage.set('dark')
+
+// Bộ nhớ người dùng cá nhân
+const client = FigmaClientStorage.getInstance<boolean>('show-onboarding')
+await client.set(true)
+```
+
+## Giao diện (UI / Iframe)
+
+Trong giao diện plugin, dữ liệu có thể truy cập được thông qua các hook phản hồi tự động đồng bộ hóa với backend.
+
+### Sử dụng phản hồi (Vue)
+```typescript
+import { useFigmaStorage, useFigmaClientStorage } from '@dxtmisha/figma-ref'
+
+// Đồng bộ hóa với tài liệu
+const { item: theme } = useFigmaStorage('project-theme', 'light')
+
+// Đồng bộ hóa với cài đặt cá nhân của người dùng
+const { item: isSeen } = useFigmaClientStorage('show-onboarding', false)
+
+// Khi .value thay đổi, dữ liệu sẽ tự động được gửi đến Figma
+theme.value = 'dark'
+```

package/src/media/functional/ui-figma/styles/styles.en.mdx

@@ -0,0 +1,57 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/# UI Figma/# Working with Styles'/>
+
+# Working with Styles
+
+The system for retrieving extended style data enables the transfer of detailed information (CSS, JSON structures, text content) from the Figma canvas to the plugin's interface upon request.
+
+## Backend (Backend / plugin/code.ts)
+
+On the plugin code side, you need to initialize a handler that will respond to data requests from the UI.
+
+#### Initialization
+Call the `setupFrameStyles()` function once when the plugin starts:
+
+```typescript
+import { setupFrameStyles } from '@dxtmisha/figma-code'
+
+// Initialize the style request handler
+setupFrameStyles()
+```
+
+## Interface (UI / Iframe)
+
+Tools for sending style requests and reactively observing the results.
+
+#### Reactive Usage (Vue)
+The recommended way is through the `useFigmaFrameStyles` composable.
+
+```typescript
+import { useFigmaFrameStyles } from '@dxtmisha/figma-ref'
+
+const { 
+  styles, // Computed list of retrieved styles (ComputedRef)
+  send    // Method to send a request: send({ ids, children })
+} = useFigmaFrameStyles()
+
+// Example of requesting styles for specific nodes
+const fetchDetails = () => {
+  send({ ids: ['1:10', '1:25'], children: true })
+}
+```
+
+#### Direct Management (JavaScript)
+If you are not using Vue, you can use the base functions to send a request and subscribe to the response:
+
+```typescript
+import { sendFrameStyles, fetchFrameStyles } from '@dxtmisha/figma'
+
+// Request styles
+sendFrameStyles({ ids: '1:10', children: true })
+
+// Subscribe to receiving data
+fetchFrameStyles((data) => {
+  console.log('Received style data:', data)
+})
+```