@dxtmisha/figma 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,30 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [0.1.0] - 2026-05-10
+
+### Added
+- **AI Prompt Generator**: Implemented a recursive AI prompt generator for advanced automation.
+- **Figma Styles Sync**: Added functionality to synchronize Figma styles directly with the project.
+- **Zip Export**: Implemented Zip archiving for exporting assets and styles.
+- **Unit Testing**: Added a comprehensive unit testing suite using Vitest.
+- **Documentation**: Integrated AI-assisted documentation metadata across the package.
+- **Figma Storage**: Implemented robust data storage mechanics within Figma (`useFigmaStorage`).
+- **Figma Messages**: Added `FigmaMessage` class for standardized event listening and messaging.
+- **Selection Logic**: Consolidated Figma frame selection logic and standardized messengers.
+- **Translation Support**: Added ability to use local texts in translations.
+- **Component Build**: Added `ComponentBuild.ts` for managing component construction.
+- **Image Utilities**: Added image processing functions: `resizeImageByMax`, `blobToBase64`, and `ensureMaxSize`.
+- **Top Level Frames**: Added `FigmaTopLevelFrames` and `useFigmaUiFrames` for UI frame management.
+
+### Changed / Improved
+- **Checkbox Design**: Refactored Checkbox design integration.
+- **Data Persistence**: Improved Figma data storage mechanics and callback handling (`StorageCallback`).
+- **Selection Mechanics**: Standardized frame selection logic across the plugin.
+- **Refactoring**: Consolidated messaging systems and selection logic for better maintainability.
+
+### Fixed
+- **Component Visibility**: Fixed component visibility issues for editors.
+- **Bug Fixes**: Addressed various minor bugs in frame selection and data storage.
+- Fixed type definition errors and improved TypeScript support.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 dxtmisha
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# @dxtmisha/figma

package/ai-description.txt

@@ -0,0 +1,5 @@
+This library provides a structured bidirectional messaging bridge between a Figma plugin's logic sandbox and its UI layer. It implements a subscription-based event bus via FigmaPostAbstract and FigmaUiMessenger, utilizing a verification code system through FigmaPostCode to validate and filter messages sent over the window.postMessage boundary.
+
+An AI should study this library when implementing Figma plugin features that require fetching document structure, frame hierarchies, selection states, or node styles. It is essential for managing Figma-specific storage persistence (ClientStorage and global storage) and for serializing Figma node data into JSON or CSS maps for UI rendering.
+
+The library functions as the communication middleware within a Figma plugin architecture, connecting the PluginAPI logic with frontend technologies. It provides a suite of utility functions—such as fetchTopLevelFrames, sendFrameStyles, and fetchClientStorage—that abstract raw messaging into a typed, asynchronous API based on pre-defined event signatures and response interfaces.

package/ai-doc.ru.txt

@@ -0,0 +1,11 @@
+ПАКЕТ СРЕДСТВ СВЯЗИ ДЛЯ UI FIGMA:
+Данная библиотека предназначена для упрощения взаимодействия между UI-частью плагина Figma (Frontend) и его фоновым процессом (Backend). Она предоставляет абстракции для обмена сообщениями и получения данных из Figma.
+
+1. ПРЕДНАЗНАЧЕНИЕ: Библиотека используется исключительно в UI-коде плагина Figma. Она реализует `FigmaUiMessenger` для отправки (`post`) и приема сообщений от плагина, а также функции для запроса данных о фреймах, стилях и хранилище.
+2. ТИПОВАЯ СТРУКТУРА: Весь обмен сообщениями завязан на защищенном коде (`FigmaPostCode`), который должен совпадать на обеих сторонах (UI и Code).
+3. ОСНОВНЫЕ ИНСТРУМЕНТЫ:
+   - `FigmaUiMessenger`: Синглтон для управления сообщениями на стороне UI.
+   - Функции `fetch...`: Обертки над сообщениями для асинхронного получения данных из Figma (например, `fetchFramesSelected`).
+
+Используй этот пакет при разработке визуальной части плагина для связи с API Figma через прослойку `figma-code`.
+

package/ai-doc.txt

@@ -0,0 +1,11 @@
+FIGMA UI COMMUNICATION PACKAGE:
+This library is designed to simplify the interaction between the UI part of a Figma plugin (Frontend) and its background process (Backend). It provides abstractions for messaging and retrieving data from Figma.
+
+1. PURPOSE: The library is used exclusively in the Figma plugin's UI code. It implements `FigmaUiMessenger` for sending (`post`) and receiving messages from the plugin, along with functions for requesting frames, styles, and storage data.
+2. SECURITY: All messaging is tied to a secure code (`FigmaPostCode`), which must match on both sides (UI and Code).
+3. KEY TOOLS:
+   - `FigmaUiMessenger`: A singleton for managing messages on the UI side.
+   - `fetch...` functions: Wrappers over messages for asynchronously retrieving data from Figma (e.g., `fetchFramesSelected`).
+
+Use this package when developing the visual part of a plugin to communicate with the Figma API via the `figma-code` layer.
+

package/ai-types.txt

