@dxtmisha/wiki 0.57.1 → 0.57.4

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

@@ -1,73 +1,96 @@
-import {Meta} from '@storybook/addon-docs/blocks'
+import { Meta, Source } from '@storybook/addon-docs/blocks'
 
-<Meta title='@dxtmisha/en/figma-code/Classes/FigmaItem - Node Wrapper'/>
+<Meta title='@dxtmisha/en/figma-code/Classes/FigmaItem - Figma node wrapper'/>
 
-# FigmaItem Class
+# Class `FigmaItem`
 
-A wrapper class for Figma nodes (`UiFigmaNode`) that provides a simplified, typed interface for common operations such as type checking, tree navigation, and asynchronous export.
+A versatile wrapper class for interacting with any type of Figma node. It provides typed methods for type checking, tree navigation, and common operations such as exporting and viewport management.
 
 ## Key Features
 
-- **Typed Access** — Provides type guard methods for `DOCUMENT`, `FRAME`, `SECTION`, and `TEXT` nodes.
-- **Simplified Navigation** — Easily access parent or child nodes wrapped in `FigmaItem` instances.
-- **Export Hook** — High-level methods for exporting nodes to JPG or JSON formats.
-- **Content Analysis** — Specialized logic for extracting and validating text content.
+- **Type Safety** — Utilizes Type Guards (`isFrame`, `isText`, etc.) for safe access to properties specific to certain node types.
+- **Fluent Navigation** — Convenient methods for retrieving parent elements or child nodes already wrapped in `FigmaItem` instances.
+- **Integrated Actions** — Built-in support for exporting nodes to JPG/JSON and controlling the Figma viewport (selection and zoom).
 
 ## Initialization
 
-To initialize the object, call the `FigmaItem(item)` constructor.
-
-### Generic Constraints
-
-The class supports a generic parameter for strict typing:
-- `T extends UiFigmaNode` — The specific type of the wrapped Figma node.
-
-**Parameters:**
-- `item: T` — The native Figma node (e.g., `SceneNode`, `FrameNode`, `TextNode`) to be wrapped.
+Wrap any Figma node in a `FigmaItem` instance to access its helper methods.
 
 ```typescript
 import { FigmaItem } from '@dxtmisha/figma-code'
 
-// 1. Wrapping a selected node
+// Wrap a node (e.g., from selection)
 const item = new FigmaItem(figma.currentPage.selection[0])
 
-// 2. Using generics for specific node types
-const frameItem = new FigmaItem<FrameNode>(someFrameNode)
+if (item.isFrame()) {
+  console.log('Node is a frame:', item.getName())
+}
 ```
 
