@dxtmisha/wiki 0.57.1 → 0.57.4

package/src/media/functional/figma-code/functions/makeFigmaFrameSelection/makeFigmaFrameSelection.vi.mdx

@@ -0,0 +1,21 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/figma-code/Functions/makeFigmaFrameSelection - Theo dõi vùng chọn'/>
+
+# `makeFigmaFrameSelection`
+
+Kích hoạt một trình lắng nghe toàn cục cho sự kiện `selectionchange` trong Figma. Được sử dụng để đồng bộ hóa trạng thái của các phần tử được chọn giữa sandbox Figma (Backend) và giao diện của plugin (Frontend).
+
+Hàm này được thiết kế để sử dụng trong mã code (Backend) của plugin Figma. Nó tự động đăng ký các thay đổi về vùng chọn của người dùng. Mỗi khi vùng chọn thay đổi, dữ liệu về các phần tử được chọn (bao gồm tên, ID và ảnh chụp màn hình JPG) sẽ được thu thập và gửi đến Giao diện Người dùng (UI) thông qua `FigmaPluginMessenger`. Điều này giúp loại bỏ việc phải thiết lập các trình lắng nghe sự kiện thủ công và xử lý xuất hình ảnh cho từng đối tượng được chọn.
+
+**Trả về:**
+`void`
+
+## Ví dụ
+
+```typescript
+import { makeFigmaFrameSelection } from '@dxtmisha/figma-code'
+
+// Khởi tạo trong mã plugin (Backend)
+makeFigmaFrameSelection()
+```

package/src/media/functional/figma-code/functions/makeFigmaTexts/makeFigmaTexts.en.mdx

@@ -0,0 +1,28 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/figma-code/Functions/makeFigmaTexts - Track text elements'/>
+
+# `makeFigmaTexts`
+
+A utility for automating the tracking of selection changes in Figma. It sets up a global `selectionchange` event listener that collects text element data and screenshots of the current page, sending this information to the plugin's UI.
+
+**Parameters:**
+None.
+
+**Returns:**
+`void`
+
+## Examples
+
+<Source
+  language='typescript'
+  code={`
+import { makeFigmaTexts } from '@dxtmisha/figma-code'
+
+// Initialization in the main part of the plugin (typically code.ts)
+makeFigmaTexts()
+
+// Now, every time the user changes the selection, 
+// the UI will receive updated text data and screenshots.
+  `}
+/>

package/src/media/functional/figma-code/functions/makeFigmaTexts/makeFigmaTexts.ru.mdx

@@ -0,0 +1,28 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/figma-code/Functions/makeFigmaTexts - Отслеживание текстовых элементов'/>
+
+# `makeFigmaTexts`
+
+Утилита для автоматизации процесса отслеживания изменений выделения в Figma. Она настраивает глобальный слушатель события `selectionchange`, который при каждом срабатывании собирает данные о текстовых элементах и скриншоты текущей страницы, отправляя их в интерфейс (UI) плагина.
+
+**Параметры:**
+Отсутствуют.
+
+**Возвращает:**
+`void`
+
+## Примеры
+
+<Source
+  language='typescript'
+  code={`
+import { makeFigmaTexts } from '@dxtmisha/figma-code'
+
+// Инициализация в основной части плагина (обычно в code.ts)
+makeFigmaTexts()
+
+// Теперь при каждом изменении выделения пользователем, 
+// UI будет получать обновленные данные о текстах и скриншоты.
+  `}
+/>

package/src/media/functional/figma-code/functions/makeFigmaTexts/makeFigmaTexts.vi.mdx

@@ -0,0 +1,28 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/figma-code/Functions/makeFigmaTexts - Theo dõi các phần tử văn bản'/>
+
+# `makeFigmaTexts`
+
+Một tiện ích để tự động hóa quá trình theo dõi các thay đổi lựa chọn trong Figma. Nó thiết lập một trình lắng nghe sự kiện `selectionchange` toàn cục, mỗi khi được kích hoạt sẽ thu thập dữ liệu về các phần tử văn bản và ảnh chụp màn hình của trang hiện tại, sau đó gửi thông tin này đến giao diện người dùng (UI) của plugin.
+
+**Tham số:**
+Không có.
+
+**Trả về:**
+`void`
+
+## Ví dụ
+
+<Source
+  language='typescript'
+  code={`
+import { makeFigmaTexts } from '@dxtmisha/figma-code'
+
+// Khởi tạo trong phần chính của plugin (thường là code.ts)
+makeFigmaTexts()
+
+// Giờ đây, mỗi khi người dùng thay đổi lựa chọn, 
+// UI sẽ nhận được dữ liệu văn bản và ảnh chụp màn hình cập nhật.
+  `}
+/>