@@ -0,0 +1,301 @@
+1) All these methods are in the @dxtmisha/figma library.
+2) Everything that is exported can be used.
+3) Use what is in this library if it exists; do not use other libraries if there is an analogue here. Do not create new ones if an analogue already exists here.
+
+The following is the content of "exports" from package.json:
+{
+  ".": {
+    "import": "./dist/library.js",
+    "types": "./dist/library.d.ts"
+  },
+  "./style.css": "./dist/style.css",
+  "./types/*": "./dist/*",
+  "./types/**/*.d.ts": "./dist/**/*.d.ts"
+}
+
+// File: classes/FigmaPostAbstract.d.ts
+/** Base class for Figma plugin-UI messaging. */
+export declare abstract class FigmaPostAbstract {
+    /**
+     * Sends message to the other side.
+     * @param type Message type
+     * @param message Message data
+     */
+    abstract post<Message>(type: string, message?: Message): void;
+    /**
+     * Adds listener for message type.
+     * @param type Message type
+     * @param callback Function called on receipt
+     * @param once Execute only once
+     */
+    add<Message>(type: string, callback: UiFigmaMessengerCallback<Message>, once?: boolean): this;
+    /**
+     * Removes listener for message type.
+     * @param type Message type
+     * @param callback Function to remove
+     */
+    remove<Message>(type: string, callback: UiFigmaMessengerCallback<Message>): this;
+    /** Initializes message listener. */
+    make(): this;
+}
+// File: classes/FigmaPostCode.d.ts
+/** Manages unique code for verifying Figma plugin-UI messages. */
+export declare class FigmaPostCode {
+    /**
+     * Checks if code matches current post code.
+     * @param code Code to check
+     */
+    static is(code: string): boolean;
+    /** Returns current post code. */
+    static get(): string;
+    /**
+     * Sets new post code. Callable once.
+     * @param code New code
+     */
+    static set(code: string): void;
+}
+// File: classes/FigmaUiMessenger.d.ts
+/** Messenger for Figma UI (frontend). */
+export declare class FigmaUiMessenger extends FigmaPostAbstract {
+    /**
+     * Gets instance for Figma UI messenger.
+     * @returns current instance
+     */
+    static getInstance(): FigmaUiMessenger;
+    /**
+     * Sends message to Figma plugin.
+     * @param type Message type
+     * @param message Message data
+     */
+    post<Message>(type: string, message?: Message): void;
+}
+// File: config.d.ts
+export declare const FIGMA_IMAGE_TYPE = "image/jpeg";
+/** Figma message type for texts */
+export declare const FIGMA_MESSAGE_TEXTS = "texts";
+// File: functions/fetchClientStorage.d.ts
+/**
+ * Fetch client storage data.
+ * @param name Storage name
+ * @param callback Callback function
+ * @param defaultValue Default value
+ * @param isOnce Call only once
+ */
+export declare function fetchClientStorage<T>(name: string, callback: (value: T) => void, defaultValue?: T, isOnce?: boolean): void;
+// File: functions/fetchFrameSelection.d.ts
+/**
+ * Fetch list of selected frames.
+ * @param callback Callback function
+ */
+export declare function fetchFrameSelection(callback: (value: UiFigmaFramesList) => void): void;
+// File: functions/fetchFrameStyles.d.ts
+/**
+ * Fetch styles for specified frames.
+ * @param callback Callback function
+ */
+export declare function fetchFrameStyles(callback: (value: UiFigmaFrameStylesMessengerResponse) => void): void;
+// File: functions/fetchFramesSelected.d.ts
+/**
+ * Fetches selected frames from Figma plugin.
+ * @param callback Function called on receipt
+ */
+export declare function fetchFramesSelected(callback: (selected: string[]) => void): void;
+// File: functions/fetchStorage.d.ts
+/**
+ * Fetch storage data.
+ * @param name Storage name
+ * @param callback Callback function
+ * @param id Storage id
+ * @param defaultValue Default value
+ * @param isOnce Call only once
+ */
+export declare function fetchStorage<T>(name: string, callback: (value: T) => void, id?: string, defaultValue?: T, isOnce?: boolean): void;
+// File: functions/fetchTopLevelFrames.d.ts
+/**
+ * Fetches top-level frames from Figma plugin.
+ * @param callback Function called on receipt
+ */
+export declare function fetchTopLevelFrames(callback: (frames: UiFigmaFramesList) => void): void;
+// File: functions/sendClientStorage.d.ts
+/**
+ * Sends client storage data to Figma plugin.
+ * @param name Storage name
+ * @param value Value to store
+ */
+export declare function sendClientStorage<T>(name: string, value: T): void;
+// File: functions/sendFrameSelection.d.ts
+/**
+ * Send selection frame to UI
+ * @param id Frame ID
+ */
+export declare function sendFrameSelection(id?: string): void;
+// File: functions/sendFrameStyles.d.ts
+/**
+ * Send request for frame styles.
+ * @param attributes Attributes for fetching styles
+ */
+export declare function sendFrameStyles(attributes: UiFigmaFrameStylesMessengerAttributes): void;
+// File: functions/sendFramesSelected.d.ts
+/**
+ * Sends selected frames to Figma plugin.
+ * @param id Frame ID
+ * @param selected Selection state
+ */
+export declare function sendFramesSelected(id: string, selected: boolean): void;
+// File: functions/sendStorage.d.ts
+/**
+ * Sends storage data to Figma plugin.
+ * @param name Storage name
+ * @param value Value to store
+ * @param id Object ID
+ */
+export declare function sendStorage<T>(name: string, value: T, id?: string): void;
+// File: library.d.ts
+export * from './classes/FigmaPostAbstract';
+export * from './classes/FigmaPostCode';
+export * from './classes/FigmaUiMessenger';
+export * from './functions/fetchClientStorage';
+export * from './functions/fetchFrameSelection';
+export * from './functions/fetchFrameStyles';
+export * from './functions/fetchFramesSelected';
+export * from './functions/fetchStorage';
+export * from './functions/fetchTopLevelFrames';
+export * from './functions/sendClientStorage';
+export * from './functions/sendFrameSelection';
+export * from './functions/sendFrameStyles';
+export * from './functions/sendFramesSelected';
+export * from './functions/sendStorage';
+export * from './types/figmaMessengerTypes';
+export * from './types/figmaStylesTypes';
+export * from './types/framesTypes';
+export * from './types/storageTypes';
+// File: types/figmaMessengerTypes.d.ts
+/** Message callback function type */
+export type UiFigmaMessengerCallback<Message = any> = (message: Message) => void;
+/** Item with callback and execution rule */
+export type UiFigmaMessengerCallbackItem<Message = any> = {
+    /** Callback function */
+    callback: UiFigmaMessengerCallback<Message>;
+    /** Rule for single execution */
+    once: boolean;
+};
+/** Stored message type and callbacks */
+export type UiFigmaMessengerItem = {
+    /** Message type */
+    type: string;
+    /** Registered callbacks */
+    callbackList: UiFigmaMessengerCallbackItem[];
+};
+/** Message items list */
+export type UiFigmaMessengerList = Record<string, UiFigmaMessengerItem>;
+/** Message data structure */
+export type UiFigmaMessengerData<Message = any> = {
+    /** Verification code */
+    code: string;
+    /** Message type */
+    type: string;
+    /** Message content */
+    message?: Message;
+};
+// File: types/figmaStylesTypes.d.ts
+/** CSS styles for a Figma element */
+export type UiFigmaFrameStylesCssItem = Record<string, string>;
+/** CSS styles list indexed by ID */
+export type UiFigmaFrameStylesCssList = Record<string, UiFigmaFrameStylesCssItem>;
+/** JSON structure for Figma frame style */
+export type UiFigmaFrameStylesJson = {
+    /** Node ID */
+    id: string;
+    /** Node name */
+    name: string;
+    /** Node type */
+    type?: string;
+    /** Text content */
+    characters?: string;
+    /** Style properties */
+    style?: Record<string, string | number | boolean>;
+    /** Map of style IDs */
+    styles?: Record<string, string>;
+    /** Child nodes */
+    children?: UiFigmaFrameStylesJson[];
+};
+/** Document tree and styles data */
+export type UiFigmaFrameStylesData = {
+    /** Document node tree */
+    document: UiFigmaFrameStylesJson;
+    /** Style definitions */
+    styles: Record<string, any>;
+};
+/** Figma frame style item */
+export type UiFigmaFrameStylesItem = UiFigmaFramesItem & {
+    /** Compact JSON data */
+    json?: UiFigmaFrameStylesData;
+    /** Text content */
+    text?: string;
+    /** CSS styles */
+    styles?: UiFigmaFrameStylesCssItem;
+    /** Map of children's CSS styles */
+    childrenStyles?: UiFigmaFrameStylesCssList;
+};
+/** Frame style items list */
+export type UiFigmaFrameStylesList = UiFigmaFrameStylesItem[];
+/** Messenger request attributes for frame styles */
+export type UiFigmaFrameStylesMessengerAttributes = {
+    /** List of IDs */
+    ids: string | string[];
+    /** Include child styles */
+    children?: boolean;
+};
+/** Messenger response item for frame styles */
+export type UiFigmaFrameStylesMessengerResponseItem = {
+    /** Node ID */
+    id: string;
+    /** Style data */
+    data: UiFigmaFrameStylesList;
+};
+/** Full messenger response for frame styles */
+export type UiFigmaFrameStylesMessengerResponse = UiFigmaFrameStylesMessengerResponseItem[];
+/** Event name for updating Figma frame styles */
+export declare const FIGMA_FRAME_STYLES_MESSENGER_NAME = "ui-figma-styles-update";
+// File: types/framesTypes.d.ts
+/** Simplified Figma frame item */
+export type UiFigmaFramesItem = {
+    /** Frame name */
+    name: string;
+    /** Unique element ID */
+    id: string;
+    /** Image as byte array or Base64 */
+    image?: Uint8Array<ArrayBufferLike> | string;
+};
+/** Frame items list */
+export type UiFigmaFramesList = UiFigmaFramesItem[];
+/** Message: send frame list */
+export declare const UI_MA_FRAMES_POST_NAME = "ui-figma-frames-list";
+/** Message: send selected frames */
+export declare const UI_FIGMA_FRAMES_SELECTED_POST_NAME = "ui-figma-frames-selected";
+/** Message: add frame to selection */
+export declare const UI_FIGMA_FRAMES_SELECTED_ADD_NAME = "ui-figma-frames-selected-add";
+/** Message: get frame selection */
+export declare const UI_FIGMA_FRAME_GET_SELECTION = "ui-figma-frame-get-selection";
+/** Message: set frame selection */
+export declare const UI_FIGMA_FRAME_SET_SELECTION = "ui-figma-frame-set-selection";
+/** Message: get client storage */
+export declare const UI_FIGMA_CLIENT_STORAGE_GET = "ui-figma-client-storage-get";
+/** Message: set client storage */
+export declare const UI_FIGMA_CLIENT_STORAGE_SET = "ui-figma-client-storage-set";
+/** Message: get storage */
+export declare const UI_FIGMA_STORAGE_GET = "ui-figma-storage-get";
+/** Message: set storage */
+export declare const UI_FIGMA_STORAGE_SET = "ui-figma-storage-set";
+// File: types/storageTypes.d.ts
+/** Client storage messenger data */
+export type ClientStorageMessengerData<T = any> = {
+    name: string;
+    value: T;
+};
+/** Storage messenger data */
+export type StorageMessengerData<T = any> = {
+    id?: string;
+    name: string;
+    value: T;
+};