-## Identification
-
-- `isDocument(): boolean` — Checks if the wrapped node is a `DOCUMENT`. Example: `item.isDocument()`
-- `isFrame(): boolean` — Checks if the wrapped node is a `FRAME`. Example: `item.isFrame()`
-- `isSection(): boolean` — Checks if the wrapped node is a `SECTION`. Example: `item.isSection()`
-- `isText(): boolean` — Checks if the wrapped node is a `TEXT` node. Example: `item.isText()`
-- `isTextNoValue(): boolean` — Filters for text nodes with meaningful content. Example: `item.isTextNoValue()`
-- `getType(): string | undefined` — Returns the string type constant of the node. Example: `const type = item.getType()`
-- `getId(): string` — Returns the unique ID of the node. Example: `const id = item.getId()`
-- `getName(): string` — Returns the display name of the node. Example: `const name = item.getName()`
-
-## Navigation
-
-- `getParent(): UiFigmaNode | undefined` — Returns the raw parent node. Example: `const parent = item.getParent()`
-- `getParentItem(): FigmaItem | undefined` — Returns the wrapped parent. Example: `const parentItem = item.getParentItem()`
-- `getChildren(): UiFigmaNode[]` — Returns an array of raw child nodes. Example: `const children = item.getChildren()`
-- `getChildrenItems(): FigmaItem[]` — Returns an array of wrapped child nodes. Example: `const items = item.getChildrenItems()`
-
-## Data & Export
-
-- `get(): T` — Returns the raw underlying Figma node. Example: `const raw = item.get()`
-- `exportJpg(): Promise<Uint8Array | string>` — Asynchronously exports the node in JPG format. Example: `const bytes = await item.exportJpg()`
-- `exportJson(): Promise<Uint8Array | string>` — Asynchronously exports the node in JSON format. Example: `const json = await item.exportJson()`
-- `getText(): string` — Retrieves the trimmed text content from the node. Example: `const content = item.getText()`
-
-## Types
-
-### `UiFigmaNode`
-
-A union type representing any relevant Figma node that can be wrapped by `FigmaItem`.
-- Includes: `DocumentNode`, `PageNode`, `FrameNode`, `SectionNode`, `TextNode`, and other `SceneNode` variants.
-
-### `UiFigmaExportFormat`
-
-Supported formats for node export operations.
-- Values: `'PNG'`, `'JPG'`, `'SVG'`, `'PDF'`, `'JSON_REST_V1'`.
+## Methods
+
+### Type Guards
+
+- `isDocument(): boolean` — Checks if the node is a Document.
+- `isFrame(): boolean` — Checks if the node is a Frame.
+- `isSection(): boolean` — Checks if the node is a Section.
+- `isText(): boolean` — Checks if the node is a Text node.
+- `isTextNoValue(): boolean` — Checks if the node is a text node with meaningful content.
+- `inCurrentPage(): boolean` — Checks if the node belongs to the current active page.
+
+### Hierarchy and Navigation
+
+- `get(): T` — Returns the original Figma node.
+- `getParent(): UiFigmaNode | undefined` — Returns the original parent node.
+- `getParentItem(): FigmaItem | undefined` — Returns the parent node wrapped in `FigmaItem`.
+- `getParentPage(): PageNode | undefined` — Returns the parent page of the node.
+- `getParentPageItem(): FigmaItem | undefined` — Returns the parent page wrapped in `FigmaItem`.
+- `getChildren(): UiFigmaNode[]` — Returns the list of child nodes in original format.
+- `getChildrenItems(): FigmaItem[]` — Returns all child nodes wrapped in `FigmaItem`.
+
+### Content and Information
+
+- `getId(): string` — Returns the unique identifier of the node.
+- `getName(): string` — Returns the name of the node.
+- `getType(): string` — Returns the node type string.
+- `getText(): string` — Returns the text content (for text nodes only).
+- `getInfo(): Promise<UiFigmaFramesItem>` — Asynchronously collects basic node information (name, ID, screenshot).
+- `getCss(): Promise<Record<string, string>>` — Asynchronously extracts CSS styles of the node.
+- `getStyles(): Promise<UiFigmaFrameStylesItem>` — Asynchronously extracts extended style information (CSS, text, JSON).
+
+### Export and Actions
+
+- `exportJpg(): Promise<Uint8Array>` — Exports the node as a JPG image.
+- `exportJson(): Promise<any>` — Exports full node data in JSON format.
+- `exportJsonCompact(): Promise<UiFigmaFrameStylesData | undefined>` — Exports node data in a compact JSON format.
+- `toSelection(): void` — Selects the node and focuses the viewport on it.
+- `toPageAndSelection(): Promise<void>` — Switches to the node's page and selects it.
+
+## Data Types
+
+#### `UiFigmaFramesItem`
+Simplified information about an element for display in the interface.
+- `name: string` — The name of the element in Figma.
+- `id: string` — The unique identifier of the node.
+- `image?: Uint8Array | string` — A screenshot of the element (binary data or base64).
+
+#### `UiFigmaFrameStylesItem`
+Extended information about an element, including its styles. Inherits all fields from `UiFigmaFramesItem`.
+- `json?: UiFigmaFrameStylesData` — Node data and styles structure in JSON format.
+- `text?: string` — Text content (if the node is a text node).
+- `styles?: Record<string, string>` — An object with CSS properties of the element itself.
+- `childrenStyles?: Record<string, Record<string, string>>` — A map of CSS styles for all child elements, indexed by their ID.
+
+#### `UiFigmaFrameStylesData`
+- `document: UiFigmaFrameStylesJson` — Node tree in a compact format.
+- `styles: Record<string, any>` — A dictionary of document style definitions.
+
+#### `UiFigmaFrameStylesJson`
+Compact representation of a Figma node for JSON export.
+- `id: string` — Unique identifier of the node.
+- `name: string` — Name of the node.
+- `type: string` — Type of the node.
+- `characters?: string` — Text (for text nodes).
+- `children?: UiFigmaFrameStylesJson[]` — Recursive list of child elements.
+- `style?: Record<string, any>` — Appearance parameters.
+- `styles?: Record<string, any>` — Associated styles.

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

