framer-plugin - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

dist/index.d.ts

@@ -1,42 +0,8 @@
-import * as valibot from 'valibot';
 import React, { RefObject } from 'react';
 
-type BaseSchema = valibot.BaseSchema;
-type OptionalSchema<Wrapped extends BaseSchema> = valibot.OptionalSchema<Wrapped>;
-type InferSchema<Schema extends BaseSchema> = valibot.Input<Schema>;
-declare const optionalString: OptionalSchema<valibot.StringSchema<string>>;
-type OptionalString = InferSchema<typeof optionalString>;
-
-declare const customCodeLocationSchema: valibot.BaseSchema<"headStart" | "headEnd" | "bodyStart" | "bodyEnd", "headStart" | "headEnd" | "bodyStart" | "bodyEnd"> & {
-    type: "union";
-    options: valibot.LiteralSchema<"headStart" | "headEnd" | "bodyStart" | "bodyEnd", "headStart" | "headEnd" | "bodyStart" | "bodyEnd">[];
-    message: valibot.ErrorMessage | undefined;
-    pipe: valibot.Pipe<"headStart" | "headEnd" | "bodyStart" | "bodyEnd"> | undefined;
-};
-declare const setCustomCodeOptionsSchema: valibot.BaseSchema<{
+type CustomCodeLocation = "headStart" | "headEnd" | "bodyStart" | "bodyEnd";
+interface SetCustomCodeOptions {
     html: string | null;
-    location: "headStart" | "headEnd" | "bodyStart" | "bodyEnd";
-}, {
-    html: string | null;
-    location: "headStart" | "headEnd" | "bodyStart" | "bodyEnd";
-}> & {
-    type: "object";
-    entries: {
-        html: valibot.NullableSchema<valibot.StringSchema<string>, undefined, string | null>;
-        location: valibot.BaseSchema<"headStart" | "headEnd" | "bodyStart" | "bodyEnd", "headStart" | "headEnd" | "bodyStart" | "bodyEnd"> & {
-            type: "union";
-            options: valibot.LiteralSchema<"headStart" | "headEnd" | "bodyStart" | "bodyEnd", "headStart" | "headEnd" | "bodyStart" | "bodyEnd">[];
-            message: valibot.ErrorMessage | undefined;
-            pipe: valibot.Pipe<"headStart" | "headEnd" | "bodyStart" | "bodyEnd"> | undefined;
-        };
-    };
-    rest: undefined;
-    message: valibot.ErrorMessage | undefined;
-    pipe: valibot.Pipe<{
-        html: string | null;
-        location: "headStart" | "headEnd" | "bodyStart" | "bodyEnd";
-    }> | undefined;
-};
-type SetCustomCodeOptions = InferSchema<typeof setCustomCodeOptionsSchema>;
-type CustomCodeLocation = InferSchema<typeof customCodeLocationSchema>;
+    location: CustomCodeLocation;
+}
 type CustomCode = Record<CustomCodeLocation, {
@@ -157,9 +123,7 @@ disabled: boolean;
 }