package/dist/classes/FigmaPostAbstract.d.ts

@@ -0,0 +1,62 @@
+import { UiFigmaMessengerCallback, UiFigmaMessengerData, UiFigmaMessengerList } from '../types/figmaMessengerTypes';
+/**
+ * Base abstract class for managing messaging between the Figma plugin and UI.
+ *
+ * Базовый абстрактный класс для управления обменом сообщениями между плагином Figma и UI.
+ */
+export declare abstract class FigmaPostAbstract {
+    protected isMake: boolean;
+    protected readonly posts: UiFigmaMessengerList;
+    /**
+     * Sends a message to the other side.
+     *
+     * Отправляет сообщение на другую сторону.
+     * @param type The type of the message / Тип сообщения
+     * @param message The message data / Данные сообщения
+     */
+    abstract post<Message>(type: string, message?: Message): void;
+    /**
+     * Adds a callback listener for a specific message type.
+     *
+     * Добавляет колбэк-слушатель для определенного типа сообщения.
+     * @param type The type of the message / Тип сообщения
+     * @param callback The function to call when the message is received / Функция, вызываемая при получении сообщения
+     * @param once Whether the callback should only be called once / Вызывать ли колбэк только один раз
+     */
+    add<Message>(type: string, callback: UiFigmaMessengerCallback<Message>, once?: boolean): this;
+    /**
+     * Removes a callback listener for a specific message type.
+     *
+     * Удаляет колбэк-слушатель для определенного типа сообщения.
+     * @param type The type of the message / Тип сообщения
+     * @param callback The function to remove / Функция для удаления
+     */
+    remove<Message>(type: string, callback: UiFigmaMessengerCallback<Message>): this;
+    /**
+     * Initializes the message listener.
+     *
+     * Инициализирует слушатель сообщений.
+     */
+    make(): this;
+    /**
+     * Sets up the actual environment-specific message listener.
+     *
+     * Настраивает фактический слушатель сообщений, зависящий от среды.
+     */
+    protected abstract prepare(): void;
+    /**
+     * Notifies all registered listeners for a specific message type.
+     *
+     * Уведомляет всех зарегистрированных слушателей для определенного типа сообщения.
+     * @param type The type of the message / Тип сообщения
+     * @param message The message data / Данные сообщения
+     */
+    protected notify<Message>(type: string, message: Message): void;
+    /**
+     * Internal message handler that filters by post code and notifies listeners.
+     *
+     * Внутренний обработчик сообщений, который фильтрует по коду сообщения и уведомляет слушателей.
+     * @param data The received message data / Данные полученного сообщения
+     */
+    protected onMessage: (data?: UiFigmaMessengerData) => void;
+}

