framer-plugin - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5

dist/index.d.ts

 import React, { RefObject } from 'react';
 
-type CustomCodeLocation = "headStart" | "headEnd" | "bodyStart" | "bodyEnd";
-interface SetCustomCodeOptions {
-    html: string | null;
-    location: CustomCodeLocation;
-}
-type CustomCode = Record<CustomCodeLocation, {
-    disabled: boolean;
-    html: string | null;
-}>;
-
-type NodeId = string;
-interface WithId {
-    readonly id: NodeId;
-}
-interface WithChildren {
-    readonly children: Record<string, unknown>[] | null;
-}
-interface WithName {
-    readonly name: string | null;
-}
-interface WithVisible {
-    readonly visible: boolean;
-}
-interface WithLocked {
-    readonly locked: boolean;
-}
-interface WithBackgroundColor {
-    readonly backgroundColor: string | null;
-}
-interface WithBackgroundImage<T extends TraitVariant> {
-    readonly backgroundImage: (T extends TraitVariantData ? ImageAssetData : ImageAsset) | null;
-}
-interface WithBackgroundGradient {
-    readonly backgroundGradient: string | null;
-}
-interface WithRotation {
-    readonly rotation: number;
-}
-interface WithOpacity {
-    readonly opacity: number;
-}
-type BorderRadius = `${number}%` | `${number}px` | `${number}px ${number}px ${number}px ${number}px` | null;
-interface WithBorderRadius {
-    readonly borderRadius: BorderRadius;
-}
-interface WithComponentIdentifier {
-    readonly componentIdentifier: string;
-}
-type ControlAttributes = Record<string, unknown>;
-interface WithControlAttributes {
-    readonly controlAttributes: ControlAttributes;
-}
-interface WithSVG {
-    readonly svg: string;
-}
-type Position = "relative" | "absolute" | "fixed" | "sticky";
-interface WithPosition {
-    position: Position;
-}
-type PixelLength = `${number}px`;
-type PercentageLength = `${number}%`;
-type FractionalLength = `${number}fr`;
-type ViewportWidthLength = `${number}vw`;
-type ViewportHeightLength = `${number}vh`;
-type FitContent = "fit-content";
-interface WithPins {
-    top: PixelLength | null;
-    right: PixelLength | null;
-    bottom: PixelLength | null;
-    left: PixelLength | null;
-    centerX: PercentageLength | null;
-    centerY: PercentageLength | null;
-}
-type Length = PixelLength | PercentageLength | FractionalLength;
-type WidthLength = Length | FitContent;
-type HeightLength = Length | FitContent | ViewportHeightLength;
-interface WithSize {
-    width: WidthLength | null;
-    height: HeightLength | null;
-}
-interface WithAspectRatio {
-    aspectRatio: number | null;
-}
-type WidthConstraint = PixelLength | PercentageLength;
-type HeightConstraint = PixelLength | PercentageLength | ViewportHeightLength;
-interface WithSizeConstraints {
-    maxWidth: WidthConstraint | null;
-    minWidth: WidthConstraint | null;
-    maxHeight: HeightConstraint | null;
-    minHeight: HeightConstraint | null;
-}
-type TraitVariantData = "data";
-type TraitVariantNode = "node";
-type TraitVariant = TraitVariantData | TraitVariantNode;
-interface AllTraits<T extends TraitVariant = TraitVariant> extends WithId, WithChildren, WithName, WithVisible, WithLocked, WithBackgroundColor, WithBackgroundImage<T>, WithBackgroundGradient, WithRotation, WithOpacity, WithBorderRadius, WithComponentIdentifier, WithControlAttributes, WithSVG, WithPosition, WithPins, WithSize, WithSizeConstraints, WithAspectRatio {
-}
-type PartialNodeData = AnyNode | Partial<AnyNodeData>;
-declare function withPosition<T extends PartialNodeData>(node: T): node is T & WithPosition;
-declare function withPins<T extends PartialNodeData>(node: T): node is T & WithPins;
-declare function withSize<T extends PartialNodeData>(node: T): node is T & WithSize;
-declare function withSizeConstraints<T extends PartialNodeData>(node: T): node is T & WithSizeConstraints;
-declare function withAspectRatio<T extends PartialNodeData>(node: T): node is T & WithAspectRatio;
-declare function withName<T extends PartialNodeData>(node: T): node is T & WithName;
-declare function withVisible<T extends PartialNodeData>(node: T): node is T & WithVisible;
-declare function withLocked<T extends PartialNodeData>(node: T): node is T & WithLocked;
-declare function withBackgroundColor<T extends PartialNodeData>(node: T): node is T & WithBackgroundColor;
-declare function withBackgroundImage<T extends AnyNode>(node: T): node is T & WithBackgroundImage<TraitVariantNode>;
-declare function withBackgroundImageData<T extends Partial<AnyNodeData>>(node: T): node is T & WithBackgroundImage<TraitVariantData>;
-declare function withBackgroundGradient<T extends PartialNodeData>(node: T): node is T & WithBackgroundGradient;
-declare function withRotation<T extends PartialNodeData>(node: T): node is T & WithRotation;
-declare function withOpacity<T extends PartialNodeData>(node: T): node is T & WithOpacity;
-declare function withBorderRadius<T extends PartialNodeData>(node: T): node is T & WithBorderRadius;
-declare function withSVG<T extends PartialNodeData>(node: T): node is T & WithSVG;
-
 interface Rect {
@@ -319,2 +205,193 @@ x: number;
 
+type NodeId = string;
+interface WithId {
+    readonly id: NodeId;
+}
+interface WithChildren {
+    readonly children: Record<string, unknown>[] | null;
+}
+interface WithName {
+    readonly name: string | null;
+}
+interface WithVisible {
+    readonly visible: boolean;
+}
+interface WithLocked {
+    readonly locked: boolean;
+}
+interface WithBackgroundColor {
+    readonly backgroundColor: string | null;
+}
+interface WithBackgroundImage<T extends TraitVariant> {
+    readonly backgroundImage: (T extends TraitVariantData ? ImageAssetData : ImageAsset) | null;
+}
+interface WithBackgroundGradient {
+    readonly backgroundGradient: string | null;
+}
+interface WithRotation {
+    readonly rotation: number;
+}
+interface WithOpacity {
+    readonly opacity: number;
+}
+type BorderRadius = `${number}%` | `${number}px` | `${number}px ${number}px ${number}px ${number}px` | null;
+interface WithBorderRadius {
+    readonly borderRadius: BorderRadius;
+}
+interface WithComponentIdentifier {
+    readonly componentIdentifier: string;
+}
+type ControlAttributes = Record<string, unknown>;
+interface WithControlAttributes {
+    readonly controlAttributes: ControlAttributes;
+}
+interface WithSVG {
+    readonly svg: string;
+}
+type Position = "relative" | "absolute" | "fixed" | "sticky";
+interface WithPosition {
+    position: Position;
+}
+type PixelLength = `${number}px`;
+type PercentageLength = `${number}%`;
+type FractionalLength = `${number}fr`;
+type ViewportWidthLength = `${number}vw`;
+type ViewportHeightLength = `${number}vh`;
+type FitContent = "fit-content";
+interface WithPins {
+    top: PixelLength | null;
+    right: PixelLength | null;
+    bottom: PixelLength | null;
+    left: PixelLength | null;
+    centerX: PercentageLength | null;
+    centerY: PercentageLength | null;
+}
+type Length = PixelLength | PercentageLength | FractionalLength;
+type WidthLength = Length | FitContent;
+type HeightLength = Length | FitContent | ViewportHeightLength;
+interface WithSize {
+    width: WidthLength | null;
+    height: HeightLength | null;
+}
+interface WithAspectRatio {
+    aspectRatio: number | null;
+}
+type WidthConstraint = PixelLength | PercentageLength;
+type HeightConstraint = PixelLength | PercentageLength | ViewportHeightLength;
+interface WithSizeConstraints {
+    maxWidth: WidthConstraint | null;
+    minWidth: WidthConstraint | null;
+    maxHeight: HeightConstraint | null;
+    minHeight: HeightConstraint | null;
+}
+type TraitVariantData = "data";
+type TraitVariantNode = "node";
+type TraitVariant = TraitVariantData | TraitVariantNode;
+interface AllTraits<T extends TraitVariant = TraitVariant> extends WithId, WithChildren, WithName, WithVisible, WithLocked, WithBackgroundColor, WithBackgroundImage<T>, WithBackgroundGradient, WithRotation, WithOpacity, WithBorderRadius, WithComponentIdentifier, WithControlAttributes, WithSVG, WithPosition, WithPins, WithSize, WithSizeConstraints, WithAspectRatio {
+}
+type PartialNodeData = AnyNode | Partial<AnyNodeData>;
+declare function withPosition<T extends PartialNodeData>(node: T): node is T & WithPosition;
+declare function withPins<T extends PartialNodeData>(node: T): node is T & WithPins;
+declare function withSize<T extends PartialNodeData>(node: T): node is T & WithSize;
+declare function withSizeConstraints<T extends PartialNodeData>(node: T): node is T & WithSizeConstraints;
+declare function withAspectRatio<T extends PartialNodeData>(node: T): node is T & WithAspectRatio;
+declare function withName<T extends PartialNodeData>(node: T): node is T & WithName;
+declare function withVisible<T extends PartialNodeData>(node: T): node is T & WithVisible;
+declare function withLocked<T extends PartialNodeData>(node: T): node is T & WithLocked;
+declare function withBackgroundColor<T extends PartialNodeData>(node: T): node is T & WithBackgroundColor;
+declare function withBackgroundImage<T extends AnyNode>(node: T): node is T & WithBackgroundImage<TraitVariantNode>;
+declare function withBackgroundImageData<T extends Partial<AnyNodeData>>(node: T): node is T & WithBackgroundImage<TraitVariantData>;
+declare function withBackgroundGradient<T extends PartialNodeData>(node: T): node is T & WithBackgroundGradient;
+declare function withRotation<T extends PartialNodeData>(node: T): node is T & WithRotation;
+declare function withOpacity<T extends PartialNodeData>(node: T): node is T & WithOpacity;
+declare function withBorderRadius<T extends PartialNodeData>(node: T): node is T & WithBorderRadius;
+declare function withSVG<T extends PartialNodeData>(node: T): node is T & WithSVG;
+
+interface CollectionData {
+    id: string;
+    name: string;
+}
+interface CollectionItem {
+    /** Required unique id. Using an id instead of the slug prevents data loss. */
+    id: string;
+    /** Required unique slug. */
+    slug: string;
+    /** Data for the fields. */
+    fieldData: Record<string, unknown>;
+}
+interface FieldBase {
+    /** Required unique id. Use a unique identifier to prevent data loss when the field is renamed. */
+    id: string;
+    /** The name of the field as displayed in the UI. */
+    name: string;
+}
+interface BooleanField extends FieldBase {
+    type: "boolean";
+}
+interface ColorField extends FieldBase {
+    type: "color";
+}
+interface NumberField extends FieldBase {
+    type: "number";
+}
+interface StringField extends FieldBase {
+    type: "string";
+}
+interface FormattedTextField extends FieldBase {
+    type: "formattedText";
+}
+interface ImageField extends FieldBase {
+    type: "image";
+}
+interface LinkField extends FieldBase {
+    type: "link";
+}
+interface DateField extends FieldBase {
+    type: "date";
+}
+interface EnumCase {
+    id: string;
+    name: string;
+}
+interface EnumField extends FieldBase {
+    type: "enum";
+    cases: EnumCase[];
+}
+type CollectionField = BooleanField | ColorField | NumberField | StringField | FormattedTextField | ImageField | LinkField | DateField | EnumField;
+type CollectionFields = CollectionField[];
+declare class Collection {
+    #private;
+    readonly id: NodeId;
+    readonly name: string;
+    constructor(data: Partial<CollectionData>, api: FramerPluginAPI);
+    /** Get ordered item keys. */
+    getItemIds(): Promise<string[]>;
+    /** Order items. */
+    setItemOrder(ids: string[]): Promise<void>;
+    /** Get all fields. */
+    getFields(): Promise<CollectionFields>;
+    /** Update all fields. */
+    setFields(fields: CollectionField[]): Promise<void>;
+    /** Add new items or updates existing ones. */
+    addItems(items: CollectionItem[]): Promise<void>;
+    /** Remove items by their id. */
+    removeItems(ids: string[]): Promise<void>;
+    /** Set plugin data by key. */
+    setPluginData(key: string, value: string | null): Promise<void>;
+    /** Get plugin data by key. */
+    getPluginData(key: string): Promise<string | null>;
+    /** Get all plugin data keys. */
+    getPluginDataKeys(): Promise<string[]>;
+}
+
+type CustomCodeLocation = "headStart" | "headEnd" | "bodyStart" | "bodyEnd";
+interface SetCustomCodeOptions {
+    html: string | null;
+    location: CustomCodeLocation;
+}
+type CustomCode = Record<CustomCodeLocation, {
+    disabled: boolean;
+    html: string | null;
+}>;
+
 type SvgDragData = {
@@ -349,3 +426,3 @@ type: "svg";
 
-type Mode = "default" | "image" | "editImage";
+type Mode = "default" | "image" | "editImage" | "configureCollection" | "syncCollection";
 
@@ -410,2 +487,3 @@ type TextNodeTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
     makeDraggable(element: HTMLElement, getDragData: () => DragData): Cleanup;
+    getCollection(): Promise<Collection>;
 }
@@ -520,2 +598,4 @@ interface UIOptions {
     makeDraggable(element: HTMLElement, getDragData: () => DragData): Cleanup;
+    /** Get the current collection. Only available in `editCollection` mode. */
+    getCollection(): Promise<Collection>;
 }
@@ -587,2 +667,2 @@
 
-export { type AllTraits, type AnyNode, type BorderRadius, type CanvasNode, type CanvasRootNode, CodeComponentNode, type ControlAttributes, type CustomCode, type CustomCodeLocation, Draggable, type FitContent, type FractionalLength, FrameNode, type HeightConstraint, type HeightLength, ImageAsset, type Length, type Mode, type NodeId, type PercentageLength, type PixelLength, type Position, type Publish, type PublishInfo, type Rect, SVGNode, SmartComponentNode, TextNode, type TraitVariant, type TraitVariantData, type TraitVariantNode, type UIOptions, type User, type ViewportHeightLength, type ViewportWidthLength, WebPageNode, type WidthConstraint, type WidthLength, type WithAspectRatio, type WithBackgroundColor, type WithBackgroundGradient, type WithBackgroundImage, type WithBorderRadius, type WithChildren, type WithComponentIdentifier, type WithControlAttributes, type WithId, type WithLocked, type WithName, type WithOpacity, type WithPins, type WithPosition, type WithRotation, type WithSVG, type WithSize, type WithSizeConstraints, type WithVisible, framer, isCodeComponentNode, isFrameNode, isSVGNode, isSmartComponentNode, isTextNode, isWebPageNode, useMakeDraggable, withAspectRatio, withBackgroundColor, withBackgroundGradient, withBackgroundImage, withBackgroundImageData, withBorderRadius, withLocked, withName, withOpacity, withPins, withPosition, withRotation, withSVG, withSize, withSizeConstraints, withVisible };
+export { type AllTraits, type AnyNode, type BooleanField, type BorderRadius, type CanvasNode, type CanvasRootNode, CodeComponentNode, Collection, type CollectionField, type CollectionFields, type CollectionItem, type ColorField, type ControlAttributes, type CustomCode, type CustomCodeLocation, type DateField, Draggable, type EnumField, type FitContent, type FormattedTextField, type FractionalLength, FrameNode, type HeightConstraint, type HeightLength, ImageAsset, type ImageField, type Length, type LinkField, type Mode, type NodeId, type NumberField, type PercentageLength, type PixelLength, type Position, type Publish, type PublishInfo, type Rect, SVGNode, SmartComponentNode, type StringField, TextNode, type TraitVariant, type TraitVariantData, type TraitVariantNode, type UIOptions, type User, type ViewportHeightLength, type ViewportWidthLength, WebPageNode, type WidthConstraint, type WidthLength, type WithAspectRatio, type WithBackgroundColor, type WithBackgroundGradient, type WithBackgroundImage, type WithBorderRadius, type WithChildren, type WithComponentIdentifier, type WithControlAttributes, type WithId, type WithLocked, type WithName, type WithOpacity, type WithPins, type WithPosition, type WithRotation, type WithSVG, type WithSize, type WithSizeConstraints, type WithVisible, framer, isCodeComponentNode, isFrameNode, isSVGNode, isSmartComponentNode, isTextNode, isWebPageNode, useMakeDraggable, withAspectRatio, withBackgroundColor, withBackgroundGradient, withBackgroundImage, withBackgroundImageData, withBorderRadius, withLocked, withName, withOpacity, withPins, withPosition, withRotation, withSVG, withSize, withSizeConstraints, withVisible };

dist/index.js

@@ -1,4 +0,4 @@
-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(`
+var Ye=Object.defineProperty;var $e=(n,t,e)=>t in n?Ye(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var i=(n,t,e)=>($e(n,typeof t!="symbol"?t+"":t,e),e),Pe=(n,t,e)=>{if(!t.has(n))throw TypeError("Cannot "+e)};var a=(n,t,e)=>(Pe(n,t,"read from private field"),e?e.call(n):t.get(n)),c=(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)},h=(n,t,e,o)=>(Pe(n,t,"write to private field"),o?o.call(n,e):t.set(n,e),e);var xe=(n,t,e,o)=>({set _(s){h(n,t,s,e)},get _(){return a(n,t,o)}});import M from"react";import{useCallback as ct,useEffect as gt,useRef as pt}from"react";var qe="invoke";function C(n){return qe in n}function P(n){return n===null}function re(n){return n===!0||n===!1}function u(n){return typeof n=="string"}function X(n){return typeof n=="number"&&Number.isFinite(n)}function Y(n){return typeof n=="function"}function g(n){return typeof n=="object"&&n!==null&&!Array.isArray(n)}function se(n){return Array.isArray(n)}function $(n,t){throw t||new Error(n?`Unexpected value: ${n}`:"Application entered invalid state")}function d(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}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};
+`))}catch{}throw e}var Qe="ImageAsset",Je="__class";function q(n){return g(n)?n[Je]===Qe:!1}var v,B,m=class{constructor(t,e){i(this,"id");i(this,"url");i(this,"thumbnailUrl");c(this,v,void 0);c(this,B,void 0);d(C(e)),this.url=t.url,h(this,B,e),this.id=t.id,this.thumbnailUrl=t.thumbnailUrl}async measure(){return ot(this.url)}async getData(){if(a(this,v)&&a(this,v).bytes.length>0)return a(this,v);let t=await a(this,B).invoke("getImageData",{id:this.id});if(!t)throw new Error("Failed to load image data");return h(this,v,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})}};v=new WeakMap,B=new WeakMap;function W(n){return n.type==="bytes"?[n.bytes.buffer]:[]}function Ze(n){if(!g(n))return!1;let t="bytes",e="mimeType";return!(!(t in n)||!(e in n)||!(n[t]instanceof Uint8Array)||!u(n[e]))}async function U(n){return Ze(n)?{...n,type:"bytes"}:n instanceof File?nt(n):{type:"url",url:n}}function et(n,t){return{...n,name:t}}function ae(n){return Promise.all(n.map(async t=>{let e=await U(t.image);return et(e,t.name)}))}function tt(n){if(!n.startsWith("image/"))throw new Error(`Unsupported mime type: ${n}`)}async function nt(n){return new Promise((t,e)=>{let o=new FileReader;o.onload=s=>{let r=n.type;tt(n.type);let l=s.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:r,type:"bytes"})},o.onerror=s=>{e(s)},o.readAsArrayBuffer(n)})}async function ot(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 A(n){if(rt(n))return st(n);if(se(n))return n.map(A);if(g(n)){let t={};for(let e in n)t[e]=A(n[e]);return t}return n}function Ie(n,t){let e={};for(let o in n)e[o]=de(n[o],t);return e}function de(n,t){if(it(n)&&n.__class==="ImageAsset")return new m(n,t);if(g(n)){let e={};for(let o in n)e[o]=de(n[o],t);return e}return se(n)?n.map(e=>de(e,t)):n}function it(n){return!!q(n)}function rt(n){return n instanceof m}function st(n){if(n instanceof m)return{__class:"ImageAsset",id:n.id,thumbnailUrl:n.thumbnailUrl,url:n.url};$(n)}var f,Q=class{constructor(t,e){i(this,"id");i(this,"name");c(this,f,void 0);d(u(t.id),"Node must have an id"),d(u(t.name),"Node must have a name"),this.id=t.id,this.name=t.name,d(C(e)),h(this,f,e)}async getItemIds(){return a(this,f).invoke("getCollectionItemIds",this.id)}async setItemOrder(t){return a(this,f).invoke("setCollectionItemOrder",this.id,t)}async getFields(){return a(this,f).invoke("getCollectionFields",this.id)}async setFields(t){return a(this,f).invoke("setCollectionFields",this.id,t)}async addItems(t){return a(this,f).invoke("addCollectionItems",this.id,t)}async removeItems(t){return a(this,f).invoke("removeCollectionItems",this.id,t)}async setPluginData(t,e){return a(this,f).invoke("setPluginDataForNode",this.id,t,e)}async getPluginData(t){return a(this,f).invoke("getPluginDataForNode",this.id,t)}async getPluginDataKeys(){return a(this,f).invoke("getPluginDataKeysForNode",this.id)}};f=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 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)}}}})(),Ne=5,dt=(()=>{let n=1;return{next:()=>`drag-${n++}`}})();function Ce(n,t,e){d(C(n));let o=!0;n.getMode().then(p=>{o=p==="default"});let s=document.body.style.cursor,r={type:"idle"},l=document.body,y=p=>{if(r.type==="idle")return;let{dragSessionId:N}=r.dragStart;r.type==="dragging"&&n.invoke("onDragEnd",{...p,dragSessionId:N}),r={type:"idle"},Xe()},j=p=>{if(r.type==="idle")return;let{dragSessionId:N}=r.dragStart;if(!(p.buttons>0&&!!(p.buttons&1))){y({cancelled:!1});return}let{clientX:L,clientY:V}=p;if(r.type==="pointerDown"){let S=L-r.dragStart.mouse.x,ye=V-r.dragStart.mouse.y;if(Math.abs(S)<Ne&&Math.abs(ye)<Ne)return;r={type:"dragging",dragStart:r.dragStart},n.invoke("onDragStart",r.dragStart),document.getSelection()?.empty(),at.disableUntilMouseUp()}l.setPointerCapture(p.pointerId);let ie={x:L,y:V};n.invoke("onDrag",{dragSessionId:N,mouse:ie}).then(S=>{r.type==="dragging"&&(document.body.style.cursor=S??"")})},ge=p=>{p.key==="Escape"&&y({cancelled:!0})},pe=()=>{y({cancelled:!0})},he=p=>{if(y({cancelled:!0}),!o)return;let N=t.getBoundingClientRect(),fe={x:N.x,y:N.y,width:N.width,height:N.height},L,V=t.querySelectorAll("svg");if(V.length===1){let be=V.item(0).getBoundingClientRect();L={width:be.width,height:be.height}}let ie={x:p.clientX,y:p.clientY},S=dt.next();r={type:"pointerDown",dragStart:{dragSessionId:S,elementRect:fe,svgSize:L,mouse:ie}},n.invoke("setDragData",S,e()),l.addEventListener("pointermove",j,!0),l.addEventListener("pointerup",j,!0),window.addEventListener("keydown",ge,!0),window.addEventListener("blur",pe)};t.addEventListener("pointerdown",he);function Xe(){document.body.style.cursor=s,l.removeEventListener("pointermove",j,!0),l.removeEventListener("pointerup",j,!0),window.removeEventListener("keydown",ge,!0),window.removeEventListener("blur",pe)}return()=>{t.removeEventListener("pointerdown",he),y({cancelled:!0})}}var lt={methodResponse:!0,pluginReadyResponse:!0,subscriptionMessage:!0};function ut(n){return u(n)&&n in lt}function ve(n){return g(n)&&ut(n["type"])}var x,I=class{constructor(t,e){i(this,"id");c(this,x,void 0);d(u(t.id),"Node must have an id"),this.id=t.id,h(this,x,e)}remove(){return a(this,x).removeNode(this.id)}select(){return a(this,x).setSelection([this.id])}clone(){return a(this,x).cloneNode(this.id)}setAttributes(t){return a(this,x).setAttributes(this.id,t)}getRect(){return a(this,x).getRect(this.id)}getParent(){return a(this,x).getParent(this.id)}getChildren(){return J(this)?Promise.resolve([]):a(this,x).getChildren(this.id)}async*walk(){if(yield this,!J(this))for(let t of await this.getChildren())yield*await t.walk()}};x=new WeakMap;var k=class extends I{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");d(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,d(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)}},D,H=class extends I{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");c(this,D,void 0);d(C(o)),h(this,D,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,d(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,D).invoke("setTextForNode",this.id,e)}async getText(){return a(this,D).invoke("getTextForNode",this.id)}};D=new WeakMap;var _=class extends I{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");d(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,d(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)}},G=class extends I{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");d(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=Ie(e.controlAttributes??{},o),this.rotation=e.rotation??0,this.opacity=e.opacity??1,d(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})}},z=class extends I{constructor(e,o){super(e,o);i(this,"_class","WebPageNode")}clone(){return super.clone()}setAttributes(e){return super.setAttributes(e)}},O=class extends I{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)}},K=class extends I{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 z(n,t);case"SmartComponentNode":return new O(n,t);case"CodeComponentNode":return new G(n,t);case"FrameNode":return new k(n,t);case"SVGNode":return new _(n,t);case"TextNode":return new H(n,t);case"UnknownNode":return new K(n,t);default:return new K(n,t)}}function le(n){return A(n)}function Ae(n){return n instanceof k}function ke(n){return n instanceof H}function Te(n){return n instanceof _}function Z(n){return n instanceof G}function Se(n){return n instanceof z}function We(n){return n instanceof O}function J(n){return n instanceof K}function ee(n){return!!(Ae(n)||ke(n)||Z(n)||Te(n)||J(n))}function ue(n){return!!(Se(n)||We(n)||J(n))}var R=null;function De(n){if(!R){let e=document.createElement("style");document.head.appendChild(e),R=e.sheet}if(!R){n();return}let t=R.insertRule("* { transition: none !important; animation: none !important; }");n(),requestAnimationFrame(()=>{requestAnimationFrame(()=>{R&&R.deleteRule(t)})})}var mt=0,ne,w,T,F,E,oe,te=class{constructor({isTestEnv:t}={}){c(this,ne,0);c(this,w,[]);c(this,T,void 0);c(this,F,new Map);c(this,E,void 0);c(this,oe,new Promise(t=>{h(this,E,t)}));i(this,"subscriptions",new Map);i(this,"onMessage",t=>{let e=t.data;if(ve(e))switch(e.type){case"pluginReadyResponse":{if(!t.source)throw new Error("No 'source' on incoming message: "+e.type);d(a(this,E)),a(this,E).call(this,e.mode),this.applyPluginTheme(e.theme),h(this,T,(s,r)=>window.parent.postMessage(s,t.origin,r));for(let s of a(this,w))a(this,T).call(this,...s);h(this,w,[]);break}case"methodResponse":{let o=a(this,F).get(e.id);if(!o)throw new Error(`No handler for response with id ${e.id}`);a(this,F).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 l of r)l(s);break}default:$(e)}});i(this,"applyPluginTheme",t=>{De(()=>{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:mt};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 l={args:o,methodName:t,id:xe(this,ne)._++,type:"methodInvocation"},y=s;a(this,F).set(l.id,{resolve:y,reject:r}),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 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,T)){a(this,w).push([t,e]);return}a(this,T).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,oe)}async getCurrentUser(){return this.invoke("getCurrentUser")}async getSelection(){return(await this.invoke("getSelection")).map(e=>{let o=b(e,this);return d(ee(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=b(s,this);return d(ee(r)),r});t(o)})}async getCanvasRoot(){let t=await this.invoke("getCanvasRoot"),e=b(t,this);return d(ue(e)),e}subscribeToCanvasRoot(t){return this.subscribe("canvasRoot",e=>{let o=b(e,this);d(ue(o)),t(o)})}async getPublishInfo(){return this.invoke("getPublishInfo")}subscribeToPublishInfo(t){return this.subscribe("publishInfo",t)}async createFrameNode(t,e){let o=le(t),s=await this.invoke("createNode","FrameNode",e??null,o);if(!s)return null;let r=b(s,this);return d(r instanceof k),r}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 s=b(o,this);return d(ee(s)),s})}async getRect(t){return this.invoke("getRect",t)}async setAttributes(t,e){let o=le(e),s=await this.invoke("setAttributes",t,o);return s?b(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 U(t instanceof File?t:t.image),o=W(e);return this.invokeTransferable("addImage",o,{...e,name:t?.name})}async setImage(t){let e=await U(t instanceof File?t:t.image),o=W(e);return this.invokeTransferable("setImage",o,{...e,name:t?.name})}async uploadImage(t){let e=await U(t instanceof File?t:t.image),o=W(e),s=await this.invokeTransferable("uploadImage",o,{...e,name:t?.name});return new m(s,this)}async addImages(t){let e=await ae(t),o=e.flatMap(W);await this.invokeTransferable("addImages",o,e)}async uploadImages(t){let e=await ae(t),o=e.flatMap(W),s=await this.invokeTransferable("uploadImages",o,e),r=[];for(let l of s)r.push(new m(l,this));return r}async addSVG(t){return this.invoke("addSVG",t)}async addComponent(t,e,o){let s=A(e),r=A(o),l=await this.invoke("addComponent",t,g(s)?s:void 0,g(r)?r:void 0);if(!l)return null;let y=b(l,this);return d(Z(y),"Code component node must be defined"),y}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 Ce(this,t,e)}async getCollection(){let t=await this.invoke("getCollection");return d(t,"Collection data must be defined"),new Q(t,this)}};ne=new WeakMap,w=new WeakMap,T=new WeakMap,F=new WeakMap,E=new WeakMap,oe=new WeakMap;var me=new te;function ce(n,t){let e=ht(()=>Y(t)?t():t);gt(()=>{let o=n.current;if(o instanceof HTMLElement)return me.makeDraggable(o,e)},[e])}function ht(n){let t=pt(n);return t.current=n,ct((...e)=>t.current(...e),[])}var ft=M.forwardRef(function({data:t,children:e,...o},s){let r=M.useRef(null);if(ce(r,t),M.isValidElement(e)){let l=Object.assign({},o);return g(e.props)&&Object.assign(l,e.props),l.ref=Pt(r,s,e.ref),M.cloneElement(e,l)}return M.Children.count(e)>1&&M.Children.only(e),null}),yt="current";function bt(n){return g(n)&&yt in n}function Pt(...n){return t=>{for(let e of n)Y(e)?e(t):bt(e)&&(e.current=t)}}var xt={fixed:!0,sticky:!0,absolute:!0,relative:!0},Re="position";function bn(n){if(!(Re in n))return!1;let t=n[Re];return u(t)&&xt[t]===!0}var we="top";function Pn(n){if(!(we in n))return!1;let t=n[we];return u(t)||P(t)}var Fe="width";function xn(n){if(!(Fe in n))return!1;let t=n[Fe];return u(t)||P(t)}var Ee="maxWidth";function In(n){if(!(Ee in n))return!1;let t=n[Ee];return u(t)||P(t)}var Me="aspectRatio";function Nn(n){if(!(Me in n))return!1;let t=n[Me];return X(t)||P(t)}var Le="name";function Cn(n){if(!(Le in n))return!1;let t=n[Le];return u(t)||P(t)}var Ve="visible";function vn(n){if(!(Ve in n))return!1;let t=n[Ve];return re(t)}var Be="locked";function An(n){if(!(Be in n))return!1;let t=n[Be];return re(t)}var Ue="backgroundColor";function kn(n){if(!(Ue in n))return!1;let t=n[Ue];return u(t)||P(t)}var He="backgroundImage";function Tn(n){if(!(He in n))return!1;let t=n[He];return t instanceof m||P(t)}var _e="backgroundImage";function Sn(n){if(!(_e in n))return!1;let t=n[_e];return t instanceof m?!1:q(t)||P(t)}var Ge="backgroundGradient";function Wn(n){if(!(Ge in n))return!1;let t=n[Ge];return u(t)||P(t)}var ze="rotation";function Dn(n){if(!(ze in n))return!1;let t=n[ze];return X(t)}var Oe="opacity";function Rn(n){if(!(Oe in n))return!1;let t=n[Oe];return X(t)}var Ke="borderRadius";function wn(n){if(!(Ke in n))return!1;let t=n[Ke];return u(t)||P(t)}var je="svg";function Fn(n){if(!(je in n))return!1;let t=n[je];return u(t)}export{G as CodeComponentNode,ft as Draggable,k as FrameNode,_ as SVGNode,O as SmartComponentNode,H as TextNode,z as WebPageNode,me as framer,Z as isCodeComponentNode,Ae as isFrameNode,Te as isSVGNode,We as isSmartComponentNode,ke as isTextNode,Se as isWebPageNode,ce as useMakeDraggable,Nn as withAspectRatio,kn as withBackgroundColor,Wn as withBackgroundGradient,Tn as withBackgroundImage,Sn as withBackgroundImageData,wn as withBorderRadius,An as withLocked,Cn as withName,Rn as withOpacity,Pn as withPins,bn as withPosition,Dn as withRotation,Fn as withSVG,xn as withSize,In as withSizeConstraints,vn as withVisible};

package.json

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

src/index.ts

@@ -24,2 +24,17 @@ export type { ImageAsset } from "./image"
 export * from "./traits"
+export type {
+    CollectionField,
+    CollectionFields,
+    Collection,
+    CollectionItem,
+    BooleanField,
+    ColorField,
+    NumberField,
+    StringField,
+    FormattedTextField,
+    ImageField,
+    LinkField,
+    DateField,
+    EnumField,
+} from "./collections"
 export { framer } from "./framer"

No alert changes

Improved metrics

Total package byte prevSize

173257

increased by2.87%

Lines of code

817

increased by13.63%

No dependency changes