-declare const nodeTypeSchema: valibot.BaseSchema<"FrameNode" | "TextNode" | "CodeComponentNode" | "SVGNode" | "UnknownNode" | "SmartComponentNode" | "WebPageNode", "FrameNode" | "TextNode" | "CodeComponentNode" | "SVGNode" | "UnknownNode" | "SmartComponentNode" | "WebPageNode"> & {
-    type: "union";
-    options: valibot.LiteralSchema<"FrameNode" | "TextNode" | "CodeComponentNode" | "SVGNode" | "UnknownNode" | "SmartComponentNode" | "WebPageNode", "FrameNode" | "TextNode" | "CodeComponentNode" | "SVGNode" | "UnknownNode" | "SmartComponentNode" | "WebPageNode">[];
-    message: valibot.ErrorMessage | undefined;
-    pipe: valibot.Pipe<"FrameNode" | "TextNode" | "CodeComponentNode" | "SVGNode" | "UnknownNode" | "SmartComponentNode" | "WebPageNode"> | undefined;
-};
-type PluginNodeClass = InferSchema<typeof nodeTypeSchema>;
+declare const createableNodes: readonly ["FrameNode"];
+declare const otherNodes: readonly ["SVGNode", "WebPageNode", "SmartComponentNode", "UnknownNode", "CodeComponentNode", "TextNode"];
+type CreateNodeType = (typeof createableNodes)[number];
+type OtherNodeType = (typeof otherNodes)[number];
+type PluginNodeClass = OtherNodeType | CreateNodeType;
 interface CommonNodeData extends WithId, WithChildren {
@@ -223,2 +187,3 @@ __class: PluginNodeClass;
 declare class TextNode extends NodeMethods implements EditableTextNodeAttributes {
+    #private;
     readonly __class: TextNodeData["__class"];
@@ -246,2 +211,4 @@ readonly name: string | null;
     setAttributes(update: Partial<EditableTextNodeAttributes>): Promise<TextNode | null>;
+    setText(text: string): Promise<void>;
+    getText(): Promise<string | null>;
 }
@@ -355,113 +322,18 @@ interface EditableSVGNodeAttributes extends DrawableNode, WithPosition, WithPins, WithSize, WithSVG, WithRotation {
 
-declare const dragDataPayloadSchema: valibot.UnionSchema<(valibot.ObjectSchema<{
-    type: valibot.LiteralSchema<"svg", "svg">;
-} & {
-    svg: valibot.StringSchema<string>;
-    name: valibot.BaseSchema<string | undefined, string | undefined> & {
-        type: "optional";
-        wrapped: valibot.StringSchema<string>;
-        default: undefined;
-    };
-}, undefined, {
-    svg: string;
+type SvgDragData = {
     type: "svg";
-    name?: string | undefined;
-}> | (valibot.BaseSchema<{
-    image: string;
+} & SVGData;
+interface ImageDragData {
     type: "image";
-    name?: string | undefined;
-    previewImage?: string | undefined;
-}, {
     image: string;
-    type: "image";
-    name?: string | undefined;
-    previewImage?: string | undefined;
-}> & {
-    type: "object";
-    entries: {
-        type: valibot.LiteralSchema<"image", "image">;
-        image: valibot.StringSchema<string>;
-        name: valibot.BaseSchema<string | undefined, string | undefined> & {
-            type: "optional";
-            wrapped: valibot.StringSchema<string>;
-            default: undefined;
-        };
-        previewImage: valibot.BaseSchema<string | undefined, string | undefined> & {
-            type: "optional";
-            wrapped: valibot.StringSchema<string>;
-            default: undefined;
-        };
-    };
-    rest: undefined;
-    message: valibot.ErrorMessage | undefined;
-    pipe: valibot.Pipe<{
-        image: string;
-        type: "image";
-        name?: string | undefined;
-        previewImage?: string | undefined;
-    }> | undefined;
-}) | (valibot.BaseSchema<{
+    name?: string;
+    previewImage?: string;
+}
+interface ComponentDragData {
     type: "component";
     moduleUrl: string;
-    controlAttributes?: {
-        [x: string]: unknown;
-    } | undefined;
-    attributes?: Partial<EditableCodeComponentNodeAttributes> | undefined;
-}, {
-    type: "component";
-    moduleUrl: string;
-    controlAttributes?: {
-        [x: string]: unknown;
-    } | undefined;
-    attributes?: Partial<EditableCodeComponentNodeAttributes> | undefined;
-}> & {
-    type: "object";
-    entries: {
-        type: valibot.LiteralSchema<"component", "component">;
-        moduleUrl: valibot.StringSchema<string>;
-        attributes: valibot.BaseSchema<Partial<EditableCodeComponentNodeAttributes> | undefined, Partial<EditableCodeComponentNodeAttributes> | undefined> & {
-            type: "optional";
-            wrapped: valibot.SpecialSchema<Partial<EditableCodeComponentNodeAttributes>, Partial<EditableCodeComponentNodeAttributes>>;
-            default: undefined;
-        };
-        controlAttributes: valibot.BaseSchema<{
-            [x: string]: unknown;
-        } | undefined, {
-            [x: string]: unknown;
-        } | undefined> & {
-            type: "optional";
-            wrapped: valibot.RecordSchema<valibot.StringSchema<string>, valibot.UnknownSchema<unknown>, {
-                [x: string]: unknown;
-            }>;
-            default: undefined;
-        };
-    };
-    rest: undefined;
-    message: valibot.ErrorMessage | undefined;
-    pipe: valibot.Pipe<{
-        type: "component";
-        moduleUrl: string;
-        controlAttributes?: {
-            [x: string]: unknown;
-        } | undefined;
-        attributes?: Partial<EditableCodeComponentNodeAttributes> | undefined;
-    }> | undefined;
-}))[], {
-    svg: string;
-    type: "svg";
-    name?: string | undefined;
-} | {
-    image: string;
-    type: "image";
-    name?: string | undefined;
-    previewImage?: string | undefined;
-} | {
-    type: "component";
-    moduleUrl: string;
-    controlAttributes?: {
-        [x: string]: unknown;
-    } | undefined;
-    attributes?: Partial<EditableCodeComponentNodeAttributes> | undefined;
-}>;
-type DragData = InferSchema<typeof dragDataPayloadSchema>;
+    attributes?: Partial<EditableCodeComponentNodeAttributes>;
+    controlAttributes?: Record<string, unknown>;
+}
+type DragData = SvgDragData | ImageDragData | ComponentDragData;
 
@@ -480,39 +352,8 @@ type OptimizationStatus = "optimizing" | "optimized" | "error";
 
-declare const modeSchema: valibot.BaseSchema<"default" | "image" | "editImage", "default" | "image" | "editImage"> & {
-    type: "union";
-    options: valibot.LiteralSchema<"default" | "image" | "editImage", "default" | "image" | "editImage">[];
-    message: valibot.ErrorMessage | undefined;
-    pipe: valibot.Pipe<"default" | "image" | "editImage"> | undefined;
-};
-type Mode = InferSchema<typeof modeSchema>;
+type Mode = "default" | "image" | "editImage";
 
-declare const textOptionsSchema: valibot.BaseSchema<{
-    tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
-} | undefined, {
-    tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
-} | undefined> & {
-    type: "optional";
-    wrapped: valibot.BaseSchema<{
-        tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
-    }, {
-        tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
-    }> & {
-        type: "object";
-        entries: {
-            tag: valibot.BaseSchema<"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span", "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span"> & {
-                type: "union";
-                options: valibot.LiteralSchema<"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span", "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span">[];
-                message: valibot.ErrorMessage | undefined;
-                pipe: valibot.Pipe<"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span"> | undefined;
-            };
-        };
-        rest: undefined;
-        message: valibot.ErrorMessage | undefined;
-        pipe: valibot.Pipe<{
-            tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
-        }> | undefined;
-    };
-    default: undefined;
-};
-type TextOptions = InferSchema<typeof textOptionsSchema>;
+type TextNodeTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
+interface AddTextOptions {
+    tag: TextNodeTag;
+}
 
@@ -565,4 +406,4 @@ type Unsubscribe = VoidFunction;
     getText(): Promise<string | null>;
-    setText(text: string, options?: TextOptions): Promise<void>;
-    addText(text: string, options?: TextOptions): Promise<void>;
+    setText(text: string): Promise<void>;
+    addText(text: string, options?: AddTextOptions): Promise<void>;
     setCustomCode(options: SetCustomCodeOptions): Promise<void>;
@@ -574,135 +415,22 @@ getCustomCode(): Promise<CustomCode>;
 }
-declare const UIOptionsSchema: valibot.BaseSchema<{
-    position?: "center" | "top left" | "bottom left" | "top right" | "bottom right" | undefined;
-    width?: number | undefined;
-    height?: number | undefined;
-    minWidth?: number | undefined;
-    minHeight?: number | undefined;
-    title?: string | undefined;
-    resizable?: boolean | "width" | "height" | undefined;
-} | undefined, {
-    position?: "center" | "top left" | "bottom left" | "top right" | "bottom right" | undefined;
-    width?: number | undefined;
-    height?: number | undefined;
-    minWidth?: number | undefined;
-    minHeight?: number | undefined;
-    title?: string | undefined;
-    resizable?: boolean | "width" | "height" | undefined;
-} | undefined> & {
-    type: "optional";
-    wrapped: valibot.BaseSchema<{
-        position?: "center" | "top left" | "bottom left" | "top right" | "bottom right" | undefined;
-        width?: number | undefined;
-        height?: number | undefined;
-        minWidth?: number | undefined;
-        minHeight?: number | undefined;
-        title?: string | undefined;
-        resizable?: boolean | "width" | "height" | undefined;
-    }, {
-        position?: "center" | "top left" | "bottom left" | "top right" | "bottom right" | undefined;
-        width?: number | undefined;
-        height?: number | undefined;
-        minWidth?: number | undefined;
-        minHeight?: number | undefined;
-        title?: string | undefined;
-        resizable?: boolean | "width" | "height" | undefined;
-    }> & {
-        type: "object";
-        entries: {
-            /** The preferred UI width. */
-            width: valibot.BaseSchema<number | undefined, number | undefined> & {
-                type: "optional";
-                wrapped: valibot.NumberSchema<number>;
-                default: undefined;
-            };
-            /** The preferred UI height. */
-            height: valibot.BaseSchema<number | undefined, number | undefined> & {
-                type: "optional";
-                wrapped: valibot.NumberSchema<number>;
-                default: undefined;
-            };
-            /** The initial window position, defaults to top left. */
-            position: valibot.BaseSchema<"center" | "top left" | "bottom left" | "top right" | "bottom right" | undefined, "center" | "top left" | "bottom left" | "top right" | "bottom right" | undefined> & {
-                type: "optional";
-                wrapped: valibot.BaseSchema<"center" | "top left" | "bottom left" | "top right" | "bottom right", "center" | "top left" | "bottom left" | "top right" | "bottom right"> & {
-                    type: "union";
-                    options: valibot.LiteralSchema<"center" | "top left" | "bottom left" | "top right" | "bottom right", "center" | "top left" | "bottom left" | "top right" | "bottom right">[];
-                    message: valibot.ErrorMessage | undefined;
-                    pipe: valibot.Pipe<"center" | "top left" | "bottom left" | "top right" | "bottom right"> | undefined;
-                };
-                default: undefined;
-            };
-            /** The title of the UI. Defaults to the plugin name. */
-            title: valibot.BaseSchema<string | undefined, string | undefined> & {
-                type: "optional";
-                wrapped: valibot.StringSchema<string>;
-                default: undefined;
-            };
-            /** Whether the UI is resizable. */
-            resizable: valibot.BaseSchema<boolean | "width" | "height" | undefined, boolean | "width" | "height" | undefined> & {
-                type: "optional";
-                wrapped: valibot.UnionSchema<(valibot.LiteralSchema<true, true> | valibot.LiteralSchema<false, false> | valibot.LiteralSchema<"width", "width"> | valibot.LiteralSchema<"height", "height">)[], boolean | "width" | "height">;
-                default: undefined;
-            };
-            /** Minimum UI width. */
-            minWidth: valibot.BaseSchema<number | undefined, number | undefined> & {
-                type: "optional";
-                wrapped: valibot.NumberSchema<number>;
-                default: undefined;
-            };
-            /** Minimum UI height. */
-            minHeight: valibot.BaseSchema<number | undefined, number | undefined> & {
-                type: "optional";
-                wrapped: valibot.NumberSchema<number>;
-                default: undefined;
-            };
-        };
-        rest: undefined;
-        message: valibot.ErrorMessage | undefined;
-        pipe: valibot.Pipe<{
-            position?: "center" | "top left" | "bottom left" | "top right" | "bottom right" | undefined;
-            width?: number | undefined;
-            height?: number | undefined;
-            minWidth?: number | undefined;
-            minHeight?: number | undefined;
-            title?: string | undefined;
-            resizable?: boolean | "width" | "height" | undefined;
-        }> | undefined;
-    };
-    default: undefined;
-};
-type UIOptions = InferSchema<typeof UIOptionsSchema>;
-declare const closePluginOptionsSchema: valibot.BaseSchema<{
-    variant?: "info" | "success" | "error" | undefined;
-} | undefined, {
-    variant?: "info" | "success" | "error" | undefined;
-} | undefined> & {
-    type: "optional";
-    wrapped: valibot.BaseSchema<{
-        variant?: "info" | "success" | "error" | undefined;
-    }, {
-        variant?: "info" | "success" | "error" | undefined;
-    }> & {
-        type: "object";
-        entries: {
-            variant: valibot.BaseSchema<"info" | "success" | "error" | undefined, "info" | "success" | "error" | undefined> & {
-                type: "optional";
-                wrapped: valibot.BaseSchema<"info" | "success" | "error", "info" | "success" | "error"> & {
-                    type: "union";
-                    options: valibot.LiteralSchema<"info" | "success" | "error", "info" | "success" | "error">[];
-                    message: valibot.ErrorMessage | undefined;
-                    pipe: valibot.Pipe<"info" | "success" | "error"> | undefined;
-                };
-                default: undefined;
-            };
-        };
-        rest: undefined;
-        message: valibot.ErrorMessage | undefined;
-        pipe: valibot.Pipe<{
-            variant?: "info" | "success" | "error" | undefined;
-        }> | undefined;
-    };
-    default: undefined;
-};
-type ClosePluginOptions = InferSchema<typeof closePluginOptionsSchema>;
+interface UIOptions {
+    /** The preferred UI width. */
+    width?: number;
+    /** The preferred UI height. */
+    height?: number;
+    /** The initial window position, defaults to top left. */
+    position?: "center" | "top left" | "bottom left" | "top right" | "bottom right";
+    /** The title of the UI. Defaults to the plugin name. */
+    title?: string;
+    /** Whether the UI is resizable. */
+    resizable?: true | false | "width" | "height";
+    /** Minimum UI width. */
+    minWidth?: number;
+    /** Minimum UI height. */
+    minHeight?: number;
+}
+type NotificationVariant = "info" | "success" | "error";
+interface ClosePluginOptions {
+    variant?: NotificationVariant;
+}
 interface User {
@@ -718,4 +446,6 @@ name: string;
     /** Stop the plugin. */
-    closePlugin(message?: OptionalString, options?: ClosePluginOptions): Promise<void>;
+    closePlugin(message?: string, options?: ClosePluginOptions): Promise<void>;
+    /** Get the current mode. A plugin can launch in a special mode where only a subset of the API is allowed. */
     getMode(): Promise<Mode>;
+    /** Get the current user info. */
     getCurrentUser(): Promise<User>;
@@ -754,4 +484,5 @@ /** Get the current selection. */
     setParent: (nodeId: NodeId, parentId: NodeId, index?: number) => Promise<void>;
-    /** Upload an image, and either assign it to the selection, or insert on the canvas. */
+    /** Upload an image, and insert on the canvas. */
     addImage: (image: NamedImageAssetInput | File) => Promise<void>;
+    /** Upload an image, and set on the selected node. */
     setImage: (image: NamedImageAssetInput | File) => Promise<void>;
@@ -766,24 +497,16 @@ /** Add multiple images, replacing the selected images, or insert on the canvas. */
     getImage(): Promise<ImageAsset | null>;
-    /**
-     * Get plaintext of the current selection or null if there is no text.
-     */
+    /** Subscribe to single image selection changes. */
+    subscribeToImage: (imageUpdate: (image: ImageAsset | null) => void) => Unsubscribe;
+    /** Get plaintext of the current selection or null if there is no text. */
     getText(): Promise<string | null>;
-    /**
-     * Set the text of the current selection or insert it onto the canvas.
-     */
-    setText(text: string, options?: TextOptions): Promise<void>;
-    /**
-     * Add a new text node to the canvas.
-     */
-    addText(text: string, options?: TextOptions): Promise<void>;
-    /**
-     * Subscribe to the current text selection.
-     */
+    /** Set the text of the current selection or insert it onto the canvas. */
+    setText(text: string): Promise<void>;
+    /** Add a new text node to the canvas. */
+    addText(text: string, options?: AddTextOptions): Promise<void>;
+    /** Subscribe to the current text selection. */
     subscribeToText: (update: (text: string | null) => void) => Unsubscribe;
-    /**
-     * Subscribe to single image selection changes.
-     */
-    subscribeToImage: (imageUpdate: (image: ImageAsset | null) => void) => Unsubscribe;
     /** Add an SVG, replacing the selected SVG, or insert on the canvas. */
     addSVG: (svg: SVGData) => Promise<void>;
+    /** Add a code component by module URL. */
+    addComponent: (moduleUrl: string, attributes?: Partial<EditableCodeComponentNodeAttributes>, controlAttributes?: ControlAttributes) => Promise<CodeComponentNode | null>;
     /**
@@ -794,12 +517,6 @@ * Set Custom HTML to be loaded in the document.
     setCustomCode: (options: SetCustomCodeOptions) => Promise<void>;
-    /**
-     * Get custom HTML settings set by the plugin.
-     */
+    /** Get custom HTML settings set by the plugin. */
     getCustomCode: () => Promise<CustomCode>;
-    /**
-     * Subscribe to custom HTML changes set by the plugin.
-     */
+    /** Subscribe to custom HTML changes set by the plugin. */
     subscribeToCustomCode: (callback: (customCode: CustomCode) => void) => Unsubscribe;
-    /** Add a code component by module URL. */
-    addComponent: (moduleUrl: string, attributes?: Partial<EditableCodeComponentNodeAttributes>, controlAttributes?: ControlAttributes) => Promise<CodeComponentNode | null>;
     /**
@@ -814,18 +531,5 @@ * Allow any HTML element to become draggable. Different types of drag data can be dropped onto
 type ImageAssetId = string;
-declare const imageAssetIdentifierSchema: valibot.BaseSchema<{
+interface ImageAssetIdentifier {
     id: string;
-}, {
-    id: string;
-}> & {
-    type: "object";
-    entries: {
-        id: valibot.StringSchema<string>;
-    };
-    rest: undefined;
-    message: valibot.ErrorMessage | undefined;
-    pipe: valibot.Pipe<{
-        id: string;
-    }> | undefined;
-};
-type ImageAssetIdentifier = InferSchema<typeof imageAssetIdentifierSchema>;
+}
 interface AssetData {
@@ -861,74 +565,21 @@ /** Something that can be rendered within the iFrame. Always the original size of the image */
      */
-    getData(): Promise<BytesDataTransfer>;
+    getData(): Promise<BytesData>;
     loadBitmap(): Promise<ImageBitmap>;
     loadImage(): Promise<HTMLImageElement>;
 }
-type ImageAssetInput = string | File | BytesDataTransfer;
+type ImageAssetInput = string | File | BytesData;
+interface ImageAssetInputOptions {
+    name?: string;
+}
 interface NamedImageAssetInput extends ImageAssetInputOptions {
     image: ImageAssetInput;
 }
-declare const nameOptionsSchema: valibot.BaseSchema<{
-    name?: string | undefined;
-}, {
-    name?: string | undefined;
-}> & {
-    type: "object";
-    entries: {
-        name: valibot.BaseSchema<string | undefined, string | undefined> & {
-            type: "optional";
-            wrapped: valibot.StringSchema<string>;
-            default: undefined;
-        };
-    };
-    rest: undefined;
-    message: valibot.ErrorMessage | undefined;
-    pipe: valibot.Pipe<{
-        name?: string | undefined;
-    }> | undefined;
-};
-declare const bytesSchema: valibot.BaseSchema<{
+interface BytesData {
     bytes: Uint8Array;
     mimeType: string;
-}, {
-    bytes: Uint8Array;
-    mimeType: string;
-}> & {
-    type: "object";
-    entries: {
-        bytes: valibot.InstanceSchema<Uint8ArrayConstructor, Uint8Array>;
-        mimeType: valibot.StringSchema<string>;
-    };
-    rest: undefined;
-    message: valibot.ErrorMessage | undefined;
-    pipe: valibot.Pipe<{
-        bytes: Uint8Array;
-        mimeType: string;
-    }> | undefined;
-};
-type ImageAssetInputOptions = InferSchema<typeof nameOptionsSchema>;
-type BytesDataTransfer = InferSchema<typeof bytesSchema>;
-declare const svgDataSchema: valibot.BaseSchema<{
+}
+interface SVGData {
     svg: string;
-    name?: string | undefined;
-}, {
-    svg: string;
-    name?: string | undefined;
-}> & {
-    type: "object";
-    entries: {
-        svg: valibot.StringSchema<string>;
-        name: valibot.BaseSchema<string | undefined, string | undefined> & {
-            type: "optional";
-            wrapped: valibot.StringSchema<string>;
-            default: undefined;
-        };
-    };
-    rest: undefined;
-    message: valibot.ErrorMessage | undefined;
-    pipe: valibot.Pipe<{
-        svg: string;
-        name?: string | undefined;
-    }> | undefined;
-};
-type SVGData = InferSchema<typeof svgDataSchema>;
+    name?: string;
+}
 
@@ -935,0 +586,0 @@ interface DraggableProps {

dist/index.js

@@ -1,4 +0,4 @@
-var ft=Object.defineProperty;var bt=(n,t,e)=>t in n?ft(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var i=(n,t,e)=>(bt(n,typeof t!="symbol"?t+"":t,e),e),Re=(n,t,e)=>{if(!t.has(n))throw TypeError("Cannot "+e)};var d=(n,t,e)=>(Re(n,t,"read from private field"),e?e.call(n):t.get(n)),h=(n,t,e)=>{if(t.has(n))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(n):t.set(n,e)},v=(n,t,e,o)=>(Re(n,t,"write to private field"),o?o.call(n,e):t.set(n,e),e);var De=(n,t,e,o)=>({set _(r){v(n,t,r,e)},get _(){return d(n,t,o)}});import _ from"react";import{useCallback as jt,useEffect as Kt,useRef as Xt}from"react";import{intersect as Pt}from"valibot";var yt="invoke";function ee(n){return yt in n}function x(n){return n===null}function ge(n){return n===!0||n===!1}function c(n){return typeof n=="string"}function te(n){return typeof n=="number"&&Number.isFinite(n)}function ne(n){return typeof n=="function"}function g(n){return typeof n=="object"&&n!==null&&!Array.isArray(n)}function he(n){return Array.isArray(n)}function oe(n,t){throw t||new Error(n?`Unexpected value: ${n}`:"Application entered invalid state")}function u(n,...t){if(n)return;let e=Error("Assertion Error"+(t.length>0?": "+t.join(" "):""));if(e.stack)try{let o=e.stack.split(`
+var je=Object.defineProperty;var Xe=(n,t,e)=>t in n?je(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var i=(n,t,e)=>(Xe(n,typeof t!="symbol"?t+"":t,e),e),be=(n,t,e)=>{if(!t.has(n))throw TypeError("Cannot "+e)};var a=(n,t,e)=>(be(n,t,"read from private field"),e?e.call(n):t.get(n)),p=(n,t,e)=>{if(t.has(n))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(n):t.set(n,e)},b=(n,t,e,o)=>(be(n,t,"write to private field"),o?o.call(n,e):t.set(n,e),e);var ye=(n,t,e,o)=>({set _(s){b(n,t,s,e)},get _(){return a(n,t,o)}});import M from"react";import{useCallback as ut,useEffect as mt,useRef as ct}from"react";var Ye="invoke";function T(n){return Ye in n}function y(n){return n===null}function oe(n){return n===!0||n===!1}function u(n){return typeof n=="string"}function j(n){return typeof n=="number"&&Number.isFinite(n)}function X(n){return typeof n=="function"}function c(n){return typeof n=="object"&&n!==null&&!Array.isArray(n)}function ie(n){return Array.isArray(n)}function Y(n,t){throw t||new Error(n?`Unexpected value: ${n}`:"Application entered invalid state")}function l(n,...t){if(n)return;let e=Error("Assertion Error"+(t.length>0?": "+t.join(" "):""));if(e.stack)try{let o=e.stack.split(`
 `);o[1]?.includes("assert")?(o.splice(1,1),e.stack=o.join(`
 `)):o[0]?.includes("assert")&&(o.splice(0,1),e.stack=o.join(`
-`))}catch{}throw e}import*as a from"valibot";function I(n){return a.optional(n)}var we=a.boolean(),M=a.number(),j=I(M),S=a.string(),k=I(S);function m(n){return a.object(n)}function fe(n){return I(m(n))}function W(...n){return a.union(n.map(t=>a.literal(t)))}function Ee(...n){return I(a.union(n.map(t=>a.literal(t))))}var Le=n=>a.instance(n),T=a.merge;var ie=a.record,re=a.unknown();var F=a.union,f=a.literal,Me=a.special,Fe=a.is;var un=m({id:S}),xt="ImageAsset",It="__class";function se(n){return g(n)?n[It]===xt:!1}var R,K,p=class{constructor(t,e){i(this,"id");i(this,"url");i(this,"thumbnailUrl");h(this,R,void 0);h(this,K,void 0);u(ee(e)),this.url=t.url,v(this,K,e),this.id=t.id,this.thumbnailUrl=t.thumbnailUrl}async measure(){return Wt(this.url)}async getData(){if(d(this,R)&&d(this,R).bytes.length>0)return d(this,R);let t=await d(this,K).invoke("getImageData",{id:this.id});if(!t)throw new Error("Failed to load image data");return v(this,R,t),t}async loadBitmap(){let{mimeType:t,bytes:e}=await this.getData(),o=new Blob([e],{type:t});return createImageBitmap(o)}async loadImage(){let t=await this.getData(),e=URL.createObjectURL(new Blob([t.bytes]));return new Promise((o,r)=>{let s=new Image;s.onload=()=>o(s),s.onerror=()=>r(),s.src=e})}};R=new WeakMap,K=new WeakMap;var Nt=m({name:k}),Ve=m({bytes:Le(Uint8Array),mimeType:S}),vt=T([Ve,m({type:f("bytes")})]),St=m({type:f("url"),url:S}),At=F([vt,St]),mn=Pt([Nt,At]),Oe=m({svg:S,name:k});function V(n){return n.type==="bytes"?[n.bytes.buffer]:[]}async function X(n){return Fe(Ve,n)?{type:"bytes",...n}:n instanceof File?Tt(n):{type:"url",url:n}}function Ct(n,t){return{...n,name:t}}function be(n){return Promise.all(n.map(async t=>{let e=await X(t.image);return Ct(e,t.name)}))}function kt(n){if(!n.startsWith("image/"))throw new Error(`Unsupported mime type: ${n}`)}async function Tt(n){return new Promise((t,e)=>{let o=new FileReader;o.onload=r=>{let s=n.type;kt(n.type);let l=r.target?.result;if(!l||!(l instanceof ArrayBuffer)){e(new Error("Failed to read file, arrayBuffer is null"));return}let y=new Uint8Array(l);t({bytes:y,mimeType:s,type:"bytes"})},o.onerror=r=>{e(r)},o.readAsArrayBuffer(n)})}async function Wt(n){let t=n instanceof File,e=t?URL.createObjectURL(n):n,o=new Image;return o.crossOrigin="anonymous",o.src=e,await o.decode().finally(()=>{t&&URL.revokeObjectURL(e)}),{height:o.height,width:o.width}}function D(n){if(Dt(n))return wt(n);if(he(n))return n.map(D);if(g(n)){let t={};for(let e in n)t[e]=D(n[e]);return t}return n}function Ue(n,t){let e={};for(let o in n)e[o]=ye(n[o],t);return e}function ye(n,t){if(Rt(n)&&n.__class==="ImageAsset")return new p(n,t);if(g(n)){let e={};for(let o in n)e[o]=ye(n[o],t);return e}return he(n)?n.map(e=>ye(e,t)):n}function Rt(n){return!!se(n)}function Dt(n){return n instanceof p}function wt(n){if(n instanceof p)return{__class:"ImageAsset",id:n.id,thumbnailUrl:n.thumbnailUrl,url:n.url};oe(n)}var Et=(()=>{let n=null;return{disableUntilMouseUp:()=>{if(n)return;n=document.createElement("style"),n.textContent="* { pointer-events: none !important; user-select: none !important; -webkit-user-select: none !important; }",document.head.appendChild(n);let t=()=>{n&&(document.head.removeChild(n),n=null,r())},e=s=>{s.buttons>0&&s.buttons&1||t()},o=()=>{t()};window.addEventListener("pointerup",e,!0),window.addEventListener("pointermove",e,!0),window.addEventListener("blur",o);function r(){window.removeEventListener("pointerup",e,!0),window.removeEventListener("pointermove",e,!0),window.removeEventListener("blur",o)}}}})(),Be=5,Pe=m({dragSessionId:S}),Lt=T([m({type:f("svg")}),Oe]),Mt=m({type:f("image"),image:S,name:k,previewImage:k}),Ft=m({type:f("component"),moduleUrl:S,attributes:I(Me(g)),controlAttributes:I(ie(re))}),In=F([Lt,Mt,Ft]),He=m({x:M,y:M}),_e=m({width:M,height:M}),Vt=T([He,_e]),ze=m({mouse:He}),Ot=m({elementRect:Vt,svgSize:I(_e)}),Nn=T([Pe,Ot,ze]),vn=T([Pe,ze]),Sn=T([Pe,m({cancelled:we})]),Ut=(()=>{let n=1;return{next:()=>`drag-${n++}`}})();function Ge(n,t,e){u(ee(n));let o=document.body.style.cursor,r={type:"idle"},s=document.body,l=P=>{if(r.type==="idle")return;let{dragSessionId:C}=r.dragStart;r.type==="dragging"&&n.invoke("onDragEnd",{...P,dragSessionId:C}),r={type:"idle"},ht()},y=P=>{if(r.type==="idle")return;let{dragSessionId:C}=r.dragStart;if(!(P.buttons>0&&!!(P.buttons&1))){l({cancelled:!1});return}let{clientX:z,clientY:G}=P;if(r.type==="pointerDown"){let L=z-r.dragStart.mouse.x,Te=G-r.dragStart.mouse.y;if(Math.abs(L)<Be&&Math.abs(Te)<Be)return;r={type:"dragging",dragStart:r.dragStart},n.invoke("onDragStart",r.dragStart),document.getSelection()?.empty(),Et.disableUntilMouseUp()}s.setPointerCapture(P.pointerId);let pe={x:z,y:G};n.invoke("onDrag",{dragSessionId:C,mouse:pe}).then(L=>{r.type==="dragging"&&(document.body.style.cursor=L??"")})},Se=P=>{P.key==="Escape"&&l({cancelled:!0})},Ae=()=>{l({cancelled:!0})},Ce=P=>{l({cancelled:!0});let C=t.getBoundingClientRect(),ke={x:C.x,y:C.y,width:C.width,height:C.height},z,G=t.querySelectorAll("svg");if(G.length===1){let We=G.item(0).getBoundingClientRect();z={width:We.width,height:We.height}}let pe={x:P.clientX,y:P.clientY},L=Ut.next();r={type:"pointerDown",dragStart:{dragSessionId:L,elementRect:ke,svgSize:z,mouse:pe}},n.invoke("setDragData",L,e()),s.addEventListener("pointermove",y,!0),s.addEventListener("pointerup",y,!0),window.addEventListener("keydown",Se,!0),window.addEventListener("blur",Ae)};t.addEventListener("pointerdown",Ce);function ht(){document.body.style.cursor=o,s.removeEventListener("pointermove",y,!0),s.removeEventListener("pointerup",y,!0),window.removeEventListener("keydown",Se,!0),window.removeEventListener("blur",Ae)}return()=>{t.removeEventListener("pointerdown",Ce),l({cancelled:!0})}}var Tn=W("default","image","editImage");var Bt={methodResponse:!0,pluginReadyResponse:!0,subscriptionMessage:!0};function Ht(n){return c(n)&&n in Bt}function je(n){return g(n)&&Ht(n["type"])}var Ke=["FrameNode"],_t=["SVGNode","WebPageNode","SmartComponentNode","UnknownNode","CodeComponentNode","TextNode"],Mn=W(...Ke),Fn=W(...Ke,..._t),Vn=ie(re),N,A=class{constructor(t,e){i(this,"id");h(this,N,void 0);u(c(t.id),"Node must have an id"),this.id=t.id,v(this,N,e)}remove(){return d(this,N).removeNode(this.id)}select(){return d(this,N).setSelection([this.id])}clone(){return d(this,N).cloneNode(this.id)}setAttributes(t){return d(this,N).setAttributes(this.id,t)}getRect(){return d(this,N).getRect(this.id)}getParent(){return d(this,N).getParent(this.id)}getChildren(){return ae(this)?Promise.resolve([]):d(this,N).getChildren(this.id)}async*walk(){if(yield this,!ae(this))for(let t of await this.getChildren())yield*await t.walk()}};N=new WeakMap;var w=class extends A{constructor(e,o){super(e,o);i(this,"__class","FrameNode");i(this,"name");i(this,"visible");i(this,"locked");i(this,"backgroundColor");i(this,"backgroundImage");i(this,"backgroundGradient");i(this,"rotation");i(this,"opacity");i(this,"borderRadius");i(this,"position");i(this,"top");i(this,"right");i(this,"bottom");i(this,"left");i(this,"centerX");i(this,"centerY");i(this,"width");i(this,"height");i(this,"maxWidth");i(this,"minWidth");i(this,"maxHeight");i(this,"minHeight");i(this,"aspectRatio");u(e.__class==="FrameNode","FrameNode must have a __class property"),this.name=e.name??null,this.visible=e.visible??!0,this.locked=e.locked??!1,this.backgroundColor=e.backgroundColor??null,this.backgroundImage=e.backgroundImage?new p(e.backgroundImage,o):null,this.backgroundGradient=e.backgroundGradient??null,this.rotation=e.rotation??0,this.opacity=e.opacity??1,this.borderRadius=e.borderRadius??null,u(e.position,"Must have a position"),this.position=e.position,this.left=e.left??null,this.right=e.right??null,this.top=e.top??null,this.bottom=e.bottom??null,this.centerX=e.centerX??null,this.centerY=e.centerY??null,this.width=e.width??null,this.height=e.height??null,this.maxWidth=e.maxWidth??null,this.minWidth=e.minWidth??null,this.maxHeight=e.maxHeight??null,this.minHeight=e.minHeight??null,this.aspectRatio=e.aspectRatio??null}clone(){return super.clone()}setAttributes(e){return super.setAttributes(e)}},Y=class extends A{constructor(e,o){super(e,o);i(this,"__class","TextNode");i(this,"name");i(this,"visible");i(this,"locked");i(this,"rotation");i(this,"opacity");i(this,"position");i(this,"top");i(this,"right");i(this,"bottom");i(this,"left");i(this,"centerX");i(this,"centerY");i(this,"width");i(this,"height");i(this,"maxWidth");i(this,"minWidth");i(this,"maxHeight");i(this,"minHeight");this.name=e.name??null,this.visible=e.visible??!0,this.locked=e.locked??!1,this.rotation=e.rotation??0,this.opacity=e.opacity??1,u(e.position,"Must have a position"),this.position=e.position,this.left=e.left??null,this.right=e.right??null,this.top=e.top??null,this.bottom=e.bottom??null,this.centerX=e.centerX??null,this.centerY=e.centerY??null,this.width=e.width??null,this.height=e.height??null,this.maxWidth=e.maxWidth??null,this.minWidth=e.minWidth??null,this.maxHeight=e.maxHeight??null,this.minHeight=e.minHeight??null}clone(){return super.clone()}setAttributes(e){return super.setAttributes(e)}},$=class extends A{constructor(e,o){super(e,o);i(this,"__class","SVGNode");i(this,"name");i(this,"visible");i(this,"locked");i(this,"svg");i(this,"rotation");i(this,"opacity");i(this,"position");i(this,"top");i(this,"right");i(this,"bottom");i(this,"left");i(this,"centerX");i(this,"centerY");i(this,"width");i(this,"height");u(e.svg,"SVG node must have a non-empty SVG string"),this.name=e.name??null,this.visible=e.visible??!0,this.locked=e.locked??!1,this.svg=e.svg,this.rotation=e.rotation??0,this.opacity=e.opacity??1,u(e.position,"Must have a position"),this.position=e.position??null,this.left=e.left??null,this.right=e.right??null,this.top=e.top??null,this.bottom=e.bottom??null,this.centerX=e.centerX??null,this.centerY=e.centerY??null,this.width=e.width??null,this.height=e.height??null}clone(){return super.clone()}setAttributes(e){return super.setAttributes(e)}},q=class extends A{constructor(e,o){super(e,o);i(this,"__class","CodeComponentNode");i(this,"name");i(this,"visible");i(this,"locked");i(this,"componentIdentifier");i(this,"controlAttributes");i(this,"rotation");i(this,"opacity");i(this,"position");i(this,"top");i(this,"right");i(this,"bottom");i(this,"left");i(this,"centerX");i(this,"centerY");i(this,"width");i(this,"height");i(this,"maxWidth");i(this,"minWidth");i(this,"maxHeight");i(this,"minHeight");i(this,"aspectRatio");u(e.componentIdentifier,"Code component node must have an identifier"),this.name=e.name??null,this.visible=e.visible??!0,this.locked=e.locked??!1,this.componentIdentifier=e.componentIdentifier,this.controlAttributes=Ue(e.controlAttributes??{},o),this.rotation=e.rotation??0,this.opacity=e.opacity??1,u(e.position,"Must have a position"),this.position=e.position,this.left=e.left??null,this.right=e.right??null,this.top=e.top??null,this.bottom=e.bottom??null,this.centerX=e.centerX??null,this.centerY=e.centerY??null,this.width=e.width??null,this.height=e.height??null,this.maxWidth=e.maxWidth??null,this.minWidth=e.minWidth??null,this.maxHeight=e.maxHeight??null,this.minHeight=e.minHeight??null,this.aspectRatio=e.aspectRatio??null}clone(){return super.clone()}setAttributes(e){return super.setAttributes(e)}setControlAttributes(e){return this.setAttributes({controlAttributes:e})}},Q=class extends A{constructor(e,o){super(e,o);i(this,"_class","WebPageNode")}clone(){return super.clone()}setAttributes(e){return super.setAttributes(e)}},J=class extends A{constructor(e,o){super(e,o);i(this,"__class","SmartComponentNode");i(this,"name");this.name=e.name??null}clone(){return super.clone()}setAttributes(e){return super.setAttributes(e)}},Z=class extends A{constructor(e,o){super(e,o);i(this,"__class","UnknownNode")}clone(){throw Error("Can not clone unknown node")}setAttributes(e){throw Error("Can not set attributes on unknown node")}};function b(n,t){switch(n.__class){case"WebPageNode":return new Q(n,t);case"SmartComponentNode":return new J(n,t);case"CodeComponentNode":return new q(n,t);case"FrameNode":return new w(n,t);case"SVGNode":return new $(n,t);case"TextNode":return new Y(n,t);case"UnknownNode":return new Z(n,t);default:return new Z(n,t)}}function xe(n){return D(n)}function Xe(n){return n instanceof w}function Ye(n){return n instanceof Y}function $e(n){return n instanceof $}function de(n){return n instanceof q}function qe(n){return n instanceof Q}function Qe(n){return n instanceof J}function ae(n){return n instanceof Z}function le(n){return!!(Xe(n)||Ye(n)||de(n)||$e(n)||ae(n))}function Ie(n){return!!(qe(n)||Qe(n)||ae(n))}var O=null;function Je(n){if(!O){let e=document.createElement("style");document.head.appendChild(e),O=e.sheet}if(!O){n();return}let t=O.insertRule("* { transition: none !important; animation: none !important; }");n(),requestAnimationFrame(()=>{requestAnimationFrame(()=>{O&&O.deleteRule(t)})})}var zt=0,me,U,E,B,H,ce,ue=class{constructor({isTestEnv:t}={}){h(this,me,0);h(this,U,[]);h(this,E,void 0);h(this,B,new Map);h(this,H,void 0);h(this,ce,new Promise(t=>{v(this,H,t)}));i(this,"subscriptions",new Map);i(this,"onMessage",t=>{let e=t.data;if(je(e))switch(e.type){case"pluginReadyResponse":{if(!t.source)throw new Error("No 'source' on incoming message: "+e.type);u(d(this,H)),d(this,H).call(this,e.mode),this.applyPluginTheme(e.theme),v(this,E,(r,s)=>window.parent.postMessage(r,t.origin,s));for(let r of d(this,U))d(this,E).call(this,...r);v(this,U,[]);break}case"methodResponse":{let o=d(this,B).get(e.id);if(!o)throw new Error(`No handler for response with id ${e.id}`);d(this,B).delete(e.id),e.error?o.reject(e.error):o.resolve(e.result);break}case"subscriptionMessage":{let{topic:o,payload:r}=e,s=this.subscriptions.get(o);if(!s)throw new Error("Received a subscription message but no handler present");for(let l of s)l(r);break}default:oe(e)}});i(this,"applyPluginTheme",t=>{Je(()=>{document.body.setAttribute("data-framer-theme",t.mode);for(let e in t.tokens)document.body.style.setProperty(e,t.tokens[e])})});if(t)return;window.addEventListener("message",this.onMessage);let e={type:"pluginReadySignal",breakingChangesVersion:zt};window.parent.postMessage(e,"*"),this.subscribe("theme",this.applyPluginTheme),window.addEventListener("pointerdown",()=>{this.invoke("onPointerDown")})}invoke(t,...e){return this.invokeTransferable(t,void 0,...e)}invokeTransferable(t,e,...o){return new Promise((r,s)=>{let l={args:o,methodName:t,id:De(this,me)._++,type:"methodInvocation"},y=r;d(this,B).set(l.id,{resolve:y,reject:s}),this.queueMessage(l,e)})}subscribe(t,e){this.queueMessage({type:"subscribe",topic:t});let o=this.subscriptions.get(t)??new Set;return o.add(e),this.subscriptions.set(t,o),()=>{let r=this.subscriptions.get(t)??new Set;r.delete(e),r.size===0&&this.queueMessage({type:"unsubscribe",topic:t}),this.subscriptions.set(t,r)}}queueMessage(t,e){if(!d(this,E)){d(this,U).push([t,e]);return}d(this,E).call(this,t,e)}async showUI(t){return this.invoke("showUI",t)}async hideUI(){return this.invoke("hideUI")}async closePlugin(t,e){return this.invoke("closePlugin",t,e)}async getMode(){return d(this,ce)}async getCurrentUser(){return this.invoke("getCurrentUser")}async getSelection(){return(await this.invoke("getSelection")).map(e=>{let o=b(e,this);return u(le(o)),o})}async setSelection(t){let e=c(t)?[t]:Array.from(t);return this.invoke("setSelection",e)}subscribeToSelection(t){return this.subscribe("selection",e=>{let o=e.map(r=>{let s=b(r,this);return u(le(s)),s});t(o)})}async getCanvasRoot(){let t=await this.invoke("getCanvasRoot"),e=b(t,this);return u(Ie(e)),e}subscribeToCanvasRoot(t){return this.subscribe("canvasRoot",e=>{let o=b(e,this);u(Ie(o)),t(o)})}async getPublishInfo(){return this.invoke("getPublishInfo")}subscribeToPublishInfo(t){return this.subscribe("publishInfo",t)}async createFrameNode(t,e){let o=xe(t),r=await this.invoke("createNode","FrameNode",e??null,o);if(!r)return null;let s=b(r,this);return u(s instanceof w),s}async removeNode(t){return this.invoke("removeNode",t)}async cloneNode(t){let e=await this.invoke("cloneNode",t);return e?b(e,this):null}async getNode(t){let e=await this.invoke("getNode",t);return e?b(e,this):null}async getParent(t){let e=await this.invoke("getParent",t);return e?b(e,this):null}async getChildren(t){return(await this.invoke("getChildren",t)).map(o=>{let r=b(o,this);return u(le(r)),r})}async getRect(t){return this.invoke("getRect",t)}async setAttributes(t,e){let o=xe(e),r=await this.invoke("setAttributes",t,o);return r?b(r,this):null}async setParent(t,e,o){return this.invoke("setParent",t,e,o)}async getImage(){let t=await this.invoke("getImage");return t?new p(t,this):null}subscribeToImage(t){return this.subscribe("image",e=>{if(!e){t(null);return}t(new p(e,this))})}async addImage(t){let e=await X(t instanceof File?t:t.image),o=V(e);return this.invokeTransferable("addImage",o,{...e,name:t?.name})}async setImage(t){let e=await X(t instanceof File?t:t.image),o=V(e);return this.invokeTransferable("setImage",o,{...e,name:t?.name})}async uploadImage(t){let e=await X(t instanceof File?t:t.image),o=V(e),r=await this.invokeTransferable("uploadImage",o,{...e,name:t?.name});return new p(r,this)}async addImages(t){let e=await be(t),o=e.flatMap(V);await this.invokeTransferable("addImages",o,e)}async uploadImages(t){let e=await be(t),o=e.flatMap(V),r=await this.invokeTransferable("uploadImages",o,e),s=[];for(let l of r)s.push(new p(l,this));return s}async addSVG(t){return this.invoke("addSVG",t)}async addComponent(t,e,o){let r=D(e),s=D(o),l=await this.invoke("addComponent",t,g(r)?r:void 0,g(s)?s:void 0);if(!l)return null;let y=b(l,this);return u(de(y),"Code component node must be defined"),y}async getText(){return this.invoke("getText")}async setText(t,e){return this.invoke("setText",t,e)}async addText(t,e){return this.invoke("addText",t,e)}async setCustomCode(t){return this.invoke("setCustomCode",t)}async getCustomCode(){return this.invoke("getCustomCode")}subscribeToCustomCode(t){return this.subscribe("customCode",t)}subscribeToText(t){return this.subscribe("text",t)}makeDraggable(t,e){return Ge(this,t,e)}};me=new WeakMap,U=new WeakMap,E=new WeakMap,B=new WeakMap,H=new WeakMap,ce=new WeakMap;var $n=fe({width:j,height:j,position:Ee("center","top left","bottom left","top right","bottom right"),title:k,resizable:I(F([f(!0),f(!1),f("width"),f("height")])),minWidth:j,minHeight:j}),Gt=W("info","success","error"),qn=fe({variant:I(Gt)});var Ne=new ue;function ve(n,t){let e=Yt(()=>ne(t)?t():t);Kt(()=>{let o=n.current;if(o instanceof HTMLElement)return Ne.makeDraggable(o,e)},[e])}function Yt(n){let t=Xt(n);return t.current=n,jt((...e)=>t.current(...e),[])}var $t=_.forwardRef(function({data:t,children:e,...o},r){let s=_.useRef(null);if(ve(s,t),_.isValidElement(e)){let l=Object.assign({},o);return g(e.props)&&Object.assign(l,e.props),l.ref=Jt(s,r,e.ref),_.cloneElement(e,l)}return _.Children.count(e)>1&&_.Children.only(e),null}),qt="current";function Qt(n){return g(n)&&qt in n}function Jt(...n){return t=>{for(let e of n)ne(e)?e(t):Qt(e)&&(e.current=t)}}var Zt={fixed:!0,sticky:!0,absolute:!0,relative:!0},Ze="position";function co(n){if(!(Ze in n))return!1;let t=n[Ze];return c(t)&&Zt[t]===!0}var et="top";function po(n){if(!(et in n))return!1;let t=n[et];return c(t)||x(t)}var tt="width";function go(n){if(!(tt in n))return!1;let t=n[tt];return c(t)||x(t)}var nt="maxWidth";function ho(n){if(!(nt in n))return!1;let t=n[nt];return c(t)||x(t)}var ot="aspectRatio";function fo(n){if(!(ot in n))return!1;let t=n[ot];return te(t)||x(t)}var it="name";function bo(n){if(!(it in n))return!1;let t=n[it];return c(t)||x(t)}var rt="visible";function yo(n){if(!(rt in n))return!1;let t=n[rt];return ge(t)}var st="locked";function Po(n){if(!(st in n))return!1;let t=n[st];return ge(t)}var at="backgroundColor";function xo(n){if(!(at in n))return!1;let t=n[at];return c(t)||x(t)}var dt="backgroundImage";function Io(n){if(!(dt in n))return!1;let t=n[dt];return t instanceof p||x(t)}var lt="backgroundImage";function No(n){if(!(lt in n))return!1;let t=n[lt];return t instanceof p?!1:se(t)||x(t)}var ut="backgroundGradient";function vo(n){if(!(ut in n))return!1;let t=n[ut];return c(t)||x(t)}var mt="rotation";function So(n){if(!(mt in n))return!1;let t=n[mt];return te(t)}var ct="opacity";function Ao(n){if(!(ct in n))return!1;let t=n[ct];return te(t)}var pt="borderRadius";function Co(n){if(!(pt in n))return!1;let t=n[pt];return c(t)||x(t)}var gt="svg";function ko(n){if(!(gt in n))return!1;let t=n[gt];return c(t)}export{q as CodeComponentNode,$t as Draggable,w as FrameNode,$ as SVGNode,J as SmartComponentNode,Y as TextNode,Q as WebPageNode,Ne as framer,de as isCodeComponentNode,Xe as isFrameNode,$e as isSVGNode,Qe as isSmartComponentNode,Ye as isTextNode,qe as isWebPageNode,ve as useMakeDraggable,fo as withAspectRatio,xo as withBackgroundColor,vo as withBackgroundGradient,Io as withBackgroundImage,No as withBackgroundImageData,Co as withBorderRadius,Po as withLocked,bo as withName,Ao as withOpacity,po as withPins,co as withPosition,So as withRotation,ko as withSVG,go as withSize,ho as withSizeConstraints,yo as withVisible};
+`))}catch{}throw e}var $e="ImageAsset",qe="__class";function $(n){return c(n)?n[qe]===$e:!1}var I,V,m=class{constructor(t,e){i(this,"id");i(this,"url");i(this,"thumbnailUrl");p(this,I,void 0);p(this,V,void 0);l(T(e)),this.url=t.url,b(this,V,e),this.id=t.id,this.thumbnailUrl=t.thumbnailUrl}async measure(){return tt(this.url)}async getData(){if(a(this,I)&&a(this,I).bytes.length>0)return a(this,I);let t=await a(this,V).invoke("getImageData",{id:this.id});if(!t)throw new Error("Failed to load image data");return b(this,I,t),t}async loadBitmap(){let{mimeType:t,bytes:e}=await this.getData(),o=new Blob([e],{type:t});return createImageBitmap(o)}async loadImage(){let t=await this.getData(),e=URL.createObjectURL(new Blob([t.bytes]));return new Promise((o,s)=>{let r=new Image;r.onload=()=>o(r),r.onerror=()=>s(),r.src=e})}};I=new WeakMap,V=new WeakMap;function S(n){return n.type==="bytes"?[n.bytes.buffer]:[]}function Qe(n){if(!c(n))return!1;let t="bytes",e="mimeType";return!(!(t in n)||!(e in n)||!(n[t]instanceof Uint8Array)||!u(n[e]))}async function B(n){return Qe(n)?{...n,type:"bytes"}:n instanceof File?et(n):{type:"url",url:n}}function Je(n,t){return{...n,name:t}}function re(n){return Promise.all(n.map(async t=>{let e=await B(t.image);return Je(e,t.name)}))}function Ze(n){if(!n.startsWith("image/"))throw new Error(`Unsupported mime type: ${n}`)}async function et(n){return new Promise((t,e)=>{let o=new FileReader;o.onload=s=>{let r=n.type;Ze(n.type);let d=s.target?.result;if(!d||!(d instanceof ArrayBuffer)){e(new Error("Failed to read file, arrayBuffer is null"));return}let h=new Uint8Array(d);t({bytes:h,mimeType:r,type:"bytes"})},o.onerror=s=>{e(s)},o.readAsArrayBuffer(n)})}async function tt(n){let t=n instanceof File,e=t?URL.createObjectURL(n):n,o=new Image;return o.crossOrigin="anonymous",o.src=e,await o.decode().finally(()=>{t&&URL.revokeObjectURL(e)}),{height:o.height,width:o.width}}function v(n){if(ot(n))return it(n);if(ie(n))return n.map(v);if(c(n)){let t={};for(let e in n)t[e]=v(n[e]);return t}return n}function Pe(n,t){let e={};for(let o in n)e[o]=se(n[o],t);return e}function se(n,t){if(nt(n)&&n.__class==="ImageAsset")return new m(n,t);if(c(n)){let e={};for(let o in n)e[o]=se(n[o],t);return e}return ie(n)?n.map(e=>se(e,t)):n}function nt(n){return!!$(n)}function ot(n){return n instanceof m}function it(n){if(n instanceof m)return{__class:"ImageAsset",id:n.id,thumbnailUrl:n.thumbnailUrl,url:n.url};Y(n)}var rt=(()=>{let n=null;return{disableUntilMouseUp:()=>{if(n)return;n=document.createElement("style"),n.textContent="* { pointer-events: none !important; user-select: none !important; -webkit-user-select: none !important; }",document.head.appendChild(n);let t=()=>{n&&(document.head.removeChild(n),n=null,s())},e=r=>{r.buttons>0&&r.buttons&1||t()},o=()=>{t()};window.addEventListener("pointerup",e,!0),window.addEventListener("pointermove",e,!0),window.addEventListener("blur",o);function s(){window.removeEventListener("pointerup",e,!0),window.removeEventListener("pointermove",e,!0),window.removeEventListener("blur",o)}}}})(),xe=5,st=(()=>{let n=1;return{next:()=>`drag-${n++}`}})();function Ne(n,t,e){l(T(n));let o=!0;n.getMode().then(g=>{o=g==="default"});let s=document.body.style.cursor,r={type:"idle"},d=document.body,h=g=>{if(r.type==="idle")return;let{dragSessionId:N}=r.dragStart;r.type==="dragging"&&n.invoke("onDragEnd",{...g,dragSessionId:N}),r={type:"idle"},Ke()},K=g=>{if(r.type==="idle")return;let{dragSessionId:N}=r.dragStart;if(!(g.buttons>0&&!!(g.buttons&1))){h({cancelled:!1});return}let{clientX:L,clientY:F}=g;if(r.type==="pointerDown"){let k=L-r.dragStart.mouse.x,he=F-r.dragStart.mouse.y;if(Math.abs(k)<xe&&Math.abs(he)<xe)return;r={type:"dragging",dragStart:r.dragStart},n.invoke("onDragStart",r.dragStart),document.getSelection()?.empty(),rt.disableUntilMouseUp()}d.setPointerCapture(g.pointerId);let ne={x:L,y:F};n.invoke("onDrag",{dragSessionId:N,mouse:ne}).then(k=>{r.type==="dragging"&&(document.body.style.cursor=k??"")})},me=g=>{g.key==="Escape"&&h({cancelled:!0})},ce=()=>{h({cancelled:!0})},ge=g=>{if(h({cancelled:!0}),!o)return;let N=t.getBoundingClientRect(),pe={x:N.x,y:N.y,width:N.width,height:N.height},L,F=t.querySelectorAll("svg");if(F.length===1){let fe=F.item(0).getBoundingClientRect();L={width:fe.width,height:fe.height}}let ne={x:g.clientX,y:g.clientY},k=st.next();r={type:"pointerDown",dragStart:{dragSessionId:k,elementRect:pe,svgSize:L,mouse:ne}},n.invoke("setDragData",k,e()),d.addEventListener("pointermove",K,!0),d.addEventListener("pointerup",K,!0),window.addEventListener("keydown",me,!0),window.addEventListener("blur",ce)};t.addEventListener("pointerdown",ge);function Ke(){document.body.style.cursor=s,d.removeEventListener("pointermove",K,!0),d.removeEventListener("pointerup",K,!0),window.removeEventListener("keydown",me,!0),window.removeEventListener("blur",ce)}return()=>{t.removeEventListener("pointerdown",ge),h({cancelled:!0})}}var at={methodResponse:!0,pluginReadyResponse:!0,subscriptionMessage:!0};function dt(n){return u(n)&&n in at}function Ie(n){return c(n)&&dt(n["type"])}var P,x=class{constructor(t,e){i(this,"id");p(this,P,void 0);l(u(t.id),"Node must have an id"),this.id=t.id,b(this,P,e)}remove(){return a(this,P).removeNode(this.id)}select(){return a(this,P).setSelection([this.id])}clone(){return a(this,P).cloneNode(this.id)}setAttributes(t){return a(this,P).setAttributes(this.id,t)}getRect(){return a(this,P).getRect(this.id)}getParent(){return a(this,P).getParent(this.id)}getChildren(){return q(this)?Promise.resolve([]):a(this,P).getChildren(this.id)}async*walk(){if(yield this,!q(this))for(let t of await this.getChildren())yield*await t.walk()}};P=new WeakMap;var A=class extends x{constructor(e,o){super(e,o);i(this,"__class","FrameNode");i(this,"name");i(this,"visible");i(this,"locked");i(this,"backgroundColor");i(this,"backgroundImage");i(this,"backgroundGradient");i(this,"rotation");i(this,"opacity");i(this,"borderRadius");i(this,"position");i(this,"top");i(this,"right");i(this,"bottom");i(this,"left");i(this,"centerX");i(this,"centerY");i(this,"width");i(this,"height");i(this,"maxWidth");i(this,"minWidth");i(this,"maxHeight");i(this,"minHeight");i(this,"aspectRatio");l(e.__class==="FrameNode","FrameNode must have a __class property"),this.name=e.name??null,this.visible=e.visible??!0,this.locked=e.locked??!1,this.backgroundColor=e.backgroundColor??null,this.backgroundImage=e.backgroundImage?new m(e.backgroundImage,o):null,this.backgroundGradient=e.backgroundGradient??null,this.rotation=e.rotation??0,this.opacity=e.opacity??1,this.borderRadius=e.borderRadius??null,l(e.position,"Must have a position"),this.position=e.position,this.left=e.left??null,this.right=e.right??null,this.top=e.top??null,this.bottom=e.bottom??null,this.centerX=e.centerX??null,this.centerY=e.centerY??null,this.width=e.width??null,this.height=e.height??null,this.maxWidth=e.maxWidth??null,this.minWidth=e.minWidth??null,this.maxHeight=e.maxHeight??null,this.minHeight=e.minHeight??null,this.aspectRatio=e.aspectRatio??null}clone(){return super.clone()}setAttributes(e){return super.setAttributes(e)}},W,U=class extends x{constructor(e,o){super(e,o);i(this,"__class","TextNode");i(this,"name");i(this,"visible");i(this,"locked");i(this,"rotation");i(this,"opacity");i(this,"position");i(this,"top");i(this,"right");i(this,"bottom");i(this,"left");i(this,"centerX");i(this,"centerY");i(this,"width");i(this,"height");i(this,"maxWidth");i(this,"minWidth");i(this,"maxHeight");i(this,"minHeight");p(this,W,void 0);l(T(o)),b(this,W,o),this.name=e.name??null,this.visible=e.visible??!0,this.locked=e.locked??!1,this.rotation=e.rotation??0,this.opacity=e.opacity??1,l(e.position,"Must have a position"),this.position=e.position,this.left=e.left??null,this.right=e.right??null,this.top=e.top??null,this.bottom=e.bottom??null,this.centerX=e.centerX??null,this.centerY=e.centerY??null,this.width=e.width??null,this.height=e.height??null,this.maxWidth=e.maxWidth??null,this.minWidth=e.minWidth??null,this.maxHeight=e.maxHeight??null,this.minHeight=e.minHeight??null}clone(){return super.clone()}setAttributes(e){return super.setAttributes(e)}async setText(e){await a(this,W).invoke("setTextForNode",this.id,e)}async getText(){return a(this,W).invoke("getTextForNode",this.id)}};W=new WeakMap;var H=class extends x{constructor(e,o){super(e,o);i(this,"__class","SVGNode");i(this,"name");i(this,"visible");i(this,"locked");i(this,"svg");i(this,"rotation");i(this,"opacity");i(this,"position");i(this,"top");i(this,"right");i(this,"bottom");i(this,"left");i(this,"centerX");i(this,"centerY");i(this,"width");i(this,"height");l(e.svg,"SVG node must have a non-empty SVG string"),this.name=e.name??null,this.visible=e.visible??!0,this.locked=e.locked??!1,this.svg=e.svg,this.rotation=e.rotation??0,this.opacity=e.opacity??1,l(e.position,"Must have a position"),this.position=e.position??null,this.left=e.left??null,this.right=e.right??null,this.top=e.top??null,this.bottom=e.bottom??null,this.centerX=e.centerX??null,this.centerY=e.centerY??null,this.width=e.width??null,this.height=e.height??null}clone(){return super.clone()}setAttributes(e){return super.setAttributes(e)}},_=class extends x{constructor(e,o){super(e,o);i(this,"__class","CodeComponentNode");i(this,"name");i(this,"visible");i(this,"locked");i(this,"componentIdentifier");i(this,"controlAttributes");i(this,"rotation");i(this,"opacity");i(this,"position");i(this,"top");i(this,"right");i(this,"bottom");i(this,"left");i(this,"centerX");i(this,"centerY");i(this,"width");i(this,"height");i(this,"maxWidth");i(this,"minWidth");i(this,"maxHeight");i(this,"minHeight");i(this,"aspectRatio");l(e.componentIdentifier,"Code component node must have an identifier"),this.name=e.name??null,this.visible=e.visible??!0,this.locked=e.locked??!1,this.componentIdentifier=e.componentIdentifier,this.controlAttributes=Pe(e.controlAttributes??{},o),this.rotation=e.rotation??0,this.opacity=e.opacity??1,l(e.position,"Must have a position"),this.position=e.position,this.left=e.left??null,this.right=e.right??null,this.top=e.top??null,this.bottom=e.bottom??null,this.centerX=e.centerX??null,this.centerY=e.centerY??null,this.width=e.width??null,this.height=e.height??null,this.maxWidth=e.maxWidth??null,this.minWidth=e.minWidth??null,this.maxHeight=e.maxHeight??null,this.minHeight=e.minHeight??null,this.aspectRatio=e.aspectRatio??null}clone(){return super.clone()}setAttributes(e){return super.setAttributes(e)}setControlAttributes(e){return this.setAttributes({controlAttributes:e})}},G=class extends x{constructor(e,o){super(e,o);i(this,"_class","WebPageNode")}clone(){return super.clone()}setAttributes(e){return super.setAttributes(e)}},z=class extends x{constructor(e,o){super(e,o);i(this,"__class","SmartComponentNode");i(this,"name");this.name=e.name??null}clone(){return super.clone()}setAttributes(e){return super.setAttributes(e)}},O=class extends x{constructor(e,o){super(e,o);i(this,"__class","UnknownNode")}clone(){throw Error("Can not clone unknown node")}setAttributes(e){throw Error("Can not set attributes on unknown node")}};function f(n,t){switch(n.__class){case"WebPageNode":return new G(n,t);case"SmartComponentNode":return new z(n,t);case"CodeComponentNode":return new _(n,t);case"FrameNode":return new A(n,t);case"SVGNode":return new H(n,t);case"TextNode":return new U(n,t);case"UnknownNode":return new O(n,t);default:return new O(n,t)}}function ae(n){return v(n)}function ve(n){return n instanceof A}function Ae(n){return n instanceof U}function Ce(n){return n instanceof H}function Q(n){return n instanceof _}function ke(n){return n instanceof G}function Te(n){return n instanceof z}function q(n){return n instanceof O}function J(n){return!!(ve(n)||Ae(n)||Q(n)||Ce(n)||q(n))}function de(n){return!!(ke(n)||Te(n)||q(n))}var D=null;function Se(n){if(!D){let e=document.createElement("style");document.head.appendChild(e),D=e.sheet}if(!D){n();return}let t=D.insertRule("* { transition: none !important; animation: none !important; }");n(),requestAnimationFrame(()=>{requestAnimationFrame(()=>{D&&D.deleteRule(t)})})}var lt=0,ee,R,C,w,E,te,Z=class{constructor({isTestEnv:t}={}){p(this,ee,0);p(this,R,[]);p(this,C,void 0);p(this,w,new Map);p(this,E,void 0);p(this,te,new Promise(t=>{b(this,E,t)}));i(this,"subscriptions",new Map);i(this,"onMessage",t=>{let e=t.data;if(Ie(e))switch(e.type){case"pluginReadyResponse":{if(!t.source)throw new Error("No 'source' on incoming message: "+e.type);l(a(this,E)),a(this,E).call(this,e.mode),this.applyPluginTheme(e.theme),b(this,C,(s,r)=>window.parent.postMessage(s,t.origin,r));for(let s of a(this,R))a(this,C).call(this,...s);b(this,R,[]);break}case"methodResponse":{let o=a(this,w).get(e.id);if(!o)throw new Error(`No handler for response with id ${e.id}`);a(this,w).delete(e.id),e.error?o.reject(e.error):o.resolve(e.result);break}case"subscriptionMessage":{let{topic:o,payload:s}=e,r=this.subscriptions.get(o);if(!r)throw new Error("Received a subscription message but no handler present");for(let d of r)d(s);break}default:Y(e)}});i(this,"applyPluginTheme",t=>{Se(()=>{document.body.setAttribute("data-framer-theme",t.mode);for(let e in t.tokens)document.body.style.setProperty(e,t.tokens[e])})});if(t)return;window.addEventListener("message",this.onMessage);let e={type:"pluginReadySignal",breakingChangesVersion:lt};window.parent.postMessage(e,"*"),this.subscribe("theme",this.applyPluginTheme),window.addEventListener("pointerdown",()=>{this.invoke("onPointerDown")})}invoke(t,...e){return this.invokeTransferable(t,void 0,...e)}invokeTransferable(t,e,...o){return new Promise((s,r)=>{let d={args:o,methodName:t,id:ye(this,ee)._++,type:"methodInvocation"},h=s;a(this,w).set(d.id,{resolve:h,reject:r}),this.queueMessage(d,e)})}subscribe(t,e){this.queueMessage({type:"subscribe",topic:t});let o=this.subscriptions.get(t)??new Set;return o.add(e),this.subscriptions.set(t,o),()=>{let s=this.subscriptions.get(t)??new Set;s.delete(e),s.size===0&&this.queueMessage({type:"unsubscribe",topic:t}),this.subscriptions.set(t,s)}}queueMessage(t,e){if(!a(this,C)){a(this,R).push([t,e]);return}a(this,C).call(this,t,e)}async showUI(t){return this.invoke("showUI",t)}async hideUI(){return this.invoke("hideUI")}async closePlugin(t,e){return this.invoke("closePlugin",t,e)}async getMode(){return a(this,te)}async getCurrentUser(){return this.invoke("getCurrentUser")}async getSelection(){return(await this.invoke("getSelection")).map(e=>{let o=f(e,this);return l(J(o)),o})}async setSelection(t){let e=u(t)?[t]:Array.from(t);return this.invoke("setSelection",e)}subscribeToSelection(t){return this.subscribe("selection",e=>{let o=e.map(s=>{let r=f(s,this);return l(J(r)),r});t(o)})}async getCanvasRoot(){let t=await this.invoke("getCanvasRoot"),e=f(t,this);return l(de(e)),e}subscribeToCanvasRoot(t){return this.subscribe("canvasRoot",e=>{let o=f(e,this);l(de(o)),t(o)})}async getPublishInfo(){return this.invoke("getPublishInfo")}subscribeToPublishInfo(t){return this.subscribe("publishInfo",t)}async createFrameNode(t,e){let o=ae(t),s=await this.invoke("createNode","FrameNode",e??null,o);if(!s)return null;let r=f(s,this);return l(r instanceof A),r}async removeNode(t){return this.invoke("removeNode",t)}async cloneNode(t){let e=await this.invoke("cloneNode",t);return e?f(e,this):null}async getNode(t){let e=await this.invoke("getNode",t);return e?f(e,this):null}async getParent(t){let e=await this.invoke("getParent",t);return e?f(e,this):null}async getChildren(t){return(await this.invoke("getChildren",t)).map(o=>{let s=f(o,this);return l(J(s)),s})}async getRect(t){return this.invoke("getRect",t)}async setAttributes(t,e){let o=ae(e),s=await this.invoke("setAttributes",t,o);return s?f(s,this):null}async setParent(t,e,o){return this.invoke("setParent",t,e,o)}async getImage(){let t=await this.invoke("getImage");return t?new m(t,this):null}subscribeToImage(t){return this.subscribe("image",e=>{if(!e){t(null);return}t(new m(e,this))})}async addImage(t){let e=await B(t instanceof File?t:t.image),o=S(e);return this.invokeTransferable("addImage",o,{...e,name:t?.name})}async setImage(t){let e=await B(t instanceof File?t:t.image),o=S(e);return this.invokeTransferable("setImage",o,{...e,name:t?.name})}async uploadImage(t){let e=await B(t instanceof File?t:t.image),o=S(e),s=await this.invokeTransferable("uploadImage",o,{...e,name:t?.name});return new m(s,this)}async addImages(t){let e=await re(t),o=e.flatMap(S);await this.invokeTransferable("addImages",o,e)}async uploadImages(t){let e=await re(t),o=e.flatMap(S),s=await this.invokeTransferable("uploadImages",o,e),r=[];for(let d of s)r.push(new m(d,this));return r}async addSVG(t){return this.invoke("addSVG",t)}async addComponent(t,e,o){let s=v(e),r=v(o),d=await this.invoke("addComponent",t,c(s)?s:void 0,c(r)?r:void 0);if(!d)return null;let h=f(d,this);return l(Q(h),"Code component node must be defined"),h}async getText(){return this.invoke("getText")}async setText(t){return this.invoke("setText",t)}async addText(t,e){return this.invoke("addText",t,e)}async setCustomCode(t){return this.invoke("setCustomCode",t)}async getCustomCode(){return this.invoke("getCustomCode")}subscribeToCustomCode(t){return this.subscribe("customCode",t)}subscribeToText(t){return this.subscribe("text",t)}makeDraggable(t,e){return Ne(this,t,e)}};ee=new WeakMap,R=new WeakMap,C=new WeakMap,w=new WeakMap,E=new WeakMap,te=new WeakMap;var le=new Z;function ue(n,t){let e=gt(()=>X(t)?t():t);mt(()=>{let o=n.current;if(o instanceof HTMLElement)return le.makeDraggable(o,e)},[e])}function gt(n){let t=ct(n);return t.current=n,ut((...e)=>t.current(...e),[])}var pt=M.forwardRef(function({data:t,children:e,...o},s){let r=M.useRef(null);if(ue(r,t),M.isValidElement(e)){let d=Object.assign({},o);return c(e.props)&&Object.assign(d,e.props),d.ref=bt(r,s,e.ref),M.cloneElement(e,d)}return M.Children.count(e)>1&&M.Children.only(e),null}),ht="current";function ft(n){return c(n)&&ht in n}function bt(...n){return t=>{for(let e of n)X(e)?e(t):ft(e)&&(e.current=t)}}var yt={fixed:!0,sticky:!0,absolute:!0,relative:!0},We="position";function mn(n){if(!(We in n))return!1;let t=n[We];return u(t)&&yt[t]===!0}var De="top";function cn(n){if(!(De in n))return!1;let t=n[De];return u(t)||y(t)}var Re="width";function gn(n){if(!(Re in n))return!1;let t=n[Re];return u(t)||y(t)}var we="maxWidth";function pn(n){if(!(we in n))return!1;let t=n[we];return u(t)||y(t)}var Ee="aspectRatio";function hn(n){if(!(Ee in n))return!1;let t=n[Ee];return j(t)||y(t)}var Me="name";function fn(n){if(!(Me in n))return!1;let t=n[Me];return u(t)||y(t)}var Le="visible";function bn(n){if(!(Le in n))return!1;let t=n[Le];return oe(t)}var Fe="locked";function yn(n){if(!(Fe in n))return!1;let t=n[Fe];return oe(t)}var Ve="backgroundColor";function Pn(n){if(!(Ve in n))return!1;let t=n[Ve];return u(t)||y(t)}var Be="backgroundImage";function xn(n){if(!(Be in n))return!1;let t=n[Be];return t instanceof m||y(t)}var Ue="backgroundImage";function Nn(n){if(!(Ue in n))return!1;let t=n[Ue];return t instanceof m?!1:$(t)||y(t)}var He="backgroundGradient";function In(n){if(!(He in n))return!1;let t=n[He];return u(t)||y(t)}var _e="rotation";function vn(n){if(!(_e in n))return!1;let t=n[_e];return j(t)}var Ge="opacity";function An(n){if(!(Ge in n))return!1;let t=n[Ge];return j(t)}var ze="borderRadius";function Cn(n){if(!(ze in n))return!1;let t=n[ze];return u(t)||y(t)}var Oe="svg";function kn(n){if(!(Oe in n))return!1;let t=n[Oe];return u(t)}export{_ as CodeComponentNode,pt as Draggable,A as FrameNode,H as SVGNode,z as SmartComponentNode,U as TextNode,G as WebPageNode,le as framer,Q as isCodeComponentNode,ve as isFrameNode,Ce as isSVGNode,Te as isSmartComponentNode,Ae as isTextNode,ke as isWebPageNode,ue as useMakeDraggable,hn as withAspectRatio,Pn as withBackgroundColor,In as withBackgroundGradient,xn as withBackgroundImage,Nn as withBackgroundImageData,Cn as withBorderRadius,yn as withLocked,fn as withName,An as withOpacity,cn as withPins,mn as withPosition,vn as withRotation,kn as withSVG,gn as withSize,pn as withSizeConstraints,bn as withVisible};

dist/index.test-d.ts

@@ -1,20 +0,13 @@
-import type {
-    AnyNode,
-    CanvasNode,
-    CanvasRootNode,
-    CodeComponentNode,
-    CustomCode,
-    FrameNode,
-    ImageAsset,
-    Mode,
-    PublishInfo,
-    Rect,
-    SmartComponentNode,
-    TextNode,
-    User,
-    WebPageNode,
-} from "./"
+import type { AnyNode, CanvasNode, CodeComponentNode, FrameNode, SmartComponentNode, TextNode, WebPageNode } from "./"
 
 import { expectType } from "tsd"
-import { framer, isCodeComponentNode, isFrameNode, isSmartComponentNode, isTextNode, isWebPageNode } from "./"
+import {
+    framer,
+    isCodeComponentNode,
+    isFrameNode,
+    isSmartComponentNode,
+    isTextNode,
+    isWebPageNode,
+    withBackgroundColor,
+} from "./"
 
@@ -24,50 +17,8 @@ // API Methods
 const node = await framer.getNode("nodeId")
-expectType<null | AnyNode>(node)
+if (!node) {
+    expectType<null>(node)
+} else {
+    expectType<AnyNode>(node)
+}
 
-const rootNode = await framer.getCanvasRoot()
-expectType<CanvasRootNode>(rootNode)
-
-const selection = await framer.getSelection()
-expectType<CanvasNode[]>(selection)
-
-const image = await framer.getImage()
-expectType<ImageAsset | null>(image)
-
-const children = await framer.getChildren("nodeId")
-expectType<CanvasNode[]>(children)
-
-const cloned = await framer.cloneNode("nodeId")
-expectType<AnyNode | null>(cloned)
-
-const component = await framer.addComponent("https://example.com/url")
-expectType<CodeComponentNode | null>(component)
-
-const user = await framer.getCurrentUser()
-expectType<User>(user)
-
-const publishInfo = await framer.getPublishInfo()
-expectType<PublishInfo>(publishInfo)
-
-const uploadedImage = await framer.uploadImage({ image: "https://example.com/image.png" })
-expectType<ImageAsset>(uploadedImage)
-
-const frame = await framer.createFrameNode({})
-expectType<FrameNode | null>(frame)
-
-const customCode = await framer.getCustomCode()
-expectType<CustomCode>(customCode)
-
-const rect = await framer.getRect("nodeId")
-expectType<Rect | null>(rect)
-
-const mode = await framer.getMode()
-expectType<Mode>(mode)
-
-framer.subscribeToCanvasRoot(root => expectType<CanvasRootNode>(root))
-framer.subscribeToCustomCode(customCode => expectType<CustomCode>(customCode))
-framer.subscribeToImage(image => expectType<ImageAsset | null>(image))
-framer.subscribeToPublishInfo(publishInfo => expectType<PublishInfo>(publishInfo))
-framer.subscribeToSelection(selection => expectType<CanvasNode[]>(selection))
-framer.subscribeToText(text => expectType<string | null>(text))
-
 // Type guards
@@ -80,1 +31,19 @@
 if (isFrameNode(node)) expectType<FrameNode>(node)
+
+// Test a regression where setAttributes could not be called after a trait check
+
+const canvasNode: CanvasNode = null as any
+if (withBackgroundColor(canvasNode)) {
+    void canvasNode.setAttributes({
+        backgroundColor: "#FFF",
+    })
+}
+
+// test a regression where setImage changes
+
+void framer.setImage({
+    image: {
+        bytes: new Uint8Array(),
+        mimeType: "image/png",
+    },
+})

package.json

 {
     "name": "framer-plugin",
-    "version": "0.1.3",
+    "version": "0.1.4",
     "type": "module",
@@ -25,2 +25,3 @@ "main": "src/index.ts",
         "typecheck": "yarn :tsc --noEmit",
+        "watch-typechecking": "yarn :tsc --noEmit --watch",
         "test-type-defintions": "tsd"
@@ -32,5 +33,2 @@ },
     },
-    "dependencies": {
-        "valibot": "^0.29.0"
-    },
     "devDependencies": {
@@ -37,0 +35,0 @@ "@types/react": "^18.2.67",

No alert changes

Improved metrics

Dependency count

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

168430

decreased by-9.06%

Lines of code

719

decreased by-34.16%

Dependency changes

• - Removedvalibot@^0.29.0

• - Removedvalibot@0.29.0(transitive)