package/src/media/functional/figma-code/functions/setupClientStorage/setupClientStorage.en.mdx

@@ -0,0 +1,28 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/figma-code/Functions/setupClientStorage - Setup client storage handlers'/>
+
+# `setupClientStorage`
+
+A utility for setting up request handlers for Figma's client storage. it connects UI requests (GET/SET) with the actual read and write operations on the plugin side.
+
+**Parameters:**
+None.
+
+**Returns:**
+`void`
+
+## Examples
+
+<Source
+  language='typescript'
+  code={`
+import { setupClientStorage } from '@dxtmisha/figma-code'
+
+// Initialization in the main part of the plugin (typically code.ts)
+setupClientStorage()
+
+// Now the UI can use fetchClientStorage and sendClientStorage 
+// to interact with Figma's clientStorage.
+  `}
+/>

package/src/media/functional/figma-code/functions/setupClientStorage/setupClientStorage.ru.mdx

@@ -0,0 +1,28 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/figma-code/Functions/setupClientStorage - Настройка обработчиков клиентского хранилища'/>
+
+# `setupClientStorage`
+
+Утилита для настройки обработчиков запросов к клиентскому хранилищу Figma (`clientStorage`). Она связывает запросы из интерфейса (UI) на чтение и запись данных с фактическими операциями в основной части плагина.
+
+**Параметры:**
+Отсутствуют.
+
+**Возвращает:**
+`void`
+
+## Примеры
+
+<Source
+  language='typescript'
+  code={`
+import { setupClientStorage } from '@dxtmisha/figma-code'
+
+// Инициализация в основной части плагина (обычно в code.ts)
+setupClientStorage()
+
+// Теперь UI может использовать fetchClientStorage и sendClientStorage 
+// для взаимодействия с хранилищем Figma.
+  `}
+/>

package/src/media/functional/figma-code/functions/setupClientStorage/setupClientStorage.vi.mdx

@@ -0,0 +1,28 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/figma-code/Functions/setupClientStorage - Thiết lập các trình xử lý bộ nhớ client'/>
+
+# `setupClientStorage`
+
+Một tiện ích để thiết lập các trình xử lý yêu cầu cho bộ nhớ client (`clientStorage`) của Figma. Nó kết nối các yêu cầu từ giao diện người dùng (GET/SET) với các hoạt động đọc và ghi thực tế ở phía plugin.
+
+**Tham số:**
+Không có.
+
+**Trả về:**
+`void`
+
+## Ví dụ
+
+<Source
+  language='typescript'
+  code={`
+import { setupClientStorage } from '@dxtmisha/figma-code'
+
+// Khởi tạo trong phần chính của plugin (thường là code.ts)
+setupClientStorage()
+
+// Bây giờ UI có thể sử dụng fetchClientStorage và sendClientStorage 
+// để tương tác với clientStorage của Figma.
+  `}
+/>

package/src/media/functional/figma-code/functions/setupFrameSelection/setupFrameSelection.en.mdx

@@ -0,0 +1,22 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/figma-code/Functions/setupFrameSelection - Setup bidirectional selection'/>
+
+# `setupFrameSelection`
+
+Sets up bidirectional frame selection management between the Figma backend and the plugin UI. This single function handles both automatic tracking of what the user is currently looking at and programmatic selection from the interface.
+
+1.  **Selection Tracking** — Automatically calls `makeFigmaFrameSelection()`, which starts observing user selection changes in Figma and sends detailed data (names, IDs, screenshots) to the UI.
+2.  **Remote Control** — Registers a listener for the `UI_FIGMA_FRAME_SET_SELECTION` message. When the UI sends this message with an ID, the backend finds the object, selects it, and zooms the viewport to focus on it.
+
+**Returns:**
+`void`
+
+## Examples
+
+```typescript
+import { setupFrameSelection } from '@dxtmisha/figma-code'
+
+// Call this during plugin backend initialization
+setupFrameSelection()
+```

