framer-plugin - npm Package Compare versions

Comparing version 0.2.6 to 0.2.7

dist/index.d.ts

@@ -563,3 +563,14 @@ import React, { RefObject } from 'react';
 
-type ColorStyleAttributes = Prettify<Partial<Omit<ColorStyleData, "id">>>;
+type CSSPixelValue = `${number}px`;
+type CSSRelativeValue = `${number}em`;
+type CSSPercentageValue = `${number}%`;
+
+type TextNodeTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p";
+type TextTransform = "none" | "capitalize" | "uppercase" | "lowercase";
+type TextAlignment = "left" | "center" | "right";
+type TextDecoration = "none" | "underline" | "line-through";
+interface AddTextOptions {
+    tag: TextNodeTag;
+}
+
 interface ColorStyleData {
@@ -571,2 +582,3 @@ id: NodeId;
 }
+type ColorStyleAttributes = Prettify<Partial<Omit<ColorStyleData, "id">>>;
 declare class ColorStyle {
@@ -592,10 +604,105 @@ #private;
 }
+type TextStyleTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p";
+interface TextStyleBreakpointData {
+    /**
+     * How big does the window width need to be for this breakpoint's styles to
+     * take affect.
+     *
+     * When creating or updating a style, this will be automatically incremented
+     * by 1 if it's not unique.
+     * */
+    minWidth: number;
+    /** Size of the text at this breakpoint. */
+    fontSize: CSSPixelValue;
+    /** Size of the space between each letter at this breakpoint. */
+    letterSpacing: CSSPixelValue | CSSRelativeValue;
+    /** Size of the space between each line of text at this breakpoint. */
+    lineHeight: CSSPixelValue | CSSRelativeValue | CSSPercentageValue;
+    /** Size of the space between each paragraph at this breakpoint. */
+    paragraphSpacing: number;
+}
+type TextStyleBreakpointAttributes = Prettify<Partial<TextStyleBreakpointData> & Pick<TextStyleBreakpointData, "minWidth">>;
+type TextStyleBreakpoint = Prettify<TextStyleBreakpointData>;
+interface TextStyleData extends TextStyleBreakpointData {
+    id: NodeId;
+    name: string;
+    tag: TextStyleTag;
+    color: string;
+    transform: TextTransform;
+    alignment: TextAlignment;
+    decoration: TextDecoration;
+    balance: boolean;
+    breakpoints: TextStyleBreakpointData[];
+}
+type TextStyleAttributes = Prettify<Partial<Omit<TextStyleData, "id" | "breakpoints"> & {
+    breakpoints: TextStyleBreakpointAttributes[];
+}>>;
+declare class TextStyle {
+    #private;
+    readonly id: NodeId;
+    readonly name: string;
+    /** HTML tag that the style will use. */
+    readonly tag: TextStyleTag;
+    /** Color of the text in RGBA format for all breakpoints, e.g `rgba(242, 59, 57, 1)` */
+    readonly color: string;
+    /** Specifies how to capitalize the text for all breakpoints. */
+    readonly transform: TextTransform;
+    /** Specifies the horizontal direction of the text for all breakpoints. */
+    readonly alignment: TextAlignment;
+    /** Appearance of any decorative lines on the text for all breakpoints. */
+    readonly decoration: TextDecoration;
+    /** When enabled, use a text wrap method that tries to balance the number of characters on each line for legibility. */
+    readonly balance: boolean;
+    /** A list of style overrides that take affect at specific window widths. Breakpoints are automatically sorted by `minWidth` from largest to smallest. */
+    readonly breakpoints: TextStyleBreakpoint[];
+    /**
+     * How big does the window width need to be for primary breakpoint styles to
+     * take affect.
+     *
+     * Note: This is ignored if the text style has no breakpoints.
+     * */
+    readonly minWidth: number;
+    /**
+     * Size of the text of the primary breakpoint.
+     *
+     * Note: This is used by default when there are no breakpoints.
+     * */
+    readonly fontSize: CSSPixelValue;
+    /**
+     * Size of the space between each letter for the primary breakpoint.
+     *
+     * Note: This is used by default when there are no breakpoints.
+     * */
+    readonly letterSpacing: CSSPixelValue | CSSRelativeValue;
+    /**
+     * Size of the space between each line of text for the primary breakpoint.
+     *
+     * Note: This is used by default when there are no breakpoints.
+     * */
+    readonly lineHeight: CSSPixelValue | CSSRelativeValue | CSSPercentageValue;
+    /**
+     * Size of the space between each paragraph for the primary breakpoint.
+     *
+     * Note: This is used by default when there are no breakpoints.
+     * */
+    readonly paragraphSpacing: number;
+    constructor(data: TextStyleData, api: FramerAPI);
+    /**
+     * Set the attributes of the text style.
+     *
+     * @throws If the number of breakpoints is bigger than the limit of 4.
+     * */
+    setAttributes(update: TextStyleAttributes): Promise<TextStyle>;
+    /** Get plugin data for this text style by key. */
+    getPluginData(key: string): Promise<string | null>;
+    /** Set plugin data on this text style by key. */
+    setPluginData(key: string, value: string | null): Promise<void>;
+    /** Get all plugin data keys for this text style. */
+    getPluginDataKeys(): Promise<string[]>;
+    /** Deletes the text style from the project. */
+    remove(): Promise<void>;
+}
 
 type Mode = "default" | "image" | "editImage" | "configureCollection" | "syncCollection";
 
-type TextNodeTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
-interface AddTextOptions {
-    tag: TextNodeTag;
-}
-
 type Unsubscribe = VoidFunction;
@@ -676,2 +783,6 @@ type Cleanup = VoidFunction;
     subscribeToColorStyles(callback: (styles: ColorStyle[]) => void): VoidFunction;
+    getTextStyles(): Promise<TextStyle[]>;
+    getTextStyle(id: string): Promise<TextStyle | null>;
+    createTextStyle(attributes: TextStyleAttributes): Promise<TextStyle>;
+    subscribeToTextStyles(callback: (styles: TextStyle[]) => void): VoidFunction;
 }
@@ -857,2 +968,10 @@ interface UIOptions {
     subscribeToColorStyles: (callback: (styles: ColorStyle[]) => void) => Unsubscribe;
+    /** Get a specific text style. */
+    getTextStyle: (id: string) => Promise<TextStyle | null>;
+    /** Get all text styles in the project. */
+    getTextStyles: () => Promise<TextStyle[]>;
+    /** Add a new text style to the project. */
+    createTextStyle: (attributes: TextStyleAttributes) => Promise<TextStyle>;
+    /** Fired when a text style is added, edited or removed. */
+    subscribeToTextStyles: (callback: (styles: TextStyle[]) => void) => Unsubscribe;
 }
@@ -935,2 +1054,2 @@
 
-export { type AllTraits, type AnyNode, type BooleanField, type BorderRadius, type CanvasNode, type CanvasRootNode, Collection, type CollectionField, type CollectionFields, type CollectionItem, type ColorField, type ColorStop, ColorStyle, ComponentInstanceNode, ComponentNode, ConicGradient, type ControlAttributes, type CustomCode, type CustomCodeLocation, type DateField, Draggable, type EnumField, type FitContent, type FormattedTextField, type FractionalLength, FrameNode, FramerPluginError, type Gradient, type HeightConstraint, type HeightLength, ImageAsset, type ImageField, type Length, LinearGradient, type LinkField, type Mode, type NodeAttributeKey, type NodeId, type Notification, type NumberField, type PercentageLength, type PixelLength, type Position, type Publish, type PublishInfo, RadialGradient, type Rect, SVGNode, type StringField, TextNode, type TraitVariant, type TraitVariantData, type TraitVariantNode, type UIOptions, type User, type ViewportHeightLength, type ViewportWidthLength, WebPageNode, type WidthConstraint, type WidthLength, type WithAspectRatioTrait, type WithBackgroundColorTrait, type WithBackgroundGradientTrait, type WithBackgroundImageTrait, type WithBorderRadiusTrait, type WithComponentIdentifierTrait, type WithControlAttributesTrait, type WithIdTrait, type WithLockedTrait, type WithNameTrait, type WithOpacityTrait, type WithPinsTrait, type WithPositionTrait, type WithReplicaInfoTrait, type WithRotationTrait, type WithSVGTrait, type WithSizeConstraintsTrait, type WithSizeTrait, type WithVisibleTrait, framer, isComponentInstanceNode, isComponentNode, isFrameNode, isImageAsset, isSVGNode, isTextNode, isWebPageNode, supportsAspectRatio, supportsBackgroundColor, supportsBackgroundGradient, supportsBackgroundGradientData, supportsBackgroundImage, supportsBackgroundImageData, supportsBorderRadius, supportsLocked, supportsName, supportsOpacity, supportsPins, supportsPosition, supportsRotation, supportsSVG, supportsSize, supportsSizeConstraints, supportsVisible, useMakeDraggable };
+export { type AllTraits, type AnyNode, type BooleanField, type BorderRadius, type CanvasNode, type CanvasRootNode, Collection, type CollectionField, type CollectionFields, type CollectionItem, type ColorField, type ColorStop, ColorStyle, ComponentInstanceNode, ComponentNode, ConicGradient, type ControlAttributes, type CustomCode, type CustomCodeLocation, type DateField, Draggable, type EnumField, type FitContent, type FormattedTextField, type FractionalLength, FrameNode, FramerPluginError, type Gradient, type HeightConstraint, type HeightLength, ImageAsset, type ImageField, type Length, LinearGradient, type LinkField, type Mode, type NodeAttributeKey, type NodeId, type Notification, type NumberField, type PercentageLength, type PixelLength, type Position, type Publish, type PublishInfo, RadialGradient, type Rect, SVGNode, type StringField, type TextAlignment, type TextDecoration, TextNode, TextStyle, type TextStyleBreakpoint, type TextStyleTag, type TextTransform, type TraitVariant, type TraitVariantData, type TraitVariantNode, type UIOptions, type User, type ViewportHeightLength, type ViewportWidthLength, WebPageNode, type WidthConstraint, type WidthLength, type WithAspectRatioTrait, type WithBackgroundColorTrait, type WithBackgroundGradientTrait, type WithBackgroundImageTrait, type WithBorderRadiusTrait, type WithComponentIdentifierTrait, type WithControlAttributesTrait, type WithIdTrait, type WithLockedTrait, type WithNameTrait, type WithOpacityTrait, type WithPinsTrait, type WithPositionTrait, type WithReplicaInfoTrait, type WithRotationTrait, type WithSVGTrait, type WithSizeConstraintsTrait, type WithSizeTrait, type WithVisibleTrait, framer, isComponentInstanceNode, isComponentNode, isFrameNode, isImageAsset, isSVGNode, isTextNode, isWebPageNode, supportsAspectRatio, supportsBackgroundColor, supportsBackgroundGradient, supportsBackgroundGradientData, supportsBackgroundImage, supportsBackgroundImageData, supportsBorderRadius, supportsLocked, supportsName, supportsOpacity, supportsPins, supportsPosition, supportsRotation, supportsSVG, supportsSize, supportsSizeConstraints, supportsVisible, useMakeDraggable };

