Penpot:
  overview: |-
    Interface Penpot
    ================

    These are methods and properties available on the `penpot` global object.

    ```
    interface Penpot {
        ui: {
            open: (
                name: string,
                url: string,
                options?: { width: number; height: number; hidden?: boolean },
            ) => void;
            size: { width: number; height: number } | null;
            resize: (width: number, height: number) => void;
            sendMessage: (message: unknown, throwOnError?: boolean) => void;
            onMessage: <T>(callback: (message: T) => void) => void;
        };
        utils: ContextUtils;
        closePlugin: () => void;
        on<T extends keyof EventsMap>(
            type: T,
            callback: (event: EventsMap[T]) => void,
            props?: { [key: string]: unknown },
        ): symbol;
        off(listenerId: symbol): void;
        version: string;
        root: Shape | null;
        currentFile: File | null;
        currentPage: Page | null;
        viewport: Viewport;
        flags: Flags;
        history: HistoryContext;
        library: LibraryContext;
        fonts: FontsContext;
        currentUser: User;
        activeUsers: ActiveUser[];
        theme: Theme;
        localStorage: LocalStorage;
        selection: Shape[];
        shapesColors(shapes: Shape[]): (Color & ColorShapeInfo)[];
        replaceColor(shapes: Shape[], oldColor: Color, newColor: Color): void;
        uploadMediaUrl(name: string, url: string): Promise<ImageData>;
        uploadMediaData(
            name: string,
            data: Uint8Array,
            mimeType: string,
        ): Promise<ImageData>;
        group(shapes: Shape[]): Group | null;
        ungroup(group: Group, ...other: Group[]): void;
        createRectangle(): Rectangle;
        createBoard(): Board;
        createEllipse(): Ellipse;
        createPath(): Path;
        createBoolean(boolType: BooleanType, shapes: Shape[]): Boolean | null;
        createShapeFromSvg(svgString: string): Group | null;
        createShapeFromSvgWithImages(svgString: string): Promise<Group | null>;
        createText(text: string): Text | null;
        generateMarkup(
            shapes: Shape[],
            options?: { type?: "html" | "svg" },
        ): string;
        generateStyle(
            shapes: Shape[],
            options?: {
                type?: "css";
                withPrelude?: boolean;
                includeChildren?: boolean;
            },
        ): string;
        generateFontFaces(shapes: Shape[]): Promise<string>;
        openViewer(): void;
        createPage(): Page;
        openPage(page: string | Page, newWindow?: boolean): Promise<void>;
        alignHorizontal(
            shapes: Shape[],
            direction: "center" | "left" | "right",
        ): void;
        alignVertical(
            shapes: Shape[],
            direction: "center" | "top" | "bottom",
        ): void;
        distributeHorizontal(shapes: Shape[]): void;
        distributeVertical(shapes: Shape[]): void;
        flatten(shapes: Shape[]): Path[];
        createVariantFromComponents(shapes: Board[]): VariantContainer;
    }
    ```

    Hierarchy

    * Omit<Context, "addListener" | "removeListener">
      + Penpot
  members:
    Properties:
      ui: |-
        ```
        readonly ui: {
            open: (
                name: string,
                url: string,
                options?: { width: number; height: number; hidden?: boolean },
            ) => void;
            size: { width: number; height: number } | null;
            resize: (width: number, height: number) => void;
            sendMessage: (message: unknown, throwOnError?: boolean) => void;
            onMessage: <T>(callback: (message: T) => void) => void;
        }
        ```

        Type Declaration

        * open: (    name: string,    url: string,    options?: { width: number; height: number; hidden?: boolean },) => void

          Opens the plugin UI. It is possible to develop a plugin without interface (see Palette color example) but if you need, the way to open this UI is using `penpot.ui.open`.
          There is a minimum and maximum size for this modal and a default size but it's possible to customize it anyway with the options parameter.

          Example
          ```
          penpot.ui.open('Plugin name', 'url', {width: 150, height: 300});
          ```
        * size: { width: number; height: number } | null

          The current size of the modal, or `null` if the plugin UI is not open.

          Example
          ```
          const size = penpot.ui.size;console.log(size);
          ```
        * resize: (width: number, height: number) => void

          Resizes the plugin UI.

          Example
          ```
          penpot.ui.resize(300, 400);
          ```
        * sendMessage: (message: unknown, throwOnError?: boolean) => void

          Sends a message to the plugin UI.

          Example
          ```
          penpot.ui.sendMessage({ type: 'example-type', content: 'data we want to share' });
          ```
        * onMessage: <T>(callback: (message: T) => void) => void

          This is usually used in the `plugin.ts` file in order to handle the messages sent from the plugin UI.

          Example
          ```
          penpot.ui.onMessage((message) => { if (message.type === 'example-type') { ...do something } });
          ```
      utils: |-
        ```
        readonly utils: ContextUtils
        ```

        Provides access to utility functions and context-specific operations.
      closePlugin: |-
        ```
        closePlugin: () => void
        ```

        Closes the plugin. When this method is called the UI will be closed.

        Example
        ```
        penpot.closePlugin();
        ```
      version: |-
        ```
        readonly version: string
        ```

        Returns the current penpot version.
      root: |-
        ```
        readonly root: Shape | null
        ```

        The root shape in the current Penpot context. Requires `content:read` permission.

        Example
        ```
        const rootShape = context.root;console.log(rootShape);
        ```
      currentFile: |-
        ```
        readonly currentFile: File | null
        ```

        Retrieves file data from the current Penpot context. Requires `content:read` permission.

        Returns

        Returns the file data or `null` if no file is available.

        Example
        ```
        const fileData = context.currentFile;console.log(fileData);
        ```
      currentPage: |-
        ```
        readonly currentPage: Page | null
        ```

        The current page in the Penpot context. Requires `content:read` permission.

        Example
        ```
        const currentPage = context.currentPage;console.log(currentPage);
        ```
      viewport: |-
        ```
        readonly viewport: Viewport
        ```

        The viewport settings in the Penpot context.

        Example
        ```
        const viewportSettings = context.viewport;console.log(viewportSettings);
        ```
      flags: |-
        ```
        readonly flags: Flags
        ```

        Provides flags to customize the API behavior.
      history: |-
        ```
        readonly history: HistoryContext
        ```

        Context encapsulating the history operations

        Example
        ```
        const historyContext = context.history;console.log(historyContext);
        ```
      library: |-
        ```
        readonly library: LibraryContext
        ```

        The library context in the Penpot context, including both local and connected libraries. Requires `library:read` permission.

        Example
        ```
        const libraryContext = context.library;console.log(libraryContext);
        ```
      fonts: |-
        ```
        readonly fonts: FontsContext
        ```

        The fonts context in the Penpot context, providing methods to manage fonts. Requires `content:read` permission.

        Example
        ```
        const fontsContext = context.fonts;console.log(fontsContext);
        ```
      currentUser: |-
        ```
        readonly currentUser: User
        ```

        The current user in the Penpot context. Requires `user:read` permission.

        Example
        ```
        const currentUser = context.currentUser;console.log(currentUser);
        ```
      activeUsers: |-
        ```
        readonly activeUsers: ActiveUser[]
        ```

        An array of active users in the Penpot context. Requires `user:read` permission.

        Example
        ```
        const activeUsers = context.activeUsers;console.log(activeUsers);
        ```
      theme: |-
        ```
        readonly theme: Theme
        ```

        The current theme (light or dark) in Penpot.

        Example
        ```
        const currentTheme = context.theme;console.log(currentTheme);
        ```
      localStorage: |-
        ```
        readonly localStorage: LocalStorage
        ```

        Access to the localStorage proxy
      selection: |-
        ```
        selection: Shape[]
        ```

        The currently selected shapes in Penpot. Requires `content:read` permission.

        Example
        ```
        const selectedShapes = context.selection;console.log(selectedShapes);
        ```
    Methods:
      on: |-
        ```
        on<T extends keyof EventsMap>(
            type: T,
            callback: (event: EventsMap[T]) => void,
            props?: { [key: string]: unknown },
        ): symbol
        ```

        Adds an event listener for the specified event type.
        Subscribing to events requires `content:read` permission.

        The following are the possible event types:

        * pagechange: event emitted when the current page changes. The callback will receive the new page.
        * shapechange: event emitted when the shape changes. This event requires to send inside the `props` object the shape
          that will be observed. For example:

        ```
        // Observe the current selected shapepenpot.on('shapechange', (shape) => console.log(shape.name), { shapeId: penpot.selection[0].id });
        ```

        * selectionchange: event emitted when the current selection changes. The callback will receive the list of ids for the new selection
        * themechange: event emitted when the user changes its theme. The callback will receive the new theme (currently: either `dark` or `light`)
        * filechange: event emitted when a different file is opened. The callback will receive the new file.
        * contentsave: event emitted after the file content is saved in the backend. The callback receives no arguments.
        * finish: event emitted when the current file is closed. The callback will receive the id of the closed file.

        Type Parameters

        * T extends keyof EventsMap

        Parameters

        * type: T

          The event type to listen for.
        * callback: (event: EventsMap[T]) => void

          The callback function to execute when the event is triggered.
        * props: { [key: string]: unknown }

          The properties for the current event handler. Only makes sense for specific events.

        Returns symbol

        the listener id that can be used to call `off` and cancel the listener

        Example
        ```
        penpot.on('pagechange', () => {...do something});
        ```
      off: |-
        ```
        off(listenerId: symbol): void
        ```

        Removes an event listener for the specified event type.

        Parameters

        * listenerId: symbol

          the id returned by the `on` method when the callback was set

        Returns void

        Example
        ```
        const listenerId = penpot.on('contentsave', () => console.log("Changed"));penpot.off(listenerId);
        ```
      shapesColors: |-
        ```
        shapesColors(shapes: Shape[]): (Color & ColorShapeInfo)[]
        ```

        Retrieves colors applied to the given shapes in Penpot. Requires `content:read` permission.

        Parameters

        * shapes: Shape[]

        Returns (Color & ColorShapeInfo)[]

        Returns an array of colors and their shape information.

        Example
        ```
        const colors = context.shapesColors(shapes);console.log(colors);
        ```
      replaceColor: |-
        ```
        replaceColor(shapes: Shape[], oldColor: Color, newColor: Color): void
        ```

        Replaces a specified old color with a new color in the given shapes. Requires `content:write` permission.

        Parameters

        * shapes: Shape[]
        * oldColor: Color
        * newColor: Color

        Returns void

        Example
        ```
        context.replaceColor(shapes, oldColor, newColor);
        ```
      uploadMediaUrl: |-
        ```
        uploadMediaUrl(name: string, url: string): Promise<ImageData>
        ```

        Uploads media to Penpot and retrieves its image data. Requires `content:write` permission.

        Parameters

        * name: string

          The name of the media.
        * url: string

          The URL of the media to be uploaded.

        Returns Promise<ImageData>

        Returns a promise that resolves to the image data of the uploaded media.

        Example
        ```
        const imageData = await context.uploadMediaUrl('example', 'https://example.com/image.jpg');console.log(imageData);// to insert the image in a shape we can doconst board = penpot.createBoard();const shape = penpot.createRectangle();board.appendChild(shape);shape.fills = [{ fillOpacity: 1, fillImage: imageData }];
        ```
      uploadMediaData: |-
        ```
        uploadMediaData(
            name: string,
            data: Uint8Array,
            mimeType: string,
        ): Promise<ImageData>
        ```

        Uploads media to penpot and retrieves the image data. Requires `content:write` permission.

        Parameters

        * name: string

          The name of the media.
        * data: Uint8Array

          The image content data
        * mimeType: string

        Returns Promise<ImageData>

        Returns a promise that resolves to the image data of the uploaded media.

        Example
        ```
        const imageData = await context.uploadMediaData('example', imageData, 'image/jpeg');console.log(imageData);
        ```
      group: |-
        ```
        group(shapes: Shape[]): Group | null
        ```

        Groups the specified shapes. Requires `content:write` permission.

        Parameters

        * shapes: Shape[]

          An array of shapes to group.

        Returns Group | null

        Returns the newly created group or `null` if the group could not be created.

        Example
        ```
        const penpotShapesArray = penpot.selection;penpot.group(penpotShapesArray);
        ```
      ungroup: |-
        ```
        ungroup(group: Group, ...other: Group[]): void
        ```

        Ungroups the specified group. Requires `content:write` permission.

        Parameters

        * group: Group

          The group to ungroup.
        * ...other: Group[]

          Additional groups to ungroup.

        Returns void

        Example
        ```
        const penpotShapesArray = penpot.selection;// We need to make sure that something is selected, and that the selected shape is a groupif (penpotShapesArray.length && penpot.utils.types.isGroup(penpotShapesArray[0])) {  penpot.ungroup(penpotShapesArray[0]);}
        ```
      createRectangle: |-
        ```
        createRectangle(): Rectangle
        ```

        Use this method to create the shape of a rectangle. Requires `content:write` permission.

        Returns Rectangle

        Example
        ```
        const shape = penpot.createRectangle();// just change the values like thisshape.name = "Example rectangle";// for solid colorshape.fills = [{ fillColor: "#7EFFF5" }];// for linear gradient colorshape.fills = [{ fillColorGradient: {   "type": "linear",   "startX": 0.5,   "startY": 0,   "endX": 0.5,   "endY": 1,   "width": 1,   "stops": [     {       "color": "#003ae9",       "opacity": 1,       "offset": 0     },     {       "color": "#003ae9",       "opacity": 0,       "offset": 1     }   ] }}];// for a image fillconst imageData = await context.uploadMediaUrl('example', 'https://example.com/image.jpg');shape.fills = [{ fillOpacity: 1, fillImage: imageData }];shape.borderRadius = 8;shape.strokes = [ {   strokeColor: "#2e3434",   strokeStyle: "solid",   strokeWidth: 2,   strokeAlignment: "center", },];
        ```
      createBoard: |-
        ```
        createBoard(): Board
        ```

        Use this method to create a board. This is the first step before anything else, the container. Requires `content:write` permission.
        Then you can add a gridlayout, flexlayout or add a shape inside the board.
        Just a heads-up: board is a board in Penpot UI.

        Returns Board

        Example
        ```
        const board = penpot.createBoard();// to add grid layoutboard.addGridLayout();// to add flex layoutboard.addFlexLayout();// to create a shape inside the boardconst shape = penpot.createRectangle();board.appendChild(shape);
        ```
      createEllipse: |-
        ```
        createEllipse(): Ellipse
        ```

        Use this method to create the shape of an ellipse. Requires `content:write` permission.

        Returns Ellipse

        Example
        ```
        const shape = penpot.createEllipse();// just change the values like thisshape.name = "Example ellipse";// for solid colorshape.fills = [{ fillColor: "#7EFFF5" }];// for linear gradient colorshape.fills = [{ fillColorGradient: {   "type": "linear",   "startX": 0.5,   "startY": 0,   "endX": 0.5,   "endY": 1,   "width": 1,   "stops": [     {       "color": "#003ae9",       "opacity": 1,       "offset": 0     },     {       "color": "#003ae9",       "opacity": 0,       "offset": 1     }   ] }}];// for an image fillconst imageData = await context.uploadMediaUrl('example', 'https://example.com/image.jpg');shape.fills = [{ fillOpacity: 1, fillImage: imageData }];shape.strokes = [ {   strokeColor: "#2e3434",   strokeStyle: "solid",   strokeWidth: 2,   strokeAlignment: "center", },];
        ```
      createPath: |-
        ```
        createPath(): Path
        ```

        Use this method to create a path. Requires `content:write` permission.

        Returns Path

        Example
        ```
        const path = penpot.createPath();path.name = "My path";// for solid colorpath.fills = [{ fillColor: "#7EFFF5" }];
        ```
      createBoolean: |-
        ```
        createBoolean(boolType: BooleanType, shapes: Shape[]): Boolean | null
        ```

        Creates a Boolean shape based on the specified boolean operation and shapes. Requires `content:write` permission.

        Parameters

        * boolType: BooleanType

          The type of boolean operation ('union', 'difference', 'exclude', 'intersection').
        * shapes: Shape[]

          An array of shapes to perform the boolean operation on.

        Returns Boolean | null

        Returns the newly created Boolean shape resulting from the boolean operation.

        Example
        ```
        const booleanShape = context.createBoolean('union', [shape1, shape2]);
        ```
      createShapeFromSvg: |-
        ```
        createShapeFromSvg(svgString: string): Group | null
        ```

        Creates a Group from an SVG string. Requires `content:write` permission.

        Parameters

        * svgString: string

          The SVG string representing the shapes to be converted into a group.

        Returns Group | null

        Returns the newly created Group containing the shapes from the SVG.

        Example
        ```
        const svgGroup = context.createShapeFromSvg('<svg>...</svg>');
        ```
      createShapeFromSvgWithImages: |-
        ```
        createShapeFromSvgWithImages(svgString: string): Promise<Group | null>
        ```

        Creates a Group from an SVG string. The SVG can have images and the method returns
        a Promise because the shape will be available after all images are uploaded.
        Requires `content:write` permission.

        Parameters

        * svgString: string

          The SVG string representing the shapes to be converted into a group.

        Returns Promise<Group | null>

        Returns a promise with the newly created Group containing the shapes from the SVG.

        Example
        ```
        const svgGroup = await context.createShapeFromSvgWithImages('<svg>...</svg>');
        ```
      createText: |-
        ```
        createText(text: string): Text | null
        ```

        Creates a Text shape with the specified text content. Requires `content:write` permission.

        Parameters

        * text: string

          The text content for the Text shape. Must be a non-empty string.

        Returns Text | null

        Returns the new created shape. Returns null if an empty string is provided or the shape couldn't be created.

        Example
        ```
        const board = penpot.createBoard();let text;text = penpot.createText();// just change the values like thistext.growType = 'auto-height';text.fontFamily = 'Work Sans';text.fontSize = '12';text.fills = [{fillColor: '#9f05ff', fillOpacity: 1}];text.strokes = [{strokeOpacity: 1, strokeStyle: 'solid', strokeWidth: 2, strokeColor: '#deabff', strokeAlignment: 'outer'}];board.appendChild(text);
        ```
      generateMarkup: |-
        ```
        generateMarkup(shapes: Shape[], options?: { type?: "html" | "svg" }): string
        ```

        Generates markup for the given shapes. Requires `content:read` permission

        Parameters

        * shapes: Shape[]

          the shapes to generate the markup for
        * options: { type?: "html" | "svg" }

          `type` of the markup to generate. Defaults to `'html'`.

        Returns string

        Example
        ```
        const markup = context.generateMarkup(shapes, { type: 'html' });console.log(markup);
        ```
      generateStyle: |-
        ```
        generateStyle(
            shapes: Shape[],
            options?: {
                type?: "css";
                withPrelude?: boolean;
                includeChildren?: boolean;
            },
        ): string
        ```

        Generates styles for the given shapes. Requires `content:read` permission

        Parameters

        * shapes: Shape[]

          the shapes to generate the styles for
        * options: { type?: "css"; withPrelude?: boolean; includeChildren?: boolean }

          `type` of the styles to generate (defaults to `'css'`), `withPrelude` to include the style prelude
          (defaults to `false`) and `includeChildren` to also generate the styles for the shape children (defaults to `true`).

        Returns string

        Example
        ```
        const styles = context.generateStyle(shapes, { type: 'css' });console.log(styles);
        ```
      generateFontFaces: |-
        ```
        generateFontFaces(shapes: Shape[]): Promise<string>
        ```

        Generates the fontfaces styles necessaries to render the shapes.
        Requires `content:read` permission

        Parameters

        * shapes: Shape[]

        Returns Promise<string>

        Example
        ```
        const fontfaces = context.generateFontFaces(penpot.selection);console.log(fontfaces);
        ```
      openViewer: |-
        ```
        openViewer(): void
        ```

        Opens the viewer section. Requires `content:read` permission.

        Returns void
      createPage: |-
        ```
        createPage(): Page
        ```

        Creates a new page and returns it. Requires `content:write` permission.

        IMPORTANT: creating a page does **not** make it the active page.
        To build content inside the new page, activate it first with
        Context.openPage (and `await` it) before mutate shapes:

        Returns Page

        Example
        ```
        const page = penpot.createPage();page.name = 'New Page';await penpot.openPage(page); // make the new page active firstconst board = penpot.createBoard();board.resize(375, 812);page.root.appendChild(board);
        ```
      openPage: |-
        ```
        openPage(page: string | Page, newWindow?: boolean): Promise<void>
        ```

        Changes the current open page to the given page, making it the **active page**.
        The active page is the one all shape creation and structural operations
        (`createBoard`, `appendChild`, `insertChild`, property setters, etc.) act upon,
        so call this (and `await` it) after Context.createPage before adding
        shapes to the newly created page. Requires `content:read` permission.

        Parameters

        * page: string | Page

          the page to open (a Page object or a page UUID string)
        * newWindow: boolean

          if true opens the page in a new window, defaults to false

        Returns Promise<void>

        Example
        ```
        await context.openPage(page);
        ```
      alignHorizontal: |-
        ```
        alignHorizontal(shapes: Shape[], direction: "center" | "left" | "right"): void
        ```

        Aligning will move all the selected layers to a position relative to one
        of them in the horizontal direction.

        Parameters

        * shapes: Shape[]

          to align
        * direction: "center" | "left" | "right"

          where the shapes will be aligned

        Returns void
      alignVertical: |-
        ```
        alignVertical(shapes: Shape[], direction: "center" | "top" | "bottom"): void
        ```

        Aligning will move all the selected layers to a position relative to one
        of them in the vertical direction.

        Parameters

        * shapes: Shape[]

          to align
        * direction: "center" | "top" | "bottom"

          where the shapes will be aligned

        Returns void
      distributeHorizontal: |-
        ```
        distributeHorizontal(shapes: Shape[]): void
        ```

        Distributing objects to position them horizontally with equal distances between them.

        Parameters

        * shapes: Shape[]

          to distribute

        Returns void
      distributeVertical: |-
        ```
        distributeVertical(shapes: Shape[]): void
        ```

        Distributing objects to position them vertically with equal distances between them.

        Parameters

        * shapes: Shape[]

          to distribute

        Returns void
      flatten: |-
        ```
        flatten(shapes: Shape[]): Path[]
        ```

        Converts the shapes into Paths. If the shapes are complex will put together
        all its paths into one.

        Parameters

        * shapes: Shape[]

          to flatten

        Returns Path[]
      createVariantFromComponents: |-
        ```
        createVariantFromComponents(shapes: Board[]): VariantContainer
        ```

        Combine several standard Components into a VariantComponent. Similar to doing it
        with the contextual menu on the Penpot interface.
        All the shapes passed as arguments should be main instances.

        Parameters

        * shapes: Board[]

          A list of main instances of the components to combine.

        Returns VariantContainer

        The variant container created
ActiveUser:
  overview: |-
    Interface ActiveUser
    ====================

    Represents an active user in Penpot, extending the `User` interface.
    This interface includes additional properties specific to active users.

    ```
    interface ActiveUser {
        position?: { x: number; y: number };
        zoom?: number;
        id: string;
        name?: string;
        avatarUrl?: string;
        color: string;
        sessionId?: string;
    }
    ```

    Hierarchy (View Summary)

    * User
      + ActiveUser

    Referenced by: Context, Penpot
  members:
    Properties:
      position: |-
        ```
        position?: { x: number; y: number }
        ```

        The position of the active user.

        Example
        ```
        const userPosition = activeUser.position;console.log(userPosition);
        ```
      zoom: |-
        ```
        readonly zoom?: number
        ```

        The zoom level of the active user.

        Example
        ```
        const userZoom = activeUser.zoom;console.log(userZoom);
        ```
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier of the user.

        Example
        ```
        const userId = user.id;console.log(userId);
        ```
      name: |-
        ```
        readonly name?: string
        ```

        The name of the user.

        Example
        ```
        const userName = user.name;console.log(userName);
        ```
      avatarUrl: |-
        ```
        readonly avatarUrl?: string
        ```

        The URL of the user's avatar image.

        Example
        ```
        const avatarUrl = user.avatarUrl;console.log(avatarUrl);
        ```
      color: |-
        ```
        readonly color: string
        ```

        The color associated with the user.

        Example
        ```
        const userColor = user.color;console.log(userColor);
        ```
      sessionId: |-
        ```
        readonly sessionId?: string
        ```

        The session ID of the user.

        Example
        ```
        const sessionId = user.sessionId;console.log(sessionId);
        ```
Blur:
  overview: |-
    Interface Blur
    ==============

    Represents blur properties in Penpot.
    This interface includes properties for defining the type and intensity of a blur effect, along with its visibility.

    ```
    interface Blur {
        id?: string;
        value?: number;
        hidden?: boolean;
    }
    ```

    Referenced by: Board, Boolean, Ellipse, Group, Image, Path, Rectangle, ShapeBase, SvgRaw, Text, VariantContainer
  members:
    Properties:
      id: |-
        ```
        id?: string
        ```

        The optional unique identifier for the blur effect.
      value: |-
        ```
        value?: number
        ```

        The optional intensity value of the blur effect.
      hidden: |-
        ```
        hidden?: boolean
        ```

        Specifies whether the blur effect is hidden.
        Defaults to false if omitted.
Board:
  overview: |-
    Interface Board
    ===============

    Represents a board in Penpot.
    This interface extends `ShapeBase` and includes properties and methods specific to board.

    ```
    interface Board {
        type: "board";
        clipContent: boolean;
        showInViewMode: boolean;
        grid?: GridLayout;
        flex?: FlexLayout;
        guides: Guide[];
        rulerGuides: RulerGuide[];
        horizontalSizing?: "auto" | "fix";
        verticalSizing?: "auto" | "fix";
        fills: Fill[];
        children: Shape[];
        appendChild(child: Shape): void;
        insertChild(index: number, child: Shape): void;
        addFlexLayout(): FlexLayout;
        addGridLayout(): GridLayout;
        addRulerGuide(
            orientation: RulerGuideOrientation,
            value: number,
        ): RulerGuide;
        removeRulerGuide(guide: RulerGuide): void;
        isVariantContainer(): boolean;
        getPluginData(key: string): string;
        setPluginData(key: string, value: string): void;
        getPluginDataKeys(): string[];
        getSharedPluginData(namespace: string, key: string): string;
        setSharedPluginData(namespace: string, key: string, value: string): void;
        getSharedPluginDataKeys(namespace: string): string[];
        id: string;
        name: string;
        parent: Shape | null;
        parentIndex: number;
        x: number;
        y: number;
        width: number;
        height: number;
        bounds: Bounds;
        center: Point;
        blocked: boolean;
        hidden: boolean;
        visible: boolean;
        proportionLock: boolean;
        constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale";
        constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom";
        fixedWhenScrolling: boolean;
        borderRadius: number;
        borderRadiusTopLeft: number;
        borderRadiusTopRight: number;
        borderRadiusBottomRight: number;
        borderRadiusBottomLeft: number;
        opacity: number;
        blendMode:
            | "difference"
            | "normal"
            | "darken"
            | "multiply"
            | "color-burn"
            | "lighten"
            | "screen"
            | "color-dodge"
            | "overlay"
            | "soft-light"
            | "hard-light"
            | "exclusion"
            | "hue"
            | "saturation"
            | "color"
            | "luminosity";
        shadows: Shadow[];
        blur?: Blur;
        backgroundBlur?: Blur;
        exports: Export[];
        boardX: number;
        boardY: number;
        parentX: number;
        parentY: number;
        flipX: boolean;
        flipY: boolean;
        rotation: number;
        strokes: Stroke[];
        layoutChild?: LayoutChildProperties;
        layoutCell?: LayoutCellProperties;
        setParentIndex(index: number): void;
        tokens: {
            width: string;
            height: string;
            fill: string;
            x: string;
            y: string;
            all: string;
            borderRadiusTopLeft: string;
            borderRadiusTopRight: string;
            borderRadiusBottomRight: string;
            borderRadiusBottomLeft: string;
            shadow: string;
            strokeColor: string;
            strokeWidth: string;
            fontFamilies: string;
            fontSize: string;
            fontWeight: string;
            letterSpacing: string;
            rotation: string;
            opacity: string;
            layoutItemMinW: string;
            layoutItemMaxW: string;
            layoutItemMinH: string;
            layoutItemMaxH: string;
            rowGap: string;
            columnGap: string;
            paddingLeft: string;
            paddingTop: string;
            paddingRight: string;
            paddingBottom: string;
            marginLeft: string;
            marginTop: string;
            marginRight: string;
            marginBottom: string;
            textCase: string;
            textDecoration: string;
            typography: string;
        };
        isComponentInstance(): boolean;
        isComponentMainInstance(): boolean;
        isComponentCopyInstance(): boolean;
        isComponentRoot(): boolean;
        isComponentHead(): boolean;
        componentRefShape(): Shape | null;
        componentRoot(): Shape | null;
        componentHead(): Shape | null;
        component(): LibraryComponent | null;
        detach(): void;
        swapComponent(component: LibraryComponent): void;
        resetOverrides(): void;
        switchVariant(pos: number, value: string): void;
        combineAsVariants(ids: string[]): VariantContainer;
        isVariantHead(): boolean;
        resize(width: number, height: number): void;
        rotate(angle: number, center?: { x: number; y: number } | null): void;
        bringToFront(): void;
        bringForward(): void;
        sendToBack(): void;
        sendBackward(): void;
        export(config: Export): Promise<Uint8Array<ArrayBufferLike>>;
        interactions: Interaction[];
        addInteraction(
            trigger: Trigger,
            action: Action,
            delay?: number,
        ): Interaction;
        removeInteraction(interaction: Interaction): void;
        applyToken(token: Token, properties?: TokenProperty[]): void;
        clone(): Shape;
        remove(): void;
    }
    ```

    Hierarchy (View Summary)

    * ShapeBase
      + Board
        - VariantContainer

    Referenced by: CloseOverlay, CommentThread, Context, ContextTypesUtils, Flow, NavigateTo, OpenOverlay, OverlayAction, Page, Penpot, RulerGuide, Shape, ToggleOverlay
  members:
    Properties:
      type: |-
        ```
        readonly type: "board"
        ```

        The type of the shape, which is always 'board' for boards.
      clipContent: |-
        ```
        clipContent: boolean
        ```

        When true the board will clip the children inside
      showInViewMode: |-
        ```
        showInViewMode: boolean
        ```

        When true the board will be displayed in the view mode
      grid: |-
        ```
        readonly grid?: GridLayout
        ```

        The grid layout configuration of the board, if applicable.
      flex: |-
        ```
        readonly flex?: FlexLayout
        ```

        The flex layout configuration of the board, if applicable.
      guides: |-
        ```
        guides: Guide[]
        ```

        The guides associated with the board.
      rulerGuides: |-
        ```
        readonly rulerGuides: RulerGuide[]
        ```

        The ruler guides attached to the board
      horizontalSizing: |-
        ```
        horizontalSizing?: "auto" | "fix"
        ```

        The horizontal sizing behavior of the board.
        It can be one of the following values:

        * 'fix': The container has its own intrinsic fixed size.
        * 'auto': The container fits the content.
      verticalSizing: |-
        ```
        verticalSizing?: "auto" | "fix"
        ```

        The vertical sizing behavior of the board.
        It can be one of the following values:

        * 'fix': The container has its own intrinsic fixed size.
        * 'auto': The container fits the content.
      fills: |-
        ```
        fills: Fill[]
        ```

        The fills applied to the shape.

        Overrides ShapeBase.fills
      children: |-
        ```
        children: Shape[]
        ```

        The children shapes contained within the board.
        When writing into this property, you can only reorder the shapes, not
        changing the structure. If the new shapes don't match the current shapes
        it will give a validation error.

        Example
        ```
        board.children = board.children.reverse();
        ```
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier of the shape.
      name: |-
        ```
        name: string
        ```

        The name of the shape.
      parent: |-
        ```
        readonly parent: Shape | null
        ```

        The parent shape. If the shape is the first level the parent will be the root shape.
        For the root shape the parent is null
      parentIndex: |-
        ```
        readonly parentIndex: number
        ```

        Returns the index of the current shape in the parent
      x: |-
        ```
        x: number
        ```

        The x-coordinate of the shape's position.
      y: |-
        ```
        y: number
        ```

        The y-coordinate of the shape's position.
      width: |-
        ```
        readonly width: number
        ```

        The width of the shape.
      height: |-
        ```
        readonly height: number
        ```

        The height of the shape.
      bounds: |-
        ```
        readonly bounds: Bounds
        ```

        The bounding box surrounding the current shape
      center: |-
        ```
        readonly center: Point
        ```

        The geometric center of the shape
      blocked: |-
        ```
        blocked: boolean
        ```

        Indicates whether the shape is blocked.
      hidden: |-
        ```
        hidden: boolean
        ```

        Indicates whether the shape is hidden.
      visible: |-
        ```
        visible: boolean
        ```

        Indicates whether the shape is visible.
      proportionLock: |-
        ```
        proportionLock: boolean
        ```

        Indicates whether the shape has proportion lock enabled.
      constraintsHorizontal: |-
        ```
        constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"
        ```

        The horizontal constraints applied to the shape.
      constraintsVertical: |-
        ```
        constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"
        ```

        The vertical constraints applied to the shape.
      fixedWhenScrolling: |-
        ```
        fixedWhenScrolling: boolean
        ```

        Indicates whether the shape stays fixed in place while scrolling.
      borderRadius: |-
        ```
        borderRadius: number
        ```

        The border radius of the shape.
      borderRadiusTopLeft: |-
        ```
        borderRadiusTopLeft: number
        ```

        The border radius of the top-left corner of the shape.
      borderRadiusTopRight: |-
        ```
        borderRadiusTopRight: number
        ```

        The border radius of the top-right corner of the shape.
      borderRadiusBottomRight: |-
        ```
        borderRadiusBottomRight: number
        ```

        The border radius of the bottom-right corner of the shape.
      borderRadiusBottomLeft: |-
        ```
        borderRadiusBottomLeft: number
        ```

        The border radius of the bottom-left corner of the shape.
      opacity: |-
        ```
        opacity: number
        ```

        The opacity of the shape.
      blendMode: |-
        ```
        blendMode:
            | "difference"
            | "normal"
            | "darken"
            | "multiply"
            | "color-burn"
            | "lighten"
            | "screen"
            | "color-dodge"
            | "overlay"
            | "soft-light"
            | "hard-light"
            | "exclusion"
            | "hue"
            | "saturation"
            | "color"
            | "luminosity"
        ```

        The blend mode applied to the shape.
      shadows: |-
        ```
        shadows: Shadow[]
        ```

        The shadows applied to the shape.
      blur: |-
        ```
        blur?: Blur
        ```

        The blur effect applied to the shape.
      backgroundBlur: |-
        ```
        backgroundBlur?: Blur
        ```

        The background blur effect applied to the shape.
        Background blur creates a blur effect on the content behind the shape,
        rather than on the shape's own content.
      exports: |-
        ```
        exports: Export[]
        ```

        The export settings of the shape.
      boardX: |-
        ```
        boardX: number
        ```

        The x-coordinate of the shape relative to its board.
      boardY: |-
        ```
        boardY: number
        ```

        The y-coordinate of the shape relative to its board.
      parentX: |-
        ```
        parentX: number
        ```

        The x-coordinate of the shape relative to its parent.
      parentY: |-
        ```
        parentY: number
        ```

        The y-coordinate of the shape relative to its parent.
      flipX: |-
        ```
        flipX: boolean
        ```

        Indicates whether the shape is flipped horizontally.
      flipY: |-
        ```
        flipY: boolean
        ```

        Indicates whether the shape is flipped vertically.
      rotation: |-
        ```
        rotation: number
        ```

        The rotation in degrees of the shape with respect to its center.
      strokes: |-
        ```
        strokes: Stroke[]
        ```

        The strokes applied to the shape.
      layoutChild: |-
        ```
        readonly layoutChild?: LayoutChildProperties
        ```

        Layout properties for children of the shape.
      layoutCell: |-
        ```
        readonly layoutCell?: LayoutCellProperties
        ```

        Layout properties for cells in a grid layout.
      tokens: |-
        ```
        readonly tokens: {
            width: string;
            height: string;
            fill: string;
            x: string;
            y: string;
            all: string;
            borderRadiusTopLeft: string;
            borderRadiusTopRight: string;
            borderRadiusBottomRight: string;
            borderRadiusBottomLeft: string;
            shadow: string;
            strokeColor: string;
            strokeWidth: string;
            fontFamilies: string;
            fontSize: string;
            fontWeight: string;
            letterSpacing: string;
            rotation: string;
            opacity: string;
            layoutItemMinW: string;
            layoutItemMaxW: string;
            layoutItemMinH: string;
            layoutItemMaxH: string;
            rowGap: string;
            columnGap: string;
            paddingLeft: string;
            paddingTop: string;
            paddingRight: string;
            paddingBottom: string;
            marginLeft: string;
            marginTop: string;
            marginRight: string;
            marginBottom: string;
            textCase: string;
            textDecoration: string;
            typography: string;
        }
        ```

        The design tokens applied to this shape.
        It's a map property name -> token name.

        NOTE that the tokens application is by name and not by id. If there exist
        several tokens with the same name in different sets, the actual token applied
        and the value set to the attributes will depend on which sets are active
        (and will change if different sets or themes are activated later).
      interactions: |-
        ```
        readonly interactions: Interaction[]
        ```

        The interactions for the current shape.
    Methods:
      appendChild: |-
        ```
        appendChild(child: Shape): void
        ```

        Appends a child shape to the board.

        Parameters

        * child: Shape

          The child shape to append.

        Returns void

        Example
        ```
        board.appendChild(childShape);
        ```
      insertChild: |-
        ```
        insertChild(index: number, child: Shape): void
        ```

        Inserts a child shape at the specified index within the board.

        Parameters

        * index: number

          The index at which to insert the child shape.
        * child: Shape

          The child shape to insert.

        Returns void

        Example
        ```
        board.insertChild(0, childShape);
        ```
      addFlexLayout: |-
        ```
        addFlexLayout(): FlexLayout
        ```

        Adds a flex layout configuration to the board (so it's necessary to create a board first of all).

        Returns FlexLayout

        Returns the flex layout configuration added to the board.

        Example
        ```
        const board = penpot.createBoard();const flex = board.addFlexLayout();// You can change the flex properties as follows.flex.dir = "column";flex.wrap = "wrap";flex.alignItems = "center";flex.justifyContent = "center";flex.horizontalSizing = "fill";flex.verticalSizing = "fill";
        ```
      addGridLayout: |-
        ```
        addGridLayout(): GridLayout
        ```

        Adds a grid layout configuration to the board (so it's necessary to create a board first of all). You can add rows and columns, check addRow/addColumn.

        Returns GridLayout

        Returns the grid layout configuration added to the board.

        Example
        ```
        const board = penpot.createBoard();const grid = board.addGridLayout();// You can change the grid properties as follows.grid.alignItems = "center";grid.justifyItems = "start";grid.rowGap = 10;grid.columnGap = 10;grid.verticalPadding = 5;grid.horizontalPadding = 5;
        ```
      addRulerGuide: |-
        ```
        addRulerGuide(orientation: RulerGuideOrientation, value: number): RulerGuide
        ```

        Creates a new ruler guide attached to the board.

        Parameters

        * orientation: RulerGuideOrientation

          `horizontal` or `vertical`
        * value: number

          the position of the guide relative to the board

        Returns RulerGuide
      removeRulerGuide: |-
        ```
        removeRulerGuide(guide: RulerGuide): void
        ```

        Removes the `guide` from the board.

        Parameters

        * guide: RulerGuide

        Returns void
      isVariantContainer: |-
        ```
        isVariantContainer(): boolean
        ```

        Returns boolean

        Returns true when the current board is a VariantContainer
      getPluginData: |-
        ```
        getPluginData(key: string): string
        ```

        Retrieves the data for our own plugin, given a specific key.

        Parameters

        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the data associated with the key as a string.

        Example
        ```
        const data = shape.getPluginData('exampleKey');console.log(data);
        ```
      setPluginData: |-
        ```
        setPluginData(key: string, value: string): void
        ```

        Sets the plugin-specific data for the given key.

        Parameters

        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setPluginData('exampleKey', 'exampleValue');
        ```
      getPluginDataKeys: |-
        ```
        getPluginDataKeys(): string[]
        ```

        Retrieves all the keys for the plugin-specific data.

        Returns string[]

        Returns an array of strings representing all the keys.

        Example
        ```
        const keys = shape.getPluginDataKeys();console.log(keys);
        ```
      getSharedPluginData: |-
        ```
        getSharedPluginData(namespace: string, key: string): string
        ```

        If we know the namespace of an external plugin, this is the way to get their data.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the shared data associated with the key as a string.

        Example
        ```
        const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData);
        ```
      setSharedPluginData: |-
        ```
        setSharedPluginData(namespace: string, key: string, value: string): void
        ```

        Sets the shared plugin-specific data for the given namespace and key.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue');
        ```
      getSharedPluginDataKeys: |-
        ```
        getSharedPluginDataKeys(namespace: string): string[]
        ```

        Retrieves all the keys for the shared plugin-specific data in the given namespace.

        Parameters

        * namespace: string

          The namespace for the shared data.

        Returns string[]

        Returns an array of strings representing all the keys in the namespace.

        Example
        ```
        const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys);
        ```
      setParentIndex: |-
        ```
        setParentIndex(index: number): void
        ```

        Changes the index inside the parent of the current shape.
        This method will shift the indexes of the shapes around that position to
        match the index.
        If the index is greater than the number of elements it will positioned last.

        Parameters

        * index: number

          the new index for the shape to be in

        Returns void
      isComponentInstance: |-
        ```
        isComponentInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component instance
      isComponentMainInstance: |-
        ```
        isComponentMainInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component **main** instance
      isComponentCopyInstance: |-
        ```
        isComponentCopyInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component **copy** instance
      isComponentRoot: |-
        ```
        isComponentRoot(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the root of a component tree
      isComponentHead: |-
        ```
        isComponentHead(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the head of a components tree nested structure
      componentRefShape: |-
        ```
        componentRefShape(): Shape | null
        ```

        Returns Shape | null

        Returns the equivalent shape in the component main instance. If the current shape is inside a
        main instance will return `null`;
      componentRoot: |-
        ```
        componentRoot(): Shape | null
        ```

        Returns Shape | null

        Returns the root of the component tree structure for the current shape. If the current shape
        is already a root will return itself.
      componentHead: |-
        ```
        componentHead(): Shape | null
        ```

        Returns Shape | null

        Returns the head of the component tree structure for the current shape. If the current shape
        is already a head will return itself.
      component: |-
        ```
        component(): LibraryComponent | null
        ```

        Returns LibraryComponent | null

        If the shape is a component instance, returns the reference to the component associated
        otherwise will return null
      detach: |-
        ```
        detach(): void
        ```

        If the current shape is a component it will remove the component information and leave the
        shape as a "basic shape"

        Returns void
      swapComponent: |-
        ```
        swapComponent(component: LibraryComponent): void
        ```

        Swaps the component instance for another component, keeping the overrides
        when possible. Similar to the "swap component" action on the Penpot interface.
        The current shape must be a component copy instance.

        Parameters

        * component: LibraryComponent

          The new component to replace the current one

        Returns void
      resetOverrides: |-
        ```
        resetOverrides(): void
        ```

        Resets the overrides of the component copy, restoring all its attributes
        (and those of its children) to the ones in the linked main component.
        Similar to the "reset overrides" action on the Penpot interface.
        The current shape must be a component copy instance.

        Returns void
      switchVariant: |-
        ```
        switchVariant(pos: number, value: string): void
        ```

        Switch a VariantComponent copy to the nearest one that has the specified property value

        Parameters

        * pos: number

          The position of the property to update
        * value: string

          The new value of the property

        Returns void
      combineAsVariants: |-
        ```
        combineAsVariants(ids: string[]): VariantContainer
        ```

        Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu
        on the Penpot interface.
        The current shape must be a component main instance.

        Parameters

        * ids: string[]

          A list of ids of the main instances of the components to combine with this one.

        Returns VariantContainer

        The variant container created
      isVariantHead: |-
        ```
        isVariantHead(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the head of a components tree nested structure,
        and that component is a VariantComponent
      resize: |-
        ```
        resize(width: number, height: number): void
        ```

        Resizes the shape to the specified width and height.

        Parameters

        * width: number

          The new width of the shape.
        * height: number

          The new height of the shape.

        Returns void

        Example
        ```
        shape.resize(200, 100);
        ```
      rotate: |-
        ```
        rotate(angle: number, center?: { x: number; y: number } | null): void
        ```

        Rotates the shape in relation with the given center.

        Parameters

        * angle: number

          Angle in degrees to rotate.
        * center: { x: number; y: number } | null

          Center of the transform rotation. If not sent it will use the geometric center of the shape.

        Returns void

        Example
        ```
        shape.rotate(45);
        ```
      bringToFront: |-
        ```
        bringToFront(): void
        ```

        Moves the current shape to the front of its siblings

        Returns void
      bringForward: |-
        ```
        bringForward(): void
        ```

        Moves the current shape one position forward in its list of siblings

        Returns void
      sendToBack: |-
        ```
        sendToBack(): void
        ```

        Moves the current shape to the back of its siblings

        Returns void
      sendBackward: |-
        ```
        sendBackward(): void
        ```

        Moves the current shape one position backwards in its list of siblings

        Returns void
      export: |-
        ```
        export(config: Export): Promise<Uint8Array<ArrayBufferLike>>
        ```

        Generates an export from the current shape.

        Parameters

        * config: Export

        Returns Promise<Uint8Array<ArrayBufferLike>>

        Example
        ```
        shape.export({ type: 'png', scale: 2 });
        ```
      addInteraction: |-
        ```
        addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction
        ```

        Adds a new interaction to the shape.

        If the interaction starts a flow (for example a `navigate-to` action) and
        the shape's board is not already part of any flow, a new flow starting at
        that board is created automatically, matching the behavior of the editor.

        Parameters

        * trigger: Trigger

          defines the conditions under which the action will be triggered
        * action: Action

          defines what will be executed when the trigger happens
        * delay: number

          for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise.

        Returns Interaction

        Example
        ```
        shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard });
        ```
      removeInteraction: |-
        ```
        removeInteraction(interaction: Interaction): void
        ```

        Removes the interaction from the shape.

        Parameters

        * interaction: Interaction

          is the interaction to remove from the shape

        Returns void

        Example
        ```
        shape.removeInteraction(interaction);
        ```
      applyToken: |-
        ```
        applyToken(token: Token, properties?: TokenProperty[]): void
        ```

        Applies one design token to one or more properties of the shape.

        Parameters

        * token: Token

          is the Token to apply
        * properties: TokenProperty[]

          an optional list of property names. If omitted, the
          default properties will be applied.

          NOTE that the tokens application is by name and not by id. If there exist
          several tokens with the same name in different sets, the actual token applied
          and the value set to the attributes will depend on which sets are active
          (and will change if different sets or themes are activated later).

        Returns void
      clone: |-
        ```
        clone(): Shape
        ```

        Creates a clone of the shape.

        Returns Shape

        Returns a new instance of the shape with identical properties.
      remove: |-
        ```
        remove(): void
        ```

        Removes the shape from its parent.

        Returns void
VariantContainer:
  overview: |-
    Interface VariantContainer
    ==========================

    Represents a VariantContainer in Penpot
    This interface extends `Board` and includes properties and methods specific to VariantContainer.

    ```
    interface VariantContainer {
        type: "board";
        clipContent: boolean;
        showInViewMode: boolean;
        grid?: GridLayout;
        flex?: FlexLayout;
        guides: Guide[];
        rulerGuides: RulerGuide[];
        horizontalSizing?: "auto" | "fix";
        verticalSizing?: "auto" | "fix";
        fills: Fill[];
        children: Shape[];
        appendChild(child: Shape): void;
        insertChild(index: number, child: Shape): void;
        addFlexLayout(): FlexLayout;
        addGridLayout(): GridLayout;
        addRulerGuide(
            orientation: RulerGuideOrientation,
            value: number,
        ): RulerGuide;
        removeRulerGuide(guide: RulerGuide): void;
        isVariantContainer(): boolean;
        variants: Variants | null;
        getPluginData(key: string): string;
        setPluginData(key: string, value: string): void;
        getPluginDataKeys(): string[];
        getSharedPluginData(namespace: string, key: string): string;
        setSharedPluginData(namespace: string, key: string, value: string): void;
        getSharedPluginDataKeys(namespace: string): string[];
        id: string;
        name: string;
        parent: Shape | null;
        parentIndex: number;
        x: number;
        y: number;
        width: number;
        height: number;
        bounds: Bounds;
        center: Point;
        blocked: boolean;
        hidden: boolean;
        visible: boolean;
        proportionLock: boolean;
        constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale";
        constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom";
        fixedWhenScrolling: boolean;
        borderRadius: number;
        borderRadiusTopLeft: number;
        borderRadiusTopRight: number;
        borderRadiusBottomRight: number;
        borderRadiusBottomLeft: number;
        opacity: number;
        blendMode:
            | "difference"
            | "normal"
            | "darken"
            | "multiply"
            | "color-burn"
            | "lighten"
            | "screen"
            | "color-dodge"
            | "overlay"
            | "soft-light"
            | "hard-light"
            | "exclusion"
            | "hue"
            | "saturation"
            | "color"
            | "luminosity";
        shadows: Shadow[];
        blur?: Blur;
        backgroundBlur?: Blur;
        exports: Export[];
        boardX: number;
        boardY: number;
        parentX: number;
        parentY: number;
        flipX: boolean;
        flipY: boolean;
        rotation: number;
        strokes: Stroke[];
        layoutChild?: LayoutChildProperties;
        layoutCell?: LayoutCellProperties;
        setParentIndex(index: number): void;
        tokens: {
            width: string;
            height: string;
            fill: string;
            x: string;
            y: string;
            all: string;
            borderRadiusTopLeft: string;
            borderRadiusTopRight: string;
            borderRadiusBottomRight: string;
            borderRadiusBottomLeft: string;
            shadow: string;
            strokeColor: string;
            strokeWidth: string;
            fontFamilies: string;
            fontSize: string;
            fontWeight: string;
            letterSpacing: string;
            rotation: string;
            opacity: string;
            layoutItemMinW: string;
            layoutItemMaxW: string;
            layoutItemMinH: string;
            layoutItemMaxH: string;
            rowGap: string;
            columnGap: string;
            paddingLeft: string;
            paddingTop: string;
            paddingRight: string;
            paddingBottom: string;
            marginLeft: string;
            marginTop: string;
            marginRight: string;
            marginBottom: string;
            textCase: string;
            textDecoration: string;
            typography: string;
        };
        isComponentInstance(): boolean;
        isComponentMainInstance(): boolean;
        isComponentCopyInstance(): boolean;
        isComponentRoot(): boolean;
        isComponentHead(): boolean;
        componentRefShape(): Shape | null;
        componentRoot(): Shape | null;
        componentHead(): Shape | null;
        component(): LibraryComponent | null;
        detach(): void;
        swapComponent(component: LibraryComponent): void;
        resetOverrides(): void;
        switchVariant(pos: number, value: string): void;
        combineAsVariants(ids: string[]): VariantContainer;
        isVariantHead(): boolean;
        resize(width: number, height: number): void;
        rotate(angle: number, center?: { x: number; y: number } | null): void;
        bringToFront(): void;
        bringForward(): void;
        sendToBack(): void;
        sendBackward(): void;
        export(config: Export): Promise<Uint8Array<ArrayBufferLike>>;
        interactions: Interaction[];
        addInteraction(
            trigger: Trigger,
            action: Action,
            delay?: number,
        ): Interaction;
        removeInteraction(interaction: Interaction): void;
        applyToken(token: Token, properties?: TokenProperty[]): void;
        clone(): Shape;
        remove(): void;
    }
    ```

    Hierarchy (View Summary)

    * Board
      + VariantContainer

    Referenced by: Board, Boolean, Context, ContextTypesUtils, Ellipse, Group, Image, Path, Penpot, Rectangle, ShapeBase, SvgRaw, Text, VariantContainer
  members:
    Properties:
      type: |-
        ```
        readonly type: "board"
        ```

        The type of the shape, which is always 'board' for boards.
      clipContent: |-
        ```
        clipContent: boolean
        ```

        When true the board will clip the children inside
      showInViewMode: |-
        ```
        showInViewMode: boolean
        ```

        When true the board will be displayed in the view mode
      grid: |-
        ```
        readonly grid?: GridLayout
        ```

        The grid layout configuration of the board, if applicable.
      flex: |-
        ```
        readonly flex?: FlexLayout
        ```

        The flex layout configuration of the board, if applicable.
      guides: |-
        ```
        guides: Guide[]
        ```

        The guides associated with the board.
      rulerGuides: |-
        ```
        readonly rulerGuides: RulerGuide[]
        ```

        The ruler guides attached to the board
      horizontalSizing: |-
        ```
        horizontalSizing?: "auto" | "fix"
        ```

        The horizontal sizing behavior of the board.
        It can be one of the following values:

        * 'fix': The container has its own intrinsic fixed size.
        * 'auto': The container fits the content.
      verticalSizing: |-
        ```
        verticalSizing?: "auto" | "fix"
        ```

        The vertical sizing behavior of the board.
        It can be one of the following values:

        * 'fix': The container has its own intrinsic fixed size.
        * 'auto': The container fits the content.
      fills: |-
        ```
        fills: Fill[]
        ```

        The fills applied to the shape.
      children: |-
        ```
        children: Shape[]
        ```

        The children shapes contained within the board.
        When writing into this property, you can only reorder the shapes, not
        changing the structure. If the new shapes don't match the current shapes
        it will give a validation error.

        Example
        ```
        board.children = board.children.reverse();
        ```
      variants: |-
        ```
        readonly variants: Variants | null
        ```

        Access to the Variant interface, for attributes and actions over the full Variant (not only this VariantContainer)
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier of the shape.
      name: |-
        ```
        name: string
        ```

        The name of the shape.
      parent: |-
        ```
        readonly parent: Shape | null
        ```

        The parent shape. If the shape is the first level the parent will be the root shape.
        For the root shape the parent is null
      parentIndex: |-
        ```
        readonly parentIndex: number
        ```

        Returns the index of the current shape in the parent
      x: |-
        ```
        x: number
        ```

        The x-coordinate of the shape's position.
      y: |-
        ```
        y: number
        ```

        The y-coordinate of the shape's position.
      width: |-
        ```
        readonly width: number
        ```

        The width of the shape.
      height: |-
        ```
        readonly height: number
        ```

        The height of the shape.
      bounds: |-
        ```
        readonly bounds: Bounds
        ```

        The bounding box surrounding the current shape
      center: |-
        ```
        readonly center: Point
        ```

        The geometric center of the shape
      blocked: |-
        ```
        blocked: boolean
        ```

        Indicates whether the shape is blocked.
      hidden: |-
        ```
        hidden: boolean
        ```

        Indicates whether the shape is hidden.
      visible: |-
        ```
        visible: boolean
        ```

        Indicates whether the shape is visible.
      proportionLock: |-
        ```
        proportionLock: boolean
        ```

        Indicates whether the shape has proportion lock enabled.
      constraintsHorizontal: |-
        ```
        constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"
        ```

        The horizontal constraints applied to the shape.
      constraintsVertical: |-
        ```
        constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"
        ```

        The vertical constraints applied to the shape.
      fixedWhenScrolling: |-
        ```
        fixedWhenScrolling: boolean
        ```

        Indicates whether the shape stays fixed in place while scrolling.
      borderRadius: |-
        ```
        borderRadius: number
        ```

        The border radius of the shape.
      borderRadiusTopLeft: |-
        ```
        borderRadiusTopLeft: number
        ```

        The border radius of the top-left corner of the shape.
      borderRadiusTopRight: |-
        ```
        borderRadiusTopRight: number
        ```

        The border radius of the top-right corner of the shape.
      borderRadiusBottomRight: |-
        ```
        borderRadiusBottomRight: number
        ```

        The border radius of the bottom-right corner of the shape.
      borderRadiusBottomLeft: |-
        ```
        borderRadiusBottomLeft: number
        ```

        The border radius of the bottom-left corner of the shape.
      opacity: |-
        ```
        opacity: number
        ```

        The opacity of the shape.
      blendMode: |-
        ```
        blendMode:
            | "difference"
            | "normal"
            | "darken"
            | "multiply"
            | "color-burn"
            | "lighten"
            | "screen"
            | "color-dodge"
            | "overlay"
            | "soft-light"
            | "hard-light"
            | "exclusion"
            | "hue"
            | "saturation"
            | "color"
            | "luminosity"
        ```

        The blend mode applied to the shape.
      shadows: |-
        ```
        shadows: Shadow[]
        ```

        The shadows applied to the shape.
      blur: |-
        ```
        blur?: Blur
        ```

        The blur effect applied to the shape.
      backgroundBlur: |-
        ```
        backgroundBlur?: Blur
        ```

        The background blur effect applied to the shape.
        Background blur creates a blur effect on the content behind the shape,
        rather than on the shape's own content.
      exports: |-
        ```
        exports: Export[]
        ```

        The export settings of the shape.
      boardX: |-
        ```
        boardX: number
        ```

        The x-coordinate of the shape relative to its board.
      boardY: |-
        ```
        boardY: number
        ```

        The y-coordinate of the shape relative to its board.
      parentX: |-
        ```
        parentX: number
        ```

        The x-coordinate of the shape relative to its parent.
      parentY: |-
        ```
        parentY: number
        ```

        The y-coordinate of the shape relative to its parent.
      flipX: |-
        ```
        flipX: boolean
        ```

        Indicates whether the shape is flipped horizontally.
      flipY: |-
        ```
        flipY: boolean
        ```

        Indicates whether the shape is flipped vertically.
      rotation: |-
        ```
        rotation: number
        ```

        The rotation in degrees of the shape with respect to its center.
      strokes: |-
        ```
        strokes: Stroke[]
        ```

        The strokes applied to the shape.
      layoutChild: |-
        ```
        readonly layoutChild?: LayoutChildProperties
        ```

        Layout properties for children of the shape.
      layoutCell: |-
        ```
        readonly layoutCell?: LayoutCellProperties
        ```

        Layout properties for cells in a grid layout.
      tokens: |-
        ```
        readonly tokens: {
            width: string;
            height: string;
            fill: string;
            x: string;
            y: string;
            all: string;
            borderRadiusTopLeft: string;
            borderRadiusTopRight: string;
            borderRadiusBottomRight: string;
            borderRadiusBottomLeft: string;
            shadow: string;
            strokeColor: string;
            strokeWidth: string;
            fontFamilies: string;
            fontSize: string;
            fontWeight: string;
            letterSpacing: string;
            rotation: string;
            opacity: string;
            layoutItemMinW: string;
            layoutItemMaxW: string;
            layoutItemMinH: string;
            layoutItemMaxH: string;
            rowGap: string;
            columnGap: string;
            paddingLeft: string;
            paddingTop: string;
            paddingRight: string;
            paddingBottom: string;
            marginLeft: string;
            marginTop: string;
            marginRight: string;
            marginBottom: string;
            textCase: string;
            textDecoration: string;
            typography: string;
        }
        ```

        The design tokens applied to this shape.
        It's a map property name -> token name.

        NOTE that the tokens application is by name and not by id. If there exist
        several tokens with the same name in different sets, the actual token applied
        and the value set to the attributes will depend on which sets are active
        (and will change if different sets or themes are activated later).
      interactions: |-
        ```
        readonly interactions: Interaction[]
        ```

        The interactions for the current shape.
    Methods:
      appendChild: |-
        ```
        appendChild(child: Shape): void
        ```

        Appends a child shape to the board.

        Parameters

        * child: Shape

          The child shape to append.

        Returns void

        Example
        ```
        board.appendChild(childShape);
        ```
      insertChild: |-
        ```
        insertChild(index: number, child: Shape): void
        ```

        Inserts a child shape at the specified index within the board.

        Parameters

        * index: number

          The index at which to insert the child shape.
        * child: Shape

          The child shape to insert.

        Returns void

        Example
        ```
        board.insertChild(0, childShape);
        ```
      addFlexLayout: |-
        ```
        addFlexLayout(): FlexLayout
        ```

        Adds a flex layout configuration to the board (so it's necessary to create a board first of all).

        Returns FlexLayout

        Returns the flex layout configuration added to the board.

        Example
        ```
        const board = penpot.createBoard();const flex = board.addFlexLayout();// You can change the flex properties as follows.flex.dir = "column";flex.wrap = "wrap";flex.alignItems = "center";flex.justifyContent = "center";flex.horizontalSizing = "fill";flex.verticalSizing = "fill";
        ```
      addGridLayout: |-
        ```
        addGridLayout(): GridLayout
        ```

        Adds a grid layout configuration to the board (so it's necessary to create a board first of all). You can add rows and columns, check addRow/addColumn.

        Returns GridLayout

        Returns the grid layout configuration added to the board.

        Example
        ```
        const board = penpot.createBoard();const grid = board.addGridLayout();// You can change the grid properties as follows.grid.alignItems = "center";grid.justifyItems = "start";grid.rowGap = 10;grid.columnGap = 10;grid.verticalPadding = 5;grid.horizontalPadding = 5;
        ```
      addRulerGuide: |-
        ```
        addRulerGuide(orientation: RulerGuideOrientation, value: number): RulerGuide
        ```

        Creates a new ruler guide attached to the board.

        Parameters

        * orientation: RulerGuideOrientation

          `horizontal` or `vertical`
        * value: number

          the position of the guide relative to the board

        Returns RulerGuide
      removeRulerGuide: |-
        ```
        removeRulerGuide(guide: RulerGuide): void
        ```

        Removes the `guide` from the board.

        Parameters

        * guide: RulerGuide

        Returns void
      isVariantContainer: |-
        ```
        isVariantContainer(): boolean
        ```

        Returns boolean

        Returns true when the current board is a VariantContainer
      getPluginData: |-
        ```
        getPluginData(key: string): string
        ```

        Retrieves the data for our own plugin, given a specific key.

        Parameters

        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the data associated with the key as a string.

        Example
        ```
        const data = shape.getPluginData('exampleKey');console.log(data);
        ```
      setPluginData: |-
        ```
        setPluginData(key: string, value: string): void
        ```

        Sets the plugin-specific data for the given key.

        Parameters

        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setPluginData('exampleKey', 'exampleValue');
        ```
      getPluginDataKeys: |-
        ```
        getPluginDataKeys(): string[]
        ```

        Retrieves all the keys for the plugin-specific data.

        Returns string[]

        Returns an array of strings representing all the keys.

        Example
        ```
        const keys = shape.getPluginDataKeys();console.log(keys);
        ```
      getSharedPluginData: |-
        ```
        getSharedPluginData(namespace: string, key: string): string
        ```

        If we know the namespace of an external plugin, this is the way to get their data.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the shared data associated with the key as a string.

        Example
        ```
        const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData);
        ```
      setSharedPluginData: |-
        ```
        setSharedPluginData(namespace: string, key: string, value: string): void
        ```

        Sets the shared plugin-specific data for the given namespace and key.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue');
        ```
      getSharedPluginDataKeys: |-
        ```
        getSharedPluginDataKeys(namespace: string): string[]
        ```

        Retrieves all the keys for the shared plugin-specific data in the given namespace.

        Parameters

        * namespace: string

          The namespace for the shared data.

        Returns string[]

        Returns an array of strings representing all the keys in the namespace.

        Example
        ```
        const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys);
        ```
      setParentIndex: |-
        ```
        setParentIndex(index: number): void
        ```

        Changes the index inside the parent of the current shape.
        This method will shift the indexes of the shapes around that position to
        match the index.
        If the index is greater than the number of elements it will positioned last.

        Parameters

        * index: number

          the new index for the shape to be in

        Returns void
      isComponentInstance: |-
        ```
        isComponentInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component instance
      isComponentMainInstance: |-
        ```
        isComponentMainInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component **main** instance
      isComponentCopyInstance: |-
        ```
        isComponentCopyInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component **copy** instance
      isComponentRoot: |-
        ```
        isComponentRoot(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the root of a component tree
      isComponentHead: |-
        ```
        isComponentHead(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the head of a components tree nested structure
      componentRefShape: |-
        ```
        componentRefShape(): Shape | null
        ```

        Returns Shape | null

        Returns the equivalent shape in the component main instance. If the current shape is inside a
        main instance will return `null`;
      componentRoot: |-
        ```
        componentRoot(): Shape | null
        ```

        Returns Shape | null

        Returns the root of the component tree structure for the current shape. If the current shape
        is already a root will return itself.
      componentHead: |-
        ```
        componentHead(): Shape | null
        ```

        Returns Shape | null

        Returns the head of the component tree structure for the current shape. If the current shape
        is already a head will return itself.
      component: |-
        ```
        component(): LibraryComponent | null
        ```

        Returns LibraryComponent | null

        If the shape is a component instance, returns the reference to the component associated
        otherwise will return null
      detach: |-
        ```
        detach(): void
        ```

        If the current shape is a component it will remove the component information and leave the
        shape as a "basic shape"

        Returns void
      swapComponent: |-
        ```
        swapComponent(component: LibraryComponent): void
        ```

        Swaps the component instance for another component, keeping the overrides
        when possible. Similar to the "swap component" action on the Penpot interface.
        The current shape must be a component copy instance.

        Parameters

        * component: LibraryComponent

          The new component to replace the current one

        Returns void
      resetOverrides: |-
        ```
        resetOverrides(): void
        ```

        Resets the overrides of the component copy, restoring all its attributes
        (and those of its children) to the ones in the linked main component.
        Similar to the "reset overrides" action on the Penpot interface.
        The current shape must be a component copy instance.

        Returns void
      switchVariant: |-
        ```
        switchVariant(pos: number, value: string): void
        ```

        Switch a VariantComponent copy to the nearest one that has the specified property value

        Parameters

        * pos: number

          The position of the property to update
        * value: string

          The new value of the property

        Returns void
      combineAsVariants: |-
        ```
        combineAsVariants(ids: string[]): VariantContainer
        ```

        Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu
        on the Penpot interface.
        The current shape must be a component main instance.

        Parameters

        * ids: string[]

          A list of ids of the main instances of the components to combine with this one.

        Returns VariantContainer

        The variant container created
      isVariantHead: |-
        ```
        isVariantHead(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the head of a components tree nested structure,
        and that component is a VariantComponent
      resize: |-
        ```
        resize(width: number, height: number): void
        ```

        Resizes the shape to the specified width and height.

        Parameters

        * width: number

          The new width of the shape.
        * height: number

          The new height of the shape.

        Returns void

        Example
        ```
        shape.resize(200, 100);
        ```
      rotate: |-
        ```
        rotate(angle: number, center?: { x: number; y: number } | null): void
        ```

        Rotates the shape in relation with the given center.

        Parameters

        * angle: number

          Angle in degrees to rotate.
        * center: { x: number; y: number } | null

          Center of the transform rotation. If not sent it will use the geometric center of the shape.

        Returns void

        Example
        ```
        shape.rotate(45);
        ```
      bringToFront: |-
        ```
        bringToFront(): void
        ```

        Moves the current shape to the front of its siblings

        Returns void
      bringForward: |-
        ```
        bringForward(): void
        ```

        Moves the current shape one position forward in its list of siblings

        Returns void
      sendToBack: |-
        ```
        sendToBack(): void
        ```

        Moves the current shape to the back of its siblings

        Returns void
      sendBackward: |-
        ```
        sendBackward(): void
        ```

        Moves the current shape one position backwards in its list of siblings

        Returns void
      export: |-
        ```
        export(config: Export): Promise<Uint8Array<ArrayBufferLike>>
        ```

        Generates an export from the current shape.

        Parameters

        * config: Export

        Returns Promise<Uint8Array<ArrayBufferLike>>

        Example
        ```
        shape.export({ type: 'png', scale: 2 });
        ```
      addInteraction: |-
        ```
        addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction
        ```

        Adds a new interaction to the shape.

        If the interaction starts a flow (for example a `navigate-to` action) and
        the shape's board is not already part of any flow, a new flow starting at
        that board is created automatically, matching the behavior of the editor.

        Parameters

        * trigger: Trigger

          defines the conditions under which the action will be triggered
        * action: Action

          defines what will be executed when the trigger happens
        * delay: number

          for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise.

        Returns Interaction

        Example
        ```
        shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard });
        ```
      removeInteraction: |-
        ```
        removeInteraction(interaction: Interaction): void
        ```

        Removes the interaction from the shape.

        Parameters

        * interaction: Interaction

          is the interaction to remove from the shape

        Returns void

        Example
        ```
        shape.removeInteraction(interaction);
        ```
      applyToken: |-
        ```
        applyToken(token: Token, properties?: TokenProperty[]): void
        ```

        Applies one design token to one or more properties of the shape.

        Parameters

        * token: Token

          is the Token to apply
        * properties: TokenProperty[]

          an optional list of property names. If omitted, the
          default properties will be applied.

          NOTE that the tokens application is by name and not by id. If there exist
          several tokens with the same name in different sets, the actual token applied
          and the value set to the attributes will depend on which sets are active
          (and will change if different sets or themes are activated later).

        Returns void
      clone: |-
        ```
        clone(): Shape
        ```

        Creates a clone of the shape.

        Returns Shape

        Returns a new instance of the shape with identical properties.
      remove: |-
        ```
        remove(): void
        ```

        Removes the shape from its parent.

        Returns void
Boolean:
  overview: |-
    Interface Boolean
    =================

    Represents a boolean operation shape in Penpot.
    This interface extends `ShapeBase` and includes properties and methods specific to boolean operations.

    ```
    interface Boolean {
        type: "boolean";
        toD(): string;
        content: string;
        d: string;
        commands: PathCommand[];
        fills: Fill[];
        children: Shape[];
        appendChild(child: Shape): void;
        insertChild(index: number, child: Shape): void;
        getPluginData(key: string): string;
        setPluginData(key: string, value: string): void;
        getPluginDataKeys(): string[];
        getSharedPluginData(namespace: string, key: string): string;
        setSharedPluginData(namespace: string, key: string, value: string): void;
        getSharedPluginDataKeys(namespace: string): string[];
        id: string;
        name: string;
        parent: Shape | null;
        parentIndex: number;
        x: number;
        y: number;
        width: number;
        height: number;
        bounds: Bounds;
        center: Point;
        blocked: boolean;
        hidden: boolean;
        visible: boolean;
        proportionLock: boolean;
        constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale";
        constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom";
        fixedWhenScrolling: boolean;
        borderRadius: number;
        borderRadiusTopLeft: number;
        borderRadiusTopRight: number;
        borderRadiusBottomRight: number;
        borderRadiusBottomLeft: number;
        opacity: number;
        blendMode:
            | "difference"
            | "normal"
            | "darken"
            | "multiply"
            | "color-burn"
            | "lighten"
            | "screen"
            | "color-dodge"
            | "overlay"
            | "soft-light"
            | "hard-light"
            | "exclusion"
            | "hue"
            | "saturation"
            | "color"
            | "luminosity";
        shadows: Shadow[];
        blur?: Blur;
        backgroundBlur?: Blur;
        exports: Export[];
        boardX: number;
        boardY: number;
        parentX: number;
        parentY: number;
        flipX: boolean;
        flipY: boolean;
        rotation: number;
        strokes: Stroke[];
        layoutChild?: LayoutChildProperties;
        layoutCell?: LayoutCellProperties;
        setParentIndex(index: number): void;
        tokens: {
            width: string;
            height: string;
            fill: string;
            x: string;
            y: string;
            all: string;
            borderRadiusTopLeft: string;
            borderRadiusTopRight: string;
            borderRadiusBottomRight: string;
            borderRadiusBottomLeft: string;
            shadow: string;
            strokeColor: string;
            strokeWidth: string;
            fontFamilies: string;
            fontSize: string;
            fontWeight: string;
            letterSpacing: string;
            rotation: string;
            opacity: string;
            layoutItemMinW: string;
            layoutItemMaxW: string;
            layoutItemMinH: string;
            layoutItemMaxH: string;
            rowGap: string;
            columnGap: string;
            paddingLeft: string;
            paddingTop: string;
            paddingRight: string;
            paddingBottom: string;
            marginLeft: string;
            marginTop: string;
            marginRight: string;
            marginBottom: string;
            textCase: string;
            textDecoration: string;
            typography: string;
        };
        isComponentInstance(): boolean;
        isComponentMainInstance(): boolean;
        isComponentCopyInstance(): boolean;
        isComponentRoot(): boolean;
        isComponentHead(): boolean;
        componentRefShape(): Shape | null;
        componentRoot(): Shape | null;
        componentHead(): Shape | null;
        component(): LibraryComponent | null;
        detach(): void;
        swapComponent(component: LibraryComponent): void;
        resetOverrides(): void;
        switchVariant(pos: number, value: string): void;
        combineAsVariants(ids: string[]): VariantContainer;
        isVariantHead(): boolean;
        resize(width: number, height: number): void;
        rotate(angle: number, center?: { x: number; y: number } | null): void;
        bringToFront(): void;
        bringForward(): void;
        sendToBack(): void;
        sendBackward(): void;
        export(config: Export): Promise<Uint8Array<ArrayBufferLike>>;
        interactions: Interaction[];
        addInteraction(
            trigger: Trigger,
            action: Action,
            delay?: number,
        ): Interaction;
        removeInteraction(interaction: Interaction): void;
        applyToken(token: Token, properties?: TokenProperty[]): void;
        clone(): Shape;
        remove(): void;
    }
    ```

    Hierarchy (View Summary)

    * ShapeBase
      + Boolean

    Referenced by: Context, ContextTypesUtils, Penpot, Shape
  members:
    Properties:
      type: |-
        ```
        readonly type: "boolean"
        ```

        The type of the shape, which is always 'boolean' for boolean operation shapes.
      content: |-
        ```
        readonly content: string
        ```

        The content of the boolean shape, defined as the path string.

        Deprecated

        Use either `d` or `commands`.
      d: |-
        ```
        readonly d: string
        ```

        The content of the boolean shape, defined as the path string.
      commands: |-
        ```
        readonly commands: PathCommand[]
        ```

        The content of the boolean shape, defined as an array of path commands.
      fills: |-
        ```
        fills: Fill[]
        ```

        The fills applied to the shape.

        Overrides ShapeBase.fills
      children: |-
        ```
        readonly children: Shape[]
        ```

        The children shapes contained within the boolean shape.
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier of the shape.
      name: |-
        ```
        name: string
        ```

        The name of the shape.
      parent: |-
        ```
        readonly parent: Shape | null
        ```

        The parent shape. If the shape is the first level the parent will be the root shape.
        For the root shape the parent is null
      parentIndex: |-
        ```
        readonly parentIndex: number
        ```

        Returns the index of the current shape in the parent
      x: |-
        ```
        x: number
        ```

        The x-coordinate of the shape's position.
      y: |-
        ```
        y: number
        ```

        The y-coordinate of the shape's position.
      width: |-
        ```
        readonly width: number
        ```

        The width of the shape.
      height: |-
        ```
        readonly height: number
        ```

        The height of the shape.
      bounds: |-
        ```
        readonly bounds: Bounds
        ```

        The bounding box surrounding the current shape
      center: |-
        ```
        readonly center: Point
        ```

        The geometric center of the shape
      blocked: |-
        ```
        blocked: boolean
        ```

        Indicates whether the shape is blocked.
      hidden: |-
        ```
        hidden: boolean
        ```

        Indicates whether the shape is hidden.
      visible: |-
        ```
        visible: boolean
        ```

        Indicates whether the shape is visible.
      proportionLock: |-
        ```
        proportionLock: boolean
        ```

        Indicates whether the shape has proportion lock enabled.
      constraintsHorizontal: |-
        ```
        constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"
        ```

        The horizontal constraints applied to the shape.
      constraintsVertical: |-
        ```
        constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"
        ```

        The vertical constraints applied to the shape.
      fixedWhenScrolling: |-
        ```
        fixedWhenScrolling: boolean
        ```

        Indicates whether the shape stays fixed in place while scrolling.
      borderRadius: |-
        ```
        borderRadius: number
        ```

        The border radius of the shape.
      borderRadiusTopLeft: |-
        ```
        borderRadiusTopLeft: number
        ```

        The border radius of the top-left corner of the shape.
      borderRadiusTopRight: |-
        ```
        borderRadiusTopRight: number
        ```

        The border radius of the top-right corner of the shape.
      borderRadiusBottomRight: |-
        ```
        borderRadiusBottomRight: number
        ```

        The border radius of the bottom-right corner of the shape.
      borderRadiusBottomLeft: |-
        ```
        borderRadiusBottomLeft: number
        ```

        The border radius of the bottom-left corner of the shape.
      opacity: |-
        ```
        opacity: number
        ```

        The opacity of the shape.
      blendMode: |-
        ```
        blendMode:
            | "difference"
            | "normal"
            | "darken"
            | "multiply"
            | "color-burn"
            | "lighten"
            | "screen"
            | "color-dodge"
            | "overlay"
            | "soft-light"
            | "hard-light"
            | "exclusion"
            | "hue"
            | "saturation"
            | "color"
            | "luminosity"
        ```

        The blend mode applied to the shape.
      shadows: |-
        ```
        shadows: Shadow[]
        ```

        The shadows applied to the shape.
      blur: |-
        ```
        blur?: Blur
        ```

        The blur effect applied to the shape.
      backgroundBlur: |-
        ```
        backgroundBlur?: Blur
        ```

        The background blur effect applied to the shape.
        Background blur creates a blur effect on the content behind the shape,
        rather than on the shape's own content.
      exports: |-
        ```
        exports: Export[]
        ```

        The export settings of the shape.
      boardX: |-
        ```
        boardX: number
        ```

        The x-coordinate of the shape relative to its board.
      boardY: |-
        ```
        boardY: number
        ```

        The y-coordinate of the shape relative to its board.
      parentX: |-
        ```
        parentX: number
        ```

        The x-coordinate of the shape relative to its parent.
      parentY: |-
        ```
        parentY: number
        ```

        The y-coordinate of the shape relative to its parent.
      flipX: |-
        ```
        flipX: boolean
        ```

        Indicates whether the shape is flipped horizontally.
      flipY: |-
        ```
        flipY: boolean
        ```

        Indicates whether the shape is flipped vertically.
      rotation: |-
        ```
        rotation: number
        ```

        The rotation in degrees of the shape with respect to its center.
      strokes: |-
        ```
        strokes: Stroke[]
        ```

        The strokes applied to the shape.
      layoutChild: |-
        ```
        readonly layoutChild?: LayoutChildProperties
        ```

        Layout properties for children of the shape.
      layoutCell: |-
        ```
        readonly layoutCell?: LayoutCellProperties
        ```

        Layout properties for cells in a grid layout.
      tokens: |-
        ```
        readonly tokens: {
            width: string;
            height: string;
            fill: string;
            x: string;
            y: string;
            all: string;
            borderRadiusTopLeft: string;
            borderRadiusTopRight: string;
            borderRadiusBottomRight: string;
            borderRadiusBottomLeft: string;
            shadow: string;
            strokeColor: string;
            strokeWidth: string;
            fontFamilies: string;
            fontSize: string;
            fontWeight: string;
            letterSpacing: string;
            rotation: string;
            opacity: string;
            layoutItemMinW: string;
            layoutItemMaxW: string;
            layoutItemMinH: string;
            layoutItemMaxH: string;
            rowGap: string;
            columnGap: string;
            paddingLeft: string;
            paddingTop: string;
            paddingRight: string;
            paddingBottom: string;
            marginLeft: string;
            marginTop: string;
            marginRight: string;
            marginBottom: string;
            textCase: string;
            textDecoration: string;
            typography: string;
        }
        ```

        The design tokens applied to this shape.
        It's a map property name -> token name.

        NOTE that the tokens application is by name and not by id. If there exist
        several tokens with the same name in different sets, the actual token applied
        and the value set to the attributes will depend on which sets are active
        (and will change if different sets or themes are activated later).
      interactions: |-
        ```
        readonly interactions: Interaction[]
        ```

        The interactions for the current shape.
    Methods:
      toD: |-
        ```
        toD(): string
        ```

        Converts the boolean shape to its path data representation.

        Returns string

        Returns the path data (d attribute) as a string.

        Deprecated

        Use the `d` attribute
      appendChild: |-
        ```
        appendChild(child: Shape): void
        ```

        Appends a child shape to the boolean shape.

        Parameters

        * child: Shape

          The child shape to append.

        Returns void

        Example
        ```
        boolShape.appendChild(childShape);
        ```
      insertChild: |-
        ```
        insertChild(index: number, child: Shape): void
        ```

        Inserts a child shape at the specified index within the boolean shape.

        Parameters

        * index: number

          The index at which to insert the child shape.
        * child: Shape

          The child shape to insert.

        Returns void

        Example
        ```
        boolShape.insertChild(0, childShape);
        ```
      getPluginData: |-
        ```
        getPluginData(key: string): string
        ```

        Retrieves the data for our own plugin, given a specific key.

        Parameters

        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the data associated with the key as a string.

        Example
        ```
        const data = shape.getPluginData('exampleKey');console.log(data);
        ```
      setPluginData: |-
        ```
        setPluginData(key: string, value: string): void
        ```

        Sets the plugin-specific data for the given key.

        Parameters

        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setPluginData('exampleKey', 'exampleValue');
        ```
      getPluginDataKeys: |-
        ```
        getPluginDataKeys(): string[]
        ```

        Retrieves all the keys for the plugin-specific data.

        Returns string[]

        Returns an array of strings representing all the keys.

        Example
        ```
        const keys = shape.getPluginDataKeys();console.log(keys);
        ```
      getSharedPluginData: |-
        ```
        getSharedPluginData(namespace: string, key: string): string
        ```

        If we know the namespace of an external plugin, this is the way to get their data.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the shared data associated with the key as a string.

        Example
        ```
        const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData);
        ```
      setSharedPluginData: |-
        ```
        setSharedPluginData(namespace: string, key: string, value: string): void
        ```

        Sets the shared plugin-specific data for the given namespace and key.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue');
        ```
      getSharedPluginDataKeys: |-
        ```
        getSharedPluginDataKeys(namespace: string): string[]
        ```

        Retrieves all the keys for the shared plugin-specific data in the given namespace.

        Parameters

        * namespace: string

          The namespace for the shared data.

        Returns string[]

        Returns an array of strings representing all the keys in the namespace.

        Example
        ```
        const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys);
        ```
      setParentIndex: |-
        ```
        setParentIndex(index: number): void
        ```

        Changes the index inside the parent of the current shape.
        This method will shift the indexes of the shapes around that position to
        match the index.
        If the index is greater than the number of elements it will positioned last.

        Parameters

        * index: number

          the new index for the shape to be in

        Returns void
      isComponentInstance: |-
        ```
        isComponentInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component instance
      isComponentMainInstance: |-
        ```
        isComponentMainInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component **main** instance
      isComponentCopyInstance: |-
        ```
        isComponentCopyInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component **copy** instance
      isComponentRoot: |-
        ```
        isComponentRoot(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the root of a component tree
      isComponentHead: |-
        ```
        isComponentHead(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the head of a components tree nested structure
      componentRefShape: |-
        ```
        componentRefShape(): Shape | null
        ```

        Returns Shape | null

        Returns the equivalent shape in the component main instance. If the current shape is inside a
        main instance will return `null`;
      componentRoot: |-
        ```
        componentRoot(): Shape | null
        ```

        Returns Shape | null

        Returns the root of the component tree structure for the current shape. If the current shape
        is already a root will return itself.
      componentHead: |-
        ```
        componentHead(): Shape | null
        ```

        Returns Shape | null

        Returns the head of the component tree structure for the current shape. If the current shape
        is already a head will return itself.
      component: |-
        ```
        component(): LibraryComponent | null
        ```

        Returns LibraryComponent | null

        If the shape is a component instance, returns the reference to the component associated
        otherwise will return null
      detach: |-
        ```
        detach(): void
        ```

        If the current shape is a component it will remove the component information and leave the
        shape as a "basic shape"

        Returns void
      swapComponent: |-
        ```
        swapComponent(component: LibraryComponent): void
        ```

        Swaps the component instance for another component, keeping the overrides
        when possible. Similar to the "swap component" action on the Penpot interface.
        The current shape must be a component copy instance.

        Parameters

        * component: LibraryComponent

          The new component to replace the current one

        Returns void
      resetOverrides: |-
        ```
        resetOverrides(): void
        ```

        Resets the overrides of the component copy, restoring all its attributes
        (and those of its children) to the ones in the linked main component.
        Similar to the "reset overrides" action on the Penpot interface.
        The current shape must be a component copy instance.

        Returns void
      switchVariant: |-
        ```
        switchVariant(pos: number, value: string): void
        ```

        Switch a VariantComponent copy to the nearest one that has the specified property value

        Parameters

        * pos: number

          The position of the property to update
        * value: string

          The new value of the property

        Returns void
      combineAsVariants: |-
        ```
        combineAsVariants(ids: string[]): VariantContainer
        ```

        Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu
        on the Penpot interface.
        The current shape must be a component main instance.

        Parameters

        * ids: string[]

          A list of ids of the main instances of the components to combine with this one.

        Returns VariantContainer

        The variant container created
      isVariantHead: |-
        ```
        isVariantHead(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the head of a components tree nested structure,
        and that component is a VariantComponent
      resize: |-
        ```
        resize(width: number, height: number): void
        ```

        Resizes the shape to the specified width and height.

        Parameters

        * width: number

          The new width of the shape.
        * height: number

          The new height of the shape.

        Returns void

        Example
        ```
        shape.resize(200, 100);
        ```
      rotate: |-
        ```
        rotate(angle: number, center?: { x: number; y: number } | null): void
        ```

        Rotates the shape in relation with the given center.

        Parameters

        * angle: number

          Angle in degrees to rotate.
        * center: { x: number; y: number } | null

          Center of the transform rotation. If not sent it will use the geometric center of the shape.

        Returns void

        Example
        ```
        shape.rotate(45);
        ```
      bringToFront: |-
        ```
        bringToFront(): void
        ```

        Moves the current shape to the front of its siblings

        Returns void
      bringForward: |-
        ```
        bringForward(): void
        ```

        Moves the current shape one position forward in its list of siblings

        Returns void
      sendToBack: |-
        ```
        sendToBack(): void
        ```

        Moves the current shape to the back of its siblings

        Returns void
      sendBackward: |-
        ```
        sendBackward(): void
        ```

        Moves the current shape one position backwards in its list of siblings

        Returns void
      export: |-
        ```
        export(config: Export): Promise<Uint8Array<ArrayBufferLike>>
        ```

        Generates an export from the current shape.

        Parameters

        * config: Export

        Returns Promise<Uint8Array<ArrayBufferLike>>

        Example
        ```
        shape.export({ type: 'png', scale: 2 });
        ```
      addInteraction: |-
        ```
        addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction
        ```

        Adds a new interaction to the shape.

        If the interaction starts a flow (for example a `navigate-to` action) and
        the shape's board is not already part of any flow, a new flow starting at
        that board is created automatically, matching the behavior of the editor.

        Parameters

        * trigger: Trigger

          defines the conditions under which the action will be triggered
        * action: Action

          defines what will be executed when the trigger happens
        * delay: number

          for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise.

        Returns Interaction

        Example
        ```
        shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard });
        ```
      removeInteraction: |-
        ```
        removeInteraction(interaction: Interaction): void
        ```

        Removes the interaction from the shape.

        Parameters

        * interaction: Interaction

          is the interaction to remove from the shape

        Returns void

        Example
        ```
        shape.removeInteraction(interaction);
        ```
      applyToken: |-
        ```
        applyToken(token: Token, properties?: TokenProperty[]): void
        ```

        Applies one design token to one or more properties of the shape.

        Parameters

        * token: Token

          is the Token to apply
        * properties: TokenProperty[]

          an optional list of property names. If omitted, the
          default properties will be applied.

          NOTE that the tokens application is by name and not by id. If there exist
          several tokens with the same name in different sets, the actual token applied
          and the value set to the attributes will depend on which sets are active
          (and will change if different sets or themes are activated later).

        Returns void
      clone: |-
        ```
        clone(): Shape
        ```

        Creates a clone of the shape.

        Returns Shape

        Returns a new instance of the shape with identical properties.
      remove: |-
        ```
        remove(): void
        ```

        Removes the shape from its parent.

        Returns void
CloseOverlay:
  overview: |-
    Interface CloseOverlay
    ======================

    This action will close a targeted board that is opened as an overlay.

    ```
    interface CloseOverlay {
        type: "close-overlay";
        destination?: Board;
        animation?: Animation;
    }
    ```

    Referenced by: Action
  members:
    Properties:
      type: |-
        ```
        readonly type: "close-overlay"
        ```

        The action type
      destination: |-
        ```
        readonly destination?: Board
        ```

        The overlay to be closed with this action.
      animation: |-
        ```
        readonly animation?: Animation
        ```

        Animation displayed with this interaction. Omit it to close with no transition.
Color:
  overview: |-
    Interface Color
    ===============

    Represents color properties in Penpot.
    This interface includes properties for defining solid colors, gradients, and image fills, along with metadata.

    ```
    interface Color {
        id?: string;
        fileId?: string;
        name?: string;
        path?: string;
        color?: string;
        opacity?: number;
        refId?: string;
        refFile?: string;
        gradient?: Gradient;
        image?: ImageData;
    }
    ```

    Referenced by: Context, Penpot, Shadow
  members:
    Properties:
      id: |-
        ```
        id?: string
        ```

        The optional reference ID for an external color definition.
      fileId: |-
        ```
        fileId?: string
        ```

        The optional reference to an external file for the color definition.
      name: |-
        ```
        name?: string
        ```

        The optional name of the color.
      path: |-
        ```
        path?: string
        ```

        The optional path or category to which this color belongs.
      color: |-
        ```
        color?: string
        ```

        The optional solid color, represented as a string (e.g., '#FF5733').
      opacity: |-
        ```
        opacity?: number
        ```

        The optional opacity level of the color, ranging from 0 (fully transparent) to 1 (fully opaque).
        Defaults to 1 if omitted.
      refId: |-
        ```
        refId?: string
        ```

        The optional reference ID for an external color definition.

        Deprecated

        Use `id` instead
      refFile: |-
        ```
        refFile?: string
        ```

        The optional reference to an external file for the color definition.

        Deprecated

        Use `fileId`
      gradient: |-
        ```
        gradient?: Gradient
        ```

        The optional gradient fill defined by a Gradient object.
      image: |-
        ```
        image?: ImageData
        ```

        The optional image fill defined by an ImageData object.
ColorShapeInfo:
  overview: |-
    Interface ColorShapeInfo
    ========================

    Additional color information for the methods to extract colors from a list of shapes.

    ```
    interface ColorShapeInfo {
        shapesInfo: ColorShapeInfoEntry[];
    }
    ```

    Referenced by: Context, Penpot
  members:
    Properties:
      shapesInfo: |-
        ```
        readonly shapesInfo: ColorShapeInfoEntry[]
        ```

        List of shapes with additional information
ColorShapeInfoEntry:
  overview: |-
    Interface ColorShapeInfoEntry
    =============================

    Entry for the color shape additional information.

    ```
    interface ColorShapeInfoEntry {
        property: string;
        index?: number;
        shapeId: string;
    }
    ```

    Referenced by: ColorShapeInfo
  members:
    Properties:
      property: |-
        ```
        readonly property: string
        ```

        Property that has the color (example: fill, stroke...)
      index: |-
        ```
        readonly index?: number
        ```

        For properties that are indexes (such as fill) represent the index
        of the color inside that property.
      shapeId: |-
        ```
        readonly shapeId: string
        ```

        Identifier of the shape that contains the color
Comment:
  overview: |-
    Interface Comment
    =================

    Comments allow the team to have one priceless conversation getting and
    providing feedback right over the designs and prototypes.

    ```
    interface Comment {
        user: User;
        date: Date;
        content: string;
        remove(): void;
    }
    ```

    Referenced by: CommentThread
  members:
    Properties:
      user: |-
        ```
        readonly user: User
        ```

        The `user` that has created the comment.
      date: |-
        ```
        readonly date: Date
        ```

        The `date` the comment has been created.
      content: |-
        ```
        content: string
        ```

        The `content` for the commentary. The owner can modify the comment.
    Methods:
      remove: |-
        ```
        remove(): void
        ```

        Remove the current comment from its comment thread. Only the owner can remove their comments.
        Requires the `comment:write` permission.

        Returns void
CommentThread:
  overview: |-
    Interface CommentThread
    =======================

    Represents a list of comments one after the other. Usually these threads
    are conversations the users have in Penpot.

    ```
    interface CommentThread {
        seqNumber: number;
        board?: Board;
        owner?: User;
        position: Point;
        resolved: boolean;
        findComments(): Promise<Comment[]>;
        reply(content: string): Promise<Comment>;
        remove(): void;
    }
    ```

    Referenced by: Page
  members:
    Properties:
      seqNumber: |-
        ```
        readonly seqNumber: number
        ```

        This is the number that is displayed on the workspace. Is an increasing
        sequence for each comment.
      board: |-
        ```
        readonly board?: Board
        ```

        If the thread is attached to a `board` this will have that board
        reference.
      owner: |-
        ```
        readonly owner?: User
        ```

        Owner of the comment thread
      position: |-
        ```
        position: Point
        ```

        The `position` in absolute coordinates in the canvas.
      resolved: |-
        ```
        resolved: boolean
        ```

        Whether the thread has been marked as `resolved` or not.
    Methods:
      findComments: |-
        ```
        findComments(): Promise<Comment[]>
        ```

        List of `comments` ordered by creation date.
        Requires the `comment:read` or `comment:write` permission.

        Returns Promise<Comment[]>
      reply: |-
        ```
        reply(content: string): Promise<Comment>
        ```

        Creates a new comment after the last one in the thread. The current user will
        be used as the creation user.
        Requires the `comment:write` permission.

        Parameters

        * content: string

        Returns Promise<Comment>
      remove: |-
        ```
        remove(): void
        ```

        Removes the current comment thread. Only the user that created the thread can
        remove it.
        Requires the `comment:write` permission.

        Returns void
CommonLayout:
  overview: |-
    Interface CommonLayout
    ======================

    CommonLayout represents a common layout interface in the Penpot application.
    It includes various properties for alignment, spacing, padding, and sizing, as well as a method to remove the layout.

    ```
    interface CommonLayout {
        alignItems?: "end" | "start" | "center" | "stretch";
        alignContent?:
            | "end"
            | "start"
            | "center"
            | "stretch"
            | "space-between"
            | "space-around"
            | "space-evenly";
        justifyItems?: "end"
        | "start"
        | "center"
        | "stretch";
        justifyContent?:
            | "end"
            | "start"
            | "center"
            | "stretch"
            | "space-between"
            | "space-around"
            | "space-evenly";
        rowGap: number;
        columnGap: number;
        verticalPadding: number;
        horizontalPadding: number;
        topPadding: number;
        rightPadding: number;
        bottomPadding: number;
        leftPadding: number;
        horizontalSizing: "fill"
        | "auto"
        | "fix";
        verticalSizing: "fill" | "auto" | "fix";
        remove(): void;
    }
    ```

    Hierarchy (View Summary)

    * CommonLayout
      + FlexLayout
      + GridLayout
  members:
    Properties:
      alignItems: |-
        ```
        alignItems?: "end" | "start" | "center" | "stretch"
        ```

        The `alignItems` property specifies the default alignment for items inside the container.
        It can be one of the following values:

        * 'start': Items are aligned at the start.
        * 'end': Items are aligned at the end.
        * 'center': Items are centered.
        * 'stretch': Items are stretched to fill the container.
      alignContent: |-
        ```
        alignContent?:
            | "end"
            | "start"
            | "center"
            | "stretch"
            | "space-between"
            | "space-around"
            | "space-evenly"
        ```

        The `alignContent` property specifies how the content is aligned within the container when there is extra space.
        It can be one of the following values:

        * 'start': Content is aligned at the start.
        * 'end': Content is aligned at the end.
        * 'center': Content is centered.
        * 'space-between': Content is distributed with space between.
        * 'space-around': Content is distributed with space around.
        * 'space-evenly': Content is distributed with even space around.
        * 'stretch': Content is stretched to fill the container.
      justifyItems: |-
        ```
        justifyItems?: "end" | "start" | "center" | "stretch"
        ```

        The `justifyItems` property specifies the default justification for items inside the container.
        It can be one of the following values:

        * 'start': Items are justified at the start.
        * 'end': Items are justified at the end.
        * 'center': Items are centered.
        * 'stretch': Items are stretched to fill the container.
      justifyContent: |-
        ```
        justifyContent?:
            | "end"
            | "start"
            | "center"
            | "stretch"
            | "space-between"
            | "space-around"
            | "space-evenly"
        ```

        The `justifyContent` property specifies how the content is justified within the container when there is extra space.
        It can be one of the following values:

        * 'start': Content is justified at the start.
        * 'center': Content is centered.
        * 'end': Content is justified at the end.
        * 'space-between': Content is distributed with space between.
        * 'space-around': Content is distributed with space around.
        * 'space-evenly': Content is distributed with even space around.
        * 'stretch': Content is stretched to fill the container.
      rowGap: |-
        ```
        rowGap: number
        ```

        The `rowGap` property specifies the gap between rows in the layout.
      columnGap: |-
        ```
        columnGap: number
        ```

        The `columnGap` property specifies the gap between columns in the layout.
      verticalPadding: |-
        ```
        verticalPadding: number
        ```

        The `verticalPadding` property specifies the vertical padding inside the container.
      horizontalPadding: |-
        ```
        horizontalPadding: number
        ```

        The `horizontalPadding` property specifies the horizontal padding inside the container.
      topPadding: |-
        ```
        topPadding: number
        ```

        The `topPadding` property specifies the padding at the top of the container.
      rightPadding: |-
        ```
        rightPadding: number
        ```

        The `rightPadding` property specifies the padding at the right of the container.
      bottomPadding: |-
        ```
        bottomPadding: number
        ```

        The `bottomPadding` property specifies the padding at the bottom of the container.
      leftPadding: |-
        ```
        leftPadding: number
        ```

        The `leftPadding` property specifies the padding at the left of the container.
      horizontalSizing: |-
        ```
        horizontalSizing: "fill" | "auto" | "fix"
        ```

        The `horizontalSizing` property specifies the horizontal sizing behavior of the container.
        It can be one of the following values:

        * 'fix': The container has its own intrinsic fixed size.
        * 'fill': The container fills the available space. Only can be set if it's inside another layout.
        * 'auto': The container fits the content.
      verticalSizing: |-
        ```
        verticalSizing: "fill" | "auto" | "fix"
        ```

        The `verticalSizing` property specifies the vertical sizing behavior of the container.
        It can be one of the following values:

        * 'fix': The container has its own intrinsic fixed size.
        * 'fill': The container fills the available space. Only can be set if it's inside another layout.
        * 'auto': The container fits the content.
    Methods:
      remove: |-
        ```
        remove(): void
        ```

        The `remove` method removes the layout.

        Returns void
Context:
  overview: |-
    Interface Context
    =================

    Represents the context of Penpot, providing access to various Penpot functionalities and data.

    ```
    interface Context {
        version: string;
        root: Shape | null;
        currentFile: File | null;
        currentPage: Page | null;
        viewport: Viewport;
        flags: Flags;
        history: HistoryContext;
        library: LibraryContext;
        fonts: FontsContext;
        currentUser: User;
        activeUsers: ActiveUser[];
        theme: Theme;
        localStorage: LocalStorage;
        selection: Shape[];
        shapesColors(shapes: Shape[]): (Color & ColorShapeInfo)[];
        replaceColor(shapes: Shape[], oldColor: Color, newColor: Color): void;
        uploadMediaUrl(name: string, url: string): Promise<ImageData>;
        uploadMediaData(
            name: string,
            data: Uint8Array,
            mimeType: string,
        ): Promise<ImageData>;
        group(shapes: Shape[]): Group | null;
        ungroup(group: Group, ...other: Group[]): void;
        createRectangle(): Rectangle;
        createBoard(): Board;
        createEllipse(): Ellipse;
        createPath(): Path;
        createBoolean(boolType: BooleanType, shapes: Shape[]): Boolean | null;
        createShapeFromSvg(svgString: string): Group | null;
        createShapeFromSvgWithImages(svgString: string): Promise<Group | null>;
        createText(text: string): Text | null;
        generateMarkup(
            shapes: Shape[],
            options?: { type?: "html" | "svg" },
        ): string;
        generateStyle(
            shapes: Shape[],
            options?: {
                type?: "css";
                withPrelude?: boolean;
                includeChildren?: boolean;
            },
        ): string;
        generateFontFaces(shapes: Shape[]): Promise<string>;
        addListener<T extends keyof EventsMap>(
            type: T,
            callback: (event: EventsMap[T]) => void,
            props?: { [key: string]: unknown },
        ): symbol;
        removeListener(listenerId: symbol): void;
        openViewer(): void;
        createPage(): Page;
        openPage(page: string | Page, newWindow?: boolean): Promise<void>;
        alignHorizontal(
            shapes: Shape[],
            direction: "center" | "left" | "right",
        ): void;
        alignVertical(
            shapes: Shape[],
            direction: "center" | "top" | "bottom",
        ): void;
        distributeHorizontal(shapes: Shape[]): void;
        distributeVertical(shapes: Shape[]): void;
        flatten(shapes: Shape[]): Path[];
        createVariantFromComponents(shapes: Board[]): VariantContainer;
    }
    ```
  members:
    Properties:
      version: |-
        ```
        readonly version: string
        ```

        Returns the current penpot version.
      root: |-
        ```
        readonly root: Shape | null
        ```

        The root shape in the current Penpot context. Requires `content:read` permission.

        Example
        ```
        const rootShape = context.root;console.log(rootShape);
        ```
      currentFile: |-
        ```
        readonly currentFile: File | null
        ```

        Retrieves file data from the current Penpot context. Requires `content:read` permission.

        Returns

        Returns the file data or `null` if no file is available.

        Example
        ```
        const fileData = context.currentFile;console.log(fileData);
        ```
      currentPage: |-
        ```
        readonly currentPage: Page | null
        ```

        The current page in the Penpot context. Requires `content:read` permission.

        Example
        ```
        const currentPage = context.currentPage;console.log(currentPage);
        ```
      viewport: |-
        ```
        readonly viewport: Viewport
        ```

        The viewport settings in the Penpot context.

        Example
        ```
        const viewportSettings = context.viewport;console.log(viewportSettings);
        ```
      flags: |-
        ```
        readonly flags: Flags
        ```

        Provides flags to customize the API behavior.
      history: |-
        ```
        readonly history: HistoryContext
        ```

        Context encapsulating the history operations

        Example
        ```
        const historyContext = context.history;console.log(historyContext);
        ```
      library: |-
        ```
        readonly library: LibraryContext
        ```

        The library context in the Penpot context, including both local and connected libraries. Requires `library:read` permission.

        Example
        ```
        const libraryContext = context.library;console.log(libraryContext);
        ```
      fonts: |-
        ```
        readonly fonts: FontsContext
        ```

        The fonts context in the Penpot context, providing methods to manage fonts. Requires `content:read` permission.

        Example
        ```
        const fontsContext = context.fonts;console.log(fontsContext);
        ```
      currentUser: |-
        ```
        readonly currentUser: User
        ```

        The current user in the Penpot context. Requires `user:read` permission.

        Example
        ```
        const currentUser = context.currentUser;console.log(currentUser);
        ```
      activeUsers: |-
        ```
        readonly activeUsers: ActiveUser[]
        ```

        An array of active users in the Penpot context. Requires `user:read` permission.

        Example
        ```
        const activeUsers = context.activeUsers;console.log(activeUsers);
        ```
      theme: |-
        ```
        readonly theme: Theme
        ```

        The current theme (light or dark) in Penpot.

        Example
        ```
        const currentTheme = context.theme;console.log(currentTheme);
        ```
      localStorage: |-
        ```
        readonly localStorage: LocalStorage
        ```

        Access to the localStorage proxy
      selection: |-
        ```
        selection: Shape[]
        ```

        The currently selected shapes in Penpot. Requires `content:read` permission.

        Example
        ```
        const selectedShapes = context.selection;console.log(selectedShapes);
        ```
    Methods:
      shapesColors: |-
        ```
        shapesColors(shapes: Shape[]): (Color & ColorShapeInfo)[]
        ```

        Retrieves colors applied to the given shapes in Penpot. Requires `content:read` permission.

        Parameters

        * shapes: Shape[]

        Returns (Color & ColorShapeInfo)[]

        Returns an array of colors and their shape information.

        Example
        ```
        const colors = context.shapesColors(shapes);console.log(colors);
        ```
      replaceColor: |-
        ```
        replaceColor(shapes: Shape[], oldColor: Color, newColor: Color): void
        ```

        Replaces a specified old color with a new color in the given shapes. Requires `content:write` permission.

        Parameters

        * shapes: Shape[]
        * oldColor: Color
        * newColor: Color

        Returns void

        Example
        ```
        context.replaceColor(shapes, oldColor, newColor);
        ```
      uploadMediaUrl: |-
        ```
        uploadMediaUrl(name: string, url: string): Promise<ImageData>
        ```

        Uploads media to Penpot and retrieves its image data. Requires `content:write` permission.

        Parameters

        * name: string

          The name of the media.
        * url: string

          The URL of the media to be uploaded.

        Returns Promise<ImageData>

        Returns a promise that resolves to the image data of the uploaded media.

        Example
        ```
        const imageData = await context.uploadMediaUrl('example', 'https://example.com/image.jpg');console.log(imageData);// to insert the image in a shape we can doconst board = penpot.createBoard();const shape = penpot.createRectangle();board.appendChild(shape);shape.fills = [{ fillOpacity: 1, fillImage: imageData }];
        ```
      uploadMediaData: |-
        ```
        uploadMediaData(
            name: string,
            data: Uint8Array,
            mimeType: string,
        ): Promise<ImageData>
        ```

        Uploads media to penpot and retrieves the image data. Requires `content:write` permission.

        Parameters

        * name: string

          The name of the media.
        * data: Uint8Array

          The image content data
        * mimeType: string

        Returns Promise<ImageData>

        Returns a promise that resolves to the image data of the uploaded media.

        Example
        ```
        const imageData = await context.uploadMediaData('example', imageData, 'image/jpeg');console.log(imageData);
        ```
      group: |-
        ```
        group(shapes: Shape[]): Group | null
        ```

        Groups the specified shapes. Requires `content:write` permission.

        Parameters

        * shapes: Shape[]

          An array of shapes to group.

        Returns Group | null

        Returns the newly created group or `null` if the group could not be created.

        Example
        ```
        const penpotShapesArray = penpot.selection;penpot.group(penpotShapesArray);
        ```
      ungroup: |-
        ```
        ungroup(group: Group, ...other: Group[]): void
        ```

        Ungroups the specified group. Requires `content:write` permission.

        Parameters

        * group: Group

          The group to ungroup.
        * ...other: Group[]

          Additional groups to ungroup.

        Returns void

        Example
        ```
        const penpotShapesArray = penpot.selection;// We need to make sure that something is selected, and that the selected shape is a groupif (penpotShapesArray.length && penpot.utils.types.isGroup(penpotShapesArray[0])) {  penpot.ungroup(penpotShapesArray[0]);}
        ```
      createRectangle: |-
        ```
        createRectangle(): Rectangle
        ```

        Use this method to create the shape of a rectangle. Requires `content:write` permission.

        Returns Rectangle

        Example
        ```
        const shape = penpot.createRectangle();// just change the values like thisshape.name = "Example rectangle";// for solid colorshape.fills = [{ fillColor: "#7EFFF5" }];// for linear gradient colorshape.fills = [{ fillColorGradient: {   "type": "linear",   "startX": 0.5,   "startY": 0,   "endX": 0.5,   "endY": 1,   "width": 1,   "stops": [     {       "color": "#003ae9",       "opacity": 1,       "offset": 0     },     {       "color": "#003ae9",       "opacity": 0,       "offset": 1     }   ] }}];// for a image fillconst imageData = await context.uploadMediaUrl('example', 'https://example.com/image.jpg');shape.fills = [{ fillOpacity: 1, fillImage: imageData }];shape.borderRadius = 8;shape.strokes = [ {   strokeColor: "#2e3434",   strokeStyle: "solid",   strokeWidth: 2,   strokeAlignment: "center", },];
        ```
      createBoard: |-
        ```
        createBoard(): Board
        ```

        Use this method to create a board. This is the first step before anything else, the container. Requires `content:write` permission.
        Then you can add a gridlayout, flexlayout or add a shape inside the board.
        Just a heads-up: board is a board in Penpot UI.

        Returns Board

        Example
        ```
        const board = penpot.createBoard();// to add grid layoutboard.addGridLayout();// to add flex layoutboard.addFlexLayout();// to create a shape inside the boardconst shape = penpot.createRectangle();board.appendChild(shape);
        ```
      createEllipse: |-
        ```
        createEllipse(): Ellipse
        ```

        Use this method to create the shape of an ellipse. Requires `content:write` permission.

        Returns Ellipse

        Example
        ```
        const shape = penpot.createEllipse();// just change the values like thisshape.name = "Example ellipse";// for solid colorshape.fills = [{ fillColor: "#7EFFF5" }];// for linear gradient colorshape.fills = [{ fillColorGradient: {   "type": "linear",   "startX": 0.5,   "startY": 0,   "endX": 0.5,   "endY": 1,   "width": 1,   "stops": [     {       "color": "#003ae9",       "opacity": 1,       "offset": 0     },     {       "color": "#003ae9",       "opacity": 0,       "offset": 1     }   ] }}];// for an image fillconst imageData = await context.uploadMediaUrl('example', 'https://example.com/image.jpg');shape.fills = [{ fillOpacity: 1, fillImage: imageData }];shape.strokes = [ {   strokeColor: "#2e3434",   strokeStyle: "solid",   strokeWidth: 2,   strokeAlignment: "center", },];
        ```
      createPath: |-
        ```
        createPath(): Path
        ```

        Use this method to create a path. Requires `content:write` permission.

        Returns Path

        Example
        ```
        const path = penpot.createPath();path.name = "My path";// for solid colorpath.fills = [{ fillColor: "#7EFFF5" }];
        ```
      createBoolean: |-
        ```
        createBoolean(boolType: BooleanType, shapes: Shape[]): Boolean | null
        ```

        Creates a Boolean shape based on the specified boolean operation and shapes. Requires `content:write` permission.

        Parameters

        * boolType: BooleanType

          The type of boolean operation ('union', 'difference', 'exclude', 'intersection').
        * shapes: Shape[]

          An array of shapes to perform the boolean operation on.

        Returns Boolean | null

        Returns the newly created Boolean shape resulting from the boolean operation.

        Example
        ```
        const booleanShape = context.createBoolean('union', [shape1, shape2]);
        ```
      createShapeFromSvg: |-
        ```
        createShapeFromSvg(svgString: string): Group | null
        ```

        Creates a Group from an SVG string. Requires `content:write` permission.

        Parameters

        * svgString: string

          The SVG string representing the shapes to be converted into a group.

        Returns Group | null

        Returns the newly created Group containing the shapes from the SVG.

        Example
        ```
        const svgGroup = context.createShapeFromSvg('<svg>...</svg>');
        ```
      createShapeFromSvgWithImages: |-
        ```
        createShapeFromSvgWithImages(svgString: string): Promise<Group | null>
        ```

        Creates a Group from an SVG string. The SVG can have images and the method returns
        a Promise because the shape will be available after all images are uploaded.
        Requires `content:write` permission.

        Parameters

        * svgString: string

          The SVG string representing the shapes to be converted into a group.

        Returns Promise<Group | null>

        Returns a promise with the newly created Group containing the shapes from the SVG.

        Example
        ```
        const svgGroup = await context.createShapeFromSvgWithImages('<svg>...</svg>');
        ```
      createText: |-
        ```
        createText(text: string): Text | null
        ```

        Creates a Text shape with the specified text content. Requires `content:write` permission.

        Parameters

        * text: string

          The text content for the Text shape. Must be a non-empty string.

        Returns Text | null

        Returns the new created shape. Returns null if an empty string is provided or the shape couldn't be created.

        Example
        ```
        const board = penpot.createBoard();let text;text = penpot.createText();// just change the values like thistext.growType = 'auto-height';text.fontFamily = 'Work Sans';text.fontSize = '12';text.fills = [{fillColor: '#9f05ff', fillOpacity: 1}];text.strokes = [{strokeOpacity: 1, strokeStyle: 'solid', strokeWidth: 2, strokeColor: '#deabff', strokeAlignment: 'outer'}];board.appendChild(text);
        ```
      generateMarkup: |-
        ```
        generateMarkup(shapes: Shape[], options?: { type?: "html" | "svg" }): string
        ```

        Generates markup for the given shapes. Requires `content:read` permission

        Parameters

        * shapes: Shape[]

          the shapes to generate the markup for
        * options: { type?: "html" | "svg" }

          `type` of the markup to generate. Defaults to `'html'`.

        Returns string

        Example
        ```
        const markup = context.generateMarkup(shapes, { type: 'html' });console.log(markup);
        ```
      generateStyle: |-
        ```
        generateStyle(
            shapes: Shape[],
            options?: {
                type?: "css";
                withPrelude?: boolean;
                includeChildren?: boolean;
            },
        ): string
        ```

        Generates styles for the given shapes. Requires `content:read` permission

        Parameters

        * shapes: Shape[]

          the shapes to generate the styles for
        * options: { type?: "css"; withPrelude?: boolean; includeChildren?: boolean }

          `type` of the styles to generate (defaults to `'css'`), `withPrelude` to include the style prelude
          (defaults to `false`) and `includeChildren` to also generate the styles for the shape children (defaults to `true`).

        Returns string

        Example
        ```
        const styles = context.generateStyle(shapes, { type: 'css' });console.log(styles);
        ```
      generateFontFaces: |-
        ```
        generateFontFaces(shapes: Shape[]): Promise<string>
        ```

        Generates the fontfaces styles necessaries to render the shapes.
        Requires `content:read` permission

        Parameters

        * shapes: Shape[]

        Returns Promise<string>

        Example
        ```
        const fontfaces = context.generateFontFaces(penpot.selection);console.log(fontfaces);
        ```
      addListener: |-
        ```
        addListener<T extends keyof EventsMap>(
            type: T,
            callback: (event: EventsMap[T]) => void,
            props?: { [key: string]: unknown },
        ): symbol
        ```

        Adds the current callback as an event listener

        Type Parameters

        * T extends keyof EventsMap

        Parameters

        * type: T
        * callback: (event: EventsMap[T]) => void
        * props: { [key: string]: unknown }

        Returns symbol

        Example
        ```
        const listenerId = context.addListener('selectionchange', (event) => {  console.log(event);});
        ```
      removeListener: |-
        ```
        removeListener(listenerId: symbol): void
        ```

        Removes the listenerId from the list of listeners

        Parameters

        * listenerId: symbol

        Returns void

        Example
        ```
        context.removeListener(listenerId);
        ```
      openViewer: |-
        ```
        openViewer(): void
        ```

        Opens the viewer section. Requires `content:read` permission.

        Returns void
      createPage: |-
        ```
        createPage(): Page
        ```

        Creates a new page and returns it. Requires `content:write` permission.

        IMPORTANT: creating a page does **not** make it the active page.
        To build content inside the new page, activate it first with
        Context.openPage (and `await` it) before mutate shapes:

        Returns Page

        Example
        ```
        const page = penpot.createPage();page.name = 'New Page';await penpot.openPage(page); // make the new page active firstconst board = penpot.createBoard();board.resize(375, 812);page.root.appendChild(board);
        ```
      openPage: |-
        ```
        openPage(page: string | Page, newWindow?: boolean): Promise<void>
        ```

        Changes the current open page to the given page, making it the **active page**.
        The active page is the one all shape creation and structural operations
        (`createBoard`, `appendChild`, `insertChild`, property setters, etc.) act upon,
        so call this (and `await` it) after Context.createPage before adding
        shapes to the newly created page. Requires `content:read` permission.

        Parameters

        * page: string | Page

          the page to open (a Page object or a page UUID string)
        * newWindow: boolean

          if true opens the page in a new window, defaults to false

        Returns Promise<void>

        Example
        ```
        await context.openPage(page);
        ```
      alignHorizontal: |-
        ```
        alignHorizontal(shapes: Shape[], direction: "center" | "left" | "right"): void
        ```

        Aligning will move all the selected layers to a position relative to one
        of them in the horizontal direction.

        Parameters

        * shapes: Shape[]

          to align
        * direction: "center" | "left" | "right"

          where the shapes will be aligned

        Returns void
      alignVertical: |-
        ```
        alignVertical(shapes: Shape[], direction: "center" | "top" | "bottom"): void
        ```

        Aligning will move all the selected layers to a position relative to one
        of them in the vertical direction.

        Parameters

        * shapes: Shape[]

          to align
        * direction: "center" | "top" | "bottom"

          where the shapes will be aligned

        Returns void
      distributeHorizontal: |-
        ```
        distributeHorizontal(shapes: Shape[]): void
        ```

        Distributing objects to position them horizontally with equal distances between them.

        Parameters

        * shapes: Shape[]

          to distribute

        Returns void
      distributeVertical: |-
        ```
        distributeVertical(shapes: Shape[]): void
        ```

        Distributing objects to position them vertically with equal distances between them.

        Parameters

        * shapes: Shape[]

          to distribute

        Returns void
      flatten: |-
        ```
        flatten(shapes: Shape[]): Path[]
        ```

        Converts the shapes into Paths. If the shapes are complex will put together
        all its paths into one.

        Parameters

        * shapes: Shape[]

          to flatten

        Returns Path[]
      createVariantFromComponents: |-
        ```
        createVariantFromComponents(shapes: Board[]): VariantContainer
        ```

        Combine several standard Components into a VariantComponent. Similar to doing it
        with the contextual menu on the Penpot interface.
        All the shapes passed as arguments should be main instances.

        Parameters

        * shapes: Board[]

          A list of main instances of the components to combine.

        Returns VariantContainer

        The variant container created
ContextGeometryUtils:
  overview: |-
    Interface ContextGeometryUtils
    ==============================

    Utility methods for geometric calculations in Penpot.

    Example
    ```
    const centerPoint = geometryUtils.center(shapes);console.log(centerPoint);
    ```

    ```
    interface ContextGeometryUtils {
        center(shapes: Shape[]): { x: number; y: number } | null;
    }
    ```

    Referenced by: ContextUtils
  members:
    Methods:
      center: |-
        ```
        center(shapes: Shape[]): { x: number; y: number } | null
        ```

        Calculates the center point of a given array of shapes.
        This method computes the geometric center (centroid) of the bounding boxes of the provided shapes.

        Parameters

        * shapes: Shape[]

          The array of shapes to calculate the center for.

        Returns { x: number; y: number } | null

        Returns the center point as an object with `x` and `y` coordinates, or null if the array is empty.

        Example
        ```
        const centerPoint = geometryUtils.center(shapes);console.log(centerPoint);
        ```
ContextTypesUtils:
  overview: |-
    Interface ContextTypesUtils
    ===========================

    Utility methods for determining the types of Penpot shapes.

    Example
    ```
    const isBoard = typesUtils.isBoard(shape);console.log(isBoard);
    ```

    ```
    interface ContextTypesUtils {
        isBoard(shape: Shape): shape is Board;
        isGroup(shape: Shape): shape is Group;
        isMask(shape: Shape): shape is Group;
        isBool(shape: Shape): shape is Boolean;
        isRectangle(shape: Shape): shape is Rectangle;
        isPath(shape: Shape): shape is Path;
        isText(shape: Shape): shape is Text;
        isEllipse(shape: Shape): shape is Ellipse;
        isSVG(shape: Shape): shape is SvgRaw;
        isVariantContainer(shape: Shape): shape is VariantContainer;
        isVariantComponent(
            component: LibraryComponent,
        ): component is LibraryVariantComponent;
    }
    ```

    Referenced by: ContextUtils
  members:
    Methods:
      isBoard: |-
        ```
        isBoard(shape: Shape): shape is Board
        ```

        Checks if the given shape is a board.

        Parameters

        * shape: Shape

          The shape to check.

        Returns shape is Board

        Returns true if the shape is a board, otherwise false.
      isGroup: |-
        ```
        isGroup(shape: Shape): shape is Group
        ```

        Checks if the given shape is a group.

        Parameters

        * shape: Shape

          The shape to check.

        Returns shape is Group

        Returns true if the shape is a Group, otherwise false.
      isMask: |-
        ```
        isMask(shape: Shape): shape is Group
        ```

        Checks if the given shape is a mask.

        Parameters

        * shape: Shape

          The shape to check.

        Returns shape is Group

        Returns true if the shape is a Group (acting as a mask), otherwise false.
      isBool: |-
        ```
        isBool(shape: Shape): shape is Boolean
        ```

        Checks if the given shape is a boolean operation.

        Parameters

        * shape: Shape

          The shape to check.

        Returns shape is Boolean

        Returns true if the shape is a Bool, otherwise false.
      isRectangle: |-
        ```
        isRectangle(shape: Shape): shape is Rectangle
        ```

        Checks if the given shape is a rectangle.

        Parameters

        * shape: Shape

          The shape to check.

        Returns shape is Rectangle

        Returns true if the shape is a Rectangle, otherwise false.
      isPath: |-
        ```
        isPath(shape: Shape): shape is Path
        ```

        Checks if the given shape is a path.

        Parameters

        * shape: Shape

          The shape to check.

        Returns shape is Path

        Returns true if the shape is a Path, otherwise false.
      isText: |-
        ```
        isText(shape: Shape): shape is Text
        ```

        Checks if the given shape is a text element.

        Parameters

        * shape: Shape

          The shape to check.

        Returns shape is Text

        Returns true if the shape is a Text, otherwise false.
      isEllipse: |-
        ```
        isEllipse(shape: Shape): shape is Ellipse
        ```

        Checks if the given shape is an ellipse.

        Parameters

        * shape: Shape

          The shape to check.

        Returns shape is Ellipse

        Returns true if the shape is an Ellipse, otherwise false.
      isSVG: |-
        ```
        isSVG(shape: Shape): shape is SvgRaw
        ```

        Checks if the given shape is an SVG.

        Parameters

        * shape: Shape

          The shape to check.

        Returns shape is SvgRaw

        Returns true if the shape is a SvgRaw, otherwise false.
      isVariantContainer: |-
        ```
        isVariantContainer(shape: Shape): shape is VariantContainer
        ```

        Checks if the given shape is a variant container.

        Parameters

        * shape: Shape

          The shape to check.

        Returns shape is VariantContainer

        Returns true if the shape is a variant container, otherwise false.
      isVariantComponent: |-
        ```
        isVariantComponent(
            component: LibraryComponent,
        ): component is LibraryVariantComponent
        ```

        Checks if the given component is a VariantComponent.

        Parameters

        * component: LibraryComponent

          The component to check.

        Returns component is LibraryVariantComponent

        Returns true if the component is a VariantComponent, otherwise false.
ContextUtils:
  overview: |-
    Interface ContextUtils
    ======================

    Utility methods for various operations in Penpot.

    ```
    interface ContextUtils {
        geometry: ContextGeometryUtils;
        types: ContextTypesUtils;
    }
    ```

    Referenced by: Penpot
  members:
    Properties:
      geometry: |-
        ```
        readonly geometry: ContextGeometryUtils
        ```

        Geometry utility methods for Penpot.
        Provides methods for geometric calculations, such as finding the center of a group of shapes.

        Example
        ```
        const centerPoint = penpot.utils.geometry.center(shapes);console.log(centerPoint);
        ```
      types: |-
        ```
        readonly types: ContextTypesUtils
        ```

        Type utility methods for Penpot.
        Provides methods for determining the types of various shapes in Penpot.

        Example
        ```
        const isBoard = utils.types.isBoard(shape);console.log(isBoard);
        ```
Dissolve:
  overview: |-
    Interface Dissolve
    ==================

    Dissolve animation

    ```
    interface Dissolve {
        type: "dissolve";
        duration: number;
        easing?: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out";
    }
    ```

    Referenced by: Animation
  members:
    Properties:
      type: |-
        ```
        readonly type: "dissolve"
        ```

        Type of the animation
      duration: |-
        ```
        readonly duration: number
        ```

        Duration of the animation effect
      easing: |-
        ```
        readonly easing?: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out"
        ```

        Function that the dissolve effect will follow for the interpolation.
        Defaults to `linear`.
Ellipse:
  overview: |-
    Interface Ellipse
    =================

    Represents an ellipse shape in Penpot.
    This interface extends `ShapeBase` and includes properties specific to ellipses.

    ```
    interface Ellipse {
        type: "ellipse";
        fills: Fill[];
        getPluginData(key: string): string;
        setPluginData(key: string, value: string): void;
        getPluginDataKeys(): string[];
        getSharedPluginData(namespace: string, key: string): string;
        setSharedPluginData(namespace: string, key: string, value: string): void;
        getSharedPluginDataKeys(namespace: string): string[];
        id: string;
        name: string;
        parent: Shape | null;
        parentIndex: number;
        x: number;
        y: number;
        width: number;
        height: number;
        bounds: Bounds;
        center: Point;
        blocked: boolean;
        hidden: boolean;
        visible: boolean;
        proportionLock: boolean;
        constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale";
        constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom";
        fixedWhenScrolling: boolean;
        borderRadius: number;
        borderRadiusTopLeft: number;
        borderRadiusTopRight: number;
        borderRadiusBottomRight: number;
        borderRadiusBottomLeft: number;
        opacity: number;
        blendMode:
            | "difference"
            | "normal"
            | "darken"
            | "multiply"
            | "color-burn"
            | "lighten"
            | "screen"
            | "color-dodge"
            | "overlay"
            | "soft-light"
            | "hard-light"
            | "exclusion"
            | "hue"
            | "saturation"
            | "color"
            | "luminosity";
        shadows: Shadow[];
        blur?: Blur;
        backgroundBlur?: Blur;
        exports: Export[];
        boardX: number;
        boardY: number;
        parentX: number;
        parentY: number;
        flipX: boolean;
        flipY: boolean;
        rotation: number;
        strokes: Stroke[];
        layoutChild?: LayoutChildProperties;
        layoutCell?: LayoutCellProperties;
        setParentIndex(index: number): void;
        tokens: {
            width: string;
            height: string;
            fill: string;
            x: string;
            y: string;
            all: string;
            borderRadiusTopLeft: string;
            borderRadiusTopRight: string;
            borderRadiusBottomRight: string;
            borderRadiusBottomLeft: string;
            shadow: string;
            strokeColor: string;
            strokeWidth: string;
            fontFamilies: string;
            fontSize: string;
            fontWeight: string;
            letterSpacing: string;
            rotation: string;
            opacity: string;
            layoutItemMinW: string;
            layoutItemMaxW: string;
            layoutItemMinH: string;
            layoutItemMaxH: string;
            rowGap: string;
            columnGap: string;
            paddingLeft: string;
            paddingTop: string;
            paddingRight: string;
            paddingBottom: string;
            marginLeft: string;
            marginTop: string;
            marginRight: string;
            marginBottom: string;
            textCase: string;
            textDecoration: string;
            typography: string;
        };
        isComponentInstance(): boolean;
        isComponentMainInstance(): boolean;
        isComponentCopyInstance(): boolean;
        isComponentRoot(): boolean;
        isComponentHead(): boolean;
        componentRefShape(): Shape | null;
        componentRoot(): Shape | null;
        componentHead(): Shape | null;
        component(): LibraryComponent | null;
        detach(): void;
        swapComponent(component: LibraryComponent): void;
        resetOverrides(): void;
        switchVariant(pos: number, value: string): void;
        combineAsVariants(ids: string[]): VariantContainer;
        isVariantHead(): boolean;
        resize(width: number, height: number): void;
        rotate(angle: number, center?: { x: number; y: number } | null): void;
        bringToFront(): void;
        bringForward(): void;
        sendToBack(): void;
        sendBackward(): void;
        export(config: Export): Promise<Uint8Array<ArrayBufferLike>>;
        interactions: Interaction[];
        addInteraction(
            trigger: Trigger,
            action: Action,
            delay?: number,
        ): Interaction;
        removeInteraction(interaction: Interaction): void;
        applyToken(token: Token, properties?: TokenProperty[]): void;
        clone(): Shape;
        remove(): void;
    }
    ```

    Hierarchy (View Summary)

    * ShapeBase
      + Ellipse

    Referenced by: Context, ContextTypesUtils, Penpot, Shape
  members:
    Properties:
      type: |-
        ```
        readonly type: "ellipse"
        ```

        The type of the shape, which is always 'ellipse' for ellipse shapes.
      fills: |-
        ```
        fills: Fill[]
        ```

        The fills applied to the shape.

        Overrides ShapeBase.fills
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier of the shape.
      name: |-
        ```
        name: string
        ```

        The name of the shape.
      parent: |-
        ```
        readonly parent: Shape | null
        ```

        The parent shape. If the shape is the first level the parent will be the root shape.
        For the root shape the parent is null
      parentIndex: |-
        ```
        readonly parentIndex: number
        ```

        Returns the index of the current shape in the parent
      x: |-
        ```
        x: number
        ```

        The x-coordinate of the shape's position.
      y: |-
        ```
        y: number
        ```

        The y-coordinate of the shape's position.
      width: |-
        ```
        readonly width: number
        ```

        The width of the shape.
      height: |-
        ```
        readonly height: number
        ```

        The height of the shape.
      bounds: |-
        ```
        readonly bounds: Bounds
        ```

        The bounding box surrounding the current shape
      center: |-
        ```
        readonly center: Point
        ```

        The geometric center of the shape
      blocked: |-
        ```
        blocked: boolean
        ```

        Indicates whether the shape is blocked.
      hidden: |-
        ```
        hidden: boolean
        ```

        Indicates whether the shape is hidden.
      visible: |-
        ```
        visible: boolean
        ```

        Indicates whether the shape is visible.
      proportionLock: |-
        ```
        proportionLock: boolean
        ```

        Indicates whether the shape has proportion lock enabled.
      constraintsHorizontal: |-
        ```
        constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"
        ```

        The horizontal constraints applied to the shape.
      constraintsVertical: |-
        ```
        constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"
        ```

        The vertical constraints applied to the shape.
      fixedWhenScrolling: |-
        ```
        fixedWhenScrolling: boolean
        ```

        Indicates whether the shape stays fixed in place while scrolling.
      borderRadius: |-
        ```
        borderRadius: number
        ```

        The border radius of the shape.
      borderRadiusTopLeft: |-
        ```
        borderRadiusTopLeft: number
        ```

        The border radius of the top-left corner of the shape.
      borderRadiusTopRight: |-
        ```
        borderRadiusTopRight: number
        ```

        The border radius of the top-right corner of the shape.
      borderRadiusBottomRight: |-
        ```
        borderRadiusBottomRight: number
        ```

        The border radius of the bottom-right corner of the shape.
      borderRadiusBottomLeft: |-
        ```
        borderRadiusBottomLeft: number
        ```

        The border radius of the bottom-left corner of the shape.
      opacity: |-
        ```
        opacity: number
        ```

        The opacity of the shape.
      blendMode: |-
        ```
        blendMode:
            | "difference"
            | "normal"
            | "darken"
            | "multiply"
            | "color-burn"
            | "lighten"
            | "screen"
            | "color-dodge"
            | "overlay"
            | "soft-light"
            | "hard-light"
            | "exclusion"
            | "hue"
            | "saturation"
            | "color"
            | "luminosity"
        ```

        The blend mode applied to the shape.
      shadows: |-
        ```
        shadows: Shadow[]
        ```

        The shadows applied to the shape.
      blur: |-
        ```
        blur?: Blur
        ```

        The blur effect applied to the shape.
      backgroundBlur: |-
        ```
        backgroundBlur?: Blur
        ```

        The background blur effect applied to the shape.
        Background blur creates a blur effect on the content behind the shape,
        rather than on the shape's own content.
      exports: |-
        ```
        exports: Export[]
        ```

        The export settings of the shape.
      boardX: |-
        ```
        boardX: number
        ```

        The x-coordinate of the shape relative to its board.
      boardY: |-
        ```
        boardY: number
        ```

        The y-coordinate of the shape relative to its board.
      parentX: |-
        ```
        parentX: number
        ```

        The x-coordinate of the shape relative to its parent.
      parentY: |-
        ```
        parentY: number
        ```

        The y-coordinate of the shape relative to its parent.
      flipX: |-
        ```
        flipX: boolean
        ```

        Indicates whether the shape is flipped horizontally.
      flipY: |-
        ```
        flipY: boolean
        ```

        Indicates whether the shape is flipped vertically.
      rotation: |-
        ```
        rotation: number
        ```

        The rotation in degrees of the shape with respect to its center.
      strokes: |-
        ```
        strokes: Stroke[]
        ```

        The strokes applied to the shape.
      layoutChild: |-
        ```
        readonly layoutChild?: LayoutChildProperties
        ```

        Layout properties for children of the shape.
      layoutCell: |-
        ```
        readonly layoutCell?: LayoutCellProperties
        ```

        Layout properties for cells in a grid layout.
      tokens: |-
        ```
        readonly tokens: {
            width: string;
            height: string;
            fill: string;
            x: string;
            y: string;
            all: string;
            borderRadiusTopLeft: string;
            borderRadiusTopRight: string;
            borderRadiusBottomRight: string;
            borderRadiusBottomLeft: string;
            shadow: string;
            strokeColor: string;
            strokeWidth: string;
            fontFamilies: string;
            fontSize: string;
            fontWeight: string;
            letterSpacing: string;
            rotation: string;
            opacity: string;
            layoutItemMinW: string;
            layoutItemMaxW: string;
            layoutItemMinH: string;
            layoutItemMaxH: string;
            rowGap: string;
            columnGap: string;
            paddingLeft: string;
            paddingTop: string;
            paddingRight: string;
            paddingBottom: string;
            marginLeft: string;
            marginTop: string;
            marginRight: string;
            marginBottom: string;
            textCase: string;
            textDecoration: string;
            typography: string;
        }
        ```

        The design tokens applied to this shape.
        It's a map property name -> token name.

        NOTE that the tokens application is by name and not by id. If there exist
        several tokens with the same name in different sets, the actual token applied
        and the value set to the attributes will depend on which sets are active
        (and will change if different sets or themes are activated later).
      interactions: |-
        ```
        readonly interactions: Interaction[]
        ```

        The interactions for the current shape.
    Methods:
      getPluginData: |-
        ```
        getPluginData(key: string): string
        ```

        Retrieves the data for our own plugin, given a specific key.

        Parameters

        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the data associated with the key as a string.

        Example
        ```
        const data = shape.getPluginData('exampleKey');console.log(data);
        ```
      setPluginData: |-
        ```
        setPluginData(key: string, value: string): void
        ```

        Sets the plugin-specific data for the given key.

        Parameters

        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setPluginData('exampleKey', 'exampleValue');
        ```
      getPluginDataKeys: |-
        ```
        getPluginDataKeys(): string[]
        ```

        Retrieves all the keys for the plugin-specific data.

        Returns string[]

        Returns an array of strings representing all the keys.

        Example
        ```
        const keys = shape.getPluginDataKeys();console.log(keys);
        ```
      getSharedPluginData: |-
        ```
        getSharedPluginData(namespace: string, key: string): string
        ```

        If we know the namespace of an external plugin, this is the way to get their data.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the shared data associated with the key as a string.

        Example
        ```
        const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData);
        ```
      setSharedPluginData: |-
        ```
        setSharedPluginData(namespace: string, key: string, value: string): void
        ```

        Sets the shared plugin-specific data for the given namespace and key.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue');
        ```
      getSharedPluginDataKeys: |-
        ```
        getSharedPluginDataKeys(namespace: string): string[]
        ```

        Retrieves all the keys for the shared plugin-specific data in the given namespace.

        Parameters

        * namespace: string

          The namespace for the shared data.

        Returns string[]

        Returns an array of strings representing all the keys in the namespace.

        Example
        ```
        const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys);
        ```
      setParentIndex: |-
        ```
        setParentIndex(index: number): void
        ```

        Changes the index inside the parent of the current shape.
        This method will shift the indexes of the shapes around that position to
        match the index.
        If the index is greater than the number of elements it will positioned last.

        Parameters

        * index: number

          the new index for the shape to be in

        Returns void
      isComponentInstance: |-
        ```
        isComponentInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component instance
      isComponentMainInstance: |-
        ```
        isComponentMainInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component **main** instance
      isComponentCopyInstance: |-
        ```
        isComponentCopyInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component **copy** instance
      isComponentRoot: |-
        ```
        isComponentRoot(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the root of a component tree
      isComponentHead: |-
        ```
        isComponentHead(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the head of a components tree nested structure
      componentRefShape: |-
        ```
        componentRefShape(): Shape | null
        ```

        Returns Shape | null

        Returns the equivalent shape in the component main instance. If the current shape is inside a
        main instance will return `null`;
      componentRoot: |-
        ```
        componentRoot(): Shape | null
        ```

        Returns Shape | null

        Returns the root of the component tree structure for the current shape. If the current shape
        is already a root will return itself.
      componentHead: |-
        ```
        componentHead(): Shape | null
        ```

        Returns Shape | null

        Returns the head of the component tree structure for the current shape. If the current shape
        is already a head will return itself.
      component: |-
        ```
        component(): LibraryComponent | null
        ```

        Returns LibraryComponent | null

        If the shape is a component instance, returns the reference to the component associated
        otherwise will return null
      detach: |-
        ```
        detach(): void
        ```

        If the current shape is a component it will remove the component information and leave the
        shape as a "basic shape"

        Returns void
      swapComponent: |-
        ```
        swapComponent(component: LibraryComponent): void
        ```

        Swaps the component instance for another component, keeping the overrides
        when possible. Similar to the "swap component" action on the Penpot interface.
        The current shape must be a component copy instance.

        Parameters

        * component: LibraryComponent

          The new component to replace the current one

        Returns void
      resetOverrides: |-
        ```
        resetOverrides(): void
        ```

        Resets the overrides of the component copy, restoring all its attributes
        (and those of its children) to the ones in the linked main component.
        Similar to the "reset overrides" action on the Penpot interface.
        The current shape must be a component copy instance.

        Returns void
      switchVariant: |-
        ```
        switchVariant(pos: number, value: string): void
        ```

        Switch a VariantComponent copy to the nearest one that has the specified property value

        Parameters

        * pos: number

          The position of the property to update
        * value: string

          The new value of the property

        Returns void
      combineAsVariants: |-
        ```
        combineAsVariants(ids: string[]): VariantContainer
        ```

        Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu
        on the Penpot interface.
        The current shape must be a component main instance.

        Parameters

        * ids: string[]

          A list of ids of the main instances of the components to combine with this one.

        Returns VariantContainer

        The variant container created
      isVariantHead: |-
        ```
        isVariantHead(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the head of a components tree nested structure,
        and that component is a VariantComponent
      resize: |-
        ```
        resize(width: number, height: number): void
        ```

        Resizes the shape to the specified width and height.

        Parameters

        * width: number

          The new width of the shape.
        * height: number

          The new height of the shape.

        Returns void

        Example
        ```
        shape.resize(200, 100);
        ```
      rotate: |-
        ```
        rotate(angle: number, center?: { x: number; y: number } | null): void
        ```

        Rotates the shape in relation with the given center.

        Parameters

        * angle: number

          Angle in degrees to rotate.
        * center: { x: number; y: number } | null

          Center of the transform rotation. If not sent it will use the geometric center of the shape.

        Returns void

        Example
        ```
        shape.rotate(45);
        ```
      bringToFront: |-
        ```
        bringToFront(): void
        ```

        Moves the current shape to the front of its siblings

        Returns void
      bringForward: |-
        ```
        bringForward(): void
        ```

        Moves the current shape one position forward in its list of siblings

        Returns void
      sendToBack: |-
        ```
        sendToBack(): void
        ```

        Moves the current shape to the back of its siblings

        Returns void
      sendBackward: |-
        ```
        sendBackward(): void
        ```

        Moves the current shape one position backwards in its list of siblings

        Returns void
      export: |-
        ```
        export(config: Export): Promise<Uint8Array<ArrayBufferLike>>
        ```

        Generates an export from the current shape.

        Parameters

        * config: Export

        Returns Promise<Uint8Array<ArrayBufferLike>>

        Example
        ```
        shape.export({ type: 'png', scale: 2 });
        ```
      addInteraction: |-
        ```
        addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction
        ```

        Adds a new interaction to the shape.

        If the interaction starts a flow (for example a `navigate-to` action) and
        the shape's board is not already part of any flow, a new flow starting at
        that board is created automatically, matching the behavior of the editor.

        Parameters

        * trigger: Trigger

          defines the conditions under which the action will be triggered
        * action: Action

          defines what will be executed when the trigger happens
        * delay: number

          for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise.

        Returns Interaction

        Example
        ```
        shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard });
        ```
      removeInteraction: |-
        ```
        removeInteraction(interaction: Interaction): void
        ```

        Removes the interaction from the shape.

        Parameters

        * interaction: Interaction

          is the interaction to remove from the shape

        Returns void

        Example
        ```
        shape.removeInteraction(interaction);
        ```
      applyToken: |-
        ```
        applyToken(token: Token, properties?: TokenProperty[]): void
        ```

        Applies one design token to one or more properties of the shape.

        Parameters

        * token: Token

          is the Token to apply
        * properties: TokenProperty[]

          an optional list of property names. If omitted, the
          default properties will be applied.

          NOTE that the tokens application is by name and not by id. If there exist
          several tokens with the same name in different sets, the actual token applied
          and the value set to the attributes will depend on which sets are active
          (and will change if different sets or themes are activated later).

        Returns void
      clone: |-
        ```
        clone(): Shape
        ```

        Creates a clone of the shape.

        Returns Shape

        Returns a new instance of the shape with identical properties.
      remove: |-
        ```
        remove(): void
        ```

        Removes the shape from its parent.

        Returns void
EventsMap:
  overview: |-
    Interface EventsMap
    ===================

    Represents a mapping of events to their corresponding types in Penpot.
    This interface provides information about various events that can be triggered in the application.

    Example
    ```
    penpot.on('pagechange', (event) => {  console.log(event);});
    ```

    ```
    interface EventsMap {
        pagechange: Page;
        filechange: File;
        selectionchange: string[];
        themechange: Theme;
        finish: string;
        shapechange: Shape;
        contentsave: void;
    }
    ```

    Referenced by: Context, Penpot
  members:
    Properties:
      pagechange: |-
        ```
        readonly pagechange: Page
        ```

        The `pagechange` event is triggered when the active page in the project is changed.
      filechange: |-
        ```
        readonly filechange: File
        ```

        The `filechange` event is triggered when a different file is opened.
        The callback will receive the new file.
      selectionchange: |-
        ```
        readonly selectionchange: string[]
        ```

        The `selectionchange` event is triggered when the selection of elements changes.
        This event passes a list of identifiers of the selected elements.
      themechange: |-
        ```
        readonly themechange: Theme
        ```

        The `themechange` event is triggered when the application theme is changed.
      finish: |-
        ```
        readonly finish: string
        ```

        The `finish` event is triggered when the current file is closed.
        The callback will receive the id of the closed file.
      shapechange: |-
        ```
        readonly shapechange: Shape
        ```

        This event will trigger whenever the shape in the props change. It's mandatory to send
        with the props an object like `{ shapeId: '<id>' }`
      contentsave: |-
        ```
        readonly contentsave: void
        ```

        The `contentsave` event will trigger after the file content is saved in the backend.
Export:
  overview: |-
    Interface Export
    ================

    Represents export settings in Penpot.
    This interface includes properties for defining export configurations.

    ```
    interface Export {
        type: "svg" | "png" | "jpeg" | "webp" | "pdf";
        scale?: number;
        suffix?: string;
        skipChildren?: boolean;
    }
    ```

    Referenced by: Board, Boolean, Ellipse, Group, Image, Path, Rectangle, ShapeBase, SvgRaw, Text, VariantContainer
  members:
    Properties:
      type: |-
        ```
        type: "svg" | "png" | "jpeg" | "webp" | "pdf"
        ```

        Type of the file to export. Can be one of the following values: png, jpeg, webp, svg, pdf
      scale: |-
        ```
        scale?: number
        ```

        For bitmap formats represent the scale of the original size to resize the export
      suffix: |-
        ```
        suffix?: string
        ```

        Suffix that will be appended to the resulting exported file
      skipChildren: |-
        ```
        skipChildren?: boolean
        ```

        If true will ignore the children when exporting the shape
File:
  overview: |-
    Interface File
    ==============

    File represents a file in the Penpot application.
    It includes properties for the file's identifier, name, and revision number.

    ```
    interface File {
        id: string;
        name: string;
        revn: number;
        pages: Page[];
        export(
            exportType: "penpot" | "zip",
            libraryExportType?: "all" | "merge" | "detach",
        ): Promise<Uint8Array<ArrayBufferLike>>;
        findVersions(criteria?: { createdBy: User }): Promise<FileVersion[]>;
        saveVersion(label: string): Promise<FileVersion>;
        validate(): FileValidationError[];
        getPluginData(key: string): string;
        setPluginData(key: string, value: string): void;
        getPluginDataKeys(): string[];
        getSharedPluginData(namespace: string, key: string): string;
        setSharedPluginData(namespace: string, key: string, value: string): void;
        getSharedPluginDataKeys(namespace: string): string[];
    }
    ```

    Hierarchy (View Summary)

    * PluginData
      + File

    Referenced by: Context, EventsMap, Penpot
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The `id` property is a unique identifier for the file.
      name: |-
        ```
        readonly name: string
        ```

        The `name` for the file
      revn: |-
        ```
        readonly revn: number
        ```

        The `revn` will change for every document update
      pages: |-
        ```
        readonly pages: Page[]
        ```

        List all the pages for the current file
    Methods:
      export: |-
        ```
        export(
            exportType: "penpot" | "zip",
            libraryExportType?: "all" | "merge" | "detach",
        ): Promise<Uint8Array<ArrayBufferLike>>
        ```

        Export the current file to an archive.

        Parameters

        * exportType: "penpot" | "zip"
        * libraryExportType: "all" | "merge" | "detach"

        Returns Promise<Uint8Array<ArrayBufferLike>>

        Example
        ```
        const exportedData = await file.export('penpot', 'all');
        ```
      findVersions: |-
        ```
        findVersions(criteria?: { createdBy: User }): Promise<FileVersion[]>
        ```

        Retrieves the versions for the file.

        Parameters

        * criteria: { createdBy: User }

        Returns Promise<FileVersion[]>
      saveVersion: |-
        ```
        saveVersion(label: string): Promise<FileVersion>
        ```

        Saves the current version into the versions history.
        Requires the `content:write` permission.

        Parameters

        * label: string

        Returns Promise<FileVersion>
      validate: |-
        ```
        validate(): FileValidationError[]
        ```

        Runs the referential-integrity validation on the file and returns the list
        of errors found. An empty array means the file is valid. Useful to detect
        inconsistencies (dangling references, broken components/variants, …) that
        the backend would otherwise reject when the file is saved.

        Returns FileValidationError[]

        Example
        ```
        const errors = file.validate();if (errors.length) console.error(errors);
        ```
      getPluginData: |-
        ```
        getPluginData(key: string): string
        ```

        Retrieves the data for our own plugin, given a specific key.

        Parameters

        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the data associated with the key as a string.

        Example
        ```
        const data = shape.getPluginData('exampleKey');console.log(data);
        ```
      setPluginData: |-
        ```
        setPluginData(key: string, value: string): void
        ```

        Sets the plugin-specific data for the given key.

        Parameters

        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setPluginData('exampleKey', 'exampleValue');
        ```
      getPluginDataKeys: |-
        ```
        getPluginDataKeys(): string[]
        ```

        Retrieves all the keys for the plugin-specific data.

        Returns string[]

        Returns an array of strings representing all the keys.

        Example
        ```
        const keys = shape.getPluginDataKeys();console.log(keys);
        ```
      getSharedPluginData: |-
        ```
        getSharedPluginData(namespace: string, key: string): string
        ```

        If we know the namespace of an external plugin, this is the way to get their data.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the shared data associated with the key as a string.

        Example
        ```
        const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData);
        ```
      setSharedPluginData: |-
        ```
        setSharedPluginData(namespace: string, key: string, value: string): void
        ```

        Sets the shared plugin-specific data for the given namespace and key.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue');
        ```
      getSharedPluginDataKeys: |-
        ```
        getSharedPluginDataKeys(namespace: string): string[]
        ```

        Retrieves all the keys for the shared plugin-specific data in the given namespace.

        Parameters

        * namespace: string

          The namespace for the shared data.

        Returns string[]

        Returns an array of strings representing all the keys in the namespace.

        Example
        ```
        const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys);
        ```
FileValidationError:
  overview: |-
    Interface FileValidationError
    =============================

    A single referential-integrity error reported by File.validate.

    ```
    interface FileValidationError {
        code: string;
        hint: string;
        shapeId: string | null;
        pageId: string | null;
    }
    ```

    Referenced by: File
  members:
    Properties:
      code: |-
        ```
        readonly code: string
        ```

        The validation error code (e.g. `'variant-component-bad-name'`,
        `'child-not-found'`).
      hint: |-
        ```
        readonly hint: string
        ```

        A human-readable description of the error.
      shapeId: |-
        ```
        readonly shapeId: string | null
        ```

        The id of the offending shape, when the error is attached to one.
      pageId: |-
        ```
        readonly pageId: string | null
        ```

        The id of the page the offending shape lives in, when applicable.
FileVersion:
  overview: |-
    Interface FileVersion
    =====================

    Type defining the file version properties.

    ```
    interface FileVersion {
        label: string;
        createdBy?: User;
        createdAt: Date;
        isAutosave: boolean;
        restore(): void;
        remove(): Promise<void>;
        pin(): Promise<FileVersion>;
    }
    ```

    Referenced by: File, FileVersion
  members:
    Properties:
      label: |-
        ```
        label: string
        ```

        The current label to identify the version.
      createdBy: |-
        ```
        readonly createdBy?: User
        ```

        The user that created the version. If not present, the
        version is an autosave.
      createdAt: |-
        ```
        readonly createdAt: Date
        ```

        The date when the version was created.
      isAutosave: |-
        ```
        readonly isAutosave: boolean
        ```

        If the current version has been generated automatically.
    Methods:
      restore: |-
        ```
        restore(): void
        ```

        Restores the current version and replaces the content of the active file
        for the contents of this version.
        Requires the `content:write` permission.
        Warning: Calling this will close the plugin because the workspace will reload

        Returns void
      remove: |-
        ```
        remove(): Promise<void>
        ```

        Remove the current version.
        Requires the `content:write` permission.

        Returns Promise<void>
      pin: |-
        ```
        pin(): Promise<FileVersion>
        ```

        Converts an autosave version into a permanent version.
        Requires the `content:write` permission.

        Returns Promise<FileVersion>
Fill:
  overview: |-
    Interface Fill
    ==============

    Represents fill properties in Penpot. You can add a fill to any shape except for groups.
    This interface includes properties for defining solid color fills, gradient fills, and image fills.

    ```
    interface Fill {
        fillColor?: string;
        fillOpacity?: number;
        fillColorGradient?: Gradient;
        fillColorRefFile?: string;
        fillColorRefId?: string;
        fillImage?: ImageData;
    }
    ```

    Referenced by: Board, Boolean, Ellipse, Group, Image, LibraryColor, Path, Rectangle, ShapeBase, SvgRaw, Text, TextRange, VariantContainer
  members:
    Properties:
      fillColor: |-
        ```
        fillColor?: string
        ```

        The optional solid fill color, represented as a string (e.g., '#FF5733').
      fillOpacity: |-
        ```
        fillOpacity?: number
        ```

        The optional opacity level of the solid fill color, ranging from 0 (fully transparent) to 1 (fully opaque).
        Defaults to 1 if omitted.
      fillColorGradient: |-
        ```
        fillColorGradient?: Gradient
        ```

        The optional gradient fill defined by a Gradient object.
      fillColorRefFile: |-
        ```
        fillColorRefFile?: string
        ```

        The optional reference to an external file for the fill color.
      fillColorRefId: |-
        ```
        fillColorRefId?: string
        ```

        The optional reference ID within the external file for the fill color.
      fillImage: |-
        ```
        fillImage?: ImageData
        ```

        The optional image fill defined by an ImageData object.
Flags:
  overview: |-
    Interface Flags
    ===============

    This subcontext allows the API to change certain defaults

    ```
    interface Flags {
        naturalChildOrdering: boolean;
        throwValidationErrors: boolean;
    }
    ```

    Referenced by: Context, Penpot
  members:
    Properties:
      naturalChildOrdering: |-
        ```
        naturalChildOrdering: boolean
        ```

        If `true` the .children property will always be sorted in the z-index ordering.
        Also, the appendChild method will append the children in the top-most position.
        The insertChild method is changed accordingly to respect this ordering.
        Defaults to false
      throwValidationErrors: |-
        ```
        throwValidationErrors: boolean
        ```

        If `true` the validation errors will throw an exception instead of displaying an
        error in the debugger console.
        Defaults to `true` for plugins whose manifest declares `"version": 2` (or higher)
        and to `false` for v1 plugins (or manifests that omit the version field).
FlexLayout:
  overview: |-
    Interface FlexLayout
    ====================

    Represents a flexible layout configuration in Penpot.
    This interface extends `CommonLayout` and includes properties for defining the direction,
    wrapping behavior, and child management of a flex layout.

    ```
    interface FlexLayout {
        alignItems?: "end" | "start" | "center" | "stretch";
        alignContent?:
            | "end"
            | "start"
            | "center"
            | "stretch"
            | "space-between"
            | "space-around"
            | "space-evenly";
        justifyItems?: "end"
        | "start"
        | "center"
        | "stretch";
        justifyContent?:
            | "end"
            | "start"
            | "center"
            | "stretch"
            | "space-between"
            | "space-around"
            | "space-evenly";
        rowGap: number;
        columnGap: number;
        verticalPadding: number;
        horizontalPadding: number;
        topPadding: number;
        rightPadding: number;
        bottomPadding: number;
        leftPadding: number;
        horizontalSizing: "fill"
        | "auto"
        | "fix";
        verticalSizing: "fill" | "auto" | "fix";
        remove(): void;
        dir: "row" | "row-reverse" | "column" | "column-reverse";
        wrap?: "wrap" | "nowrap";
        appendChild(child: Shape): void;
    }
    ```

    Hierarchy (View Summary)

    * CommonLayout
      + FlexLayout

    Referenced by: Board, VariantContainer
  members:
    Properties:
      alignItems: |-
        ```
        alignItems?: "end" | "start" | "center" | "stretch"
        ```

        The `alignItems` property specifies the default alignment for items inside the container.
        It can be one of the following values:

        * 'start': Items are aligned at the start.
        * 'end': Items are aligned at the end.
        * 'center': Items are centered.
        * 'stretch': Items are stretched to fill the container.
      alignContent: |-
        ```
        alignContent?:
            | "end"
            | "start"
            | "center"
            | "stretch"
            | "space-between"
            | "space-around"
            | "space-evenly"
        ```

        The `alignContent` property specifies how the content is aligned within the container when there is extra space.
        It can be one of the following values:

        * 'start': Content is aligned at the start.
        * 'end': Content is aligned at the end.
        * 'center': Content is centered.
        * 'space-between': Content is distributed with space between.
        * 'space-around': Content is distributed with space around.
        * 'space-evenly': Content is distributed with even space around.
        * 'stretch': Content is stretched to fill the container.
      justifyItems: |-
        ```
        justifyItems?: "end" | "start" | "center" | "stretch"
        ```

        The `justifyItems` property specifies the default justification for items inside the container.
        It can be one of the following values:

        * 'start': Items are justified at the start.
        * 'end': Items are justified at the end.
        * 'center': Items are centered.
        * 'stretch': Items are stretched to fill the container.
      justifyContent: |-
        ```
        justifyContent?:
            | "end"
            | "start"
            | "center"
            | "stretch"
            | "space-between"
            | "space-around"
            | "space-evenly"
        ```

        The `justifyContent` property specifies how the content is justified within the container when there is extra space.
        It can be one of the following values:

        * 'start': Content is justified at the start.
        * 'center': Content is centered.
        * 'end': Content is justified at the end.
        * 'space-between': Content is distributed with space between.
        * 'space-around': Content is distributed with space around.
        * 'space-evenly': Content is distributed with even space around.
        * 'stretch': Content is stretched to fill the container.
      rowGap: |-
        ```
        rowGap: number
        ```

        The `rowGap` property specifies the gap between rows in the layout.
      columnGap: |-
        ```
        columnGap: number
        ```

        The `columnGap` property specifies the gap between columns in the layout.
      verticalPadding: |-
        ```
        verticalPadding: number
        ```

        The `verticalPadding` property specifies the vertical padding inside the container.
      horizontalPadding: |-
        ```
        horizontalPadding: number
        ```

        The `horizontalPadding` property specifies the horizontal padding inside the container.
      topPadding: |-
        ```
        topPadding: number
        ```

        The `topPadding` property specifies the padding at the top of the container.
      rightPadding: |-
        ```
        rightPadding: number
        ```

        The `rightPadding` property specifies the padding at the right of the container.
      bottomPadding: |-
        ```
        bottomPadding: number
        ```

        The `bottomPadding` property specifies the padding at the bottom of the container.
      leftPadding: |-
        ```
        leftPadding: number
        ```

        The `leftPadding` property specifies the padding at the left of the container.
      horizontalSizing: |-
        ```
        horizontalSizing: "fill" | "auto" | "fix"
        ```

        The `horizontalSizing` property specifies the horizontal sizing behavior of the container.
        It can be one of the following values:

        * 'fix': The container has its own intrinsic fixed size.
        * 'fill': The container fills the available space. Only can be set if it's inside another layout.
        * 'auto': The container fits the content.
      verticalSizing: |-
        ```
        verticalSizing: "fill" | "auto" | "fix"
        ```

        The `verticalSizing` property specifies the vertical sizing behavior of the container.
        It can be one of the following values:

        * 'fix': The container has its own intrinsic fixed size.
        * 'fill': The container fills the available space. Only can be set if it's inside another layout.
        * 'auto': The container fits the content.
      dir: |-
        ```
        dir: "row" | "row-reverse" | "column" | "column-reverse"
        ```

        The direction of the flex layout.

        * 'row': Main axis is horizontal, from left to right.
        * 'row-reverse': Main axis is horizontal, from right to left.
        * 'column': Main axis is vertical, from top to bottom.
        * 'column-reverse': Main axis is vertical, from bottom to top.
      wrap: |-
        ```
        wrap?: "wrap" | "nowrap"
        ```

        The optional wrapping behavior of the flex layout.

        * 'wrap': Child elements will wrap onto multiple lines.
        * 'nowrap': Child elements will not wrap.
    Methods:
      remove: |-
        ```
        remove(): void
        ```

        The `remove` method removes the layout.

        Returns void
      appendChild: |-
        ```
        appendChild(child: Shape): void
        ```

        Appends a child element to the flex layout.

        Parameters

        * child: Shape

          The child element to be appended, of type `Shape`.

        Returns void

        Example
        ```
        flexLayout.appendChild(childShape);
        ```
Flow:
  overview: |-
    Interface Flow
    ==============

    Defines an interaction flow inside penpot. A flow is defined by a starting board for an interaction.

    ```
    interface Flow {
        page: Page;
        name: string;
        startingBoard: Board;
        remove(): void;
    }
    ```

    Referenced by: Page
  members:
    Properties:
      page: |-
        ```
        readonly page: Page
        ```

        The page in which the flow is defined
      name: |-
        ```
        name: string
        ```

        The name for the current flow
      startingBoard: |-
        ```
        startingBoard: Board
        ```

        The starting board for this interaction flow
    Methods:
      remove: |-
        ```
        remove(): void
        ```

        Removes the flow from the page

        Returns void
Font:
  overview: |-
    Interface Font
    ==============

    Represents a font in Penpot, which includes details about the font family, variants, and styling options.
    This interface provides properties and methods for describing and applying fonts within Penpot.

    ```
    interface Font {
        name: string;
        fontId: string;
        fontFamily: string;
        fontStyle?: "normal" | "italic" | null;
        fontVariantId: string;
        fontWeight: string;
        variants: FontVariant[];
        applyToText(text: Text, variant?: FontVariant): void;
        applyToRange(range: TextRange, variant?: FontVariant): void;
    }
    ```

    Referenced by: FontsContext, LibraryTypography
  members:
    Properties:
      name: |-
        ```
        readonly name: string
        ```

        This property holds the human-readable name of the font.
      fontId: |-
        ```
        readonly fontId: string
        ```

        The unique identifier of the font.
      fontFamily: |-
        ```
        readonly fontFamily: string
        ```

        The font family of the font.
      fontStyle: |-
        ```
        readonly fontStyle?: "normal" | "italic" | null
        ```

        The default font style of the font.
      fontVariantId: |-
        ```
        readonly fontVariantId: string
        ```

        The default font variant ID of the font.
      fontWeight: |-
        ```
        readonly fontWeight: string
        ```

        The default font weight of the font.
      variants: |-
        ```
        readonly variants: FontVariant[]
        ```

        An array of font variants available for the font.
    Methods:
      applyToText: |-
        ```
        applyToText(text: Text, variant?: FontVariant): void
        ```

        Applies the font styles to a text shape.

        Parameters

        * text: Text

          The text shape to apply the font styles to.
        * variant: FontVariant

          Optional. The specific font variant to apply. If not provided, applies the default variant.

        Returns void

        Example
        ```
        font.applyToText(textShape, fontVariant);
        ```
      applyToRange: |-
        ```
        applyToRange(range: TextRange, variant?: FontVariant): void
        ```

        Applies the font styles to a text range within a text shape.

        Parameters

        * range: TextRange

          The text range to apply the font styles to.
        * variant: FontVariant

          Optional. The specific font variant to apply. If not provided, applies the default variant.

        Returns void

        Example
        ```
        font.applyToRange(textRange, fontVariant);
        ```
FontVariant:
  overview: |-
    Interface FontVariant
    =====================

    Represents a font variant in Penpot, which defines a specific style variation of a font.
    This interface provides properties for describing the characteristics of a font variant.

    ```
    interface FontVariant {
        name: string;
        fontVariantId: string;
        fontWeight: string;
        fontStyle: "normal" | "italic";
    }
    ```

    Referenced by: Font, LibraryTypography
  members:
    Properties:
      name: |-
        ```
        readonly name: string
        ```

        The name of the font variant.
      fontVariantId: |-
        ```
        readonly fontVariantId: string
        ```

        The unique identifier of the font variant.
      fontWeight: |-
        ```
        readonly fontWeight: string
        ```

        The font weight of the font variant.
      fontStyle: |-
        ```
        readonly fontStyle: "normal" | "italic"
        ```

        The font style of the font variant.
FontsContext:
  overview: |-
    Interface FontsContext
    ======================

    Represents the context for managing fonts in Penpot.
    This interface provides methods to interact with fonts, such as retrieving fonts by ID or name.

    ```
    interface FontsContext {
        all: Font[];
        findById(id: string): Font | null;
        findByName(name: string): Font | null;
        findAllById(id: string): Font[];
        findAllByName(name: string): Font[];
    }
    ```

    Referenced by: Context, Penpot
  members:
    Properties:
      all: |-
        ```
        readonly all: Font[]
        ```

        An array containing all available fonts.
    Methods:
      findById: |-
        ```
        findById(id: string): Font | null
        ```

        Finds a font by its unique identifier.

        Parameters

        * id: string

          The ID of the font to find.

        Returns Font | null

        Returns the `Font` object if found, otherwise `null`.

        Example
        ```
        const font = fontsContext.findById('font-id');if (font) {  console.log(font.name);}
        ```
      findByName: |-
        ```
        findByName(name: string): Font | null
        ```

        Finds a font by its name.

        Parameters

        * name: string

          The name of the font to find.

        Returns Font | null

        Returns the `Font` object if found, otherwise `null`.

        Example
        ```
        const font = fontsContext.findByName('font-name');if (font) {  console.log(font.name);}
        ```
      findAllById: |-
        ```
        findAllById(id: string): Font[]
        ```

        Finds all fonts matching a specific ID.

        Parameters

        * id: string

          The ID to match against.

        Returns Font[]

        Returns an array of `Font` objects matching the provided ID.

        Example
        ```
        const fonts = fontsContext.findAllById('font-id');console.log(fonts);
        ```
      findAllByName: |-
        ```
        findAllByName(name: string): Font[]
        ```

        Finds all fonts matching a specific name.

        Parameters

        * name: string

          The name to match against.

        Returns Font[]

        Returns an array of `Font` objects matching the provided name.

        Example
        ```
        const fonts = fontsContext.findAllByName('font-name');console.log(fonts);
        ```
GridLayout:
  overview: |-
    Interface GridLayout
    ====================

    GridLayout represents a grid layout in the Penpot application, extending the common layout interface.
    It includes properties and methods to manage rows, columns, and child elements within the grid.

    ```
    interface GridLayout {
        alignItems?: "end" | "start" | "center" | "stretch";
        alignContent?:
            | "end"
            | "start"
            | "center"
            | "stretch"
            | "space-between"
            | "space-around"
            | "space-evenly";
        justifyItems?: "end"
        | "start"
        | "center"
        | "stretch";
        justifyContent?:
            | "end"
            | "start"
            | "center"
            | "stretch"
            | "space-between"
            | "space-around"
            | "space-evenly";
        rowGap: number;
        columnGap: number;
        verticalPadding: number;
        horizontalPadding: number;
        topPadding: number;
        rightPadding: number;
        bottomPadding: number;
        leftPadding: number;
        horizontalSizing: "fill"
        | "auto"
        | "fix";
        verticalSizing: "fill" | "auto" | "fix";
        remove(): void;
        dir: "row" | "column";
        rows: Track[];
        columns: Track[];
        addRow(type: TrackType, value?: number): void;
        addRowAtIndex(index: number, type: TrackType, value?: number): void;
        addColumn(type: TrackType, value?: number): void;
        addColumnAtIndex(index: number, type: TrackType, value: number): void;
        removeRow(index: number): void;
        removeColumn(index: number): void;
        setColumn(index: number, type: TrackType, value?: number): void;
        setRow(index: number, type: TrackType, value?: number): void;
        appendChild(child: Shape, row: number, column: number): void;
    }
    ```

    Hierarchy (View Summary)

    * CommonLayout
      + GridLayout

    Referenced by: Board, VariantContainer
  members:
    Properties:
      alignItems: |-
        ```
        alignItems?: "end" | "start" | "center" | "stretch"
        ```

        The `alignItems` property specifies the default alignment for items inside the container.
        It can be one of the following values:

        * 'start': Items are aligned at the start.
        * 'end': Items are aligned at the end.
        * 'center': Items are centered.
        * 'stretch': Items are stretched to fill the container.
      alignContent: |-
        ```
        alignContent?:
            | "end"
            | "start"
            | "center"
            | "stretch"
            | "space-between"
            | "space-around"
            | "space-evenly"
        ```

        The `alignContent` property specifies how the content is aligned within the container when there is extra space.
        It can be one of the following values:

        * 'start': Content is aligned at the start.
        * 'end': Content is aligned at the end.
        * 'center': Content is centered.
        * 'space-between': Content is distributed with space between.
        * 'space-around': Content is distributed with space around.
        * 'space-evenly': Content is distributed with even space around.
        * 'stretch': Content is stretched to fill the container.
      justifyItems: |-
        ```
        justifyItems?: "end" | "start" | "center" | "stretch"
        ```

        The `justifyItems` property specifies the default justification for items inside the container.
        It can be one of the following values:

        * 'start': Items are justified at the start.
        * 'end': Items are justified at the end.
        * 'center': Items are centered.
        * 'stretch': Items are stretched to fill the container.
      justifyContent: |-
        ```
        justifyContent?:
            | "end"
            | "start"
            | "center"
            | "stretch"
            | "space-between"
            | "space-around"
            | "space-evenly"
        ```

        The `justifyContent` property specifies how the content is justified within the container when there is extra space.
        It can be one of the following values:

        * 'start': Content is justified at the start.
        * 'center': Content is centered.
        * 'end': Content is justified at the end.
        * 'space-between': Content is distributed with space between.
        * 'space-around': Content is distributed with space around.
        * 'space-evenly': Content is distributed with even space around.
        * 'stretch': Content is stretched to fill the container.
      rowGap: |-
        ```
        rowGap: number
        ```

        The `rowGap` property specifies the gap between rows in the layout.
      columnGap: |-
        ```
        columnGap: number
        ```

        The `columnGap` property specifies the gap between columns in the layout.
      verticalPadding: |-
        ```
        verticalPadding: number
        ```

        The `verticalPadding` property specifies the vertical padding inside the container.
      horizontalPadding: |-
        ```
        horizontalPadding: number
        ```

        The `horizontalPadding` property specifies the horizontal padding inside the container.
      topPadding: |-
        ```
        topPadding: number
        ```

        The `topPadding` property specifies the padding at the top of the container.
      rightPadding: |-
        ```
        rightPadding: number
        ```

        The `rightPadding` property specifies the padding at the right of the container.
      bottomPadding: |-
        ```
        bottomPadding: number
        ```

        The `bottomPadding` property specifies the padding at the bottom of the container.
      leftPadding: |-
        ```
        leftPadding: number
        ```

        The `leftPadding` property specifies the padding at the left of the container.
      horizontalSizing: |-
        ```
        horizontalSizing: "fill" | "auto" | "fix"
        ```

        The `horizontalSizing` property specifies the horizontal sizing behavior of the container.
        It can be one of the following values:

        * 'fix': The container has its own intrinsic fixed size.
        * 'fill': The container fills the available space. Only can be set if it's inside another layout.
        * 'auto': The container fits the content.
      verticalSizing: |-
        ```
        verticalSizing: "fill" | "auto" | "fix"
        ```

        The `verticalSizing` property specifies the vertical sizing behavior of the container.
        It can be one of the following values:

        * 'fix': The container has its own intrinsic fixed size.
        * 'fill': The container fills the available space. Only can be set if it's inside another layout.
        * 'auto': The container fits the content.
      dir: |-
        ```
        dir: "row" | "column"
        ```

        The `dir` property specifies the primary direction of the grid layout.
        It can be either 'column' or 'row'.
      rows: |-
        ```
        readonly rows: Track[]
        ```

        The `rows` property represents the collection of rows in the grid.
        This property is read-only.
      columns: |-
        ```
        readonly columns: Track[]
        ```

        The `columns` property represents the collection of columns in the grid.
        This property is read-only.
    Methods:
      remove: |-
        ```
        remove(): void
        ```

        The `remove` method removes the layout.

        Returns void
      addRow: |-
        ```
        addRow(type: TrackType, value?: number): void
        ```

        Adds a new row to the grid.

        Parameters

        * type: TrackType

          The type of the row to add.
        * value: number

          The value associated with the row type (optional).

        Returns void

        Example
        ```
        const board = penpot.createBoard();const grid = board.addGridLayout();grid.addRow("flex", 1);
        ```
      addRowAtIndex: |-
        ```
        addRowAtIndex(index: number, type: TrackType, value?: number): void
        ```

        Adds a new row to the grid at the specified index.

        Parameters

        * index: number

          The index at which to add the row.
        * type: TrackType

          The type of the row to add.
        * value: number

          The value associated with the row type (optional).

        Returns void

        Example
        ```
        gridLayout.addRowAtIndex(0, 'fixed', 100);
        ```
      addColumn: |-
        ```
        addColumn(type: TrackType, value?: number): void
        ```

        Adds a new column to the grid.

        Parameters

        * type: TrackType

          The type of the column to add.
        * value: number

          The value associated with the column type (optional).

        Returns void

        Example
        ```
        const board = penpot.createBoard();const grid = board.addGridLayout();grid.addColumn('percent', 50);
        ```
      addColumnAtIndex: |-
        ```
        addColumnAtIndex(index: number, type: TrackType, value: number): void
        ```

        Adds a new column to the grid at the specified index.

        Parameters

        * index: number

          The index at which to add the column.
        * type: TrackType

          The type of the column to add.
        * value: number

          The value associated with the column type.

        Returns void

        Example
        ```
        gridLayout.addColumnAtIndex(1, 'auto');
        ```
      removeRow: |-
        ```
        removeRow(index: number): void
        ```

        Removes a row from the grid at the specified index.

        Parameters

        * index: number

          The index of the row to remove.

        Returns void

        Example
        ```
        gridLayout.removeRow(2);
        ```
      removeColumn: |-
        ```
        removeColumn(index: number): void
        ```

        Removes a column from the grid at the specified index.

        Parameters

        * index: number

          The index of the column to remove.

        Returns void

        Example
        ```
        gridLayout.removeColumn(3);
        ```
      setColumn: |-
        ```
        setColumn(index: number, type: TrackType, value?: number): void
        ```

        Sets the properties of a column at the specified index.

        Parameters

        * index: number

          The index of the column to set.
        * type: TrackType

          The type of the column.
        * value: number

          The value associated with the column type (optional).

        Returns void

        Example
        ```
        gridLayout.setColumn(0, 'fixed', 200);
        ```
      setRow: |-
        ```
        setRow(index: number, type: TrackType, value?: number): void
        ```

        Sets the properties of a row at the specified index.

        Parameters

        * index: number

          The index of the row to set.
        * type: TrackType

          The type of the row.
        * value: number

          The value associated with the row type (optional).

        Returns void

        Example
        ```
        gridLayout.setRow(1, 'flex');
        ```
      appendChild: |-
        ```
        appendChild(child: Shape, row: number, column: number): void
        ```

        Appends a child element to the grid at the specified row and column.

        Parameters

        * child: Shape

          The child element to append.
        * row: number

          The row index where the child will be placed.
        * column: number

          The column index where the child will be placed.

        Returns void

        Example
        ```
        gridLayout.appendChild(childShape, 0, 1);
        ```
Group:
  overview: |-
    Interface Group
    ===============

    Represents a group of shapes in Penpot.
    This interface extends `ShapeBase` and includes properties and methods specific to groups.

    ```
    interface Group {
        type: "group";
        children: Shape[];
        appendChild(child: Shape): void;
        insertChild(index: number, child: Shape): void;
        isMask(): boolean;
        makeMask(): void;
        removeMask(): void;
        getPluginData(key: string): string;
        setPluginData(key: string, value: string): void;
        getPluginDataKeys(): string[];
        getSharedPluginData(namespace: string, key: string): string;
        setSharedPluginData(namespace: string, key: string, value: string): void;
        getSharedPluginDataKeys(namespace: string): string[];
        id: string;
        name: string;
        parent: Shape | null;
        parentIndex: number;
        x: number;
        y: number;
        width: number;
        height: number;
        bounds: Bounds;
        center: Point;
        blocked: boolean;
        hidden: boolean;
        visible: boolean;
        proportionLock: boolean;
        constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale";
        constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom";
        fixedWhenScrolling: boolean;
        borderRadius: number;
        borderRadiusTopLeft: number;
        borderRadiusTopRight: number;
        borderRadiusBottomRight: number;
        borderRadiusBottomLeft: number;
        opacity: number;
        blendMode:
            | "difference"
            | "normal"
            | "darken"
            | "multiply"
            | "color-burn"
            | "lighten"
            | "screen"
            | "color-dodge"
            | "overlay"
            | "soft-light"
            | "hard-light"
            | "exclusion"
            | "hue"
            | "saturation"
            | "color"
            | "luminosity";
        shadows: Shadow[];
        blur?: Blur;
        backgroundBlur?: Blur;
        exports: Export[];
        boardX: number;
        boardY: number;
        parentX: number;
        parentY: number;
        flipX: boolean;
        flipY: boolean;
        rotation: number;
        fills: Fill[]
        | "mixed";
        strokes: Stroke[];
        layoutChild?: LayoutChildProperties;
        layoutCell?: LayoutCellProperties;
        setParentIndex(index: number): void;
        tokens: {
            width: string;
            height: string;
            fill: string;
            x: string;
            y: string;
            all: string;
            borderRadiusTopLeft: string;
            borderRadiusTopRight: string;
            borderRadiusBottomRight: string;
            borderRadiusBottomLeft: string;
            shadow: string;
            strokeColor: string;
            strokeWidth: string;
            fontFamilies: string;
            fontSize: string;
            fontWeight: string;
            letterSpacing: string;
            rotation: string;
            opacity: string;
            layoutItemMinW: string;
            layoutItemMaxW: string;
            layoutItemMinH: string;
            layoutItemMaxH: string;
            rowGap: string;
            columnGap: string;
            paddingLeft: string;
            paddingTop: string;
            paddingRight: string;
            paddingBottom: string;
            marginLeft: string;
            marginTop: string;
            marginRight: string;
            marginBottom: string;
            textCase: string;
            textDecoration: string;
            typography: string;
        };
        isComponentInstance(): boolean;
        isComponentMainInstance(): boolean;
        isComponentCopyInstance(): boolean;
        isComponentRoot(): boolean;
        isComponentHead(): boolean;
        componentRefShape(): Shape | null;
        componentRoot(): Shape | null;
        componentHead(): Shape | null;
        component(): LibraryComponent | null;
        detach(): void;
        swapComponent(component: LibraryComponent): void;
        resetOverrides(): void;
        switchVariant(pos: number, value: string): void;
        combineAsVariants(ids: string[]): VariantContainer;
        isVariantHead(): boolean;
        resize(width: number, height: number): void;
        rotate(angle: number, center?: { x: number; y: number } | null): void;
        bringToFront(): void;
        bringForward(): void;
        sendToBack(): void;
        sendBackward(): void;
        export(config: Export): Promise<Uint8Array<ArrayBufferLike>>;
        interactions: Interaction[];
        addInteraction(
            trigger: Trigger,
            action: Action,
            delay?: number,
        ): Interaction;
        removeInteraction(interaction: Interaction): void;
        applyToken(token: Token, properties?: TokenProperty[]): void;
        clone(): Shape;
        remove(): void;
    }
    ```

    Hierarchy (View Summary)

    * ShapeBase
      + Group

    Referenced by: Context, ContextTypesUtils, Penpot, Shape
  members:
    Properties:
      type: |-
        ```
        readonly type: "group"
        ```

        The type of the shape, which is always 'group' for groups.
      children: |-
        ```
        readonly children: Shape[]
        ```

        The children shapes contained within the group.
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier of the shape.
      name: |-
        ```
        name: string
        ```

        The name of the shape.
      parent: |-
        ```
        readonly parent: Shape | null
        ```

        The parent shape. If the shape is the first level the parent will be the root shape.
        For the root shape the parent is null
      parentIndex: |-
        ```
        readonly parentIndex: number
        ```

        Returns the index of the current shape in the parent
      x: |-
        ```
        x: number
        ```

        The x-coordinate of the shape's position.
      y: |-
        ```
        y: number
        ```

        The y-coordinate of the shape's position.
      width: |-
        ```
        readonly width: number
        ```

        The width of the shape.
      height: |-
        ```
        readonly height: number
        ```

        The height of the shape.
      bounds: |-
        ```
        readonly bounds: Bounds
        ```

        The bounding box surrounding the current shape
      center: |-
        ```
        readonly center: Point
        ```

        The geometric center of the shape
      blocked: |-
        ```
        blocked: boolean
        ```

        Indicates whether the shape is blocked.
      hidden: |-
        ```
        hidden: boolean
        ```

        Indicates whether the shape is hidden.
      visible: |-
        ```
        visible: boolean
        ```

        Indicates whether the shape is visible.
      proportionLock: |-
        ```
        proportionLock: boolean
        ```

        Indicates whether the shape has proportion lock enabled.
      constraintsHorizontal: |-
        ```
        constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"
        ```

        The horizontal constraints applied to the shape.
      constraintsVertical: |-
        ```
        constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"
        ```

        The vertical constraints applied to the shape.
      fixedWhenScrolling: |-
        ```
        fixedWhenScrolling: boolean
        ```

        Indicates whether the shape stays fixed in place while scrolling.
      borderRadius: |-
        ```
        borderRadius: number
        ```

        The border radius of the shape.
      borderRadiusTopLeft: |-
        ```
        borderRadiusTopLeft: number
        ```

        The border radius of the top-left corner of the shape.
      borderRadiusTopRight: |-
        ```
        borderRadiusTopRight: number
        ```

        The border radius of the top-right corner of the shape.
      borderRadiusBottomRight: |-
        ```
        borderRadiusBottomRight: number
        ```

        The border radius of the bottom-right corner of the shape.
      borderRadiusBottomLeft: |-
        ```
        borderRadiusBottomLeft: number
        ```

        The border radius of the bottom-left corner of the shape.
      opacity: |-
        ```
        opacity: number
        ```

        The opacity of the shape.
      blendMode: |-
        ```
        blendMode:
            | "difference"
            | "normal"
            | "darken"
            | "multiply"
            | "color-burn"
            | "lighten"
            | "screen"
            | "color-dodge"
            | "overlay"
            | "soft-light"
            | "hard-light"
            | "exclusion"
            | "hue"
            | "saturation"
            | "color"
            | "luminosity"
        ```

        The blend mode applied to the shape.
      shadows: |-
        ```
        shadows: Shadow[]
        ```

        The shadows applied to the shape.
      blur: |-
        ```
        blur?: Blur
        ```

        The blur effect applied to the shape.
      backgroundBlur: |-
        ```
        backgroundBlur?: Blur
        ```

        The background blur effect applied to the shape.
        Background blur creates a blur effect on the content behind the shape,
        rather than on the shape's own content.
      exports: |-
        ```
        exports: Export[]
        ```

        The export settings of the shape.
      boardX: |-
        ```
        boardX: number
        ```

        The x-coordinate of the shape relative to its board.
      boardY: |-
        ```
        boardY: number
        ```

        The y-coordinate of the shape relative to its board.
      parentX: |-
        ```
        parentX: number
        ```

        The x-coordinate of the shape relative to its parent.
      parentY: |-
        ```
        parentY: number
        ```

        The y-coordinate of the shape relative to its parent.
      flipX: |-
        ```
        flipX: boolean
        ```

        Indicates whether the shape is flipped horizontally.
      flipY: |-
        ```
        flipY: boolean
        ```

        Indicates whether the shape is flipped vertically.
      rotation: |-
        ```
        rotation: number
        ```

        The rotation in degrees of the shape with respect to its center.
      fills: |-
        ```
        fills: Fill[] | "mixed"
        ```

        The fills applied to the shape.
      strokes: |-
        ```
        strokes: Stroke[]
        ```

        The strokes applied to the shape.
      layoutChild: |-
        ```
        readonly layoutChild?: LayoutChildProperties
        ```

        Layout properties for children of the shape.
      layoutCell: |-
        ```
        readonly layoutCell?: LayoutCellProperties
        ```

        Layout properties for cells in a grid layout.
      tokens: |-
        ```
        readonly tokens: {
            width: string;
            height: string;
            fill: string;
            x: string;
            y: string;
            all: string;
            borderRadiusTopLeft: string;
            borderRadiusTopRight: string;
            borderRadiusBottomRight: string;
            borderRadiusBottomLeft: string;
            shadow: string;
            strokeColor: string;
            strokeWidth: string;
            fontFamilies: string;
            fontSize: string;
            fontWeight: string;
            letterSpacing: string;
            rotation: string;
            opacity: string;
            layoutItemMinW: string;
            layoutItemMaxW: string;
            layoutItemMinH: string;
            layoutItemMaxH: string;
            rowGap: string;
            columnGap: string;
            paddingLeft: string;
            paddingTop: string;
            paddingRight: string;
            paddingBottom: string;
            marginLeft: string;
            marginTop: string;
            marginRight: string;
            marginBottom: string;
            textCase: string;
            textDecoration: string;
            typography: string;
        }
        ```

        The design tokens applied to this shape.
        It's a map property name -> token name.

        NOTE that the tokens application is by name and not by id. If there exist
        several tokens with the same name in different sets, the actual token applied
        and the value set to the attributes will depend on which sets are active
        (and will change if different sets or themes are activated later).
      interactions: |-
        ```
        readonly interactions: Interaction[]
        ```

        The interactions for the current shape.
    Methods:
      appendChild: |-
        ```
        appendChild(child: Shape): void
        ```

        Appends a child shape to the group.

        Parameters

        * child: Shape

          The child shape to append.

        Returns void

        Example
        ```
        group.appendChild(childShape);
        ```
      insertChild: |-
        ```
        insertChild(index: number, child: Shape): void
        ```

        Inserts a child shape at the specified index within the group.

        Parameters

        * index: number

          The index at which to insert the child shape.
        * child: Shape

          The child shape to insert.

        Returns void

        Example
        ```
        group.insertChild(0, childShape);
        ```
      isMask: |-
        ```
        isMask(): boolean
        ```

        Checks if the group is currently a mask.
        A mask defines a clipping path for its child shapes.

        Returns boolean
      makeMask: |-
        ```
        makeMask(): void
        ```

        Converts the group into a mask.

        Returns void
      removeMask: |-
        ```
        removeMask(): void
        ```

        Removes the mask from the group.

        Returns void
      getPluginData: |-
        ```
        getPluginData(key: string): string
        ```

        Retrieves the data for our own plugin, given a specific key.

        Parameters

        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the data associated with the key as a string.

        Example
        ```
        const data = shape.getPluginData('exampleKey');console.log(data);
        ```
      setPluginData: |-
        ```
        setPluginData(key: string, value: string): void
        ```

        Sets the plugin-specific data for the given key.

        Parameters

        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setPluginData('exampleKey', 'exampleValue');
        ```
      getPluginDataKeys: |-
        ```
        getPluginDataKeys(): string[]
        ```

        Retrieves all the keys for the plugin-specific data.

        Returns string[]

        Returns an array of strings representing all the keys.

        Example
        ```
        const keys = shape.getPluginDataKeys();console.log(keys);
        ```
      getSharedPluginData: |-
        ```
        getSharedPluginData(namespace: string, key: string): string
        ```

        If we know the namespace of an external plugin, this is the way to get their data.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the shared data associated with the key as a string.

        Example
        ```
        const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData);
        ```
      setSharedPluginData: |-
        ```
        setSharedPluginData(namespace: string, key: string, value: string): void
        ```

        Sets the shared plugin-specific data for the given namespace and key.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue');
        ```
      getSharedPluginDataKeys: |-
        ```
        getSharedPluginDataKeys(namespace: string): string[]
        ```

        Retrieves all the keys for the shared plugin-specific data in the given namespace.

        Parameters

        * namespace: string

          The namespace for the shared data.

        Returns string[]

        Returns an array of strings representing all the keys in the namespace.

        Example
        ```
        const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys);
        ```
      setParentIndex: |-
        ```
        setParentIndex(index: number): void
        ```

        Changes the index inside the parent of the current shape.
        This method will shift the indexes of the shapes around that position to
        match the index.
        If the index is greater than the number of elements it will positioned last.

        Parameters

        * index: number

          the new index for the shape to be in

        Returns void
      isComponentInstance: |-
        ```
        isComponentInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component instance
      isComponentMainInstance: |-
        ```
        isComponentMainInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component **main** instance
      isComponentCopyInstance: |-
        ```
        isComponentCopyInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component **copy** instance
      isComponentRoot: |-
        ```
        isComponentRoot(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the root of a component tree
      isComponentHead: |-
        ```
        isComponentHead(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the head of a components tree nested structure
      componentRefShape: |-
        ```
        componentRefShape(): Shape | null
        ```

        Returns Shape | null

        Returns the equivalent shape in the component main instance. If the current shape is inside a
        main instance will return `null`;
      componentRoot: |-
        ```
        componentRoot(): Shape | null
        ```

        Returns Shape | null

        Returns the root of the component tree structure for the current shape. If the current shape
        is already a root will return itself.
      componentHead: |-
        ```
        componentHead(): Shape | null
        ```

        Returns Shape | null

        Returns the head of the component tree structure for the current shape. If the current shape
        is already a head will return itself.
      component: |-
        ```
        component(): LibraryComponent | null
        ```

        Returns LibraryComponent | null

        If the shape is a component instance, returns the reference to the component associated
        otherwise will return null
      detach: |-
        ```
        detach(): void
        ```

        If the current shape is a component it will remove the component information and leave the
        shape as a "basic shape"

        Returns void
      swapComponent: |-
        ```
        swapComponent(component: LibraryComponent): void
        ```

        Swaps the component instance for another component, keeping the overrides
        when possible. Similar to the "swap component" action on the Penpot interface.
        The current shape must be a component copy instance.

        Parameters

        * component: LibraryComponent

          The new component to replace the current one

        Returns void
      resetOverrides: |-
        ```
        resetOverrides(): void
        ```

        Resets the overrides of the component copy, restoring all its attributes
        (and those of its children) to the ones in the linked main component.
        Similar to the "reset overrides" action on the Penpot interface.
        The current shape must be a component copy instance.

        Returns void
      switchVariant: |-
        ```
        switchVariant(pos: number, value: string): void
        ```

        Switch a VariantComponent copy to the nearest one that has the specified property value

        Parameters

        * pos: number

          The position of the property to update
        * value: string

          The new value of the property

        Returns void
      combineAsVariants: |-
        ```
        combineAsVariants(ids: string[]): VariantContainer
        ```

        Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu
        on the Penpot interface.
        The current shape must be a component main instance.

        Parameters

        * ids: string[]

          A list of ids of the main instances of the components to combine with this one.

        Returns VariantContainer

        The variant container created
      isVariantHead: |-
        ```
        isVariantHead(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the head of a components tree nested structure,
        and that component is a VariantComponent
      resize: |-
        ```
        resize(width: number, height: number): void
        ```

        Resizes the shape to the specified width and height.

        Parameters

        * width: number

          The new width of the shape.
        * height: number

          The new height of the shape.

        Returns void

        Example
        ```
        shape.resize(200, 100);
        ```
      rotate: |-
        ```
        rotate(angle: number, center?: { x: number; y: number } | null): void
        ```

        Rotates the shape in relation with the given center.

        Parameters

        * angle: number

          Angle in degrees to rotate.
        * center: { x: number; y: number } | null

          Center of the transform rotation. If not sent it will use the geometric center of the shape.

        Returns void

        Example
        ```
        shape.rotate(45);
        ```
      bringToFront: |-
        ```
        bringToFront(): void
        ```

        Moves the current shape to the front of its siblings

        Returns void
      bringForward: |-
        ```
        bringForward(): void
        ```

        Moves the current shape one position forward in its list of siblings

        Returns void
      sendToBack: |-
        ```
        sendToBack(): void
        ```

        Moves the current shape to the back of its siblings

        Returns void
      sendBackward: |-
        ```
        sendBackward(): void
        ```

        Moves the current shape one position backwards in its list of siblings

        Returns void
      export: |-
        ```
        export(config: Export): Promise<Uint8Array<ArrayBufferLike>>
        ```

        Generates an export from the current shape.

        Parameters

        * config: Export

        Returns Promise<Uint8Array<ArrayBufferLike>>

        Example
        ```
        shape.export({ type: 'png', scale: 2 });
        ```
      addInteraction: |-
        ```
        addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction
        ```

        Adds a new interaction to the shape.

        If the interaction starts a flow (for example a `navigate-to` action) and
        the shape's board is not already part of any flow, a new flow starting at
        that board is created automatically, matching the behavior of the editor.

        Parameters

        * trigger: Trigger

          defines the conditions under which the action will be triggered
        * action: Action

          defines what will be executed when the trigger happens
        * delay: number

          for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise.

        Returns Interaction

        Example
        ```
        shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard });
        ```
      removeInteraction: |-
        ```
        removeInteraction(interaction: Interaction): void
        ```

        Removes the interaction from the shape.

        Parameters

        * interaction: Interaction

          is the interaction to remove from the shape

        Returns void

        Example
        ```
        shape.removeInteraction(interaction);
        ```
      applyToken: |-
        ```
        applyToken(token: Token, properties?: TokenProperty[]): void
        ```

        Applies one design token to one or more properties of the shape.

        Parameters

        * token: Token

          is the Token to apply
        * properties: TokenProperty[]

          an optional list of property names. If omitted, the
          default properties will be applied.

          NOTE that the tokens application is by name and not by id. If there exist
          several tokens with the same name in different sets, the actual token applied
          and the value set to the attributes will depend on which sets are active
          (and will change if different sets or themes are activated later).

        Returns void
      clone: |-
        ```
        clone(): Shape
        ```

        Creates a clone of the shape.

        Returns Shape

        Returns a new instance of the shape with identical properties.
      remove: |-
        ```
        remove(): void
        ```

        Removes the shape from its parent.

        Returns void
GuideColumn:
  overview: |-
    Interface GuideColumn
    =====================

    Represents a board guide for columns in Penpot.
    This interface includes properties for defining the type, visibility, and parameters of column guides within a board.

    ```
    interface GuideColumn {
        type: "column";
        display: boolean;
        params: GuideColumnParams;
    }
    ```

    Referenced by: Guide
  members:
    Properties:
      type: |-
        ```
        readonly type: "column"
        ```

        The type of the guide, which is always 'column' for column guides.
      display: |-
        ```
        readonly display: boolean
        ```

        Specifies whether the column guide is displayed.
      params: |-
        ```
        readonly params: GuideColumnParams
        ```

        The parameters defining the appearance and layout of the column guides.
GuideColumnParams:
  overview: |-
    Interface GuideColumnParams
    ===========================

    Represents parameters for board guide columns in Penpot.
    This interface includes properties for defining the appearance and layout of column guides within a board.

    ```
    interface GuideColumnParams {
        color: { color: string; opacity: number };
        type?: "center" | "left" | "right" | "stretch";
        size?: number;
        margin?: number;
        itemLength?: number;
        gutter?: number;
    }
    ```

    Referenced by: GuideColumn, GuideRow
  members:
    Properties:
      color: |-
        ```
        readonly color: { color: string; opacity: number }
        ```

        The color configuration for the column guides.
      type: |-
        ```
        readonly type?: "center" | "left" | "right" | "stretch"
        ```

        The optional alignment type of the column guides.

        * 'stretch': Columns stretch to fit the available space.
        * 'left': Columns align to the left.
        * 'center': Columns align to the center.
        * 'right': Columns align to the right.
      size: |-
        ```
        readonly size?: number
        ```

        The optional size of each column.
      margin: |-
        ```
        readonly margin?: number
        ```

        The optional margin between the columns and the board edges.
      itemLength: |-
        ```
        readonly itemLength?: number
        ```

        The optional length of each item within the columns.
      gutter: |-
        ```
        readonly gutter?: number
        ```

        The optional gutter width between columns.
GuideRow:
  overview: |-
    Interface GuideRow
    ==================

    Represents a board guide for rows in Penpot.
    This interface includes properties for defining the type, visibility, and parameters of row guides within a board.

    ```
    interface GuideRow {
        type: "row";
        display: boolean;
        params: GuideColumnParams;
    }
    ```

    Referenced by: Guide
  members:
    Properties:
      type: |-
        ```
        readonly type: "row"
        ```

        The type of the guide, which is always 'row' for row guides.
      display: |-
        ```
        readonly display: boolean
        ```

        Specifies whether the row guide is displayed.
      params: |-
        ```
        readonly params: GuideColumnParams
        ```

        The parameters defining the appearance and layout of the row guides.
        Note: This reuses the same parameter structure as column guides.
GuideSquare:
  overview: |-
    Interface GuideSquare
    =====================

    Represents a board guide for squares in Penpot.
    This interface includes properties for defining the type, visibility, and parameters of square guides within a board.

    ```
    interface GuideSquare {
        type: "square";
        display: boolean;
        params: GuideSquareParams;
    }
    ```

    Referenced by: Guide
  members:
    Properties:
      type: |-
        ```
        readonly type: "square"
        ```

        The type of the guide, which is always 'square' for square guides.
      display: |-
        ```
        readonly display: boolean
        ```

        Specifies whether the square guide is displayed.
      params: |-
        ```
        readonly params: GuideSquareParams
        ```

        The parameters defining the appearance and layout of the square guides.
GuideSquareParams:
  overview: |-
    Interface GuideSquareParams
    ===========================

    Represents parameters for board guide squares in Penpot.
    This interface includes properties for defining the appearance and size of square guides within a board.

    ```
    interface GuideSquareParams {
        color: { color: string; opacity: number };
        size?: number;
    }
    ```

    Referenced by: GuideSquare
  members:
    Properties:
      color: |-
        ```
        readonly color: { color: string; opacity: number }
        ```

        The color configuration for the square guides.
      size: |-
        ```
        readonly size?: number
        ```

        The optional size of each square guide.
HistoryContext:
  overview: |-
    Interface HistoryContext
    ========================

    This object allows to access to some history functions

    ```
    interface HistoryContext {
        undoBlockBegin(): Symbol;
        undoBlockFinish(blockId: Symbol): void;
    }
    ```

    Referenced by: Context, Penpot
  members:
    Methods:
      undoBlockBegin: |-
        ```
        undoBlockBegin(): Symbol
        ```

        Starts an undo block. All operations done inside this block will be undone together until
        a call to `undoBlockFinish` is called.

        Returns Symbol

        the block identifier
      undoBlockFinish: |-
        ```
        undoBlockFinish(blockId: Symbol): void
        ```

        Ends the undo block started with `undoBlockBegin`

        Parameters

        * blockId: Symbol

          is the id returned by `undoBlockBegin`

        Returns void

        Example
        ```
        historyContext.undoBlockFinish(blockId);
        ```
Image:
  overview: |-
    Interface Image
    ===============

    Represents an image shape in Penpot.
    This interface extends `ShapeBase` and includes properties specific to image shapes.

    Deprecated

    Image shapes exist only for backward compatibility with old files.
    New images are embedded in a `Fill` via its `fillImage` (an `ImageData`).

    ```
    interface Image {
        type: "image";
        fills: Fill[];
        getPluginData(key: string): string;
        setPluginData(key: string, value: string): void;
        getPluginDataKeys(): string[];
        getSharedPluginData(namespace: string, key: string): string;
        setSharedPluginData(namespace: string, key: string, value: string): void;
        getSharedPluginDataKeys(namespace: string): string[];
        id: string;
        name: string;
        parent: Shape | null;
        parentIndex: number;
        x: number;
        y: number;
        width: number;
        height: number;
        bounds: Bounds;
        center: Point;
        blocked: boolean;
        hidden: boolean;
        visible: boolean;
        proportionLock: boolean;
        constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale";
        constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom";
        fixedWhenScrolling: boolean;
        borderRadius: number;
        borderRadiusTopLeft: number;
        borderRadiusTopRight: number;
        borderRadiusBottomRight: number;
        borderRadiusBottomLeft: number;
        opacity: number;
        blendMode:
            | "difference"
            | "normal"
            | "darken"
            | "multiply"
            | "color-burn"
            | "lighten"
            | "screen"
            | "color-dodge"
            | "overlay"
            | "soft-light"
            | "hard-light"
            | "exclusion"
            | "hue"
            | "saturation"
            | "color"
            | "luminosity";
        shadows: Shadow[];
        blur?: Blur;
        backgroundBlur?: Blur;
        exports: Export[];
        boardX: number;
        boardY: number;
        parentX: number;
        parentY: number;
        flipX: boolean;
        flipY: boolean;
        rotation: number;
        strokes: Stroke[];
        layoutChild?: LayoutChildProperties;
        layoutCell?: LayoutCellProperties;
        setParentIndex(index: number): void;
        tokens: {
            width: string;
            height: string;
            fill: string;
            x: string;
            y: string;
            all: string;
            borderRadiusTopLeft: string;
            borderRadiusTopRight: string;
            borderRadiusBottomRight: string;
            borderRadiusBottomLeft: string;
            shadow: string;
            strokeColor: string;
            strokeWidth: string;
            fontFamilies: string;
            fontSize: string;
            fontWeight: string;
            letterSpacing: string;
            rotation: string;
            opacity: string;
            layoutItemMinW: string;
            layoutItemMaxW: string;
            layoutItemMinH: string;
            layoutItemMaxH: string;
            rowGap: string;
            columnGap: string;
            paddingLeft: string;
            paddingTop: string;
            paddingRight: string;
            paddingBottom: string;
            marginLeft: string;
            marginTop: string;
            marginRight: string;
            marginBottom: string;
            textCase: string;
            textDecoration: string;
            typography: string;
        };
        isComponentInstance(): boolean;
        isComponentMainInstance(): boolean;
        isComponentCopyInstance(): boolean;
        isComponentRoot(): boolean;
        isComponentHead(): boolean;
        componentRefShape(): Shape | null;
        componentRoot(): Shape | null;
        componentHead(): Shape | null;
        component(): LibraryComponent | null;
        detach(): void;
        swapComponent(component: LibraryComponent): void;
        resetOverrides(): void;
        switchVariant(pos: number, value: string): void;
        combineAsVariants(ids: string[]): VariantContainer;
        isVariantHead(): boolean;
        resize(width: number, height: number): void;
        rotate(angle: number, center?: { x: number; y: number } | null): void;
        bringToFront(): void;
        bringForward(): void;
        sendToBack(): void;
        sendBackward(): void;
        export(config: Export): Promise<Uint8Array<ArrayBufferLike>>;
        interactions: Interaction[];
        addInteraction(
            trigger: Trigger,
            action: Action,
            delay?: number,
        ): Interaction;
        removeInteraction(interaction: Interaction): void;
        applyToken(token: Token, properties?: TokenProperty[]): void;
        clone(): Shape;
        remove(): void;
    }
    ```

    Hierarchy (View Summary)

    * ShapeBase
      + Image

    Referenced by: Shape
  members:
    Properties:
      type: |-
        ```
        readonly type: "image"
        ```

        The type of the shape, which is always 'image' for image shapes.
      fills: |-
        ```
        fills: Fill[]
        ```

        The fills applied to the shape.

        Overrides ShapeBase.fills
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier of the shape.
      name: |-
        ```
        name: string
        ```

        The name of the shape.
      parent: |-
        ```
        readonly parent: Shape | null
        ```

        The parent shape. If the shape is the first level the parent will be the root shape.
        For the root shape the parent is null
      parentIndex: |-
        ```
        readonly parentIndex: number
        ```

        Returns the index of the current shape in the parent
      x: |-
        ```
        x: number
        ```

        The x-coordinate of the shape's position.
      y: |-
        ```
        y: number
        ```

        The y-coordinate of the shape's position.
      width: |-
        ```
        readonly width: number
        ```

        The width of the shape.
      height: |-
        ```
        readonly height: number
        ```

        The height of the shape.
      bounds: |-
        ```
        readonly bounds: Bounds
        ```

        The bounding box surrounding the current shape
      center: |-
        ```
        readonly center: Point
        ```

        The geometric center of the shape
      blocked: |-
        ```
        blocked: boolean
        ```

        Indicates whether the shape is blocked.
      hidden: |-
        ```
        hidden: boolean
        ```

        Indicates whether the shape is hidden.
      visible: |-
        ```
        visible: boolean
        ```

        Indicates whether the shape is visible.
      proportionLock: |-
        ```
        proportionLock: boolean
        ```

        Indicates whether the shape has proportion lock enabled.
      constraintsHorizontal: |-
        ```
        constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"
        ```

        The horizontal constraints applied to the shape.
      constraintsVertical: |-
        ```
        constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"
        ```

        The vertical constraints applied to the shape.
      fixedWhenScrolling: |-
        ```
        fixedWhenScrolling: boolean
        ```

        Indicates whether the shape stays fixed in place while scrolling.
      borderRadius: |-
        ```
        borderRadius: number
        ```

        The border radius of the shape.
      borderRadiusTopLeft: |-
        ```
        borderRadiusTopLeft: number
        ```

        The border radius of the top-left corner of the shape.
      borderRadiusTopRight: |-
        ```
        borderRadiusTopRight: number
        ```

        The border radius of the top-right corner of the shape.
      borderRadiusBottomRight: |-
        ```
        borderRadiusBottomRight: number
        ```

        The border radius of the bottom-right corner of the shape.
      borderRadiusBottomLeft: |-
        ```
        borderRadiusBottomLeft: number
        ```

        The border radius of the bottom-left corner of the shape.
      opacity: |-
        ```
        opacity: number
        ```

        The opacity of the shape.
      blendMode: |-
        ```
        blendMode:
            | "difference"
            | "normal"
            | "darken"
            | "multiply"
            | "color-burn"
            | "lighten"
            | "screen"
            | "color-dodge"
            | "overlay"
            | "soft-light"
            | "hard-light"
            | "exclusion"
            | "hue"
            | "saturation"
            | "color"
            | "luminosity"
        ```

        The blend mode applied to the shape.
      shadows: |-
        ```
        shadows: Shadow[]
        ```

        The shadows applied to the shape.
      blur: |-
        ```
        blur?: Blur
        ```

        The blur effect applied to the shape.
      backgroundBlur: |-
        ```
        backgroundBlur?: Blur
        ```

        The background blur effect applied to the shape.
        Background blur creates a blur effect on the content behind the shape,
        rather than on the shape's own content.
      exports: |-
        ```
        exports: Export[]
        ```

        The export settings of the shape.
      boardX: |-
        ```
        boardX: number
        ```

        The x-coordinate of the shape relative to its board.
      boardY: |-
        ```
        boardY: number
        ```

        The y-coordinate of the shape relative to its board.
      parentX: |-
        ```
        parentX: number
        ```

        The x-coordinate of the shape relative to its parent.
      parentY: |-
        ```
        parentY: number
        ```

        The y-coordinate of the shape relative to its parent.
      flipX: |-
        ```
        flipX: boolean
        ```

        Indicates whether the shape is flipped horizontally.
      flipY: |-
        ```
        flipY: boolean
        ```

        Indicates whether the shape is flipped vertically.
      rotation: |-
        ```
        rotation: number
        ```

        The rotation in degrees of the shape with respect to its center.
      strokes: |-
        ```
        strokes: Stroke[]
        ```

        The strokes applied to the shape.
      layoutChild: |-
        ```
        readonly layoutChild?: LayoutChildProperties
        ```

        Layout properties for children of the shape.
      layoutCell: |-
        ```
        readonly layoutCell?: LayoutCellProperties
        ```

        Layout properties for cells in a grid layout.
      tokens: |-
        ```
        readonly tokens: {
            width: string;
            height: string;
            fill: string;
            x: string;
            y: string;
            all: string;
            borderRadiusTopLeft: string;
            borderRadiusTopRight: string;
            borderRadiusBottomRight: string;
            borderRadiusBottomLeft: string;
            shadow: string;
            strokeColor: string;
            strokeWidth: string;
            fontFamilies: string;
            fontSize: string;
            fontWeight: string;
            letterSpacing: string;
            rotation: string;
            opacity: string;
            layoutItemMinW: string;
            layoutItemMaxW: string;
            layoutItemMinH: string;
            layoutItemMaxH: string;
            rowGap: string;
            columnGap: string;
            paddingLeft: string;
            paddingTop: string;
            paddingRight: string;
            paddingBottom: string;
            marginLeft: string;
            marginTop: string;
            marginRight: string;
            marginBottom: string;
            textCase: string;
            textDecoration: string;
            typography: string;
        }
        ```

        The design tokens applied to this shape.
        It's a map property name -> token name.

        NOTE that the tokens application is by name and not by id. If there exist
        several tokens with the same name in different sets, the actual token applied
        and the value set to the attributes will depend on which sets are active
        (and will change if different sets or themes are activated later).
      interactions: |-
        ```
        readonly interactions: Interaction[]
        ```

        The interactions for the current shape.
    Methods:
      getPluginData: |-
        ```
        getPluginData(key: string): string
        ```

        Retrieves the data for our own plugin, given a specific key.

        Parameters

        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the data associated with the key as a string.

        Example
        ```
        const data = shape.getPluginData('exampleKey');console.log(data);
        ```
      setPluginData: |-
        ```
        setPluginData(key: string, value: string): void
        ```

        Sets the plugin-specific data for the given key.

        Parameters

        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setPluginData('exampleKey', 'exampleValue');
        ```
      getPluginDataKeys: |-
        ```
        getPluginDataKeys(): string[]
        ```

        Retrieves all the keys for the plugin-specific data.

        Returns string[]

        Returns an array of strings representing all the keys.

        Example
        ```
        const keys = shape.getPluginDataKeys();console.log(keys);
        ```
      getSharedPluginData: |-
        ```
        getSharedPluginData(namespace: string, key: string): string
        ```

        If we know the namespace of an external plugin, this is the way to get their data.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the shared data associated with the key as a string.

        Example
        ```
        const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData);
        ```
      setSharedPluginData: |-
        ```
        setSharedPluginData(namespace: string, key: string, value: string): void
        ```

        Sets the shared plugin-specific data for the given namespace and key.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue');
        ```
      getSharedPluginDataKeys: |-
        ```
        getSharedPluginDataKeys(namespace: string): string[]
        ```

        Retrieves all the keys for the shared plugin-specific data in the given namespace.

        Parameters

        * namespace: string

          The namespace for the shared data.

        Returns string[]

        Returns an array of strings representing all the keys in the namespace.

        Example
        ```
        const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys);
        ```
      setParentIndex: |-
        ```
        setParentIndex(index: number): void
        ```

        Changes the index inside the parent of the current shape.
        This method will shift the indexes of the shapes around that position to
        match the index.
        If the index is greater than the number of elements it will positioned last.

        Parameters

        * index: number

          the new index for the shape to be in

        Returns void
      isComponentInstance: |-
        ```
        isComponentInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component instance
      isComponentMainInstance: |-
        ```
        isComponentMainInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component **main** instance
      isComponentCopyInstance: |-
        ```
        isComponentCopyInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component **copy** instance
      isComponentRoot: |-
        ```
        isComponentRoot(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the root of a component tree
      isComponentHead: |-
        ```
        isComponentHead(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the head of a components tree nested structure
      componentRefShape: |-
        ```
        componentRefShape(): Shape | null
        ```

        Returns Shape | null

        Returns the equivalent shape in the component main instance. If the current shape is inside a
        main instance will return `null`;
      componentRoot: |-
        ```
        componentRoot(): Shape | null
        ```

        Returns Shape | null

        Returns the root of the component tree structure for the current shape. If the current shape
        is already a root will return itself.
      componentHead: |-
        ```
        componentHead(): Shape | null
        ```

        Returns Shape | null

        Returns the head of the component tree structure for the current shape. If the current shape
        is already a head will return itself.
      component: |-
        ```
        component(): LibraryComponent | null
        ```

        Returns LibraryComponent | null

        If the shape is a component instance, returns the reference to the component associated
        otherwise will return null
      detach: |-
        ```
        detach(): void
        ```

        If the current shape is a component it will remove the component information and leave the
        shape as a "basic shape"

        Returns void
      swapComponent: |-
        ```
        swapComponent(component: LibraryComponent): void
        ```

        Swaps the component instance for another component, keeping the overrides
        when possible. Similar to the "swap component" action on the Penpot interface.
        The current shape must be a component copy instance.

        Parameters

        * component: LibraryComponent

          The new component to replace the current one

        Returns void
      resetOverrides: |-
        ```
        resetOverrides(): void
        ```

        Resets the overrides of the component copy, restoring all its attributes
        (and those of its children) to the ones in the linked main component.
        Similar to the "reset overrides" action on the Penpot interface.
        The current shape must be a component copy instance.

        Returns void
      switchVariant: |-
        ```
        switchVariant(pos: number, value: string): void
        ```

        Switch a VariantComponent copy to the nearest one that has the specified property value

        Parameters

        * pos: number

          The position of the property to update
        * value: string

          The new value of the property

        Returns void
      combineAsVariants: |-
        ```
        combineAsVariants(ids: string[]): VariantContainer
        ```

        Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu
        on the Penpot interface.
        The current shape must be a component main instance.

        Parameters

        * ids: string[]

          A list of ids of the main instances of the components to combine with this one.

        Returns VariantContainer

        The variant container created
      isVariantHead: |-
        ```
        isVariantHead(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the head of a components tree nested structure,
        and that component is a VariantComponent
      resize: |-
        ```
        resize(width: number, height: number): void
        ```

        Resizes the shape to the specified width and height.

        Parameters

        * width: number

          The new width of the shape.
        * height: number

          The new height of the shape.

        Returns void

        Example
        ```
        shape.resize(200, 100);
        ```
      rotate: |-
        ```
        rotate(angle: number, center?: { x: number; y: number } | null): void
        ```

        Rotates the shape in relation with the given center.

        Parameters

        * angle: number

          Angle in degrees to rotate.
        * center: { x: number; y: number } | null

          Center of the transform rotation. If not sent it will use the geometric center of the shape.

        Returns void

        Example
        ```
        shape.rotate(45);
        ```
      bringToFront: |-
        ```
        bringToFront(): void
        ```

        Moves the current shape to the front of its siblings

        Returns void
      bringForward: |-
        ```
        bringForward(): void
        ```

        Moves the current shape one position forward in its list of siblings

        Returns void
      sendToBack: |-
        ```
        sendToBack(): void
        ```

        Moves the current shape to the back of its siblings

        Returns void
      sendBackward: |-
        ```
        sendBackward(): void
        ```

        Moves the current shape one position backwards in its list of siblings

        Returns void
      export: |-
        ```
        export(config: Export): Promise<Uint8Array<ArrayBufferLike>>
        ```

        Generates an export from the current shape.

        Parameters

        * config: Export

        Returns Promise<Uint8Array<ArrayBufferLike>>

        Example
        ```
        shape.export({ type: 'png', scale: 2 });
        ```
      addInteraction: |-
        ```
        addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction
        ```

        Adds a new interaction to the shape.

        If the interaction starts a flow (for example a `navigate-to` action) and
        the shape's board is not already part of any flow, a new flow starting at
        that board is created automatically, matching the behavior of the editor.

        Parameters

        * trigger: Trigger

          defines the conditions under which the action will be triggered
        * action: Action

          defines what will be executed when the trigger happens
        * delay: number

          for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise.

        Returns Interaction

        Example
        ```
        shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard });
        ```
      removeInteraction: |-
        ```
        removeInteraction(interaction: Interaction): void
        ```

        Removes the interaction from the shape.

        Parameters

        * interaction: Interaction

          is the interaction to remove from the shape

        Returns void

        Example
        ```
        shape.removeInteraction(interaction);
        ```
      applyToken: |-
        ```
        applyToken(token: Token, properties?: TokenProperty[]): void
        ```

        Applies one design token to one or more properties of the shape.

        Parameters

        * token: Token

          is the Token to apply
        * properties: TokenProperty[]

          an optional list of property names. If omitted, the
          default properties will be applied.

          NOTE that the tokens application is by name and not by id. If there exist
          several tokens with the same name in different sets, the actual token applied
          and the value set to the attributes will depend on which sets are active
          (and will change if different sets or themes are activated later).

        Returns void
      clone: |-
        ```
        clone(): Shape
        ```

        Creates a clone of the shape.

        Returns Shape

        Returns a new instance of the shape with identical properties.
      remove: |-
        ```
        remove(): void
        ```

        Removes the shape from its parent.

        Returns void
Interaction:
  overview: |-
    Interface Interaction
    =====================

    Penpot allows you to prototype interactions by connecting boards, which can act as screens.

    ```
    interface Interaction {
        shape?: Shape;
        trigger: Trigger;
        delay?: number | null;
        action: Action;
        remove(): void;
    }
    ```

    Referenced by: Board, Boolean, Ellipse, Group, Image, Path, Rectangle, ShapeBase, SvgRaw, Text, VariantContainer
  members:
    Properties:
      shape: |-
        ```
        readonly shape?: Shape
        ```

        The shape that owns the interaction
      trigger: |-
        ```
        trigger: Trigger
        ```

        The user action that will start the interaction.
      delay: |-
        ```
        delay?: number | null
        ```

        Time in **milliseconds** after the action will happen. Only applies to `after-delay` triggers.
      action: |-
        ```
        action: Action
        ```

        The action that will execute after the trigger happens.
    Methods:
      remove: |-
        ```
        remove(): void
        ```

        Removes the interaction

        Returns void
LayoutCellProperties:
  overview: |-
    Interface LayoutCellProperties
    ==============================

    Properties for defining the layout of a cell in Penpot.

    ```
    interface LayoutCellProperties {
        row?: number;
        rowSpan?: number;
        column?: number;
        columnSpan?: number;
        areaName?: string;
        position?: "area" | "auto" | "manual";
    }
    ```

    Referenced by: Board, Boolean, Ellipse, Group, Image, Path, Rectangle, ShapeBase, SvgRaw, Text, VariantContainer
  members:
    Properties:
      row: |-
        ```
        row?: number
        ```

        The row index of the cell.
        This value is optional and indicates the starting row of the cell.
      rowSpan: |-
        ```
        rowSpan?: number
        ```

        The number of rows the cell should span.
        This value is optional and determines the vertical span of the cell.
      column: |-
        ```
        column?: number
        ```

        The column index of the cell.
        This value is optional and indicates the starting column of the cell.
      columnSpan: |-
        ```
        columnSpan?: number
        ```

        The number of columns the cell should span.
        This value is optional and determines the horizontal span of the cell.
      areaName: |-
        ```
        areaName?: string
        ```

        The name of the grid area that this cell belongs to.
        This value is optional and can be used to define named grid areas.
      position: |-
        ```
        position?: "area" | "auto" | "manual"
        ```

        The positioning mode of the cell.
        This value can be 'auto', 'manual', or 'area' and determines how the cell is positioned within the layout.
LayoutChildProperties:
  overview: |-
    Interface LayoutChildProperties
    ===============================

    Properties for defining the layout of a child element in Penpot.

    ```
    interface LayoutChildProperties {
        absolute: boolean;
        zIndex: number;
        horizontalSizing: "fill" | "auto" | "fix";
        verticalSizing: "fill" | "auto" | "fix";
        alignSelf: "end" | "start" | "center" | "auto" | "stretch";
        horizontalMargin: number;
        verticalMargin: number;
        topMargin: number;
        rightMargin: number;
        bottomMargin: number;
        leftMargin: number;
        maxWidth: number | null;
        maxHeight: number | null;
        minWidth: number | null;
        minHeight: number | null;
    }
    ```

    Referenced by: Board, Boolean, Ellipse, Group, Image, Path, Rectangle, ShapeBase, SvgRaw, Text, VariantContainer
  members:
    Properties:
      absolute: |-
        ```
        absolute: boolean
        ```

        Specifies whether the child element is positioned absolutely.
        When set to true, the element is taken out of the normal document flow and positioned relative to its nearest positioned ancestor.
      zIndex: |-
        ```
        zIndex: number
        ```

        Defines the stack order of the child element
        Elements with a higher zIndex will be displayed in front of those with a lower zIndex.
      horizontalSizing: |-
        ```
        horizontalSizing: "fill" | "auto" | "fix"
        ```

        Determines the horizontal sizing behavior of the child element

        * 'auto': The width is determined by the content.
        * 'fill': The element takes up the available width.
        * 'fix': The width is fixed.
      verticalSizing: |-
        ```
        verticalSizing: "fill" | "auto" | "fix"
        ```

        Determines the vertical sizing behavior of the child element.

        * 'auto': The height is determined by the content.
        * 'fill': The element takes up the available height.
        * 'fix': The height is fixed.
      alignSelf: |-
        ```
        alignSelf: "end" | "start" | "center" | "auto" | "stretch"
        ```

        Aligns the child element within its container.

        * 'auto': Default alignment.
        * 'start': Aligns the element at the start of the container.
        * 'center': Centers the element within the container.
        * 'end': Aligns the element at the end of the container.
        * 'stretch': Stretches the element to fill the container.
      horizontalMargin: |-
        ```
        horizontalMargin: number
        ```

        Sets the horizontal margin of the child element.
        This is the space on the left and right sides of the element.
      verticalMargin: |-
        ```
        verticalMargin: number
        ```

        Sets the vertical margin of the child element.
        This is the space on the top and bottom sides of the element.
      topMargin: |-
        ```
        topMargin: number
        ```

        Sets the top margin of the child element.
        This is the space above the element.
      rightMargin: |-
        ```
        rightMargin: number
        ```

        Sets the right margin of the child element.
        This is the space to the right of the element.
      bottomMargin: |-
        ```
        bottomMargin: number
        ```

        Sets the bottom margin of the child element.
        This is the space below the element.
      leftMargin: |-
        ```
        leftMargin: number
        ```

        Sets the left margin of the child element.
        This is the space to the left of the element.
      maxWidth: |-
        ```
        maxWidth: number | null
        ```

        Defines the maximum width of the child element.
        If set to null, there is no maximum width constraint.
      maxHeight: |-
        ```
        maxHeight: number | null
        ```

        Defines the maximum height of the child element.
        If set to null, there is no maximum height constraint.
      minWidth: |-
        ```
        minWidth: number | null
        ```

        Defines the minimum width of the child element.
        If set to null, there is no minimum width constraint.
      minHeight: |-
        ```
        minHeight: number | null
        ```

        Defines the minimum height of the child element.
        If set to null, there is no minimum height constraint.
Library:
  overview: |-
    Interface Library
    =================

    Represents a library in Penpot, containing colors, typographies, and components.

    ```
    interface Library {
        id: string;
        name: string;
        colors: LibraryColor[];
        typographies: LibraryTypography[];
        components: LibraryComponent[];
        tokens: TokenCatalog;
        createColor(): LibraryColor;
        createTypography(): LibraryTypography;
        createComponent(shapes: Shape[]): LibraryComponent;
        getPluginData(key: string): string;
        setPluginData(key: string, value: string): void;
        getPluginDataKeys(): string[];
        getSharedPluginData(namespace: string, key: string): string;
        setSharedPluginData(namespace: string, key: string, value: string): void;
        getSharedPluginDataKeys(namespace: string): string[];
    }
    ```

    Hierarchy (View Summary)

    * PluginData
      + Library

    Referenced by: LibraryContext
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier of the library.
      name: |-
        ```
        readonly name: string
        ```

        The name of the library.
      colors: |-
        ```
        readonly colors: LibraryColor[]
        ```

        An array of color elements in the library.

        Example
        ```
        console.log(penpot.library.local.colors);
        ```
      typographies: |-
        ```
        readonly typographies: LibraryTypography[]
        ```

        An array of typography elements in the library.
      components: |-
        ```
        readonly components: LibraryComponent[]
        ```

        An array of component elements in the library.

        Example
        ```
        console.log(penpot.library.local.components
        ```
      tokens: |-
        ```
        readonly tokens: TokenCatalog
        ```

        A catalog of Design Tokens in the library.

        See `TokenCatalog` type to see usage.
    Methods:
      createColor: |-
        ```
        createColor(): LibraryColor
        ```

        Creates a new color element in the library.

        Returns LibraryColor

        Returns a new `LibraryColor` object representing the created color element.

        Example
        ```
        const newColor = penpot.library.local.createColor();console.log(newColor);
        ```
      createTypography: |-
        ```
        createTypography(): LibraryTypography
        ```

        Creates a new typography element in the library.

        Returns LibraryTypography

        Returns a new `LibraryTypography` object representing the created typography element.

        Example
        ```
        const newTypography = library.createTypography();
        ```
      createComponent: |-
        ```
        createComponent(shapes: Shape[]): LibraryComponent
        ```

        Creates a new component element in the library using the provided shapes.

        Parameters

        * shapes: Shape[]

          An array of `Shape` objects representing the shapes to be included in the component.

        Returns LibraryComponent

        Returns a new `LibraryComponent` object representing the created component element.

        Example
        ```
        const newComponent = penpot.library.local.createComponent([shape1, shape2]);
        ```
      getPluginData: |-
        ```
        getPluginData(key: string): string
        ```

        Retrieves the data for our own plugin, given a specific key.

        Parameters

        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the data associated with the key as a string.

        Example
        ```
        const data = shape.getPluginData('exampleKey');console.log(data);
        ```
      setPluginData: |-
        ```
        setPluginData(key: string, value: string): void
        ```

        Sets the plugin-specific data for the given key.

        Parameters

        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setPluginData('exampleKey', 'exampleValue');
        ```
      getPluginDataKeys: |-
        ```
        getPluginDataKeys(): string[]
        ```

        Retrieves all the keys for the plugin-specific data.

        Returns string[]

        Returns an array of strings representing all the keys.

        Example
        ```
        const keys = shape.getPluginDataKeys();console.log(keys);
        ```
      getSharedPluginData: |-
        ```
        getSharedPluginData(namespace: string, key: string): string
        ```

        If we know the namespace of an external plugin, this is the way to get their data.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the shared data associated with the key as a string.

        Example
        ```
        const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData);
        ```
      setSharedPluginData: |-
        ```
        setSharedPluginData(namespace: string, key: string, value: string): void
        ```

        Sets the shared plugin-specific data for the given namespace and key.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue');
        ```
      getSharedPluginDataKeys: |-
        ```
        getSharedPluginDataKeys(namespace: string): string[]
        ```

        Retrieves all the keys for the shared plugin-specific data in the given namespace.

        Parameters

        * namespace: string

          The namespace for the shared data.

        Returns string[]

        Returns an array of strings representing all the keys in the namespace.

        Example
        ```
        const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys);
        ```
LibraryColor:
  overview: |-
    Interface LibraryColor
    ======================

    Represents a color element from a library in Penpot.
    This interface extends `LibraryElement` and includes properties specific to color elements.

    ```
    interface LibraryColor {
        color?: string;
        opacity?: number;
        gradient?: Gradient;
        image?: ImageData;
        asFill(): Fill;
        asStroke(): Stroke;
        id: string;
        libraryId: string;
        name: string;
        path: string;
        getPluginData(key: string): string;
        setPluginData(key: string, value: string): void;
        getPluginDataKeys(): string[];
        getSharedPluginData(namespace: string, key: string): string;
        setSharedPluginData(namespace: string, key: string, value: string): void;
        getSharedPluginDataKeys(namespace: string): string[];
    }
    ```

    Hierarchy (View Summary)

    * LibraryElement
      + LibraryColor

    Referenced by: Library
  members:
    Properties:
      color: |-
        ```
        color?: string
        ```

        The color value of the library color.
      opacity: |-
        ```
        opacity?: number
        ```

        The opacity value of the library color.
      gradient: |-
        ```
        gradient?: Gradient
        ```

        The gradient value of the library color, if it's a gradient.
      image: |-
        ```
        image?: ImageData
        ```

        The image data of the library color, if it's an image fill.
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier of the library element.
      libraryId: |-
        ```
        readonly libraryId: string
        ```

        The unique identifier of the library to which the element belongs.
      name: |-
        ```
        name: string
        ```

        The name of the library element.
      path: |-
        ```
        path: string
        ```

        The path of the library element.
    Methods:
      asFill: |-
        ```
        asFill(): Fill
        ```

        Converts the library color into a fill object.

        Returns Fill

        Returns a `Fill` object representing the color as a fill.

        Example
        ```
        const fill = libraryColor.asFill();
        ```
      asStroke: |-
        ```
        asStroke(): Stroke
        ```

        Converts the library color into a stroke object.

        Returns Stroke

        Returns a `Stroke` object representing the color as a stroke.

        Example
        ```
        const stroke = libraryColor.asStroke();
        ```
      getPluginData: |-
        ```
        getPluginData(key: string): string
        ```

        Retrieves the data for our own plugin, given a specific key.

        Parameters

        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the data associated with the key as a string.

        Example
        ```
        const data = shape.getPluginData('exampleKey');console.log(data);
        ```
      setPluginData: |-
        ```
        setPluginData(key: string, value: string): void
        ```

        Sets the plugin-specific data for the given key.

        Parameters

        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setPluginData('exampleKey', 'exampleValue');
        ```
      getPluginDataKeys: |-
        ```
        getPluginDataKeys(): string[]
        ```

        Retrieves all the keys for the plugin-specific data.

        Returns string[]

        Returns an array of strings representing all the keys.

        Example
        ```
        const keys = shape.getPluginDataKeys();console.log(keys);
        ```
      getSharedPluginData: |-
        ```
        getSharedPluginData(namespace: string, key: string): string
        ```

        If we know the namespace of an external plugin, this is the way to get their data.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the shared data associated with the key as a string.

        Example
        ```
        const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData);
        ```
      setSharedPluginData: |-
        ```
        setSharedPluginData(namespace: string, key: string, value: string): void
        ```

        Sets the shared plugin-specific data for the given namespace and key.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue');
        ```
      getSharedPluginDataKeys: |-
        ```
        getSharedPluginDataKeys(namespace: string): string[]
        ```

        Retrieves all the keys for the shared plugin-specific data in the given namespace.

        Parameters

        * namespace: string

          The namespace for the shared data.

        Returns string[]

        Returns an array of strings representing all the keys in the namespace.

        Example
        ```
        const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys);
        ```
LibraryComponent:
  overview: |-
    Interface LibraryComponent
    ==========================

    Represents a component element from a library in Penpot.
    This interface extends `LibraryElement` and includes properties specific to component elements.

    ```
    interface LibraryComponent {
        instance(): Shape;
        mainInstance(): Shape;
        isVariant(): this is LibraryVariantComponent;
        transformInVariant(): void;
        id: string;
        libraryId: string;
        name: string;
        path: string;
        getPluginData(key: string): string;
        setPluginData(key: string, value: string): void;
        getPluginDataKeys(): string[];
        getSharedPluginData(namespace: string, key: string): string;
        setSharedPluginData(namespace: string, key: string, value: string): void;
        getSharedPluginDataKeys(namespace: string): string[];
    }
    ```

    Hierarchy (View Summary)

    * LibraryElement
      + LibraryComponent
        - LibraryVariantComponent

    Referenced by: Board, Boolean, ContextTypesUtils, Ellipse, Group, Image, Library, Path, Rectangle, ShapeBase, SvgRaw, Text, VariantContainer, Variants
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier of the library element.
      libraryId: |-
        ```
        readonly libraryId: string
        ```

        The unique identifier of the library to which the element belongs.
      name: |-
        ```
        name: string
        ```

        The name of the library element.
      path: |-
        ```
        path: string
        ```

        The path of the library element.
    Methods:
      instance: |-
        ```
        instance(): Shape
        ```

        Creates an instance of the component.

        Returns Shape

        Returns a `Shape` object representing the instance of the component.

        Example
        ```
        const componentInstance = libraryComponent.instance();
        ```
      mainInstance: |-
        ```
        mainInstance(): Shape
        ```

        Returns Shape

        Returns the reference to the main component shape.
      isVariant: |-
        ```
        isVariant(): this is LibraryVariantComponent
        ```

        Checks whether this component is a variant component.
        If true, the component can be used as a `LibraryVariantComponent`,
        which provides additional attributes (e.g. `variants`) and methods.

        Returns this is LibraryVariantComponent
      transformInVariant: |-
        ```
        transformInVariant(): void
        ```

        Creates a new Variant from this standard Component. It creates a VariantContainer, transforms this Component into a VariantComponent, duplicates it, and creates a
        set of properties based on the component name and path.
        Similar to doing it with the contextual menu or the shortcut on the Penpot interface

        Returns void
      getPluginData: |-
        ```
        getPluginData(key: string): string
        ```

        Retrieves the data for our own plugin, given a specific key.

        Parameters

        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the data associated with the key as a string.

        Example
        ```
        const data = shape.getPluginData('exampleKey');console.log(data);
        ```
      setPluginData: |-
        ```
        setPluginData(key: string, value: string): void
        ```

        Sets the plugin-specific data for the given key.

        Parameters

        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setPluginData('exampleKey', 'exampleValue');
        ```
      getPluginDataKeys: |-
        ```
        getPluginDataKeys(): string[]
        ```

        Retrieves all the keys for the plugin-specific data.

        Returns string[]

        Returns an array of strings representing all the keys.

        Example
        ```
        const keys = shape.getPluginDataKeys();console.log(keys);
        ```
      getSharedPluginData: |-
        ```
        getSharedPluginData(namespace: string, key: string): string
        ```

        If we know the namespace of an external plugin, this is the way to get their data.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the shared data associated with the key as a string.

        Example
        ```
        const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData);
        ```
      setSharedPluginData: |-
        ```
        setSharedPluginData(namespace: string, key: string, value: string): void
        ```

        Sets the shared plugin-specific data for the given namespace and key.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue');
        ```
      getSharedPluginDataKeys: |-
        ```
        getSharedPluginDataKeys(namespace: string): string[]
        ```

        Retrieves all the keys for the shared plugin-specific data in the given namespace.

        Parameters

        * namespace: string

          The namespace for the shared data.

        Returns string[]

        Returns an array of strings representing all the keys in the namespace.

        Example
        ```
        const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys);
        ```
LibraryVariantComponent:
  overview: |-
    Interface LibraryVariantComponent
    =================================

    Represents a component element from a library in Penpot.
    This interface extends `LibraryElement` and includes properties specific to component elements.

    ```
    interface LibraryVariantComponent {
        instance(): Shape;
        mainInstance(): Shape;
        isVariant(): this is LibraryVariantComponent;
        transformInVariant(): void;
        variants: Variants | null;
        variantProps: { [property: string]: string };
        variantError: string;
        addVariant(): void;
        setVariantProperty(pos: number, value: string): void;
        id: string;
        libraryId: string;
        name: string;
        path: string;
        getPluginData(key: string): string;
        setPluginData(key: string, value: string): void;
        getPluginDataKeys(): string[];
        getSharedPluginData(namespace: string, key: string): string;
        setSharedPluginData(namespace: string, key: string, value: string): void;
        getSharedPluginDataKeys(namespace: string): string[];
    }
    ```

    Hierarchy (View Summary)

    * LibraryComponent
      + LibraryVariantComponent

    Referenced by: ContextTypesUtils, LibraryComponent, LibraryVariantComponent
  members:
    Properties:
      variants: |-
        ```
        readonly variants: Variants | null
        ```

        Access to the Variant interface, for attributes and actions over the full Variant (not only this VariantComponent)
      variantProps: |-
        ```
        readonly variantProps: { [property: string]: string }
        ```

        A list of the variant props of this VariantComponent. Each property has a key and a value
      variantError: |-
        ```
        variantError: string
        ```

        If this VariantComponent has an invalid name, that doesn't follow the structure [property]=[value], [property]=[value]
        this field stores that invalid name
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier of the library element.
      libraryId: |-
        ```
        readonly libraryId: string
        ```

        The unique identifier of the library to which the element belongs.
      name: |-
        ```
        name: string
        ```

        The name of the library element.
      path: |-
        ```
        path: string
        ```

        The path of the library element.
    Methods:
      instance: |-
        ```
        instance(): Shape
        ```

        Creates an instance of the component.

        Returns Shape

        Returns a `Shape` object representing the instance of the component.

        Example
        ```
        const componentInstance = libraryComponent.instance();
        ```
      mainInstance: |-
        ```
        mainInstance(): Shape
        ```

        Returns Shape

        Returns the reference to the main component shape.
      isVariant: |-
        ```
        isVariant(): this is LibraryVariantComponent
        ```

        Checks whether this component is a variant component.
        If true, the component can be used as a `LibraryVariantComponent`,
        which provides additional attributes (e.g. `variants`) and methods.

        Returns this is LibraryVariantComponent
      transformInVariant: |-
        ```
        transformInVariant(): void
        ```

        Creates a new Variant from this standard Component. It creates a VariantContainer, transforms this Component into a VariantComponent, duplicates it, and creates a
        set of properties based on the component name and path.
        Similar to doing it with the contextual menu or the shortcut on the Penpot interface

        Returns void
      addVariant: |-
        ```
        addVariant(): void
        ```

        Creates a duplicate of the current VariantComponent on its Variant

        Returns void
      setVariantProperty: |-
        ```
        setVariantProperty(pos: number, value: string): void
        ```

        Sets the value of the variant property on the indicated position

        Parameters

        * pos: number

          The position of the property to update
        * value: string

          The new value of the property

        Returns void
      getPluginData: |-
        ```
        getPluginData(key: string): string
        ```

        Retrieves the data for our own plugin, given a specific key.

        Parameters

        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the data associated with the key as a string.

        Example
        ```
        const data = shape.getPluginData('exampleKey');console.log(data);
        ```
      setPluginData: |-
        ```
        setPluginData(key: string, value: string): void
        ```

        Sets the plugin-specific data for the given key.

        Parameters

        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setPluginData('exampleKey', 'exampleValue');
        ```
      getPluginDataKeys: |-
        ```
        getPluginDataKeys(): string[]
        ```

        Retrieves all the keys for the plugin-specific data.

        Returns string[]

        Returns an array of strings representing all the keys.

        Example
        ```
        const keys = shape.getPluginDataKeys();console.log(keys);
        ```
      getSharedPluginData: |-
        ```
        getSharedPluginData(namespace: string, key: string): string
        ```

        If we know the namespace of an external plugin, this is the way to get their data.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the shared data associated with the key as a string.

        Example
        ```
        const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData);
        ```
      setSharedPluginData: |-
        ```
        setSharedPluginData(namespace: string, key: string, value: string): void
        ```

        Sets the shared plugin-specific data for the given namespace and key.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue');
        ```
      getSharedPluginDataKeys: |-
        ```
        getSharedPluginDataKeys(namespace: string): string[]
        ```

        Retrieves all the keys for the shared plugin-specific data in the given namespace.

        Parameters

        * namespace: string

          The namespace for the shared data.

        Returns string[]

        Returns an array of strings representing all the keys in the namespace.

        Example
        ```
        const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys);
        ```
LibraryElement:
  overview: |-
    Interface LibraryElement
    ========================

    Represents an element in a Penpot library.
    This interface provides information about a specific element in a library.

    ```
    interface LibraryElement {
        id: string;
        libraryId: string;
        name: string;
        path: string;
        getPluginData(key: string): string;
        setPluginData(key: string, value: string): void;
        getPluginDataKeys(): string[];
        getSharedPluginData(namespace: string, key: string): string;
        setSharedPluginData(namespace: string, key: string, value: string): void;
        getSharedPluginDataKeys(namespace: string): string[];
    }
    ```

    Hierarchy (View Summary)

    * PluginData
      + LibraryElement
        - LibraryColor
        - LibraryComponent
        - LibraryTypography
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier of the library element.
      libraryId: |-
        ```
        readonly libraryId: string
        ```

        The unique identifier of the library to which the element belongs.
      name: |-
        ```
        name: string
        ```

        The name of the library element.
      path: |-
        ```
        path: string
        ```

        The path of the library element.
    Methods:
      getPluginData: |-
        ```
        getPluginData(key: string): string
        ```

        Retrieves the data for our own plugin, given a specific key.

        Parameters

        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the data associated with the key as a string.

        Example
        ```
        const data = shape.getPluginData('exampleKey');console.log(data);
        ```
      setPluginData: |-
        ```
        setPluginData(key: string, value: string): void
        ```

        Sets the plugin-specific data for the given key.

        Parameters

        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setPluginData('exampleKey', 'exampleValue');
        ```
      getPluginDataKeys: |-
        ```
        getPluginDataKeys(): string[]
        ```

        Retrieves all the keys for the plugin-specific data.

        Returns string[]

        Returns an array of strings representing all the keys.

        Example
        ```
        const keys = shape.getPluginDataKeys();console.log(keys);
        ```
      getSharedPluginData: |-
        ```
        getSharedPluginData(namespace: string, key: string): string
        ```

        If we know the namespace of an external plugin, this is the way to get their data.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the shared data associated with the key as a string.

        Example
        ```
        const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData);
        ```
      setSharedPluginData: |-
        ```
        setSharedPluginData(namespace: string, key: string, value: string): void
        ```

        Sets the shared plugin-specific data for the given namespace and key.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue');
        ```
      getSharedPluginDataKeys: |-
        ```
        getSharedPluginDataKeys(namespace: string): string[]
        ```

        Retrieves all the keys for the shared plugin-specific data in the given namespace.

        Parameters

        * namespace: string

          The namespace for the shared data.

        Returns string[]

        Returns an array of strings representing all the keys in the namespace.

        Example
        ```
        const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys);
        ```
LibrarySummary:
  overview: |-
    Interface LibrarySummary
    ========================

    Represents a summary of a Penpot library.
    This interface provides properties for summarizing various aspects of a Penpot library.

    ```
    interface LibrarySummary {
        id: string;
        name: string;
        numColors: number;
        numComponents: number;
        numTypographies: number;
    }
    ```

    Referenced by: LibraryContext
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier of the library.
      name: |-
        ```
        readonly name: string
        ```

        The name of the library.
      numColors: |-
        ```
        readonly numColors: number
        ```

        The number of colors in the library.
      numComponents: |-
        ```
        readonly numComponents: number
        ```

        The number of components in the library.
      numTypographies: |-
        ```
        readonly numTypographies: number
        ```

        The number of typographies in the library.
LibraryTypography:
  overview: |-
    Interface LibraryTypography
    ===========================

    Represents a typography element from a library in Penpot.
    This interface extends `LibraryElement` and includes properties specific to typography elements.

    ```
    interface LibraryTypography {
        id: string;
        libraryId: string;
        name: string;
        path: string;
        fontId: string;
        fontFamily: string;
        fontVariantId: string;
        fontSize: string;
        fontWeight: string;
        fontStyle?: "normal" | "italic" | null;
        lineHeight: string;
        letterSpacing: string;
        textTransform?: "uppercase" | "capitalize" | "lowercase" | null;
        applyToText(shape: Shape): void;
        applyToTextRange(range: TextRange): void;
        setFont(font: Font, variant?: FontVariant): void;
        getPluginData(key: string): string;
        setPluginData(key: string, value: string): void;
        getPluginDataKeys(): string[];
        getSharedPluginData(namespace: string, key: string): string;
        setSharedPluginData(namespace: string, key: string, value: string): void;
        getSharedPluginDataKeys(namespace: string): string[];
    }
    ```

    Hierarchy (View Summary)

    * LibraryElement
      + LibraryTypography

    Referenced by: Library, Text, TextRange
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier of the library element.
      libraryId: |-
        ```
        readonly libraryId: string
        ```

        The unique identifier of the library to which the element belongs.
      name: |-
        ```
        name: string
        ```

        The name of the library element.
      path: |-
        ```
        path: string
        ```

        The path of the library element.
      fontId: |-
        ```
        fontId: string
        ```

        The unique identifier of the font used in the typography element.
      fontFamily: |-
        ```
        fontFamily: string
        ```

        The font family of the typography element.
      fontVariantId: |-
        ```
        fontVariantId: string
        ```

        The unique identifier of the font variant used in the typography element.
      fontSize: |-
        ```
        fontSize: string
        ```

        The font size of the typography element.
      fontWeight: |-
        ```
        fontWeight: string
        ```

        The font weight of the typography element.
      fontStyle: |-
        ```
        fontStyle?: "normal" | "italic" | null
        ```

        The font style of the typography element.
      lineHeight: |-
        ```
        lineHeight: string
        ```

        The line height of the typography element.
      letterSpacing: |-
        ```
        letterSpacing: string
        ```

        The letter spacing of the typography element.
      textTransform: |-
        ```
        textTransform?: "uppercase" | "capitalize" | "lowercase" | null
        ```

        The text transform applied to the typography element.
    Methods:
      applyToText: |-
        ```
        applyToText(shape: Shape): void
        ```

        Applies the typography styles to a text shape.

        Parameters

        * shape: Shape

          The text shape to apply the typography styles to.

        Returns void

        Example
        ```
        typographyElement.applyToText(textShape);
        ```
      applyToTextRange: |-
        ```
        applyToTextRange(range: TextRange): void
        ```

        Applies the typography styles to a range of text within a text shape.

        Parameters

        * range: TextRange

          Represents a range of text within a Text shape. This interface provides properties for styling and formatting text ranges.

        Returns void

        Example
        ```
        typographyElement.applyToTextRange(textShape);
        ```
      setFont: |-
        ```
        setFont(font: Font, variant?: FontVariant): void
        ```

        Sets the font and optionally its variant for the typography element.

        Parameters

        * font: Font

          The font to set.
        * variant: FontVariant

          The font variant to set (optional).

        Returns void

        Example
        ```
        typographyElement.setFont(newFont, newVariant);
        ```
      getPluginData: |-
        ```
        getPluginData(key: string): string
        ```

        Retrieves the data for our own plugin, given a specific key.

        Parameters

        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the data associated with the key as a string.

        Example
        ```
        const data = shape.getPluginData('exampleKey');console.log(data);
        ```
      setPluginData: |-
        ```
        setPluginData(key: string, value: string): void
        ```

        Sets the plugin-specific data for the given key.

        Parameters

        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setPluginData('exampleKey', 'exampleValue');
        ```
      getPluginDataKeys: |-
        ```
        getPluginDataKeys(): string[]
        ```

        Retrieves all the keys for the plugin-specific data.

        Returns string[]

        Returns an array of strings representing all the keys.

        Example
        ```
        const keys = shape.getPluginDataKeys();console.log(keys);
        ```
      getSharedPluginData: |-
        ```
        getSharedPluginData(namespace: string, key: string): string
        ```

        If we know the namespace of an external plugin, this is the way to get their data.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the shared data associated with the key as a string.

        Example
        ```
        const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData);
        ```
      setSharedPluginData: |-
        ```
        setSharedPluginData(namespace: string, key: string, value: string): void
        ```

        Sets the shared plugin-specific data for the given namespace and key.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue');
        ```
      getSharedPluginDataKeys: |-
        ```
        getSharedPluginDataKeys(namespace: string): string[]
        ```

        Retrieves all the keys for the shared plugin-specific data in the given namespace.

        Parameters

        * namespace: string

          The namespace for the shared data.

        Returns string[]

        Returns an array of strings representing all the keys in the namespace.

        Example
        ```
        const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys);
        ```
LocalStorage:
  overview: |-
    Interface LocalStorage
    ======================

    Proxy for the local storage. Only elements owned by the plugin
    can be stored and accessed.
    Warning: other plugins won't be able to access this information but
    the user could potentially access the data through the browser information.

    ```
    interface LocalStorage {
        getItem(key: string): string;
        setItem(key: string, value: unknown): void;
        removeItem(key: string): void;
        getKeys(): string[];
    }
    ```

    Referenced by: Context, Penpot
  members:
    Methods:
      getItem: |-
        ```
        getItem(key: string): string
        ```

        Retrieve the element with the given key
        Requires the `allow:localstorage` permission.

        Parameters

        * key: string

        Returns string
      setItem: |-
        ```
        setItem(key: string, value: unknown): void
        ```

        Set the data given the key. If the value already existed it
        will be overridden. The value will be stored in a string representation.
        Requires the `allow:localstorage` permission.

        Parameters

        * key: string
        * value: unknown

        Returns void
      removeItem: |-
        ```
        removeItem(key: string): void
        ```

        Remove the value stored in the key.
        Requires the `allow:localstorage` permission.

        Parameters

        * key: string

        Returns void
      getKeys: |-
        ```
        getKeys(): string[]
        ```

        Return all the keys for the data stored by the plugin.
        Requires the `allow:localstorage` permission.

        Returns string[]
NavigateTo:
  overview: |-
    Interface NavigateTo
    ====================

    It takes the user from one board to the destination set in the interaction.

    ```
    interface NavigateTo {
        type: "navigate-to";
        destination: Board;
        preserveScrollPosition?: boolean;
        animation?: Animation;
    }
    ```

    Referenced by: Action
  members:
    Properties:
      type: |-
        ```
        readonly type: "navigate-to"
        ```

        Type of action
      destination: |-
        ```
        readonly destination: Board
        ```

        Board to which the action targets
      preserveScrollPosition: |-
        ```
        readonly preserveScrollPosition?: boolean
        ```

        When true the scroll will be preserved.
      animation: |-
        ```
        readonly animation?: Animation
        ```

        Animation displayed with this interaction.
OpenOverlay:
  overview: |-
    Interface OpenOverlay
    =====================

    It opens a board right over the current board.

    ```
    interface OpenOverlay {
        type: "open-overlay";
        destination: Board;
        relativeTo?: Shape;
        position?:
            | "center"
            | "manual"
            | "top-left"
            | "top-right"
            | "top-center"
            | "bottom-left"
            | "bottom-right"
            | "bottom-center";
        manualPositionLocation?: Point;
        closeWhenClickOutside?: boolean;
        addBackgroundOverlay?: boolean;
        animation?: Animation;
    }
    ```

    Hierarchy (View Summary)

    * OverlayAction
      + OpenOverlay

    Referenced by: Action
  members:
    Properties:
      type: |-
        ```
        readonly type: "open-overlay"
        ```

        The action type
      destination: |-
        ```
        readonly destination: Board
        ```

        Overlay board that will be opened.
      relativeTo: |-
        ```
        readonly relativeTo?: Shape
        ```

        Base shape to which the overlay will be positioned taking constraints into account.
      position: |-
        ```
        readonly position?:
            | "center"
            | "manual"
            | "top-left"
            | "top-right"
            | "top-center"
            | "bottom-left"
            | "bottom-right"
            | "bottom-center"
        ```

        Positioning of the overlay.
      manualPositionLocation: |-
        ```
        readonly manualPositionLocation?: Point
        ```

        For `position = 'manual'` the location of the overlay.
      closeWhenClickOutside: |-
        ```
        readonly closeWhenClickOutside?: boolean
        ```

        When true the overlay will be closed when clicking outside
      addBackgroundOverlay: |-
        ```
        readonly addBackgroundOverlay?: boolean
        ```

        When true a background will be added to the overlay.
      animation: |-
        ```
        readonly animation?: Animation
        ```

        Animation displayed with this interaction.
OpenUrl:
  overview: |-
    Interface OpenUrl
    =================

    This action opens an URL in a new tab.

    ```
    interface OpenUrl {
        type: "open-url";
        url: string;
    }
    ```

    Referenced by: Action
  members:
    Properties:
      type: |-
        ```
        readonly type: "open-url"
        ```

        The action type
      url: |-
        ```
        readonly url: string
        ```

        The URL to open when the action is executed
OverlayAction:
  overview: |-
    Interface OverlayAction
    =======================

    Base type for the actions "open-overlay" and "toggle-overlay" that share most of their properties

    ```
    interface OverlayAction {
        destination: Board;
        relativeTo?: Shape;
        position?:
            | "center"
            | "manual"
            | "top-left"
            | "top-right"
            | "top-center"
            | "bottom-left"
            | "bottom-right"
            | "bottom-center";
        manualPositionLocation?: Point;
        closeWhenClickOutside?: boolean;
        addBackgroundOverlay?: boolean;
        animation?: Animation;
    }
    ```

    Hierarchy (View Summary)

    * OverlayAction
      + OpenOverlay
      + ToggleOverlay
  members:
    Properties:
      destination: |-
        ```
        readonly destination: Board
        ```

        Overlay board that will be opened.
      relativeTo: |-
        ```
        readonly relativeTo?: Shape
        ```

        Base shape to which the overlay will be positioned taking constraints into account.
      position: |-
        ```
        readonly position?:
            | "center"
            | "manual"
            | "top-left"
            | "top-right"
            | "top-center"
            | "bottom-left"
            | "bottom-right"
            | "bottom-center"
        ```

        Positioning of the overlay.
      manualPositionLocation: |-
        ```
        readonly manualPositionLocation?: Point
        ```

        For `position = 'manual'` the location of the overlay.
      closeWhenClickOutside: |-
        ```
        readonly closeWhenClickOutside?: boolean
        ```

        When true the overlay will be closed when clicking outside
      addBackgroundOverlay: |-
        ```
        readonly addBackgroundOverlay?: boolean
        ```

        When true a background will be added to the overlay.
      animation: |-
        ```
        readonly animation?: Animation
        ```

        Animation displayed with this interaction.
Page:
  overview: |-
    Interface Page
    ==============

    Page represents a page in the Penpot application.
    It includes properties for the page's identifier and name, as well as methods for managing shapes on the page.

    ```
    interface Page {
        id: string;
        name: string;
        rulerGuides: RulerGuide[];
        root: Shape;
        remove(): void;
        getShapeById(id: string): Shape | null;
        findShapes(
            criteria?: {
                name?: string;
                nameLike?: string;
                type?:
                    | "boolean"
                    | "path"
                    | "ellipse"
                    | "image"
                    | "text"
                    | "group"
                    | "board"
                    | "rectangle"
                    | "svg-raw";
            },
        ): Shape[];
        flows: Flow[];
        createFlow(name: string, board: Board): Flow;
        removeFlow(flow: Flow): void;
        addRulerGuide(
            orientation: RulerGuideOrientation,
            value: number,
            board?: Board,
        ): RulerGuide;
        removeRulerGuide(guide: RulerGuide): void;
        addCommentThread(content: string, position: Point): Promise<CommentThread>;
        removeCommentThread(commentThread: CommentThread): Promise<void>;
        findCommentThreads(
            criteria?: { onlyYours: boolean; showResolved: boolean },
        ): Promise<CommentThread[]>;
        getPluginData(key: string): string;
        setPluginData(key: string, value: string): void;
        getPluginDataKeys(): string[];
        getSharedPluginData(namespace: string, key: string): string;
        setSharedPluginData(namespace: string, key: string, value: string): void;
        getSharedPluginDataKeys(namespace: string): string[];
    }
    ```

    Hierarchy (View Summary)

    * PluginData
      + Page

    Referenced by: Context, EventsMap, File, Flow, Penpot
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The `id` property is a unique identifier for the page.
      name: |-
        ```
        name: string
        ```

        The `name` property is the name of the page.
      rulerGuides: |-
        ```
        readonly rulerGuides: RulerGuide[]
        ```

        The ruler guides attached to the page
      root: |-
        ```
        readonly root: Shape
        ```

        The root shape of the current page. Will be the parent shape of all the shapes inside the document.
        Requires `content:read` permission.
      flows: |-
        ```
        readonly flows: Flow[]
        ```

        The interaction flows defined for the page.
    Methods:
      remove: |-
        ```
        remove(): void
        ```

        Removes the page from the file. The last remaining page of the file
        cannot be removed. If the removed page is the active one, another page
        is activated.
        Requires `content:write` permission.

        Returns void

        Example
        ```
        const page = penpot.createPage();page.remove();
        ```
      getShapeById: |-
        ```
        getShapeById(id: string): Shape | null
        ```

        Retrieves a shape by its unique identifier.

        Parameters

        * id: string

          The unique identifier of the shape.

        Returns Shape | null

        Example
        ```
        const shape = penpot.currentPage.getShapeById('shapeId');
        ```
      findShapes: |-
        ```
        findShapes(
            criteria?: {
                name?: string;
                nameLike?: string;
                type?:
                    | "boolean"
                    | "path"
                    | "ellipse"
                    | "image"
                    | "text"
                    | "group"
                    | "board"
                    | "rectangle"
                    | "svg-raw";
            },
        ): Shape[]
        ```

        Finds all shapes on the page.
        Optionally it gets a criteria object to search for specific criteria

        Parameters

        * criteria: {  
              name?: string;  
              nameLike?: string;  
              type?:  
                  | "boolean"  
                  | "path"  
                  | "ellipse"  
                  | "image"  
                  | "text"  
                  | "group"  
                  | "board"  
                  | "rectangle"  
                  | "svg-raw";  
          }

        Returns Shape[]

        Example
        ```
        const shapes = penpot.currentPage.findShapes({ name: 'exampleName' });
        ```
      createFlow: |-
        ```
        createFlow(name: string, board: Board): Flow
        ```

        Creates a new flow in the page.

        Parameters

        * name: string

          the name identifying the flow
        * board: Board

          the starting board for the current flow

        Returns Flow

        Example
        ```
        const flow = penpot.currentPage.createFlow('exampleFlow', board);
        ```
      removeFlow: |-
        ```
        removeFlow(flow: Flow): void
        ```

        Removes the flow from the page

        Parameters

        * flow: Flow

          the flow to be removed from the page

        Returns void
      addRulerGuide: |-
        ```
        addRulerGuide(
            orientation: RulerGuideOrientation,
            value: number,
            board?: Board,
        ): RulerGuide
        ```

        Creates a new ruler guide.

        Parameters

        * orientation: RulerGuideOrientation

          `horizontal` or `vertical`
        * value: number

          the position of the guide in absolute coordinates
        * board: Board

          if provided, the guide will be attached to the board

        Returns RulerGuide
      removeRulerGuide: |-
        ```
        removeRulerGuide(guide: RulerGuide): void
        ```

        Removes the `guide` from the current page.

        Parameters

        * guide: RulerGuide

        Returns void
      addCommentThread: |-
        ```
        addCommentThread(content: string, position: Point): Promise<CommentThread>
        ```

        Creates a new comment thread in the `position`.
        Returns the thread created.
        Requires the `comment:write` permission.

        Parameters

        * content: string
        * position: Point

        Returns Promise<CommentThread>
      removeCommentThread: |-
        ```
        removeCommentThread(commentThread: CommentThread): Promise<void>
        ```

        Removes the comment thread.
        Requires the `comment:write` permission.

        Parameters

        * commentThread: CommentThread

        Returns Promise<void>
      findCommentThreads: |-
        ```
        findCommentThreads(
            criteria?: { onlyYours: boolean; showResolved: boolean },
        ): Promise<CommentThread[]>
        ```

        Find all the comments that match the criteria.

        * `onlyYours`: if `true` will return the threads where the current
          user has engaged.
        * `showResolved`: by default resolved comments will be hidden. If `true`
          the resolved will be returned.
          Requires the `comment:read` or `comment:write` permission.

        Parameters

        * criteria: { onlyYours: boolean; showResolved: boolean }

        Returns Promise<CommentThread[]>
      getPluginData: |-
        ```
        getPluginData(key: string): string
        ```

        Retrieves the data for our own plugin, given a specific key.

        Parameters

        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the data associated with the key as a string.

        Example
        ```
        const data = shape.getPluginData('exampleKey');console.log(data);
        ```
      setPluginData: |-
        ```
        setPluginData(key: string, value: string): void
        ```

        Sets the plugin-specific data for the given key.

        Parameters

        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setPluginData('exampleKey', 'exampleValue');
        ```
      getPluginDataKeys: |-
        ```
        getPluginDataKeys(): string[]
        ```

        Retrieves all the keys for the plugin-specific data.

        Returns string[]

        Returns an array of strings representing all the keys.

        Example
        ```
        const keys = shape.getPluginDataKeys();console.log(keys);
        ```
      getSharedPluginData: |-
        ```
        getSharedPluginData(namespace: string, key: string): string
        ```

        If we know the namespace of an external plugin, this is the way to get their data.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the shared data associated with the key as a string.

        Example
        ```
        const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData);
        ```
      setSharedPluginData: |-
        ```
        setSharedPluginData(namespace: string, key: string, value: string): void
        ```

        Sets the shared plugin-specific data for the given namespace and key.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue');
        ```
      getSharedPluginDataKeys: |-
        ```
        getSharedPluginDataKeys(namespace: string): string[]
        ```

        Retrieves all the keys for the shared plugin-specific data in the given namespace.

        Parameters

        * namespace: string

          The namespace for the shared data.

        Returns string[]

        Returns an array of strings representing all the keys in the namespace.

        Example
        ```
        const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys);
        ```
Path:
  overview: |-
    Interface Path
    ==============

    Represents a path shape in Penpot.
    This interface extends `ShapeBase` and includes properties and methods specific to paths.

    ```
    interface Path {
        type: "path";
        toD(): string;
        content: string;
        d: string;
        commands: PathCommand[];
        fills: Fill[];
        getPluginData(key: string): string;
        setPluginData(key: string, value: string): void;
        getPluginDataKeys(): string[];
        getSharedPluginData(namespace: string, key: string): string;
        setSharedPluginData(namespace: string, key: string, value: string): void;
        getSharedPluginDataKeys(namespace: string): string[];
        id: string;
        name: string;
        parent: Shape | null;
        parentIndex: number;
        x: number;
        y: number;
        width: number;
        height: number;
        bounds: Bounds;
        center: Point;
        blocked: boolean;
        hidden: boolean;
        visible: boolean;
        proportionLock: boolean;
        constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale";
        constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom";
        fixedWhenScrolling: boolean;
        borderRadius: number;
        borderRadiusTopLeft: number;
        borderRadiusTopRight: number;
        borderRadiusBottomRight: number;
        borderRadiusBottomLeft: number;
        opacity: number;
        blendMode:
            | "difference"
            | "normal"
            | "darken"
            | "multiply"
            | "color-burn"
            | "lighten"
            | "screen"
            | "color-dodge"
            | "overlay"
            | "soft-light"
            | "hard-light"
            | "exclusion"
            | "hue"
            | "saturation"
            | "color"
            | "luminosity";
        shadows: Shadow[];
        blur?: Blur;
        backgroundBlur?: Blur;
        exports: Export[];
        boardX: number;
        boardY: number;
        parentX: number;
        parentY: number;
        flipX: boolean;
        flipY: boolean;
        rotation: number;
        strokes: Stroke[];
        layoutChild?: LayoutChildProperties;
        layoutCell?: LayoutCellProperties;
        setParentIndex(index: number): void;
        tokens: {
            width: string;
            height: string;
            fill: string;
            x: string;
            y: string;
            all: string;
            borderRadiusTopLeft: string;
            borderRadiusTopRight: string;
            borderRadiusBottomRight: string;
            borderRadiusBottomLeft: string;
            shadow: string;
            strokeColor: string;
            strokeWidth: string;
            fontFamilies: string;
            fontSize: string;
            fontWeight: string;
            letterSpacing: string;
            rotation: string;
            opacity: string;
            layoutItemMinW: string;
            layoutItemMaxW: string;
            layoutItemMinH: string;
            layoutItemMaxH: string;
            rowGap: string;
            columnGap: string;
            paddingLeft: string;
            paddingTop: string;
            paddingRight: string;
            paddingBottom: string;
            marginLeft: string;
            marginTop: string;
            marginRight: string;
            marginBottom: string;
            textCase: string;
            textDecoration: string;
            typography: string;
        };
        isComponentInstance(): boolean;
        isComponentMainInstance(): boolean;
        isComponentCopyInstance(): boolean;
        isComponentRoot(): boolean;
        isComponentHead(): boolean;
        componentRefShape(): Shape | null;
        componentRoot(): Shape | null;
        componentHead(): Shape | null;
        component(): LibraryComponent | null;
        detach(): void;
        swapComponent(component: LibraryComponent): void;
        resetOverrides(): void;
        switchVariant(pos: number, value: string): void;
        combineAsVariants(ids: string[]): VariantContainer;
        isVariantHead(): boolean;
        resize(width: number, height: number): void;
        rotate(angle: number, center?: { x: number; y: number } | null): void;
        bringToFront(): void;
        bringForward(): void;
        sendToBack(): void;
        sendBackward(): void;
        export(config: Export): Promise<Uint8Array<ArrayBufferLike>>;
        interactions: Interaction[];
        addInteraction(
            trigger: Trigger,
            action: Action,
            delay?: number,
        ): Interaction;
        removeInteraction(interaction: Interaction): void;
        applyToken(token: Token, properties?: TokenProperty[]): void;
        clone(): Shape;
        remove(): void;
    }
    ```

    Hierarchy (View Summary)

    * ShapeBase
      + Path

    Referenced by: Context, ContextTypesUtils, Penpot, Shape
  members:
    Properties:
      type: |-
        ```
        readonly type: "path"
        ```

        The type of the shape, which is always 'path' for path shapes.
      content: |-
        ```
        content: string
        ```

        The content of the path shape, defined as the path string.

        Deprecated

        Use either `d` or `commands`.
      d: |-
        ```
        d: string
        ```

        The content of the path shape, defined as the path string.
      commands: |-
        ```
        commands: PathCommand[]
        ```

        The content of the path shape, defined as an array of path commands.
      fills: |-
        ```
        fills: Fill[]
        ```

        The fills applied to the shape.

        Overrides ShapeBase.fills
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier of the shape.
      name: |-
        ```
        name: string
        ```

        The name of the shape.
      parent: |-
        ```
        readonly parent: Shape | null
        ```

        The parent shape. If the shape is the first level the parent will be the root shape.
        For the root shape the parent is null
      parentIndex: |-
        ```
        readonly parentIndex: number
        ```

        Returns the index of the current shape in the parent
      x: |-
        ```
        x: number
        ```

        The x-coordinate of the shape's position.
      y: |-
        ```
        y: number
        ```

        The y-coordinate of the shape's position.
      width: |-
        ```
        readonly width: number
        ```

        The width of the shape.
      height: |-
        ```
        readonly height: number
        ```

        The height of the shape.
      bounds: |-
        ```
        readonly bounds: Bounds
        ```

        The bounding box surrounding the current shape
      center: |-
        ```
        readonly center: Point
        ```

        The geometric center of the shape
      blocked: |-
        ```
        blocked: boolean
        ```

        Indicates whether the shape is blocked.
      hidden: |-
        ```
        hidden: boolean
        ```

        Indicates whether the shape is hidden.
      visible: |-
        ```
        visible: boolean
        ```

        Indicates whether the shape is visible.
      proportionLock: |-
        ```
        proportionLock: boolean
        ```

        Indicates whether the shape has proportion lock enabled.
      constraintsHorizontal: |-
        ```
        constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"
        ```

        The horizontal constraints applied to the shape.
      constraintsVertical: |-
        ```
        constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"
        ```

        The vertical constraints applied to the shape.
      fixedWhenScrolling: |-
        ```
        fixedWhenScrolling: boolean
        ```

        Indicates whether the shape stays fixed in place while scrolling.
      borderRadius: |-
        ```
        borderRadius: number
        ```

        The border radius of the shape.
      borderRadiusTopLeft: |-
        ```
        borderRadiusTopLeft: number
        ```

        The border radius of the top-left corner of the shape.
      borderRadiusTopRight: |-
        ```
        borderRadiusTopRight: number
        ```

        The border radius of the top-right corner of the shape.
      borderRadiusBottomRight: |-
        ```
        borderRadiusBottomRight: number
        ```

        The border radius of the bottom-right corner of the shape.
      borderRadiusBottomLeft: |-
        ```
        borderRadiusBottomLeft: number
        ```

        The border radius of the bottom-left corner of the shape.
      opacity: |-
        ```
        opacity: number
        ```

        The opacity of the shape.
      blendMode: |-
        ```
        blendMode:
            | "difference"
            | "normal"
            | "darken"
            | "multiply"
            | "color-burn"
            | "lighten"
            | "screen"
            | "color-dodge"
            | "overlay"
            | "soft-light"
            | "hard-light"
            | "exclusion"
            | "hue"
            | "saturation"
            | "color"
            | "luminosity"
        ```

        The blend mode applied to the shape.
      shadows: |-
        ```
        shadows: Shadow[]
        ```

        The shadows applied to the shape.
      blur: |-
        ```
        blur?: Blur
        ```

        The blur effect applied to the shape.
      backgroundBlur: |-
        ```
        backgroundBlur?: Blur
        ```

        The background blur effect applied to the shape.
        Background blur creates a blur effect on the content behind the shape,
        rather than on the shape's own content.
      exports: |-
        ```
        exports: Export[]
        ```

        The export settings of the shape.
      boardX: |-
        ```
        boardX: number
        ```

        The x-coordinate of the shape relative to its board.
      boardY: |-
        ```
        boardY: number
        ```

        The y-coordinate of the shape relative to its board.
      parentX: |-
        ```
        parentX: number
        ```

        The x-coordinate of the shape relative to its parent.
      parentY: |-
        ```
        parentY: number
        ```

        The y-coordinate of the shape relative to its parent.
      flipX: |-
        ```
        flipX: boolean
        ```

        Indicates whether the shape is flipped horizontally.
      flipY: |-
        ```
        flipY: boolean
        ```

        Indicates whether the shape is flipped vertically.
      rotation: |-
        ```
        rotation: number
        ```

        The rotation in degrees of the shape with respect to its center.
      strokes: |-
        ```
        strokes: Stroke[]
        ```

        The strokes applied to the shape.
      layoutChild: |-
        ```
        readonly layoutChild?: LayoutChildProperties
        ```

        Layout properties for children of the shape.
      layoutCell: |-
        ```
        readonly layoutCell?: LayoutCellProperties
        ```

        Layout properties for cells in a grid layout.
      tokens: |-
        ```
        readonly tokens: {
            width: string;
            height: string;
            fill: string;
            x: string;
            y: string;
            all: string;
            borderRadiusTopLeft: string;
            borderRadiusTopRight: string;
            borderRadiusBottomRight: string;
            borderRadiusBottomLeft: string;
            shadow: string;
            strokeColor: string;
            strokeWidth: string;
            fontFamilies: string;
            fontSize: string;
            fontWeight: string;
            letterSpacing: string;
            rotation: string;
            opacity: string;
            layoutItemMinW: string;
            layoutItemMaxW: string;
            layoutItemMinH: string;
            layoutItemMaxH: string;
            rowGap: string;
            columnGap: string;
            paddingLeft: string;
            paddingTop: string;
            paddingRight: string;
            paddingBottom: string;
            marginLeft: string;
            marginTop: string;
            marginRight: string;
            marginBottom: string;
            textCase: string;
            textDecoration: string;
            typography: string;
        }
        ```

        The design tokens applied to this shape.
        It's a map property name -> token name.

        NOTE that the tokens application is by name and not by id. If there exist
        several tokens with the same name in different sets, the actual token applied
        and the value set to the attributes will depend on which sets are active
        (and will change if different sets or themes are activated later).
      interactions: |-
        ```
        readonly interactions: Interaction[]
        ```

        The interactions for the current shape.
    Methods:
      toD: |-
        ```
        toD(): string
        ```

        Converts the path shape to its path data representation.

        Returns string

        Returns the path data (d attribute) as a string.

        Deprecated

        Use the `d` attribute
      getPluginData: |-
        ```
        getPluginData(key: string): string
        ```

        Retrieves the data for our own plugin, given a specific key.

        Parameters

        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the data associated with the key as a string.

        Example
        ```
        const data = shape.getPluginData('exampleKey');console.log(data);
        ```
      setPluginData: |-
        ```
        setPluginData(key: string, value: string): void
        ```

        Sets the plugin-specific data for the given key.

        Parameters

        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setPluginData('exampleKey', 'exampleValue');
        ```
      getPluginDataKeys: |-
        ```
        getPluginDataKeys(): string[]
        ```

        Retrieves all the keys for the plugin-specific data.

        Returns string[]

        Returns an array of strings representing all the keys.

        Example
        ```
        const keys = shape.getPluginDataKeys();console.log(keys);
        ```
      getSharedPluginData: |-
        ```
        getSharedPluginData(namespace: string, key: string): string
        ```

        If we know the namespace of an external plugin, this is the way to get their data.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the shared data associated with the key as a string.

        Example
        ```
        const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData);
        ```
      setSharedPluginData: |-
        ```
        setSharedPluginData(namespace: string, key: string, value: string): void
        ```

        Sets the shared plugin-specific data for the given namespace and key.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue');
        ```
      getSharedPluginDataKeys: |-
        ```
        getSharedPluginDataKeys(namespace: string): string[]
        ```

        Retrieves all the keys for the shared plugin-specific data in the given namespace.

        Parameters

        * namespace: string

          The namespace for the shared data.

        Returns string[]

        Returns an array of strings representing all the keys in the namespace.

        Example
        ```
        const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys);
        ```
      setParentIndex: |-
        ```
        setParentIndex(index: number): void
        ```

        Changes the index inside the parent of the current shape.
        This method will shift the indexes of the shapes around that position to
        match the index.
        If the index is greater than the number of elements it will positioned last.

        Parameters

        * index: number

          the new index for the shape to be in

        Returns void
      isComponentInstance: |-
        ```
        isComponentInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component instance
      isComponentMainInstance: |-
        ```
        isComponentMainInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component **main** instance
      isComponentCopyInstance: |-
        ```
        isComponentCopyInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component **copy** instance
      isComponentRoot: |-
        ```
        isComponentRoot(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the root of a component tree
      isComponentHead: |-
        ```
        isComponentHead(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the head of a components tree nested structure
      componentRefShape: |-
        ```
        componentRefShape(): Shape | null
        ```

        Returns Shape | null

        Returns the equivalent shape in the component main instance. If the current shape is inside a
        main instance will return `null`;
      componentRoot: |-
        ```
        componentRoot(): Shape | null
        ```

        Returns Shape | null

        Returns the root of the component tree structure for the current shape. If the current shape
        is already a root will return itself.
      componentHead: |-
        ```
        componentHead(): Shape | null
        ```

        Returns Shape | null

        Returns the head of the component tree structure for the current shape. If the current shape
        is already a head will return itself.
      component: |-
        ```
        component(): LibraryComponent | null
        ```

        Returns LibraryComponent | null

        If the shape is a component instance, returns the reference to the component associated
        otherwise will return null
      detach: |-
        ```
        detach(): void
        ```

        If the current shape is a component it will remove the component information and leave the
        shape as a "basic shape"

        Returns void
      swapComponent: |-
        ```
        swapComponent(component: LibraryComponent): void
        ```

        Swaps the component instance for another component, keeping the overrides
        when possible. Similar to the "swap component" action on the Penpot interface.
        The current shape must be a component copy instance.

        Parameters

        * component: LibraryComponent

          The new component to replace the current one

        Returns void
      resetOverrides: |-
        ```
        resetOverrides(): void
        ```

        Resets the overrides of the component copy, restoring all its attributes
        (and those of its children) to the ones in the linked main component.
        Similar to the "reset overrides" action on the Penpot interface.
        The current shape must be a component copy instance.

        Returns void
      switchVariant: |-
        ```
        switchVariant(pos: number, value: string): void
        ```

        Switch a VariantComponent copy to the nearest one that has the specified property value

        Parameters

        * pos: number

          The position of the property to update
        * value: string

          The new value of the property

        Returns void
      combineAsVariants: |-
        ```
        combineAsVariants(ids: string[]): VariantContainer
        ```

        Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu
        on the Penpot interface.
        The current shape must be a component main instance.

        Parameters

        * ids: string[]

          A list of ids of the main instances of the components to combine with this one.

        Returns VariantContainer

        The variant container created
      isVariantHead: |-
        ```
        isVariantHead(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the head of a components tree nested structure,
        and that component is a VariantComponent
      resize: |-
        ```
        resize(width: number, height: number): void
        ```

        Resizes the shape to the specified width and height.

        Parameters

        * width: number

          The new width of the shape.
        * height: number

          The new height of the shape.

        Returns void

        Example
        ```
        shape.resize(200, 100);
        ```
      rotate: |-
        ```
        rotate(angle: number, center?: { x: number; y: number } | null): void
        ```

        Rotates the shape in relation with the given center.

        Parameters

        * angle: number

          Angle in degrees to rotate.
        * center: { x: number; y: number } | null

          Center of the transform rotation. If not sent it will use the geometric center of the shape.

        Returns void

        Example
        ```
        shape.rotate(45);
        ```
      bringToFront: |-
        ```
        bringToFront(): void
        ```

        Moves the current shape to the front of its siblings

        Returns void
      bringForward: |-
        ```
        bringForward(): void
        ```

        Moves the current shape one position forward in its list of siblings

        Returns void
      sendToBack: |-
        ```
        sendToBack(): void
        ```

        Moves the current shape to the back of its siblings

        Returns void
      sendBackward: |-
        ```
        sendBackward(): void
        ```

        Moves the current shape one position backwards in its list of siblings

        Returns void
      export: |-
        ```
        export(config: Export): Promise<Uint8Array<ArrayBufferLike>>
        ```

        Generates an export from the current shape.

        Parameters

        * config: Export

        Returns Promise<Uint8Array<ArrayBufferLike>>

        Example
        ```
        shape.export({ type: 'png', scale: 2 });
        ```
      addInteraction: |-
        ```
        addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction
        ```

        Adds a new interaction to the shape.

        If the interaction starts a flow (for example a `navigate-to` action) and
        the shape's board is not already part of any flow, a new flow starting at
        that board is created automatically, matching the behavior of the editor.

        Parameters

        * trigger: Trigger

          defines the conditions under which the action will be triggered
        * action: Action

          defines what will be executed when the trigger happens
        * delay: number

          for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise.

        Returns Interaction

        Example
        ```
        shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard });
        ```
      removeInteraction: |-
        ```
        removeInteraction(interaction: Interaction): void
        ```

        Removes the interaction from the shape.

        Parameters

        * interaction: Interaction

          is the interaction to remove from the shape

        Returns void

        Example
        ```
        shape.removeInteraction(interaction);
        ```
      applyToken: |-
        ```
        applyToken(token: Token, properties?: TokenProperty[]): void
        ```

        Applies one design token to one or more properties of the shape.

        Parameters

        * token: Token

          is the Token to apply
        * properties: TokenProperty[]

          an optional list of property names. If omitted, the
          default properties will be applied.

          NOTE that the tokens application is by name and not by id. If there exist
          several tokens with the same name in different sets, the actual token applied
          and the value set to the attributes will depend on which sets are active
          (and will change if different sets or themes are activated later).

        Returns void
      clone: |-
        ```
        clone(): Shape
        ```

        Creates a clone of the shape.

        Returns Shape

        Returns a new instance of the shape with identical properties.
      remove: |-
        ```
        remove(): void
        ```

        Removes the shape from its parent.

        Returns void
PathCommand:
  overview: |-
    Interface PathCommand
    =====================

    Represents a path command in Penpot.
    This interface includes a property for defining the type of command.

    ```
    interface PathCommand {
        command:
            | "M"
            | "move-to"
            | "Z"
            | "close-path"
            | "L"
            | "line-to"
            | "H"
            | "line-to-horizontal"
            | "V"
            | "line-to-vertical"
            | "C"
            | "curve-to"
            | "S"
            | "smooth-curve-to"
            | "Q"
            | "quadratic-bezier-curve-to"
            | "T"
            | "smooth-quadratic-bezier-curve-to"
            | "A"
            | "elliptical-arc";
        params?: {
            x?: number;
            y?: number;
            c1x?: number;
            c1y?: number;
            c2x?: number;
            c2y?: number;
            rx?: number;
            ry?: number;
            xAxisRotation?: number;
            largeArcFlag?: boolean;
            sweepFlag?: boolean;
        };
    }
    ```

    Referenced by: Boolean, Path
  members:
    Properties:
      command: |-
        ```
        command:
            | "M"
            | "move-to"
            | "Z"
            | "close-path"
            | "L"
            | "line-to"
            | "H"
            | "line-to-horizontal"
            | "V"
            | "line-to-vertical"
            | "C"
            | "curve-to"
            | "S"
            | "smooth-curve-to"
            | "Q"
            | "quadratic-bezier-curve-to"
            | "T"
            | "smooth-quadratic-bezier-curve-to"
            | "A"
            | "elliptical-arc"
        ```

        The type of path command.
        Possible values include:

        * 'M' or 'move-to': Move to a new point.
        * 'Z' or 'close-path': Close the current path.
        * 'L' or 'line-to': Draw a straight line to a new point.
        * 'H' or 'line-to-horizontal': Draw a horizontal line to a new point.
        * 'V' or 'line-to-vertical': Draw a vertical line to a new point.
        * 'C' or 'curve-to': Draw a cubic Bezier curve to a new point.
        * 'S' or 'smooth-curve-to': Draw a smooth cubic Bezier curve to a new point.
        * 'Q' or 'quadratic-bezier-curve-to': Draw a quadratic Bezier curve to a new point.
        * 'T' or 'smooth-quadratic-bezier-curve-to': Draw a smooth quadratic Bezier curve to a new point.
        * 'A' or 'elliptical-arc': Draw an elliptical arc to a new point.

        Example
        ```
        const pathCommand: PathCommand = { command: 'M', params: { x: 0, y: 0 } };
        ```
      params: |-
        ```
        params?: {
            x?: number;
            y?: number;
            c1x?: number;
            c1y?: number;
            c2x?: number;
            c2y?: number;
            rx?: number;
            ry?: number;
            xAxisRotation?: number;
            largeArcFlag?: boolean;
            sweepFlag?: boolean;
        }
        ```

        Optional parameters associated with the path command.

        Type Declaration

        * Optionalx?: number

          The x-coordinate of the point (or endpoint).
        * Optionaly?: number

          The y-coordinate of the point (or endpoint).
        * Optionalc1x?: number

          The x-coordinate of the first control point for curves.
        * Optionalc1y?: number

          The y-coordinate of the first control point for curves.
        * Optionalc2x?: number

          The x-coordinate of the second control point for curves.
        * Optionalc2y?: number

          The y-coordinate of the second control point for curves.
        * Optionalrx?: number

          The radius of the ellipse's x-axis.
        * Optionalry?: number

          The radius of the ellipse's y-axis.
        * OptionalxAxisRotation?: number

          The rotation angle of the ellipse's x-axis.
        * OptionallargeArcFlag?: boolean

          A flag indicating whether to use the larger arc.
        * OptionalsweepFlag?: boolean

          A flag indicating the direction of the arc.
PluginData:
  overview: |-
    Interface PluginData
    ====================

    Provides methods for managing plugin-specific data associated with a Penpot shape.

    ```
    interface PluginData {
        getPluginData(key: string): string;
        setPluginData(key: string, value: string): void;
        getPluginDataKeys(): string[];
        getSharedPluginData(namespace: string, key: string): string;
        setSharedPluginData(namespace: string, key: string, value: string): void;
        getSharedPluginDataKeys(namespace: string): string[];
    }
    ```

    Hierarchy (View Summary)

    * PluginData
      + File
      + Library
      + LibraryElement
      + Page
      + ShapeBase
  members:
    Methods:
      getPluginData: |-
        ```
        getPluginData(key: string): string
        ```

        Retrieves the data for our own plugin, given a specific key.

        Parameters

        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the data associated with the key as a string.

        Example
        ```
        const data = shape.getPluginData('exampleKey');console.log(data);
        ```
      setPluginData: |-
        ```
        setPluginData(key: string, value: string): void
        ```

        Sets the plugin-specific data for the given key.

        Parameters

        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setPluginData('exampleKey', 'exampleValue');
        ```
      getPluginDataKeys: |-
        ```
        getPluginDataKeys(): string[]
        ```

        Retrieves all the keys for the plugin-specific data.

        Returns string[]

        Returns an array of strings representing all the keys.

        Example
        ```
        const keys = shape.getPluginDataKeys();console.log(keys);
        ```
      getSharedPluginData: |-
        ```
        getSharedPluginData(namespace: string, key: string): string
        ```

        If we know the namespace of an external plugin, this is the way to get their data.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the shared data associated with the key as a string.

        Example
        ```
        const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData);
        ```
      setSharedPluginData: |-
        ```
        setSharedPluginData(namespace: string, key: string, value: string): void
        ```

        Sets the shared plugin-specific data for the given namespace and key.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue');
        ```
      getSharedPluginDataKeys: |-
        ```
        getSharedPluginDataKeys(namespace: string): string[]
        ```

        Retrieves all the keys for the shared plugin-specific data in the given namespace.

        Parameters

        * namespace: string

          The namespace for the shared data.

        Returns string[]

        Returns an array of strings representing all the keys in the namespace.

        Example
        ```
        const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys);
        ```
PreviousScreen:
  overview: |-
    Interface PreviousScreen
    ========================

    It takes back to the last board shown.

    ```
    interface PreviousScreen {
        type: "previous-screen";
    }
    ```

    Referenced by: Action
  members:
    Properties:
      type: |-
        ```
        readonly type: "previous-screen"
        ```

        The action type
Push:
  overview: |-
    Interface Push
    ==============

    Push animation

    ```
    interface Push {
        type: "push";
        direction: "left" | "right" | "up" | "down";
        duration: number;
        easing?: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out";
    }
    ```

    Referenced by: Animation
  members:
    Properties:
      type: |-
        ```
        readonly type: "push"
        ```

        Type of the animation
      direction: |-
        ```
        readonly direction: "left" | "right" | "up" | "down"
        ```

        Direction for the push animation
      duration: |-
        ```
        readonly duration: number
        ```

        Duration of the animation effect
      easing: |-
        ```
        readonly easing?: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out"
        ```

        Function that the push effect will follow for the interpolation.
        Defaults to `linear`
Rectangle:
  overview: |-
    Interface Rectangle
    ===================

    Represents a rectangle shape in Penpot.
    This interface extends `ShapeBase` and includes properties specific to rectangles.

    ```
    interface Rectangle {
        getPluginData(key: string): string;
        setPluginData(key: string, value: string): void;
        getPluginDataKeys(): string[];
        getSharedPluginData(namespace: string, key: string): string;
        setSharedPluginData(namespace: string, key: string, value: string): void;
        getSharedPluginDataKeys(namespace: string): string[];
        type: "rectangle";
        fills: Fill[];
        id: string;
        name: string;
        parent: Shape | null;
        parentIndex: number;
        x: number;
        y: number;
        width: number;
        height: number;
        bounds: Bounds;
        center: Point;
        blocked: boolean;
        hidden: boolean;
        visible: boolean;
        proportionLock: boolean;
        constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale";
        constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom";
        fixedWhenScrolling: boolean;
        borderRadius: number;
        borderRadiusTopLeft: number;
        borderRadiusTopRight: number;
        borderRadiusBottomRight: number;
        borderRadiusBottomLeft: number;
        opacity: number;
        blendMode:
            | "difference"
            | "normal"
            | "darken"
            | "multiply"
            | "color-burn"
            | "lighten"
            | "screen"
            | "color-dodge"
            | "overlay"
            | "soft-light"
            | "hard-light"
            | "exclusion"
            | "hue"
            | "saturation"
            | "color"
            | "luminosity";
        shadows: Shadow[];
        blur?: Blur;
        backgroundBlur?: Blur;
        exports: Export[];
        boardX: number;
        boardY: number;
        parentX: number;
        parentY: number;
        flipX: boolean;
        flipY: boolean;
        rotation: number;
        strokes: Stroke[];
        layoutChild?: LayoutChildProperties;
        layoutCell?: LayoutCellProperties;
        setParentIndex(index: number): void;
        tokens: {
            width: string;
            height: string;
            fill: string;
            x: string;
            y: string;
            all: string;
            borderRadiusTopLeft: string;
            borderRadiusTopRight: string;
            borderRadiusBottomRight: string;
            borderRadiusBottomLeft: string;
            shadow: string;
            strokeColor: string;
            strokeWidth: string;
            fontFamilies: string;
            fontSize: string;
            fontWeight: string;
            letterSpacing: string;
            rotation: string;
            opacity: string;
            layoutItemMinW: string;
            layoutItemMaxW: string;
            layoutItemMinH: string;
            layoutItemMaxH: string;
            rowGap: string;
            columnGap: string;
            paddingLeft: string;
            paddingTop: string;
            paddingRight: string;
            paddingBottom: string;
            marginLeft: string;
            marginTop: string;
            marginRight: string;
            marginBottom: string;
            textCase: string;
            textDecoration: string;
            typography: string;
        };
        isComponentInstance(): boolean;
        isComponentMainInstance(): boolean;
        isComponentCopyInstance(): boolean;
        isComponentRoot(): boolean;
        isComponentHead(): boolean;
        componentRefShape(): Shape | null;
        componentRoot(): Shape | null;
        componentHead(): Shape | null;
        component(): LibraryComponent | null;
        detach(): void;
        swapComponent(component: LibraryComponent): void;
        resetOverrides(): void;
        switchVariant(pos: number, value: string): void;
        combineAsVariants(ids: string[]): VariantContainer;
        isVariantHead(): boolean;
        resize(width: number, height: number): void;
        rotate(angle: number, center?: { x: number; y: number } | null): void;
        bringToFront(): void;
        bringForward(): void;
        sendToBack(): void;
        sendBackward(): void;
        export(config: Export): Promise<Uint8Array<ArrayBufferLike>>;
        interactions: Interaction[];
        addInteraction(
            trigger: Trigger,
            action: Action,
            delay?: number,
        ): Interaction;
        removeInteraction(interaction: Interaction): void;
        applyToken(token: Token, properties?: TokenProperty[]): void;
        clone(): Shape;
        remove(): void;
    }
    ```

    Hierarchy (View Summary)

    * ShapeBase
      + Rectangle

    Referenced by: Context, ContextTypesUtils, Penpot, Shape
  members:
    Properties:
      type: |-
        ```
        readonly type: "rectangle"
        ```

        The type of the shape, which is always 'rect' for rectangle shapes.
      fills: |-
        ```
        fills: Fill[]
        ```

        The fills applied to the shape.

        Overrides ShapeBase.fills
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier of the shape.
      name: |-
        ```
        name: string
        ```

        The name of the shape.
      parent: |-
        ```
        readonly parent: Shape | null
        ```

        The parent shape. If the shape is the first level the parent will be the root shape.
        For the root shape the parent is null
      parentIndex: |-
        ```
        readonly parentIndex: number
        ```

        Returns the index of the current shape in the parent
      x: |-
        ```
        x: number
        ```

        The x-coordinate of the shape's position.
      y: |-
        ```
        y: number
        ```

        The y-coordinate of the shape's position.
      width: |-
        ```
        readonly width: number
        ```

        The width of the shape.
      height: |-
        ```
        readonly height: number
        ```

        The height of the shape.
      bounds: |-
        ```
        readonly bounds: Bounds
        ```

        The bounding box surrounding the current shape
      center: |-
        ```
        readonly center: Point
        ```

        The geometric center of the shape
      blocked: |-
        ```
        blocked: boolean
        ```

        Indicates whether the shape is blocked.
      hidden: |-
        ```
        hidden: boolean
        ```

        Indicates whether the shape is hidden.
      visible: |-
        ```
        visible: boolean
        ```

        Indicates whether the shape is visible.
      proportionLock: |-
        ```
        proportionLock: boolean
        ```

        Indicates whether the shape has proportion lock enabled.
      constraintsHorizontal: |-
        ```
        constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"
        ```

        The horizontal constraints applied to the shape.
      constraintsVertical: |-
        ```
        constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"
        ```

        The vertical constraints applied to the shape.
      fixedWhenScrolling: |-
        ```
        fixedWhenScrolling: boolean
        ```

        Indicates whether the shape stays fixed in place while scrolling.
      borderRadius: |-
        ```
        borderRadius: number
        ```

        The border radius of the shape.
      borderRadiusTopLeft: |-
        ```
        borderRadiusTopLeft: number
        ```

        The border radius of the top-left corner of the shape.
      borderRadiusTopRight: |-
        ```
        borderRadiusTopRight: number
        ```

        The border radius of the top-right corner of the shape.
      borderRadiusBottomRight: |-
        ```
        borderRadiusBottomRight: number
        ```

        The border radius of the bottom-right corner of the shape.
      borderRadiusBottomLeft: |-
        ```
        borderRadiusBottomLeft: number
        ```

        The border radius of the bottom-left corner of the shape.
      opacity: |-
        ```
        opacity: number
        ```

        The opacity of the shape.
      blendMode: |-
        ```
        blendMode:
            | "difference"
            | "normal"
            | "darken"
            | "multiply"
            | "color-burn"
            | "lighten"
            | "screen"
            | "color-dodge"
            | "overlay"
            | "soft-light"
            | "hard-light"
            | "exclusion"
            | "hue"
            | "saturation"
            | "color"
            | "luminosity"
        ```

        The blend mode applied to the shape.
      shadows: |-
        ```
        shadows: Shadow[]
        ```

        The shadows applied to the shape.
      blur: |-
        ```
        blur?: Blur
        ```

        The blur effect applied to the shape.
      backgroundBlur: |-
        ```
        backgroundBlur?: Blur
        ```

        The background blur effect applied to the shape.
        Background blur creates a blur effect on the content behind the shape,
        rather than on the shape's own content.
      exports: |-
        ```
        exports: Export[]
        ```

        The export settings of the shape.
      boardX: |-
        ```
        boardX: number
        ```

        The x-coordinate of the shape relative to its board.
      boardY: |-
        ```
        boardY: number
        ```

        The y-coordinate of the shape relative to its board.
      parentX: |-
        ```
        parentX: number
        ```

        The x-coordinate of the shape relative to its parent.
      parentY: |-
        ```
        parentY: number
        ```

        The y-coordinate of the shape relative to its parent.
      flipX: |-
        ```
        flipX: boolean
        ```

        Indicates whether the shape is flipped horizontally.
      flipY: |-
        ```
        flipY: boolean
        ```

        Indicates whether the shape is flipped vertically.
      rotation: |-
        ```
        rotation: number
        ```

        The rotation in degrees of the shape with respect to its center.
      strokes: |-
        ```
        strokes: Stroke[]
        ```

        The strokes applied to the shape.
      layoutChild: |-
        ```
        readonly layoutChild?: LayoutChildProperties
        ```

        Layout properties for children of the shape.
      layoutCell: |-
        ```
        readonly layoutCell?: LayoutCellProperties
        ```

        Layout properties for cells in a grid layout.
      tokens: |-
        ```
        readonly tokens: {
            width: string;
            height: string;
            fill: string;
            x: string;
            y: string;
            all: string;
            borderRadiusTopLeft: string;
            borderRadiusTopRight: string;
            borderRadiusBottomRight: string;
            borderRadiusBottomLeft: string;
            shadow: string;
            strokeColor: string;
            strokeWidth: string;
            fontFamilies: string;
            fontSize: string;
            fontWeight: string;
            letterSpacing: string;
            rotation: string;
            opacity: string;
            layoutItemMinW: string;
            layoutItemMaxW: string;
            layoutItemMinH: string;
            layoutItemMaxH: string;
            rowGap: string;
            columnGap: string;
            paddingLeft: string;
            paddingTop: string;
            paddingRight: string;
            paddingBottom: string;
            marginLeft: string;
            marginTop: string;
            marginRight: string;
            marginBottom: string;
            textCase: string;
            textDecoration: string;
            typography: string;
        }
        ```

        The design tokens applied to this shape.
        It's a map property name -> token name.

        NOTE that the tokens application is by name and not by id. If there exist
        several tokens with the same name in different sets, the actual token applied
        and the value set to the attributes will depend on which sets are active
        (and will change if different sets or themes are activated later).
      interactions: |-
        ```
        readonly interactions: Interaction[]
        ```

        The interactions for the current shape.
    Methods:
      getPluginData: |-
        ```
        getPluginData(key: string): string
        ```

        Retrieves the data for our own plugin, given a specific key.

        Parameters

        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the data associated with the key as a string.

        Example
        ```
        const data = shape.getPluginData('exampleKey');console.log(data);
        ```
      setPluginData: |-
        ```
        setPluginData(key: string, value: string): void
        ```

        Sets the plugin-specific data for the given key.

        Parameters

        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setPluginData('exampleKey', 'exampleValue');
        ```
      getPluginDataKeys: |-
        ```
        getPluginDataKeys(): string[]
        ```

        Retrieves all the keys for the plugin-specific data.

        Returns string[]

        Returns an array of strings representing all the keys.

        Example
        ```
        const keys = shape.getPluginDataKeys();console.log(keys);
        ```
      getSharedPluginData: |-
        ```
        getSharedPluginData(namespace: string, key: string): string
        ```

        If we know the namespace of an external plugin, this is the way to get their data.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the shared data associated with the key as a string.

        Example
        ```
        const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData);
        ```
      setSharedPluginData: |-
        ```
        setSharedPluginData(namespace: string, key: string, value: string): void
        ```

        Sets the shared plugin-specific data for the given namespace and key.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue');
        ```
      getSharedPluginDataKeys: |-
        ```
        getSharedPluginDataKeys(namespace: string): string[]
        ```

        Retrieves all the keys for the shared plugin-specific data in the given namespace.

        Parameters

        * namespace: string

          The namespace for the shared data.

        Returns string[]

        Returns an array of strings representing all the keys in the namespace.

        Example
        ```
        const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys);
        ```
      setParentIndex: |-
        ```
        setParentIndex(index: number): void
        ```

        Changes the index inside the parent of the current shape.
        This method will shift the indexes of the shapes around that position to
        match the index.
        If the index is greater than the number of elements it will positioned last.

        Parameters

        * index: number

          the new index for the shape to be in

        Returns void
      isComponentInstance: |-
        ```
        isComponentInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component instance
      isComponentMainInstance: |-
        ```
        isComponentMainInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component **main** instance
      isComponentCopyInstance: |-
        ```
        isComponentCopyInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component **copy** instance
      isComponentRoot: |-
        ```
        isComponentRoot(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the root of a component tree
      isComponentHead: |-
        ```
        isComponentHead(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the head of a components tree nested structure
      componentRefShape: |-
        ```
        componentRefShape(): Shape | null
        ```

        Returns Shape | null

        Returns the equivalent shape in the component main instance. If the current shape is inside a
        main instance will return `null`;
      componentRoot: |-
        ```
        componentRoot(): Shape | null
        ```

        Returns Shape | null

        Returns the root of the component tree structure for the current shape. If the current shape
        is already a root will return itself.
      componentHead: |-
        ```
        componentHead(): Shape | null
        ```

        Returns Shape | null

        Returns the head of the component tree structure for the current shape. If the current shape
        is already a head will return itself.
      component: |-
        ```
        component(): LibraryComponent | null
        ```

        Returns LibraryComponent | null

        If the shape is a component instance, returns the reference to the component associated
        otherwise will return null
      detach: |-
        ```
        detach(): void
        ```

        If the current shape is a component it will remove the component information and leave the
        shape as a "basic shape"

        Returns void
      swapComponent: |-
        ```
        swapComponent(component: LibraryComponent): void
        ```

        Swaps the component instance for another component, keeping the overrides
        when possible. Similar to the "swap component" action on the Penpot interface.
        The current shape must be a component copy instance.

        Parameters

        * component: LibraryComponent

          The new component to replace the current one

        Returns void
      resetOverrides: |-
        ```
        resetOverrides(): void
        ```

        Resets the overrides of the component copy, restoring all its attributes
        (and those of its children) to the ones in the linked main component.
        Similar to the "reset overrides" action on the Penpot interface.
        The current shape must be a component copy instance.

        Returns void
      switchVariant: |-
        ```
        switchVariant(pos: number, value: string): void
        ```

        Switch a VariantComponent copy to the nearest one that has the specified property value

        Parameters

        * pos: number

          The position of the property to update
        * value: string

          The new value of the property

        Returns void
      combineAsVariants: |-
        ```
        combineAsVariants(ids: string[]): VariantContainer
        ```

        Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu
        on the Penpot interface.
        The current shape must be a component main instance.

        Parameters

        * ids: string[]

          A list of ids of the main instances of the components to combine with this one.

        Returns VariantContainer

        The variant container created
      isVariantHead: |-
        ```
        isVariantHead(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the head of a components tree nested structure,
        and that component is a VariantComponent
      resize: |-
        ```
        resize(width: number, height: number): void
        ```

        Resizes the shape to the specified width and height.

        Parameters

        * width: number

          The new width of the shape.
        * height: number

          The new height of the shape.

        Returns void

        Example
        ```
        shape.resize(200, 100);
        ```
      rotate: |-
        ```
        rotate(angle: number, center?: { x: number; y: number } | null): void
        ```

        Rotates the shape in relation with the given center.

        Parameters

        * angle: number

          Angle in degrees to rotate.
        * center: { x: number; y: number } | null

          Center of the transform rotation. If not sent it will use the geometric center of the shape.

        Returns void

        Example
        ```
        shape.rotate(45);
        ```
      bringToFront: |-
        ```
        bringToFront(): void
        ```

        Moves the current shape to the front of its siblings

        Returns void
      bringForward: |-
        ```
        bringForward(): void
        ```

        Moves the current shape one position forward in its list of siblings

        Returns void
      sendToBack: |-
        ```
        sendToBack(): void
        ```

        Moves the current shape to the back of its siblings

        Returns void
      sendBackward: |-
        ```
        sendBackward(): void
        ```

        Moves the current shape one position backwards in its list of siblings

        Returns void
      export: |-
        ```
        export(config: Export): Promise<Uint8Array<ArrayBufferLike>>
        ```

        Generates an export from the current shape.

        Parameters

        * config: Export

        Returns Promise<Uint8Array<ArrayBufferLike>>

        Example
        ```
        shape.export({ type: 'png', scale: 2 });
        ```
      addInteraction: |-
        ```
        addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction
        ```

        Adds a new interaction to the shape.

        If the interaction starts a flow (for example a `navigate-to` action) and
        the shape's board is not already part of any flow, a new flow starting at
        that board is created automatically, matching the behavior of the editor.

        Parameters

        * trigger: Trigger

          defines the conditions under which the action will be triggered
        * action: Action

          defines what will be executed when the trigger happens
        * delay: number

          for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise.

        Returns Interaction

        Example
        ```
        shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard });
        ```
      removeInteraction: |-
        ```
        removeInteraction(interaction: Interaction): void
        ```

        Removes the interaction from the shape.

        Parameters

        * interaction: Interaction

          is the interaction to remove from the shape

        Returns void

        Example
        ```
        shape.removeInteraction(interaction);
        ```
      applyToken: |-
        ```
        applyToken(token: Token, properties?: TokenProperty[]): void
        ```

        Applies one design token to one or more properties of the shape.

        Parameters

        * token: Token

          is the Token to apply
        * properties: TokenProperty[]

          an optional list of property names. If omitted, the
          default properties will be applied.

          NOTE that the tokens application is by name and not by id. If there exist
          several tokens with the same name in different sets, the actual token applied
          and the value set to the attributes will depend on which sets are active
          (and will change if different sets or themes are activated later).

        Returns void
      clone: |-
        ```
        clone(): Shape
        ```

        Creates a clone of the shape.

        Returns Shape

        Returns a new instance of the shape with identical properties.
      remove: |-
        ```
        remove(): void
        ```

        Removes the shape from its parent.

        Returns void
RulerGuide:
  overview: |-
    Interface RulerGuide
    ====================

    Represents a ruler guide. These are horizontal or vertical lines that can be
    used to position elements in the UI.

    ```
    interface RulerGuide {
        orientation: RulerGuideOrientation;
        position: number;
        board?: Board;
        remove(): void;
    }
    ```

    Referenced by: Board, Page, VariantContainer
  members:
    Properties:
      orientation: |-
        ```
        readonly orientation: RulerGuideOrientation
        ```

        `orientation` indicates whether the ruler is either `horizontal` or `vertical`
      position: |-
        ```
        position: number
        ```

        `position` is the position in the axis in absolute coordinates. If this is a board
        guide it will return the position relative to the board.
      board: |-
        ```
        board?: Board
        ```

        If the guide is attached to a board this will retrieve the board shape
    Methods:
      remove: |-
        ```
        remove(): void
        ```

        Removes the guide from its page.

        Returns void
Shadow:
  overview: |-
    Interface Shadow
    ================

    Represents shadow properties in Penpot.
    This interface includes properties for defining drop shadows and inner shadows, along with their visual attributes.

    ```
    interface Shadow {
        id?: string;
        style?: "drop-shadow" | "inner-shadow";
        offsetX?: number;
        offsetY?: number;
        blur?: number;
        spread?: number;
        hidden?: boolean;
        color?: Color;
    }
    ```

    Referenced by: Board, Boolean, Ellipse, Group, Image, Path, Rectangle, ShapeBase, SvgRaw, Text, VariantContainer
  members:
    Properties:
      id: |-
        ```
        id?: string
        ```

        The optional unique identifier for the shadow.
      style: |-
        ```
        style?: "drop-shadow" | "inner-shadow"
        ```

        The optional style of the shadow.

        * 'drop-shadow': A shadow cast outside the element.
        * 'inner-shadow': A shadow cast inside the element.
      offsetX: |-
        ```
        offsetX?: number
        ```

        The optional X-axis offset of the shadow.
      offsetY: |-
        ```
        offsetY?: number
        ```

        The optional Y-axis offset of the shadow.
      blur: |-
        ```
        blur?: number
        ```

        The optional blur radius of the shadow.
      spread: |-
        ```
        spread?: number
        ```

        The optional spread radius of the shadow.
      hidden: |-
        ```
        hidden?: boolean
        ```

        Specifies whether the shadow is hidden.
        Defaults to false if omitted.
      color: |-
        ```
        color?: Color
        ```

        The optional color of the shadow, defined by a Color object.
ShapeBase:
  overview: |-
    Interface ShapeBase
    ===================

    Represents the base properties and methods of a shape in Penpot.
    This interface provides common properties and methods shared by all shapes.

    ```
    interface ShapeBase {
        getPluginData(key: string): string;
        setPluginData(key: string, value: string): void;
        getPluginDataKeys(): string[];
        getSharedPluginData(namespace: string, key: string): string;
        setSharedPluginData(namespace: string, key: string, value: string): void;
        getSharedPluginDataKeys(namespace: string): string[];
        id: string;
        name: string;
        parent: Shape | null;
        parentIndex: number;
        x: number;
        y: number;
        width: number;
        height: number;
        bounds: Bounds;
        center: Point;
        blocked: boolean;
        hidden: boolean;
        visible: boolean;
        proportionLock: boolean;
        constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale";
        constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom";
        fixedWhenScrolling: boolean;
        borderRadius: number;
        borderRadiusTopLeft: number;
        borderRadiusTopRight: number;
        borderRadiusBottomRight: number;
        borderRadiusBottomLeft: number;
        opacity: number;
        blendMode:
            | "difference"
            | "normal"
            | "darken"
            | "multiply"
            | "color-burn"
            | "lighten"
            | "screen"
            | "color-dodge"
            | "overlay"
            | "soft-light"
            | "hard-light"
            | "exclusion"
            | "hue"
            | "saturation"
            | "color"
            | "luminosity";
        shadows: Shadow[];
        blur?: Blur;
        backgroundBlur?: Blur;
        exports: Export[];
        boardX: number;
        boardY: number;
        parentX: number;
        parentY: number;
        flipX: boolean;
        flipY: boolean;
        rotation: number;
        fills: Fill[]
        | "mixed";
        strokes: Stroke[];
        layoutChild?: LayoutChildProperties;
        layoutCell?: LayoutCellProperties;
        setParentIndex(index: number): void;
        tokens: {
            width: string;
            height: string;
            fill: string;
            x: string;
            y: string;
            all: string;
            borderRadiusTopLeft: string;
            borderRadiusTopRight: string;
            borderRadiusBottomRight: string;
            borderRadiusBottomLeft: string;
            shadow: string;
            strokeColor: string;
            strokeWidth: string;
            fontFamilies: string;
            fontSize: string;
            fontWeight: string;
            letterSpacing: string;
            rotation: string;
            opacity: string;
            layoutItemMinW: string;
            layoutItemMaxW: string;
            layoutItemMinH: string;
            layoutItemMaxH: string;
            rowGap: string;
            columnGap: string;
            paddingLeft: string;
            paddingTop: string;
            paddingRight: string;
            paddingBottom: string;
            marginLeft: string;
            marginTop: string;
            marginRight: string;
            marginBottom: string;
            textCase: string;
            textDecoration: string;
            typography: string;
        };
        isComponentInstance(): boolean;
        isComponentMainInstance(): boolean;
        isComponentCopyInstance(): boolean;
        isComponentRoot(): boolean;
        isComponentHead(): boolean;
        componentRefShape(): Shape | null;
        componentRoot(): Shape | null;
        componentHead(): Shape | null;
        component(): LibraryComponent | null;
        detach(): void;
        swapComponent(component: LibraryComponent): void;
        resetOverrides(): void;
        switchVariant(pos: number, value: string): void;
        combineAsVariants(ids: string[]): VariantContainer;
        isVariantHead(): boolean;
        resize(width: number, height: number): void;
        rotate(angle: number, center?: { x: number; y: number } | null): void;
        bringToFront(): void;
        bringForward(): void;
        sendToBack(): void;
        sendBackward(): void;
        export(config: Export): Promise<Uint8Array<ArrayBufferLike>>;
        interactions: Interaction[];
        addInteraction(
            trigger: Trigger,
            action: Action,
            delay?: number,
        ): Interaction;
        removeInteraction(interaction: Interaction): void;
        applyToken(token: Token, properties?: TokenProperty[]): void;
        clone(): Shape;
        remove(): void;
    }
    ```

    Hierarchy (View Summary)

    * PluginData
      + ShapeBase
        - Board
        - Boolean
        - Ellipse
        - Group
        - Image
        - Path
        - Rectangle
        - SvgRaw
        - Text
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier of the shape.
      name: |-
        ```
        name: string
        ```

        The name of the shape.
      parent: |-
        ```
        readonly parent: Shape | null
        ```

        The parent shape. If the shape is the first level the parent will be the root shape.
        For the root shape the parent is null
      parentIndex: |-
        ```
        readonly parentIndex: number
        ```

        Returns the index of the current shape in the parent
      x: |-
        ```
        x: number
        ```

        The x-coordinate of the shape's position.
      y: |-
        ```
        y: number
        ```

        The y-coordinate of the shape's position.
      width: |-
        ```
        readonly width: number
        ```

        The width of the shape.
      height: |-
        ```
        readonly height: number
        ```

        The height of the shape.
      bounds: |-
        ```
        readonly bounds: Bounds
        ```

        The bounding box surrounding the current shape
      center: |-
        ```
        readonly center: Point
        ```

        The geometric center of the shape
      blocked: |-
        ```
        blocked: boolean
        ```

        Indicates whether the shape is blocked.
      hidden: |-
        ```
        hidden: boolean
        ```

        Indicates whether the shape is hidden.
      visible: |-
        ```
        visible: boolean
        ```

        Indicates whether the shape is visible.
      proportionLock: |-
        ```
        proportionLock: boolean
        ```

        Indicates whether the shape has proportion lock enabled.
      constraintsHorizontal: |-
        ```
        constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"
        ```

        The horizontal constraints applied to the shape.
      constraintsVertical: |-
        ```
        constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"
        ```

        The vertical constraints applied to the shape.
      fixedWhenScrolling: |-
        ```
        fixedWhenScrolling: boolean
        ```

        Indicates whether the shape stays fixed in place while scrolling.
      borderRadius: |-
        ```
        borderRadius: number
        ```

        The border radius of the shape.
      borderRadiusTopLeft: |-
        ```
        borderRadiusTopLeft: number
        ```

        The border radius of the top-left corner of the shape.
      borderRadiusTopRight: |-
        ```
        borderRadiusTopRight: number
        ```

        The border radius of the top-right corner of the shape.
      borderRadiusBottomRight: |-
        ```
        borderRadiusBottomRight: number
        ```

        The border radius of the bottom-right corner of the shape.
      borderRadiusBottomLeft: |-
        ```
        borderRadiusBottomLeft: number
        ```

        The border radius of the bottom-left corner of the shape.
      opacity: |-
        ```
        opacity: number
        ```

        The opacity of the shape.
      blendMode: |-
        ```
        blendMode:
            | "difference"
            | "normal"
            | "darken"
            | "multiply"
            | "color-burn"
            | "lighten"
            | "screen"
            | "color-dodge"
            | "overlay"
            | "soft-light"
            | "hard-light"
            | "exclusion"
            | "hue"
            | "saturation"
            | "color"
            | "luminosity"
        ```

        The blend mode applied to the shape.
      shadows: |-
        ```
        shadows: Shadow[]
        ```

        The shadows applied to the shape.
      blur: |-
        ```
        blur?: Blur
        ```

        The blur effect applied to the shape.
      backgroundBlur: |-
        ```
        backgroundBlur?: Blur
        ```

        The background blur effect applied to the shape.
        Background blur creates a blur effect on the content behind the shape,
        rather than on the shape's own content.
      exports: |-
        ```
        exports: Export[]
        ```

        The export settings of the shape.
      boardX: |-
        ```
        boardX: number
        ```

        The x-coordinate of the shape relative to its board.
      boardY: |-
        ```
        boardY: number
        ```

        The y-coordinate of the shape relative to its board.
      parentX: |-
        ```
        parentX: number
        ```

        The x-coordinate of the shape relative to its parent.
      parentY: |-
        ```
        parentY: number
        ```

        The y-coordinate of the shape relative to its parent.
      flipX: |-
        ```
        flipX: boolean
        ```

        Indicates whether the shape is flipped horizontally.
      flipY: |-
        ```
        flipY: boolean
        ```

        Indicates whether the shape is flipped vertically.
      rotation: |-
        ```
        rotation: number
        ```

        The rotation in degrees of the shape with respect to its center.
      fills: |-
        ```
        fills: Fill[] | "mixed"
        ```

        The fills applied to the shape.
      strokes: |-
        ```
        strokes: Stroke[]
        ```

        The strokes applied to the shape.
      layoutChild: |-
        ```
        readonly layoutChild?: LayoutChildProperties
        ```

        Layout properties for children of the shape.
      layoutCell: |-
        ```
        readonly layoutCell?: LayoutCellProperties
        ```

        Layout properties for cells in a grid layout.
      tokens: |-
        ```
        readonly tokens: {
            width: string;
            height: string;
            fill: string;
            x: string;
            y: string;
            all: string;
            borderRadiusTopLeft: string;
            borderRadiusTopRight: string;
            borderRadiusBottomRight: string;
            borderRadiusBottomLeft: string;
            shadow: string;
            strokeColor: string;
            strokeWidth: string;
            fontFamilies: string;
            fontSize: string;
            fontWeight: string;
            letterSpacing: string;
            rotation: string;
            opacity: string;
            layoutItemMinW: string;
            layoutItemMaxW: string;
            layoutItemMinH: string;
            layoutItemMaxH: string;
            rowGap: string;
            columnGap: string;
            paddingLeft: string;
            paddingTop: string;
            paddingRight: string;
            paddingBottom: string;
            marginLeft: string;
            marginTop: string;
            marginRight: string;
            marginBottom: string;
            textCase: string;
            textDecoration: string;
            typography: string;
        }
        ```

        The design tokens applied to this shape.
        It's a map property name -> token name.

        NOTE that the tokens application is by name and not by id. If there exist
        several tokens with the same name in different sets, the actual token applied
        and the value set to the attributes will depend on which sets are active
        (and will change if different sets or themes are activated later).
      interactions: |-
        ```
        readonly interactions: Interaction[]
        ```

        The interactions for the current shape.
    Methods:
      getPluginData: |-
        ```
        getPluginData(key: string): string
        ```

        Retrieves the data for our own plugin, given a specific key.

        Parameters

        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the data associated with the key as a string.

        Example
        ```
        const data = shape.getPluginData('exampleKey');console.log(data);
        ```
      setPluginData: |-
        ```
        setPluginData(key: string, value: string): void
        ```

        Sets the plugin-specific data for the given key.

        Parameters

        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setPluginData('exampleKey', 'exampleValue');
        ```
      getPluginDataKeys: |-
        ```
        getPluginDataKeys(): string[]
        ```

        Retrieves all the keys for the plugin-specific data.

        Returns string[]

        Returns an array of strings representing all the keys.

        Example
        ```
        const keys = shape.getPluginDataKeys();console.log(keys);
        ```
      getSharedPluginData: |-
        ```
        getSharedPluginData(namespace: string, key: string): string
        ```

        If we know the namespace of an external plugin, this is the way to get their data.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the shared data associated with the key as a string.

        Example
        ```
        const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData);
        ```
      setSharedPluginData: |-
        ```
        setSharedPluginData(namespace: string, key: string, value: string): void
        ```

        Sets the shared plugin-specific data for the given namespace and key.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue');
        ```
      getSharedPluginDataKeys: |-
        ```
        getSharedPluginDataKeys(namespace: string): string[]
        ```

        Retrieves all the keys for the shared plugin-specific data in the given namespace.

        Parameters

        * namespace: string

          The namespace for the shared data.

        Returns string[]

        Returns an array of strings representing all the keys in the namespace.

        Example
        ```
        const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys);
        ```
      setParentIndex: |-
        ```
        setParentIndex(index: number): void
        ```

        Changes the index inside the parent of the current shape.
        This method will shift the indexes of the shapes around that position to
        match the index.
        If the index is greater than the number of elements it will positioned last.

        Parameters

        * index: number

          the new index for the shape to be in

        Returns void
      isComponentInstance: |-
        ```
        isComponentInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component instance
      isComponentMainInstance: |-
        ```
        isComponentMainInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component **main** instance
      isComponentCopyInstance: |-
        ```
        isComponentCopyInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component **copy** instance
      isComponentRoot: |-
        ```
        isComponentRoot(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the root of a component tree
      isComponentHead: |-
        ```
        isComponentHead(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the head of a components tree nested structure
      componentRefShape: |-
        ```
        componentRefShape(): Shape | null
        ```

        Returns Shape | null

        Returns the equivalent shape in the component main instance. If the current shape is inside a
        main instance will return `null`;
      componentRoot: |-
        ```
        componentRoot(): Shape | null
        ```

        Returns Shape | null

        Returns the root of the component tree structure for the current shape. If the current shape
        is already a root will return itself.
      componentHead: |-
        ```
        componentHead(): Shape | null
        ```

        Returns Shape | null

        Returns the head of the component tree structure for the current shape. If the current shape
        is already a head will return itself.
      component: |-
        ```
        component(): LibraryComponent | null
        ```

        Returns LibraryComponent | null

        If the shape is a component instance, returns the reference to the component associated
        otherwise will return null
      detach: |-
        ```
        detach(): void
        ```

        If the current shape is a component it will remove the component information and leave the
        shape as a "basic shape"

        Returns void
      swapComponent: |-
        ```
        swapComponent(component: LibraryComponent): void
        ```

        Swaps the component instance for another component, keeping the overrides
        when possible. Similar to the "swap component" action on the Penpot interface.
        The current shape must be a component copy instance.

        Parameters

        * component: LibraryComponent

          The new component to replace the current one

        Returns void
      resetOverrides: |-
        ```
        resetOverrides(): void
        ```

        Resets the overrides of the component copy, restoring all its attributes
        (and those of its children) to the ones in the linked main component.
        Similar to the "reset overrides" action on the Penpot interface.
        The current shape must be a component copy instance.

        Returns void
      switchVariant: |-
        ```
        switchVariant(pos: number, value: string): void
        ```

        Switch a VariantComponent copy to the nearest one that has the specified property value

        Parameters

        * pos: number

          The position of the property to update
        * value: string

          The new value of the property

        Returns void
      combineAsVariants: |-
        ```
        combineAsVariants(ids: string[]): VariantContainer
        ```

        Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu
        on the Penpot interface.
        The current shape must be a component main instance.

        Parameters

        * ids: string[]

          A list of ids of the main instances of the components to combine with this one.

        Returns VariantContainer

        The variant container created
      isVariantHead: |-
        ```
        isVariantHead(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the head of a components tree nested structure,
        and that component is a VariantComponent
      resize: |-
        ```
        resize(width: number, height: number): void
        ```

        Resizes the shape to the specified width and height.

        Parameters

        * width: number

          The new width of the shape.
        * height: number

          The new height of the shape.

        Returns void

        Example
        ```
        shape.resize(200, 100);
        ```
      rotate: |-
        ```
        rotate(angle: number, center?: { x: number; y: number } | null): void
        ```

        Rotates the shape in relation with the given center.

        Parameters

        * angle: number

          Angle in degrees to rotate.
        * center: { x: number; y: number } | null

          Center of the transform rotation. If not sent it will use the geometric center of the shape.

        Returns void

        Example
        ```
        shape.rotate(45);
        ```
      bringToFront: |-
        ```
        bringToFront(): void
        ```

        Moves the current shape to the front of its siblings

        Returns void
      bringForward: |-
        ```
        bringForward(): void
        ```

        Moves the current shape one position forward in its list of siblings

        Returns void
      sendToBack: |-
        ```
        sendToBack(): void
        ```

        Moves the current shape to the back of its siblings

        Returns void
      sendBackward: |-
        ```
        sendBackward(): void
        ```

        Moves the current shape one position backwards in its list of siblings

        Returns void
      export: |-
        ```
        export(config: Export): Promise<Uint8Array<ArrayBufferLike>>
        ```

        Generates an export from the current shape.

        Parameters

        * config: Export

        Returns Promise<Uint8Array<ArrayBufferLike>>

        Example
        ```
        shape.export({ type: 'png', scale: 2 });
        ```
      addInteraction: |-
        ```
        addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction
        ```

        Adds a new interaction to the shape.

        If the interaction starts a flow (for example a `navigate-to` action) and
        the shape's board is not already part of any flow, a new flow starting at
        that board is created automatically, matching the behavior of the editor.

        Parameters

        * trigger: Trigger

          defines the conditions under which the action will be triggered
        * action: Action

          defines what will be executed when the trigger happens
        * delay: number

          for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise.

        Returns Interaction

        Example
        ```
        shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard });
        ```
      removeInteraction: |-
        ```
        removeInteraction(interaction: Interaction): void
        ```

        Removes the interaction from the shape.

        Parameters

        * interaction: Interaction

          is the interaction to remove from the shape

        Returns void

        Example
        ```
        shape.removeInteraction(interaction);
        ```
      applyToken: |-
        ```
        applyToken(token: Token, properties?: TokenProperty[]): void
        ```

        Applies one design token to one or more properties of the shape.

        Parameters

        * token: Token

          is the Token to apply
        * properties: TokenProperty[]

          an optional list of property names. If omitted, the
          default properties will be applied.

          NOTE that the tokens application is by name and not by id. If there exist
          several tokens with the same name in different sets, the actual token applied
          and the value set to the attributes will depend on which sets are active
          (and will change if different sets or themes are activated later).

        Returns void
      clone: |-
        ```
        clone(): Shape
        ```

        Creates a clone of the shape.

        Returns Shape

        Returns a new instance of the shape with identical properties.
      remove: |-
        ```
        remove(): void
        ```

        Removes the shape from its parent.

        Returns void
Slide:
  overview: |-
    Interface Slide
    ===============

    Slide animation

    ```
    interface Slide {
        type: "slide";
        way: "in" | "out";
        direction: "left" | "right" | "up" | "down";
        duration: number;
        offsetEffect?: boolean;
        easing?: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out";
    }
    ```

    Referenced by: Animation
  members:
    Properties:
      type: |-
        ```
        readonly type: "slide"
        ```

        Type of the animation.
      way: |-
        ```
        readonly way: "in" | "out"
        ```

        Indicate if the slide will be either in-to-out `in` or out-to-in `out`.
      direction: |-
        ```
        readonly direction: "left" | "right" | "up" | "down"
        ```

        Direction for the slide animation.
      duration: |-
        ```
        readonly duration: number
        ```

        Duration of the animation effect.
      offsetEffect: |-
        ```
        readonly offsetEffect?: boolean
        ```

        If `true` the offset effect will be used.
      easing: |-
        ```
        readonly easing?: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out"
        ```

        Function that the slide effect will follow for the interpolation.
        Defaults to `linear`.
Stroke:
  overview: |-
    Interface Stroke
    ================

    Represents stroke properties in Penpot. You can add a stroke to any shape except for groups.
    This interface includes properties for defining the color, style, width, alignment, and caps of a stroke.

    ```
    interface Stroke {
        strokeColor?: string;
        strokeColorRefFile?: string;
        strokeColorRefId?: string;
        strokeOpacity?: number;
        strokeStyle?: "none" | "svg" | "mixed" | "solid" | "dotted" | "dashed";
        strokeWidth?: number;
        strokeAlignment?: "center" | "inner" | "outer";
        strokeCapStart?: StrokeCap;
        strokeCapEnd?: StrokeCap;
        strokeColorGradient?: Gradient;
    }
    ```

    Referenced by: Board, Boolean, Ellipse, Group, Image, LibraryColor, Path, Rectangle, ShapeBase, SvgRaw, Text, VariantContainer
  members:
    Properties:
      strokeColor: |-
        ```
        strokeColor?: string
        ```

        The optional color of the stroke, represented as a string (e.g., '#FF5733').
      strokeColorRefFile: |-
        ```
        strokeColorRefFile?: string
        ```

        The optional reference to an external file for the stroke color.
      strokeColorRefId: |-
        ```
        strokeColorRefId?: string
        ```

        The optional reference ID within the external file for the stroke color.
      strokeOpacity: |-
        ```
        strokeOpacity?: number
        ```

        The optional opacity level of the stroke color, ranging from 0 (fully transparent) to 1 (fully opaque).
        Defaults to 1 if omitted.
      strokeStyle: |-
        ```
        strokeStyle?: "none" | "svg" | "mixed" | "solid" | "dotted" | "dashed"
        ```

        The optional style of the stroke.
      strokeWidth: |-
        ```
        strokeWidth?: number
        ```

        The optional width of the stroke.
      strokeAlignment: |-
        ```
        strokeAlignment?: "center" | "inner" | "outer"
        ```

        The optional alignment of the stroke relative to the shape's boundary.
      strokeCapStart: |-
        ```
        strokeCapStart?: StrokeCap
        ```

        The optional cap style for the start of the stroke.
      strokeCapEnd: |-
        ```
        strokeCapEnd?: StrokeCap
        ```

        The optional cap style for the end of the stroke.
      strokeColorGradient: |-
        ```
        strokeColorGradient?: Gradient
        ```

        The optional gradient stroke defined by a Gradient object.
SvgRaw:
  overview: |-
    Interface SvgRaw
    ================

    Represents an SVG raw shape in Penpot.
    This interface extends `ShapeBase` and includes properties specific to raw SVG shapes.

    ```
    interface SvgRaw {
        getPluginData(key: string): string;
        setPluginData(key: string, value: string): void;
        getPluginDataKeys(): string[];
        getSharedPluginData(namespace: string, key: string): string;
        setSharedPluginData(namespace: string, key: string, value: string): void;
        getSharedPluginDataKeys(namespace: string): string[];
        id: string;
        name: string;
        parent: Shape | null;
        parentIndex: number;
        x: number;
        y: number;
        width: number;
        height: number;
        bounds: Bounds;
        center: Point;
        blocked: boolean;
        hidden: boolean;
        visible: boolean;
        proportionLock: boolean;
        constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale";
        constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom";
        fixedWhenScrolling: boolean;
        borderRadius: number;
        borderRadiusTopLeft: number;
        borderRadiusTopRight: number;
        borderRadiusBottomRight: number;
        borderRadiusBottomLeft: number;
        opacity: number;
        blendMode:
            | "difference"
            | "normal"
            | "darken"
            | "multiply"
            | "color-burn"
            | "lighten"
            | "screen"
            | "color-dodge"
            | "overlay"
            | "soft-light"
            | "hard-light"
            | "exclusion"
            | "hue"
            | "saturation"
            | "color"
            | "luminosity";
        shadows: Shadow[];
        blur?: Blur;
        backgroundBlur?: Blur;
        exports: Export[];
        boardX: number;
        boardY: number;
        parentX: number;
        parentY: number;
        flipX: boolean;
        flipY: boolean;
        rotation: number;
        fills: Fill[]
        | "mixed";
        strokes: Stroke[];
        layoutChild?: LayoutChildProperties;
        layoutCell?: LayoutCellProperties;
        setParentIndex(index: number): void;
        tokens: {
            width: string;
            height: string;
            fill: string;
            x: string;
            y: string;
            all: string;
            borderRadiusTopLeft: string;
            borderRadiusTopRight: string;
            borderRadiusBottomRight: string;
            borderRadiusBottomLeft: string;
            shadow: string;
            strokeColor: string;
            strokeWidth: string;
            fontFamilies: string;
            fontSize: string;
            fontWeight: string;
            letterSpacing: string;
            rotation: string;
            opacity: string;
            layoutItemMinW: string;
            layoutItemMaxW: string;
            layoutItemMinH: string;
            layoutItemMaxH: string;
            rowGap: string;
            columnGap: string;
            paddingLeft: string;
            paddingTop: string;
            paddingRight: string;
            paddingBottom: string;
            marginLeft: string;
            marginTop: string;
            marginRight: string;
            marginBottom: string;
            textCase: string;
            textDecoration: string;
            typography: string;
        };
        isComponentInstance(): boolean;
        isComponentMainInstance(): boolean;
        isComponentCopyInstance(): boolean;
        isComponentRoot(): boolean;
        isComponentHead(): boolean;
        componentRefShape(): Shape | null;
        componentRoot(): Shape | null;
        componentHead(): Shape | null;
        component(): LibraryComponent | null;
        detach(): void;
        swapComponent(component: LibraryComponent): void;
        resetOverrides(): void;
        switchVariant(pos: number, value: string): void;
        combineAsVariants(ids: string[]): VariantContainer;
        isVariantHead(): boolean;
        resize(width: number, height: number): void;
        rotate(angle: number, center?: { x: number; y: number } | null): void;
        bringToFront(): void;
        bringForward(): void;
        sendToBack(): void;
        sendBackward(): void;
        export(config: Export): Promise<Uint8Array<ArrayBufferLike>>;
        interactions: Interaction[];
        addInteraction(
            trigger: Trigger,
            action: Action,
            delay?: number,
        ): Interaction;
        removeInteraction(interaction: Interaction): void;
        applyToken(token: Token, properties?: TokenProperty[]): void;
        clone(): Shape;
        remove(): void;
        type: "svg-raw";
    }
    ```

    Hierarchy (View Summary)

    * ShapeBase
      + SvgRaw

    Referenced by: ContextTypesUtils, Shape
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier of the shape.
      name: |-
        ```
        name: string
        ```

        The name of the shape.
      parent: |-
        ```
        readonly parent: Shape | null
        ```

        The parent shape. If the shape is the first level the parent will be the root shape.
        For the root shape the parent is null
      parentIndex: |-
        ```
        readonly parentIndex: number
        ```

        Returns the index of the current shape in the parent
      x: |-
        ```
        x: number
        ```

        The x-coordinate of the shape's position.
      y: |-
        ```
        y: number
        ```

        The y-coordinate of the shape's position.
      width: |-
        ```
        readonly width: number
        ```

        The width of the shape.
      height: |-
        ```
        readonly height: number
        ```

        The height of the shape.
      bounds: |-
        ```
        readonly bounds: Bounds
        ```

        The bounding box surrounding the current shape
      center: |-
        ```
        readonly center: Point
        ```

        The geometric center of the shape
      blocked: |-
        ```
        blocked: boolean
        ```

        Indicates whether the shape is blocked.
      hidden: |-
        ```
        hidden: boolean
        ```

        Indicates whether the shape is hidden.
      visible: |-
        ```
        visible: boolean
        ```

        Indicates whether the shape is visible.
      proportionLock: |-
        ```
        proportionLock: boolean
        ```

        Indicates whether the shape has proportion lock enabled.
      constraintsHorizontal: |-
        ```
        constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"
        ```

        The horizontal constraints applied to the shape.
      constraintsVertical: |-
        ```
        constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"
        ```

        The vertical constraints applied to the shape.
      fixedWhenScrolling: |-
        ```
        fixedWhenScrolling: boolean
        ```

        Indicates whether the shape stays fixed in place while scrolling.
      borderRadius: |-
        ```
        borderRadius: number
        ```

        The border radius of the shape.
      borderRadiusTopLeft: |-
        ```
        borderRadiusTopLeft: number
        ```

        The border radius of the top-left corner of the shape.
      borderRadiusTopRight: |-
        ```
        borderRadiusTopRight: number
        ```

        The border radius of the top-right corner of the shape.
      borderRadiusBottomRight: |-
        ```
        borderRadiusBottomRight: number
        ```

        The border radius of the bottom-right corner of the shape.
      borderRadiusBottomLeft: |-
        ```
        borderRadiusBottomLeft: number
        ```

        The border radius of the bottom-left corner of the shape.
      opacity: |-
        ```
        opacity: number
        ```

        The opacity of the shape.
      blendMode: |-
        ```
        blendMode:
            | "difference"
            | "normal"
            | "darken"
            | "multiply"
            | "color-burn"
            | "lighten"
            | "screen"
            | "color-dodge"
            | "overlay"
            | "soft-light"
            | "hard-light"
            | "exclusion"
            | "hue"
            | "saturation"
            | "color"
            | "luminosity"
        ```

        The blend mode applied to the shape.
      shadows: |-
        ```
        shadows: Shadow[]
        ```

        The shadows applied to the shape.
      blur: |-
        ```
        blur?: Blur
        ```

        The blur effect applied to the shape.
      backgroundBlur: |-
        ```
        backgroundBlur?: Blur
        ```

        The background blur effect applied to the shape.
        Background blur creates a blur effect on the content behind the shape,
        rather than on the shape's own content.
      exports: |-
        ```
        exports: Export[]
        ```

        The export settings of the shape.
      boardX: |-
        ```
        boardX: number
        ```

        The x-coordinate of the shape relative to its board.
      boardY: |-
        ```
        boardY: number
        ```

        The y-coordinate of the shape relative to its board.
      parentX: |-
        ```
        parentX: number
        ```

        The x-coordinate of the shape relative to its parent.
      parentY: |-
        ```
        parentY: number
        ```

        The y-coordinate of the shape relative to its parent.
      flipX: |-
        ```
        flipX: boolean
        ```

        Indicates whether the shape is flipped horizontally.
      flipY: |-
        ```
        flipY: boolean
        ```

        Indicates whether the shape is flipped vertically.
      rotation: |-
        ```
        rotation: number
        ```

        The rotation in degrees of the shape with respect to its center.
      fills: |-
        ```
        fills: Fill[] | "mixed"
        ```

        The fills applied to the shape.
      strokes: |-
        ```
        strokes: Stroke[]
        ```

        The strokes applied to the shape.
      layoutChild: |-
        ```
        readonly layoutChild?: LayoutChildProperties
        ```

        Layout properties for children of the shape.
      layoutCell: |-
        ```
        readonly layoutCell?: LayoutCellProperties
        ```

        Layout properties for cells in a grid layout.
      tokens: |-
        ```
        readonly tokens: {
            width: string;
            height: string;
            fill: string;
            x: string;
            y: string;
            all: string;
            borderRadiusTopLeft: string;
            borderRadiusTopRight: string;
            borderRadiusBottomRight: string;
            borderRadiusBottomLeft: string;
            shadow: string;
            strokeColor: string;
            strokeWidth: string;
            fontFamilies: string;
            fontSize: string;
            fontWeight: string;
            letterSpacing: string;
            rotation: string;
            opacity: string;
            layoutItemMinW: string;
            layoutItemMaxW: string;
            layoutItemMinH: string;
            layoutItemMaxH: string;
            rowGap: string;
            columnGap: string;
            paddingLeft: string;
            paddingTop: string;
            paddingRight: string;
            paddingBottom: string;
            marginLeft: string;
            marginTop: string;
            marginRight: string;
            marginBottom: string;
            textCase: string;
            textDecoration: string;
            typography: string;
        }
        ```

        The design tokens applied to this shape.
        It's a map property name -> token name.

        NOTE that the tokens application is by name and not by id. If there exist
        several tokens with the same name in different sets, the actual token applied
        and the value set to the attributes will depend on which sets are active
        (and will change if different sets or themes are activated later).
      interactions: |-
        ```
        readonly interactions: Interaction[]
        ```

        The interactions for the current shape.
      type: |-
        ```
        readonly type: "svg-raw"
        ```

        The type of the shape, which is always 'svg-raw' for raw SVG shapes.
    Methods:
      getPluginData: |-
        ```
        getPluginData(key: string): string
        ```

        Retrieves the data for our own plugin, given a specific key.

        Parameters

        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the data associated with the key as a string.

        Example
        ```
        const data = shape.getPluginData('exampleKey');console.log(data);
        ```
      setPluginData: |-
        ```
        setPluginData(key: string, value: string): void
        ```

        Sets the plugin-specific data for the given key.

        Parameters

        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setPluginData('exampleKey', 'exampleValue');
        ```
      getPluginDataKeys: |-
        ```
        getPluginDataKeys(): string[]
        ```

        Retrieves all the keys for the plugin-specific data.

        Returns string[]

        Returns an array of strings representing all the keys.

        Example
        ```
        const keys = shape.getPluginDataKeys();console.log(keys);
        ```
      getSharedPluginData: |-
        ```
        getSharedPluginData(namespace: string, key: string): string
        ```

        If we know the namespace of an external plugin, this is the way to get their data.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the shared data associated with the key as a string.

        Example
        ```
        const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData);
        ```
      setSharedPluginData: |-
        ```
        setSharedPluginData(namespace: string, key: string, value: string): void
        ```

        Sets the shared plugin-specific data for the given namespace and key.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue');
        ```
      getSharedPluginDataKeys: |-
        ```
        getSharedPluginDataKeys(namespace: string): string[]
        ```

        Retrieves all the keys for the shared plugin-specific data in the given namespace.

        Parameters

        * namespace: string

          The namespace for the shared data.

        Returns string[]

        Returns an array of strings representing all the keys in the namespace.

        Example
        ```
        const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys);
        ```
      setParentIndex: |-
        ```
        setParentIndex(index: number): void
        ```

        Changes the index inside the parent of the current shape.
        This method will shift the indexes of the shapes around that position to
        match the index.
        If the index is greater than the number of elements it will positioned last.

        Parameters

        * index: number

          the new index for the shape to be in

        Returns void
      isComponentInstance: |-
        ```
        isComponentInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component instance
      isComponentMainInstance: |-
        ```
        isComponentMainInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component **main** instance
      isComponentCopyInstance: |-
        ```
        isComponentCopyInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component **copy** instance
      isComponentRoot: |-
        ```
        isComponentRoot(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the root of a component tree
      isComponentHead: |-
        ```
        isComponentHead(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the head of a components tree nested structure
      componentRefShape: |-
        ```
        componentRefShape(): Shape | null
        ```

        Returns Shape | null

        Returns the equivalent shape in the component main instance. If the current shape is inside a
        main instance will return `null`;
      componentRoot: |-
        ```
        componentRoot(): Shape | null
        ```

        Returns Shape | null

        Returns the root of the component tree structure for the current shape. If the current shape
        is already a root will return itself.
      componentHead: |-
        ```
        componentHead(): Shape | null
        ```

        Returns Shape | null

        Returns the head of the component tree structure for the current shape. If the current shape
        is already a head will return itself.
      component: |-
        ```
        component(): LibraryComponent | null
        ```

        Returns LibraryComponent | null

        If the shape is a component instance, returns the reference to the component associated
        otherwise will return null
      detach: |-
        ```
        detach(): void
        ```

        If the current shape is a component it will remove the component information and leave the
        shape as a "basic shape"

        Returns void
      swapComponent: |-
        ```
        swapComponent(component: LibraryComponent): void
        ```

        Swaps the component instance for another component, keeping the overrides
        when possible. Similar to the "swap component" action on the Penpot interface.
        The current shape must be a component copy instance.

        Parameters

        * component: LibraryComponent

          The new component to replace the current one

        Returns void
      resetOverrides: |-
        ```
        resetOverrides(): void
        ```

        Resets the overrides of the component copy, restoring all its attributes
        (and those of its children) to the ones in the linked main component.
        Similar to the "reset overrides" action on the Penpot interface.
        The current shape must be a component copy instance.

        Returns void
      switchVariant: |-
        ```
        switchVariant(pos: number, value: string): void
        ```

        Switch a VariantComponent copy to the nearest one that has the specified property value

        Parameters

        * pos: number

          The position of the property to update
        * value: string

          The new value of the property

        Returns void
      combineAsVariants: |-
        ```
        combineAsVariants(ids: string[]): VariantContainer
        ```

        Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu
        on the Penpot interface.
        The current shape must be a component main instance.

        Parameters

        * ids: string[]

          A list of ids of the main instances of the components to combine with this one.

        Returns VariantContainer

        The variant container created
      isVariantHead: |-
        ```
        isVariantHead(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the head of a components tree nested structure,
        and that component is a VariantComponent
      resize: |-
        ```
        resize(width: number, height: number): void
        ```

        Resizes the shape to the specified width and height.

        Parameters

        * width: number

          The new width of the shape.
        * height: number

          The new height of the shape.

        Returns void

        Example
        ```
        shape.resize(200, 100);
        ```
      rotate: |-
        ```
        rotate(angle: number, center?: { x: number; y: number } | null): void
        ```

        Rotates the shape in relation with the given center.

        Parameters

        * angle: number

          Angle in degrees to rotate.
        * center: { x: number; y: number } | null

          Center of the transform rotation. If not sent it will use the geometric center of the shape.

        Returns void

        Example
        ```
        shape.rotate(45);
        ```
      bringToFront: |-
        ```
        bringToFront(): void
        ```

        Moves the current shape to the front of its siblings

        Returns void
      bringForward: |-
        ```
        bringForward(): void
        ```

        Moves the current shape one position forward in its list of siblings

        Returns void
      sendToBack: |-
        ```
        sendToBack(): void
        ```

        Moves the current shape to the back of its siblings

        Returns void
      sendBackward: |-
        ```
        sendBackward(): void
        ```

        Moves the current shape one position backwards in its list of siblings

        Returns void
      export: |-
        ```
        export(config: Export): Promise<Uint8Array<ArrayBufferLike>>
        ```

        Generates an export from the current shape.

        Parameters

        * config: Export

        Returns Promise<Uint8Array<ArrayBufferLike>>

        Example
        ```
        shape.export({ type: 'png', scale: 2 });
        ```
      addInteraction: |-
        ```
        addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction
        ```

        Adds a new interaction to the shape.

        If the interaction starts a flow (for example a `navigate-to` action) and
        the shape's board is not already part of any flow, a new flow starting at
        that board is created automatically, matching the behavior of the editor.

        Parameters

        * trigger: Trigger

          defines the conditions under which the action will be triggered
        * action: Action

          defines what will be executed when the trigger happens
        * delay: number

          for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise.

        Returns Interaction

        Example
        ```
        shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard });
        ```
      removeInteraction: |-
        ```
        removeInteraction(interaction: Interaction): void
        ```

        Removes the interaction from the shape.

        Parameters

        * interaction: Interaction

          is the interaction to remove from the shape

        Returns void

        Example
        ```
        shape.removeInteraction(interaction);
        ```
      applyToken: |-
        ```
        applyToken(token: Token, properties?: TokenProperty[]): void
        ```

        Applies one design token to one or more properties of the shape.

        Parameters

        * token: Token

          is the Token to apply
        * properties: TokenProperty[]

          an optional list of property names. If omitted, the
          default properties will be applied.

          NOTE that the tokens application is by name and not by id. If there exist
          several tokens with the same name in different sets, the actual token applied
          and the value set to the attributes will depend on which sets are active
          (and will change if different sets or themes are activated later).

        Returns void
      clone: |-
        ```
        clone(): Shape
        ```

        Creates a clone of the shape.

        Returns Shape

        Returns a new instance of the shape with identical properties.
      remove: |-
        ```
        remove(): void
        ```

        Removes the shape from its parent.

        Returns void
Text:
  overview: |-
    Interface Text
    ==============

    Text represents a text element in the Penpot application, extending the base shape interface.
    It includes various properties to define the text content and its styling attributes.

    ```
    interface Text {
        getPluginData(key: string): string;
        setPluginData(key: string, value: string): void;
        getPluginDataKeys(): string[];
        getSharedPluginData(namespace: string, key: string): string;
        setSharedPluginData(namespace: string, key: string, value: string): void;
        getSharedPluginDataKeys(namespace: string): string[];
        id: string;
        name: string;
        parent: Shape | null;
        parentIndex: number;
        x: number;
        y: number;
        width: number;
        height: number;
        bounds: Bounds;
        center: Point;
        blocked: boolean;
        hidden: boolean;
        visible: boolean;
        proportionLock: boolean;
        constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale";
        constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom";
        fixedWhenScrolling: boolean;
        borderRadius: number;
        borderRadiusTopLeft: number;
        borderRadiusTopRight: number;
        borderRadiusBottomRight: number;
        borderRadiusBottomLeft: number;
        opacity: number;
        blendMode:
            | "difference"
            | "normal"
            | "darken"
            | "multiply"
            | "color-burn"
            | "lighten"
            | "screen"
            | "color-dodge"
            | "overlay"
            | "soft-light"
            | "hard-light"
            | "exclusion"
            | "hue"
            | "saturation"
            | "color"
            | "luminosity";
        shadows: Shadow[];
        blur?: Blur;
        backgroundBlur?: Blur;
        exports: Export[];
        boardX: number;
        boardY: number;
        parentX: number;
        parentY: number;
        flipX: boolean;
        flipY: boolean;
        rotation: number;
        fills: Fill[]
        | "mixed";
        strokes: Stroke[];
        layoutChild?: LayoutChildProperties;
        layoutCell?: LayoutCellProperties;
        setParentIndex(index: number): void;
        tokens: {
            width: string;
            height: string;
            fill: string;
            x: string;
            y: string;
            all: string;
            borderRadiusTopLeft: string;
            borderRadiusTopRight: string;
            borderRadiusBottomRight: string;
            borderRadiusBottomLeft: string;
            shadow: string;
            strokeColor: string;
            strokeWidth: string;
            fontFamilies: string;
            fontSize: string;
            fontWeight: string;
            letterSpacing: string;
            rotation: string;
            opacity: string;
            layoutItemMinW: string;
            layoutItemMaxW: string;
            layoutItemMinH: string;
            layoutItemMaxH: string;
            rowGap: string;
            columnGap: string;
            paddingLeft: string;
            paddingTop: string;
            paddingRight: string;
            paddingBottom: string;
            marginLeft: string;
            marginTop: string;
            marginRight: string;
            marginBottom: string;
            textCase: string;
            textDecoration: string;
            typography: string;
        };
        isComponentInstance(): boolean;
        isComponentMainInstance(): boolean;
        isComponentCopyInstance(): boolean;
        isComponentRoot(): boolean;
        isComponentHead(): boolean;
        componentRefShape(): Shape | null;
        componentRoot(): Shape | null;
        componentHead(): Shape | null;
        component(): LibraryComponent | null;
        detach(): void;
        swapComponent(component: LibraryComponent): void;
        resetOverrides(): void;
        switchVariant(pos: number, value: string): void;
        combineAsVariants(ids: string[]): VariantContainer;
        isVariantHead(): boolean;
        resize(width: number, height: number): void;
        rotate(angle: number, center?: { x: number; y: number } | null): void;
        bringToFront(): void;
        bringForward(): void;
        sendToBack(): void;
        sendBackward(): void;
        export(config: Export): Promise<Uint8Array<ArrayBufferLike>>;
        interactions: Interaction[];
        addInteraction(
            trigger: Trigger,
            action: Action,
            delay?: number,
        ): Interaction;
        removeInteraction(interaction: Interaction): void;
        applyToken(token: Token, properties?: TokenProperty[]): void;
        clone(): Shape;
        remove(): void;
        type: "text";
        characters: string;
        growType: "fixed" | "auto-width" | "auto-height";
        fontId: string;
        fontFamily: string;
        fontVariantId: string;
        fontSize: string;
        fontWeight: string;
        fontStyle: "normal" | "italic" | "mixed" | null;
        lineHeight: string;
        letterSpacing: string;
        textTransform: "mixed" | "uppercase" | "capitalize" | "lowercase" | null;
        textDecoration: "mixed" | "underline" | "line-through" | null;
        direction: "mixed" | "ltr" | "rtl" | null;
        align: "center" | "left" | "right" | "mixed" | "justify" | null;
        verticalAlign: "center" | "top" | "bottom" | null;
        textBounds: { x: number; y: number; width: number; height: number };
        getRange(start: number, end: number): TextRange;
        applyTypography(typography: LibraryTypography): void;
    }
    ```

    Hierarchy (View Summary)

    * ShapeBase
      + Text

    Referenced by: Context, ContextTypesUtils, Font, Penpot, Shape, TextRange
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier of the shape.
      name: |-
        ```
        name: string
        ```

        The name of the shape.
      parent: |-
        ```
        readonly parent: Shape | null
        ```

        The parent shape. If the shape is the first level the parent will be the root shape.
        For the root shape the parent is null
      parentIndex: |-
        ```
        readonly parentIndex: number
        ```

        Returns the index of the current shape in the parent
      x: |-
        ```
        x: number
        ```

        The x-coordinate of the shape's position.
      y: |-
        ```
        y: number
        ```

        The y-coordinate of the shape's position.
      width: |-
        ```
        readonly width: number
        ```

        The width of the shape.
      height: |-
        ```
        readonly height: number
        ```

        The height of the shape.
      bounds: |-
        ```
        readonly bounds: Bounds
        ```

        The bounding box surrounding the current shape
      center: |-
        ```
        readonly center: Point
        ```

        The geometric center of the shape
      blocked: |-
        ```
        blocked: boolean
        ```

        Indicates whether the shape is blocked.
      hidden: |-
        ```
        hidden: boolean
        ```

        Indicates whether the shape is hidden.
      visible: |-
        ```
        visible: boolean
        ```

        Indicates whether the shape is visible.
      proportionLock: |-
        ```
        proportionLock: boolean
        ```

        Indicates whether the shape has proportion lock enabled.
      constraintsHorizontal: |-
        ```
        constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"
        ```

        The horizontal constraints applied to the shape.
      constraintsVertical: |-
        ```
        constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"
        ```

        The vertical constraints applied to the shape.
      fixedWhenScrolling: |-
        ```
        fixedWhenScrolling: boolean
        ```

        Indicates whether the shape stays fixed in place while scrolling.
      borderRadius: |-
        ```
        borderRadius: number
        ```

        The border radius of the shape.
      borderRadiusTopLeft: |-
        ```
        borderRadiusTopLeft: number
        ```

        The border radius of the top-left corner of the shape.
      borderRadiusTopRight: |-
        ```
        borderRadiusTopRight: number
        ```

        The border radius of the top-right corner of the shape.
      borderRadiusBottomRight: |-
        ```
        borderRadiusBottomRight: number
        ```

        The border radius of the bottom-right corner of the shape.
      borderRadiusBottomLeft: |-
        ```
        borderRadiusBottomLeft: number
        ```

        The border radius of the bottom-left corner of the shape.
      opacity: |-
        ```
        opacity: number
        ```

        The opacity of the shape.
      blendMode: |-
        ```
        blendMode:
            | "difference"
            | "normal"
            | "darken"
            | "multiply"
            | "color-burn"
            | "lighten"
            | "screen"
            | "color-dodge"
            | "overlay"
            | "soft-light"
            | "hard-light"
            | "exclusion"
            | "hue"
            | "saturation"
            | "color"
            | "luminosity"
        ```

        The blend mode applied to the shape.
      shadows: |-
        ```
        shadows: Shadow[]
        ```

        The shadows applied to the shape.
      blur: |-
        ```
        blur?: Blur
        ```

        The blur effect applied to the shape.
      backgroundBlur: |-
        ```
        backgroundBlur?: Blur
        ```

        The background blur effect applied to the shape.
        Background blur creates a blur effect on the content behind the shape,
        rather than on the shape's own content.
      exports: |-
        ```
        exports: Export[]
        ```

        The export settings of the shape.
      boardX: |-
        ```
        boardX: number
        ```

        The x-coordinate of the shape relative to its board.
      boardY: |-
        ```
        boardY: number
        ```

        The y-coordinate of the shape relative to its board.
      parentX: |-
        ```
        parentX: number
        ```

        The x-coordinate of the shape relative to its parent.
      parentY: |-
        ```
        parentY: number
        ```

        The y-coordinate of the shape relative to its parent.
      flipX: |-
        ```
        flipX: boolean
        ```

        Indicates whether the shape is flipped horizontally.
      flipY: |-
        ```
        flipY: boolean
        ```

        Indicates whether the shape is flipped vertically.
      rotation: |-
        ```
        rotation: number
        ```

        The rotation in degrees of the shape with respect to its center.
      fills: |-
        ```
        fills: Fill[] | "mixed"
        ```

        The fills applied to the shape.
      strokes: |-
        ```
        strokes: Stroke[]
        ```

        The strokes applied to the shape.
      layoutChild: |-
        ```
        readonly layoutChild?: LayoutChildProperties
        ```

        Layout properties for children of the shape.
      layoutCell: |-
        ```
        readonly layoutCell?: LayoutCellProperties
        ```

        Layout properties for cells in a grid layout.
      tokens: |-
        ```
        readonly tokens: {
            width: string;
            height: string;
            fill: string;
            x: string;
            y: string;
            all: string;
            borderRadiusTopLeft: string;
            borderRadiusTopRight: string;
            borderRadiusBottomRight: string;
            borderRadiusBottomLeft: string;
            shadow: string;
            strokeColor: string;
            strokeWidth: string;
            fontFamilies: string;
            fontSize: string;
            fontWeight: string;
            letterSpacing: string;
            rotation: string;
            opacity: string;
            layoutItemMinW: string;
            layoutItemMaxW: string;
            layoutItemMinH: string;
            layoutItemMaxH: string;
            rowGap: string;
            columnGap: string;
            paddingLeft: string;
            paddingTop: string;
            paddingRight: string;
            paddingBottom: string;
            marginLeft: string;
            marginTop: string;
            marginRight: string;
            marginBottom: string;
            textCase: string;
            textDecoration: string;
            typography: string;
        }
        ```

        The design tokens applied to this shape.
        It's a map property name -> token name.

        NOTE that the tokens application is by name and not by id. If there exist
        several tokens with the same name in different sets, the actual token applied
        and the value set to the attributes will depend on which sets are active
        (and will change if different sets or themes are activated later).
      interactions: |-
        ```
        readonly interactions: Interaction[]
        ```

        The interactions for the current shape.
      type: |-
        ```
        readonly type: "text"
        ```

        The type of the shape, which is always 'text' for text shapes.
      characters: |-
        ```
        characters: string
        ```

        The characters contained within the text shape.
      growType: |-
        ```
        growType: "fixed" | "auto-width" | "auto-height"
        ```

        The grow type of the text shape, defining how the text box adjusts its size.
        Possible values are:

        * 'fixed': Fixed size.
        * 'auto-width': Adjusts width automatically.
        * 'auto-height': Adjusts height automatically.
      fontId: |-
        ```
        fontId: string
        ```

        The font ID used in the text shape, or 'mixed' if multiple fonts are used.
      fontFamily: |-
        ```
        fontFamily: string
        ```

        The font family used in the text shape, or 'mixed' if multiple font families are used.
      fontVariantId: |-
        ```
        fontVariantId: string
        ```

        The font variant ID used in the text shape, or 'mixed' if multiple font variants are used.
      fontSize: |-
        ```
        fontSize: string
        ```

        The font size used in the text shape, or 'mixed' if multiple font sizes are used.
      fontWeight: |-
        ```
        fontWeight: string
        ```

        The font weight used in the text shape, or 'mixed' if multiple font weights are used.
      fontStyle: |-
        ```
        fontStyle: "normal" | "italic" | "mixed" | null
        ```

        The font style used in the text shape, or 'mixed' if multiple font styles are used.
      lineHeight: |-
        ```
        lineHeight: string
        ```

        The line height used in the text shape, or 'mixed' if multiple line heights are used.
      letterSpacing: |-
        ```
        letterSpacing: string
        ```

        The letter spacing used in the text shape, or 'mixed' if multiple letter spacings are used.
      textTransform: |-
        ```
        textTransform: "mixed" | "uppercase" | "capitalize" | "lowercase" | null
        ```

        The text transform applied to the text shape, or 'mixed' if multiple text transforms are used.
      textDecoration: |-
        ```
        textDecoration: "mixed" | "underline" | "line-through" | null
        ```

        The text decoration applied to the text shape, or 'mixed' if multiple text decorations are used.
      direction: |-
        ```
        direction: "mixed" | "ltr" | "rtl" | null
        ```

        The text direction for the text shape, or 'mixed' if multiple directions are used.
      align: |-
        ```
        align: "center" | "left" | "right" | "mixed" | "justify" | null
        ```

        The horizontal alignment of the text shape. It can be a specific alignment or 'mixed' if multiple alignments are used.
      verticalAlign: |-
        ```
        verticalAlign: "center" | "top" | "bottom" | null
        ```

        The vertical alignment of the text shape.
      textBounds: |-
        ```
        readonly textBounds: { x: number; y: number; width: number; height: number }
        ```

        Return the bounding box for the text as a (x, y, width, height) rectangle
        This is the box that covers the text even if it overflows its selection rectangle.
    Methods:
      getPluginData: |-
        ```
        getPluginData(key: string): string
        ```

        Retrieves the data for our own plugin, given a specific key.

        Parameters

        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the data associated with the key as a string.

        Example
        ```
        const data = shape.getPluginData('exampleKey');console.log(data);
        ```
      setPluginData: |-
        ```
        setPluginData(key: string, value: string): void
        ```

        Sets the plugin-specific data for the given key.

        Parameters

        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setPluginData('exampleKey', 'exampleValue');
        ```
      getPluginDataKeys: |-
        ```
        getPluginDataKeys(): string[]
        ```

        Retrieves all the keys for the plugin-specific data.

        Returns string[]

        Returns an array of strings representing all the keys.

        Example
        ```
        const keys = shape.getPluginDataKeys();console.log(keys);
        ```
      getSharedPluginData: |-
        ```
        getSharedPluginData(namespace: string, key: string): string
        ```

        If we know the namespace of an external plugin, this is the way to get their data.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to retrieve the data.

        Returns string

        Returns the shared data associated with the key as a string.

        Example
        ```
        const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData);
        ```
      setSharedPluginData: |-
        ```
        setSharedPluginData(namespace: string, key: string, value: string): void
        ```

        Sets the shared plugin-specific data for the given namespace and key.

        Parameters

        * namespace: string

          The namespace for the shared data.
        * key: string

          The key for which to set the data.
        * value: string

          The data to set for the key.

        Returns void

        Example
        ```
        shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue');
        ```
      getSharedPluginDataKeys: |-
        ```
        getSharedPluginDataKeys(namespace: string): string[]
        ```

        Retrieves all the keys for the shared plugin-specific data in the given namespace.

        Parameters

        * namespace: string

          The namespace for the shared data.

        Returns string[]

        Returns an array of strings representing all the keys in the namespace.

        Example
        ```
        const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys);
        ```
      setParentIndex: |-
        ```
        setParentIndex(index: number): void
        ```

        Changes the index inside the parent of the current shape.
        This method will shift the indexes of the shapes around that position to
        match the index.
        If the index is greater than the number of elements it will positioned last.

        Parameters

        * index: number

          the new index for the shape to be in

        Returns void
      isComponentInstance: |-
        ```
        isComponentInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component instance
      isComponentMainInstance: |-
        ```
        isComponentMainInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component **main** instance
      isComponentCopyInstance: |-
        ```
        isComponentCopyInstance(): boolean
        ```

        Returns boolean

        Returns true if the current shape is inside a component **copy** instance
      isComponentRoot: |-
        ```
        isComponentRoot(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the root of a component tree
      isComponentHead: |-
        ```
        isComponentHead(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the head of a components tree nested structure
      componentRefShape: |-
        ```
        componentRefShape(): Shape | null
        ```

        Returns Shape | null

        Returns the equivalent shape in the component main instance. If the current shape is inside a
        main instance will return `null`;
      componentRoot: |-
        ```
        componentRoot(): Shape | null
        ```

        Returns Shape | null

        Returns the root of the component tree structure for the current shape. If the current shape
        is already a root will return itself.
      componentHead: |-
        ```
        componentHead(): Shape | null
        ```

        Returns Shape | null

        Returns the head of the component tree structure for the current shape. If the current shape
        is already a head will return itself.
      component: |-
        ```
        component(): LibraryComponent | null
        ```

        Returns LibraryComponent | null

        If the shape is a component instance, returns the reference to the component associated
        otherwise will return null
      detach: |-
        ```
        detach(): void
        ```

        If the current shape is a component it will remove the component information and leave the
        shape as a "basic shape"

        Returns void
      swapComponent: |-
        ```
        swapComponent(component: LibraryComponent): void
        ```

        Swaps the component instance for another component, keeping the overrides
        when possible. Similar to the "swap component" action on the Penpot interface.
        The current shape must be a component copy instance.

        Parameters

        * component: LibraryComponent

          The new component to replace the current one

        Returns void
      resetOverrides: |-
        ```
        resetOverrides(): void
        ```

        Resets the overrides of the component copy, restoring all its attributes
        (and those of its children) to the ones in the linked main component.
        Similar to the "reset overrides" action on the Penpot interface.
        The current shape must be a component copy instance.

        Returns void
      switchVariant: |-
        ```
        switchVariant(pos: number, value: string): void
        ```

        Switch a VariantComponent copy to the nearest one that has the specified property value

        Parameters

        * pos: number

          The position of the property to update
        * value: string

          The new value of the property

        Returns void
      combineAsVariants: |-
        ```
        combineAsVariants(ids: string[]): VariantContainer
        ```

        Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu
        on the Penpot interface.
        The current shape must be a component main instance.

        Parameters

        * ids: string[]

          A list of ids of the main instances of the components to combine with this one.

        Returns VariantContainer

        The variant container created
      isVariantHead: |-
        ```
        isVariantHead(): boolean
        ```

        Returns boolean

        Returns true when the current shape is the head of a components tree nested structure,
        and that component is a VariantComponent
      resize: |-
        ```
        resize(width: number, height: number): void
        ```

        Resizes the shape to the specified width and height.

        Parameters

        * width: number

          The new width of the shape.
        * height: number

          The new height of the shape.

        Returns void

        Example
        ```
        shape.resize(200, 100);
        ```
      rotate: |-
        ```
        rotate(angle: number, center?: { x: number; y: number } | null): void
        ```

        Rotates the shape in relation with the given center.

        Parameters

        * angle: number

          Angle in degrees to rotate.
        * center: { x: number; y: number } | null

          Center of the transform rotation. If not sent it will use the geometric center of the shape.

        Returns void

        Example
        ```
        shape.rotate(45);
        ```
      bringToFront: |-
        ```
        bringToFront(): void
        ```

        Moves the current shape to the front of its siblings

        Returns void
      bringForward: |-
        ```
        bringForward(): void
        ```

        Moves the current shape one position forward in its list of siblings

        Returns void
      sendToBack: |-
        ```
        sendToBack(): void
        ```

        Moves the current shape to the back of its siblings

        Returns void
      sendBackward: |-
        ```
        sendBackward(): void
        ```

        Moves the current shape one position backwards in its list of siblings

        Returns void
      export: |-
        ```
        export(config: Export): Promise<Uint8Array<ArrayBufferLike>>
        ```

        Generates an export from the current shape.

        Parameters

        * config: Export

        Returns Promise<Uint8Array<ArrayBufferLike>>

        Example
        ```
        shape.export({ type: 'png', scale: 2 });
        ```
      addInteraction: |-
        ```
        addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction
        ```

        Adds a new interaction to the shape.

        If the interaction starts a flow (for example a `navigate-to` action) and
        the shape's board is not already part of any flow, a new flow starting at
        that board is created automatically, matching the behavior of the editor.

        Parameters

        * trigger: Trigger

          defines the conditions under which the action will be triggered
        * action: Action

          defines what will be executed when the trigger happens
        * delay: number

          for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise.

        Returns Interaction

        Example
        ```
        shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard });
        ```
      removeInteraction: |-
        ```
        removeInteraction(interaction: Interaction): void
        ```

        Removes the interaction from the shape.

        Parameters

        * interaction: Interaction

          is the interaction to remove from the shape

        Returns void

        Example
        ```
        shape.removeInteraction(interaction);
        ```
      applyToken: |-
        ```
        applyToken(token: Token, properties?: TokenProperty[]): void
        ```

        Applies one design token to one or more properties of the shape.

        Parameters

        * token: Token

          is the Token to apply
        * properties: TokenProperty[]

          an optional list of property names. If omitted, the
          default properties will be applied.

          NOTE that the tokens application is by name and not by id. If there exist
          several tokens with the same name in different sets, the actual token applied
          and the value set to the attributes will depend on which sets are active
          (and will change if different sets or themes are activated later).

        Returns void
      clone: |-
        ```
        clone(): Shape
        ```

        Creates a clone of the shape.

        Returns Shape

        Returns a new instance of the shape with identical properties.
      remove: |-
        ```
        remove(): void
        ```

        Removes the shape from its parent.

        Returns void
      getRange: |-
        ```
        getRange(start: number, end: number): TextRange
        ```

        Gets a text range within the text shape.

        Parameters

        * start: number

          The start index of the text range.
        * end: number

          The end index of the text range.

        Returns TextRange

        Returns a TextRange object representing the specified text range.

        Example
        ```
        const textRange = textShape.getRange(0, 10);console.log(textRange.characters);
        ```
      applyTypography: |-
        ```
        applyTypography(typography: LibraryTypography): void
        ```

        Applies a typography style to the text shape.

        Parameters

        * typography: LibraryTypography

          The typography style to apply.

        Returns void

        Remarks

        This method sets various typography properties for the text shape according to the given typography style.

        Example
        ```
        textShape.applyTypography(typography);
        ```
TextRange:
  overview: |-
    Interface TextRange
    ===================

    Represents a range of text within a Text shape.
    This interface provides properties for styling and formatting text ranges.

    ```
    interface TextRange {
        shape: Text;
        characters: string;
        fontId: string;
        fontFamily: string;
        fontVariantId: string;
        fontSize: string;
        fontWeight: string;
        fontStyle: "normal" | "italic" | "mixed" | null;
        lineHeight: string;
        letterSpacing: string;
        textTransform:
            | "none"
            | "mixed"
            | "uppercase"
            | "capitalize"
            | "lowercase"
            | null;
        textDecoration: "none"
        | "mixed"
        | "underline"
        | "line-through"
        | null;
        direction: "mixed" | "ltr" | "rtl" | null;
        fills: Fill[] | "mixed";
        align: "center" | "left" | "right" | "mixed" | "justify" | null;
        verticalAlign: "center" | "top" | "bottom" | "mixed" | null;
        applyTypography(typography: LibraryTypography): void;
    }
    ```

    Referenced by: Font, LibraryTypography, Text
  members:
    Properties:
      shape: |-
        ```
        readonly shape: Text
        ```

        The Text shape to which this text range belongs.
      characters: |-
        ```
        readonly characters: string
        ```

        The characters associated with the current text range.
      fontId: |-
        ```
        fontId: string
        ```

        The font ID of the text range. It can be a specific font ID or 'mixed' if multiple fonts are used.
      fontFamily: |-
        ```
        fontFamily: string
        ```

        The font family of the text range. It can be a specific font family or 'mixed' if multiple font families are used.
      fontVariantId: |-
        ```
        fontVariantId: string
        ```

        The font variant ID of the text range. It can be a specific font variant ID or 'mixed' if multiple font variants are used.
      fontSize: |-
        ```
        fontSize: string
        ```

        The font size of the text range. It can be a specific font size or 'mixed' if multiple font sizes are used.
      fontWeight: |-
        ```
        fontWeight: string
        ```

        The font weight of the text range. It can be a specific font weight or 'mixed' if multiple font weights are used.
      fontStyle: |-
        ```
        fontStyle: "normal" | "italic" | "mixed" | null
        ```

        The font style of the text range. It can be a specific font style or 'mixed' if multiple font styles are used.
      lineHeight: |-
        ```
        lineHeight: string
        ```

        The line height of the text range. It can be a specific line height or 'mixed' if multiple line heights are used.
      letterSpacing: |-
        ```
        letterSpacing: string
        ```

        The letter spacing of the text range. It can be a specific letter spacing or 'mixed' if multiple letter spacings are used.
      textTransform: |-
        ```
        textTransform:
            | "none"
            | "mixed"
            | "uppercase"
            | "capitalize"
            | "lowercase"
            | null
        ```

        The text transform applied to the text range. It can be a specific text transform or 'mixed' if multiple text transforms are used.
      textDecoration: |-
        ```
        textDecoration: "none" | "mixed" | "underline" | "line-through" | null
        ```

        The text decoration applied to the text range. It can be a specific text decoration or 'mixed' if multiple text decorations are used.
      direction: |-
        ```
        direction: "mixed" | "ltr" | "rtl" | null
        ```

        The text direction for the text range. It can be a specific direction or 'mixed' if multiple directions are used.
      fills: |-
        ```
        fills: Fill[] | "mixed"
        ```

        The fill styles applied to the text range.
      align: |-
        ```
        align: "center" | "left" | "right" | "mixed" | "justify" | null
        ```

        The horizontal alignment of the text range. It can be a specific alignment or 'mixed' if multiple alignments are used.
      verticalAlign: |-
        ```
        verticalAlign: "center" | "top" | "bottom" | "mixed" | null
        ```

        The vertical alignment of the text range. It can be a specific alignment or 'mixed' if multiple alignments are used.
    Methods:
      applyTypography: |-
        ```
        applyTypography(typography: LibraryTypography): void
        ```

        Applies a typography style to the text range.
        This method sets various typography properties for the text range according to the given typography style.

        Parameters

        * typography: LibraryTypography

          The typography style to apply.

        Returns void

        Example
        ```
        textRange.applyTypography(typography);
        ```
ToggleOverlay:
  overview: |-
    Interface ToggleOverlay
    =======================

    It opens an overlay if it is not already opened or closes it if it is already opened.

    ```
    interface ToggleOverlay {
        destination: Board;
        relativeTo?: Shape;
        position?:
            | "center"
            | "manual"
            | "top-left"
            | "top-right"
            | "top-center"
            | "bottom-left"
            | "bottom-right"
            | "bottom-center";
        manualPositionLocation?: Point;
        closeWhenClickOutside?: boolean;
        addBackgroundOverlay?: boolean;
        animation?: Animation;
        type: "toggle-overlay";
    }
    ```

    Hierarchy (View Summary)

    * OverlayAction
      + ToggleOverlay

    Referenced by: Action
  members:
    Properties:
      destination: |-
        ```
        readonly destination: Board
        ```

        Overlay board that will be opened.
      relativeTo: |-
        ```
        readonly relativeTo?: Shape
        ```

        Base shape to which the overlay will be positioned taking constraints into account.
      position: |-
        ```
        readonly position?:
            | "center"
            | "manual"
            | "top-left"
            | "top-right"
            | "top-center"
            | "bottom-left"
            | "bottom-right"
            | "bottom-center"
        ```

        Positioning of the overlay.
      manualPositionLocation: |-
        ```
        readonly manualPositionLocation?: Point
        ```

        For `position = 'manual'` the location of the overlay.
      closeWhenClickOutside: |-
        ```
        readonly closeWhenClickOutside?: boolean
        ```

        When true the overlay will be closed when clicking outside
      addBackgroundOverlay: |-
        ```
        readonly addBackgroundOverlay?: boolean
        ```

        When true a background will be added to the overlay.
      animation: |-
        ```
        readonly animation?: Animation
        ```

        Animation displayed with this interaction.
      type: |-
        ```
        readonly type: "toggle-overlay"
        ```

        The action type
Track:
  overview: |-
    Interface Track
    ===============

    Represents a track configuration in Penpot.
    This interface includes properties for defining the type and value of a track used in layout configurations.

    ```
    interface Track {
        type: TrackType;
        value: number | null;
    }
    ```

    Referenced by: GridLayout
  members:
    Properties:
      type: |-
        ```
        type: TrackType
        ```

        The type of the track.
        This can be one of the following values:

        * 'flex': A flexible track type.
        * 'fixed': A fixed track type.
        * 'percent': A track type defined by a percentage.
        * 'auto': An automatic track type.
      value: |-
        ```
        value: number | null
        ```

        The value of the track.
        This can be a number representing the size of the track, or null if not applicable.
TokenBase:
  overview: |-
    Interface TokenBase
    ===================

    Represents the base properties and methods of a Design Token in Penpot, shared by
    all token types.

    ```
    interface TokenBase {
        id: string;
        name: string;
        description: string;
        duplicate(): Token;
        remove(): void;
        resolvedValueString: string | undefined;
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void;
        applyToSelected(properties?: TokenProperty[]): void;
    }
    ```

    Hierarchy (View Summary)

    * TokenBase
      + TokenBorderRadius
      + TokenShadow
      + TokenColor
      + TokenDimension
      + TokenFontFamilies
      + TokenFontSizes
      + TokenFontWeights
      + TokenLetterSpacing
      + TokenNumber
      + TokenOpacity
      + TokenRotation
      + TokenSizing
      + TokenSpacing
      + TokenBorderWidth
      + TokenTextCase
      + TokenTextDecoration
      + TokenTypography
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier for this token, used only internally inside Penpot.
        This one is not exported or synced with external Design Token sources.
      name: |-
        ```
        name: string
        ```

        The name of the token. It may include a group path separated by `.`.
      description: |-
        ```
        description: string
        ```

        An optional description text.
      resolvedValueString: |-
        ```
        readonly resolvedValueString: string | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's converted to string, regardless of the data type of the value depending
        on the token type. It can be undefined if no value has been found in active sets.
    Methods:
      duplicate: |-
        ```
        duplicate(): Token
        ```

        Adds to the set that contains this Token a new one equal to this one
        but with a new id.

        Returns Token
      remove: |-
        ```
        remove(): void
        ```

        Removes this token from the catalog.

        It will NOT be unapplied from any shape, since there may be other tokens
        with the same name.

        Returns void
      applyToShapes: |-
        ```
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void
        ```

        Applies this token to one or more properties of the given shapes.

        Parameters

        * shapes: Shape[]

          is an array of shapes to apply it.
        * properties: TokenProperty[]

          an optional list of property names. If omitted, the
          default properties will be applied.

          NOTE that the tokens application is by name and not by id. If there exist
          several tokens with the same name in different sets, the actual token applied
          and the value set to the attributes will depend on which sets are active
          (and will change if different sets or themes are activated later).

        Returns void
      applyToSelected: |-
        ```
        applyToSelected(properties?: TokenProperty[]): void
        ```

        Applies this token to the currently selected shapes.

        Parameters and warnings are the same as above.

        Parameters

        * properties: TokenProperty[]

        Returns void
TokenBorderRadius:
  overview: |-
    Interface TokenBorderRadius
    ===========================

    Represents a token of type BorderRadius.
    This interface extends `TokenBase` and specifies the data type of the value.

    ```
    interface TokenBorderRadius {
        id: string;
        name: string;
        description: string;
        duplicate(): Token;
        remove(): void;
        resolvedValueString: string | undefined;
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void;
        applyToSelected(properties?: TokenProperty[]): void;
        type: "borderRadius";
        value: string;
        resolvedValue: number | undefined;
    }
    ```

    Hierarchy (View Summary)

    * TokenBase
      + TokenBorderRadius

    Referenced by: Token
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier for this token, used only internally inside Penpot.
        This one is not exported or synced with external Design Token sources.
      name: |-
        ```
        name: string
        ```

        The name of the token. It may include a group path separated by `.`.
      description: |-
        ```
        description: string
        ```

        An optional description text.
      resolvedValueString: |-
        ```
        readonly resolvedValueString: string | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's converted to string, regardless of the data type of the value depending
        on the token type. It can be undefined if no value has been found in active sets.
      type: |-
        ```
        readonly type: "borderRadius"
        ```

        The type of the token.
      value: |-
        ```
        value: string
        ```

        The value as defined in the token itself.
        It's a positive number or a reference.
      resolvedValue: |-
        ```
        readonly resolvedValue: number | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's a positive number, or undefined if no value has been found in active sets.
    Methods:
      duplicate: |-
        ```
        duplicate(): Token
        ```

        Adds to the set that contains this Token a new one equal to this one
        but with a new id.

        Returns Token
      remove: |-
        ```
        remove(): void
        ```

        Removes this token from the catalog.

        It will NOT be unapplied from any shape, since there may be other tokens
        with the same name.

        Returns void
      applyToShapes: |-
        ```
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void
        ```

        Applies this token to one or more properties of the given shapes.

        Parameters

        * shapes: Shape[]

          is an array of shapes to apply it.
        * properties: TokenProperty[]

          an optional list of property names. If omitted, the
          default properties will be applied.

          NOTE that the tokens application is by name and not by id. If there exist
          several tokens with the same name in different sets, the actual token applied
          and the value set to the attributes will depend on which sets are active
          (and will change if different sets or themes are activated later).

        Returns void
      applyToSelected: |-
        ```
        applyToSelected(properties?: TokenProperty[]): void
        ```

        Applies this token to the currently selected shapes.

        Parameters and warnings are the same as above.

        Parameters

        * properties: TokenProperty[]

        Returns void
TokenShadowValue:
  overview: |-
    Interface TokenShadowValue
    ==========================

    The value of a TokenShadow in its composite form.

    ```
    interface TokenShadowValue {
        color: string;
        inset: boolean;
        offsetX: number;
        offsetY: number;
        spread: number;
        blur: number;
    }
    ```

    Referenced by: TokenShadow
  members:
    Properties:
      color: |-
        ```
        color: string
        ```

        The color as a string (e.g. "#FF5733").
      inset: |-
        ```
        inset: boolean
        ```

        If the shadow is inset or drop.
      offsetX: |-
        ```
        offsetX: number
        ```

        The horizontal offset of the shadow in pixels.
      offsetY: |-
        ```
        offsetY: number
        ```

        The vertical offset of the shadow in pixels.
      spread: |-
        ```
        spread: number
        ```

        The spread distance of the shadow in pixels.
      blur: |-
        ```
        blur: number
        ```

        The amount of blur to apply to the shadow.
TokenShadowValueString:
  overview: |-
    Interface TokenShadowValueString
    ================================

    The value of a TokenShadow in its composite of strings form.

    ```
    interface TokenShadowValueString {
        color: string;
        inset: string;
        offsetX: string;
        offsetY: string;
        spread: string;
        blur: string;
    }
    ```

    Referenced by: TokenShadow, TokenValueString
  members:
    Properties:
      color: |-
        ```
        color: string
        ```

        The color as a string (e.g. "#FF5733"), or a reference
        to a color token.
      inset: |-
        ```
        inset: string
        ```

        If the shadow is inset or drop, or a reference of a
        boolean token.
      offsetX: |-
        ```
        offsetX: string
        ```

        The horizontal offset of the shadow in pixels, or a reference
        to a number token.
      offsetY: |-
        ```
        offsetY: string
        ```

        The vertical offset of the shadow in pixels, or a reference
        to a number token.
      spread: |-
        ```
        spread: string
        ```

        The spread distance of the shadow in pixels, or a reference
        to a number token.
      blur: |-
        ```
        blur: string
        ```

        The amount of blur to apply to the shadow, or a reference
        to a number token.
TokenShadow:
  overview: |-
    Interface TokenShadow
    =====================

    Represents a token of type Shadow.
    This interface extends `TokenBase` and specifies the data type of the value.

    ```
    interface TokenShadow {
        id: string;
        name: string;
        description: string;
        duplicate(): Token;
        remove(): void;
        resolvedValueString: string | undefined;
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void;
        applyToSelected(properties?: TokenProperty[]): void;
        type: "shadow";
        value: string | TokenShadowValueString[];
        resolvedValue: TokenShadowValue[] | undefined;
    }
    ```

    Hierarchy (View Summary)

    * TokenBase
      + TokenShadow

    Referenced by: Token
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier for this token, used only internally inside Penpot.
        This one is not exported or synced with external Design Token sources.
      name: |-
        ```
        name: string
        ```

        The name of the token. It may include a group path separated by `.`.
      description: |-
        ```
        description: string
        ```

        An optional description text.
      resolvedValueString: |-
        ```
        readonly resolvedValueString: string | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's converted to string, regardless of the data type of the value depending
        on the token type. It can be undefined if no value has been found in active sets.
      type: |-
        ```
        readonly type: "shadow"
        ```

        The type of the token.
      value: |-
        ```
        value: string | TokenShadowValueString[]
        ```

        The value as defined in the token itself.
        It may be a string with a reference to other token, or else
        an array of TokenShadowValueString.
      resolvedValue: |-
        ```
        readonly resolvedValue: TokenShadowValue[] | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's an array of TokenShadowValue, or undefined if no value has been found
        in active sets.
    Methods:
      duplicate: |-
        ```
        duplicate(): Token
        ```

        Adds to the set that contains this Token a new one equal to this one
        but with a new id.

        Returns Token
      remove: |-
        ```
        remove(): void
        ```

        Removes this token from the catalog.

        It will NOT be unapplied from any shape, since there may be other tokens
        with the same name.

        Returns void
      applyToShapes: |-
        ```
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void
        ```

        Applies this token to one or more properties of the given shapes.

        Parameters

        * shapes: Shape[]

          is an array of shapes to apply it.
        * properties: TokenProperty[]

          an optional list of property names. If omitted, the
          default properties will be applied.

          NOTE that the tokens application is by name and not by id. If there exist
          several tokens with the same name in different sets, the actual token applied
          and the value set to the attributes will depend on which sets are active
          (and will change if different sets or themes are activated later).

        Returns void
      applyToSelected: |-
        ```
        applyToSelected(properties?: TokenProperty[]): void
        ```

        Applies this token to the currently selected shapes.

        Parameters and warnings are the same as above.

        Parameters

        * properties: TokenProperty[]

        Returns void
TokenColor:
  overview: |-
    Interface TokenColor
    ====================

    Represents a token of type Color.
    This interface extends `TokenBase` and specifies the data type of the value.

    ```
    interface TokenColor {
        id: string;
        name: string;
        description: string;
        duplicate(): Token;
        remove(): void;
        resolvedValueString: string | undefined;
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void;
        applyToSelected(properties?: TokenProperty[]): void;
        type: "color";
        value: string;
        resolvedValue: string | undefined;
    }
    ```

    Hierarchy (View Summary)

    * TokenBase
      + TokenColor

    Referenced by: Token
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier for this token, used only internally inside Penpot.
        This one is not exported or synced with external Design Token sources.
      name: |-
        ```
        name: string
        ```

        The name of the token. It may include a group path separated by `.`.
      description: |-
        ```
        description: string
        ```

        An optional description text.
      resolvedValueString: |-
        ```
        readonly resolvedValueString: string | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's converted to string, regardless of the data type of the value depending
        on the token type. It can be undefined if no value has been found in active sets.
      type: |-
        ```
        readonly type: "color"
        ```

        The type of the token.
      value: |-
        ```
        value: string
        ```

        The value as defined in the token itself.
        It's a rgb color or a reference.
      resolvedValue: |-
        ```
        readonly resolvedValue: string | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's a rgb color, or undefined if no value has been found in active sets.
    Methods:
      duplicate: |-
        ```
        duplicate(): Token
        ```

        Adds to the set that contains this Token a new one equal to this one
        but with a new id.

        Returns Token
      remove: |-
        ```
        remove(): void
        ```

        Removes this token from the catalog.

        It will NOT be unapplied from any shape, since there may be other tokens
        with the same name.

        Returns void
      applyToShapes: |-
        ```
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void
        ```

        Applies this token to one or more properties of the given shapes.

        Parameters

        * shapes: Shape[]

          is an array of shapes to apply it.
        * properties: TokenProperty[]

          an optional list of property names. If omitted, the
          default properties will be applied.

          NOTE that the tokens application is by name and not by id. If there exist
          several tokens with the same name in different sets, the actual token applied
          and the value set to the attributes will depend on which sets are active
          (and will change if different sets or themes are activated later).

        Returns void
      applyToSelected: |-
        ```
        applyToSelected(properties?: TokenProperty[]): void
        ```

        Applies this token to the currently selected shapes.

        Parameters and warnings are the same as above.

        Parameters

        * properties: TokenProperty[]

        Returns void
TokenDimension:
  overview: |-
    Interface TokenDimension
    ========================

    Represents a token of type Dimension.
    This interface extends `TokenBase` and specifies the data type of the value.

    ```
    interface TokenDimension {
        id: string;
        name: string;
        description: string;
        duplicate(): Token;
        remove(): void;
        resolvedValueString: string | undefined;
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void;
        applyToSelected(properties?: TokenProperty[]): void;
        type: "dimension";
        value: string;
        resolvedValue: number | undefined;
    }
    ```

    Hierarchy (View Summary)

    * TokenBase
      + TokenDimension

    Referenced by: Token
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier for this token, used only internally inside Penpot.
        This one is not exported or synced with external Design Token sources.
      name: |-
        ```
        name: string
        ```

        The name of the token. It may include a group path separated by `.`.
      description: |-
        ```
        description: string
        ```

        An optional description text.
      resolvedValueString: |-
        ```
        readonly resolvedValueString: string | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's converted to string, regardless of the data type of the value depending
        on the token type. It can be undefined if no value has been found in active sets.
      type: |-
        ```
        readonly type: "dimension"
        ```

        The type of the token.
      value: |-
        ```
        value: string
        ```

        The value as defined in the token itself.
        It's a positive number or a reference.
      resolvedValue: |-
        ```
        readonly resolvedValue: number | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's a positive number, or undefined if no value has been found in active sets.
    Methods:
      duplicate: |-
        ```
        duplicate(): Token
        ```

        Adds to the set that contains this Token a new one equal to this one
        but with a new id.

        Returns Token
      remove: |-
        ```
        remove(): void
        ```

        Removes this token from the catalog.

        It will NOT be unapplied from any shape, since there may be other tokens
        with the same name.

        Returns void
      applyToShapes: |-
        ```
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void
        ```

        Applies this token to one or more properties of the given shapes.

        Parameters

        * shapes: Shape[]

          is an array of shapes to apply it.
        * properties: TokenProperty[]

          an optional list of property names. If omitted, the
          default properties will be applied.

          NOTE that the tokens application is by name and not by id. If there exist
          several tokens with the same name in different sets, the actual token applied
          and the value set to the attributes will depend on which sets are active
          (and will change if different sets or themes are activated later).

        Returns void
      applyToSelected: |-
        ```
        applyToSelected(properties?: TokenProperty[]): void
        ```

        Applies this token to the currently selected shapes.

        Parameters and warnings are the same as above.

        Parameters

        * properties: TokenProperty[]

        Returns void
TokenFontFamilies:
  overview: |-
    Interface TokenFontFamilies
    ===========================

    Represents a token of type FontFamilies.
    This interface extends `TokenBase` and specifies the data type of the value.

    ```
    interface TokenFontFamilies {
        id: string;
        name: string;
        description: string;
        duplicate(): Token;
        remove(): void;
        resolvedValueString: string | undefined;
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void;
        applyToSelected(properties?: TokenProperty[]): void;
        type: "fontFamilies";
        value: string | string[];
        resolvedValue: string[] | undefined;
    }
    ```

    Hierarchy (View Summary)

    * TokenBase
      + TokenFontFamilies

    Referenced by: Token
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier for this token, used only internally inside Penpot.
        This one is not exported or synced with external Design Token sources.
      name: |-
        ```
        name: string
        ```

        The name of the token. It may include a group path separated by `.`.
      description: |-
        ```
        description: string
        ```

        An optional description text.
      resolvedValueString: |-
        ```
        readonly resolvedValueString: string | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's converted to string, regardless of the data type of the value depending
        on the token type. It can be undefined if no value has been found in active sets.
      type: |-
        ```
        readonly type: "fontFamilies"
        ```

        The type of the token.
      value: |-
        ```
        value: string | string[]
        ```

        The value as defined in the token itself.
        It may be a string with a reference to other token, or else
        an array of strings with one or more font families (each family
        is an item in the array).
      resolvedValue: |-
        ```
        readonly resolvedValue: string[] | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's an array of strings with one or more font families,
        or undefined if no value has been found in active sets.
    Methods:
      duplicate: |-
        ```
        duplicate(): Token
        ```

        Adds to the set that contains this Token a new one equal to this one
        but with a new id.

        Returns Token
      remove: |-
        ```
        remove(): void
        ```

        Removes this token from the catalog.

        It will NOT be unapplied from any shape, since there may be other tokens
        with the same name.

        Returns void
      applyToShapes: |-
        ```
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void
        ```

        Applies this token to one or more properties of the given shapes.

        Parameters

        * shapes: Shape[]

          is an array of shapes to apply it.
        * properties: TokenProperty[]

          an optional list of property names. If omitted, the
          default properties will be applied.

          NOTE that the tokens application is by name and not by id. If there exist
          several tokens with the same name in different sets, the actual token applied
          and the value set to the attributes will depend on which sets are active
          (and will change if different sets or themes are activated later).

        Returns void
      applyToSelected: |-
        ```
        applyToSelected(properties?: TokenProperty[]): void
        ```

        Applies this token to the currently selected shapes.

        Parameters and warnings are the same as above.

        Parameters

        * properties: TokenProperty[]

        Returns void
TokenFontSizes:
  overview: |-
    Interface TokenFontSizes
    ========================

    Represents a token of type FontSizes.
    This interface extends `TokenBase` and specifies the data type of the value.

    ```
    interface TokenFontSizes {
        id: string;
        name: string;
        description: string;
        duplicate(): Token;
        remove(): void;
        resolvedValueString: string | undefined;
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void;
        applyToSelected(properties?: TokenProperty[]): void;
        type: "fontSizes";
        value: string;
        resolvedValue: number | undefined;
    }
    ```

    Hierarchy (View Summary)

    * TokenBase
      + TokenFontSizes

    Referenced by: Token
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier for this token, used only internally inside Penpot.
        This one is not exported or synced with external Design Token sources.
      name: |-
        ```
        name: string
        ```

        The name of the token. It may include a group path separated by `.`.
      description: |-
        ```
        description: string
        ```

        An optional description text.
      resolvedValueString: |-
        ```
        readonly resolvedValueString: string | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's converted to string, regardless of the data type of the value depending
        on the token type. It can be undefined if no value has been found in active sets.
      type: |-
        ```
        readonly type: "fontSizes"
        ```

        The type of the token.
      value: |-
        ```
        value: string
        ```

        The value as defined in the token itself.
        It's a positive number or a reference.
      resolvedValue: |-
        ```
        readonly resolvedValue: number | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's a positive number, or undefined if no value has been found in active sets.
    Methods:
      duplicate: |-
        ```
        duplicate(): Token
        ```

        Adds to the set that contains this Token a new one equal to this one
        but with a new id.

        Returns Token
      remove: |-
        ```
        remove(): void
        ```

        Removes this token from the catalog.

        It will NOT be unapplied from any shape, since there may be other tokens
        with the same name.

        Returns void
      applyToShapes: |-
        ```
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void
        ```

        Applies this token to one or more properties of the given shapes.

        Parameters

        * shapes: Shape[]

          is an array of shapes to apply it.
        * properties: TokenProperty[]

          an optional list of property names. If omitted, the
          default properties will be applied.

          NOTE that the tokens application is by name and not by id. If there exist
          several tokens with the same name in different sets, the actual token applied
          and the value set to the attributes will depend on which sets are active
          (and will change if different sets or themes are activated later).

        Returns void
      applyToSelected: |-
        ```
        applyToSelected(properties?: TokenProperty[]): void
        ```

        Applies this token to the currently selected shapes.

        Parameters and warnings are the same as above.

        Parameters

        * properties: TokenProperty[]

        Returns void
TokenFontWeights:
  overview: |-
    Interface TokenFontWeights
    ==========================

    Represents a token of type FontWeights.
    This interface extends `TokenBase` and specifies the data type of the value.

    ```
    interface TokenFontWeights {
        id: string;
        name: string;
        description: string;
        duplicate(): Token;
        remove(): void;
        resolvedValueString: string | undefined;
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void;
        applyToSelected(properties?: TokenProperty[]): void;
        type: "fontWeights";
        value: string;
        resolvedValue: string | undefined;
    }
    ```

    Hierarchy (View Summary)

    * TokenBase
      + TokenFontWeights

    Referenced by: Token
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier for this token, used only internally inside Penpot.
        This one is not exported or synced with external Design Token sources.
      name: |-
        ```
        name: string
        ```

        The name of the token. It may include a group path separated by `.`.
      description: |-
        ```
        description: string
        ```

        An optional description text.
      resolvedValueString: |-
        ```
        readonly resolvedValueString: string | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's converted to string, regardless of the data type of the value depending
        on the token type. It can be undefined if no value has been found in active sets.
      type: |-
        ```
        readonly type: "fontWeights"
        ```

        The type of the token.
      value: |-
        ```
        value: string
        ```

        The value as defined in the token itself.
        It's a weight string or a reference.
      resolvedValue: |-
        ```
        readonly resolvedValue: string | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's a weight string ("bold", "strong", etc.), or undefined if no value has
        been found in active sets.
    Methods:
      duplicate: |-
        ```
        duplicate(): Token
        ```

        Adds to the set that contains this Token a new one equal to this one
        but with a new id.

        Returns Token
      remove: |-
        ```
        remove(): void
        ```

        Removes this token from the catalog.

        It will NOT be unapplied from any shape, since there may be other tokens
        with the same name.

        Returns void
      applyToShapes: |-
        ```
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void
        ```

        Applies this token to one or more properties of the given shapes.

        Parameters

        * shapes: Shape[]

          is an array of shapes to apply it.
        * properties: TokenProperty[]

          an optional list of property names. If omitted, the
          default properties will be applied.

          NOTE that the tokens application is by name and not by id. If there exist
          several tokens with the same name in different sets, the actual token applied
          and the value set to the attributes will depend on which sets are active
          (and will change if different sets or themes are activated later).

        Returns void
      applyToSelected: |-
        ```
        applyToSelected(properties?: TokenProperty[]): void
        ```

        Applies this token to the currently selected shapes.

        Parameters and warnings are the same as above.

        Parameters

        * properties: TokenProperty[]

        Returns void
TokenLetterSpacing:
  overview: |-
    Interface TokenLetterSpacing
    ============================

    Represents a token of type LetterSpacing.
    This interface extends `TokenBase` and specifies the data type of the value.

    ```
    interface TokenLetterSpacing {
        id: string;
        name: string;
        description: string;
        duplicate(): Token;
        remove(): void;
        resolvedValueString: string | undefined;
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void;
        applyToSelected(properties?: TokenProperty[]): void;
        type: "letterSpacing";
        value: string;
        resolvedValue: number | undefined;
    }
    ```

    Hierarchy (View Summary)

    * TokenBase
      + TokenLetterSpacing

    Referenced by: Token
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier for this token, used only internally inside Penpot.
        This one is not exported or synced with external Design Token sources.
      name: |-
        ```
        name: string
        ```

        The name of the token. It may include a group path separated by `.`.
      description: |-
        ```
        description: string
        ```

        An optional description text.
      resolvedValueString: |-
        ```
        readonly resolvedValueString: string | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's converted to string, regardless of the data type of the value depending
        on the token type. It can be undefined if no value has been found in active sets.
      type: |-
        ```
        readonly type: "letterSpacing"
        ```

        The type of the token.
      value: |-
        ```
        value: string
        ```

        The value as defined in the token itself.
        It's a number or a reference.
      resolvedValue: |-
        ```
        readonly resolvedValue: number | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's a number, or undefined if no value has been found in active sets.
    Methods:
      duplicate: |-
        ```
        duplicate(): Token
        ```

        Adds to the set that contains this Token a new one equal to this one
        but with a new id.

        Returns Token
      remove: |-
        ```
        remove(): void
        ```

        Removes this token from the catalog.

        It will NOT be unapplied from any shape, since there may be other tokens
        with the same name.

        Returns void
      applyToShapes: |-
        ```
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void
        ```

        Applies this token to one or more properties of the given shapes.

        Parameters

        * shapes: Shape[]

          is an array of shapes to apply it.
        * properties: TokenProperty[]

          an optional list of property names. If omitted, the
          default properties will be applied.

          NOTE that the tokens application is by name and not by id. If there exist
          several tokens with the same name in different sets, the actual token applied
          and the value set to the attributes will depend on which sets are active
          (and will change if different sets or themes are activated later).

        Returns void
      applyToSelected: |-
        ```
        applyToSelected(properties?: TokenProperty[]): void
        ```

        Applies this token to the currently selected shapes.

        Parameters and warnings are the same as above.

        Parameters

        * properties: TokenProperty[]

        Returns void
TokenNumber:
  overview: |-
    Interface TokenNumber
    =====================

    Represents a token of type Number.
    This interface extends `TokenBase` and specifies the data type of the value.

    ```
    interface TokenNumber {
        id: string;
        name: string;
        description: string;
        duplicate(): Token;
        remove(): void;
        resolvedValueString: string | undefined;
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void;
        applyToSelected(properties?: TokenProperty[]): void;
        type: "number";
        value: string;
        resolvedValue: number | undefined;
    }
    ```

    Hierarchy (View Summary)

    * TokenBase
      + TokenNumber

    Referenced by: Token
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier for this token, used only internally inside Penpot.
        This one is not exported or synced with external Design Token sources.
      name: |-
        ```
        name: string
        ```

        The name of the token. It may include a group path separated by `.`.
      description: |-
        ```
        description: string
        ```

        An optional description text.
      resolvedValueString: |-
        ```
        readonly resolvedValueString: string | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's converted to string, regardless of the data type of the value depending
        on the token type. It can be undefined if no value has been found in active sets.
      type: |-
        ```
        readonly type: "number"
        ```

        The type of the token.
      value: |-
        ```
        value: string
        ```

        The value as defined in the token itself.
        It's a number or a reference.
      resolvedValue: |-
        ```
        readonly resolvedValue: number | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's a number, or undefined if no value has been found in active sets.
    Methods:
      duplicate: |-
        ```
        duplicate(): Token
        ```

        Adds to the set that contains this Token a new one equal to this one
        but with a new id.

        Returns Token
      remove: |-
        ```
        remove(): void
        ```

        Removes this token from the catalog.

        It will NOT be unapplied from any shape, since there may be other tokens
        with the same name.

        Returns void
      applyToShapes: |-
        ```
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void
        ```

        Applies this token to one or more properties of the given shapes.

        Parameters

        * shapes: Shape[]

          is an array of shapes to apply it.
        * properties: TokenProperty[]

          an optional list of property names. If omitted, the
          default properties will be applied.

          NOTE that the tokens application is by name and not by id. If there exist
          several tokens with the same name in different sets, the actual token applied
          and the value set to the attributes will depend on which sets are active
          (and will change if different sets or themes are activated later).

        Returns void
      applyToSelected: |-
        ```
        applyToSelected(properties?: TokenProperty[]): void
        ```

        Applies this token to the currently selected shapes.

        Parameters and warnings are the same as above.

        Parameters

        * properties: TokenProperty[]

        Returns void
TokenOpacity:
  overview: |-
    Interface TokenOpacity
    ======================

    Represents a token of type Opacity.
    This interface extends `TokenBase` and specifies the data type of the value.

    ```
    interface TokenOpacity {
        id: string;
        name: string;
        description: string;
        duplicate(): Token;
        remove(): void;
        resolvedValueString: string | undefined;
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void;
        applyToSelected(properties?: TokenProperty[]): void;
        type: "opacity";
        value: string;
        resolvedValue: number | undefined;
    }
    ```

    Hierarchy (View Summary)

    * TokenBase
      + TokenOpacity

    Referenced by: Token
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier for this token, used only internally inside Penpot.
        This one is not exported or synced with external Design Token sources.
      name: |-
        ```
        name: string
        ```

        The name of the token. It may include a group path separated by `.`.
      description: |-
        ```
        description: string
        ```

        An optional description text.
      resolvedValueString: |-
        ```
        readonly resolvedValueString: string | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's converted to string, regardless of the data type of the value depending
        on the token type. It can be undefined if no value has been found in active sets.
      type: |-
        ```
        readonly type: "opacity"
        ```

        The type of the token.
      value: |-
        ```
        value: string
        ```

        The value as defined in the token itself.
        It's a number between 0 and 1 or a reference.
      resolvedValue: |-
        ```
        readonly resolvedValue: number | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's a number between 0 and 1, or undefined if no value has been found
        in active sets.
    Methods:
      duplicate: |-
        ```
        duplicate(): Token
        ```

        Adds to the set that contains this Token a new one equal to this one
        but with a new id.

        Returns Token
      remove: |-
        ```
        remove(): void
        ```

        Removes this token from the catalog.

        It will NOT be unapplied from any shape, since there may be other tokens
        with the same name.

        Returns void
      applyToShapes: |-
        ```
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void
        ```

        Applies this token to one or more properties of the given shapes.

        Parameters

        * shapes: Shape[]

          is an array of shapes to apply it.
        * properties: TokenProperty[]

          an optional list of property names. If omitted, the
          default properties will be applied.

          NOTE that the tokens application is by name and not by id. If there exist
          several tokens with the same name in different sets, the actual token applied
          and the value set to the attributes will depend on which sets are active
          (and will change if different sets or themes are activated later).

        Returns void
      applyToSelected: |-
        ```
        applyToSelected(properties?: TokenProperty[]): void
        ```

        Applies this token to the currently selected shapes.

        Parameters and warnings are the same as above.

        Parameters

        * properties: TokenProperty[]

        Returns void
TokenRotation:
  overview: |-
    Interface TokenRotation
    =======================

    Represents a token of type Rotation.
    This interface extends `TokenBase` and specifies the data type of the value.

    ```
    interface TokenRotation {
        id: string;
        name: string;
        description: string;
        duplicate(): Token;
        remove(): void;
        resolvedValueString: string | undefined;
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void;
        applyToSelected(properties?: TokenProperty[]): void;
        type: "rotation";
        value: string;
        resolvedValue: number | undefined;
    }
    ```

    Hierarchy (View Summary)

    * TokenBase
      + TokenRotation

    Referenced by: Token
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier for this token, used only internally inside Penpot.
        This one is not exported or synced with external Design Token sources.
      name: |-
        ```
        name: string
        ```

        The name of the token. It may include a group path separated by `.`.
      description: |-
        ```
        description: string
        ```

        An optional description text.
      resolvedValueString: |-
        ```
        readonly resolvedValueString: string | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's converted to string, regardless of the data type of the value depending
        on the token type. It can be undefined if no value has been found in active sets.
      type: |-
        ```
        readonly type: "rotation"
        ```

        The type of the token.
      value: |-
        ```
        value: string
        ```

        The value as defined in the token itself.
        It's a number in degrees or a reference.
      resolvedValue: |-
        ```
        readonly resolvedValue: number | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's a number in degrees, or undefined if no value has been found
        in active sets.
    Methods:
      duplicate: |-
        ```
        duplicate(): Token
        ```

        Adds to the set that contains this Token a new one equal to this one
        but with a new id.

        Returns Token
      remove: |-
        ```
        remove(): void
        ```

        Removes this token from the catalog.

        It will NOT be unapplied from any shape, since there may be other tokens
        with the same name.

        Returns void
      applyToShapes: |-
        ```
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void
        ```

        Applies this token to one or more properties of the given shapes.

        Parameters

        * shapes: Shape[]

          is an array of shapes to apply it.
        * properties: TokenProperty[]

          an optional list of property names. If omitted, the
          default properties will be applied.

          NOTE that the tokens application is by name and not by id. If there exist
          several tokens with the same name in different sets, the actual token applied
          and the value set to the attributes will depend on which sets are active
          (and will change if different sets or themes are activated later).

        Returns void
      applyToSelected: |-
        ```
        applyToSelected(properties?: TokenProperty[]): void
        ```

        Applies this token to the currently selected shapes.

        Parameters and warnings are the same as above.

        Parameters

        * properties: TokenProperty[]

        Returns void
TokenSizing:
  overview: |-
    Interface TokenSizing
    =====================

    Represents a token of type Sizing.
    This interface extends `TokenBase` and specifies the data type of the value.

    ```
    interface TokenSizing {
        id: string;
        name: string;
        description: string;
        duplicate(): Token;
        remove(): void;
        resolvedValueString: string | undefined;
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void;
        applyToSelected(properties?: TokenProperty[]): void;
        type: "sizing";
        value: string;
        resolvedValue: number | undefined;
    }
    ```

    Hierarchy (View Summary)

    * TokenBase
      + TokenSizing

    Referenced by: Token
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier for this token, used only internally inside Penpot.
        This one is not exported or synced with external Design Token sources.
      name: |-
        ```
        name: string
        ```

        The name of the token. It may include a group path separated by `.`.
      description: |-
        ```
        description: string
        ```

        An optional description text.
      resolvedValueString: |-
        ```
        readonly resolvedValueString: string | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's converted to string, regardless of the data type of the value depending
        on the token type. It can be undefined if no value has been found in active sets.
      type: |-
        ```
        readonly type: "sizing"
        ```

        The type of the token.
      value: |-
        ```
        value: string
        ```

        The value as defined in the token itself.
        It's a number or a reference.
      resolvedValue: |-
        ```
        readonly resolvedValue: number | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's a number, or undefined if no value has been found in active sets.
    Methods:
      duplicate: |-
        ```
        duplicate(): Token
        ```

        Adds to the set that contains this Token a new one equal to this one
        but with a new id.

        Returns Token
      remove: |-
        ```
        remove(): void
        ```

        Removes this token from the catalog.

        It will NOT be unapplied from any shape, since there may be other tokens
        with the same name.

        Returns void
      applyToShapes: |-
        ```
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void
        ```

        Applies this token to one or more properties of the given shapes.

        Parameters

        * shapes: Shape[]

          is an array of shapes to apply it.
        * properties: TokenProperty[]

          an optional list of property names. If omitted, the
          default properties will be applied.

          NOTE that the tokens application is by name and not by id. If there exist
          several tokens with the same name in different sets, the actual token applied
          and the value set to the attributes will depend on which sets are active
          (and will change if different sets or themes are activated later).

        Returns void
      applyToSelected: |-
        ```
        applyToSelected(properties?: TokenProperty[]): void
        ```

        Applies this token to the currently selected shapes.

        Parameters and warnings are the same as above.

        Parameters

        * properties: TokenProperty[]

        Returns void
TokenSpacing:
  overview: |-
    Interface TokenSpacing
    ======================

    Represents a token of type Spacing.
    This interface extends `TokenBase` and specifies the data type of the value.

    ```
    interface TokenSpacing {
        id: string;
        name: string;
        description: string;
        duplicate(): Token;
        remove(): void;
        resolvedValueString: string | undefined;
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void;
        applyToSelected(properties?: TokenProperty[]): void;
        type: "spacing";
        value: string;
        resolvedValue: number | undefined;
    }
    ```

    Hierarchy (View Summary)

    * TokenBase
      + TokenSpacing

    Referenced by: Token
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier for this token, used only internally inside Penpot.
        This one is not exported or synced with external Design Token sources.
      name: |-
        ```
        name: string
        ```

        The name of the token. It may include a group path separated by `.`.
      description: |-
        ```
        description: string
        ```

        An optional description text.
      resolvedValueString: |-
        ```
        readonly resolvedValueString: string | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's converted to string, regardless of the data type of the value depending
        on the token type. It can be undefined if no value has been found in active sets.
      type: |-
        ```
        readonly type: "spacing"
        ```

        The type of the token.
      value: |-
        ```
        value: string
        ```

        The value as defined in the token itself.
        It's a number or a reference.
      resolvedValue: |-
        ```
        readonly resolvedValue: number | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's a number, or undefined if no value has been found in active sets.
    Methods:
      duplicate: |-
        ```
        duplicate(): Token
        ```

        Adds to the set that contains this Token a new one equal to this one
        but with a new id.

        Returns Token
      remove: |-
        ```
        remove(): void
        ```

        Removes this token from the catalog.

        It will NOT be unapplied from any shape, since there may be other tokens
        with the same name.

        Returns void
      applyToShapes: |-
        ```
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void
        ```

        Applies this token to one or more properties of the given shapes.

        Parameters

        * shapes: Shape[]

          is an array of shapes to apply it.
        * properties: TokenProperty[]

          an optional list of property names. If omitted, the
          default properties will be applied.

          NOTE that the tokens application is by name and not by id. If there exist
          several tokens with the same name in different sets, the actual token applied
          and the value set to the attributes will depend on which sets are active
          (and will change if different sets or themes are activated later).

        Returns void
      applyToSelected: |-
        ```
        applyToSelected(properties?: TokenProperty[]): void
        ```

        Applies this token to the currently selected shapes.

        Parameters and warnings are the same as above.

        Parameters

        * properties: TokenProperty[]

        Returns void
TokenBorderWidth:
  overview: |-
    Interface TokenBorderWidth
    ==========================

    Represents a token of type BorderWidth.
    This interface extends `TokenBase` and specifies the data type of the value.

    ```
    interface TokenBorderWidth {
        id: string;
        name: string;
        description: string;
        duplicate(): Token;
        remove(): void;
        resolvedValueString: string | undefined;
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void;
        applyToSelected(properties?: TokenProperty[]): void;
        type: "borderWidth";
        value: string;
        resolvedValue: number | undefined;
    }
    ```

    Hierarchy (View Summary)

    * TokenBase
      + TokenBorderWidth

    Referenced by: Token
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier for this token, used only internally inside Penpot.
        This one is not exported or synced with external Design Token sources.
      name: |-
        ```
        name: string
        ```

        The name of the token. It may include a group path separated by `.`.
      description: |-
        ```
        description: string
        ```

        An optional description text.
      resolvedValueString: |-
        ```
        readonly resolvedValueString: string | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's converted to string, regardless of the data type of the value depending
        on the token type. It can be undefined if no value has been found in active sets.
      type: |-
        ```
        readonly type: "borderWidth"
        ```

        The type of the token.
      value: |-
        ```
        value: string
        ```

        The value as defined in the token itself.
        It's a positive number or a reference.
      resolvedValue: |-
        ```
        readonly resolvedValue: number | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's a positive number, or undefined if no value has been found in active sets.
    Methods:
      duplicate: |-
        ```
        duplicate(): Token
        ```

        Adds to the set that contains this Token a new one equal to this one
        but with a new id.

        Returns Token
      remove: |-
        ```
        remove(): void
        ```

        Removes this token from the catalog.

        It will NOT be unapplied from any shape, since there may be other tokens
        with the same name.

        Returns void
      applyToShapes: |-
        ```
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void
        ```

        Applies this token to one or more properties of the given shapes.

        Parameters

        * shapes: Shape[]

          is an array of shapes to apply it.
        * properties: TokenProperty[]

          an optional list of property names. If omitted, the
          default properties will be applied.

          NOTE that the tokens application is by name and not by id. If there exist
          several tokens with the same name in different sets, the actual token applied
          and the value set to the attributes will depend on which sets are active
          (and will change if different sets or themes are activated later).

        Returns void
      applyToSelected: |-
        ```
        applyToSelected(properties?: TokenProperty[]): void
        ```

        Applies this token to the currently selected shapes.

        Parameters and warnings are the same as above.

        Parameters

        * properties: TokenProperty[]

        Returns void
TokenTextCase:
  overview: |-
    Interface TokenTextCase
    =======================

    Represents a token of type TextCase.
    This interface extends `TokenBase` and specifies the data type of the value.

    ```
    interface TokenTextCase {
        id: string;
        name: string;
        description: string;
        duplicate(): Token;
        remove(): void;
        resolvedValueString: string | undefined;
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void;
        applyToSelected(properties?: TokenProperty[]): void;
        type: "textCase";
        value: string;
        resolvedValue: string | undefined;
    }
    ```

    Hierarchy (View Summary)

    * TokenBase
      + TokenTextCase

    Referenced by: Token
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier for this token, used only internally inside Penpot.
        This one is not exported or synced with external Design Token sources.
      name: |-
        ```
        name: string
        ```

        The name of the token. It may include a group path separated by `.`.
      description: |-
        ```
        description: string
        ```

        An optional description text.
      resolvedValueString: |-
        ```
        readonly resolvedValueString: string | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's converted to string, regardless of the data type of the value depending
        on the token type. It can be undefined if no value has been found in active sets.
      type: |-
        ```
        readonly type: "textCase"
        ```

        The type of the token.
      value: |-
        ```
        value: string
        ```

        The value as defined in the token itself.
        It's a case string or a reference.
      resolvedValue: |-
        ```
        readonly resolvedValue: string | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's a case string ("none", "uppercase", "lowercase", "capitalize"), or
        undefined if no value has been found in active sets.
    Methods:
      duplicate: |-
        ```
        duplicate(): Token
        ```

        Adds to the set that contains this Token a new one equal to this one
        but with a new id.

        Returns Token
      remove: |-
        ```
        remove(): void
        ```

        Removes this token from the catalog.

        It will NOT be unapplied from any shape, since there may be other tokens
        with the same name.

        Returns void
      applyToShapes: |-
        ```
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void
        ```

        Applies this token to one or more properties of the given shapes.

        Parameters

        * shapes: Shape[]

          is an array of shapes to apply it.
        * properties: TokenProperty[]

          an optional list of property names. If omitted, the
          default properties will be applied.

          NOTE that the tokens application is by name and not by id. If there exist
          several tokens with the same name in different sets, the actual token applied
          and the value set to the attributes will depend on which sets are active
          (and will change if different sets or themes are activated later).

        Returns void
      applyToSelected: |-
        ```
        applyToSelected(properties?: TokenProperty[]): void
        ```

        Applies this token to the currently selected shapes.

        Parameters and warnings are the same as above.

        Parameters

        * properties: TokenProperty[]

        Returns void
TokenTextDecoration:
  overview: |-
    Interface TokenTextDecoration
    =============================

    Represents a token of type Decoration.
    This interface extends `TokenBase` and specifies the data type of the value.

    ```
    interface TokenTextDecoration {
        id: string;
        name: string;
        description: string;
        duplicate(): Token;
        remove(): void;
        resolvedValueString: string | undefined;
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void;
        applyToSelected(properties?: TokenProperty[]): void;
        type: "textDecoration";
        value: string;
        resolvedValue: string | undefined;
    }
    ```

    Hierarchy (View Summary)

    * TokenBase
      + TokenTextDecoration

    Referenced by: Token
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier for this token, used only internally inside Penpot.
        This one is not exported or synced with external Design Token sources.
      name: |-
        ```
        name: string
        ```

        The name of the token. It may include a group path separated by `.`.
      description: |-
        ```
        description: string
        ```

        An optional description text.
      resolvedValueString: |-
        ```
        readonly resolvedValueString: string | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's converted to string, regardless of the data type of the value depending
        on the token type. It can be undefined if no value has been found in active sets.
      type: |-
        ```
        readonly type: "textDecoration"
        ```

        The type of the token.
      value: |-
        ```
        value: string
        ```

        The value as defined in the token itself.
        It's a decoration string or a reference.
      resolvedValue: |-
        ```
        readonly resolvedValue: string | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's a decoration string, or undefined if no value has been found
        in active sets.
    Methods:
      duplicate: |-
        ```
        duplicate(): Token
        ```

        Adds to the set that contains this Token a new one equal to this one
        but with a new id.

        Returns Token
      remove: |-
        ```
        remove(): void
        ```

        Removes this token from the catalog.

        It will NOT be unapplied from any shape, since there may be other tokens
        with the same name.

        Returns void
      applyToShapes: |-
        ```
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void
        ```

        Applies this token to one or more properties of the given shapes.

        Parameters

        * shapes: Shape[]

          is an array of shapes to apply it.
        * properties: TokenProperty[]

          an optional list of property names. If omitted, the
          default properties will be applied.

          NOTE that the tokens application is by name and not by id. If there exist
          several tokens with the same name in different sets, the actual token applied
          and the value set to the attributes will depend on which sets are active
          (and will change if different sets or themes are activated later).

        Returns void
      applyToSelected: |-
        ```
        applyToSelected(properties?: TokenProperty[]): void
        ```

        Applies this token to the currently selected shapes.

        Parameters and warnings are the same as above.

        Parameters

        * properties: TokenProperty[]

        Returns void
TokenTypographyValue:
  overview: |-
    Interface TokenTypographyValue
    ==============================

    The value of a TokenTypography in its composite form.

    ```
    interface TokenTypographyValue {
        letterSpacing: number;
        fontFamilies: string[];
        fontSizes: number;
        fontWeights: string;
        lineHeight: number;
        textCase: string;
        textDecoration: string;
    }
    ```

    Referenced by: TokenTypography
  members:
    Properties:
      letterSpacing: |-
        ```
        letterSpacing: number
        ```

        The letter spacing, as a number.
      fontFamilies: |-
        ```
        fontFamilies: string[]
        ```

        The list of font families.
      fontSizes: |-
        ```
        fontSizes: number
        ```

        The font size, as a positive number.
      fontWeights: |-
        ```
        fontWeights: string
        ```

        The font weight, as a weight string ("bold", "strong", etc.).
      lineHeight: |-
        ```
        lineHeight: number
        ```

        The line height, as a number.
      textCase: |-
        ```
        textCase: string
        ```

        The text case as a string ("none", "uppercase", "lowercase" "capitalize").
      textDecoration: |-
        ```
        textDecoration: string
        ```

        The text decoration as a string ("none", "underline", "strike-through").
TokenTypographyValueString:
  overview: |-
    Interface TokenTypographyValueString
    ====================================

    The value of a TokenTypography in its composite of strings form.

    ```
    interface TokenTypographyValueString {
        letterSpacing: string;
        fontFamilies: string | string[];
        fontSizes: string;
        fontWeight: string;
        lineHeight: string;
        textCase: string;
        textDecoration: string;
    }
    ```

    Referenced by: TokenTypography, TokenValueString
  members:
    Properties:
      letterSpacing: |-
        ```
        letterSpacing: string
        ```

        The letter spacing, as a number, or a reference to a TokenLetterSpacing.
      fontFamilies: |-
        ```
        fontFamilies: string | string[]
        ```

        The list of font families, or a reference to a TokenFontFamilies.
      fontSizes: |-
        ```
        fontSizes: string
        ```

        The font size, as a positive number, or a reference to a TokenFontSizes.
      fontWeight: |-
        ```
        fontWeight: string
        ```

        The font weight, as a weight string ("bold", "strong", etc.), or a
        reference to a TokenFontWeights.
      lineHeight: |-
        ```
        lineHeight: string
        ```

        The line height, as a number. Note that there is no individual line-height
        token type; it only exists as part of a Typography token. If you need to
        put a reference here, use a Number token.
      textCase: |-
        ```
        textCase: string
        ```

        The text case as a string ("none", "uppercase", "lowercase" "capitalize"),
        or a reference to a TokenTextCase.
      textDecoration: |-
        ```
        textDecoration: string
        ```

        The text decoration as a string ("none", "underline", "strike-through"),
        or a reference to a TokenTextDecoration.
TokenTypography:
  overview: |-
    Interface TokenTypography
    =========================

    Represents a token of type Typography.
    This interface extends `TokenBase` and specifies the data type of the value.

    ```
    interface TokenTypography {
        id: string;
        name: string;
        description: string;
        duplicate(): Token;
        remove(): void;
        resolvedValueString: string | undefined;
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void;
        applyToSelected(properties?: TokenProperty[]): void;
        type: "typography";
        value: string | TokenTypographyValueString;
        resolvedValue: TokenTypographyValue[] | undefined;
    }
    ```

    Hierarchy (View Summary)

    * TokenBase
      + TokenTypography

    Referenced by: Token
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier for this token, used only internally inside Penpot.
        This one is not exported or synced with external Design Token sources.
      name: |-
        ```
        name: string
        ```

        The name of the token. It may include a group path separated by `.`.
      description: |-
        ```
        description: string
        ```

        An optional description text.
      resolvedValueString: |-
        ```
        readonly resolvedValueString: string | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's converted to string, regardless of the data type of the value depending
        on the token type. It can be undefined if no value has been found in active sets.
      type: |-
        ```
        readonly type: "typography"
        ```

        The type of the token.
      value: |-
        ```
        value: string | TokenTypographyValueString
        ```

        The value as defined in the token itself.
        It may be a string with a reference to other token, or a
        TokenTypographyValueString.
      resolvedValue: |-
        ```
        readonly resolvedValue: TokenTypographyValue[] | undefined
        ```

        The value calculated by finding all tokens with the same name in active sets
        and resolving the references.

        It's a TokenTypographyValue, or undefined if no value has been found
        in active sets.
    Methods:
      duplicate: |-
        ```
        duplicate(): Token
        ```

        Adds to the set that contains this Token a new one equal to this one
        but with a new id.

        Returns Token
      remove: |-
        ```
        remove(): void
        ```

        Removes this token from the catalog.

        It will NOT be unapplied from any shape, since there may be other tokens
        with the same name.

        Returns void
      applyToShapes: |-
        ```
        applyToShapes(shapes: Shape[], properties?: TokenProperty[]): void
        ```

        Applies this token to one or more properties of the given shapes.

        Parameters

        * shapes: Shape[]

          is an array of shapes to apply it.
        * properties: TokenProperty[]

          an optional list of property names. If omitted, the
          default properties will be applied.

          NOTE that the tokens application is by name and not by id. If there exist
          several tokens with the same name in different sets, the actual token applied
          and the value set to the attributes will depend on which sets are active
          (and will change if different sets or themes are activated later).

        Returns void
      applyToSelected: |-
        ```
        applyToSelected(properties?: TokenProperty[]): void
        ```

        Applies this token to the currently selected shapes.

        Parameters and warnings are the same as above.

        Parameters

        * properties: TokenProperty[]

        Returns void
TokenCatalog:
  overview: |-
    Interface TokenCatalog
    ======================

    The collection of all tokens in a Penpot file's library.

    Tokens are contained in sets, that can be marked as active
    or inactive to control the resolved value of the tokens.

    The active status of sets can be handled by presets named
    Themes.

    ```
    interface TokenCatalog {
        themes: TokenTheme[];
        sets: TokenSet[];
        addTheme(group: { group: string; name: string }): TokenTheme;
        addSet(name: { name: string; active?: boolean }): TokenSet;
        getThemeById(id: string): TokenTheme | undefined;
        getSetById(id: string): TokenSet | undefined;
    }
    ```

    Referenced by: Library
  members:
    Properties:
      themes: |-
        ```
        readonly themes: TokenTheme[]
        ```

        The list of themes in this catalog, in creation order.
      sets: |-
        ```
        readonly sets: TokenSet[]
        ```

        The list of sets in this catalog, in the order defined
        by the user. The order is important because when the same token name
        exists in several active sets, the latter has precedence.
    Methods:
      addTheme: |-
        ```
        addTheme(group: { group: string; name: string }): TokenTheme
        ```

        Creates a new TokenTheme and adds it to the catalog.

        Parameters

        * group: { group: string; name: string }

          The group name of the theme (can be empty string).

        Returns TokenTheme

        Returns the created TokenTheme.
      addSet: |-
        ```
        addSet(name: { name: string; active?: boolean }): TokenSet
        ```

        Creates a new TokenSet and adds it to the catalog.

        Newly created sets are **inactive** by default: only active sets
        affect shapes and reference resolution. Pass `active: true` to create
        an already-active set, or activate it later via `set.active = true` /
        `set.toggleActive()`.

        Parameters

        * name: { name: string; active?: boolean }

          The name of the set (required). It may contain
          a group path, separated by `/`.

        Returns TokenSet

        Returns the created TokenSet.
      getThemeById: |-
        ```
        getThemeById(id: string): TokenTheme | undefined
        ```

        Retrieves a theme.

        Parameters

        * id: string

          the id of the theme.

        Returns TokenTheme | undefined

        Returns the theme or undefined if not found.
      getSetById: |-
        ```
        getSetById(id: string): TokenSet | undefined
        ```

        Retrieves a set.

        Parameters

        * id: string

          the id of the set.

        Returns TokenSet | undefined

        Returns the set or undefined if not found.
TokenSet:
  overview: |-
    Interface TokenSet
    ==================

    A collection of Design Tokens.

    Inside a set, tokens have an unique name, that will designate
    what token to use if the name is applied to a shape and this
    set is active.

    ```
    interface TokenSet {
        id: string;
        name: string;
        active: boolean;
        tokens: Token[];
        tokensByType: [string, Token[]][];
        toggleActive(): void;
        getTokenById(id: string): Token | undefined;
        addToken(
            type: { type: TokenType; name: string; value: TokenValueString },
        ): Token;
        duplicate(): TokenSet;
        remove(): void;
    }
    ```

    Referenced by: TokenCatalog, TokenSet, TokenTheme
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier for this set, used only internally inside Penpot.
        This one is not exported or synced with external Design Token sources.
      name: |-
        ```
        name: string
        ```

        The name of the set. It may include a group path separated by `/`.
      active: |-
        ```
        active: boolean
        ```

        Indicates if the set is currently active.
      tokens: |-
        ```
        readonly tokens: Token[]
        ```

        The tokens contained in this set, in alphabetical order.
      tokensByType: |-
        ```
        readonly tokensByType: [string, Token[]][]
        ```

        The tokens contained in this set, grouped by type.
    Methods:
      toggleActive: |-
        ```
        toggleActive(): void
        ```

        Toggles the active status of this set.

        Returns void
      getTokenById: |-
        ```
        getTokenById(id: string): Token | undefined
        ```

        Retrieves a token.

        Parameters

        * id: string

          the id of the token.

        Returns Token | undefined

        Returns the token or undefined if not found.
      addToken: |-
        ```
        addToken(
            type: { type: TokenType; name: string; value: TokenValueString },
        ): Token
        ```

        Creates a new Token and adds it to the set.

        Parameters

        * type: { type: TokenType; name: string; value: TokenValueString }

          The type of the token.

        Returns Token

        Returns the created Token.
      duplicate: |-
        ```
        duplicate(): TokenSet
        ```

        Adds to the catalog a new TokenSet equal to this one but with a new id.

        Returns TokenSet
      remove: |-
        ```
        remove(): void
        ```

        Removes this set from the catalog.

        Returns void
TokenTheme:
  overview: |-
    Interface TokenTheme
    ====================

    A preset of active TokenSets.

    A theme contains a list of references to TokenSets. When the theme
    is activated, it sets are activated too. This will not deactivate
    sets that are *not* in this theme, because they may have been
    activated by other themes.

    Themes may be grouped. At any time only one of the themes in a group
    may be active. But there may be active themes in other groups. This
    allows defining multiple "axis" for theming (e.g. color scheme,
    density or brand).

    When a TokenSet is activated or deactivated directly, all themes
    are disabled (indicating that now there is a "custom" manual theme
    active).

    ```
    interface TokenTheme {
        id: string;
        externalId: string | undefined;
        group: string;
        name: string;
        active: boolean;
        toggleActive(): void;
        activeSets: TokenSet[];
        addSet(tokenSet: string | TokenSet): void;
        removeSet(tokenSet: string | TokenSet): void;
        duplicate(): TokenTheme;
        remove(): void;
    }
    ```

    Referenced by: TokenCatalog, TokenTheme
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier for this theme, used only internally inside Penpot.
        This one is not exported or synced with external Design Token sources.
      externalId: |-
        ```
        readonly externalId: string | undefined
        ```

        Optional identifier that may exist if the theme was imported from an
        external tool that uses ids in the json file.
      group: |-
        ```
        group: string
        ```

        The group name of the theme. Can be an empty string.
      name: |-
        ```
        name: string
        ```

        The name of the theme.
      active: |-
        ```
        active: boolean
        ```

        Indicates if the theme is currently active.
      activeSets: |-
        ```
        readonly activeSets: TokenSet[]
        ```

        The sets that will be activated if this theme is activated.
    Methods:
      toggleActive: |-
        ```
        toggleActive(): void
        ```

        Toggles the active status of this theme.

        Returns void
      addSet: |-
        ```
        addSet(tokenSet: string | TokenSet): void
        ```

        Adds a set to the list of the theme.

        Parameters

        * tokenSet: string | TokenSet

          a `TokenSet` or the id of a token set.

        Returns void
      removeSet: |-
        ```
        removeSet(tokenSet: string | TokenSet): void
        ```

        Removes a set from the list of the theme.

        Parameters

        * tokenSet: string | TokenSet

          a `TokenSet` or the id of a token set.

        Returns void
      duplicate: |-
        ```
        duplicate(): TokenTheme
        ```

        Adds to the catalog a new TokenTheme equal to this one but with a new id.

        Returns TokenTheme
      remove: |-
        ```
        remove(): void
        ```

        Removes this theme from the catalog.

        Returns void
User:
  overview: |-
    Interface User
    ==============

    Represents a user in Penpot.

    ```
    interface User {
        id: string;
        name?: string;
        avatarUrl?: string;
        color: string;
        sessionId?: string;
    }
    ```

    Hierarchy (View Summary)

    * User
      + ActiveUser

    Referenced by: Comment, CommentThread, Context, File, FileVersion, Penpot
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier of the user.

        Example
        ```
        const userId = user.id;console.log(userId);
        ```
      name: |-
        ```
        readonly name?: string
        ```

        The name of the user.

        Example
        ```
        const userName = user.name;console.log(userName);
        ```
      avatarUrl: |-
        ```
        readonly avatarUrl?: string
        ```

        The URL of the user's avatar image.

        Example
        ```
        const avatarUrl = user.avatarUrl;console.log(avatarUrl);
        ```
      color: |-
        ```
        readonly color: string
        ```

        The color associated with the user.

        Example
        ```
        const userColor = user.color;console.log(userColor);
        ```
      sessionId: |-
        ```
        readonly sessionId?: string
        ```

        The session ID of the user.

        Example
        ```
        const sessionId = user.sessionId;console.log(sessionId);
        ```
Variants:
  overview: |-
    Interface Variants
    ==================

    Represents a Variant in Penpot: the grouping of all the VariantComponents that
    belong to the same VariantContainer, together with their shared properties.
    This interface provides attributes and actions that affect the Variant as a
    whole (not a single VariantComponent).

    ```
    interface Variants {
        id: string;
        libraryId: string;
        properties: string[];
        currentValues(property: string): string[];
        removeProperty(pos: number): void;
        renameProperty(pos: number, name: string): void;
        variantComponents(): LibraryComponent[];
        addVariant(): void;
        addProperty(): void;
    }
    ```

    Referenced by: LibraryVariantComponent, VariantContainer
  members:
    Properties:
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier of the variant element. It is the id of the VariantContainer, and all the VariantComponents
        that belong to this variant have an attribute variantId which this is as value.
      libraryId: |-
        ```
        readonly libraryId: string
        ```

        The unique identifier of the library to which the variant belongs.
      properties: |-
        ```
        readonly properties: string[]
        ```

        A list with the names of the properties of the Variant
    Methods:
      currentValues: |-
        ```
        currentValues(property: string): string[]
        ```

        A list of all the values of a property across all the VariantComponents of this Variant

        Parameters

        * property: string

          The name of the property

        Returns string[]
      removeProperty: |-
        ```
        removeProperty(pos: number): void
        ```

        Remove a property of the Variant

        Parameters

        * pos: number

          The position of the property to remove

        Returns void
      renameProperty: |-
        ```
        renameProperty(pos: number, name: string): void
        ```

        Rename a property of the Variant

        Parameters

        * pos: number

          The position of the property to rename
        * name: string

          The new name of the property

        Returns void
      variantComponents: |-
        ```
        variantComponents(): LibraryComponent[]
        ```

        List all the VariantComponents on this Variant.

        Returns LibraryComponent[]
      addVariant: |-
        ```
        addVariant(): void
        ```

        Creates a duplicate of the main VariantComponent of this Variant

        Returns void
      addProperty: |-
        ```
        addProperty(): void
        ```

        Adds a new property to this Variant

        Returns void
Viewport:
  overview: |-
    Interface Viewport
    ==================

    Viewport represents the viewport in the Penpot application.
    It includes the center point, zoom level, and the bounds of the viewport.

    ```
    interface Viewport {
        center: Point;
        zoom: number;
        bounds: Bounds;
        zoomReset(): void;
        zoomToFitAll(): void;
        zoomIntoView(shapes: Shape[]): void;
    }
    ```

    Referenced by: Context, Penpot
  members:
    Properties:
      center: |-
        ```
        center: Point
        ```

        the `center` point of the current viewport. If changed will change the
        viewport position.
      zoom: |-
        ```
        zoom: number
        ```

        the `zoom` level as a number where `1` represents 100%.
      bounds: |-
        ```
        readonly bounds: Bounds
        ```

        the `bounds` are the current coordinates of the viewport.
    Methods:
      zoomReset: |-
        ```
        zoomReset(): void
        ```

        Resets the zoom level.

        Returns void
      zoomToFitAll: |-
        ```
        zoomToFitAll(): void
        ```

        Changes the viewport and zoom so can fit all the current shapes in the page.

        Returns void
      zoomIntoView: |-
        ```
        zoomIntoView(shapes: Shape[]): void
        ```

        Changes the viewport and zoom so all the `shapes` in the argument are
        visible.

        Parameters

        * shapes: Shape[]

        Returns void
Action:
  overview: |-
    Type Alias Action
    =================

    ```
    Action:
        | NavigateTo
        | OpenOverlay
        | ToggleOverlay
        | CloseOverlay
        | PreviousScreen
        | OpenUrl
    ```

    Type for all the possible types of actions in an interaction.

    Referenced by: Board, Boolean, Ellipse, Group, Image, Interaction, Path, Rectangle, ShapeBase, SvgRaw, Text, VariantContainer
  members: {}
Animation:
  overview: |-
    Type Alias Animation
    ====================

    ```
    Animation: Dissolve | Slide | Push
    ```

    Type of all the animations that can be added to an interaction.

    Referenced by: CloseOverlay, NavigateTo, OpenOverlay, OverlayAction, ToggleOverlay
  members: {}
BooleanType:
  overview: |-
    Type Alias BooleanType
    ======================

    ```
    BooleanType: "union" | "difference" | "exclude" | "intersection"
    ```

    Represents the boolean operation types available in Penpot.
    These types define how shapes can be combined or modified using boolean operations.

    Referenced by: Context, Penpot
  members: {}
Bounds:
  overview: |-
    Type Alias Bounds
    =================

    Bounds represents the boundaries of a rectangular area,
    defined by the coordinates of the top-left corner and the dimensions of the rectangle.

    Example
    ```
    const bounds = { x: 50, y: 50, width: 200, height: 100 };console.log(bounds);
    ```

    ```
    type Bounds = {
        x: number;
        y: number;
        width: number;
        height: number;
    }
    ```

    Referenced by: Board, Boolean, Ellipse, Group, Image, Path, Rectangle, ShapeBase, SvgRaw, Text, VariantContainer, Viewport
  members:
    Properties:
      x: |-
        ```
        readonly x: number
        ```

        Top-left x position of the rectangular area defined
      y: |-
        ```
        readonly y: number
        ```

        Top-left y position of the rectangular area defined
      width: |-
        ```
        readonly width: number
        ```

        Width of the represented area
      height: |-
        ```
        readonly height: number
        ```

        Height of the represented area
Gradient:
  overview: |-
    Type Alias Gradient
    ===================

    Represents a gradient configuration in Penpot.
    A gradient can be either linear or radial and includes properties to define its shape, position, and color stops.

    ```
    type Gradient = {
        type: "linear" | "radial";
        startX: number;
        startY: number;
        endX: number;
        endY: number;
        width: number;
        stops: { color: string; opacity?: number; offset: number }[];
    }
    ```

    Referenced by: Color, Fill, LibraryColor, Stroke
  members:
    Properties:
      type: |-
        ```
        type: "linear" | "radial"
        ```

        Specifies the type of gradient.

        * 'linear': A gradient that transitions colors along a straight line.
        * 'radial': A gradient that transitions colors radiating outward from a central point.

        Example
        ```
        const gradient: Gradient = { type: 'linear', startX: 0, startY: 0, endX: 100, endY: 100, width: 100, stops: [{ color: '#FF5733', offset: 0 }] };
        ```
      startX: |-
        ```
        startX: number
        ```

        The X-coordinate of the starting point of the gradient.
      startY: |-
        ```
        startY: number
        ```

        The Y-coordinate of the starting point of the gradient.
      endX: |-
        ```
        endX: number
        ```

        The X-coordinate of the ending point of the gradient.
      endY: |-
        ```
        endY: number
        ```

        The Y-coordinate of the ending point of the gradient.
      width: |-
        ```
        width: number
        ```

        The width of the gradient. For radial gradients, this could be interpreted as the radius.
      stops: |-
        ```
        stops: { color: string; opacity?: number; offset: number }[]
        ```

        An array of color stops that define the gradient.
Guide:
  overview: |-
    Type Alias Guide
    ================

    ```
    Guide: GuideColumn | GuideRow | GuideSquare
    ```

    Represents a board guide in Penpot.
    This type can be one of several specific board guide types: column, row, or square.

    Referenced by: Board, VariantContainer
  members: {}
ImageData:
  overview: |-
    Type Alias ImageData
    ====================

    Represents image data in Penpot.
    This includes properties for defining the image's dimensions, metadata, and aspect ratio handling.

    ```
    type ImageData = {
        name?: string;
        width: number;
        height: number;
        mtype?: string;
        id: string;
        keepAspectRatio?: boolean;
        data(): Promise<Uint8Array<ArrayBufferLike>>;
    }
    ```

    Referenced by: Color, Context, Fill, LibraryColor, Penpot
  members:
    Properties:
      name: |-
        ```
        readonly name?: string
        ```

        The optional name of the image.
      width: |-
        ```
        readonly width: number
        ```

        The width of the image.
      height: |-
        ```
        readonly height: number
        ```

        The height of the image.
      mtype: |-
        ```
        readonly mtype?: string
        ```

        The optional media type of the image (e.g., 'image/png', 'image/jpeg').
      id: |-
        ```
        readonly id: string
        ```

        The unique identifier for the image.
      keepAspectRatio: |-
        ```
        readonly keepAspectRatio?: boolean
        ```

        Whether to keep the aspect ratio of the image when resizing.
        Defaults to false if omitted.
    Methods:
      data: |-
        ```
        data(): Promise<Uint8Array<ArrayBufferLike>>
        ```

        Returns the image data as a byte array.

        Returns Promise<Uint8Array<ArrayBufferLike>>
LibraryContext:
  overview: |-
    Type Alias LibraryContext
    =========================

    Represents the context of Penpot libraries, including both local and connected libraries.
    This type contains references to the local library and an array of connected libraries.

    ```
    type LibraryContext = {
        local: Library;
        connected: Library[];
        availableLibraries(): Promise<LibrarySummary[]>;
        connectLibrary(libraryId: string): Promise<Library>;
    }
    ```

    Referenced by: Context, Penpot
  members:
    Properties:
      local: |-
        ```
        readonly local: Library
        ```

        The local library in the Penpot context.

        Example
        ```
        const localLibrary = libraryContext.local;
        ```
      connected: |-
        ```
        readonly connected: Library[]
        ```

        An array of connected libraries in the Penpot context.

        Example
        ```
        const connectedLibraries = libraryContext.connected;
        ```
    Methods:
      availableLibraries: |-
        ```
        availableLibraries(): Promise<LibrarySummary[]>
        ```

        Retrieves a summary of available libraries that can be connected to.

        Returns Promise<LibrarySummary[]>

        Returns a promise that resolves to an array of `LibrarySummary` objects representing available libraries.

        Example
        ```
        const availableLibraries = await libraryContext.availableLibraries();
        ```
      connectLibrary: |-
        ```
        connectLibrary(libraryId: string): Promise<Library>
        ```

        Connects to a specific library identified by its ID.

        Parameters

        * libraryId: string

          The ID of the library to connect to.

        Returns Promise<Library>

        Returns a promise that resolves to the `Library` object representing the connected library.

        Example
        ```
        const connectedLibrary = await libraryContext.connectLibrary('library-id');
        ```
Point:
  overview: |-
    Type Alias Point
    ================

    Point represents a point in 2D space, typically with x and y coordinates.

    ```
    type Point = {
        x: number;
        y: number;
    }
    ```

    Referenced by: Board, Boolean, CommentThread, Ellipse, Group, Image, OpenOverlay, OverlayAction, Page, Path, Rectangle, ShapeBase, SvgRaw, Text, ToggleOverlay, VariantContainer, Viewport
  members:
    Properties:
      x: |-
        ```
        readonly x: number
        ```
      y: |-
        ```
        readonly y: number
        ```
RulerGuideOrientation:
  overview: |-
    Type Alias RulerGuideOrientation
    ================================

    ```
    RulerGuideOrientation: "horizontal" | "vertical"
    ```

    The possible orientations for a ruler guide: 'horizontal' or 'vertical'.

    Referenced by: Board, Page, RulerGuide, VariantContainer
  members: {}
Shape:
  overview: |-
    Type Alias Shape
    ================

    ```
    Shape:
        | Board
        | Group
        | Boolean
        | Rectangle
        | Path
        | Text
        | Ellipse
        | SvgRaw
        | Image
    ```

    Shape represents a union of various shape types used in the Penpot project.
    This type allows for different shapes to be handled under a single type umbrella.

    Example
    ```
    let shape: Shape;if (penpot.utils.types.isRectangle(shape)) {  console.log(shape.type);}
    ```

    Referenced by: Board, Boolean, Context, ContextGeometryUtils, ContextTypesUtils, Ellipse, EventsMap, FlexLayout, GridLayout, Group, Image, Interaction, Library, LibraryComponent, LibraryTypography, LibraryVariantComponent, OpenOverlay, OverlayAction, Page, Path, Penpot, Rectangle, ShapeBase, SvgRaw, Text, ToggleOverlay, TokenBase, TokenBorderRadius, TokenBorderWidth, TokenColor, TokenDimension, TokenFontFamilies, TokenFontSizes, TokenFontWeights, TokenLetterSpacing, TokenNumber, TokenOpacity, TokenRotation, TokenShadow, TokenSizing, TokenSpacing, TokenTextCase, TokenTextDecoration, TokenTypography, VariantContainer, Viewport
  members: {}
StrokeCap:
  overview: |-
    Type Alias StrokeCap
    ====================

    ```
    StrokeCap:
        | "round"
        | "square"
        | "line-arrow"
        | "triangle-arrow"
        | "square-marker"
        | "circle-marker"
        | "diamond-marker"
    ```

    Represents the cap style of a stroke in Penpot.
    This type defines various styles for the ends of a stroke.

    Referenced by: Stroke
  members: {}
Theme:
  overview: |-
    Type Alias Theme
    ================

    ```
    Theme: "light" | "dark"
    ```

    This type specifies the possible themes: 'light' or 'dark'.

    Referenced by: Context, EventsMap, Penpot
  members: {}
TrackType:
  overview: |-
    Type Alias TrackType
    ====================

    ```
    TrackType: "flex" | "fixed" | "percent" | "auto"
    ```

    Represents the type of track in Penpot.
    This type defines various track types that can be used in layout configurations.

    Referenced by: GridLayout, Track
  members: {}
Trigger:
  overview: |-
    Type Alias Trigger
    ==================

    ```
    Trigger: "click" | "mouse-enter" | "mouse-leave" | "after-delay"
    ```

    Types of triggers defined:

    * `click` triggers when the user uses the mouse to click on a shape
    * `mouse-enter` triggers when the user moves the mouse inside the shape (even if no mouse button is pressed)
    * `mouse-leave` triggers when the user moves the mouse outside the shape.
    * `after-delay` triggers after the `delay` time has passed even if no interaction from the user happens.

    Referenced by: Board, Boolean, Ellipse, Group, Image, Interaction, Path, Rectangle, ShapeBase, SvgRaw, Text, VariantContainer
  members: {}
TokenValueString:
  overview: |-
    Type Alias TokenValueString
    ===========================

    ```
    TokenValueString:
        | TokenShadowValueString
        | TokenTypographyValueString
        | string
        | string[]
        | number
    ```

    Any possible type of value field in a token.

    Token values are always stored as strings, including for numeric token
    types such as `spacing`, `dimension` or `borderRadius` (e.g. `"16"` or
    `"16px"`). A plain `number` is also accepted on input and coerced to its
    string representation.

    Referenced by: TokenSet
  members: {}
Token:
  overview: |-
    Type Alias Token
    ================

    ```
    Token:
        | TokenBorderRadius
        | TokenShadow
        | TokenColor
        | TokenDimension
        | TokenFontFamilies
        | TokenFontSizes
        | TokenFontWeights
        | TokenLetterSpacing
        | TokenNumber
        | TokenOpacity
        | TokenRotation
        | TokenSizing
        | TokenSpacing
        | TokenBorderWidth
        | TokenTextCase
        | TokenTextDecoration
        | TokenTypography
    ```

    The supported Design Tokens in Penpot.

    Referenced by: Board, Boolean, Ellipse, Group, Image, Path, Rectangle, ShapeBase, SvgRaw, Text, TokenBase, TokenBorderRadius, TokenBorderWidth, TokenColor, TokenDimension, TokenFontFamilies, TokenFontSizes, TokenFontWeights, TokenLetterSpacing, TokenNumber, TokenOpacity, TokenRotation, TokenSet, TokenShadow, TokenSizing, TokenSpacing, TokenTextCase, TokenTextDecoration, TokenTypography, VariantContainer
  members: {}
TokenBorderRadiusProps:
  overview: |-
    Type Alias TokenBorderRadiusProps
    =================================

    ```
    TokenBorderRadiusProps:
        | "borderRadiusTopLeft"
        | "borderRadiusTopRight"
        | "borderRadiusBottomRight"
        | "borderRadiusBottomLeft"
    ```

    The properties that a BorderRadius token can be applied to.

    Referenced by: TokenProperty
  members: {}
TokenShadowProps:
  overview: |-
    Type Alias TokenShadowProps
    ===========================

    ```
    TokenShadowProps: "shadow"
    ```

    The properties that a Shadow token can be applied to.

    Referenced by: TokenProperty
  members: {}
TokenColorProps:
  overview: |-
    Type Alias TokenColorProps
    ==========================

    ```
    TokenColorProps: "fill" | "strokeColor"
    ```

    The properties that a Color token can be applied to.

    Referenced by: TokenProperty
  members: {}
TokenDimensionProps:
  overview: |-
    Type Alias TokenDimensionProps
    ==============================

    ```
    TokenDimensionProps: "x" | "y" | "strokeWidth"
    ```

    The properties that a Dimension token can be applied to.

    Referenced by: TokenProperty
  members: {}
TokenFontFamiliesProps:
  overview: |-
    Type Alias TokenFontFamiliesProps
    =================================

    ```
    TokenFontFamiliesProps: "fontFamilies"
    ```

    The properties that a FontFamilies token can be applied to.

    Referenced by: TokenProperty
  members: {}
TokenFontSizesProps:
  overview: |-
    Type Alias TokenFontSizesProps
    ==============================

    ```
    TokenFontSizesProps: "fontSize"
    ```

    The properties that a FontSizes token can be applied to.

    Referenced by: TokenProperty
  members: {}
TokenFontWeightProps:
  overview: |-
    Type Alias TokenFontWeightProps
    ===============================

    ```
    TokenFontWeightProps: "fontWeight"
    ```

    The properties that a FontWeight token can be applied to.

    Referenced by: TokenProperty
  members: {}
TokenLetterSpacingProps:
  overview: |-
    Type Alias TokenLetterSpacingProps
    ==================================

    ```
    TokenLetterSpacingProps: "letterSpacing"
    ```

    The properties that a LetterSpacing token can be applied to.

    Referenced by: TokenProperty
  members: {}
TokenNumberProps:
  overview: |-
    Type Alias TokenNumberProps
    ===========================

    ```
    TokenNumberProps: "rotation"
    ```

    The properties that a Number token can be applied to.

    Referenced by: TokenProperty
  members: {}
TokenOpacityProps:
  overview: |-
    Type Alias TokenOpacityProps
    ============================

    ```
    TokenOpacityProps: "opacity"
    ```

    The properties that an Opacity token can be applied to.

    Referenced by: TokenProperty
  members: {}
TokenSizingProps:
  overview: |-
    Type Alias TokenSizingProps
    ===========================

    ```
    TokenSizingProps:
        | "width"
        | "height"
        | "layoutItemMinW"
        | "layoutItemMaxW"
        | "layoutItemMinH"
        | "layoutItemMaxH"
    ```

    The properties that a Sizing token can be applied to.

    Referenced by: TokenProperty
  members: {}
TokenSpacingProps:
  overview: |-
    Type Alias TokenSpacingProps
    ============================

    ```
    TokenSpacingProps:
        | "rowGap"
        | "columnGap"
        | "paddingLeft"
        | "paddingTop"
        | "paddingRight"
        | "paddingBottom"
        | "marginLeft"
        | "marginTop"
        | "marginRight"
        | "marginBottom"
    ```

    The properties that a Spacing token can be applied to.

    Referenced by: TokenProperty
  members: {}
TokenBorderWidthProps:
  overview: |-
    Type Alias TokenBorderWidthProps
    ================================

    ```
    TokenBorderWidthProps: "strokeWidth"
    ```

    The properties that a BorderWidth token can be applied to.

    Referenced by: TokenProperty
  members: {}
TokenTextCaseProps:
  overview: |-
    Type Alias TokenTextCaseProps
    =============================

    ```
    TokenTextCaseProps: "textCase"
    ```

    The properties that a TextCase token can be applied to.

    Referenced by: TokenProperty
  members: {}
TokenTextDecorationProps:
  overview: |-
    Type Alias TokenTextDecorationProps
    ===================================

    ```
    TokenTextDecorationProps: "textDecoration"
    ```

    The properties that a TextDecoration token can be applied to.

    Referenced by: TokenProperty
  members: {}
TokenTypographyProps:
  overview: |-
    Type Alias TokenTypographyProps
    ===============================

    ```
    TokenTypographyProps: "typography"
    ```

    The properties that a Typography token can be applied to.

    Referenced by: TokenProperty
  members: {}
TokenProperty:
  overview: |-
    Type Alias TokenProperty
    ========================

    ```
    TokenProperty:
        | "all"
        | TokenBorderRadiusProps
        | TokenShadowProps
        | TokenColorProps
        | TokenDimensionProps
        | TokenFontFamiliesProps
        | TokenFontSizesProps
        | TokenFontWeightProps
        | TokenLetterSpacingProps
        | TokenNumberProps
        | TokenOpacityProps
        | TokenSizingProps
        | TokenSpacingProps
        | TokenBorderWidthProps
        | TokenTextCaseProps
        | TokenTextDecorationProps
        | TokenTypographyProps
    ```

    All the properties that a token can be applied to.
    Not always correspond to Shape properties. For example,
    `fill` property applies to `fillColor` of the first fill
    of the shape.

    Referenced by: Board, Boolean, Ellipse, Group, Image, Path, Rectangle, ShapeBase, SvgRaw, Text, TokenBase, TokenBorderRadius, TokenBorderWidth, TokenColor, TokenDimension, TokenFontFamilies, TokenFontSizes, TokenFontWeights, TokenLetterSpacing, TokenNumber, TokenOpacity, TokenRotation, TokenShadow, TokenSizing, TokenSpacing, TokenTextCase, TokenTextDecoration, TokenTypography, VariantContainer
  members: {}
TokenType:
  overview: |-
    Type Alias TokenType
    ====================

    ```
    TokenType:
        | "borderRadius"
        | "shadow"
        | "color"
        | "dimension"
        | "fontFamilies"
        | "fontSizes"
        | "fontWeights"
        | "letterSpacing"
        | "number"
        | "opacity"
        | "rotation"
        | "sizing"
        | "spacing"
        | "borderWidth"
        | "textCase"
        | "textDecoration"
        | "typography"
    ```

    The supported types of Design Tokens in Penpot.

    Referenced by: TokenSet
  members: {}