package/src/media/functional/figma-code/functions/setupFrameSelection/setupFrameSelection.ru.mdx

@@ -0,0 +1,22 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/figma-code/Functions/setupFrameSelection - Настройка двустороннего выделения'/>
+
+# `setupFrameSelection`
+
+Настраивает двустороннее управление выделением фреймов между бэкендом Figma и интерфейсом плагина. Эта одна функция отвечает как за автоматическое отслеживание текущего выделения пользователя, так и за программное выделение объектов из интерфейса.
+
+1.  **Отслеживание выделения** — Автоматически вызывает `makeFigmaFrameSelection()`, которая начинает наблюдать за изменениями выделения в Figma и отправляет подробные данные (имена, ID, скриншоты) в UI.
+2.  **Дистанционное управление** — Регистрирует слушатель сообщения `UI_FIGMA_FRAME_SET_SELECTION`. Когда UI отправляет это сообщение с ID объекта, бэкенд находит его, выделяет и фокусирует камеру на нем.
+
+**Возвращает:**
+`void`
+
+## Примеры
+
+```typescript
+import { setupFrameSelection } from '@dxtmisha/figma-code'
+
+// Вызовите это при инициализации бэкенда плагина
+setupFrameSelection()
+```

package/src/media/functional/figma-code/functions/setupFrameSelection/setupFrameSelection.vi.mdx

@@ -0,0 +1,22 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/figma-code/Functions/setupFrameSelection - Thiết lập vùng chọn hai chiều'/>
+
+# `setupFrameSelection`
+
+Thiết lập quản lý vùng chọn frame hai chiều giữa backend Figma và UI của plugin. Hàm duy nhất này xử lý cả việc tự động theo dõi những gì người dùng hiện đang xem và chọn các phần tử theo chương trình từ giao diện.
+
+1.  **Theo dõi vùng chọn** — Tự động gọi `makeFigmaFrameSelection()`, bắt đầu quan sát các thay đổi vùng chọn của người dùng trong Figma và gửi dữ liệu chi tiết (tên, ID, ảnh chụp màn hình) đến UI.
+2.  **Điều khiển từ xa** — Đăng ký trình lắng nghe cho tin nhắn `UI_FIGMA_FRAME_SET_SELECTION`. Khi UI gửi tin nhắn này kèm theo ID, backend sẽ tìm đối tượng, chọn nó và thu phóng viewport để tập trung vào nó.
+
+**Trả về:**
+`void`
+
+## Ví dụ
+
+```typescript
+import { setupFrameSelection } from '@dxtmisha/figma-code'
+
+// Gọi hàm này trong quá trình khởi tạo backend của plugin
+setupFrameSelection()
+```

package/src/media/functional/figma-code/functions/setupFrameStyles/setupFrameStyles.en.mdx

@@ -0,0 +1,19 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/figma-code/Functions/setupFrameStyles - Handling style requests'/>
+
+# `setupFrameStyles`
+
+Initializes a handler for retrieving extended data about frame styles.
+
+**Returns:**
+`void`
+
+## Examples
+
+```typescript
+import { setupFrameStyles } from '@dxtmisha/figma-code'
+
+// Initialization in the plugin's Backend code
+setupFrameStyles()
+```

package/src/media/functional/figma-code/functions/setupFrameStyles/setupFrameStyles.ru.mdx

@@ -0,0 +1,19 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/figma-code/Functions/setupFrameStyles - Обработка запросов стилей'/>
+
+# `setupFrameStyles`
+
+Инициализирует обработчик для получения расширенных данных о стилях фреймов.
+
+**Возвращает:**
+`void`
+
+## Примеры
+
+```typescript
+import { setupFrameStyles } from '@dxtmisha/figma-code'
+
+// Инициализация в Backend коде плагина
+setupFrameStyles()
+```

package/src/media/functional/figma-code/functions/setupFrameStyles/setupFrameStyles.vi.mdx