@@ -1,73 +1,96 @@
-import {Meta} from '@storybook/addon-docs/blocks'
+import { Meta, Source } from '@storybook/addon-docs/blocks'
 
-<Meta title='@dxtmisha/ru/figma-code/Classes/FigmaItem - Обертка узла'/>
+<Meta title='@dxtmisha/ru/figma-code/Classes/FigmaItem - Обертка для узлов Figma'/>
 
-# Класс FigmaItem
+# Класс `FigmaItem`
 
-Класс-обертка для узлов Figma (`UiFigmaNode`), который предоставляет упрощенный типизированный интерфейс для общих операций, таких как проверка типа, навигация по дереву и асинхронный экспорт.
+Универсальный класс-обертка для работы с любыми типами узлов Figma. Предоставляет типизированные методы для проверки типов, навигации по дереву элементов и выполнения частых операций, таких как экспорт и управление вьюпортом.
 
 ## Ключевые особенности
 
-- **Типизированный доступ** — Предоставляет методы-тайпгарды для узлов `DOCUMENT`, `FRAME`, `SECTION` и `TEXT`.
-- **Упрощенная навигация** — Легкий доступ к родительским или дочерним узлам, обернутым в экземпляры `FigmaItem`.
-- **Экспорт** — Высокоуровневые методы для экспорта узлов в форматы JPG или JSON.
-- **Анализ контента** — Специализированная логика для извлечения и валидации текстового содержимого.
+- **Типобезопасность** — Использует Type Guards (`isFrame`, `isText` и т. д.) для безопасного доступа к свойствам конкретных типов узлов.
+- **Удобная навигация** — Методы для получения родительских элементов или дочерних узлов, уже обернутых в экземпляры `FigmaItem`.
+- **Встроенные действия** — Поддержка экспорта узлов в JPG/JSON и управления вьюпортом Figma (выделение и масштабирование).
 
 ## Инициализация
 
-Для инициализации объекта вызовите конструктор `FigmaItem(item)`.
-
-### Ограничения универсальных типов (Generics)
-
-Класс поддерживает параметр универсального типа для строгой типизации:
-- `T extends UiFigmaNode` — Конкретный тип обернутого узла Figma.
-
-**Параметры:**
-- `item: T` — Нативный узел Figma (например, `SceneNode`, `FrameNode`, `TextNode`), который необходимо обернуть.
+Оберните любой узел Figma в экземпляр `FigmaItem`, чтобы получить доступ к его вспомогательным методам.
 
 ```typescript
 import { FigmaItem } from '@dxtmisha/figma-code'
 
-// 1. Обертывание текущего выделенного узла
+// Обертывание узла (например, из выделения)
 const item = new FigmaItem(figma.currentPage.selection[0])
 
-// 2. Использование дженериков для конкретных типов узлов
-const frameItem = new FigmaItem<FrameNode>(someFrameNode)
+if (item.isFrame()) {
+  console.log('Узел является фреймом:', item.getName())
+}
 ```
 