package/dist/classes/FigmaPostCode.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Class for managing the unique code used for verifying messages between the Figma plugin and UI.
+ *
+ * Класс для управления уникальным кодом, используемым для проверки сообщений между плагином Figma и UI.
+ */
+export declare class FigmaPostCode {
+    private static code;
+    private static isEditable;
+    /**
+     * Checks if the provided code matches the current post code.
+     *
+     * Проверяет, совпадает ли предоставленный код с текущим кодом сообщения.
+     * @param code The code to check / Проверяемый код
+     */
+    static is(code: string): boolean;
+    /**
+     * Returns the current post code.
+     *
+     * Возвращает текущий код сообщения.
+     */
+    static get(): string;
+    /**
+     * Sets a new post code. Can only be called once.
+     *
+     * Устанавливает новый код сообщения. Можно вызвать только один раз.
+     * @param code The new code to set / Новый код для установки
+     */
+    static set(code: string): void;
+}

package/dist/classes/FigmaUiMessenger.d.ts

@@ -0,0 +1,29 @@
+import { FigmaPostAbstract } from './FigmaPostAbstract';
+/**
+ * Messenger for the Figma UI side (frontend).
+ *
+ * Мессенджер для стороны UI Figma (frontend).
+ */
+export declare class FigmaUiMessenger extends FigmaPostAbstract {
+    /**
+     * Getting an instance of the class for working with Figma UI messenger (frontend).
+     *
+     * Получение экземпляра класса для работы с мессенджером UI Figma (frontend).
+     * @returns current instance/ текущий экземпляр
+     */
+    static getInstance(): FigmaUiMessenger;
+    /**
+     * Sends a message to the Figma plugin.
+     *
+     * Отправляет сообщение в плагин Figma.
+     * @param type The type of the message / Тип сообщения
+     * @param message The message data / Данные сообщения
+     */
+    post<Message>(type: string, message?: Message): void;
+    /**
+     * Initializes the listener using the window message event.
+     *
+     * Инициализирует слушатель, используя событие message объекта window.
+     */
+    protected prepare(): void;
+}

package/dist/config.d.ts

@@ -0,0 +1,3 @@
+export declare const FIGMA_IMAGE_TYPE = "image/jpeg";
+/** Figma message type for texts / Тип сообщения Figma для текстов */
+export declare const FIGMA_MESSAGE_TEXTS = "texts";

package/dist/functions/fetchClientStorage.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Fetch client storage data.
+ *
+ * Получить данные клиентского хранилища.
+ * @param name Storage name / Имя хранилища
+ * @param callback Callback function / Функция обратного вызова
+ * @param defaultValue Default value / Значение по умолчанию
+ * @param isOnce Call only once / Вызвать только один раз
+ */
+export declare function fetchClientStorage<T>(name: string, callback: (value: T) => void, defaultValue?: T, isOnce?: boolean): void;

package/dist/functions/fetchFrameSelection.d.ts