@@ -0,0 +1,19 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/figma-code/Functions/setupFrameStyles - Xử lý yêu cầu style'/>
+
+# `setupFrameStyles`
+
+Khởi tạo trình xử lý để truy xuất dữ liệu mở rộng về style của frame.
+
+**Trả về:**
+`void`
+
+## Ví dụ
+
+```typescript
+import { setupFrameStyles } from '@dxtmisha/figma-code'
+
+// Khởi tạo trong mã Backend của plugin
+setupFrameStyles()
+```

package/src/media/functional/figma-code/functions/setupStorage/setupStorage.en.mdx

@@ -0,0 +1,28 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/figma-code/Functions/setupStorage - Setup shared storage handlers'/>
+
+# `setupStorage`
+
+A utility for setting up request handlers for Figma's shared storage. It connects UI requests (GET/SET) with the actual read and write operations in the plugin, supporting optional object identifiers (e.g., node IDs).
+
+**Parameters:**
+None.
+
+**Returns:**
+`void`
+
+## Examples
+
+<Source
+  language='typescript'
+  code={`
+import { setupStorage } from '@dxtmisha/figma-code'
+
+// Initialization in the main part of the plugin (typically code.ts)
+setupStorage()
+
+// Now the UI can use fetchStorage and sendStorage 
+// to interact with Figma's shared storage.
+  `}
+/>

package/src/media/functional/figma-code/functions/setupStorage/setupStorage.ru.mdx

@@ -0,0 +1,28 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/figma-code/Functions/setupStorage - Настройка обработчиков общего хранилища'/>
+
+# `setupStorage`
+
+Утилита для настройки обработчиков запросов к общему хранилищу Figma. Она связывает запросы из интерфейса (UI) на чтение и запись данных с фактическими операциями в плагине, поддерживая привязку к конкретным идентификаторам объектов (например, ID нод).
+
+**Параметры:**
+Отсутствуют.
+
+**Возвращает:**
+`void`
+
+## Примеры
+
+<Source
+  language='typescript'
+  code={`
+import { setupStorage } from '@dxtmisha/figma-code'
+
+// Инициализация в основной части плагина (обычно в code.ts)
+setupStorage()
+
+// Теперь UI может использовать fetchStorage и sendStorage 
+// для взаимодействия с общим хранилищем Figma.
+  `}
+/>

package/src/media/functional/figma-code/functions/setupStorage/setupStorage.vi.mdx

@@ -0,0 +1,28 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/figma-code/Functions/setupStorage - Thiết lập các trình xử lý bộ nhớ chung'/>
+
+# `setupStorage`
+
+Một tiện ích để thiết lập các trình xử lý yêu cầu cho bộ nhớ chung của Figma. Nó kết nối các yêu cầu từ giao diện người dùng (GET/SET) với các hoạt động đọc và ghi thực tế trong plugin, hỗ trợ các định danh đối tượng tùy chọn (ví dụ: ID của node).
+
+**Tham số:**
+Không có.
+
+**Trả về:**
+`void`
+
+## Ví dụ
+
+<Source
+  language='typescript'
+  code={`
+import { setupStorage } from '@dxtmisha/figma-code'
+
+// Khởi tạo trong phần chính của plugin (thường là code.ts)
+setupStorage()
+
+// Bây giờ UI có thể sử dụng fetchStorage và sendStorage 
+// để tương tác với bộ nhớ chung của Figma.
+  `}
+/>

package/src/media/functional/figma-code/functions/toFrameSelection/toFrameSelection.en.mdx

@@ -0,0 +1,27 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/figma-code/Functions/toFrameSelection - Select and focus frame'/>
+
+# `toFrameSelection`
+
+An asynchronous utility that finds a Figma node by its ID, moves the viewport to it, and selects it. If the node is on a different page, it automatically switches to that page.
+
+**Parameters:**
+- `id?: string` — (Optional) The identifier (ID) of the node to select.
+
+**Returns:**
+`Promise<void>`
+
+## Examples
+
+<Source
+  language='typescript'
+  code={`
+import { toFrameSelection } from '@dxtmisha/figma-code'
+
+async function jumpToElement(nodeId: string) {
+  await toFrameSelection(nodeId)
+  console.log('Viewport moved and node selected')
+}
+  `}
+/>

package/src/media/functional/figma-code/functions/toFrameSelection/toFrameSelection.ru.mdx