-## Идентификация узла
-
-- `isDocument(): boolean` — Проверяет, является ли узел документом. Пример: `item.isDocument()`
-- `isFrame(): boolean` — Проверяет, является ли узел фреймом. Пример: `item.isFrame()`
-- `isSection(): boolean` — Проверяет, является ли узел секцией. Пример: `item.isSection()`
-- `isText(): boolean` — Проверяет, является ли узел текстовым. Пример: `item.isText()`
-- `isTextNoValue(): boolean` — Фильтрует текстовые узлы со значимым контентом. Пример: `item.isTextNoValue()`
-- `getType(): string | undefined` — Возвращает строковую константу типа узла. Пример: `const type = item.getType()`
-- `getId(): string` — Возвращает уникальный ID узла. Пример: `const id = item.getId()`
-- `getName(): string` — Возвращает отображаемое имя узла. Пример: `const name = item.getName()`
-
-## Навигация
-
-- `getParent(): UiFigmaNode | undefined` — Возвращает нативный родительский узел. Пример: `const parent = item.getParent()`
-- `getParentItem(): FigmaItem | undefined` — Возвращает родителя, обернутого в `FigmaItem`. Пример: `const parentItem = item.getParentItem()`
-- `getChildren(): UiFigmaNode[]` — Возвращает массив нативных дочерних узлов. Пример: `const children = item.getChildren()`
-- `getChildrenItems(): FigmaItem[]` — Возвращает массив обернутых дочерних узлов. Пример: `const items = item.getChildrenItems()`
-
-## Данные и экспорт
-
-- `get(): T` — Возвращает исходный нативный узел Figma. Пример: `const raw = item.get()`
-- `exportJpg(): Promise<Uint8Array | string>` — Асинхронно экспортирует узел в JPG. Пример: `const bytes = await item.exportJpg()`
-- `exportJson(): Promise<Uint8Array | string>` — Асинхронно экспортирует узел в JSON. Пример: `const json = await item.exportJson()`
-- `getText(): string` — Извлекает очищенное текстовое содержимое. Пример: `const content = item.getText()`
-
-## Типы (Types)
-
-### `UiFigmaNode`
-
-Тип-объединение (union), представляющий любой релевантный узел Figma, который может быть обернут в `FigmaItem`.
-- Включает: `DocumentNode`, `PageNode`, `FrameNode`, `SectionNode`, `TextNode` и другие варианты `SceneNode`.
-
-### `UiFigmaExportFormat`
-
-Поддерживаемые форматы для операций экспорта узлов.
-- Значения: `'PNG'`, `'JPG'`, `'SVG'`, `'PDF'`, `'JSON_REST_V1'`.
+## Методы
+
+### Проверка типов
+
+- `isDocument(): boolean` — Проверяет, является ли узел документом.
+- `isFrame(): boolean` — Проверяет, является ли узел фреймом.
+- `isSection(): boolean` — Проверяет, является ли узел секцией.
+- `isText(): boolean` — Проверяет, является ли узел текстовым узлом.
+- `isTextNoValue(): boolean` — Проверяет, является ли узел текстовым узлом с осмысленным содержанием.
+- `inCurrentPage(): boolean` — Проверяет, принадлежит ли узел текущей активной странице.
+
+### Иерархия и навигация
+
+- `get(): T` — Возвращает исходный узел Figma.
+- `getParent(): UiFigmaNode | undefined` — Возвращает исходный родительский узел.
+- `getParentItem(): FigmaItem | undefined` — Возвращает родительский узел, обернутый в `FigmaItem`.
+- `getParentPage(): PageNode | undefined` — Возвращает родительскую страницу узла.
+- `getParentPageItem(): FigmaItem | undefined` — Возвращает родительскую страницу, обернутую в `FigmaItem`.
+- `getChildren(): UiFigmaNode[]` — Возвращает список дочерних узлов в исходном формате.
+- `getChildrenItems(): FigmaItem[]` — Возвращает все дочерние узлы, обернутые в `FigmaItem`.
+
+### Контент и информация
+
+- `getId(): string` — Возвращает уникальный идентификатор узла.
+- `getName(): string` — Возвращает имя узла.
+- `getType(): string` — Возвращает строку с типом узла.
+- `getText(): string` — Возвращает текстовое содержимое (только для текстовых узлов).
+- `getInfo(): Promise<UiFigmaFramesItem>` — Асинхронно собирает базовую информацию об узле (имя, ID, скриншот).
+- `getCss(): Promise<Record<string, string>>` — Асинхронно извлекает CSS-стили текущего узла.
+- `getStyles(): Promise<UiFigmaFrameStylesItem>` — Асинхронно извлекает расширенную информацию о стилях (CSS, текст, JSON).
+
+### Экспорт и действия
+
+- `exportJpg(): Promise<Uint8Array>` — Экспортирует узел как изображение JPG.
+- `exportJson(): Promise<any>` — Экспортирует полные данные узла в формате JSON.
+- `exportJsonCompact(): Promise<UiFigmaFrameStylesData | undefined>` — Экспортирует данные узла в компактном формате JSON.
+- `toSelection(): void` — Выделяет узел и фокусирует на нем вьюпорт.
+- `toPageAndSelection(): Promise<void>` — Переключается на страницу узла и выделяет его.
+
+## Типы данных
+
+#### `UiFigmaFramesItem`
+Базовая информация об элементе для отображения в интерфейсе.
+- `name: string` — Название элемента в Figma.
+- `id: string` — Уникальный идентификатор узла.
+- `image?: Uint8Array | string` — Скриншот элемента (бинарные данные или base64).
+
+#### `UiFigmaFrameStylesItem`
+Расширенная информация об элементе, включая его стили. Наследует все поля `UiFigmaFramesItem`.
+- `json?: UiFigmaFrameStylesData` — Структура данных узла и стилей в формате JSON.
+- `text?: string` — Текстовое содержимое (если узел является текстовым).
+- `styles?: Record<string, string>` — Объект с CSS-свойствами самого элемента.
+- `childrenStyles?: Record<string, Record<string, string>>` — Карта CSS-стилей для всех дочерних элементов, индексированная по их ID.
+
+#### `UiFigmaFrameStylesData`
+- `document: UiFigmaFrameStylesJson` — Дерево узлов в компактном формате.
+- `styles: Record<string, any>` — Словарь определений стилей документа.
+
+#### `UiFigmaFrameStylesJson`
+Компактное представление узла Figma для JSON-экспорта.
+- `id: string` — Уникальный идентификатор узла.
+- `name: string` — Имя узла.
+- `type: string` — Тип узла.
+- `characters?: string` — Текст (для текстовых узлов).
+- `children?: UiFigmaFrameStylesJson[]` — Рекурсивный список дочерних элементов.
+- `style?: Record<string, any>` — Параметры оформления.
+- `styles?: Record<string, any>` — Связанные стили.

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