dist/index.js

@@ -1,4 +0,4 @@
-var ht=Object.defineProperty;var yt=(n,e,t)=>e in n?ht(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var o=(n,e,t)=>(yt(n,typeof e!="symbol"?e+"":e,t),t),Ve=(n,e,t)=>{if(!e.has(n))throw TypeError("Cannot "+t)};var r=(n,e,t)=>(Ve(n,e,"read from private field"),t?t.call(n):e.get(n)),c=(n,e,t)=>{if(e.has(n))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(n):e.set(n,t)},p=(n,e,t,i)=>(Ve(n,e,"write to private field"),i?i.call(n,t):e.set(n,t),t);var be=(n,e,t,i)=>({set _(s){p(n,e,s,t)},get _(){return r(n,e,i)}});import _ from"react";import{useCallback as Lt,useEffect as Gt,useRef as Et}from"react";function P(n){return n===null}function Pe(n){return n===!0||n===!1}function u(n){return typeof n=="string"}function se(n){return typeof n=="number"&&Number.isFinite(n)}function ae(n){return typeof n=="function"}function h(n){return typeof n=="object"&&n!==null&&!Array.isArray(n)}function Ne(n){return Array.isArray(n)}function v(n,e){throw e||new Error(n?`Unexpected value: ${n}`:"Application entered invalid state")}function d(n,...e){if(n)return;let t=Error("Assertion Error"+(e.length>0?": "+e.join(" "):""));if(t.stack)try{let i=t.stack.split(`
+var bt=Object.defineProperty;var Pt=(n,e,t)=>e in n?bt(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var o=(n,e,t)=>(Pt(n,typeof e!="symbol"?e+"":e,t),t),Oe=(n,e,t)=>{if(!e.has(n))throw TypeError("Cannot "+t)};var r=(n,e,t)=>(Oe(n,e,"read from private field"),t?t.call(n):e.get(n)),c=(n,e,t)=>{if(e.has(n))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(n):e.set(n,t)},m=(n,e,t,i)=>(Oe(n,e,"write to private field"),i?i.call(n,t):e.set(n,t),t);var xe=(n,e,t,i)=>({set _(s){m(n,e,s,t)},get _(){return r(n,e,i)}});import H from"react";import{useCallback as Et,useEffect as Mt,useRef as Bt}from"react";function P(n){return n===null}function Te(n){return n===!0||n===!1}function d(n){return typeof n=="string"}function le(n){return typeof n=="number"&&Number.isFinite(n)}function de(n){return typeof n=="function"}function h(n){return typeof n=="object"&&n!==null&&!Array.isArray(n)}function Ne(n){return Array.isArray(n)}function S(n,e){throw e||new Error(n?`Unexpected value: ${n}`:"Application entered invalid state")}function l(n,...e){if(n)return;let t=Error("Assertion Error"+(e.length>0?": "+e.join(" "):""));if(t.stack)try{let i=t.stack.split(`
 `);i[1]?.includes("assert")?(i.splice(1,1),t.stack=i.join(`
 `)):i[0]?.includes("assert")&&(i.splice(0,1),t.stack=i.join(`
-`))}catch{}throw t}var Me="__class",Ie="LinearGradient",xe="RadialGradient",Te="ConicGradient";function de(n){if(!h(n))return!1;switch(n[Me]){case Ie:case xe:case Te:return!0;default:return!1}}function j(n){return n instanceof F||n instanceof L||n instanceof G}function Oe(n){if(n instanceof F)return{__class:Ie,angle:n.angle,stops:n.stops};if(n instanceof L)return{__class:xe,width:n.width,height:n.height,x:n.x,y:n.y,stops:n.stops};if(n instanceof G)return{__class:Te,angle:n.angle,x:n.x,y:n.y,stops:n.stops};v(n)}function le(n){switch(n[Me]){case Ie:return new F(n);case xe:return new L(n);case Te:return new G(n);default:v(n)}}var F=class n{constructor(e){o(this,"angle");o(this,"stops");this.angle=e.angle,this.stops=e.stops,Object.freeze(this)}cloneWithAttributes(e){return new n({angle:e.angle??this.angle,stops:e.stops??this.stops})}toCSS(){let e=this.stops.map(t=>`${t.color} ${t.position*100}%`).join(", ");return`linear-gradient(${this.angle}deg, ${e})`}},L=class n{constructor(e){o(this,"width");o(this,"height");o(this,"x");o(this,"y");o(this,"stops");this.width=e.width,this.height=e.height,this.x=e.x,this.y=e.y,this.stops=e.stops,Object.freeze(this)}cloneWithAttributes(e){return new n({width:e.width??this.width,height:e.height??this.height,x:e.x??this.x,y:e.y??this.y,stops:e.stops??this.stops})}toCSS(){let e=this.stops.map((t,i)=>{let s=this.stops[i+1],a=t.position===1&&s?.position===1?t.position-1e-4:t.position;return`${t.color} ${a*100}%`}).join(", ");return`radial-gradient(${this.width} ${this.height} at ${this.x} ${this.y}, ${e})`}},G=class n{constructor(e){o(this,"angle");o(this,"x");o(this,"y");o(this,"stops");this.angle=e.angle,this.x=e.x,this.y=e.y,this.stops=e.stops,Object.freeze(this)}cloneWithAttributes(e){return new n({angle:e.angle??this.angle,x:e.x??this.x,y:e.y??this.y,stops:e.stops??this.stops})}toCSS(){let e=this.stops.map(t=>`${t.color} ${t.position*360}deg`).join(", ");return`conic-gradient(from ${this.angle}deg at ${this.x} ${this.y}, ${e})`}};var ft="invoke";function N(n){return ft in n}var bt="ImageAsset",Pt="__class";function ue(n){return h(n)?n[Pt]===bt:!1}var k,E,ve=class ve{constructor(e,t){o(this,"id");o(this,"url");o(this,"thumbnailUrl");o(this,"altText");c(this,k,void 0);c(this,E,void 0);d(N(t)),this.url=e.url,p(this,E,t),this.id=e.id,this.thumbnailUrl=e.thumbnailUrl,this.altText=e.altText}async cloneWithAttributes({altText:e}){return new ve({__class:"ImageAsset",id:this.id,url:this.url,thumbnailUrl:this.thumbnailUrl,altText:e!==void 0?e:this.altText},r(this,E))}async measure(){return Tt(this.url)}async getData(){if(r(this,k)&&r(this,k).bytes.length>0)return r(this,k);let e=await r(this,E).invoke("getImageData",{id:this.id});if(!e)throw new Error("Failed to load image data");return p(this,k,e),e}async loadBitmap(){let{mimeType:e,bytes:t}=await this.getData(),i=new Blob([t],{type:e});return createImageBitmap(i)}async loadImage(){let e=await this.getData(),t=URL.createObjectURL(new Blob([e.bytes]));return new Promise((i,s)=>{let a=new Image;a.onload=()=>i(a),a.onerror=()=>s(),a.src=t})}};k=new WeakMap,E=new WeakMap;var y=ve;function Nt(n){return n instanceof y}function V(n){return n.type==="bytes"?[n.bytes.buffer]:[]}function It(n){if(!h(n))return!1;let e="bytes",t="mimeType";return!(!(e in n)||!(t in n)||!(n[e]instanceof Uint8Array)||!u(n[t]))}async function $(n){return n instanceof File?Be(n):n.image instanceof File?Be(n.image):It(n.image)?{name:n.name,altText:n.altText,type:"bytes",mimeType:n.image.mimeType,bytes:n.image.bytes}:{name:n.name,altText:n.altText,type:"url",url:n.image}}function Ce(n){return Promise.all(n.map($))}function xt(n){if(!n.startsWith("image/"))throw new Error(`Unsupported mime type: ${n}`)}async function Be(n){return new Promise((e,t)=>{let i=new FileReader;i.onload=s=>{let a=n.type;xt(n.type);let l=s.target?.result;if(!l||!(l instanceof ArrayBuffer)){t(new Error("Failed to read file, arrayBuffer is null"));return}let T=new Uint8Array(l);e({bytes:T,mimeType:a,type:"bytes"})},i.onerror=s=>{t(s)},i.readAsArrayBuffer(n)})}async function Tt(n){let e=n instanceof File,t=e?URL.createObjectURL(n):n,i=new Image;return i.crossOrigin="anonymous",i.src=t,await i.decode().finally(()=>{e&&URL.revokeObjectURL(t)}),{height:i.height,width:i.width}}function A(n){if(vt(n))return kt(n);if(Ne(n))return n.map(A);if(h(n)){let e={};for(let t in n)e[t]=A(n[t]);return e}return n}function Ue(n,e){let t={};for(let i in n)t[i]=ke(n[i],e);return t}function ke(n,e){if(Ct(n))switch(n.__class){case"ImageAsset":return new y(n,e);case"LinearGradient":case"RadialGradient":case"ConicGradient":return le(n);default:v(n)}if(h(n)){let t={};for(let i in n)t[i]=ke(n[i],e);return t}return Ne(n)?n.map(t=>ke(t,e)):n}function Ct(n){return!!(ue(n)||de(n))}function vt(n){return!!(n instanceof y||j(n))}function kt(n){if(n instanceof y)return{__class:"ImageAsset",id:n.id,thumbnailUrl:n.thumbnailUrl,url:n.url,altText:n.altText};if(j(n))return Oe(n);v(n)}var b,ce=class{constructor(e,t){o(this,"id");o(this,"name");c(this,b,void 0);d(u(e.id),"Node must have an id"),d(u(e.name),"Node must have a name"),this.id=e.id,this.name=e.name,d(N(t)),p(this,b,t),Object.freeze(this)}async getItemIds(){return r(this,b).invoke("getCollectionItemIds",this.id)}async setItemOrder(e){return r(this,b).invoke("setCollectionItemOrder",this.id,e)}async getFields(){return r(this,b).invoke("getCollectionFields",this.id)}async setFields(e){return r(this,b).invoke("setCollectionFields",this.id,e)}async addItems(e){return r(this,b).invoke("addCollectionItems",this.id,e)}async removeItems(e){return r(this,b).invoke("removeCollectionItems",this.id,e)}async setPluginData(e,t){return r(this,b).invoke("setPluginDataForNode",this.id,e,t)}async getPluginData(e){return r(this,b).invoke("getPluginDataForNode",this.id,e)}async getPluginDataKeys(){return r(this,b).invoke("getPluginDataKeysForNode",this.id)}};b=new WeakMap;var At=(()=>{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 e=()=>{n&&(document.head.removeChild(n),n=null,s())},t=a=>{a.buttons>0&&a.buttons&1||e()},i=()=>{e()};window.addEventListener("pointerup",t,!0),window.addEventListener("pointermove",t,!0),window.addEventListener("blur",i);function s(){window.removeEventListener("pointerup",t,!0),window.removeEventListener("pointermove",t,!0),window.removeEventListener("blur",i)}}}})(),_e=5,Dt=(()=>{let n=1;return{next:()=>`drag-${n++}`}})();function St(){}function ze(n,e,t){if(n.mode!=="default")return St;d(N(n));let i=Dt.next(),s=document.body.style.cursor,a={type:"idle"},l=document.body,T=g=>{a.type!=="idle"&&(a.type==="dragging"&&n.invoke("onDragEnd",{...g,dragSessionId:i}),a={type:"idle"},pt())},ne=g=>{if(a.type==="idle")return;if(!(g.buttons>0&&!!(g.buttons&1))){T({cancelled:!1});return}let{clientX:ie,clientY:H}=g;if(a.type==="pointerDown"){let K=ie-a.dragStart.mouse.x,Ee=H-a.dragStart.mouse.y;if(Math.abs(K)<_e&&Math.abs(Ee)<_e)return;a={type:"dragging",dragStart:a.dragStart},n.invoke("onDragStart",a.dragStart),document.getSelection()?.empty(),At.disableUntilMouseUp()}l.setPointerCapture(g.pointerId);let oe={x:ie,y:H};n.invoke("onDrag",{dragSessionId:i,mouse:oe}).then(K=>{a.type==="dragging"&&(document.body.style.cursor=K??"")})},Re=g=>{g.key==="Escape"&&T({cancelled:!0})},Fe=()=>{T({cancelled:!0})},Le=g=>{T({cancelled:!0});let z=e.getBoundingClientRect(),ie={x:z.x,y:z.y,width:z.width,height:z.height},H,oe=e.querySelectorAll("svg");if(oe.length===1){let re=oe.item(0).getBoundingClientRect();H={x:re.x,y:re.y,width:re.width,height:re.height}}let K={x:g.clientX,y:g.clientY};a={type:"pointerDown",dragStart:{dragSessionId:i,elementRect:ie,svgRect:H,mouse:K}},n.invoke("setDragData",i,t()),l.addEventListener("pointermove",ne,!0),l.addEventListener("pointerup",ne,!0),window.addEventListener("keydown",Re,!0),window.addEventListener("blur",Fe)},Ge=()=>{let g=t();g.type==="detachedComponentLayers"&&n.invoke("preloadDetachedComponentLayers",g.url),g.type==="image"&&n.invoke("preloadImageUrlForInsertion",g.image),g.previewImage&&n.invoke("preloadDragPreviewImage",g.previewImage)};e.addEventListener("pointerdown",Le),e.addEventListener("mouseenter",Ge);function pt(){document.body.style.cursor=s,l.removeEventListener("pointermove",ne,!0),l.removeEventListener("pointerup",ne,!0),window.removeEventListener("keydown",Re,!0),window.removeEventListener("blur",Fe)}return()=>{e.removeEventListener("pointerdown",Le),e.removeEventListener("mouseenter",Ge),T({cancelled:!0})}}var X=class extends Error{};var Wt={default:!0,image:!0,editImage:!0,configureCollection:!0,syncCollection:!0};function He(n){return u(n)&&n in Wt}var wt={methodResponse:!0,pluginReadyResponse:!0,subscriptionMessage:!0};function Rt(n){return u(n)&&n in wt}function Ke(n){return h(n)&&Rt(n["type"])}var te,f,I,C=class{constructor(e,t){o(this,"id");c(this,te,void 0);c(this,f,void 0);c(this,I,void 0);d(u(e.id),"Node must have an id"),this.id=e.id,p(this,f,t),p(this,te,e.originalId??null),d(N(t)),p(this,I,t)}get isReplica(){return r(this,te)!==null}remove(){return r(this,f).removeNode(this.id)}select(){return r(this,f).setSelection([this.id])}clone(){return r(this,f).cloneNode(this.id)}setAttributes(e){return r(this,f).setAttributes(this.id,e)}getRect(){return r(this,f).getRect(this.id)}zoomIntoView(e){return r(this,f).zoomIntoView([this.id],e)}getParent(){return r(this,f).getParent(this.id)}getChildren(){return D(this)?Promise.resolve([]):r(this,f).getChildren(this.id)}async getNodesWithType(e){return D(this)?Promise.resolve([]):(await r(this,I).invoke("getNodesWithType",this.id,e)).map(i=>m(i,r(this,f)))}async getNodesWithAttribute(e){return D(this)?Promise.resolve([]):(await r(this,I).invoke("getNodesWithAttribute",this.id,e)).map(i=>m(i,r(this,f)))}async getNodesWithAttributeSet(e){return D(this)?Promise.resolve([]):(await r(this,I).invoke("getNodesWithAttributeSet",this.id,e)).map(i=>m(i,r(this,f)))}async*walk(){if(yield this,!D(this))for(let e of await this.getChildren())yield*e.walk()}async getPluginData(e){return r(this,I).invoke("getPluginDataForNode",this.id,e)}async setPluginData(e,t){return r(this,I).invoke("setPluginDataForNode",this.id,e,t)}async getPluginDataKeys(){return r(this,I).invoke("getPluginDataKeysForNode",this.id)}};te=new WeakMap,f=new WeakMap,I=new WeakMap;var S=class extends C{constructor(t,i){super(t,i);o(this,"__class","FrameNode");o(this,"name");o(this,"visible");o(this,"locked");o(this,"backgroundColor");o(this,"backgroundImage");o(this,"backgroundGradient");o(this,"rotation");o(this,"opacity");o(this,"borderRadius");o(this,"position");o(this,"top");o(this,"right");o(this,"bottom");o(this,"left");o(this,"centerX");o(this,"centerY");o(this,"width");o(this,"height");o(this,"maxWidth");o(this,"minWidth");o(this,"maxHeight");o(this,"minHeight");o(this,"aspectRatio");d(t.__class==="FrameNode","FrameNode must have a __class property"),this.name=t.name??null,this.visible=t.visible??!0,this.locked=t.locked??!1,this.backgroundColor=t.backgroundColor??null,this.backgroundImage=t.backgroundImage?new y(t.backgroundImage,i):null,this.rotation=t.rotation??0,this.opacity=t.opacity??1,this.borderRadius=t.borderRadius??null,this.backgroundGradient=de(t.backgroundGradient)?le(t.backgroundGradient):null,d(t.position,"Must have a position"),this.position=t.position,this.left=t.left??null,this.right=t.right??null,this.top=t.top??null,this.bottom=t.bottom??null,this.centerX=t.centerX??null,this.centerY=t.centerY??null,this.width=t.width??null,this.height=t.height??null,this.maxWidth=t.maxWidth??null,this.minWidth=t.minWidth??null,this.maxHeight=t.maxHeight??null,this.minHeight=t.minHeight??null,this.aspectRatio=t.aspectRatio??null,Object.freeze(this)}clone(){return super.clone()}setAttributes(t){return super.setAttributes(t)}},M,Y=class extends C{constructor(t,i){super(t,i);o(this,"__class","TextNode");o(this,"name");o(this,"visible");o(this,"locked");o(this,"rotation");o(this,"opacity");o(this,"position");o(this,"top");o(this,"right");o(this,"bottom");o(this,"left");o(this,"centerX");o(this,"centerY");o(this,"width");o(this,"height");o(this,"maxWidth");o(this,"minWidth");o(this,"maxHeight");o(this,"minHeight");c(this,M,void 0);d(N(i)),p(this,M,i),this.name=t.name??null,this.visible=t.visible??!0,this.locked=t.locked??!1,this.rotation=t.rotation??0,this.opacity=t.opacity??1,d(t.position,"Must have a position"),this.position=t.position,this.left=t.left??null,this.right=t.right??null,this.top=t.top??null,this.bottom=t.bottom??null,this.centerX=t.centerX??null,this.centerY=t.centerY??null,this.width=t.width??null,this.height=t.height??null,this.maxWidth=t.maxWidth??null,this.minWidth=t.minWidth??null,this.maxHeight=t.maxHeight??null,this.minHeight=t.minHeight??null,Object.freeze(this)}clone(){return super.clone()}setAttributes(t){return super.setAttributes(t)}async setText(t){await r(this,M).invoke("setTextForNode",this.id,t)}async getText(){return r(this,M).invoke("getTextForNode",this.id)}};M=new WeakMap;var q=class extends C{constructor(t,i){super(t,i);o(this,"__class","SVGNode");o(this,"name");o(this,"visible");o(this,"locked");o(this,"svg");o(this,"rotation");o(this,"opacity");o(this,"position");o(this,"top");o(this,"right");o(this,"bottom");o(this,"left");o(this,"centerX");o(this,"centerY");o(this,"width");o(this,"height");d(t.svg,"SVG node must have a non-empty SVG string"),this.name=t.name??null,this.visible=t.visible??!0,this.locked=t.locked??!1,this.svg=t.svg,this.rotation=t.rotation??0,this.opacity=t.opacity??1,d(t.position,"Must have a position"),this.position=t.position??null,this.left=t.left??null,this.right=t.right??null,this.top=t.top??null,this.bottom=t.bottom??null,this.centerX=t.centerX??null,this.centerY=t.centerY??null,this.width=t.width??null,this.height=t.height??null,Object.freeze(this)}clone(){return super.clone()}setAttributes(t){return super.setAttributes(t)}},Z=class extends C{constructor(t,i){super(t,i);o(this,"__class","ComponentInstanceNode");o(this,"name");o(this,"visible");o(this,"locked");o(this,"componentIdentifier");o(this,"controls");o(this,"rotation");o(this,"opacity");o(this,"position");o(this,"top");o(this,"right");o(this,"bottom");o(this,"left");o(this,"centerX");o(this,"centerY");o(this,"width");o(this,"height");o(this,"maxWidth");o(this,"minWidth");o(this,"maxHeight");o(this,"minHeight");o(this,"aspectRatio");d(t.componentIdentifier,"ComponentInstance node must have a component identifier"),this.name=t.name??null,this.visible=t.visible??!0,this.locked=t.locked??!1,this.componentIdentifier=t.componentIdentifier,this.controls=Ue(t.controls??{},i),this.rotation=t.rotation??0,this.opacity=t.opacity??1,d(t.position,"Must have a position"),this.position=t.position,this.left=t.left??null,this.right=t.right??null,this.top=t.top??null,this.bottom=t.bottom??null,this.centerX=t.centerX??null,this.centerY=t.centerY??null,this.width=t.width??null,this.height=t.height??null,this.maxWidth=t.maxWidth??null,this.minWidth=t.minWidth??null,this.maxHeight=t.maxHeight??null,this.minHeight=t.minHeight??null,this.aspectRatio=t.aspectRatio??null,Object.freeze(this)}clone(){return super.clone()}setAttributes(t){return super.setAttributes(t)}},Q=class extends C{constructor(t,i){super(t,i);o(this,"_class","WebPageNode");Object.freeze(this)}clone(){return super.clone()}setAttributes(t){return super.setAttributes(t)}},J=class extends C{constructor(t,i){super(t,i);o(this,"__class","ComponentNode");o(this,"name");this.name=t.name??null,Object.freeze(this)}clone(){return super.clone()}setAttributes(t){return super.setAttributes(t)}},ee=class extends C{constructor(t,i){super(t,i);o(this,"__class","UnknownNode");Object.freeze(this)}clone(){throw Error("Can not clone unknown node")}setAttributes(t){throw Error("Can not set attributes on unknown node")}};function m(n,e){switch(n.__class){case"WebPageNode":return new Q(n,e);case"ComponentNode":return new J(n,e);case"ComponentInstanceNode":return new Z(n,e);case"FrameNode":return new S(n,e);case"SVGNode":return new q(n,e);case"TextNode":return new Y(n,e);case"UnknownNode":return new ee(n,e);default:return new ee(n,e)}}function Ae(n){return A(n)}function me(n){return n instanceof S}function je(n){return n instanceof Y}function $e(n){return n instanceof q}function ge(n){return n instanceof Z}function Xe(n){return n instanceof Q}function Ye(n){return n instanceof J}function D(n){return n instanceof ee}function pe(n){return!!(me(n)||je(n)||ge(n)||$e(n)||D(n))}function De(n){return!!(Xe(n)||Ye(n)||D(n))}var x,Se=class Se{constructor(e,t){o(this,"id");o(this,"name");o(this,"light");o(this,"dark");c(this,x,void 0);d(u(e.id),"Node must have an id"),this.id=e.id,this.name=e.name,this.light=e.light,this.dark=e.dark,d(N(t)),p(this,x,t)}async setAttributes(e){let t=await r(this,x).invoke("setColorStyleAttributes",this.id,e);return t?new Se(t,r(this,x)):null}async getPluginData(e){return r(this,x).invoke("getPluginDataForNode",this.id,e)}async setPluginData(e,t){return r(this,x).invoke("setPluginDataForNode",this.id,e,t)}async getPluginDataKeys(){return r(this,x).invoke("getPluginDataKeysForNode",this.id)}async remove(){return r(this,x).invoke("removeColorStyle",this.id)}};x=new WeakMap;var W=Se;var O=null;function qe(n){if(!O){let t=document.createElement("style");document.head.appendChild(t),O=t.sheet}if(!O){n();return}let e=O.insertRule("* { transition: none !important; animation: none !important; }");n(),requestAnimationFrame(()=>{requestAnimationFrame(()=>{O&&O.deleteRule(e)})})}var Ft=1,ye,fe,B,w,U,R,he=class{constructor({isTestEnv:e}={}){c(this,ye,0);c(this,fe,0);c(this,B,[]);c(this,w,void 0);c(this,U,new Map);c(this,R,void 0);o(this,"subscriptions",new Map);o(this,"onMessage",e=>{let t=e.data;if(Ke(t))switch(t.type){case"pluginReadyResponse":{if(!e.source)throw new Error("No 'source' on incoming message: "+t.type);d(r(this,R)===t.mode,"Mode must match"),this.applyPluginTheme(t.theme),p(this,w,(s,a)=>window.parent.postMessage(s,e.origin,a));for(let s of r(this,B))r(this,w).call(this,...s);p(this,B,[]);break}case"methodResponse":{let i=r(this,U).get(t.id);if(!i)throw new Error(`No handler for response with id ${t.id}`);r(this,U).delete(t.id),t.error?i.reject(new X(t.error)):i.resolve(t.result);break}case"subscriptionMessage":{let{topic:i,payload:s}=t,a=this.subscriptions.get(i);if(!a)throw new Error("Received a subscription message but no handler present");for(let l of a)l(s);break}default:v(t)}});o(this,"applyPluginTheme",e=>{qe(()=>{document.body.setAttribute("data-framer-theme",e.mode);for(let t in e.tokens)document.body.style.setProperty(t,e.tokens[t])})});if(e){p(this,R,"default");return}let i=new URL(window.location.href).searchParams.get("mode");d(He(i),`Invalid mode: ${i}`),p(this,R,i),window.addEventListener("message",this.onMessage);let s={type:"pluginReadySignal",breakingChangesVersion:Ft};window.parent.postMessage(s,"*"),this.subscribe("theme",this.applyPluginTheme),window.addEventListener("pointerdown",()=>{this.invoke("onPointerDown")})}get mode(){return r(this,R)}invoke(e,...t){return this.invokeTransferable(e,void 0,...t)}invokeTransferable(e,t,...i){return new Promise((s,a)=>{let l={args:i,methodName:e,id:be(this,ye)._++,type:"methodInvocation"},T=s;r(this,U).set(l.id,{resolve:T,reject:a}),this.queueMessage(l,t)})}subscribe(e,t){this.queueMessage({type:"subscribe",topic:e});let i=this.subscriptions.get(e)??new Set;return i.add(t),this.subscriptions.set(e,i),()=>{let s=this.subscriptions.get(e)??new Set;s.delete(t),s.size===0&&this.queueMessage({type:"unsubscribe",topic:e}),this.subscriptions.set(e,s)}}queueMessage(e,t){if(!r(this,w)){r(this,B).push([e,t]);return}r(this,w).call(this,e,t)}async showUI(e){return this.invoke("showUI",e)}async hideUI(){return this.invoke("hideUI")}async closePlugin(e,t){return this.invoke("closePlugin",e,t)}async getCurrentUser(){return this.invoke("getCurrentUser")}async getSelection(){return(await this.invoke("getSelection")).map(t=>{let i=m(t,this);return d(pe(i)),i})}async setSelection(e){let t=u(e)?[e]:Array.from(e);return this.invoke("setSelection",t)}subscribeToSelection(e){return this.subscribe("selection",t=>{let i=t.map(s=>{let a=m(s,this);return d(pe(a)),a});e(i)})}async getCanvasRoot(){let e=await this.invoke("getCanvasRoot"),t=m(e,this);return d(De(t)),t}subscribeToCanvasRoot(e){return this.subscribe("canvasRoot",t=>{let i=m(t,this);d(De(i)),e(i)})}async getPublishInfo(){return this.invoke("getPublishInfo")}subscribeToPublishInfo(e){return this.subscribe("publishInfo",e)}async createFrameNode(e,t){let i=Ae(e),s=await this.invoke("createNode","FrameNode",t??null,i);if(!s)return null;let a=m(s,this);return d(a instanceof S),a}async removeNode(e){return this.invoke("removeNode",e)}async cloneNode(e){let t=await this.invoke("cloneNode",e);return t?m(t,this):null}async getNode(e){let t=await this.invoke("getNode",e);return t?m(t,this):null}async getParent(e){let t=await this.invoke("getParent",e);return t?m(t,this):null}async getChildren(e){return(await this.invoke("getChildren",e)).map(i=>{let s=m(i,this);return d(pe(s)),s})}async getRect(e){return this.invoke("getRect",e)}async zoomIntoView(e,t){let i=u(e)?[e]:Array.from(e);return this.invoke("zoomIntoView",i,t)}async setAttributes(e,t){let i=Ae(t),s=await this.invoke("setAttributes",e,i);return s?m(s,this):null}async setParent(e,t,i){return this.invoke("setParent",e,t,i)}async getNodesWithType(e){return(await this.invoke("getNodesWithType",null,e)).map(i=>m(i,this))}async getNodesWithAttribute(e){return(await this.invoke("getNodesWithAttribute",null,e)).map(i=>m(i,this))}async getNodesWithAttributeSet(e){return(await this.invoke("getNodesWithAttributeSet",null,e)).map(i=>m(i,this))}async getImage(){let e=await this.invoke("getImage");return e?new y(e,this):null}subscribeToImage(e){return this.subscribe("image",t=>{if(!t){e(null);return}e(new y(t,this))})}async addImage(e){let t=await $(e),i=V(t);return this.invokeTransferable("addImage",i,t)}async setImage(e){let t=await $(e),i=V(t);return this.invokeTransferable("setImage",i,t)}async uploadImage(e){let t=await $(e),i=V(t),s=await this.invokeTransferable("uploadImage",i,t);return new y(s,this)}async addImages(e){let t=await Ce(e),i=t.flatMap(V);await this.invokeTransferable("addImages",i,t)}async uploadImages(e){let t=await Ce(e),i=t.flatMap(V),s=await this.invokeTransferable("uploadImages",i,t),a=[];for(let l of s)a.push(new y(l,this));return a}async addSVG(e){return this.invoke("addSVG",e)}async addComponentInstance({url:e,attributes:t}){let i=A(t),s=await this.invoke("addComponentInstance",{url:e,attributes:h(i)?i:void 0}),a=m(s,this);return d(ge(a)),a}async addDetachedComponentLayers({url:e,layout:t,attributes:i}){let s=A(i),a=await this.invoke("addDetachedComponentLayers",{url:e,layout:t,attributes:h(s)?s:void 0}),l=m(a,this);return d(me(l)),l}async preloadDetachedComponentLayers(e){await this.invoke("preloadDetachedComponentLayers",e)}async preloadImageUrlForInsertion(e){await this.invoke("preloadImageUrlForInsertion",e)}async preloadDragPreviewImage(e){await this.invoke("preloadDragPreviewImage",e)}async getText(){return this.invoke("getText")}async setText(e){return this.invoke("setText",e)}async addText(e,t){return this.invoke("addText",e,t)}async setCustomCode(e){return this.invoke("setCustomCode",e)}async getCustomCode(){return this.invoke("getCustomCode")}subscribeToCustomCode(e){return this.subscribe("customCode",e)}subscribeToText(e){return this.subscribe("text",e)}makeDraggable(e,t){return ze(this,e,t)}async getCollection(){let e=await this.invoke("getCollection");return d(e,"Collection data must be defined"),new ce(e,this)}notify(e,t){let i=`notification-${be(this,fe)._++}`;return this.invoke("notify",e,{notificationId:i,variant:t?.variant??"info",buttonText:t?.button?.text,durationMs:t?.durationMs}).then(s=>{s==="actionButtonClicked"&&t?.button?.onClick&&t.button.onClick(),t?.onDisappear&&t.onDisappear()}),{close:()=>this.invoke("closeNotification",i)}}async getPluginData(e){return this.invoke("getPluginData",e)}async setPluginData(e,t){return this.invoke("setPluginData",e,t)}async getPluginDataKeys(){return this.invoke("getPluginDataKeys")}async getColorStyles(){return(await this.invoke("getColorStyles")).map(t=>new W(t,this))}async getColorStyle(e){let t=await this.invoke("getColorStyle",e);return t?new W(t,this):null}async createColorStyle(e){let t=await this.invoke("createColorStyle",e);return new W(t,this)}subscribeToColorStyles(e){return this.subscribe("colorStyles",t=>{let i=t.map(s=>new W(s,this));return e(i)})}};ye=new WeakMap,fe=new WeakMap,B=new WeakMap,w=new WeakMap,U=new WeakMap,R=new WeakMap;var We=new he;function we(n,e){let t=Vt(()=>ae(e)?e():e);Gt(()=>{let i=n.current;if(i instanceof HTMLElement)return We.makeDraggable(i,t)},[t])}function Vt(n){let e=Et(n);return e.current=n,Lt((...t)=>e.current(...t),[])}var Mt=_.forwardRef(function({data:e,children:t,...i},s){let a=_.useRef(null);if(we(a,e),_.isValidElement(t)){let l=Object.assign({},i);return h(t.props)&&Object.assign(l,t.props),l.ref=Ut(a,s,t.ref),_.cloneElement(t,l)}return _.Children.count(t)>1&&_.Children.only(t),null}),Ot="current";function Bt(n){return h(n)&&Ot in n}function Ut(...n){return e=>{for(let t of n)ae(t)?t(e):Bt(t)&&(t.current=e)}}var _t={fixed:!0,sticky:!0,absolute:!0,relative:!0},Ze="position";function Jn(n){if(!(Ze in n))return!1;let e=n[Ze];return u(e)&&_t[e]===!0}var Qe="top";function ei(n){if(!(Qe in n))return!1;let e=n[Qe];return u(e)||P(e)}var Je="width";function ti(n){if(!(Je in n))return!1;let e=n[Je];return u(e)||P(e)}var et="maxWidth";function ni(n){if(!(et in n))return!1;let e=n[et];return u(e)||P(e)}var tt="aspectRatio";function ii(n){if(!(tt in n))return!1;let e=n[tt];return se(e)||P(e)}var nt="name";function oi(n){if(!(nt in n))return!1;let e=n[nt];return u(e)||P(e)}var it="visible";function ri(n){if(!(it in n))return!1;let e=n[it];return Pe(e)}var ot="locked";function si(n){if(!(ot in n))return!1;let e=n[ot];return Pe(e)}var rt="backgroundColor";function ai(n){if(!(rt in n))return!1;let e=n[rt];return u(e)||P(e)}var st="backgroundImage";function di(n){if(!(st in n))return!1;let e=n[st];return e instanceof y||P(e)}var at="backgroundImage";function li(n){if(!(at in n))return!1;let e=n[at];return e instanceof y?!1:ue(e)||P(e)}var dt="backgroundGradient";function ui(n){if(!(dt in n))return!1;let e=n[dt];return j(e)||P(e)}var lt="backgroundGradient";function ci(n){if(!(lt in n))return!1;let e=n[lt];return h(e)||P(e)}var ut="rotation";function mi(n){if(!(ut in n))return!1;let e=n[ut];return se(e)}var ct="opacity";function gi(n){if(!(ct in n))return!1;let e=n[ct];return se(e)}var mt="borderRadius";function pi(n){if(!(mt in n))return!1;let e=n[mt];return u(e)||P(e)}var gt="svg";function hi(n){if(!(gt in n))return!1;let e=n[gt];return u(e)}export{Z as ComponentInstanceNode,J as ComponentNode,G as ConicGradient,Mt as Draggable,S as FrameNode,X as FramerPluginError,F as LinearGradient,L as RadialGradient,q as SVGNode,Y as TextNode,Q as WebPageNode,We as framer,ge as isComponentInstanceNode,Ye as isComponentNode,me as isFrameNode,Nt as isImageAsset,$e as isSVGNode,je as isTextNode,Xe as isWebPageNode,ii as supportsAspectRatio,ai as supportsBackgroundColor,ui as supportsBackgroundGradient,ci as supportsBackgroundGradientData,di as supportsBackgroundImage,li as supportsBackgroundImageData,pi as supportsBorderRadius,si as supportsLocked,oi as supportsName,gi as supportsOpacity,ei as supportsPins,Jn as supportsPosition,mi as supportsRotation,hi as supportsSVG,ti as supportsSize,ni as supportsSizeConstraints,ri as supportsVisible,we as useMakeDraggable};
+`))}catch{}throw t}var Ue="__class",Ie="LinearGradient",Ce="RadialGradient",ve="ConicGradient";function ue(n){if(!h(n))return!1;switch(n[Ue]){case Ie:case Ce:case ve:return!0;default:return!1}}function X(n){return n instanceof V||n instanceof G||n instanceof E}function _e(n){if(n instanceof V)return{__class:Ie,angle:n.angle,stops:n.stops};if(n instanceof G)return{__class:Ce,width:n.width,height:n.height,x:n.x,y:n.y,stops:n.stops};if(n instanceof E)return{__class:ve,angle:n.angle,x:n.x,y:n.y,stops:n.stops};S(n)}function ce(n){switch(n[Ue]){case Ie:return new V(n);case Ce:return new G(n);case ve:return new E(n);default:S(n)}}var V=class n{constructor(e){o(this,"angle");o(this,"stops");this.angle=e.angle,this.stops=e.stops,Object.freeze(this)}cloneWithAttributes(e){return new n({angle:e.angle??this.angle,stops:e.stops??this.stops})}toCSS(){let e=this.stops.map(t=>`${t.color} ${t.position*100}%`).join(", ");return`linear-gradient(${this.angle}deg, ${e})`}},G=class n{constructor(e){o(this,"width");o(this,"height");o(this,"x");o(this,"y");o(this,"stops");this.width=e.width,this.height=e.height,this.x=e.x,this.y=e.y,this.stops=e.stops,Object.freeze(this)}cloneWithAttributes(e){return new n({width:e.width??this.width,height:e.height??this.height,x:e.x??this.x,y:e.y??this.y,stops:e.stops??this.stops})}toCSS(){let e=this.stops.map((t,i)=>{let s=this.stops[i+1],a=t.position===1&&s?.position===1?t.position-1e-4:t.position;return`${t.color} ${a*100}%`}).join(", ");return`radial-gradient(${this.width} ${this.height} at ${this.x} ${this.y}, ${e})`}},E=class n{constructor(e){o(this,"angle");o(this,"x");o(this,"y");o(this,"stops");this.angle=e.angle,this.x=e.x,this.y=e.y,this.stops=e.stops,Object.freeze(this)}cloneWithAttributes(e){return new n({angle:e.angle??this.angle,x:e.x??this.x,y:e.y??this.y,stops:e.stops??this.stops})}toCSS(){let e=this.stops.map(t=>`${t.color} ${t.position*360}deg`).join(", ");return`conic-gradient(from ${this.angle}deg at ${this.x} ${this.y}, ${e})`}};var xt="invoke";function x(n){return xt in n}var Tt="ImageAsset",Nt="__class";function me(n){return h(n)?n[Nt]===Tt:!1}var k,M,ke=class ke{constructor(e,t){o(this,"id");o(this,"url");o(this,"thumbnailUrl");o(this,"altText");c(this,k,void 0);c(this,M,void 0);l(x(t)),this.url=e.url,m(this,M,t),this.id=e.id,this.thumbnailUrl=e.thumbnailUrl,this.altText=e.altText}async cloneWithAttributes({altText:e}){return new ke({__class:"ImageAsset",id:this.id,url:this.url,thumbnailUrl:this.thumbnailUrl,altText:e!==void 0?e:this.altText},r(this,M))}async measure(){return St(this.url)}async getData(){if(r(this,k)&&r(this,k).bytes.length>0)return r(this,k);let e=await r(this,M).invoke("getImageData",{id:this.id});if(!e)throw new Error("Failed to load image data");return m(this,k,e),e}async loadBitmap(){let{mimeType:e,bytes:t}=await this.getData(),i=new Blob([t],{type:e});return createImageBitmap(i)}async loadImage(){let e=await this.getData(),t=URL.createObjectURL(new Blob([e.bytes]));return new Promise((i,s)=>{let a=new Image;a.onload=()=>i(a),a.onerror=()=>s(),a.src=t})}};k=new WeakMap,M=new WeakMap;var y=ke;function It(n){return n instanceof y}function B(n){return n.type==="bytes"?[n.bytes.buffer]:[]}function Ct(n){if(!h(n))return!1;let e="bytes",t="mimeType";return!(!(e in n)||!(t in n)||!(n[e]instanceof Uint8Array)||!d(n[t]))}async function Y(n){return n instanceof File?ze(n):n.image instanceof File?ze(n.image):Ct(n.image)?{name:n.name,altText:n.altText,type:"bytes",mimeType:n.image.mimeType,bytes:n.image.bytes}:{name:n.name,altText:n.altText,type:"url",url:n.image}}function Se(n){return Promise.all(n.map(Y))}function vt(n){if(!n.startsWith("image/"))throw new Error(`Unsupported mime type: ${n}`)}async function ze(n){return new Promise((e,t)=>{let i=new FileReader;i.onload=s=>{let a=n.type;vt(n.type);let u=s.target?.result;if(!u||!(u instanceof ArrayBuffer)){t(new Error("Failed to read file, arrayBuffer is null"));return}let C=new Uint8Array(u);e({bytes:C,mimeType:a,type:"bytes"})},i.onerror=s=>{t(s)},i.readAsArrayBuffer(n)})}async function St(n){let e=n instanceof File,t=e?URL.createObjectURL(n):n,i=new Image;return i.crossOrigin="anonymous",i.src=t,await i.decode().finally(()=>{e&&URL.revokeObjectURL(t)}),{height:i.height,width:i.width}}function A(n){if(At(n))return Dt(n);if(Ne(n))return n.map(A);if(h(n)){let e={};for(let t in n)e[t]=A(n[t]);return e}return n}function He(n,e){let t={};for(let i in n)t[i]=Ae(n[i],e);return t}function Ae(n,e){if(kt(n))switch(n.__class){case"ImageAsset":return new y(n,e);case"LinearGradient":case"RadialGradient":case"ConicGradient":return ce(n);default:S(n)}if(h(n)){let t={};for(let i in n)t[i]=Ae(n[i],e);return t}return Ne(n)?n.map(t=>Ae(t,e)):n}function kt(n){return!!(me(n)||ue(n))}function At(n){return!!(n instanceof y||X(n))}function Dt(n){if(n instanceof y)return{__class:"ImageAsset",id:n.id,thumbnailUrl:n.thumbnailUrl,url:n.url,altText:n.altText};if(X(n))return _e(n);S(n)}var b,ge=class{constructor(e,t){o(this,"id");o(this,"name");c(this,b,void 0);l(d(e.id),"Node must have an id"),l(d(e.name),"Node must have a name"),this.id=e.id,this.name=e.name,l(x(t)),m(this,b,t),Object.freeze(this)}async getItemIds(){return r(this,b).invoke("getCollectionItemIds",this.id)}async setItemOrder(e){return r(this,b).invoke("setCollectionItemOrder",this.id,e)}async getFields(){return r(this,b).invoke("getCollectionFields",this.id)}async setFields(e){return r(this,b).invoke("setCollectionFields",this.id,e)}async addItems(e){return r(this,b).invoke("addCollectionItems",this.id,e)}async removeItems(e){return r(this,b).invoke("removeCollectionItems",this.id,e)}async setPluginData(e,t){return r(this,b).invoke("setPluginDataForNode",this.id,e,t)}async getPluginData(e){return r(this,b).invoke("getPluginDataForNode",this.id,e)}async getPluginDataKeys(){return r(this,b).invoke("getPluginDataKeysForNode",this.id)}};b=new WeakMap;var Wt=(()=>{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 e=()=>{n&&(document.head.removeChild(n),n=null,s())},t=a=>{a.buttons>0&&a.buttons&1||e()},i=()=>{e()};window.addEventListener("pointerup",t,!0),window.addEventListener("pointermove",t,!0),window.addEventListener("blur",i);function s(){window.removeEventListener("pointerup",t,!0),window.removeEventListener("pointermove",t,!0),window.removeEventListener("blur",i)}}}})(),Ke=5,wt=(()=>{let n=1;return{next:()=>`drag-${n++}`}})();function Rt(){}function je(n,e,t){if(n.mode!=="default")return Rt;l(x(n));let i=wt.next(),s=document.body.style.cursor,a={type:"idle"},u=document.body,C=p=>{a.type!=="idle"&&(a.type==="dragging"&&n.invoke("onDragEnd",{...p,dragSessionId:i}),a={type:"idle"},ft())},oe=p=>{if(a.type==="idle")return;if(!(p.buttons>0&&!!(p.buttons&1))){C({cancelled:!1});return}let{clientX:re,clientY:j}=p;if(a.type==="pointerDown"){let $=re-a.dragStart.mouse.x,Be=j-a.dragStart.mouse.y;if(Math.abs($)<Ke&&Math.abs(Be)<Ke)return;a={type:"dragging",dragStart:a.dragStart},n.invoke("onDragStart",a.dragStart),document.getSelection()?.empty(),Wt.disableUntilMouseUp()}u.setPointerCapture(p.pointerId);let se={x:re,y:j};n.invoke("onDrag",{dragSessionId:i,mouse:se}).then($=>{a.type==="dragging"&&(document.body.style.cursor=$??"")})},Ve=p=>{p.key==="Escape"&&C({cancelled:!0})},Ge=()=>{C({cancelled:!0})},Ee=p=>{C({cancelled:!0});let K=e.getBoundingClientRect(),re={x:K.x,y:K.y,width:K.width,height:K.height},j,se=e.querySelectorAll("svg");if(se.length===1){let ae=se.item(0).getBoundingClientRect();j={x:ae.x,y:ae.y,width:ae.width,height:ae.height}}let $={x:p.clientX,y:p.clientY};a={type:"pointerDown",dragStart:{dragSessionId:i,elementRect:re,svgRect:j,mouse:$}},n.invoke("setDragData",i,t()),u.addEventListener("pointermove",oe,!0),u.addEventListener("pointerup",oe,!0),window.addEventListener("keydown",Ve,!0),window.addEventListener("blur",Ge)},Me=()=>{let p=t();p.type==="detachedComponentLayers"&&n.invoke("preloadDetachedComponentLayers",p.url),p.type==="image"&&n.invoke("preloadImageUrlForInsertion",p.image),p.previewImage&&n.invoke("preloadDragPreviewImage",p.previewImage)};e.addEventListener("pointerdown",Ee),e.addEventListener("mouseenter",Me);function ft(){document.body.style.cursor=s,u.removeEventListener("pointermove",oe,!0),u.removeEventListener("pointerup",oe,!0),window.removeEventListener("keydown",Ve,!0),window.removeEventListener("blur",Ge)}return()=>{e.removeEventListener("pointerdown",Ee),e.removeEventListener("mouseenter",Me),C({cancelled:!0})}}var q=class extends Error{};var Ft={default:!0,image:!0,editImage:!0,configureCollection:!0,syncCollection:!0};function $e(n){return d(n)&&n in Ft}var Lt={methodResponse:!0,pluginReadyResponse:!0,subscriptionMessage:!0};function Vt(n){return d(n)&&n in Lt}function Xe(n){return h(n)&&Vt(n["type"])}var ie,f,T,v=class{constructor(e,t){o(this,"id");c(this,ie,void 0);c(this,f,void 0);c(this,T,void 0);l(d(e.id),"Node must have an id"),this.id=e.id,m(this,f,t),m(this,ie,e.originalId??null),l(x(t)),m(this,T,t)}get isReplica(){return r(this,ie)!==null}remove(){return r(this,f).removeNode(this.id)}select(){return r(this,f).setSelection([this.id])}clone(){return r(this,f).cloneNode(this.id)}setAttributes(e){return r(this,f).setAttributes(this.id,e)}getRect(){return r(this,f).getRect(this.id)}zoomIntoView(e){return r(this,f).zoomIntoView([this.id],e)}getParent(){return r(this,f).getParent(this.id)}getChildren(){return D(this)?Promise.resolve([]):r(this,f).getChildren(this.id)}async getNodesWithType(e){return D(this)?Promise.resolve([]):(await r(this,T).invoke("getNodesWithType",this.id,e)).map(i=>g(i,r(this,f)))}async getNodesWithAttribute(e){return D(this)?Promise.resolve([]):(await r(this,T).invoke("getNodesWithAttribute",this.id,e)).map(i=>g(i,r(this,f)))}async getNodesWithAttributeSet(e){return D(this)?Promise.resolve([]):(await r(this,T).invoke("getNodesWithAttributeSet",this.id,e)).map(i=>g(i,r(this,f)))}async*walk(){if(yield this,!D(this))for(let e of await this.getChildren())yield*e.walk()}async getPluginData(e){return r(this,T).invoke("getPluginDataForNode",this.id,e)}async setPluginData(e,t){return r(this,T).invoke("setPluginDataForNode",this.id,e,t)}async getPluginDataKeys(){return r(this,T).invoke("getPluginDataKeysForNode",this.id)}};ie=new WeakMap,f=new WeakMap,T=new WeakMap;var W=class extends v{constructor(t,i){super(t,i);o(this,"__class","FrameNode");o(this,"name");o(this,"visible");o(this,"locked");o(this,"backgroundColor");o(this,"backgroundImage");o(this,"backgroundGradient");o(this,"rotation");o(this,"opacity");o(this,"borderRadius");o(this,"position");o(this,"top");o(this,"right");o(this,"bottom");o(this,"left");o(this,"centerX");o(this,"centerY");o(this,"width");o(this,"height");o(this,"maxWidth");o(this,"minWidth");o(this,"maxHeight");o(this,"minHeight");o(this,"aspectRatio");l(t.__class==="FrameNode","FrameNode must have a __class property"),this.name=t.name??null,this.visible=t.visible??!0,this.locked=t.locked??!1,this.backgroundColor=t.backgroundColor??null,this.backgroundImage=t.backgroundImage?new y(t.backgroundImage,i):null,this.rotation=t.rotation??0,this.opacity=t.opacity??1,this.borderRadius=t.borderRadius??null,this.backgroundGradient=ue(t.backgroundGradient)?ce(t.backgroundGradient):null,l(t.position,"Must have a position"),this.position=t.position,this.left=t.left??null,this.right=t.right??null,this.top=t.top??null,this.bottom=t.bottom??null,this.centerX=t.centerX??null,this.centerY=t.centerY??null,this.width=t.width??null,this.height=t.height??null,this.maxWidth=t.maxWidth??null,this.minWidth=t.minWidth??null,this.maxHeight=t.maxHeight??null,this.minHeight=t.minHeight??null,this.aspectRatio=t.aspectRatio??null,Object.freeze(this)}clone(){return super.clone()}setAttributes(t){return super.setAttributes(t)}},O,Z=class extends v{constructor(t,i){super(t,i);o(this,"__class","TextNode");o(this,"name");o(this,"visible");o(this,"locked");o(this,"rotation");o(this,"opacity");o(this,"position");o(this,"top");o(this,"right");o(this,"bottom");o(this,"left");o(this,"centerX");o(this,"centerY");o(this,"width");o(this,"height");o(this,"maxWidth");o(this,"minWidth");o(this,"maxHeight");o(this,"minHeight");c(this,O,void 0);l(x(i)),m(this,O,i),this.name=t.name??null,this.visible=t.visible??!0,this.locked=t.locked??!1,this.rotation=t.rotation??0,this.opacity=t.opacity??1,l(t.position,"Must have a position"),this.position=t.position,this.left=t.left??null,this.right=t.right??null,this.top=t.top??null,this.bottom=t.bottom??null,this.centerX=t.centerX??null,this.centerY=t.centerY??null,this.width=t.width??null,this.height=t.height??null,this.maxWidth=t.maxWidth??null,this.minWidth=t.minWidth??null,this.maxHeight=t.maxHeight??null,this.minHeight=t.minHeight??null,Object.freeze(this)}clone(){return super.clone()}setAttributes(t){return super.setAttributes(t)}async setText(t){await r(this,O).invoke("setTextForNode",this.id,t)}async getText(){return r(this,O).invoke("getTextForNode",this.id)}};O=new WeakMap;var Q=class extends v{constructor(t,i){super(t,i);o(this,"__class","SVGNode");o(this,"name");o(this,"visible");o(this,"locked");o(this,"svg");o(this,"rotation");o(this,"opacity");o(this,"position");o(this,"top");o(this,"right");o(this,"bottom");o(this,"left");o(this,"centerX");o(this,"centerY");o(this,"width");o(this,"height");l(t.svg,"SVG node must have a non-empty SVG string"),this.name=t.name??null,this.visible=t.visible??!0,this.locked=t.locked??!1,this.svg=t.svg,this.rotation=t.rotation??0,this.opacity=t.opacity??1,l(t.position,"Must have a position"),this.position=t.position??null,this.left=t.left??null,this.right=t.right??null,this.top=t.top??null,this.bottom=t.bottom??null,this.centerX=t.centerX??null,this.centerY=t.centerY??null,this.width=t.width??null,this.height=t.height??null,Object.freeze(this)}clone(){return super.clone()}setAttributes(t){return super.setAttributes(t)}},J=class extends v{constructor(t,i){super(t,i);o(this,"__class","ComponentInstanceNode");o(this,"name");o(this,"visible");o(this,"locked");o(this,"componentIdentifier");o(this,"controls");o(this,"rotation");o(this,"opacity");o(this,"position");o(this,"top");o(this,"right");o(this,"bottom");o(this,"left");o(this,"centerX");o(this,"centerY");o(this,"width");o(this,"height");o(this,"maxWidth");o(this,"minWidth");o(this,"maxHeight");o(this,"minHeight");o(this,"aspectRatio");l(t.componentIdentifier,"ComponentInstance node must have a component identifier"),this.name=t.name??null,this.visible=t.visible??!0,this.locked=t.locked??!1,this.componentIdentifier=t.componentIdentifier,this.controls=He(t.controls??{},i),this.rotation=t.rotation??0,this.opacity=t.opacity??1,l(t.position,"Must have a position"),this.position=t.position,this.left=t.left??null,this.right=t.right??null,this.top=t.top??null,this.bottom=t.bottom??null,this.centerX=t.centerX??null,this.centerY=t.centerY??null,this.width=t.width??null,this.height=t.height??null,this.maxWidth=t.maxWidth??null,this.minWidth=t.minWidth??null,this.maxHeight=t.maxHeight??null,this.minHeight=t.minHeight??null,this.aspectRatio=t.aspectRatio??null,Object.freeze(this)}clone(){return super.clone()}setAttributes(t){return super.setAttributes(t)}},ee=class extends v{constructor(t,i){super(t,i);o(this,"_class","WebPageNode");Object.freeze(this)}clone(){return super.clone()}setAttributes(t){return super.setAttributes(t)}},te=class extends v{constructor(t,i){super(t,i);o(this,"__class","ComponentNode");o(this,"name");this.name=t.name??null,Object.freeze(this)}clone(){return super.clone()}setAttributes(t){return super.setAttributes(t)}},ne=class extends v{constructor(t,i){super(t,i);o(this,"__class","UnknownNode");Object.freeze(this)}clone(){throw Error("Can not clone unknown node")}setAttributes(t){throw Error("Can not set attributes on unknown node")}};function g(n,e){switch(n.__class){case"WebPageNode":return new ee(n,e);case"ComponentNode":return new te(n,e);case"ComponentInstanceNode":return new J(n,e);case"FrameNode":return new W(n,e);case"SVGNode":return new Q(n,e);case"TextNode":return new Z(n,e);case"UnknownNode":return new ne(n,e);default:return new ne(n,e)}}function De(n){return A(n)}function pe(n){return n instanceof W}function Ye(n){return n instanceof Z}function qe(n){return n instanceof Q}function he(n){return n instanceof J}function Ze(n){return n instanceof ee}function Qe(n){return n instanceof te}function D(n){return n instanceof ne}function ye(n){return!!(pe(n)||Ye(n)||he(n)||qe(n)||D(n))}function We(n){return!!(Ze(n)||Qe(n)||D(n))}var N,we=class we{constructor(e,t){o(this,"id");o(this,"name");o(this,"light");o(this,"dark");c(this,N,void 0);l(d(e.id),"Node must have an id"),this.id=e.id,this.name=e.name,this.light=e.light,this.dark=e.dark,l(x(t)),m(this,N,t)}async setAttributes(e){let t=await r(this,N).invoke("setColorStyleAttributes",this.id,e);return t?new we(t,r(this,N)):null}async getPluginData(e){return r(this,N).invoke("getPluginDataForNode",this.id,e)}async setPluginData(e,t){return r(this,N).invoke("setPluginDataForNode",this.id,e,t)}async getPluginDataKeys(){return r(this,N).invoke("getPluginDataKeysForNode",this.id)}async remove(){return r(this,N).invoke("removeColorStyle",this.id)}};N=new WeakMap;var w=we,I,Re=class Re{constructor(e,t){o(this,"id");o(this,"name");o(this,"tag");o(this,"color");o(this,"transform");o(this,"alignment");o(this,"decoration");o(this,"balance");o(this,"breakpoints");o(this,"minWidth");o(this,"fontSize");o(this,"letterSpacing");o(this,"lineHeight");o(this,"paragraphSpacing");c(this,I,void 0);l(d(e.id),"Node must have an id"),this.id=e.id,this.name=e.name,this.tag=e.tag,this.color=e.color,this.transform=e.transform,this.alignment=e.alignment,this.decoration=e.decoration,this.balance=e.balance,this.breakpoints=e.breakpoints,this.minWidth=e.minWidth,this.fontSize=e.fontSize,this.letterSpacing=e.letterSpacing,this.lineHeight=e.lineHeight,this.paragraphSpacing=e.paragraphSpacing,l(x(t)),m(this,I,t)}async setAttributes(e){let t=await r(this,I).invoke("setTextStyleAttributes",this.id,e);return new Re(t,r(this,I))}async getPluginData(e){return r(this,I).invoke("getPluginDataForNode",this.id,e)}async setPluginData(e,t){return r(this,I).invoke("setPluginDataForNode",this.id,e,t)}async getPluginDataKeys(){return r(this,I).invoke("getPluginDataKeysForNode",this.id)}async remove(){return r(this,I).invoke("removeTextStyle",this.id)}};I=new WeakMap;var R=Re;var U=null;function Je(n){if(!U){let t=document.createElement("style");document.head.appendChild(t),U=t.sheet}if(!U){n();return}let e=U.insertRule("* { transition: none !important; animation: none !important; }");n(),requestAnimationFrame(()=>{requestAnimationFrame(()=>{U&&U.deleteRule(e)})})}var Gt=1,be,Pe,_,F,z,L,fe=class{constructor({isTestEnv:e}={}){c(this,be,0);c(this,Pe,0);c(this,_,[]);c(this,F,void 0);c(this,z,new Map);c(this,L,void 0);o(this,"subscriptions",new Map);o(this,"onMessage",e=>{let t=e.data;if(Xe(t))switch(t.type){case"pluginReadyResponse":{if(!e.source)throw new Error("No 'source' on incoming message: "+t.type);l(r(this,L)===t.mode,"Mode must match"),this.applyPluginTheme(t.theme),m(this,F,(s,a)=>window.parent.postMessage(s,e.origin,a));for(let s of r(this,_))r(this,F).call(this,...s);m(this,_,[]);break}case"methodResponse":{let i=r(this,z).get(t.id);if(!i)throw new Error(`No handler for response with id ${t.id}`);r(this,z).delete(t.id),t.error?i.reject(new q(t.error)):i.resolve(t.result);break}case"subscriptionMessage":{let{topic:i,payload:s}=t,a=this.subscriptions.get(i);if(!a)throw new Error("Received a subscription message but no handler present");for(let u of a)u(s);break}default:S(t)}});o(this,"applyPluginTheme",e=>{Je(()=>{document.body.setAttribute("data-framer-theme",e.mode);for(let t in e.tokens)document.body.style.setProperty(t,e.tokens[t])})});if(e){m(this,L,"default");return}let i=new URL(window.location.href).searchParams.get("mode");l($e(i),`Invalid mode: ${i}`),m(this,L,i),window.addEventListener("message",this.onMessage);let s={type:"pluginReadySignal",breakingChangesVersion:Gt};window.parent.postMessage(s,"*"),this.subscribe("theme",this.applyPluginTheme),window.addEventListener("pointerdown",()=>{this.invoke("onPointerDown")})}get mode(){return r(this,L)}invoke(e,...t){return this.invokeTransferable(e,void 0,...t)}invokeTransferable(e,t,...i){return new Promise((s,a)=>{let u={args:i,methodName:e,id:xe(this,be)._++,type:"methodInvocation"},C=s;r(this,z).set(u.id,{resolve:C,reject:a}),this.queueMessage(u,t)})}subscribe(e,t){this.queueMessage({type:"subscribe",topic:e});let i=this.subscriptions.get(e)??new Set;return i.add(t),this.subscriptions.set(e,i),()=>{let s=this.subscriptions.get(e)??new Set;s.delete(t),s.size===0&&this.queueMessage({type:"unsubscribe",topic:e}),this.subscriptions.set(e,s)}}queueMessage(e,t){if(!r(this,F)){r(this,_).push([e,t]);return}r(this,F).call(this,e,t)}async showUI(e){return this.invoke("showUI",e)}async hideUI(){return this.invoke("hideUI")}async closePlugin(e,t){return this.invoke("closePlugin",e,t)}async getCurrentUser(){return this.invoke("getCurrentUser")}async getSelection(){return(await this.invoke("getSelection")).map(t=>{let i=g(t,this);return l(ye(i)),i})}async setSelection(e){let t=d(e)?[e]:Array.from(e);return this.invoke("setSelection",t)}subscribeToSelection(e){return this.subscribe("selection",t=>{let i=t.map(s=>{let a=g(s,this);return l(ye(a)),a});e(i)})}async getCanvasRoot(){let e=await this.invoke("getCanvasRoot"),t=g(e,this);return l(We(t)),t}subscribeToCanvasRoot(e){return this.subscribe("canvasRoot",t=>{let i=g(t,this);l(We(i)),e(i)})}async getPublishInfo(){return this.invoke("getPublishInfo")}subscribeToPublishInfo(e){return this.subscribe("publishInfo",e)}async createFrameNode(e,t){let i=De(e),s=await this.invoke("createNode","FrameNode",t??null,i);if(!s)return null;let a=g(s,this);return l(a instanceof W),a}async removeNode(e){return this.invoke("removeNode",e)}async cloneNode(e){let t=await this.invoke("cloneNode",e);return t?g(t,this):null}async getNode(e){let t=await this.invoke("getNode",e);return t?g(t,this):null}async getParent(e){let t=await this.invoke("getParent",e);return t?g(t,this):null}async getChildren(e){return(await this.invoke("getChildren",e)).map(i=>{let s=g(i,this);return l(ye(s)),s})}async getRect(e){return this.invoke("getRect",e)}async zoomIntoView(e,t){let i=d(e)?[e]:Array.from(e);return this.invoke("zoomIntoView",i,t)}async setAttributes(e,t){let i=De(t),s=await this.invoke("setAttributes",e,i);return s?g(s,this):null}async setParent(e,t,i){return this.invoke("setParent",e,t,i)}async getNodesWithType(e){return(await this.invoke("getNodesWithType",null,e)).map(i=>g(i,this))}async getNodesWithAttribute(e){return(await this.invoke("getNodesWithAttribute",null,e)).map(i=>g(i,this))}async getNodesWithAttributeSet(e){return(await this.invoke("getNodesWithAttributeSet",null,e)).map(i=>g(i,this))}async getImage(){let e=await this.invoke("getImage");return e?new y(e,this):null}subscribeToImage(e){return this.subscribe("image",t=>{if(!t){e(null);return}e(new y(t,this))})}async addImage(e){let t=await Y(e),i=B(t);return this.invokeTransferable("addImage",i,t)}async setImage(e){let t=await Y(e),i=B(t);return this.invokeTransferable("setImage",i,t)}async uploadImage(e){let t=await Y(e),i=B(t),s=await this.invokeTransferable("uploadImage",i,t);return new y(s,this)}async addImages(e){let t=await Se(e),i=t.flatMap(B);await this.invokeTransferable("addImages",i,t)}async uploadImages(e){let t=await Se(e),i=t.flatMap(B),s=await this.invokeTransferable("uploadImages",i,t),a=[];for(let u of s)a.push(new y(u,this));return a}async addSVG(e){return this.invoke("addSVG",e)}async addComponentInstance({url:e,attributes:t}){let i=A(t),s=await this.invoke("addComponentInstance",{url:e,attributes:h(i)?i:void 0}),a=g(s,this);return l(he(a)),a}async addDetachedComponentLayers({url:e,layout:t,attributes:i}){let s=A(i),a=await this.invoke("addDetachedComponentLayers",{url:e,layout:t,attributes:h(s)?s:void 0}),u=g(a,this);return l(pe(u)),u}async preloadDetachedComponentLayers(e){await this.invoke("preloadDetachedComponentLayers",e)}async preloadImageUrlForInsertion(e){await this.invoke("preloadImageUrlForInsertion",e)}async preloadDragPreviewImage(e){await this.invoke("preloadDragPreviewImage",e)}async getText(){return this.invoke("getText")}async setText(e){return this.invoke("setText",e)}async addText(e,t){return this.invoke("addText",e,t)}async setCustomCode(e){return this.invoke("setCustomCode",e)}async getCustomCode(){return this.invoke("getCustomCode")}subscribeToCustomCode(e){return this.subscribe("customCode",e)}subscribeToText(e){return this.subscribe("text",e)}makeDraggable(e,t){return je(this,e,t)}async getCollection(){let e=await this.invoke("getCollection");return l(e,"Collection data must be defined"),new ge(e,this)}notify(e,t){let i=`notification-${xe(this,Pe)._++}`;return this.invoke("notify",e,{notificationId:i,variant:t?.variant??"info",buttonText:t?.button?.text,durationMs:t?.durationMs}).then(s=>{s==="actionButtonClicked"&&t?.button?.onClick&&t.button.onClick(),t?.onDisappear&&t.onDisappear()}),{close:()=>this.invoke("closeNotification",i)}}async getPluginData(e){return this.invoke("getPluginData",e)}async setPluginData(e,t){return this.invoke("setPluginData",e,t)}async getPluginDataKeys(){return this.invoke("getPluginDataKeys")}async getColorStyles(){return(await this.invoke("getColorStyles")).map(t=>new w(t,this))}async getColorStyle(e){let t=await this.invoke("getColorStyle",e);return t?new w(t,this):null}async createColorStyle(e){let t=await this.invoke("createColorStyle",e);return new w(t,this)}subscribeToColorStyles(e){return this.subscribe("colorStyles",t=>{let i=t.map(s=>new w(s,this));return e(i)})}async getTextStyles(){return(await this.invoke("getTextStyles")).map(t=>new R(t,this))}async getTextStyle(e){let t=await this.invoke("getTextStyle",e);return t?new R(t,this):null}async createTextStyle(e){let t=await this.invoke("createTextStyle",e);return new R(t,this)}subscribeToTextStyles(e){return this.subscribe("textStyles",t=>{let i=t.map(s=>new R(s,this));return e(i)})}};be=new WeakMap,Pe=new WeakMap,_=new WeakMap,F=new WeakMap,z=new WeakMap,L=new WeakMap;var Fe=new fe;function Le(n,e){let t=Ot(()=>de(e)?e():e);Mt(()=>{let i=n.current;if(i instanceof HTMLElement)return Fe.makeDraggable(i,t)},[t])}function Ot(n){let e=Bt(n);return e.current=n,Et((...t)=>e.current(...t),[])}var Ut=H.forwardRef(function({data:e,children:t,...i},s){let a=H.useRef(null);if(Le(a,e),H.isValidElement(t)){let u=Object.assign({},i);return h(t.props)&&Object.assign(u,t.props),u.ref=Ht(a,s,t.ref),H.cloneElement(t,u)}return H.Children.count(t)>1&&H.Children.only(t),null}),_t="current";function zt(n){return h(n)&&_t in n}function Ht(...n){return e=>{for(let t of n)de(t)?t(e):zt(t)&&(t.current=e)}}var Kt={fixed:!0,sticky:!0,absolute:!0,relative:!0},et="position";function ni(n){if(!(et in n))return!1;let e=n[et];return d(e)&&Kt[e]===!0}var tt="top";function ii(n){if(!(tt in n))return!1;let e=n[tt];return d(e)||P(e)}var nt="width";function oi(n){if(!(nt in n))return!1;let e=n[nt];return d(e)||P(e)}var it="maxWidth";function ri(n){if(!(it in n))return!1;let e=n[it];return d(e)||P(e)}var ot="aspectRatio";function si(n){if(!(ot in n))return!1;let e=n[ot];return le(e)||P(e)}var rt="name";function ai(n){if(!(rt in n))return!1;let e=n[rt];return d(e)||P(e)}var st="visible";function li(n){if(!(st in n))return!1;let e=n[st];return Te(e)}var at="locked";function di(n){if(!(at in n))return!1;let e=n[at];return Te(e)}var lt="backgroundColor";function ui(n){if(!(lt in n))return!1;let e=n[lt];return d(e)||P(e)}var dt="backgroundImage";function ci(n){if(!(dt in n))return!1;let e=n[dt];return e instanceof y||P(e)}var ut="backgroundImage";function mi(n){if(!(ut in n))return!1;let e=n[ut];return e instanceof y?!1:me(e)||P(e)}var ct="backgroundGradient";function gi(n){if(!(ct in n))return!1;let e=n[ct];return X(e)||P(e)}var mt="backgroundGradient";function pi(n){if(!(mt in n))return!1;let e=n[mt];return h(e)||P(e)}var gt="rotation";function hi(n){if(!(gt in n))return!1;let e=n[gt];return le(e)}var pt="opacity";function yi(n){if(!(pt in n))return!1;let e=n[pt];return le(e)}var ht="borderRadius";function fi(n){if(!(ht in n))return!1;let e=n[ht];return d(e)||P(e)}var yt="svg";function bi(n){if(!(yt in n))return!1;let e=n[yt];return d(e)}export{J as ComponentInstanceNode,te as ComponentNode,E as ConicGradient,Ut as Draggable,W as FrameNode,q as FramerPluginError,V as LinearGradient,G as RadialGradient,Q as SVGNode,Z as TextNode,ee as WebPageNode,Fe as framer,he as isComponentInstanceNode,Qe as isComponentNode,pe as isFrameNode,It as isImageAsset,qe as isSVGNode,Ye as isTextNode,Ze as isWebPageNode,si as supportsAspectRatio,ui as supportsBackgroundColor,gi as supportsBackgroundGradient,pi as supportsBackgroundGradientData,ci as supportsBackgroundImage,mi as supportsBackgroundImageData,fi as supportsBorderRadius,di as supportsLocked,ai as supportsName,yi as supportsOpacity,ii as supportsPins,ni as supportsPosition,hi as supportsRotation,bi as supportsSVG,oi as supportsSize,ri as supportsSizeConstraints,li as supportsVisible,Le as useMakeDraggable};

package.json

 {
     "name": "framer-plugin",
-    "version": "0.2.6",
+    "version": "0.2.7",
     "type": "module",
@@ -5,0 +5,0 @@ "main": "src/index.ts",

src/index.ts

@@ -39,3 +39,4 @@ export type { ImageAsset } from "./image"
 } from "./collections"
-export type { ColorStyle } from "./styles"
+export type { TextTransform, TextAlignment, TextDecoration } from "./text"
+export type { ColorStyle, TextStyle, TextStyleBreakpoint, TextStyleTag } from "./styles"
 export { framer } from "./framer"
@@ -42,0 +43,0 @@ export { isImageAsset } from "./image"

No alert changes

Improved metrics

Total package byte prevSize

259765

increased by7.66%

Lines of code

1586

increased by8.56%

No dependency changes