@@ -0,0 +1,27 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/figma-code/Functions/toFrameSelection - Выделение и фокус на фрейме'/>
+
+# `toFrameSelection`
+
+Асинхронная утилита, которая находит узел Figma по его ID, перемещает к нему вьюпорт и выделяет его. Если узел находится на другой странице, функция автоматически переключит текущую страницу.
+
+**Параметры:**
+- `id?: string` — (Опционально) Идентификатор (ID) узла для выделения.
+
+**Возвращает:**
+`Promise<void>`
+
+## Примеры
+
+<Source
+  language='typescript'
+  code={`
+import { toFrameSelection } from '@dxtmisha/figma-code'
+
+async function jumpToElement(nodeId: string) {
+  await toFrameSelection(nodeId)
+  console.log('Вид перемещен и узел выделен')
+}
+  `}
+/>

package/src/media/functional/figma-code/functions/toFrameSelection/toFrameSelection.vi.mdx

@@ -0,0 +1,27 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/figma-code/Functions/toFrameSelection - Chọn và tập trung vào frame'/>
+
+# `toFrameSelection`
+
+Một tiện ích bất đồng bộ giúp tìm một node Figma bằng ID của nó, di chuyển khung nhìn (viewport) đến đó và chọn nó. Nếu node nằm ở một trang khác, nó sẽ tự động chuyển sang trang đó.
+
+**Tham số:**
+- `id?: string` — (Tùy chọn) Định danh (ID) của node cần chọn.
+
+**Trả về:**
+`Promise<void>`
+
+## Ví dụ
+
+<Source
+  language='typescript'
+  code={`
+import { toFrameSelection } from '@dxtmisha/figma-code'
+
+async function jumpToElement(nodeId: string) {
+  await toFrameSelection(nodeId)
+  console.log('Đã di chuyển khung nhìn và chọn node')
+}
+  `}
+/>

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

@@ -0,0 +1,26 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/figma-ref/Composables/useFigmaClientStorage - Client storage management'/>
+
+# `useFigmaClientStorage`
+
+A reactive wrapper for Figma's client storage. It synchronizes a Vue `shallowRef` with the plugin's `clientStorage`, allowing for persistent data storage on the user's machine with automatic updates.
+
+**Parameters:**
+- `name: string` — The key name in the client storage.
+- `defaultValue?: T` — The default value if no data is found in storage.
+
+**Returns:**
+- `item: Ref<T | undefined>` — A reactive reference to the stored value.
+- `loading: Ref<boolean>` — A reactive boolean indicating if the initial fetch is in progress.
+
+## Usage Example
+
+```typescript
+import { useFigmaClientStorage } from '@dxtmisha/figma-ref'
+
+const { item: theme, loading } = useFigmaClientStorage('app-theme', 'light')
+
+// Updates to theme.value are automatically saved to Figma's clientStorage
+theme.value = 'dark'
+```

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

@@ -0,0 +1,26 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/figma-ref/Composables/useFigmaClientStorage - Управление клиентским хранилищем'/>
+
+# `useFigmaClientStorage`
+
+Реактивная обертка для клиентского хранилища Figma. Она синхронизирует Vue `shallowRef` с `clientStorage` плагина, обеспечивая постоянное хранение данных на машине пользователя с автоматическим обновлением.
+
+**Параметры:**
+- `name: string` — название ключа в клиентском хранилище.
+- `defaultValue?: T` — значение по умолчанию, если в хранилище ничего не найдено.
+
+**Возвращает:**
+- `item: Ref<T | undefined>` — реактивная ссылка на сохраненное значение.
+- `loading: Ref<boolean>` — реактивный флаг, указывающий на процесс первичного получения данных.
+
+## Пример использования
+
+```typescript
+import { useFigmaClientStorage } from '@dxtmisha/figma-ref'
+
+const { item: theme, loading } = useFigmaClientStorage('app-theme', 'light')
+
+// Изменения theme.value автоматически сохраняются в clientStorage Figma
+theme.value = 'dark'
+```

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