@@ -1,73 +1,96 @@
-import {Meta} from '@storybook/addon-docs/blocks'
+import { Meta, Source } from '@storybook/addon-docs/blocks'
 
-<Meta title='@dxtmisha/vi/figma-code/Classes/FigmaItem - Node Wrapper'/>
+<Meta title='@dxtmisha/vi/figma-code/Classes/FigmaItem - Lớp bọc node Figma'/>
 
-# Lớp FigmaItem
+# Lớp `FigmaItem`
 
-Một lớp wrapper cho các node Figma (`UiFigmaNode`) cung cấp giao diện được định nghĩa kiểu dữ liệu đơn giản cho các thao tác phổ biến như kiểm tra loại node, điều hướng cây node và xuất dữ liệu không đồng bộ.
+Một lớp bọc đa năng để tương tác với bất kỳ loại node Figma nào. Nó cung cấp các phương thức được định kiểu để kiểm tra kiểu, điều hướng cây node và các hoạt động phổ biến như xuất dữ liệu và quản lý khung nhìn (viewport).
 
 ## Các tính năng chính
 
-- **Truy cập có định kiểu** — Cung cấp các phương thức type guard cho các node `DOCUMENT`, `FRAME`, `SECTION`, và `TEXT`.
-- **Điều hướng đơn giản** — Dễ dàng truy cập các node cha hoặc con được bọc trong các thực thể `FigmaItem`.
-- **Hỗ trợ Export** — Các phương thức cấp cao để xuất các node sang định dạng JPG hoặc JSON.
-- **Phân tích nội dung** — Logic chuyên biệt để trích xuất và xác thực nội dung văn bản.
+- **An toàn kiểu dữ liệu** — Sử dụng Type Guards (`isFrame`, `isText`, v.v.) để truy cập an toàn vào các thuộc tính cụ thể của một số loại node.
+- **Điều hướng linh hoạt** — Các phương thức thuận tiện để truy xuất các phần tử cha hoặc các node con đã được bọc trong các thực thể `FigmaItem`.
+- **Hành động tích hợp** — Hỗ trợ tích hợp để xuất các node sang JPG/JSON và điều khiển khung nhìn Figma (lựa chọn và thu phóng).
 
 ## Khởi tạo
 
