@grapesjs/studio-sdk-plugins 1.0.24 → 1.0.25

package/dist/animationComponent/shared.d.ts

@@ -1,3 +1,5 @@
 import { SdkPlanCategories } from '../utils';
+import { AnimationOption } from './types';
 export declare const PLUGIN_NAME = "animationComponent";
 export declare const PLUGIN_PLAN = SdkPlanCategories.startup;
+export declare const animationOptions: AnimationOption[];

package/dist/animationComponent/types.d.ts

@@ -11,6 +11,8 @@ export declare enum AnimationStyleProperties {
     name = "animation-name",
     duration = "animation-duration",
     delay = "animation-delay",
+    iterationCount = "animation-iteration-count",
+    timingFunction = "animation-timing-function",
     fillMode = "animation-fill-mode"
 }
 export declare enum AnimationGroupStyleProperties {

package/dist/animationComponent/typesSchema.d.ts

@@ -14,7 +14,7 @@ export interface AnimationComponentOptionsSchema extends SDKPluginOptions {
     blockGroup?: 'Block';
     /**
      * Extend or update animation list.
-     * @example
+     * @examples
      * animations: ({ items }) => {
      *  return [
      *    // Remove bounce animations
@@ -32,7 +32,7 @@ export interface AnimationComponentOptionsSchema extends SDKPluginOptions {
     /**
      * Initial style object of the animation component.
      * @example
-     * { 'font-size': '12px', 'color': 'white' }
+     * { 'animation-duration': '0.5s' }
      */
     animationStyle?: {
         [key: string]: string;
@@ -40,7 +40,7 @@ export interface AnimationComponentOptionsSchema extends SDKPluginOptions {
     /**
      * Initial style object of the animation group component.
      * @example
-     * { 'font-size': '12px', 'color': 'white' }
+     * { '--stagger-delay': '0.5s' }
      */
     animationGroupStyle?: {
         [key: string]: string;

package/dist/animationComponent/utils.d.ts

@@ -1,5 +1,4 @@
 import { BlockProperties, Component, PropertyTypes } from 'grapesjs';
-import { AnimationOption } from './types';
 export declare const typeAnimationComponent = "animation";
 export declare const typeAnimationGroupComponent = "animation-group";
 export declare const animationUpdateEvent = "animation:update";
@@ -11,9 +10,9 @@ export declare const isComponentAnimations: (component?: Component) => boolean;
 export declare const commonAnimationsProps: Partial<PropertyTypes>;
 export declare const commonAnimationProps: Partial<PropertyTypes>;
 export declare const commonAnimationGroupProps: Partial<PropertyTypes>;
+export declare const animationsOnScrollProps: Partial<PropertyTypes>;
 export declare const commonAnimationsScrollProps: Partial<PropertyTypes>;
 export declare const customIcons: {
     animation: string;
     animationGroup: string;
 };
-export declare const animationOptions: AnimationOption[];

package/dist/canvasAbsoluteMode/index.cjs.js

@@ -1 +1 @@
-"use strict";const V="app.grapesjs.com",k="app-stage.grapesjs.com",I=[V,k,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],X="license:check:start",j="license:check:end",F=()=>typeof window<"u",q=({isDev:e,isStage:a})=>`${e?"":`https://${a?k:V}`}/api`,J=()=>{const e=F()&&window.location.hostname;return!!e&&(I.includes(e)||I.some(a=>e.endsWith(a)))};function z(e){return typeof e=="function"}async function Q({path:e,baseApiUrl:a,method:u="GET",headers:l={},params:d,body:n}){const o=`${a||q({isDev:!1,isStage:!1})}${e}`,m={method:u,headers:{"Content-Type":"application/json",...l}};n&&(m.body=JSON.stringify(n));const h=d?new URLSearchParams(d).toString():"",t=h?`?${h}`:"",s=await fetch(`${o}${t}`,m);if(!s.ok)throw new Error(`HTTP error! status: ${s.status}`);return s.json()}var P=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(P||{});const W={[P.free]:0,[P.startup]:10,[P.business]:20,[P.enterprise]:30};function Z(e){const a=e;return a.init=u=>l=>e(l,u),a}const ee=e=>Z(e);async function te({editor:e,plan:a,pluginName:u,licenseKey:l,cleanup:d}){let n="",c=!1;const o=J(),m=t=>{console.warn("Cleanup plugin:",u,"Reason:",t),d()},h=(t={})=>{var E;const{error:s,sdkLicense:r}=t,i=(E=t.plan)==null?void 0:E.category;if(!(r||t.license)||s)m(s||"Invalid license");else if(i){const b=W[a],v=W[i];b>v&&m({pluginRequiredPlan:a,licensePlan:i})}};e.on(X,t=>{n=t==null?void 0:t.baseApiUrl,c=!0}),e.on(j,t=>{h(t)}),setTimeout(async()=>{if(!c){if(o)return;if(l){const t=await ne({licenseKey:l,pluginName:u,baseApiUrl:n});t&&h(t)}else m("The `licenseKey` option not provided")}},2e3)}async function ne(e){const{licenseKey:a,pluginName:u,baseApiUrl:l}=e;try{return(await Q({baseApiUrl:l,path:`/sdk/${a||"na"}`,method:"POST",params:{d:window.location.hostname,pn:u}})).result||{}}catch(d){return console.error("Error during SDK license check:",d),!1}}const oe="canvasAbsoluteMode",se=P.startup,ce=(e,a,u)=>{const l=u.enableAbsolute??(m=>m.hasAbsolute),n=(Array.isArray(a)?a:a?[a]:[...e.getSelectedAll()])[0];if(!n)return;const c=n.getEl();return{result:z(l)?l({component:n,hasAbsolute:!!c&&getComputedStyle(c).position==="absolute"}):!1,component:n,dmode:n.get("dmode")}};function B({guideMatched:e,canvasView:a}){var L;const u=e.guide.x===void 0?"y":"x";let l=0,d=0,n=0,c=0;const{guide:o,matched:m}=e,h=a.getElBoxRect(o.componentView.el),t=a.getElBoxRect(((L=m.componentView)==null?void 0:L.el)||m.componentEl),s=h.y,r=h.y+h.height,i=h.x,x=h.x+h.width,E=t.y,b=t.y+t.height,v=t.x,_=t.x+t.width,S=Math.max(0,s-b),p=Math.max(0,E-r),w=Math.max(0,i-_),A=Math.max(0,v-x),f=S>p,g=w>A,y=o.type;return u==="x"&&(y==="l"?(l=i,f?(d=b,n=S):(d=r,n=p)):y==="r"?(l=x,f?(d=b,n=S):(d=r,n=p)):y==="x"&&(l=i-(i-x)/2,f?(d=b,n=S):(d=r,n=p))),u==="y"&&(y==="t"?(d=s,g?(l=_,c=w):(l=x,c=A)):y==="b"?(d=r,g?(l=_,c=w):(l=x,c=A)):y==="y"&&(d=s-(s-r)/2,g?(l=_,c=w):(l=x,c=A))),{axis:u,x:l,y:d,width:c,height:n}}function ie({guideMatched:e,component:a,canvasView:u}){const l=e.guide.x===void 0?"x":"y",{guide:d,matched:n}=e,c=d.type,o=n.type,m=u.getElementPos(d.componentView.el).rect,h=u.getElementPos(n.componentView.el).rect;if(l==="x"){const t=m.height,s=h.top,r=h.top+h.height;let i=0;c==="t"?o==="t"?i=s-t:o==="b"?i=r-t:o==="y"&&(i=s-t-(s-r)/2):c==="b"?o==="t"?i=s-t*2:o==="b"?i=r-t*2:o==="y"&&(i=s-t*2-(s-r)/2):c==="y"&&(o==="t"?i=s-t*1.5:o==="b"?i=r-t*1.5:o==="y"&&(i=s-t*1.5-(s-r)/2)),a.addStyle({top:`${i-5}px`},{partial:!0})}if(l==="y"){const t=m.width,s=h.left,r=h.left+h.width;let i=0;c==="l"?o==="l"?i=s:o==="r"?i=r:o==="x"&&(i=s-(s-r)/2):c==="r"?o==="l"?i=s-t:o==="r"?i=r-t:o==="x"&&(i=s-t-(s-r)/2):c==="x"&&(o==="l"?i=s-t/2:o==="r"&&(i=r-t/2)),a.addStyle({left:`${i}px`},{partial:!0})}}function H({snapping:e,editor:a,props:u}){var R,O;const{command:l,guidesMatched:d}=u,n=u.component,c=n.getEl(),o=a.Canvas.getCanvasView(),{x:m,y:h}=e??{x:10,y:10},t=l.opts.event,s=t.clientX,r=t.clientY;if(!n.__lastSnappedPosition){const T=o.getElBoxRect(c),M=s-T.x,D=r-T.y;n.__lastSnappedPosition={left:T.x,top:T.y},n.__dragOffset={x:M,y:D}}const i=((R=n.__dragOffset)==null?void 0:R.x)||0,x=((O=n.__dragOffset)==null?void 0:O.y)||0,E=n.__lastSnappedPosition,b=s-E.left-i,v=r-E.top-x;let _=E.left,S=E.top;const p=d==null?void 0:d[0],w=(p==null?void 0:p.guide.type)==="l",A=(p==null?void 0:p.guide.type)==="x",f=(p==null?void 0:p.guide.type)==="r",g=(p==null?void 0:p.guide.type)==="t",y=(p==null?void 0:p.guide.type)==="b",L=(p==null?void 0:p.guide.type)==="y";if(p){const{x:T,y:M}=B({guideMatched:p,canvasView:o}),D=c.offsetWidth,G=c.offsetHeight;w?_=T:f?_=T-D:A?_=T-D/2:g?S=M:y?S=M-G:L&&(S=M-G/2),n.__lastSnappedGuideMatched=p}else Math.abs(b)>=m&&(_=Math.round((E.left+b)/m)*m,n.__lastSnappedGuideMatched=null),Math.abs(v)>=h&&(S=Math.round((E.top+v)/h)*h,n.__lastSnappedGuideMatched=null);return n.addStyle({left:`${_}px`,top:`${S}px`},{partial:!0}),n.__lastSnappedPosition={left:_,top:S},{x:_,y:S,guideMatched:n.__lastSnappedGuideMatched}}function ae({snapping:e,props:a,editor:u}){const{x:l,y:d}=H({snapping:e,props:a,editor:u}),n=a.component;n.addStyle({left:`${l}px`,top:`${d}px`}),delete n.__lastSnappedPosition,delete n.__lastSnappedGuideMatched}const le="core:component-drag",de="studio:setDragAbsolute",fe="dmode:start",Y="dmode:move",K="dmode:end",$="dragAbsolute",re="select",pe="hover",ue="spacing",he=function(e,a={}){const{Commands:u}=e,l=u.events,d=u.getConfig().defaultOptions??{},n=`${l.runBeforeCommand}tlb-move`;d[le]={run:f=>({...f,skipGuidesRender:!0})};const{snapping:c,locking:o,globalAbsolute:m=!0}=a;m&&e.setDragMode("absolute");const h=!!(c!=null&&c.x||c!=null&&c.y),t=!!(o!=null&&o.x||o!=null&&o.y),{Canvas:s}=e;let r=null;const i=f=>{const{component:g,guidesMatched:y,command:L}=f,R=g.view,O=e.Canvas.getCanvasView(),T=g.getEl();let M=y.map(C=>C.matched.componentEl),D=y.map(C=>B({guideMatched:C,canvasView:O}));if(h){const{guideMatched:C}=H({snapping:c,props:f,editor:e});C?(M=[C.matched.componentEl],D=[B({guideMatched:C,canvasView:O})]):(M=[],D=[])}if(t)if(L.opts.event.shiftKey)if(!r)r=y[0];else{const N=r,U=N.guide.x===void 0?"x":"y";(U==="x"&&(o==null?void 0:o.x)||U==="y"&&(o==null?void 0:o.y))&&(ie({guideMatched:N,component:g,canvasView:O}),M=[N.matched.componentEl],D=[B({guideMatched:N,canvasView:O})])}else r=null;const G={id:$,type:$,component:g,componentView:R,originComponent:T,matchedComponents:M,originMatchedDistances:D};s.addSpot(G)},x=({enabled:f})=>{e.runCommand(de,{enabled:f})},E=({type:f})=>{s.removeSpots({type:f})},b=()=>{E({type:re}),E({type:pe}),E({type:ue})},v=f=>{x({enabled:!0}),i(f),b()},_=f=>{i(f),b()},S=f=>{E({type:$}),h&&ae({snapping:c,props:f,editor:e}),x({enabled:!1})},A=[[fe,f=>{v(f),e.on(Y,_);const g=()=>{S(f),e.off(Y,_),e.off(K,g)};e.on(K,g)}],[n,f=>{if(m)return;const g=f.options.target,y=ce(e,g,a);y!=null&&y.result&&!y.dmode&&(y.component.set({dmode:"absolute"}),f.options.mode="absolute")}]];A.forEach(([f,g])=>e.on(f,g)),te({editor:e,licenseKey:a.licenseKey,plan:se,pluginName:oe,cleanup:()=>{x({enabled:!1}),A.forEach(([f,g])=>e.off(f,g))}})},me=ee(he);module.exports=me;
+"use strict";const V="app.grapesjs.com",k="app-stage.grapesjs.com",I=[V,k,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],X="license:check:start",j="license:check:end",F=()=>typeof window<"u",q=({isDev:e,isStage:a})=>`${e?"":`https://${a?k:V}`}/api`,J=()=>{const e=F()&&window.location.hostname;return!!e&&(I.includes(e)||I.some(a=>e.endsWith(a)))};function z(e){return typeof e=="function"}async function Q({path:e,baseApiUrl:a,method:u="GET",headers:l={},params:d,body:n}){const s=`${a||q({isDev:!1,isStage:!1})}${e}`,m={method:u,headers:{"Content-Type":"application/json",...l}};n&&(m.body=JSON.stringify(n));const h=d?new URLSearchParams(d).toString():"",t=h?`?${h}`:"",o=await fetch(`${s}${t}`,m);if(!o.ok)throw new Error(`HTTP error! status: ${o.status}`);return o.json()}var P=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(P||{});const W={[P.free]:0,[P.startup]:10,[P.business]:20,[P.enterprise]:30};function Z(e){const a=e;return a.init=u=>l=>e(l,u),a}const ee=e=>Z(e);async function te({editor:e,plan:a,pluginName:u,licenseKey:l,cleanup:d}){let n="",c=!1;const s=J(),m=t=>{console.warn("Cleanup plugin:",u,"Reason:",t),d()},h=(t={})=>{var E;const{error:o,sdkLicense:r}=t,i=(E=t.plan)==null?void 0:E.category;if(!(r||t.license)||o)m(o||"Invalid license");else if(i){const b=W[a],v=W[i];b>v&&m({pluginRequiredPlan:a,licensePlan:i})}};e.on(X,t=>{n=t==null?void 0:t.baseApiUrl,c=!0}),e.on(j,t=>{h(t)}),setTimeout(async()=>{if(!c){if(s)return;if(l){const t=await ne({licenseKey:l,pluginName:u,baseApiUrl:n});t&&h(t)}else m("The `licenseKey` option not provided")}},2e3)}async function ne(e){const{licenseKey:a,pluginName:u,baseApiUrl:l}=e;try{return(await Q({baseApiUrl:l,path:`/sdk/${a||"na"}`,method:"POST",params:{d:window.location.hostname,pn:u}})).result||{}}catch(d){return console.error("Error during SDK license check:",d),!1}}const se="canvasAbsoluteMode",oe=P.startup,ce=(e,a,u)=>{const l=u.enableAbsolute??(m=>m.hasAbsolute),n=(Array.isArray(a)?a:a?[a]:[...e.getSelectedAll()])[0];if(!n)return;const c=n.getEl();return{result:z(l)?l({component:n,hasAbsolute:!!c&&getComputedStyle(c).position==="absolute"}):!1,component:n,dmode:n.get("dmode")}};function B({guideMatched:e,canvasView:a}){var L;const u=e.guide.x===void 0?"y":"x";let l=0,d=0,n=0,c=0;const{guide:s,matched:m}=e,h=a.getElBoxRect(s.componentView.el),t=a.getElBoxRect(((L=m.componentView)==null?void 0:L.el)||m.componentEl),o=h.y,r=h.y+h.height,i=h.x,x=h.x+h.width,E=t.y,b=t.y+t.height,v=t.x,_=t.x+t.width,S=Math.max(0,o-b),p=Math.max(0,E-r),w=Math.max(0,i-_),A=Math.max(0,v-x),f=S>p,g=w>A,y=s.type;return u==="x"&&(y==="l"?(l=i,f?(d=b,n=S):(d=r,n=p)):y==="r"?(l=x,f?(d=b,n=S):(d=r,n=p)):y==="x"&&(l=i-(i-x)/2,f?(d=b,n=S):(d=r,n=p))),u==="y"&&(y==="t"?(d=o,g?(l=_,c=w):(l=x,c=A)):y==="b"?(d=r,g?(l=_,c=w):(l=x,c=A)):y==="y"&&(d=o-(o-r)/2,g?(l=_,c=w):(l=x,c=A))),{axis:u,x:l,y:d,width:c,height:n}}function ie({guideMatched:e,component:a,canvasView:u}){const l=e.guide.x===void 0?"x":"y",{guide:d,matched:n}=e,c=d.type,s=n.type,m=u.getElementPos(d.componentView.el).rect,h=u.getElementPos(n.componentView.el).rect;if(l==="x"){const t=m.height,o=h.top,r=h.top+h.height;let i=0;c==="t"?s==="t"?i=o-t:s==="b"?i=r-t:s==="y"&&(i=o-t-(o-r)/2):c==="b"?s==="t"?i=o-t*2:s==="b"?i=r-t*2:s==="y"&&(i=o-t*2-(o-r)/2):c==="y"&&(s==="t"?i=o-t*1.5:s==="b"?i=r-t*1.5:s==="y"&&(i=o-t*1.5-(o-r)/2)),a.addStyle({top:`${i-5}px`},{partial:!0})}if(l==="y"){const t=m.width,o=h.left,r=h.left+h.width;let i=0;c==="l"?s==="l"?i=o:s==="r"?i=r:s==="x"&&(i=o-(o-r)/2):c==="r"?s==="l"?i=o-t:s==="r"?i=r-t:s==="x"&&(i=o-t-(o-r)/2):c==="x"&&(s==="l"?i=o-t/2:s==="r"&&(i=r-t/2)),a.addStyle({left:`${i}px`},{partial:!0})}}function H({snapping:e,editor:a,props:u}){var R,O;const{command:l,guidesMatched:d}=u,n=u.component,c=n.getEl(),s=a.Canvas.getCanvasView(),{x:m,y:h}=e??{x:10,y:10},t=l.opts.event,o=t.clientX,r=t.clientY;if(!n.__lastSnappedPosition){const T=s.getElBoxRect(c),M=o-T.x,D=r-T.y;n.__lastSnappedPosition={left:T.x,top:T.y},n.__dragOffset={x:M,y:D}}const i=((R=n.__dragOffset)==null?void 0:R.x)||0,x=((O=n.__dragOffset)==null?void 0:O.y)||0,E=n.__lastSnappedPosition,b=o-E.left-i,v=r-E.top-x;let _=E.left,S=E.top;const p=d==null?void 0:d[0],w=(p==null?void 0:p.guide.type)==="l",A=(p==null?void 0:p.guide.type)==="x",f=(p==null?void 0:p.guide.type)==="r",g=(p==null?void 0:p.guide.type)==="t",y=(p==null?void 0:p.guide.type)==="b",L=(p==null?void 0:p.guide.type)==="y";if(p){const{x:T,y:M}=B({guideMatched:p,canvasView:s}),D=c.offsetWidth,G=c.offsetHeight;w?_=T:f?_=T-D:A?_=T-D/2:g?S=M:y?S=M-G:L&&(S=M-G/2),n.__lastSnappedGuideMatched=p}else Math.abs(b)>=m&&(_=Math.round((E.left+b)/m)*m,n.__lastSnappedGuideMatched=null),Math.abs(v)>=h&&(S=Math.round((E.top+v)/h)*h,n.__lastSnappedGuideMatched=null);return n.addStyle({left:`${_}px`,top:`${S}px`},{partial:!0}),n.__lastSnappedPosition={left:_,top:S},{x:_,y:S,guideMatched:n.__lastSnappedGuideMatched}}function ae({snapping:e,props:a,editor:u}){const{x:l,y:d}=H({snapping:e,props:a,editor:u}),n=a.component;n.addStyle({left:`${l}px`,top:`${d}px`}),delete n.__lastSnappedPosition,delete n.__lastSnappedGuideMatched}const le="core:component-drag",de="studio:setDragAbsolute",fe="dmode:start",Y="dmode:move",K="dmode:end",$="dragAbsolute",re="select",pe="hover",ue="spacing",he=function(e,a={}){const{Commands:u}=e,l=u.events,d=u.getConfig().defaultOptions??{},n=`${l.runBeforeCommand}tlb-move`;d[le]={run:f=>({...f,skipGuidesRender:!0})};const{snapping:c,locking:s,globalAbsolute:m=!0}=a;m&&e.setDragMode("absolute");const h=!!(c!=null&&c.x||c!=null&&c.y),t=!!(s!=null&&s.x||s!=null&&s.y),{Canvas:o}=e;let r=null;const i=f=>{const{component:g,guidesMatched:y,command:L}=f,R=g.view,O=e.Canvas.getCanvasView(),T=g.getEl();let M=y.map(C=>C.matched.componentEl),D=y.map(C=>B({guideMatched:C,canvasView:O}));if(h){const{guideMatched:C}=H({snapping:c,props:f,editor:e});C?(M=[C.matched.componentEl],D=[B({guideMatched:C,canvasView:O})]):(M=[],D=[])}if(t)if(L.opts.event.shiftKey)if(!r)r=y[0];else{const N=r,U=N.guide.x===void 0?"x":"y";(U==="x"&&(s==null?void 0:s.x)||U==="y"&&(s==null?void 0:s.y))&&(ie({guideMatched:N,component:g,canvasView:O}),M=[N.matched.componentEl],D=[B({guideMatched:N,canvasView:O})])}else r=null;const G={id:$,type:$,component:g,componentView:R,originComponent:T,matchedComponents:M,originMatchedDistances:D};o.addSpot(G)},x=({enabled:f})=>{e.runCommand(de,{enabled:f})},E=({type:f})=>{o.removeSpots({type:f})},b=()=>{E({type:re}),E({type:pe}),E({type:ue})},v=f=>{x({enabled:!0}),i(f),b()},_=f=>{i(f),b()},S=f=>{E({type:$}),h&&ae({snapping:c,props:f,editor:e}),x({enabled:!1})},A=[[fe,f=>{v(f),e.on(Y,_);const g=()=>{S(f),e.off(Y,_),e.off(K,g)};e.on(K,g)}],[n,f=>{if(m)return;const g=f.options.target,y=ce(e,g,a);y!=null&&y.result&&!y.dmode&&(f.options.mode="absolute")}]];A.forEach(([f,g])=>e.on(f,g)),te({editor:e,licenseKey:a.licenseKey,plan:oe,pluginName:se,cleanup:()=>{x({enabled:!1}),A.forEach(([f,g])=>e.off(f,g))}})},me=ee(he);module.exports=me;

package/dist/canvasAbsoluteMode/index.es.js

@@ -228,7 +228,7 @@ const le = "core:component-drag", de = "studio:setDragAbsolute", fe = "dmode:sta
     [n, (f) => {
       if (m) return;
       const g = f.options.target, y = ce(e, g, a);
-      y != null && y.result && !y.dmode && (y.component.set({ dmode: "absolute" }), f.options.mode = "absolute");
+      y != null && y.result && !y.dmode && (f.options.mode = "absolute");
     }]
   ];
   A.forEach(([f, g]) => e.on(f, g)), te({

package/dist/canvasAbsoluteMode/index.umd.js

@@ -1 +1 @@
-(function(P,L){typeof exports=="object"&&typeof module<"u"?module.exports=L():typeof define=="function"&&define.amd?define(L):(P=typeof globalThis<"u"?globalThis:P||self,P.StudioSdkPlugins_canvasAbsoluteMode=L())})(this,function(){"use strict";const P="app.grapesjs.com",L="app-stage.grapesjs.com",W=[P,L,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],X="license:check:start",j="license:check:end",F=()=>typeof window<"u",q=({isDev:e,isStage:l})=>`${e?"":`https://${l?L:P}`}/api`,J=()=>{const e=F()&&window.location.hostname;return!!e&&(W.includes(e)||W.some(l=>e.endsWith(l)))};function z(e){return typeof e=="function"}async function Q({path:e,baseApiUrl:l,method:u="GET",headers:a={},params:d,body:n}){const o=`${l||q({isDev:!1,isStage:!1})}${e}`,m={method:u,headers:{"Content-Type":"application/json",...a}};n&&(m.body=JSON.stringify(n));const h=d?new URLSearchParams(d).toString():"",t=h?`?${h}`:"",s=await fetch(`${o}${t}`,m);if(!s.ok)throw new Error(`HTTP error! status: ${s.status}`);return s.json()}var R=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(R||{});const Y={[R.free]:0,[R.startup]:10,[R.business]:20,[R.enterprise]:30};function Z(e){const l=e;return l.init=u=>a=>e(a,u),l}const ee=e=>Z(e);async function te({editor:e,plan:l,pluginName:u,licenseKey:a,cleanup:d}){let n="",i=!1;const o=J(),m=t=>{console.warn("Cleanup plugin:",u,"Reason:",t),d()},h=(t={})=>{var E;const{error:s,sdkLicense:r}=t,c=(E=t.plan)==null?void 0:E.category;if(!(r||t.license)||s)m(s||"Invalid license");else if(c){const b=Y[l],v=Y[c];b>v&&m({pluginRequiredPlan:l,licensePlan:c})}};e.on(X,t=>{n=t==null?void 0:t.baseApiUrl,i=!0}),e.on(j,t=>{h(t)}),setTimeout(async()=>{if(!i){if(o)return;if(a){const t=await ne({licenseKey:a,pluginName:u,baseApiUrl:n});t&&h(t)}else m("The `licenseKey` option not provided")}},2e3)}async function ne(e){const{licenseKey:l,pluginName:u,baseApiUrl:a}=e;try{return(await Q({baseApiUrl:a,path:`/sdk/${l||"na"}`,method:"POST",params:{d:window.location.hostname,pn:u}})).result||{}}catch(d){return console.error("Error during SDK license check:",d),!1}}const oe="canvasAbsoluteMode",se=R.startup,ie=(e,l,u)=>{const a=u.enableAbsolute??(m=>m.hasAbsolute),n=(Array.isArray(l)?l:l?[l]:[...e.getSelectedAll()])[0];if(!n)return;const i=n.getEl();return{result:z(a)?a({component:n,hasAbsolute:!!i&&getComputedStyle(i).position==="absolute"}):!1,component:n,dmode:n.get("dmode")}};function N({guideMatched:e,canvasView:l}){var G;const u=e.guide.x===void 0?"y":"x";let a=0,d=0,n=0,i=0;const{guide:o,matched:m}=e,h=l.getElBoxRect(o.componentView.el),t=l.getElBoxRect(((G=m.componentView)==null?void 0:G.el)||m.componentEl),s=h.y,r=h.y+h.height,c=h.x,S=h.x+h.width,E=t.y,b=t.y+t.height,v=t.x,x=t.x+t.width,_=Math.max(0,s-b),p=Math.max(0,E-r),w=Math.max(0,c-x),A=Math.max(0,v-S),f=_>p,g=w>A,y=o.type;return u==="x"&&(y==="l"?(a=c,f?(d=b,n=_):(d=r,n=p)):y==="r"?(a=S,f?(d=b,n=_):(d=r,n=p)):y==="x"&&(a=c-(c-S)/2,f?(d=b,n=_):(d=r,n=p))),u==="y"&&(y==="t"?(d=s,g?(a=x,i=w):(a=S,i=A)):y==="b"?(d=r,g?(a=x,i=w):(a=S,i=A)):y==="y"&&(d=s-(s-r)/2,g?(a=x,i=w):(a=S,i=A))),{axis:u,x:a,y:d,width:i,height:n}}function ce({guideMatched:e,component:l,canvasView:u}){const a=e.guide.x===void 0?"x":"y",{guide:d,matched:n}=e,i=d.type,o=n.type,m=u.getElementPos(d.componentView.el).rect,h=u.getElementPos(n.componentView.el).rect;if(a==="x"){const t=m.height,s=h.top,r=h.top+h.height;let c=0;i==="t"?o==="t"?c=s-t:o==="b"?c=r-t:o==="y"&&(c=s-t-(s-r)/2):i==="b"?o==="t"?c=s-t*2:o==="b"?c=r-t*2:o==="y"&&(c=s-t*2-(s-r)/2):i==="y"&&(o==="t"?c=s-t*1.5:o==="b"?c=r-t*1.5:o==="y"&&(c=s-t*1.5-(s-r)/2)),l.addStyle({top:`${c-5}px`},{partial:!0})}if(a==="y"){const t=m.width,s=h.left,r=h.left+h.width;let c=0;i==="l"?o==="l"?c=s:o==="r"?c=r:o==="x"&&(c=s-(s-r)/2):i==="r"?o==="l"?c=s-t:o==="r"?c=r-t:o==="x"&&(c=s-t-(s-r)/2):i==="x"&&(o==="l"?c=s-t/2:o==="r"&&(c=r-t/2)),l.addStyle({left:`${c}px`},{partial:!0})}}function k({snapping:e,editor:l,props:u}){var B,O;const{command:a,guidesMatched:d}=u,n=u.component,i=n.getEl(),o=l.Canvas.getCanvasView(),{x:m,y:h}=e??{x:10,y:10},t=a.opts.event,s=t.clientX,r=t.clientY;if(!n.__lastSnappedPosition){const T=o.getElBoxRect(i),M=s-T.x,D=r-T.y;n.__lastSnappedPosition={left:T.x,top:T.y},n.__dragOffset={x:M,y:D}}const c=((B=n.__dragOffset)==null?void 0:B.x)||0,S=((O=n.__dragOffset)==null?void 0:O.y)||0,E=n.__lastSnappedPosition,b=s-E.left-c,v=r-E.top-S;let x=E.left,_=E.top;const p=d==null?void 0:d[0],w=(p==null?void 0:p.guide.type)==="l",A=(p==null?void 0:p.guide.type)==="x",f=(p==null?void 0:p.guide.type)==="r",g=(p==null?void 0:p.guide.type)==="t",y=(p==null?void 0:p.guide.type)==="b",G=(p==null?void 0:p.guide.type)==="y";if(p){const{x:T,y:M}=N({guideMatched:p,canvasView:o}),D=i.offsetWidth,$=i.offsetHeight;w?x=T:f?x=T-D:A?x=T-D/2:g?_=M:y?_=M-$:G&&(_=M-$/2),n.__lastSnappedGuideMatched=p}else Math.abs(b)>=m&&(x=Math.round((E.left+b)/m)*m,n.__lastSnappedGuideMatched=null),Math.abs(v)>=h&&(_=Math.round((E.top+v)/h)*h,n.__lastSnappedGuideMatched=null);return n.addStyle({left:`${x}px`,top:`${_}px`},{partial:!0}),n.__lastSnappedPosition={left:x,top:_},{x,y:_,guideMatched:n.__lastSnappedGuideMatched}}function le({snapping:e,props:l,editor:u}){const{x:a,y:d}=k({snapping:e,props:l,editor:u}),n=l.component;n.addStyle({left:`${a}px`,top:`${d}px`}),delete n.__lastSnappedPosition,delete n.__lastSnappedGuideMatched}const ae="core:component-drag",de="studio:setDragAbsolute",fe="dmode:start",K="dmode:move",V="dmode:end",I="dragAbsolute",re="select",pe="hover",ue="spacing";return ee(function(e,l={}){const{Commands:u}=e,a=u.events,d=u.getConfig().defaultOptions??{},n=`${a.runBeforeCommand}tlb-move`;d[ae]={run:f=>({...f,skipGuidesRender:!0})};const{snapping:i,locking:o,globalAbsolute:m=!0}=l;m&&e.setDragMode("absolute");const h=!!(i!=null&&i.x||i!=null&&i.y),t=!!(o!=null&&o.x||o!=null&&o.y),{Canvas:s}=e;let r=null;const c=f=>{const{component:g,guidesMatched:y,command:G}=f,B=g.view,O=e.Canvas.getCanvasView(),T=g.getEl();let M=y.map(C=>C.matched.componentEl),D=y.map(C=>N({guideMatched:C,canvasView:O}));if(h){const{guideMatched:C}=k({snapping:i,props:f,editor:e});C?(M=[C.matched.componentEl],D=[N({guideMatched:C,canvasView:O})]):(M=[],D=[])}if(t)if(G.opts.event.shiftKey)if(!r)r=y[0];else{const U=r,H=U.guide.x===void 0?"x":"y";(H==="x"&&(o==null?void 0:o.x)||H==="y"&&(o==null?void 0:o.y))&&(ce({guideMatched:U,component:g,canvasView:O}),M=[U.matched.componentEl],D=[N({guideMatched:U,canvasView:O})])}else r=null;const $={id:I,type:I,component:g,componentView:B,originComponent:T,matchedComponents:M,originMatchedDistances:D};s.addSpot($)},S=({enabled:f})=>{e.runCommand(de,{enabled:f})},E=({type:f})=>{s.removeSpots({type:f})},b=()=>{E({type:re}),E({type:pe}),E({type:ue})},v=f=>{S({enabled:!0}),c(f),b()},x=f=>{c(f),b()},_=f=>{E({type:I}),h&&le({snapping:i,props:f,editor:e}),S({enabled:!1})},A=[[fe,f=>{v(f),e.on(K,x);const g=()=>{_(f),e.off(K,x),e.off(V,g)};e.on(V,g)}],[n,f=>{if(m)return;const g=f.options.target,y=ie(e,g,l);y!=null&&y.result&&!y.dmode&&(y.component.set({dmode:"absolute"}),f.options.mode="absolute")}]];A.forEach(([f,g])=>e.on(f,g)),te({editor:e,licenseKey:l.licenseKey,plan:se,pluginName:oe,cleanup:()=>{S({enabled:!1}),A.forEach(([f,g])=>e.off(f,g))}})})});
+(function(P,L){typeof exports=="object"&&typeof module<"u"?module.exports=L():typeof define=="function"&&define.amd?define(L):(P=typeof globalThis<"u"?globalThis:P||self,P.StudioSdkPlugins_canvasAbsoluteMode=L())})(this,function(){"use strict";const P="app.grapesjs.com",L="app-stage.grapesjs.com",W=[P,L,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],X="license:check:start",j="license:check:end",F=()=>typeof window<"u",q=({isDev:e,isStage:l})=>`${e?"":`https://${l?L:P}`}/api`,J=()=>{const e=F()&&window.location.hostname;return!!e&&(W.includes(e)||W.some(l=>e.endsWith(l)))};function z(e){return typeof e=="function"}async function Q({path:e,baseApiUrl:l,method:u="GET",headers:a={},params:d,body:n}){const o=`${l||q({isDev:!1,isStage:!1})}${e}`,m={method:u,headers:{"Content-Type":"application/json",...a}};n&&(m.body=JSON.stringify(n));const h=d?new URLSearchParams(d).toString():"",t=h?`?${h}`:"",s=await fetch(`${o}${t}`,m);if(!s.ok)throw new Error(`HTTP error! status: ${s.status}`);return s.json()}var R=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(R||{});const Y={[R.free]:0,[R.startup]:10,[R.business]:20,[R.enterprise]:30};function Z(e){const l=e;return l.init=u=>a=>e(a,u),l}const ee=e=>Z(e);async function te({editor:e,plan:l,pluginName:u,licenseKey:a,cleanup:d}){let n="",i=!1;const o=J(),m=t=>{console.warn("Cleanup plugin:",u,"Reason:",t),d()},h=(t={})=>{var E;const{error:s,sdkLicense:r}=t,c=(E=t.plan)==null?void 0:E.category;if(!(r||t.license)||s)m(s||"Invalid license");else if(c){const b=Y[l],v=Y[c];b>v&&m({pluginRequiredPlan:l,licensePlan:c})}};e.on(X,t=>{n=t==null?void 0:t.baseApiUrl,i=!0}),e.on(j,t=>{h(t)}),setTimeout(async()=>{if(!i){if(o)return;if(a){const t=await ne({licenseKey:a,pluginName:u,baseApiUrl:n});t&&h(t)}else m("The `licenseKey` option not provided")}},2e3)}async function ne(e){const{licenseKey:l,pluginName:u,baseApiUrl:a}=e;try{return(await Q({baseApiUrl:a,path:`/sdk/${l||"na"}`,method:"POST",params:{d:window.location.hostname,pn:u}})).result||{}}catch(d){return console.error("Error during SDK license check:",d),!1}}const oe="canvasAbsoluteMode",se=R.startup,ie=(e,l,u)=>{const a=u.enableAbsolute??(m=>m.hasAbsolute),n=(Array.isArray(l)?l:l?[l]:[...e.getSelectedAll()])[0];if(!n)return;const i=n.getEl();return{result:z(a)?a({component:n,hasAbsolute:!!i&&getComputedStyle(i).position==="absolute"}):!1,component:n,dmode:n.get("dmode")}};function N({guideMatched:e,canvasView:l}){var G;const u=e.guide.x===void 0?"y":"x";let a=0,d=0,n=0,i=0;const{guide:o,matched:m}=e,h=l.getElBoxRect(o.componentView.el),t=l.getElBoxRect(((G=m.componentView)==null?void 0:G.el)||m.componentEl),s=h.y,r=h.y+h.height,c=h.x,S=h.x+h.width,E=t.y,b=t.y+t.height,v=t.x,x=t.x+t.width,_=Math.max(0,s-b),p=Math.max(0,E-r),w=Math.max(0,c-x),A=Math.max(0,v-S),f=_>p,g=w>A,y=o.type;return u==="x"&&(y==="l"?(a=c,f?(d=b,n=_):(d=r,n=p)):y==="r"?(a=S,f?(d=b,n=_):(d=r,n=p)):y==="x"&&(a=c-(c-S)/2,f?(d=b,n=_):(d=r,n=p))),u==="y"&&(y==="t"?(d=s,g?(a=x,i=w):(a=S,i=A)):y==="b"?(d=r,g?(a=x,i=w):(a=S,i=A)):y==="y"&&(d=s-(s-r)/2,g?(a=x,i=w):(a=S,i=A))),{axis:u,x:a,y:d,width:i,height:n}}function ce({guideMatched:e,component:l,canvasView:u}){const a=e.guide.x===void 0?"x":"y",{guide:d,matched:n}=e,i=d.type,o=n.type,m=u.getElementPos(d.componentView.el).rect,h=u.getElementPos(n.componentView.el).rect;if(a==="x"){const t=m.height,s=h.top,r=h.top+h.height;let c=0;i==="t"?o==="t"?c=s-t:o==="b"?c=r-t:o==="y"&&(c=s-t-(s-r)/2):i==="b"?o==="t"?c=s-t*2:o==="b"?c=r-t*2:o==="y"&&(c=s-t*2-(s-r)/2):i==="y"&&(o==="t"?c=s-t*1.5:o==="b"?c=r-t*1.5:o==="y"&&(c=s-t*1.5-(s-r)/2)),l.addStyle({top:`${c-5}px`},{partial:!0})}if(a==="y"){const t=m.width,s=h.left,r=h.left+h.width;let c=0;i==="l"?o==="l"?c=s:o==="r"?c=r:o==="x"&&(c=s-(s-r)/2):i==="r"?o==="l"?c=s-t:o==="r"?c=r-t:o==="x"&&(c=s-t-(s-r)/2):i==="x"&&(o==="l"?c=s-t/2:o==="r"&&(c=r-t/2)),l.addStyle({left:`${c}px`},{partial:!0})}}function k({snapping:e,editor:l,props:u}){var B,O;const{command:a,guidesMatched:d}=u,n=u.component,i=n.getEl(),o=l.Canvas.getCanvasView(),{x:m,y:h}=e??{x:10,y:10},t=a.opts.event,s=t.clientX,r=t.clientY;if(!n.__lastSnappedPosition){const T=o.getElBoxRect(i),M=s-T.x,D=r-T.y;n.__lastSnappedPosition={left:T.x,top:T.y},n.__dragOffset={x:M,y:D}}const c=((B=n.__dragOffset)==null?void 0:B.x)||0,S=((O=n.__dragOffset)==null?void 0:O.y)||0,E=n.__lastSnappedPosition,b=s-E.left-c,v=r-E.top-S;let x=E.left,_=E.top;const p=d==null?void 0:d[0],w=(p==null?void 0:p.guide.type)==="l",A=(p==null?void 0:p.guide.type)==="x",f=(p==null?void 0:p.guide.type)==="r",g=(p==null?void 0:p.guide.type)==="t",y=(p==null?void 0:p.guide.type)==="b",G=(p==null?void 0:p.guide.type)==="y";if(p){const{x:T,y:M}=N({guideMatched:p,canvasView:o}),D=i.offsetWidth,$=i.offsetHeight;w?x=T:f?x=T-D:A?x=T-D/2:g?_=M:y?_=M-$:G&&(_=M-$/2),n.__lastSnappedGuideMatched=p}else Math.abs(b)>=m&&(x=Math.round((E.left+b)/m)*m,n.__lastSnappedGuideMatched=null),Math.abs(v)>=h&&(_=Math.round((E.top+v)/h)*h,n.__lastSnappedGuideMatched=null);return n.addStyle({left:`${x}px`,top:`${_}px`},{partial:!0}),n.__lastSnappedPosition={left:x,top:_},{x,y:_,guideMatched:n.__lastSnappedGuideMatched}}function le({snapping:e,props:l,editor:u}){const{x:a,y:d}=k({snapping:e,props:l,editor:u}),n=l.component;n.addStyle({left:`${a}px`,top:`${d}px`}),delete n.__lastSnappedPosition,delete n.__lastSnappedGuideMatched}const ae="core:component-drag",de="studio:setDragAbsolute",fe="dmode:start",K="dmode:move",V="dmode:end",I="dragAbsolute",re="select",pe="hover",ue="spacing";return ee(function(e,l={}){const{Commands:u}=e,a=u.events,d=u.getConfig().defaultOptions??{},n=`${a.runBeforeCommand}tlb-move`;d[ae]={run:f=>({...f,skipGuidesRender:!0})};const{snapping:i,locking:o,globalAbsolute:m=!0}=l;m&&e.setDragMode("absolute");const h=!!(i!=null&&i.x||i!=null&&i.y),t=!!(o!=null&&o.x||o!=null&&o.y),{Canvas:s}=e;let r=null;const c=f=>{const{component:g,guidesMatched:y,command:G}=f,B=g.view,O=e.Canvas.getCanvasView(),T=g.getEl();let M=y.map(C=>C.matched.componentEl),D=y.map(C=>N({guideMatched:C,canvasView:O}));if(h){const{guideMatched:C}=k({snapping:i,props:f,editor:e});C?(M=[C.matched.componentEl],D=[N({guideMatched:C,canvasView:O})]):(M=[],D=[])}if(t)if(G.opts.event.shiftKey)if(!r)r=y[0];else{const U=r,H=U.guide.x===void 0?"x":"y";(H==="x"&&(o==null?void 0:o.x)||H==="y"&&(o==null?void 0:o.y))&&(ce({guideMatched:U,component:g,canvasView:O}),M=[U.matched.componentEl],D=[N({guideMatched:U,canvasView:O})])}else r=null;const $={id:I,type:I,component:g,componentView:B,originComponent:T,matchedComponents:M,originMatchedDistances:D};s.addSpot($)},S=({enabled:f})=>{e.runCommand(de,{enabled:f})},E=({type:f})=>{s.removeSpots({type:f})},b=()=>{E({type:re}),E({type:pe}),E({type:ue})},v=f=>{S({enabled:!0}),c(f),b()},x=f=>{c(f),b()},_=f=>{E({type:I}),h&&le({snapping:i,props:f,editor:e}),S({enabled:!1})},A=[[fe,f=>{v(f),e.on(K,x);const g=()=>{_(f),e.off(K,x),e.off(V,g)};e.on(V,g)}],[n,f=>{if(m)return;const g=f.options.target,y=ie(e,g,l);y!=null&&y.result&&!y.dmode&&(f.options.mode="absolute")}]];A.forEach(([f,g])=>e.on(f,g)),te({editor:e,licenseKey:l.licenseKey,plan:se,pluginName:oe,cleanup:()=>{S({enabled:!1}),A.forEach(([f,g])=>e.off(f,g))}})})});