@@ -0,0 +1,26 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/figma-ref/Composables/useFigmaClientStorage - Quản lý bộ nhớ client'/>
+
+# `useFigmaClientStorage`
+
+Một lớp bọc phản hồi cho bộ nhớ client của Figma. Nó đồng bộ hóa một Vue `shallowRef` với `clientStorage` của plugin, cho phép lưu trữ dữ liệu bền vững trên máy tính của người dùng với các cập nhật tự động.
+
+**Tham số:**
+- `name: string` — Tên khóa trong bộ nhớ client.
+- `defaultValue?: T` — Giá trị mặc định nếu không tìm thấy dữ liệu trong bộ nhớ.
+
+**Trả về:**
+- `item: Ref<T | undefined>` — Một tham chiếu phản hồi đến giá trị được lưu trữ.
+- `loading: Ref<boolean>` — Một giá trị logic phản hồi cho biết liệu quá trình lấy dữ liệu ban đầu có đang diễn ra hay không.
+
+## Ví dụ sử dụng
+
+```typescript
+import { useFigmaClientStorage } from '@dxtmisha/figma-ref'
+
+const { item: theme, loading } = useFigmaClientStorage('app-theme', 'light')
+
+// Các cập nhật cho theme.value sẽ tự động được lưu vào clientStorage của Figma
+theme.value = 'dark'
+```

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

@@ -0,0 +1,35 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/figma-ref/Composables/useFigmaFrameSelection - Observing frame selection (full info)'/>
+
+# `useFigmaFrameSelection`
+
+A composable for retrieving and observing the detailed list of frames currently selected in Figma. Unlike `useFigmaUiSelected` (which only manages IDs in the UI), this composable provides full information about the selection, including names and screenshots, by listening to Figma's `selectionchange` events.
+
+**Returns:**
+- `selection: ComputedRef<UiFigmaFramesList>` — A computed reference to the list of selected frames (names, IDs, and screenshots).
+- `setSelection(id: string): void` — A method to programmatically change the selection in Figma to a specific element.
+- `loading: ComputedRef<boolean>` — A reactive flag indicating if the selection data is being fetched.
+
+## Usage Example
+
+```typescript
+import { useFigmaFrameSelection } from '@dxtmisha/figma-ref'
+
+const { selection, setSelection, loading } = useFigmaFrameSelection()
+
+// 'selection' updates whenever the user changes their selection in Figma
+// 'setSelection' can be used to programmatically change the selection:
+setSelection('12:34')
+```
+
+## Data Types
+
+#### `UiFigmaFramesItem`
+Represents a simplified frame element for the UI.
+- `name: string` — The name of the frame.
+- `id: string` — The unique identifier of the element.
+- `image: Uint8Array | string` — The image of the frame (optional).
+
+#### `UiFigmaFramesList`
+A list of `UiFigmaFramesItem` objects.

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

@@ -0,0 +1,35 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/figma-ref/Composables/useFigmaFrameSelection - Наблюдение за выделением фреймов (полная инфо)'/>
+
+# `useFigmaFrameSelection`
+
+Composable для получения и наблюдения за подробным списком фреймов, выделенных в данный момент в Figma. В отличие от `useFigmaUiSelected` (который управляет только ID в интерфейсе), этот composable предоставляет полную информацию о выделении, включая имена и скриншоты, подписываясь на события `selectionchange` в Figma.
+
+**Возвращает:**
+- `selection: ComputedRef<UiFigmaFramesList>` — вычисляемая ссылка на список выделенных фреймов (имена, ID и скриншоты).
+- `setSelection(id: string): void` — метод для программной смены выделения в Figma на конкретный элемент.
+- `loading: ComputedRef<boolean>` — реактивный флаг, указывающий на процесс получения данных о выделении.
+
+## Пример использования
+
+```typescript
+import { useFigmaFrameSelection } from '@dxtmisha/figma-ref'
+
+const { selection, setSelection, loading } = useFigmaFrameSelection()
+
+// 'selection' обновляется каждый раз, когда пользователь меняет выделение в Figma
+// 'setSelection' можно использовать для программного изменения выделения:
+setSelection('12:34')
+```
+
+## Типы данных
+
+#### `UiFigmaFramesItem`
+Представляет упрощенный элемент фрейма для пользовательского интерфейса.
+- `name: string` — Название фрейма.
+- `id: string` — Уникальный идентификатор элемента.
+- `image: Uint8Array | string` — Изображение фрейма (опционально).
+
+#### `UiFigmaFramesList`
+Список объектов типа `UiFigmaFramesItem`.