@@ -0,0 +1,8 @@
+import { UiFigmaFramesList } from '../types/framesTypes';
+/**
+ * Fetch the list of selected frames.
+ *
+ * Получить список выбранных фреймов.
+ * @param callback Callback function / Функция обратного вызова
+ */
+export declare function fetchFrameSelection(callback: (value: UiFigmaFramesList) => void): void;

package/dist/functions/fetchFrameStyles.d.ts

@@ -0,0 +1,8 @@
+import { UiFigmaFrameStylesMessengerResponse } from '../types/figmaStylesTypes';
+/**
+ * Fetch the styles for the specified frames.
+ *
+ * Получить стили для указанных фреймов.
+ * @param callback Callback function / Функция обратного вызова
+ */
+export declare function fetchFrameStyles(callback: (value: UiFigmaFrameStylesMessengerResponse) => void): void;

package/dist/functions/fetchFramesSelected.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Fetches the selected frames from the Figma plugin.
+ *
+ * Получает выбранные фреймы из плагина Figma.
+ * @param callback The function to call once the frames are received / Функция, вызываемая после получения выбранных фреймов
+ */
+export declare function fetchFramesSelected(callback: (selected: string[]) => void): void;

package/dist/functions/fetchStorage.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Fetch storage data.
+ *
+ * Получить данные хранилища.
+ * @param name Storage name / Имя хранилища
+ * @param callback Callback function / Функция обратного вызова
+ * @param id Storage id / Идентификатор хранилища
+ * @param defaultValue Default value / Значение по умолчанию
+ * @param isOnce Call only once / Вызвать только один раз
+ */
+export declare function fetchStorage<T>(name: string, callback: (value: T) => void, id?: string, defaultValue?: T, isOnce?: boolean): void;

package/dist/functions/fetchTopLevelFrames.d.ts

@@ -0,0 +1,8 @@
+import { UiFigmaFramesList } from '../types/framesTypes';
+/**
+ * Fetches the top-level frames from the Figma plugin.
+ *
+ * Получает фреймы верхнего уровня из плагина Figma.
+ * @param callback The function to call once the frames are received / Функция, вызываемая после получения фреймов
+ */
+export declare function fetchTopLevelFrames(callback: (frames: UiFigmaFramesList) => void): void;

package/dist/functions/sendClientStorage.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Sends the client storage data to the Figma plugin.
+ *
+ * Отправляет данные клиентского хранилища в плагин Figma.
+ * @param name The name of the storage / Название хранилища
+ * @param value The value to store / Значение для хранения
+ */
+export declare function sendClientStorage<T>(name: string, value: T): void;

package/dist/functions/sendFrameSelection.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Send selection frame to UI
+ *
+ * Отправка выделенного фрейма в UI
+ * @param id - Frame ID / ID фрейма
+ */
+export declare function sendFrameSelection(id?: string): void;

package/dist/functions/sendFrameStyles.d.ts

@@ -0,0 +1,8 @@
+import { UiFigmaFrameStylesMessengerAttributes } from '../types/figmaStylesTypes';
+/**
+ * Send request to get frame styles.
+ *
+ * Отправить запрос на получение стилей фреймов.
+ * @param attributes Attributes for fetching styles / Атрибуты для получения стилей
+ */
+export declare function sendFrameStyles(attributes: UiFigmaFrameStylesMessengerAttributes): void;

package/dist/functions/sendFramesSelected.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Sends the selected frames to the Figma plugin.
+ *
+ * Отправляет выбранные фреймы в плагин Figma.
+ * @param id The ID of the frame / Идентификатор фрейма
+ * @param selected The selection state of the frame / Состояние выбора фрейма
+ */
+export declare function sendFramesSelected(id: string, selected: boolean): void;

package/dist/functions/sendStorage.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Sends the storage data to the Figma plugin.
+ *
+ * Отправляет данные хранилища в плагин Figma.
+ * @param name The name of the storage / Название хранилища
+ * @param value The value to store / Значение для хранения
+ * @param id The ID of the object / Идентификатор объекта
+ */
+export declare function sendStorage<T>(name: string, value: T, id?: string): void;

package/dist/library.d.ts

@@ -0,0 +1,18 @@
+export * from './classes/FigmaPostAbstract';
+export * from './classes/FigmaPostCode';
+export * from './classes/FigmaUiMessenger';
+export * from './functions/fetchClientStorage';
+export * from './functions/fetchFrameSelection';
+export * from './functions/fetchFrameStyles';
+export * from './functions/fetchFramesSelected';
+export * from './functions/fetchStorage';
+export * from './functions/fetchTopLevelFrames';
+export * from './functions/sendClientStorage';
+export * from './functions/sendFrameSelection';
+export * from './functions/sendFrameStyles';
+export * from './functions/sendFramesSelected';
+export * from './functions/sendStorage';
+export * from './types/figmaMessengerTypes';
+export * from './types/figmaStylesTypes';
+export * from './types/framesTypes';
+export * from './types/storageTypes';

package/dist/library.js