-Để khởi tạo đối tượng, hãy gọi hàm dựng `FigmaItem(item)`.
-
-### Ràng buộc Generics
-
-Lớp hỗ trợ một tham số generic để định kiểu nghiêm ngặt:
-- `T extends UiFigmaNode` — Loại cụ thể của node Figma được bọc.
-
-**Tham số:**
-- `item: T` — Node Figma gốc (ví dụ: `SceneNode`, `FrameNode`, `TextNode`) cần được bọc.
+Bọc bất kỳ node Figma nào trong một thực thể `FigmaItem` để truy cập các phương thức hỗ trợ của nó.
 
 ```typescript
 import { FigmaItem } from '@dxtmisha/figma-code'
 
-// 1. Bọc một node đang được chọn
+// Bọc một node (ví dụ: từ vùng lựa chọn)
 const item = new FigmaItem(figma.currentPage.selection[0])
 
-// 2. Sử dụng generics cho các loại node cụ thể
-const frameItem = new FigmaItem<FrameNode>(someFrameNode)
+if (item.isFrame()) {
+  console.log('Node là một frame:', item.getName())
+}
 ```
 
-## Định danh Node
-
-- `isDocument(): boolean` — Kiểm tra xem node được bọc có phải là DOCUMENT hay không. Ví dụ: `item.isDocument()`
-- `isFrame(): boolean` — Kiểm tra xem node có phải là FRAME hay không. Ví dụ: `item.isFrame()`
-- `isSection(): boolean` — Kiểm tra xem node có phải là SECTION hay không. Ví dụ: `item.isSection()`
-- `isText(): boolean` — Kiểm tra xem node có phải là TEXT hay không. Ví dụ: `item.isText()`
-- `isTextNoValue(): boolean` — Lọc các node văn bản có nội dung ý nghĩa. Ví dụ: `item.isTextNoValue()`
-- `getType(): string | undefined` — Trả về hằng số chuỗi loại của node. Ví dụ: `const type = item.getType()`
-- `getId(): string` — Trả về ID duy nhất của node. Ví dụ: `const id = item.getId()`
-- `getName(): string` — Trả về tên hiển thị của node. Ví dụ: `const name = item.getName()`
-
-## Điều hướng
-
-- `getParent(): UiFigmaNode | undefined` — Trả về node cha gốc. Ví dụ: `const parent = item.getParent()`
-- `getParentItem(): FigmaItem | undefined` — Trả về node cha được bọc. Ví dụ: `const parentItem = item.getParentItem()`
-- `getChildren(): UiFigmaNode[]` — Trả về một mảng các node con gốc. Ví dụ: `const children = item.getChildren()`
-- `getChildrenItems(): FigmaItem[]` — Trả về một mảng các node con đã bọc. Ví dụ: `const items = item.getChildrenItems()`
-
-## Dữ liệu & Xuất bản
-
-- `get(): T` — Trả về node Figma gốc bên dưới. Ví dụ: `const raw = item.get()`
-- `exportJpg(): Promise<Uint8Array | string>` — Xuất node sang định dạng JPG. Ví dụ: `const bytes = await item.exportJpg()`
-- `exportJson(): Promise<Uint8Array | string>` — Xuất node sang định dạng JSON. Ví dụ: `const json = await item.exportJson()`
-- `getText(): string` — Lấy nội dung văn bản đã làm sạch. Ví dụ: `const content = item.getText()`
-
-## Các loại dữ liệu (Types)
-
-### `UiFigmaNode`
-
-Một kiểu union đại diện cho bất kỳ node Figma nào có liên quan có thể được bọc bởi `FigmaItem`.
-- Bao gồm: `DocumentNode`, `PageNode`, `FrameNode`, `SectionNode`, `TextNode`, và các biến thể `SceneNode` khác.
-
-### `UiFigmaExportFormat`
-
-Các định dạng được hỗ trợ cho các thao tác xuất (export) node.
-- Các giá trị: `'PNG'`, `'JPG'`, `'SVG'`, `'PDF'`, `'JSON_REST_V1'`.
+## Các phương thức
+
+### Kiểm tra kiểu (Type Guards)
+
+- `isDocument(): boolean` — Kiểm tra xem node là Document.
+- `isFrame(): boolean` — Kiểm tra xem node là Frame.
+- `isSection(): boolean` — Kiểm tra xem node là Section.
+- `isText(): boolean` — Kiểm tra xem node là Text node.
+- `isTextNoValue(): boolean` — Kiểm tra xem node có nội dung ý nghĩa hay không.
+- `inCurrentPage(): boolean` — Kiểm tra xem node có thuộc trang đang hoạt động hay không.
+
+### Hệ thống cấp bậc và Điều hướng
+
+- `get(): T` — Trả về node Figma gốc.
+- `getParent(): UiFigmaNode | undefined` — Trả về node cha gốc.
+- `getParentItem(): FigmaItem | undefined` — Trả về node cha được bọc trong `FigmaItem`.
+- `getParentPage(): PageNode | undefined` — Trả về trang cha của node.
+- `getParentPageItem(): FigmaItem | undefined` — Trả về trang cha được bọc trong `FigmaItem`.
+- `getChildren(): UiFigmaNode[]` — Trả về danh sách các node con ở định dạng gốc.
+- `getChildrenItems(): FigmaItem[]` — Trả về tất cả các node con được bọc trong `FigmaItem`.
+
+### Nội dung và Thông tin
+
+- `getId(): string` — Trả về mã định danh duy nhất của node.
+- `getName(): string` — Trả về tên của node.
+- `getType(): string` — Trả về chuỗi kiểu node.
+- `getText(): string` — Trả về nội dung văn bản (chỉ dành cho text node).
+- `getInfo(): Promise<UiFigmaFramesItem>` — Thu thập thông tin cơ bản về node (tên, ID, ảnh chụp màn hình) một cách không đồng bộ.
+- `getCss(): Promise<Record<string, string>>` — Trích xuất các style CSS của node một cách không đồng bộ.
+- `getStyles(): Promise<UiFigmaFrameStylesItem>` — Trích xuất thông tin style mở rộng (CSS, văn bản, JSON) một cách không đồng bộ.
+
+### Xuất và Hành động
+
+- `exportJpg(): Promise<Uint8Array>` — Xuất node dưới dạng hình ảnh JPG.
+- `exportJson(): Promise<any>` — Xuất dữ liệu node đầy đủ ở định dạng JSON.
+- `exportJsonCompact(): Promise<UiFigmaFrameStylesData | undefined>` — Xuất dữ liệu node ở định dạng JSON thu gọn.
+- `toSelection(): void` — Chọn node và tập trung khung nhìn vào nó.
+- `toPageAndSelection(): Promise<void>` — Chuyển đến trang của node và chọn nó.
+
+## Các kiểu dữ liệu
+
+#### `UiFigmaFramesItem`
+Thông tin đơn giản hóa về một phần tử để hiển thị trong giao diện.
+- `name: string` — Tên của phần tử trong Figma.
+- `id: string` — Định danh duy nhất của node.
+- `image?: Uint8Array | string` — Ảnh chụp màn hình của phần tử (dữ liệu nhị phân hoặc base64).
+
+#### `UiFigmaFrameStylesItem`
+Thông tin mở rộng về một phần tử, bao gồm style của nó. Kế thừa tất cả các trường từ `UiFigmaFramesItem`.
+- `json?: UiFigmaFrameStylesData` — Cấu trúc dữ liệu node và style dưới định dạng JSON.
+- `text?: string` — Nội dung văn bản (nếu node là một node văn bản).
+- `styles?: Record<string, string>` — Một đối tượng chứa các thuộc tính CSS của chính phần tử đó.
+- `childrenStyles?: Record<string, Record<string, string>>` — Bản đồ các style CSS cho tất cả các phần tử con, được lập chỉ mục theo ID của chúng.
+
+#### `UiFigmaFrameStylesData`
+- `document: UiFigmaFrameStylesJson` — Cây node dưới định dạng nén.
+- `styles: Record<string, any>` — Một từ điển các định nghĩa style của tài liệu.
+
+#### `UiFigmaFrameStylesJson`
+Biểu diễn thu gọn của một node Figma để xuất JSON.
+- `id: string` — Định danh duy nhất của node.
+- `name: string` — Tên node.
+- `type: string` — Kiểu node.
+- `characters?: string` — Văn bản (cho text node).
+- `children?: UiFigmaFrameStylesJson[]` — Danh sách các phần tử con đệ quy.
+- `style?: Record<string, any>` — Các tham số ngoại hình.
+- `styles?: Record<string, any>` — Các style liên quan.

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

