@dxtmisha/wiki 0.25.1 → 0.39.2

package/src/media/descriptions/wikiDescriptionsTextareaAutosize.ts

@@ -46,5 +46,12 @@ export const wikiDescriptionsTextareaAutosize: StorybookComponentsDescriptionIte
     expose: `
 <StorybookDescriptions componentName={'Expose'} type={'value'}/>
     `
+  },
+  ai: {
+    description: `
+Low-level functional engine for multi-line inputs that provides precise, real-time height adjustment based on content. Implements a reliable cloning mechanism to calculate scroll-free container heights while respecting parent padding and font styles.
+Features automated height synchronization during content changes, supporting smooth CSS transitions and native textarea attributes via inputAttrs. Operates as a foundational tool for the Textarea component, ensuring character entry never triggers unwanted shift or overflow.
+Primarily integrated as a subcomponent; should generally not be manually used for standalone input fields. Controlled via reactive value bindings, serving as the high-performance core for any dynamic data entry element requiring responsive layout scaling.
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsTooltip.ts

@@ -85,5 +85,21 @@ export const wikiDescriptionsTooltip: StorybookComponentsDescriptionItem = {
 <StorybookDescriptions componentName={'Slot'} type={'description'}/>
 <StorybookDescriptions componentName={'Slot'} type={'body'}/>
     `
+  },
+  ai: {
+    render: `
+<div :class="classDemo.item">
+  <Tooltip open embedded v-bind="args">
+    <template #control="{ binds }">
+      <button v-bind="binds">Hover me</button>
+    </template>
+  </Tooltip>
+</div>
+    `,
+    description: `
+Contextual informational overlay that appears when a user interacts with a trigger element via hover or focus. Designed for auxiliary labels, helper text, and secondary descriptive titles that enhance functional awareness without crowding the UI.
+Features automated high-precision positioning (top, bottom, left, right) with viewport collision detection and customizable delay/interactive behaviors. Includes a built-in arrow indicator and requires trigger binding via the #control slot's binds object for proper event synchronization.
+Controlled via simple content props (label, description) and supports complex HTML structures within the #default slot. Use to provide non-critical supplemental information, keyboard shortcuts, or detailed affordance for icon-only buttons.
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsWindow.ts

@@ -207,5 +207,35 @@ export const wikiDescriptionsWindow: StorybookComponentsDescriptionItem = {
     slots: `
 <StorybookDescriptions componentName={'Window'} type={'slots'}/>
     `
+  },
+  ai: {
+    render: `
+      <div :class="classDemo.item">
+        <Window embedded open v-bind="args">
+            <template #control="{ binds }">
+              <button v-bind="binds">Open Window</button>
+            </template>
+            <template #title>
+              <h3>Window Title</h3>
+            </template>
+            <template #default>
+              <p>Window content goes here. This is a demonstration of the window component capabilities.</p>
+              <p>It can contain text, images, forms, or any other content.</p>
+            </template>
+            <template #footer>
+              <div>
+                <button>Cancel</button>
+                <button>Save</button>
+              </div>
+            </template>
+          </Window>
+      </div>
+    `,
+    description: `
+Versatile high-performance container orchestration system for Modals, Popups, Dropdowns, and Cards. Automatically manages complex DOM interactions including z-index hierarchy, focus trapping, teleportation, and body scroll locking.
+Features an intelligent multi-axis positioning engine (vertical, horizontal, or overlay) with automated viewport collision detection and obstacle avoidance. Includes a full suite of lifecycle hooks, advanced animation management, and integrated support for Scrollbar and Image components within its content area.
+Controlled via the v-model:open prop and utilizing the #control, #title, #default, and #footer slots for modular layout. Use as a foundational building block for any overlaid or contextual interface requirement that exceeds the logic of standard Modal or Menu components.
+    `,
+    hide: true
   }
 }

package/src/media/functional/figma/classes/FigmaPostAbstract/FigmaPostAbstract.en.mdx

@@ -0,0 +1,72 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/figma/Classes/FigmaPostAbstract - Base Messaging Class'/>
+
+# FigmaPostAbstract Class
+
+Base abstract class for managing messaging between the Figma plugin (backend) and the UI (frontend). It provides a structured foundation for bidirectional communication with built-in verification and multiple listener management.
+
+## Key Features
+
+- **Bidirectional Support** — Foundation for both `FigmaPluginMessenger` and `FigmaUiMessenger`.
+- **Message Verification** — Uses `FigmaPostCode` to ensure that messages originated from the same plugin instance.
+- **Multicast Listeners** — Supports multiple callbacks for a single message type.
+- **Method Chaining** — Methods like `make` and `add` return `this`, allowing for a more concise initialization.
+
+## Public Methods
+
+### `make`
+
+Initializes the message listener. This method ensures that the environment-specific setup (`prepare`) is executed exactly once, regardless of how many times `make` is called.
+
+**Returns:** `this`
+
+```javascript
+const messenger = new FigmaPluginMessenger().make()
+```
+
+### `add`
+
+Registers a callback function to be executed when a message of a specific type is received.
+
+**Parameters:**
+- `type: string` — The unique identifier for the message type.
+- `callback: UiFigmaMessengerCallback<Message>` — The function to call when the message is received. Receives the message data as its first argument.
+- `once: boolean = false` — If set to `true`, the callback will be automatically removed after being called once.
+
+**Returns:** `this`
+
+```javascript
+messenger
+  .add('update-selection', (data) => console.log('Selection:', data.count))
+  .add('init', (data) => console.log('Init:', data), true)
+  .add('close', () => figma.closePlugin())
+```
+
+### `remove`
+
+Removes a previously registered callback function for a specific message type.
+
+**Parameters:**
+- `type: string` — The unique identifier for the message type.
+- `callback: UiFigmaMessengerCallback<Message>` — The function to be removed from the listeners.
+
+**Returns:** `this`
+
+```javascript
+const onUpdate = (data) => console.log('Selection:', data.count)
+
+messenger
+  .add('update-selection', onUpdate)
+  .remove('update-selection', onUpdate)
+```
+
+## Data Structures
+
+### `UiFigmaMessengerData`
+
+The structure of the data object passed through the messaging pipeline:
+
+- `code: string` — The verification code from `FigmaPostCode`.
+- `type: string` — The identifier of the message.
+- `message: Message` — The actual payload data.

package/src/media/functional/figma/classes/FigmaPostAbstract/FigmaPostAbstract.ru.mdx

@@ -0,0 +1,72 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/figma/Classes/FigmaPostAbstract - Базовый класс сообщений'/>
+
+# Класс FigmaPostAbstract
+
+Базовый абстрактный класс для управления обменом сообщениями между плагином Figma (backend) и UI (frontend). Обеспечивает структурированную основу для двусторонней связи со встроенной проверкой и управлением несколькими слушателями.
+
+## Ключевые особенности
+
+- **Двусторонняя поддержка** — База как для `FigmaPluginMessenger`, так и для `FigmaUiMessenger`.
+- **Проверка сообщений** — Использует `FigmaPostCode`, чтобы гарантировать, что сообщения исходят из того же экземпляра плагина.
+- **Множественные слушатели** — Поддерживает несколько колбэков для одного типа сообщения.
+- **Цепочка вызовов** — Методы, такие как `make` и `add`, возвращают `this`, что позволяет писать более лаконичный код.
+
+## Публичные методы
+
+### `make`
+
+Инициализирует слушатель сообщений. Этот метод гарантирует, что специфичная для среды настройка (`prepare`) будет выполнена ровно один раз, независимо от того, сколько раз вызывается `make`.
+
+**Возвращает:** `this`
+
+```javascript
+const messenger = new FigmaPluginMessenger().make()
+```
+
+### `add`
+
+Регистрирует функцию обратного вызова (колбэк), которая будет выполнена при получении сообщения определенного типа.
+
+**Параметры:**
+- `type: string` — Уникальный идентификатор типа сообщения.
+- `callback: UiFigmaMessengerCallback<Message>` — Функция, вызываемая при получении сообщения. Получает данные сообщения в качестве первого аргумента.
+- `once: boolean = false` — Если установлено значение `true`, колбэк будет автоматически удален после одного вызова.
+
+**Возвращает:** `this`
+
+```javascript
+messenger
+  .add('update-selection', (data) => console.log('Выбор:', data.count))
+  .add('init', (data) => console.log('Init:', data), true)
+  .add('close', () => figma.closePlugin())
+```
+
+### `remove`
+
+Удаляет ранее зарегистрированную функцию обратного вызова для определенного типа сообщения.
+
+**Параметры:**
+- `type: string` — Уникальный идентификатор типа сообщения.
+- `callback: UiFigmaMessengerCallback<Message>` — Функция, которая будет удалена из слушателей.
+
+**Возвращает:** `this`
+
+```javascript
+const onUpdate = (data) => console.log('Выбор:', data.count)
+
+messenger
+  .add('update-selection', onUpdate)
+  .remove('update-selection', onUpdate)
+```
+
+## Структуры данных
+
+### `UiFigmaMessengerData`
+
+Структура объекта данных, передаваемого через систему сообщений:
+
+- `code: string` — Код проверки из `FigmaPostCode`.
+- `type: string` — Идентификатор сообщения.
+- `message: Message` — Сами полезные данные сообщения.

package/src/media/functional/figma/classes/FigmaPostAbstract/FigmaPostAbstract.vi.mdx

@@ -0,0 +1,72 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/figma/Classes/FigmaPostAbstract - Lớp cơ sở cho nhắn tin'/>
+
+# Lớp FigmaPostAbstract
+
+Lớp trừu tượng cơ sở để quản lý việc nhắn tin giữa plugin Figma (backend) và UI (frontend). Nó cung cấp một nền tảng có cấu trúc cho giao tiếp hai chiều với tính năng xác minh tích hợp và quản lý nhiều trình lắng nghe.
+
+## Các tính năng chính
+
+- **Hỗ trợ hai chiều** — Nền tảng cho cả `FigmaPluginMessenger` và `FigmaUiMessenger`.
+- **Xác minh tin nhắn** — Sử dụng `FigmaPostCode` để đảm bảo rằng tin nhắn bắt nguồn từ cùng một phiên bản plugin.
+- **Trình lắng nghe đa điểm** — Hỗ trợ nhiều callback cho một loại tin nhắn duy nhất.
+- **Chuỗi phương thức (Chaining)** — Các phương thức như `make` và `add` trả về `this`, cho phép khởi tạo ngắn gọn hơn.
+
+## Các phương thức công khai
+
+### `make`
+
+Khởi tạo trình lắng nghe tin nhắn. Phương thức này đảm bảo rằng việc thiết lập cụ thể cho môi trường (`prepare`) được thực hiện đúng một lần, bất kể `make` được gọi bao nhiêu lần.
+
+**Trả về:** `this`
+
+```javascript
+const messenger = new FigmaPluginMessenger().make()
+```
+
+### `add`
+
+Đăng ký một hàm callback để thực thi khi nhận được tin nhắn thuộc một loại cụ thể.
+
+**Tham số:**
+- `type: string` — Mã định danh duy nhất cho loại tin nhắn.
+- `callback: UiFigmaMessengerCallback<Message>` — Hàm sẽ gọi khi nhận được tin nhắn. Nhận dữ liệu tin nhắn làm đối số đầu tiên.
+- `once: boolean = false` — Nếu được đặt thành `true`, callback sẽ tự động bị xóa sau khi được gọi một lần.
+
+**Trả về:** `this`
+
+```javascript
+messenger
+  .add('update-selection', (data) => console.log('Selection:', data.count))
+  .add('init', (data) => console.log('Init:', data), true)
+  .add('close', () => figma.closePlugin())
+```
+
+### `remove`
+
+Xóa một hàm callback đã đăng ký trước đó cho một loại tin nhắn cụ thể.
+
+**Tham số:**
+- `type: string` — Mã định danh duy nhất cho loại tin nhắn.
+- `callback: UiFigmaMessengerCallback<Message>` — Hàm sẽ bị xóa khỏi các trình lắng nghe.
+
+**Trả về:** `this`
+
+```javascript
+const onUpdate = (data) => console.log('Selection:', data.count)
+
+messenger
+  .add('update-selection', onUpdate)
+  .remove('update-selection', onUpdate)
+```
+
+## Cấu trúc dữ liệu
+
+### `UiFigmaMessengerData`
+
+Cấu trúc của đối tượng dữ liệu được truyền qua đường truyền tin nhắn:
+
+- `code: string` — Mã xác minh từ `FigmaPostCode`.
+- `type: string` — Mã định danh của tin nhắn.
+- `message: Message` — Dữ liệu payload thực tế.

package/src/media/functional/figma/classes/FigmaPostCode/FigmaPostCode.en.mdx

@@ -0,0 +1,51 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/figma/Classes/FigmaPostCode - Message Verification'/>
+
+# FigmaPostCode Class
+
+A utility class for managing a unique verification code used for message integrity between the Figma plugin (backend) and its UI (frontend). This ensures that messages received by one side were indeed sent by the other side of the same plugin session.
+
+## Key Features
+
+- **Security** — Prevents cross-plugin message interference.
+- **Session Locking** — The code can only be set once per session, ensuring consistency.
+- **Auto-generation** — A random code is generated by default (e.g., `figma-123456`) if not set manually.
+
+## Static Methods
+
+### `is`
+
+Checks if the provided code matches the current post code.
+
+**Parameters:**
+- `code: string` — The verification code string to check.
+
+**Returns:** `boolean` — `true` if the code matches the internal session code.
+
+### `get`
+
+Returns the current post code used for message verification in the current session.
+
+**Returns:** `string`
+
+### `set`
+
+Sets a new post code. This method can only be successful once; once a code is set (or after the first access to `get`), the session is locked and the code can no longer be changed.
+
+**Parameters:**
+- `code: string` — The new code to be used for the remainder of the session.
+
+**Returns:** `void`
+
+## Recommendation
+
+For stable and unique verification, it is recommended to use the `id` from your plugin's `manifest.json`.
+
+```typescript
+import manifest from '../manifest.json'
+import { FigmaPostCode } from '@dxtmisha/figma'
+
+// Set the post code using the plugin's unique ID from manifest
+FigmaPostCode.set(manifest.id)
+```

package/src/media/functional/figma/classes/FigmaPostCode/FigmaPostCode.ru.mdx

@@ -0,0 +1,51 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/figma/Classes/FigmaPostCode - Проверка сообщений'/>
+
+# Класс FigmaPostCode
+
+Утилитарный класс для управления уникальным кодом верификации, используемым для обеспечения целостности сообщений между плагином Figma (backend) и его UI (frontend). Это гарантирует, что сообщения, полученные одной стороной, действительно были отправлены другой стороной той же сессии плагина.
+
+## Ключевые особенности
+
+- **Безопасность** — Предотвращает вмешательство сообщений от других плагинов.
+- **Блокировка сессии** — Код может быть установлен только один раз за сессию, что обеспечивает согласованность.
+- **Автогенерация** — По умолчанию генерируется случайный код (например, `figma-123456`), если он не установлен вручную.
+
+## Статические методы
+
+### `is`
+
+Проверяет, совпадает ли предоставленный код с текущим кодом сообщения.
+
+**Параметры:**
+- `code: string` — Строка проверочного кода для сверки с внутренним кодом сессии.
+
+**Возвращает:** `boolean` — `true`, если код совпадает.
+
+### `get`
+
+Возвращает текущий код сообщения, используемый для верификации в текущей сессии.
+
+**Возвращает:** `string`
+
+### `set`
+
+Устанавливает новый код сообщения. Этот метод может быть успешно выполнен только один раз; как только код установлен (или после первого обращения к `get`), сессия блокируется, и код больше не может быть изменен.
+
+**Параметры:**
+- `code: string` — Новое значение кода для использования в текущей сессии.
+
+**Возвращает:** `void`
+
+## Рекомендации
+
+Для обеспечения стабильной и уникальной верификации рекомендуется использовать `id` из вашего файла `manifest.json`.
+
+```typescript
+import manifest from '../manifest.json'
+import { FigmaPostCode } from '@dxtmisha/figma'
+
+// Установка кода верификации с использованием ID из манифеста
+FigmaPostCode.set(manifest.id)
+```

package/src/media/functional/figma/classes/FigmaPostCode/FigmaPostCode.vi.mdx

@@ -0,0 +1,51 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/figma/Classes/FigmaPostCode - Xác minh tin nhắn'/>
+
+# Lớp FigmaPostCode
+
+Lớp tiện ích để quản lý mã xác minh duy nhất được sử dụng cho tính toàn vẹn của tin nhắn giữa plugin Figma (backend) và UI (frontend). Điều này đảm bảo rằng các tin nhắn được nhận bởi một bên thực sự được gửi bởi bên kia của cùng một phiên plugin.
+
+## Các tính năng chính
+
+- **Bảo mật** — Ngăn chặn sự can thiệp tin nhắn giữa các plugin khác nhau.
+- **Khóa phiên** — Mã chỉ có thể được đặt một lần cho mỗi phiên, đảm bảo tính nhất quán.
+- **Tự động tạo** — Một mã ngẫu nhiên được tạo theo mặc định (ví dụ: `figma-123456`) nếu không được đặt thủ công.
+
+## Các phương thức tĩnh
+
+### `is`
+
+Kiểm tra xem mã được cung cấp có khớp với mã tin nhắn hiện tại hay không.
+
+**Tham số:**
+- `code: string` — Chuỗi mã xác minh để kiểm tra với mã phiên nội bộ.
+
+**Trả về:** `boolean` — `true` nếu mã khớp.
+
+### `get`
+
+Trả về mã tin nhắn hiện tại được sử dụng để xác minh trong phiên hiện tại.
+
+**Trả về:** `string`
+
+### `set`
+
+Đặt một mã tin nhắn mới. Phương thức này chỉ có thể thành công một lần; sau khi mã đã được đặt (hoặc sau lần truy cập đầu tiên vào `get`), phiên sẽ được khóa và mã không còn có thể thay đổi.
+
+**Tham số:**
+- `code: string` — Mã mới sẽ được sử dụng cho phần còn lại của phiên.
+
+**Trả về:** `void`
+
+## Khuyến nghị
+
+Để đảm bảo xác thực ổn định và duy nhất, bạn nên sử dụng trường `id` từ tệp `manifest.json` của plugin làm mã bảo mật.
+
+```typescript
+import manifest from '../manifest.json'
+import { FigmaPostCode } from '@dxtmisha/figma'
+
+// Thiết lập mã xác thực bằng ID duy nhất của plugin từ manifest
+FigmaPostCode.set(manifest.id)
+```

package/src/media/functional/figma/classes/FigmaUiMessenger/FigmaUiMessenger.en.mdx

@@ -0,0 +1,61 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/figma/Classes/FigmaUiMessenger - Frontend Messenger'/>
+
+# FigmaUiMessenger Class
+
+Messenger for the Figma UI side (frontend). It handles sending messages to the Figma plugin and listening for messages from the plugin using the browser's `postMessage` API.
+
+## Initialization
+
+Extends `FigmaPostAbstract`.
+
+```typescript
+import { FigmaUiMessenger } from '@dxtmisha/figma'
+
+const messenger = new FigmaUiMessenger()
+  .make()
+  .add('plugin-update', (data) => console.log('Plugin:', data))
+```
+
+## Public Methods
+
+### `make`
+
+Initializes the message listener using the `window` message event. Should be called once to start receiving messages from the plugin (backend).
+
+**Returns:** `this`
+
+```javascript
+messenger.make()
+```
+
+### `add`
+
+Registers a listener for a specific message type coming from the plugin (backend).
+
+**Parameters:**
+- `type: string` — Unique identifier for the message type to listen for.
+- `callback: (message: Message) => void` — function to execute when a matching message arrives from the plugin.
+
+**Returns:** `this`
+
+```javascript
+messenger.add('selection-changed', (data) => {
+  renderSidebar(data.nodes)
+})
+```
+
+### `post`
+
+Sends a message to the Figma plugin backend.
+
+**Parameters:**
+- `type: string` — The identifier of the message (type).
+- `message: Message` — (Optional) Data payload to send to the plugin.
+
+**Returns:** `void`
+
+```javascript
+messenger.post('create-rectangles', { count: 5, color: '#FF0000' })
+```

package/src/media/functional/figma/classes/FigmaUiMessenger/FigmaUiMessenger.ru.mdx

@@ -0,0 +1,61 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/figma/Classes/FigmaUiMessenger - Мессенджер UI'/>
+
+# Класс FigmaUiMessenger
+
+Мессенджер для стороны UI Figma (frontend). Обрабатывает отправку сообщений в плагин Figma и прослушивание сообщений из плагина, используя API браузера `postMessage`.
+
+## Инициализация
+
+Наследует `FigmaPostAbstract`.
+
+```typescript
+import { FigmaUiMessenger } from '@dxtmisha/figma'
+
+const messenger = new FigmaUiMessenger()
+  .make()
+  .add('plugin-update', (data) => console.log('Плагин:', data))
+```
+
+## Публичные методы
+
+### `make`
+
+Инициализирует слушатель сообщений, используя событие `message` объекта `window`. Должен быть вызван один раз для начала приема сообщений из плагина (backend).
+
+**Возвращает:** `this`
+
+```javascript
+messenger.make()
+```
+
+### `add`
+
+Регистрирует слушатель для определенного типа сообщения, поступающего из плагина (backend).
+
+**Параметры:**
+- `type: string` — Уникальный идентификатор типа сообщения для прослушивания.
+- `callback: (message: Message) => void` — функция, которую необходимо выполнить при получении соответствующего сообщения из плагина.
+
+**Возвращает:** `this`
+
+```javascript
+messenger.add('selection-changed', (data) => {
+  renderSidebar(data.nodes)
+})
+```
+
+### `post`
+
+Отправляет сообщение в плагин Figma.
+
+**Параметры:**
+- `type: string` — Идентификатор сообщения (тип).
+- `message: Message` — (Опционально) Полезные данные для отправки в плагин.
+
+**Возвращает:** `void`
+
+```javascript
+messenger.post('create-rectangles', { count: 5, color: '#FF0000' })
+```

package/src/media/functional/figma/classes/FigmaUiMessenger/FigmaUiMessenger.vi.mdx

@@ -0,0 +1,61 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/figma/Classes/FigmaUiMessenger - Trình nhắn tin UI'/>
+
+# Lớp FigmaUiMessenger
+
+Trình nhắn tin cho phía UI Figma (frontend). Nó xử lý việc gửi tin nhắn đến plugin Figma và lắng nghe tin nhắn từ plugin bằng API `postMessage` của trình duyệt.
+
+## Khởi tạo
+
+Kế thừa từ `FigmaPostAbstract`.
+
+```typescript
+import { FigmaUiMessenger } from '@dxtmisha/figma'
+
+const messenger = new FigmaUiMessenger()
+  .make()
+  .add('plugin-update', (data) => console.log('Plugin:', data))
+```
+
+## Các phương thức công khai
+
+### `make`
+
+Khởi tạo trình lắng nghe tin nhắn bằng sự kiện `message` của đối tượng `window`. Nên được gọi một lần để bắt đầu nhận tin nhắn từ plugin (backend).
+
+**Trả về:** `this`
+
+```javascript
+messenger.make()
+```
+
+### `add`
+
+Đăng ký một trình lắng nghe cho một loại tin nhắn cụ thể đến từ plugin (backend).
+
+**Tham số:**
+- `type: string` — Mã định danh duy nhất cho loại tin nhắn cần lắng nghe.
+- `callback: (message: Message) => void` — hàm sẽ thực thi khi có một tin nhắn phù hợp đến từ plugin.
+
+**Trả về:** `this`
+
+```javascript
+messenger.add('selection-changed', (data) => {
+  renderSidebar(data.nodes)
+})
+```
+
+### `post`
+
+Gửi một tin nhắn đến phía backend của plugin Figma.
+
+**Tham số:**
+- `type: string` — Mã định danh của tin nhắn (loại).
+- `message: Message` — (Tùy chọn) Dữ liệu payload để gửi đến plugin.
+
+**Trả về:** `void`
+
+```javascript
+messenger.post('create-rectangles', { count: 5, color: '#FF0000' })
+```

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

@@ -0,0 +1,30 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/figma/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'
+
+// 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')
+```