@@ -0,0 +1,211 @@
+import { StorageCallback as e, random as t } from "@dxtmisha/functional-basic";
+//#region \0@oxc-project+runtime@0.128.0/helpers/typeof.js
+function n(e) {
+	"@babel/helpers - typeof";
+	return n = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(e) {
+		return typeof e;
+	} : function(e) {
+		return e && typeof Symbol == "function" && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
+	}, n(e);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.128.0/helpers/toPrimitive.js
+function r(e, t) {
+	if (n(e) != "object" || !e) return e;
+	var r = e[Symbol.toPrimitive];
+	if (r !== void 0) {
+		var i = r.call(e, t || "default");
+		if (n(i) != "object") return i;
+		throw TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return (t === "string" ? String : Number)(e);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.128.0/helpers/toPropertyKey.js
+function i(e) {
+	var t = r(e, "string");
+	return n(t) == "symbol" ? t : t + "";
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.128.0/helpers/defineProperty.js
+function a(e, t, n) {
+	return (t = i(t)) in e ? Object.defineProperty(e, t, {
+		value: n,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[t] = n, e;
+}
+//#endregion
+//#region src/classes/FigmaPostCode.ts
+var o = class {
+	static is(e) {
+		return this.code === e;
+	}
+	static get() {
+		return this.code;
+	}
+	static set(e) {
+		this.isEditable && (this.code = `figma-${e}`, this.isEditable = !1);
+	}
+};
+a(o, "code", `figma-${t(1e5, 999999)}`), a(o, "isEditable", !0);
+//#endregion
+//#region src/classes/FigmaPostAbstract.ts
+var s = class {
+	constructor() {
+		a(this, "isMake", !1), a(this, "posts", {}), a(this, "onMessage", (e) => {
+			e && o.is(e.code) && this.notify(e.type, e.message);
+		});
+	}
+	add(e, t, n = !1) {
+		return this.posts[e] || (this.posts[e] = {
+			type: e,
+			callbackList: []
+		}), this.posts[e].callbackList.push({
+			callback: t,
+			once: n
+		}), this;
+	}
+	remove(e, t) {
+		return this.posts[e] && (this.posts[e].callbackList = this.posts[e].callbackList.filter((e) => e.callback !== t)), this;
+	}
+	make() {
+		return this.isMake || (this.isMake = !0, this.prepare()), this;
+	}
+	notify(e, t) {
+		e in this.posts && this.posts[e].callbackList.forEach((n) => {
+			n.callback(t), n.once && this.remove(e, n.callback);
+		});
+	}
+}, c = class e extends s {
+	static getInstance() {
+		return l || (l = new e(), l.make(), l);
+	}
+	post(e, t) {
+		parent.postMessage({ pluginMessage: {
+			code: o.get(),
+			type: e,
+			message: t
+		} }, "*");
+	}
+	prepare() {
+		window.addEventListener("message", (e) => {
+			var t;
+			return this.onMessage((t = e.data) == null ? void 0 : t.pluginMessage);
+		});
+	}
+}, l, u = "ui-figma-frames-list", d = "ui-figma-frames-selected", f = "ui-figma-frames-selected-add", p = "ui-figma-frame-get-selection", m = "ui-figma-frame-set-selection", h = "ui-figma-client-storage-get", g = "ui-figma-client-storage-set", _ = "ui-figma-storage-get", v = "ui-figma-storage-set", y = !1;
+function b(e, t, n, r = !0) {
+	C();
+	let i = S(e);
+	i.addCallback(t, r), i.isLoading() || (i.preparation(), c.getInstance().post(h, {
+		name: e,
+		defaultValue: n
+	}));
+}
+var x = (e) => `figma:client-storage:${e}`, S = (t) => e.getInstance(x(t)), C = () => {
+	y || (y = !0, c.getInstance().add(h, (e) => {
+		S(e.name).run(e.value).then();
+	}));
+}, w = !1;
+function T(e) {
+	O();
+	let t = D();
+	t.addCallback(e), t.isLoading() || (t.preparation(), c.getInstance().post(p));
+}
+var E = () => "figma:frame-selection:get", D = () => e.getInstance(E()), O = () => {
+	w || (w = !0, c.getInstance().add(p, (e) => {
+		D().run(e);
+	}));
+}, k = "ui-figma-styles-update", A = !1;
+function j(e) {
+	P(), N().addCallback(e);
+}
+var M = () => "figma:frame-styles:get", N = () => e.getInstance(M()), P = () => {
+	A || (A = !0, c.getInstance().add(k, (e) => {
+		N().run(e).then();
+	}));
+}, F, I = !1;
+function L(e) {
+	if (F) {
+		e(F);
+		return;
+	}
+	if (I) {
+		setTimeout(() => L(e), 160);
+		return;
+	}
+	I = !0, c.getInstance().add(d, (t) => {
+		F = t, I = !1, e(F);
+	}).post(d);
+}
+//#endregion
+//#region src/functions/fetchStorage.ts
+var R = !1;
+function z(e, t, n, r, i = !0) {
+	H();
+	let a = V(e, n);
+	a.addCallback(t, i), a.isLoading() || (a.preparation(), c.getInstance().post(_, {
+		name: e,
+		id: n,
+		defaultValue: r
+	}));
+}
+var B = (e, t) => `figma:storage:${t ? `${e}:${t}` : e}`, V = (t, n) => e.getInstance(B(t, n)), H = () => {
+	R || (R = !0, c.getInstance().add(_, (e) => {
+		V(e.name, e.id).run(e.value);
+	}));
+}, U, W = !1;
+function G(e) {
+	if (U) {
+		e(U);
+		return;
+	}
+	if (W) {
+		setTimeout(() => G(e), 160);
+		return;
+	}
+	W = !0;
+	let t = c.getInstance(), n = (r) => {
+		U = r, U.length > 0 && (e(U), t.remove(u, n), W = !1);
+	};
+	t.add(u, n).post(u);
+}
+//#endregion
+//#region src/functions/sendClientStorage.ts
+function K(e, t) {
+	c.getInstance().post(g, {
+		name: e,
+		value: t
+	});
+}
+//#endregion
+//#region src/functions/sendFrameSelection.ts
+function q(e) {
+	c.getInstance().post(m, { id: e });
+}
+//#endregion
+//#region src/functions/sendFrameStyles.ts
+function J(e) {
+	c.getInstance().post(k, e);
+}
+//#endregion
+//#region src/functions/sendFramesSelected.ts
+function Y(e, t) {
+	c.getInstance().post(f, {
+		id: e,
+		selected: t
+	});
+}
+//#endregion
+//#region src/functions/sendStorage.ts
+function X(e, t, n) {
+	c.getInstance().post(v, {
+		name: e,
+		value: t,
+		id: n
+	});
+}
+//#endregion
+export { k as FIGMA_FRAME_STYLES_MESSENGER_NAME, s as FigmaPostAbstract, o as FigmaPostCode, c as FigmaUiMessenger, h as UI_FIGMA_CLIENT_STORAGE_GET, g as UI_FIGMA_CLIENT_STORAGE_SET, u as UI_FIGMA_FRAMES_POST_NAME, f as UI_FIGMA_FRAMES_SELECTED_ADD_NAME, d as UI_FIGMA_FRAMES_SELECTED_POST_NAME, p as UI_FIGMA_FRAME_GET_SELECTION, m as UI_FIGMA_FRAME_SET_SELECTION, _ as UI_FIGMA_STORAGE_GET, v as UI_FIGMA_STORAGE_SET, b as fetchClientStorage, T as fetchFrameSelection, j as fetchFrameStyles, L as fetchFramesSelected, z as fetchStorage, G as fetchTopLevelFrames, K as sendClientStorage, q as sendFrameSelection, J as sendFrameStyles, Y as sendFramesSelected, X as sendStorage };

package/dist/types/figmaMessengerTypes.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Type for the message callback function/
+ * Тип для функции обратного вызова сообщения
+ */
+export type UiFigmaMessengerCallback<Message = any> = (message: Message) => void;
+/**
+ * Item containing a callback and its execution rule/
+ * Элемент, содержащий функцию обратного вызова и правило её выполнения
+ */
+export type UiFigmaMessengerCallbackItem<Message = any> = {
+    /** Callback function / Функция обратного вызова */
+    callback: UiFigmaMessengerCallback<Message>;
+    /** Rule for single execution / Правило однократного выполнения */
+    once: boolean;
+};
+/**
+ * Structure for storing a message type and its associated callbacks/
+ * Структура для хранения типа сообщения и связанных с ним обратных вызовов
+ */
+export type UiFigmaMessengerItem = {
+    /** Message type / Тип сообщения */
+    type: string;
+    /** List of registered callbacks / Список зарегистрированных функций обратного вызова */
+    callbackList: UiFigmaMessengerCallbackItem[];
+};
+/**
+ * List of message items/
+ * Список элементов сообщений
+ */
+export type UiFigmaMessengerList = Record<string, UiFigmaMessengerItem>;
+/**
+ * Data structure for a message sent between the plugin and UI/
+ * Структура данных для сообщения, передаваемого между плагином и UI
+ */
+export type UiFigmaMessengerData<Message = any> = {
+    /** Verification code / Проверочный код */
+    code: string;
+    /** Message type / Тип сообщения */
+    type: string;
+    /** Message content / Содержимое сообщения */
+    message?: Message;
+};

package/dist/types/figmaStylesTypes.d.ts

@@ -0,0 +1,100 @@
+import { UiFigmaFramesItem } from './framesTypes';
+/**
+ * Type representing CSS styles for a Figma element.
+ *
+ * Тип, представляющий CSS-стили для элемента Figma.
+ */
+export type UiFigmaFrameStylesCssItem = Record<string, string>;
+/**
+ * List of CSS styles for multiple Figma elements, indexed by ID.
+ *
+ * Список CSS-стилей для нескольких элементов Figma, индексированный по ID.
+ */
+export type UiFigmaFrameStylesCssList = Record<string, UiFigmaFrameStylesCssItem>;
+/**
+ * JSON structure for Figma frame style data.
+ *
+ * JSON-структура для данных стиля фрейма Figma.
+ */
+export type UiFigmaFrameStylesJson = {
+    /** Node ID / Идентификатор узла */
+    id: string;
+    /** Node name / Имя узла */
+    name: string;
+    /** Node type / Тип узла */
+    type?: string;
+    /** Text content (for text nodes) / Текстовое содержимое (для текстовых узлов) */
+    characters?: string;
+    /** Style properties / Свойства стиля */
+    style?: Record<string, string | number | boolean>;
+    /** Map of style IDs / Карта идентификаторов стилей */
+    styles?: Record<string, string>;
+    /** Child nodes / Дочерние узлы */
+    children?: UiFigmaFrameStylesJson[];
+};
+/**
+ * Data structure containing Figma document tree and styles.
+ *
+ * Структура данных, содержащая дерево документа Figma и стили.
+ */
+export type UiFigmaFrameStylesData = {
+    /** Document node tree / Дерево узлов документа */
+    document: UiFigmaFrameStylesJson;
+    /** Style definitions / Определения стилей */
+    styles: Record<string, any>;
+};
+/**
+ * Represents a Figma frame style item, extending frame information.
+ *
+ * Представляет элемент стиля фрейма Figma, расширяющий информацию о фрейме.
+ */
+export type UiFigmaFrameStylesItem = UiFigmaFramesItem & {
+    /** Compact JSON data / Компактные данные JSON */
+    json?: UiFigmaFrameStylesData;
+    /** Text content / Текстовое содержимое */
+    text?: string;
+    /** CSS styles / CSS-стили */
+    styles?: UiFigmaFrameStylesCssItem;
+    /** Map of children's CSS styles / Карта CSS-стилей дочерних элементов */
+    childrenStyles?: UiFigmaFrameStylesCssList;
+};
+/**
+ * List of frame style items.
+ *
+ * Список элементов стиля фрейма.
+ */
+export type UiFigmaFrameStylesList = UiFigmaFrameStylesItem[];
+/**
+ * Attributes for the messenger request to update frame styles.
+ *
+ * Атрибуты для запроса через мессенджер на обновление стилей фреймов.
+ */
+export type UiFigmaFrameStylesMessengerAttributes = {
+    /** List of IDs / Список идентификаторов */
+    ids: string | string[];
+    /** Whether to include child styles / Включать ли стили дочерних элементов */
+    children?: boolean;
+};
+/**
+ * Item in the messenger response for frame styles.
+ *
+ * Элемент в ответе мессенджера для стилей фрейма.
+ */
+export type UiFigmaFrameStylesMessengerResponseItem = {
+    /** Node ID / Идентификатор узла */
+    id: string;
+    /** Style data / Данные стилей */
+    data: UiFigmaFrameStylesList;
+};
+/**
+ * Full response from the messenger for frame styles.
+ *
+ * Полный ответ от мессенджера для стилей фрейма.
+ */
+export type UiFigmaFrameStylesMessengerResponse = UiFigmaFrameStylesMessengerResponseItem[];
+/**
+ * Messenger event name for updating Figma frame styles.
+ *
+ * Имя события мессенджера для обновления стилей фреймов Figma.
+ */
+export declare const FIGMA_FRAME_STYLES_MESSENGER_NAME = "ui-figma-styles-update";

package/dist/types/framesTypes.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Represents a simplified Figma frame item for the UI/
+ * Представляет упрощенный элемент фрейма Figma для пользовательского интерфейса
+ */
+export type UiFigmaFramesItem = {
+    /** Name of the frame / Название фрейма */
+    name: string;
+    /** Unique element ID / Уникальный идентификатор элемента */
+    id: string;
+    /** Image as a byte array or Base64 string / Изображение в виде байтового массива или строки Base64 */
+    image?: Uint8Array<ArrayBufferLike> | string;
+};
+/**
+ * List of frame items/
+ * Список элементов фреймов
+ */
+export type UiFigmaFramesList = UiFigmaFramesItem[];
+/**
+ * Message name for sending the list of frames/
+ * Имя сообщения для отправки списка фреймов
+ */
+export declare const UI_FIGMA_FRAMES_POST_NAME = "ui-figma-frames-list";
+/**
+ * Message name for sending the selected frames/
+ * Имя сообщения для отправки выбранных фреймов
+ */
+export declare const UI_FIGMA_FRAMES_SELECTED_POST_NAME = "ui-figma-frames-selected";
+/**
+ * Message name for adding a frame to the selection/
+ * Имя сообщения для добавления фрейма в выборку
+ */
+export declare const UI_FIGMA_FRAMES_SELECTED_ADD_NAME = "ui-figma-frames-selected-add";
+/**
+ * Message name for getting the selection of frames/
+ * Имя сообщения для получения выборки фреймов
+ */
+export declare const UI_FIGMA_FRAME_GET_SELECTION = "ui-figma-frame-get-selection";
+/**
+ * Message name for setting the selection of frames/
+ * Имя сообщения для установки выборки фреймов
+ */
+export declare const UI_FIGMA_FRAME_SET_SELECTION = "ui-figma-frame-set-selection";
+/**
+ * Message name for getting the client storage/
+ * Имя сообщения для получения клиентского хранилища
+ */
+export declare const UI_FIGMA_CLIENT_STORAGE_GET = "ui-figma-client-storage-get";
+/**
+ * Message name for setting the client storage/
+ * Имя сообщения для установки клиентского хранилища
+ */
+export declare const UI_FIGMA_CLIENT_STORAGE_SET = "ui-figma-client-storage-set";
+/**
+ * Message name for getting the storage/
+ * Имя сообщения для получения хранилища
+ */
+export declare const UI_FIGMA_STORAGE_GET = "ui-figma-storage-get";
+/**
+ * Message name for setting the storage/
+ * Имя сообщения для установки хранилища
+ */
+export declare const UI_FIGMA_STORAGE_SET = "ui-figma-storage-set";

package/dist/types/storageTypes.d.ts

@@ -0,0 +1,11 @@
+/** Client storage messenger data/ Данные сообщения клиентского хранилища */
+export type ClientStorageMessengerData<T = any> = {
+    name: string;
+    value: T;
+};
+/** Storage messenger data/ Данные сообщения хранилища */
+export type StorageMessengerData<T = any> = {
+    id?: string;
+    name: string;
+    value: T;
+};

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@dxtmisha/figma",
+  "private": false,
+  "version": "0.1.0",
+  "type": "module",
+  "description": "[description]",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "library": "dxt-library",
+    "types": "dxt-types",
+    "prepublishOnly": "npm run library && npm run build",
+    "public-to-npm": "npm publish --access public"
+  },
+  "files": [
+    "dist",
+    "ai-description.txt",
+    "ai-doc.ru.txt",
+    "ai-doc.txt",
+    "ai-types.txt",
+    "CHANGELOG.md",
+    "LICENSE",
+    "package.json",
+    "README.md"
+  ],
+  "main": "dist/library.js",
+  "module": "dist/library.js",
+  "types": "dist/library.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/library.js",
+      "types": "./dist/library.d.ts"
+    },
+    "./style.css": "./dist/style.css",
+    "./types/*": "./dist/*",
+    "./types/**/*.d.ts": "./dist/**/*.d.ts"
+  },
+  "dependencies": {},
+  "devDependencies": {},
+  "sideEffects": false
+}