@@ -1,63 +1,33 @@
-import {Meta} from '@storybook/addon-docs/blocks'
+import { Meta, Source } from '@storybook/addon-docs/blocks'
 
-<Meta title='@dxtmisha/en/figma-code/Classes/FigmaPluginMessenger - Backend Messenger'/>
+<Meta title='@dxtmisha/en/figma-code/Classes/FigmaPluginMessenger - Plugin messenger (Backend)'/>
 
-# FigmaPluginMessenger Class
+# Class `FigmaPluginMessenger`
 
-Messenger for the Figma plugin side (backend). It handles sending messages to the Figma UI and listening for messages from the UI using the internal Figma `figma.ui` API.
+A specialized messenger for the Figma plugin backend. It extends `FigmaPostAbstract` to provide a robust communication layer between the plugin's main logic (code side) and its user interface (UI).
+
+## Key Features
+
+- **Singleton Architecture** — Use `getInstance()` to ensure all parts of the plugin use the same communication hub.
+- **Simplified API** — Wraps standard `figma.ui.postMessage` and `figma.ui.onmessage` into a more manageable interface.
+- **Type Safety** — Supports generic types for messages to ensure data consistency.
 
 ## Initialization
 
-Extends `FigmaPostAbstract`.
+Access the singleton instance using the static `getInstance()` method.
 
 ```typescript
 import { FigmaPluginMessenger } from '@dxtmisha/figma-code'
 
-const messenger = new FigmaPluginMessenger()
-  .make()
-  .add('hello-ui', (msg) => console.log('UI:', msg))
-```
-
-## Public Methods
-
-### `make`
-
-Initializes the message listener using the `figma.ui.onmessage` API. Should be called once to start receiving messages from the UI.
-
-**Returns:** `this`
-
-```javascript
-messenger.make()
+const messenger = FigmaPluginMessenger.getInstance()
 ```
 
-### `add`
+## Methods
 
-Registers a listener for a specific message type coming from the UI.
+### Communication
 
-**Parameters:**
-- `type: string` — Unique identifier for the message type to listen for.
-- `callback: (message: Message) => void` — function to execute when a matching message arrives.
+Methods for sending and receiving messages.
 
-**Returns:** `this`
-
-```javascript
-messenger.add('resize-ui', (data) => {
-  figma.ui.resize(data.width, data.height)
-})
-```
-
-### `post`
-
-Sends a message to the Figma UI side.
-
-**Parameters:**
-- `type: string` — The identifier of the message (type).
-- `message: Message` — (Optional) Data payload to send to the UI.
-
-**Returns:** `void`
-
-```javascript
-messenger.post('selection-data', { 
-  ids: figma.currentPage.selection.map(node => node.id) 
-})
-```
+- `post<Message>(type: string, message?: Message): void` — Sends a message of a specific type to the Figma UI.
+- `add(type: string, callback: (data: any) => void): this` — (Inherited) Registers a listener for messages from the UI.
+- `remove(type: string): this` — (Inherited) Removes a listener.