@grapesjs/studio-sdk-plugins 1.0.33-rc.1 → 1.0.33

package/dist/canvasFullSize/index.es.js

@@ -1,23 +1,23 @@
-function X(e, i, t) {
-  let s, o, c, h, m;
-  const r = i;
-  function d() {
-    const l = Date.now() - h;
-    l < r && l >= 0 ? s = setTimeout(d, r - l) : (s = null, m = e.apply(c, o), c = o = null);
+function Y(e, i, t) {
+  let a, s, r, m, c;
+  const d = i;
+  function l() {
+    const o = Date.now() - m;
+    o < d && o >= 0 ? a = setTimeout(l, d - o) : (a = null, c = e.apply(r, s), r = s = null);
   }
-  const a = function() {
-    return c = this, o = arguments, h = Date.now(), s || (s = setTimeout(d, r)), m;
+  const f = function() {
+    return r = this, s = arguments, m = Date.now(), a || (a = setTimeout(l, d)), c;
   };
-  return a.clear = function() {
-    s && (clearTimeout(s), s = null);
-  }, a.flush = function() {
-    s && (m = e.apply(c, o), c = o = null, clearTimeout(s), s = null);
-  }, a;
+  return f.clear = function() {
+    a && (clearTimeout(a), a = null);
+  }, f.flush = function() {
+    a && (c = e.apply(r, s), r = s = null, clearTimeout(a), a = null);
+  }, f;
 }
-const U = "app.grapesjs.com", k = "app-stage.grapesjs.com", Y = "app2.grapesjs.com", J = "app-stage2.grapesjs.com", j = [
-  U,
-  Y,
+const L = "app.grapesjs.com", F = "app-stage.grapesjs.com", k = "app2.grapesjs.com", J = "app-stage2.grapesjs.com", O = [
+  L,
   k,
+  F,
   J,
   "localhost",
   "127.0.0.1",
@@ -27,83 +27,88 @@ const U = "app.grapesjs.com", k = "app-stage.grapesjs.com", Y = "app2.grapesjs.c
   // For stackblitz.com demos
   "-sandpack.codesandbox.io"
   // For Sandpack demos
-], Q = "license:check:start", ee = "license:check:end", te = () => typeof window < "u", ne = ({ isDev: e, isStage: i }) => `${e ? "" : `https://${i ? k : U}`}/api`, se = () => {
+], Q = "license:check:start", ee = "license:check:end", te = () => typeof window < "u", ne = ({
+  isDev: e,
+  isStage: i,
+  isPlatform: t
+}) => `${e ? "" : `https://${i ? F : L}`}/${t ? "platform-api" : "api"}`, se = () => {
   const e = te() && window.location.hostname;
-  return !!e && (j.includes(e) || j.some((i) => e.endsWith(i)));
+  return !!e && (O.includes(e) || O.some((i) => e.endsWith(i)));
 };
 async function oe({
   path: e,
   baseApiUrl: i,
   method: t = "GET",
-  headers: s = {},
-  params: o,
-  body: c
+  headers: a = {},
+  params: s,
+  body: r
 }) {
-  const m = `${i || ne({ isDev: !1, isStage: !1 })}${e}`, r = {
+  const c = `${i || ne({ isDev: !1, isStage: !1 })}${e}`, d = {
     method: t,
     headers: {
       "Content-Type": "application/json",
-      ...s
+      ...a
     }
   };
-  c && (r.body = JSON.stringify(c));
-  const d = o ? new URLSearchParams(o).toString() : "", a = d ? `?${d}` : "", l = await fetch(`${m}${a}`, r);
-  if (!l.ok)
-    throw new Error(`HTTP error! status: ${l.status}`);
-  return l.json();
+  r && (d.body = JSON.stringify(r));
+  const l = s ? new URLSearchParams(s).toString() : "", f = l ? `?${l}` : "", o = await fetch(`${c}${f}`, d);
+  if (!o.ok)
+    throw new Error(`HTTP error! status: ${o.status}`);
+  return o.json();
 }
-var y = /* @__PURE__ */ ((e) => (e.free = "free", e.startup = "startup", e.business = "business", e.enterprise = "enterprise", e))(y || {});
-const I = {
-  [y.free]: 0,
-  [y.startup]: 10,
-  [y.business]: 20,
-  [y.enterprise]: 30
+var v = /* @__PURE__ */ ((e) => (e.free = "free", e.startup = "startup", e.business = "business", e.enterprise = "enterprise", e))(v || {});
+const U = {
+  [v.free]: 0,
+  [v.startup]: 10,
+  [v.business]: 20,
+  [v.enterprise]: 30
 };
 function ae(e) {
   const i = e;
-  return i.init = (t) => (s) => e(s, t), i;
+  return i.init = (t) => (a) => e(a, t), i;
 }
 const ie = (e) => /* @__PURE__ */ ae(e);
-async function ce({
+async function re({
   editor: e,
   plan: i,
   pluginName: t,
-  licenseKey: s,
-  cleanup: o
+  licenseKey: a,
+  onLicenseCheckResponse: s,
+  cleanup: r
 }) {
-  let c = "", h = !1;
-  const m = se(), r = (a) => {
-    console.warn("Cleanup plugin:", t, "Reason:", a), o();
-  }, d = (a = {}) => {
-    var v;
-    const { error: l, sdkLicense: g } = a, w = (v = a.plan) == null ? void 0 : v.category;
-    if (!(g || a.license) || l)
-      r(l || "Invalid license");
+  let m = "", c = !1;
+  const d = se(), l = (o) => {
+    console.warn("Cleanup plugin:", t, "Reason:", o), r();
+  }, f = (o = {}) => {
+    var b;
+    const { error: g, sdkLicense: E } = o, w = (b = o.plan) == null ? void 0 : b.category;
+    if (!(E || o.license) || g)
+      l(g || "Invalid license");
     else if (w) {
-      const S = I[i], E = I[w];
-      S > E && r({ pluginRequiredPlan: i, licensePlan: w });
+      const T = U[i], x = U[w];
+      T > x && l({ pluginRequiredPlan: i, licensePlan: w });
     }
   };
-  e.on(Q, (a) => {
-    c = a == null ? void 0 : a.baseApiUrl, h = !0;
-  }), e.on(ee, (a) => {
-    d(a);
+  e.on(Q, (o) => {
+    m = o == null ? void 0 : o.baseApiUrl, c = !0;
+  }), e.on(ee, (o) => {
+    s == null || s(o), f(o);
   }), setTimeout(async () => {
-    if (!h) {
-      if (m) return;
-      if (s) {
-        const a = await re({ licenseKey: s, pluginName: t, baseApiUrl: c });
-        a && d(a);
+    if (!c) {
+      if (d) return;
+      if (a) {
+        const o = await ce({ licenseKey: a, pluginName: t, baseApiUrl: m });
+        s == null || s(o), o && f(o);
       } else
-        r("The `licenseKey` option not provided");
+        l("The `licenseKey` option not provided");
     }
   }, 2e3);
 }
-async function re(e) {
-  const { licenseKey: i, pluginName: t, baseApiUrl: s } = e;
+async function ce(e) {
+  const { licenseKey: i, pluginName: t, baseApiUrl: a } = e;
   try {
     return (await oe({
-      baseApiUrl: s,
+      baseApiUrl: a,
       path: `/sdk/${i || "na"}`,
       method: "POST",
       params: {
@@ -111,28 +116,28 @@ async function re(e) {
         pn: t
       }
     })).result || {};
-  } catch (o) {
-    return console.error("Error during SDK license check:", o), !1;
+  } catch (s) {
+    return console.error("Error during SDK license check:", s), !1;
   }
 }
-const N = "data-gs-plg-", O = "canvasFullSize", le = y.startup, ue = (e, i) => {
-  const { rule: t, ruleView: s } = i, { style: o } = t.attributes;
-  if (o && o[e]) {
-    const c = o[e], h = /([0-9.]+)(vh|dvh|lvh|svh)/g, m = h.test(c), r = s.frameView.model;
-    if (m && r.hasAutoHeight()) {
-      const d = c.replace(h, (l, g) => `${window.innerHeight * (parseFloat(g) / 100)}px`), a = t.toCSS({
+const W = "data-gs-plg-", z = "canvasFullSize", le = v.startup, ue = (e, i) => {
+  const { rule: t, ruleView: a } = i, { style: s } = t.attributes;
+  if (s && s[e]) {
+    const r = s[e], m = /([0-9.]+)(vh|dvh|lvh|svh)/g, c = m.test(r), d = a.frameView.model;
+    if (c && d.hasAutoHeight()) {
+      const l = r.replace(m, (o, g) => `${window.innerHeight * (parseFloat(g) / 100)}px`), f = t.toCSS({
         style: {
-          ...o,
-          [e]: d
+          ...s,
+          [e]: l
         }
       });
-      i.css = a;
+      i.css = f;
     }
   }
 }, pe = (e) => {
   ["height", "min-height", "max-height"].forEach((i) => ue(i, e));
 }, me = function(e, i = {}) {
-  const { Canvas: t, Commands: s, Devices: o, Css: c } = e, h = {
+  const { Canvas: t, Commands: a, Devices: s, Css: r } = e, m = {
     deviceMaxWidth: 1200,
     deviceMinHeigth: 500,
     canvasOffsetY: 30,
@@ -142,88 +147,88 @@ const N = "data-gs-plg-", O = "canvasFullSize", le = y.startup, ue = (e, i) => {
     frameTransition: 0.3,
     ...i
   }, {
-    canvasOffsetY: m,
-    canvasOffsetX: r,
-    canvasTransition: d,
-    deviceMaxWidth: a,
-    deviceMinHeigth: l,
+    canvasOffsetY: c,
+    canvasOffsetX: d,
+    canvasTransition: l,
+    deviceMaxWidth: f,
+    deviceMinHeigth: o,
     deviceFixedHeight: g,
-    frameBorderRadius: w,
-    frameTransition: M
-  } = h, v = `${l}px`, S = t.events, E = "core:preview", W = `${s.events.stopCommand}${E}`, D = t.getConfig(), P = `${O}:disable`, z = o.getAll().map((n) => ({ ...n.attributes })), F = d * 1e3, x = { x: r, y: m };
-  let b = {}, H, C;
-  D.scrollableCanvas = !g, o.getAll().map((n) => {
-    !n.get("width") && n.set("width", `${a}px`), !n.get("height") && n.set("height", g ? "100vh" : "auto"), !n.get("minHeight") && n.set("minHeight", v);
+    frameBorderRadius: E,
+    frameTransition: w
+  } = m, y = `${o}px`, b = t.events, T = "core:preview", x = `${a.events.stopCommand}${T}`, H = t.getConfig(), _ = `${z}:disable`, K = s.getAll().map((n) => ({ ...n.attributes })), G = l * 1e3, M = { x: d, y: c };
+  let S = {}, P, $;
+  H.scrollableCanvas = !g, s.getAll().map((n) => {
+    !n.get("width") && n.set("width", `${f}px`), !n.get("height") && n.set("height", g ? "100vh" : "auto"), !n.get("minHeight") && n.set("minHeight", y);
   });
-  const L = (n) => {
-    const u = `${N}canvas-full-size`, p = document.querySelector(`style[${u}]`);
+  const V = (n) => {
+    const u = `${W}canvas-full-size`, p = document.querySelector(`style[${u}]`);
     if (n && p)
       return p.remove();
-    const f = p || document.createElement("style"), T = t.getZoomMultiplier();
-    f.setAttribute(u, "true"), f.innerHTML = `
-      .gjs-frame-wrapper { transition: width ${M}s !important; }
-      .gjs-frame-wrapper__bottom { height: ${m * T}px }
-      .gjs-frame { border-radius: ${w}px }
-    `, !p && document.body.appendChild(f);
+    const h = p || document.createElement("style"), D = t.getZoomMultiplier();
+    h.setAttribute(u, "true"), h.innerHTML = `
+      .gjs-frame-wrapper { transition: width ${w}s !important; }
+      .gjs-frame-wrapper__bottom { height: ${c * D}px }
+      .gjs-frame { border-radius: ${E}px }
+    `, !p && document.body.appendChild(h);
   };
-  e.on(S.frameLoadHead, (n) => {
-    if (!D.scrollableCanvas) return;
-    const { window: u } = n, p = u.document, f = p.head, T = `${N}canvas-full-size-wrappers`, A = f.querySelector(`style[${T}]`) || p.createElement("style");
-    A.setAttribute(T, "true"), A.innerHTML = `
+  e.on(b.frameLoadHead, (n) => {
+    if (!H.scrollableCanvas) return;
+    const { window: u } = n, p = u.document, h = p.head, D = `${W}canvas-full-size-wrappers`, C = h.querySelector(`style[${D}]`) || p.createElement("style");
+    C.setAttribute(D, "true"), C.innerHTML = `
       body { height: auto !important; }
-      [data-gjs-type="wrapper"] { min-height: ${v} !important; }
-      [data-gjs-type="mjml"] { min-height: ${v} !important; }
-      [data-gjs-type="mj-body"] { min-height: ${v} !important; }
-    `, !f.contains(A) && f.appendChild(A);
+      [data-gjs-type="wrapper"] { min-height: ${y} !important; }
+      [data-gjs-type="mjml"] { min-height: ${y} !important; }
+      [data-gjs-type="mj-body"] { min-height: ${y} !important; }
+    `, !h.contains(C) && h.appendChild(C);
   });
-  const R = () => H.style.display = "none", K = () => H.style.display = "", G = () => {
-    var f;
+  const j = () => P.style.display = "none", R = () => P.style.display = "", Z = () => {
+    var h;
     if (!g) return;
-    const n = t.getZoomMultiplier(), p = t.getRect().height * n - m * 2;
-    (f = o.getSelected()) == null || f.set("height", `${Math.max(p, l)}px`), t.fitViewport({ zoom: t.getZoom(), gap: x });
-  }, $ = X(() => {
+    const n = t.getZoomMultiplier(), p = t.getRect().height * n - c * 2;
+    (h = s.getSelected()) == null || h.set("height", `${Math.max(p, o)}px`), t.fitViewport({ zoom: t.getZoom(), gap: M });
+  }, A = Y(() => {
     t.fitViewport({
       zoom: (n) => n > 100 ? 100 : n,
       ignoreHeight: !0,
-      gap: x
-    }), G(), L(), setTimeout(() => {
+      gap: M
+    }), Z(), V(), setTimeout(() => {
       var u, p;
       const { em: n } = e;
-      n.destroyed || ((p = (u = e.getSelected()) == null ? void 0 : u.getEl()) == null || p.scrollIntoView({ block: "nearest" }), e.refresh({ tools: !0 }), K(), s.isActive(E) ? n.stopDefault() : n.runDefault());
-    }, F);
-  }, 100), Z = (n = {}) => {
+      n.destroyed || ((p = (u = e.getSelected()) == null ? void 0 : u.getEl()) == null || p.scrollIntoView({ block: "nearest" }), e.refresh({ tools: !0 }), R(), a.isActive(T) ? n.stopDefault() : n.runDefault());
+    }, G);
+  }, 100), q = (n = {}) => {
     n.options && n.options.from !== "fitViewport" && t.fitViewport({
       zoom: t.getZoom(),
       ignoreHeight: !0,
-      gap: x
+      gap: M
     });
-  }, q = () => {
-    R(), $();
   }, B = () => {
-    b.overflowX = "hidden", b.overflowY = "auto";
-  }, V = () => {
-    C == null || C.disconnect(), $.clear();
-  }, _ = [
-    [o.events.select, q],
-    [S.zoom, Z],
-    [W, B],
-    [e.events.destroy, V],
-    [c.events.mountBefore, pe]
+    j(), A();
+  }, X = () => {
+    S.overflowX = "hidden", S.overflowY = "auto";
+  }, I = () => {
+    $ == null || $.disconnect(), A.clear();
+  }, N = [
+    [s.events.select, B],
+    [b.zoom, q],
+    [x, X],
+    [e.events.destroy, I],
+    [r.events.mountBefore, pe]
   ];
-  s.add(P, () => {
-    o.devices.reset(z), D.scrollableCanvas = !1, t.getModel().updateDevice(), t.setZoom(100), t.setCoords(0, 0), b.overflowY = "hidden", L(!0), _.forEach(([n, u]) => e.off(n, u)), V(), s.run("studio:canvasReload");
-  }), _.forEach(([n, u]) => e.on(n, u)), e.onReady(() => {
+  a.add(_, () => {
+    s.devices.reset(K), H.scrollableCanvas = !1, t.getModel().updateDevice(), t.setZoom(100), t.setCoords(0, 0), S.overflowY = "hidden", V(!0), N.forEach(([n, u]) => e.off(n, u)), I(), a.run("studio:canvasReload");
+  }), N.forEach(([n, u]) => e.on(n, u)), e.onReady(() => {
     const n = t.getElement(), u = t.getFramesEl(), p = t.getCanvasView();
-    H = t.getSpotsEl(), b = n.style, b.overflowX = "hidden", u.style.transition = `transform ${d}s`, document.removeEventListener("keypress", p.onKeyPress), L(), C = new ResizeObserver(() => {
-      R(), $();
-    }), C.observe(n.parentElement), $();
-  }), ce({
+    P = t.getSpotsEl(), S = n.style, S.overflowX = "hidden", u.style.transition = `transform ${l}s`, document.removeEventListener("keypress", p.onKeyPress), V(), $ = new ResizeObserver(() => {
+      j(), A();
+    }), $.observe(n.parentElement), A();
+  }), re({
     editor: e,
-    licenseKey: h.licenseKey,
+    licenseKey: m.licenseKey,
     plan: le,
-    pluginName: O,
+    pluginName: z,
     cleanup: () => {
-      e.runCommand(P);
+      e.runCommand(_);
     }
   });
 }, de = ie(me);

package/dist/canvasFullSize/index.umd.js

@@ -1,10 +1,10 @@
-(function(S,w){typeof exports=="object"&&typeof module<"u"?module.exports=w():typeof define=="function"&&define.amd?define(w):(S=typeof globalThis<"u"?globalThis:S||self,S.StudioSdkPlugins_canvasFullSize=w())})(this,function(){"use strict";function S(e,a,t){let s,o,c,h,d;const r=a;function m(){const l=Date.now()-h;l<r&&l>=0?s=setTimeout(m,r-l):(s=null,d=e.apply(c,o),c=o=null)}const i=function(){return c=this,o=arguments,h=Date.now(),s||(s=setTimeout(m,r)),d};return i.clear=function(){s&&(clearTimeout(s),s=null)},i.flush=function(){s&&(d=e.apply(c,o),c=o=null,clearTimeout(s),s=null)},i}const w="app.grapesjs.com",P="app-stage.grapesjs.com",I=[w,"app2.grapesjs.com",P,"app-stage2.grapesjs.com","localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],W="license:check:start",F="license:check:end",G=()=>typeof window<"u",K=({isDev:e,isStage:a})=>`${e?"":`https://${a?P:w}`}/api`,Z=()=>{const e=G()&&window.location.hostname;return!!e&&(I.includes(e)||I.some(a=>e.endsWith(a)))};async function q({path:e,baseApiUrl:a,method:t="GET",headers:s={},params:o,body:c}){const d=`${a||K({isDev:!1,isStage:!1})}${e}`,r={method:t,headers:{"Content-Type":"application/json",...s}};c&&(r.body=JSON.stringify(c));const m=o?new URLSearchParams(o).toString():"",i=m?`?${m}`:"",l=await fetch(`${d}${i}`,r);if(!l.ok)throw new Error(`HTTP error! status: ${l.status}`);return l.json()}var y=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(y||{});const N={[y.free]:0,[y.startup]:10,[y.business]:20,[y.enterprise]:30};function B(e){const a=e;return a.init=t=>s=>e(s,t),a}const X=e=>B(e);async function Y({editor:e,plan:a,pluginName:t,licenseKey:s,cleanup:o}){let c="",h=!1;const d=Z(),r=i=>{console.warn("Cleanup plugin:",t,"Reason:",i),o()},m=(i={})=>{var v;const{error:l,sdkLicense:g}=i,b=(v=i.plan)==null?void 0:v.category;if(!(g||i.license)||l)r(l||"Invalid license");else if(b){const E=N[a],$=N[b];E>$&&r({pluginRequiredPlan:a,licensePlan:b})}};e.on(W,i=>{c=i==null?void 0:i.baseApiUrl,h=!0}),e.on(F,i=>{m(i)}),setTimeout(async()=>{if(!h){if(d)return;if(s){const i=await J({licenseKey:s,pluginName:t,baseApiUrl:c});i&&m(i)}else r("The `licenseKey` option not provided")}},2e3)}async function J(e){const{licenseKey:a,pluginName:t,baseApiUrl:s}=e;try{return(await q({baseApiUrl:s,path:`/sdk/${a||"na"}`,method:"POST",params:{d:window.location.hostname,pn:t}})).result||{}}catch(o){return console.error("Error during SDK license check:",o),!1}}const O="data-gs-plg-",R="canvasFullSize",Q=y.startup,ee=(e,a)=>{const{rule:t,ruleView:s}=a,{style:o}=t.attributes;if(o&&o[e]){const c=o[e],h=/([0-9.]+)(vh|dvh|lvh|svh)/g,d=h.test(c),r=s.frameView.model;if(d&&r.hasAutoHeight()){const m=c.replace(h,(l,g)=>`${window.innerHeight*(parseFloat(g)/100)}px`),i=t.toCSS({style:{...o,[e]:m}});a.css=i}}},te=e=>{["height","min-height","max-height"].forEach(a=>ee(a,e))};return X(function(e,a={}){const{Canvas:t,Commands:s,Devices:o,Css:c}=e,h={deviceMaxWidth:1200,deviceMinHeigth:500,canvasOffsetY:30,canvasOffsetX:50,canvasTransition:.3,frameBorderRadius:5,frameTransition:.3,...a},{canvasOffsetY:d,canvasOffsetX:r,canvasTransition:m,deviceMaxWidth:i,deviceMinHeigth:l,deviceFixedHeight:g,frameBorderRadius:b,frameTransition:j}=h,v=`${l}px`,E=t.events,$="core:preview",ne=`${s.events.stopCommand}${$}`,M=t.getConfig(),V=`${R}:disable`,se=o.getAll().map(n=>({...n.attributes})),oe=m*1e3,H={x:r,y:d};let C={},L,T;M.scrollableCanvas=!g,o.getAll().map(n=>{!n.get("width")&&n.set("width",`${i}px`),!n.get("height")&&n.set("height",g?"100vh":"auto"),!n.get("minHeight")&&n.set("minHeight",v)});const _=n=>{const u=`${O}canvas-full-size`,p=document.querySelector(`style[${u}]`);if(n&&p)return p.remove();const f=p||document.createElement("style"),D=t.getZoomMultiplier();f.setAttribute(u,"true"),f.innerHTML=`
-      .gjs-frame-wrapper { transition: width ${j}s !important; }
-      .gjs-frame-wrapper__bottom { height: ${d*D}px }
-      .gjs-frame { border-radius: ${b}px }
-    `,!p&&document.body.appendChild(f)};e.on(E.frameLoadHead,n=>{if(!M.scrollableCanvas)return;const{window:u}=n,p=u.document,f=p.head,D=`${O}canvas-full-size-wrappers`,x=f.querySelector(`style[${D}]`)||p.createElement("style");x.setAttribute(D,"true"),x.innerHTML=`
+(function(y,v){typeof exports=="object"&&typeof module<"u"?module.exports=v():typeof define=="function"&&define.amd?define(v):(y=typeof globalThis<"u"?globalThis:y||self,y.StudioSdkPlugins_canvasFullSize=v())})(this,function(){"use strict";function y(e,a,t){let i,s,c,p,r;const m=a;function l(){const o=Date.now()-p;o<m&&o>=0?i=setTimeout(l,m-o):(i=null,r=e.apply(c,s),c=s=null)}const f=function(){return c=this,s=arguments,p=Date.now(),i||(i=setTimeout(l,m)),r};return f.clear=function(){i&&(clearTimeout(i),i=null)},f.flush=function(){i&&(r=e.apply(c,s),c=s=null,clearTimeout(i),i=null)},f}const v="app.grapesjs.com",O="app-stage.grapesjs.com",j=[v,"app2.grapesjs.com",O,"app-stage2.grapesjs.com","localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],K="license:check:start",R="license:check:end",Z=()=>typeof window<"u",q=({isDev:e,isStage:a,isPlatform:t})=>`${e?"":`https://${a?O:v}`}/${t?"platform-api":"api"}`,B=()=>{const e=Z()&&window.location.hostname;return!!e&&(j.includes(e)||j.some(a=>e.endsWith(a)))};async function X({path:e,baseApiUrl:a,method:t="GET",headers:i={},params:s,body:c}){const r=`${a||q({isDev:!1,isStage:!1})}${e}`,m={method:t,headers:{"Content-Type":"application/json",...i}};c&&(m.body=JSON.stringify(c));const l=s?new URLSearchParams(s).toString():"",f=l?`?${l}`:"",o=await fetch(`${r}${f}`,m);if(!o.ok)throw new Error(`HTTP error! status: ${o.status}`);return o.json()}var w=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(w||{});const V={[w.free]:0,[w.startup]:10,[w.business]:20,[w.enterprise]:30};function Y(e){const a=e;return a.init=t=>i=>e(i,t),a}const k=e=>Y(e);async function J({editor:e,plan:a,pluginName:t,licenseKey:i,onLicenseCheckResponse:s,cleanup:c}){let p="",r=!1;const m=B(),l=o=>{console.warn("Cleanup plugin:",t,"Reason:",o),c()},f=(o={})=>{var T;const{error:g,sdkLicense:A}=o,b=(T=o.plan)==null?void 0:T.category;if(!(A||o.license)||g)l(g||"Invalid license");else if(b){const D=V[a],H=V[b];D>H&&l({pluginRequiredPlan:a,licensePlan:b})}};e.on(K,o=>{p=o==null?void 0:o.baseApiUrl,r=!0}),e.on(R,o=>{s==null||s(o),f(o)}),setTimeout(async()=>{if(!r){if(m)return;if(i){const o=await Q({licenseKey:i,pluginName:t,baseApiUrl:p});s==null||s(o),o&&f(o)}else l("The `licenseKey` option not provided")}},2e3)}async function Q(e){const{licenseKey:a,pluginName:t,baseApiUrl:i}=e;try{return(await X({baseApiUrl:i,path:`/sdk/${a||"na"}`,method:"POST",params:{d:window.location.hostname,pn:t}})).result||{}}catch(s){return console.error("Error during SDK license check:",s),!1}}const U="data-gs-plg-",z="canvasFullSize",ee=w.startup,te=(e,a)=>{const{rule:t,ruleView:i}=a,{style:s}=t.attributes;if(s&&s[e]){const c=s[e],p=/([0-9.]+)(vh|dvh|lvh|svh)/g,r=p.test(c),m=i.frameView.model;if(r&&m.hasAutoHeight()){const l=c.replace(p,(o,g)=>`${window.innerHeight*(parseFloat(g)/100)}px`),f=t.toCSS({style:{...s,[e]:l}});a.css=f}}},ne=e=>{["height","min-height","max-height"].forEach(a=>te(a,e))};return k(function(e,a={}){const{Canvas:t,Commands:i,Devices:s,Css:c}=e,p={deviceMaxWidth:1200,deviceMinHeigth:500,canvasOffsetY:30,canvasOffsetX:50,canvasTransition:.3,frameBorderRadius:5,frameTransition:.3,...a},{canvasOffsetY:r,canvasOffsetX:m,canvasTransition:l,deviceMaxWidth:f,deviceMinHeigth:o,deviceFixedHeight:g,frameBorderRadius:A,frameTransition:b}=p,S=`${o}px`,T=t.events,D="core:preview",H=`${i.events.stopCommand}${D}`,_=t.getConfig(),W=`${z}:disable`,se=s.getAll().map(n=>({...n.attributes})),oe=l*1e3,P={x:m,y:r};let E={},I,$;_.scrollableCanvas=!g,s.getAll().map(n=>{!n.get("width")&&n.set("width",`${f}px`),!n.get("height")&&n.set("height",g?"100vh":"auto"),!n.get("minHeight")&&n.set("minHeight",S)});const N=n=>{const u=`${U}canvas-full-size`,d=document.querySelector(`style[${u}]`);if(n&&d)return d.remove();const h=d||document.createElement("style"),C=t.getZoomMultiplier();h.setAttribute(u,"true"),h.innerHTML=`
+      .gjs-frame-wrapper { transition: width ${b}s !important; }
+      .gjs-frame-wrapper__bottom { height: ${r*C}px }
+      .gjs-frame { border-radius: ${A}px }
+    `,!d&&document.body.appendChild(h)};e.on(T.frameLoadHead,n=>{if(!_.scrollableCanvas)return;const{window:u}=n,d=u.document,h=d.head,C=`${U}canvas-full-size-wrappers`,M=h.querySelector(`style[${C}]`)||d.createElement("style");M.setAttribute(C,"true"),M.innerHTML=`
       body { height: auto !important; }
-      [data-gjs-type="wrapper"] { min-height: ${v} !important; }
-      [data-gjs-type="mjml"] { min-height: ${v} !important; }
-      [data-gjs-type="mj-body"] { min-height: ${v} !important; }
-    `,!f.contains(x)&&f.appendChild(x)});const U=()=>L.style.display="none",ie=()=>L.style.display="",ae=()=>{var f;if(!g)return;const n=t.getZoomMultiplier(),p=t.getRect().height*n-d*2;(f=o.getSelected())==null||f.set("height",`${Math.max(p,l)}px`),t.fitViewport({zoom:t.getZoom(),gap:H})},A=S(()=>{t.fitViewport({zoom:n=>n>100?100:n,ignoreHeight:!0,gap:H}),ae(),_(),setTimeout(()=>{var u,p;const{em:n}=e;n.destroyed||((p=(u=e.getSelected())==null?void 0:u.getEl())==null||p.scrollIntoView({block:"nearest"}),e.refresh({tools:!0}),ie(),s.isActive($)?n.stopDefault():n.runDefault())},oe)},100),ce=(n={})=>{n.options&&n.options.from!=="fitViewport"&&t.fitViewport({zoom:t.getZoom(),ignoreHeight:!0,gap:H})},re=()=>{U(),A()},le=()=>{C.overflowX="hidden",C.overflowY="auto"},k=()=>{T==null||T.disconnect(),A.clear()},z=[[o.events.select,re],[E.zoom,ce],[ne,le],[e.events.destroy,k],[c.events.mountBefore,te]];s.add(V,()=>{o.devices.reset(se),M.scrollableCanvas=!1,t.getModel().updateDevice(),t.setZoom(100),t.setCoords(0,0),C.overflowY="hidden",_(!0),z.forEach(([n,u])=>e.off(n,u)),k(),s.run("studio:canvasReload")}),z.forEach(([n,u])=>e.on(n,u)),e.onReady(()=>{const n=t.getElement(),u=t.getFramesEl(),p=t.getCanvasView();L=t.getSpotsEl(),C=n.style,C.overflowX="hidden",u.style.transition=`transform ${m}s`,document.removeEventListener("keypress",p.onKeyPress),_(),T=new ResizeObserver(()=>{U(),A()}),T.observe(n.parentElement),A()}),Y({editor:e,licenseKey:h.licenseKey,plan:Q,pluginName:R,cleanup:()=>{e.runCommand(V)}})})});
+      [data-gjs-type="wrapper"] { min-height: ${S} !important; }
+      [data-gjs-type="mjml"] { min-height: ${S} !important; }
+      [data-gjs-type="mj-body"] { min-height: ${S} !important; }
+    `,!h.contains(M)&&h.appendChild(M)});const L=()=>I.style.display="none",ie=()=>I.style.display="",ae=()=>{var h;if(!g)return;const n=t.getZoomMultiplier(),d=t.getRect().height*n-r*2;(h=s.getSelected())==null||h.set("height",`${Math.max(d,o)}px`),t.fitViewport({zoom:t.getZoom(),gap:P})},x=y(()=>{t.fitViewport({zoom:n=>n>100?100:n,ignoreHeight:!0,gap:P}),ae(),N(),setTimeout(()=>{var u,d;const{em:n}=e;n.destroyed||((d=(u=e.getSelected())==null?void 0:u.getEl())==null||d.scrollIntoView({block:"nearest"}),e.refresh({tools:!0}),ie(),i.isActive(D)?n.stopDefault():n.runDefault())},oe)},100),ce=(n={})=>{n.options&&n.options.from!=="fitViewport"&&t.fitViewport({zoom:t.getZoom(),ignoreHeight:!0,gap:P})},re=()=>{L(),x()},le=()=>{E.overflowX="hidden",E.overflowY="auto"},F=()=>{$==null||$.disconnect(),x.clear()},G=[[s.events.select,re],[T.zoom,ce],[H,le],[e.events.destroy,F],[c.events.mountBefore,ne]];i.add(W,()=>{s.devices.reset(se),_.scrollableCanvas=!1,t.getModel().updateDevice(),t.setZoom(100),t.setCoords(0,0),E.overflowY="hidden",N(!0),G.forEach(([n,u])=>e.off(n,u)),F(),i.run("studio:canvasReload")}),G.forEach(([n,u])=>e.on(n,u)),e.onReady(()=>{const n=t.getElement(),u=t.getFramesEl(),d=t.getCanvasView();I=t.getSpotsEl(),E=n.style,E.overflowX="hidden",u.style.transition=`transform ${l}s`,document.removeEventListener("keypress",d.onKeyPress),N(),$=new ResizeObserver(()=>{L(),x()}),$.observe(n.parentElement),x()}),J({editor:e,licenseKey:p.licenseKey,plan:ee,pluginName:z,cleanup:()=>{e.runCommand(W)}})})});

package/dist/canvasGridMode/index.cjs.js

@@ -1,5 +1,5 @@
-"use strict";const q="app.grapesjs.com",H="app-stage.grapesjs.com",nt="app2.grapesjs.com",rt="app-stage2.grapesjs.com",W=[q,nt,H,rt,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],st="license:check:start",at="license:check:end",it=()=>typeof window<"u",lt=({isDev:t,isStage:e})=>`${t?"":`https://${e?H:q}`}/api`,ct=()=>{const t=it()&&window.location.hostname;return!!t&&(W.includes(t)||W.some(e=>t.endsWith(e)))};function Y(t){return typeof t=="function"}async function pt({path:t,baseApiUrl:e,method:r="GET",headers:n={},params:o,body:i}){const l=`${e||lt({isDev:!1,isStage:!1})}${t}`,c={method:r,headers:{"Content-Type":"application/json",...n}};i&&(c.body=JSON.stringify(i));const p=o?new URLSearchParams(o).toString():"",a=p?`?${p}`:"",d=await fetch(`${l}${a}`,c);if(!d.ok)throw new Error(`HTTP error! status: ${d.status}`);return d.json()}var R=(t=>(t.free="free",t.startup="startup",t.business="business",t.enterprise="enterprise",t))(R||{});const j={[R.free]:0,[R.startup]:10,[R.business]:20,[R.enterprise]:30};function dt(t){const e=t;return e.init=r=>n=>t(n,r),e}const ut=t=>dt(t);async function gt({editor:t,plan:e,pluginName:r,licenseKey:n,cleanup:o}){let i="",s=!1;const l=ct(),c=a=>{console.warn("Cleanup plugin:",r,"Reason:",a),o()},p=(a={})=>{var m;const{error:d,sdkLicense:u}=a,g=(m=a.plan)==null?void 0:m.category;if(!(u||a.license)||d)c(d||"Invalid license");else if(g){const w=j[e],b=j[g];w>b&&c({pluginRequiredPlan:e,licensePlan:g})}};t.on(st,a=>{i=a==null?void 0:a.baseApiUrl,s=!0}),t.on(at,a=>{p(a)}),setTimeout(async()=>{if(!s){if(l)return;if(n){const a=await mt({licenseKey:n,pluginName:r,baseApiUrl:i});a&&p(a)}else c("The `licenseKey` option not provided")}},2e3)}async function mt(t){const{licenseKey:e,pluginName:r,baseApiUrl:n}=t;try{return(await pt({baseApiUrl:n,path:`/sdk/${e||"na"}`,method:"POST",params:{d:window.location.hostname,pn:r}})).result||{}}catch(o){return console.error("Error during SDK license check:",o),!1}}const N="canvasGridMode",ft=R.startup,L="component-grid-mode",A="grid-mode",D="gjs-drag-grid-spot",K=`${D}__grid-item`,X=`${D}__grid-target`,J=`${D}__snapped`,yt=`${D}__container`,ht=()=>{const t="data-gjs-drag-grid-style",e=document,r="var(--gs-theme-cl-cmp-bg1, var(--gjs-color-highlight))",n="var(--gs-theme-cl-cmp-bg2, var(--gjs-color-blue))",o=e.querySelector(`style[${t}]`)||e.createElement("style");o.setAttribute(t,"true"),o.innerHTML=`
-        .${K} {
+"use strict";const H="app.grapesjs.com",Y="app-stage.grapesjs.com",nt="app2.grapesjs.com",rt="app-stage2.grapesjs.com",W=[H,nt,Y,rt,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],st="license:check:start",at="license:check:end",it=()=>typeof window<"u",lt=({isDev:t,isStage:e,isPlatform:r})=>`${t?"":`https://${e?Y:H}`}/${r?"platform-api":"api"}`,ct=()=>{const t=it()&&window.location.hostname;return!!t&&(W.includes(t)||W.some(e=>t.endsWith(e)))};function K(t){return typeof t=="function"}async function pt({path:t,baseApiUrl:e,method:r="GET",headers:n={},params:o,body:i}){const l=`${e||lt({isDev:!1,isStage:!1})}${t}`,d={method:r,headers:{"Content-Type":"application/json",...n}};i&&(d.body=JSON.stringify(i));const c=o?new URLSearchParams(o).toString():"",p=c?`?${c}`:"",a=await fetch(`${l}${p}`,d);if(!a.ok)throw new Error(`HTTP error! status: ${a.status}`);return a.json()}var G=(t=>(t.free="free",t.startup="startup",t.business="business",t.enterprise="enterprise",t))(G||{});const j={[G.free]:0,[G.startup]:10,[G.business]:20,[G.enterprise]:30};function dt(t){const e=t;return e.init=r=>n=>t(n,r),e}const ut=t=>dt(t);async function mt({editor:t,plan:e,pluginName:r,licenseKey:n,onLicenseCheckResponse:o,cleanup:i}){let s="",l=!1;const d=ct(),c=a=>{console.warn("Cleanup plugin:",r,"Reason:",a),i()},p=(a={})=>{var w;const{error:u,sdkLicense:m}=a,h=(w=a.plan)==null?void 0:w.category;if(!(m||a.license)||u)c(u||"Invalid license");else if(h){const b=j[e],v=j[h];b>v&&c({pluginRequiredPlan:e,licensePlan:h})}};t.on(st,a=>{s=a==null?void 0:a.baseApiUrl,l=!0}),t.on(at,a=>{o==null||o(a),p(a)}),setTimeout(async()=>{if(!l){if(d)return;if(n){const a=await gt({licenseKey:n,pluginName:r,baseApiUrl:s});o==null||o(a),a&&p(a)}else c("The `licenseKey` option not provided")}},2e3)}async function gt(t){const{licenseKey:e,pluginName:r,baseApiUrl:n}=t;try{return(await pt({baseApiUrl:n,path:`/sdk/${e||"na"}`,method:"POST",params:{d:window.location.hostname,pn:r}})).result||{}}catch(o){return console.error("Error during SDK license check:",o),!1}}const N="canvasGridMode",ft=G.startup,F="component-grid-mode",A="grid-mode",D="gjs-drag-grid-spot",X=`${D}__grid-item`,k=`${D}__grid-target`,J=`${D}__snapped`,yt=`${D}__container`,ht=()=>{const t="data-gjs-drag-grid-style",e=document,r="var(--gs-theme-cl-cmp-bg1, var(--gjs-color-highlight))",n="var(--gs-theme-cl-cmp-bg2, var(--gjs-color-blue))",o=e.querySelector(`style[${t}]`)||e.createElement("style");o.setAttribute(t,"true"),o.innerHTML=`
+        .${X} {
             outline: 2px solid ${n};
             background: ${r};
             outline-offset: -2px;
@@ -15,7 +15,7 @@
             outline-offset: -2px;
             position: absolute;
         }
-        .${X} {
+        .${k} {
             position: absolute;
             z-index: -1;
             background: ${r};
@@ -23,4 +23,4 @@
             outline-offset: -1px;
             opacity: 0.35;
         }
-    `,e.head.appendChild(o)};function Q(t){const{editor:e,type:r}=t,n=$t(e,t.component),o=z(e,n.component);if(!vt(e,n,o,r))return{target:n,container:o,startScroll:et(e).scroll,shadowContainerEl:document.createElement("div"),shadowSnappedEl:document.createElement("div"),shadowTargetEl:document.createElement("div"),spot:e.Canvas.addSpot({type:A,component:o.component})}}function Z(t){const{editor:e,shadowTargetEl:r,shadowSnappedEl:n,shadowContainerEl:o,spotEl:i,target:s,container:l}=t,{Canvas:c}=e,p=e.config.stylePrefix;i==null||i.appendChild(o),o==null||o.appendChild(r),o==null||o.appendChild(n),wt(o,l),St(r,s,l),bt(n,s),Ct(o,l.el),s.el.style.opacity="0";const a=c.getSpots().filter(d=>d.type!==A);e.em.stopDefault({preserveSelected:!0}),c.removeSpots(a),c.startAutoscroll(),c.getBody().classList.add(`${p}is__grabbing`)}function V(t){const{editor:e,shadowSnappedEl:r,shadowContainerEl:n,target:o,cancelled:i}=t,{Canvas:s}=e,l=e.config.stylePrefix,{component:c}=o;if(!i){const p=window.getComputedStyle(r);c.addStyle({"grid-area":p.gridArea,width:"",height:""})}o.el.style.opacity="",n.contains(r)&&(n==null||n.removeChild(r)),e.getModel().runDefault({preserveSelected:1}),s.stopAutoscroll(),s.getBody().classList.remove(`${l}is__grabbing`),s.removeSpots({type:A}),e.select(c)}function wt(t,{rows:e,columns:r}){const n=[];for(let o=0;o<r.length;o++){n[o]=[];for(let i=0;i<e.length;i++){const s=document.createElement("div");s.className=K,s.style.gridArea=`${i+1} / ${o+1}`,n[o][i]=s,t.appendChild(s)}}return n}function St(t,e,r){return t.className=X,t.style.top=`${e.offset.top-r.offset.top}px`,t.style.left=`${e.offset.left-r.offset.left}px`,t.style.width=`${e.offset.width+e.margin.left+e.margin.right}px`,t.style.height=`${e.offset.height+e.margin.top+e.margin.bottom}px`,t}function bt(t,e){const r=ot(e.el,e.computedStyles);return t.className=J,t.style.gridArea=`${r.row.start} / ${r.column.start} / ${r.row.end} / ${r.column.end}`,t}function Ct(t,e){const r=window.getComputedStyle(e);t.className=yt,t.style.position="relative",t.style.display=r.display,t.style.gap=r.gap,t.style.padding=r.padding,t.style.border=r.border,t.style.gridTemplateColumns=r.gridTemplateColumns,t.style.gridTemplateRows=r.gridTemplateRows}function tt(t,e){if(e){if(Array.isArray(e))return[...e].pop()}else return[...t.getSelectedAll()].pop();return e}function $t(t,e){const r=tt(t,e),n=r.getEl(),o=window.getComputedStyle(n);return{component:r,el:n,offset:t.Canvas.offset(n),margin:{top:parseFloat(o.marginTop),right:parseFloat(o.marginRight),bottom:parseFloat(o.marginBottom),left:parseFloat(o.marginLeft)},computedStyles:o}}function z(t,e){const r=e.parent(),n=r.getEl(),o=window.getComputedStyle(n);return{component:r,el:n,offset:t.Canvas.offset(n),computedStyles:o,padding:{top:parseFloat(o.paddingTop),right:parseFloat(o.paddingRight),bottom:parseFloat(o.paddingBottom),left:parseFloat(o.paddingLeft)},columns:o.gridTemplateColumns.split(" ").map(s=>parseFloat(s)),rows:o.gridTemplateRows.split(" ").map(s=>parseFloat(s)),gap:{column:parseInt(o.columnGap),row:parseInt(o.rowGap)}}}function E(t,e,r,n,o=1){let i=0;for(let s=e;s<=t.length;s++){if(i+(t[s-1]+n)*o>r)return s;i+=n+t[s-1]}return t.length+1}function et(t){const{scrollY:e,scrollX:r}=t.Canvas.getWindow();return{scroll:{top:e,left:r}}}function vt(t,e,r,n){const o=i=>t.em.logWarning(i);return n==="draggable"&&e.component.get(n)===!1?(o(`[${N}] The element is not ${n}`),!0):r.computedStyles.display!=="grid"?(o(`[${N}] The container does not have style display:grid`),!0):!1}function _(t,e,r={}){const n=tt(t,e),o=n==null?void 0:n.parent(),i=o==null?void 0:o.getEl();if(!o||!i)return!1;const{enableGrid:s}=r,l=window.getComputedStyle(i).display==="grid";return Y(s)?s({component:n,parent:o,isParentGrid:l}):l}const B=t=>t.split(" ").map(e=>parseFloat(e));function ot(t,e){const r=t.ownerDocument.defaultView,n=e||r.getComputedStyle(t),o=n.gridArea.split("/").some(S=>isNaN(parseInt(S.trim()))),i={isComputed:o,raw:n.gridArea};if(!o)return{...i,row:{start:parseInt(n.gridRowStart),end:parseInt(n.gridRowEnd)},column:{start:parseInt(n.gridColumnStart),end:parseInt(n.gridColumnEnd)}};const s=t.parentElement,l=r.getComputedStyle(s),c=parseFloat(l.columnGap)||0,p=parseFloat(l.rowGap)||0,a=B(l.gridTemplateColumns),d=B(l.gridTemplateRows),u=parseFloat(l.paddingLeft)||0,g=parseFloat(l.paddingTop)||0,h=s.getBoundingClientRect(),m=t.getBoundingClientRect(),w=(S,C,x,$,M)=>{let G=1,T=$+M;for(let P=0;P<C.length;P++){const I=C[P],O=T+I;if(S>=T&&S<O)return G;T=O+x,G++}return-1},b=w(m.left,a,c,h.left,u),v=w(m.right-1,a,c,h.left,u)+1,y=w(m.top,d,p,h.top,g),f=w(m.bottom-1,d,p,h.top,g)+1;return{...i,row:{start:y,end:f},column:{start:b,end:v}}}function Et(t){t.Commands.add(L,{stop(){},run(e,r,n={}){const o=Q({editor:e,component:n.target,type:"draggable"});if(!o){this.stopCommand();return}const{spot:i,target:s,shadowContainerEl:l,shadowSnappedEl:c,shadowTargetEl:p,startScroll:a}=o;let{container:d}=o,u;new e.Utils.Dragger({doc:s.el.ownerDocument,onStart:()=>{u=setTimeout(()=>{Z({editor:e,shadowTargetEl:p,shadowSnappedEl:c,shadowContainerEl:l,spotEl:i.attributes.spotEl,target:s,container:d}),d=z(e,s.component)},10)},onEnd:(h,m,{cancelled:w})=>{clearTimeout(u),V({editor:e,shadowSnappedEl:c,shadowContainerEl:l,target:s,cancelled:w}),this.stopCommand(),e.em.set("_cmpDrag",1)},setPosition:({x:h,y:m})=>{const{scroll:w}=et(e),{columns:b,rows:v,gap:y,offset:f,padding:S}=d,{offset:C,margin:x}=s,$=C.top-f.top-S.top-x.top+m-a.top+w.top,M=C.left-f.left-S.left-x.left+h-a.left+w.left,G=Math.min(E(b,1,M,y.column,.5),b.length),T=Math.min(E(v,1,$,y.row,.5),v.length),P=Math.min(E(b,G,C.width,y.column)+1,b.length+1),I=Math.min(E(v,T,C.height,y.row)+1,v.length+1);c.style.gridArea=`${T} / ${G} / ${I} / ${P}`,p.style.top=`${$+S.top}px`,p.style.left=`${M+S.left}px`}}).start(n.event)}})}function xt(t,e){const r=Q({editor:t,component:e.component,type:"resizable"});if(!r)return;const{onMove:n,onEnd:o}=e.options||{},{spot:i,target:s,shadowContainerEl:l,shadowSnappedEl:c,shadowTargetEl:p}=r;let{container:a}=r,d="",u;return{onStart:g=>{d=g.target.dataset.gjsHandler||"",u=setTimeout(()=>{Z({editor:t,shadowTargetEl:p,shadowSnappedEl:c,shadowContainerEl:l,spotEl:i.attributes.spotEl,target:s,container:a}),a=z(t,s.component)},10),t.trigger("component:resize",{...s,type:"start"})},onEnd:(g,h)=>{const{startDim:m,rectDim:w}=h.resizer,b=JSON.stringify(m)===JSON.stringify(w);clearTimeout(u),V({editor:t,shadowSnappedEl:c,shadowContainerEl:l,target:s,cancelled:b}),o==null||o(g,h)},onMove:(g,h)=>{const m=ot(c),w=s.margin.left,b=s.margin.top,v=s.margin.bottom,y=s.margin.right,{w:f,t:S,l:C,h:x}=h.resizer.rectDim,$={t:S-b,l:C-w,h:x+b+v,w:f+w+y};d.endsWith("l")&&(m.column.start=E(a.columns,1,$.l-a.offset.left-a.padding.left,a.gap.column,.5)),d.startsWith("t")&&(m.row.start=E(a.rows,1,$.t-a.offset.top-a.padding.top,a.gap.row,.5)),d.endsWith("r")&&(m.column.end=Math.max(E(a.columns,m.column.start,$.w,a.gap.column,.5),m.column.start+1)),d.startsWith("b")&&(m.row.end=Math.max(E(a.rows,m.row.start,$.h,a.gap.row,.5),m.row.start+1)),c.style.gridArea=`${m.row.start} / ${m.column.start} / ${m.row.end} / ${m.column.end}`,p.style.width=`${$.w}px`,p.style.height=`${$.h}px`,p.style.left=`${$.l-a.offset.left}px`,p.style.top=`${$.t-a.offset.top}px`,n==null||n(g,h)}}}const k=["px","%","em","rem","vw","vh"],Tt=(t,e)=>{const r=t.Styles.getSectors().find(n=>!!n.getProperty(e));return{sector:r,property:r?r.getProperty(e):void 0}},Rt=(t,e)=>Tt(t,e),Gt=(t,{x:e,y:r,mergable:n}={})=>{const o={property:`${t}-x`,type:"integer",units:k,...e},i={property:`${t}-y`,type:"integer",units:k,...r};return{property:t,type:"composite",properties:[o,i],...n&&{fromStyle(s,{name:l,separator:c,property:p}){const[a,d]=p.getProperties(),[u,g]=(s[l]||"").split(c);return{[a.getId()]:s[a.getName()]||u||"",[d.getId()]:s[d.getName()]||g||u||""}},toStyle(s,{name:l,property:c}){const[p,a]=c.getProperties(),d=s[p.getId()],u=s[a.getId()];return{[l]:d===u?d:`${d} ${u}`}}}}},F={display:["grid"]};function Pt(t=""){const e=/^repeat\(\s*(\d+)\s*,\s*(.+)\s*\)$/i,r=/^minmax\(\s*(.+?)\s*,\s*(.+?)\s*\)$/i,n=t.match(e);if(!n)return null;const o=parseInt(n[1],10),i=n[2];let s=i,l=i;const c=i.match(r);return c&&(s=c[1],l=c[2]),{total:o,min:s===l?"":s,max:l}}function At(t={}){let e="",r="",n="",o="";const i=m=>m.split("/").map(w=>w.trim()).filter(Boolean),s=t["grid-area"]||"",l=t["grid-column"]||"",c=t["grid-row"]||"",p=i(s),a=i(l),d=i(c),u=p.length,g=a.length,h=d.length;return u===4?(n=p[0],e=p[1],o=p[2],r=p[3]):u===3?(n=p[0],e=p[1],o=p[2]):u===2?(n=p[0],e=p[1]):u===1&&(n=p[0]),g===2?(e=a[0],r=a[1]):g===1&&(e=a[0]),h===2?(n=d[0],o=d[1]):h===1&&(n=d[0]),{columnStart:e,columnEnd:r,rowStart:n,rowEnd:o}}function U(t){const{property:e,label:r}=t,n="1",o="1fr";return{property:e,label:r,type:"composite",requires:F,generic:!0,properties:[{name:" ",property:`${e}-repeat`,type:"number",full:!0,min:1,default:"1"},{label:"Min size",property:`${e}-min`,type:"number",min:0,units:["px","%"],default:"0"},{label:"Max size",property:`${e}-max`,type:"number",min:1,units:["fr","px","%"],default:"1"}],fromStyle(i,s){const{name:l,property:c}=s,[p,a,d]=c.getProperties(),u=i[l],g=Pt(u),h=(g==null?void 0:g.max)??o;return{[p.id]:(g==null?void 0:g.total)??n,[a.id]:(g==null?void 0:g.min)??"",[d.id]:h===o?"":h}},toStyle(i,{name:s,property:l}){const[c,p,a]=l.getProperties(),d=i[c.id],u=i[p.id],g=i[a.id]||o,h=u&&g?`minmax(${u}, ${g})`:g;return{[s]:`repeat(${d||n}, ${h})`}}}}function Dt(t,e){if(!e.styleableGrid)return;const{property:r,...n}=Rt(t,"display");if(!r)return;const o=r.getOption("grid"),i=n.sector;o||r.addOption({id:"grid",label:"Grid"}),i.addProperty(U({label:"Columns",property:"grid-template-columns"}),{}),i.addProperty(U({label:"Rows",property:"grid-template-rows"}),{}),i.addProperty({id:"grid-gap",requires:F,...Gt("gap",{x:{id:"grid-row-gap",label:"Row",property:"row-gap",min:0,default:"0"},y:{id:"grid-column-gap",label:"Column",property:"column-gap",min:0,default:"0"},mergable:!0})},{}),i.addProperty({type:"composite",property:"grid-area",label:"Grid area",requiresParent:F,generic:!0,properties:[{label:"Row start",property:"grid-row-start",type:"integer",default:"auto"},{label:"Row end",property:"grid-row-end",type:"integer",default:"auto"},{label:"Column start",property:"grid-column-start",type:"integer",default:"auto"},{label:"Column end",property:"grid-column-end",type:"integer",default:"auto"}],fromStyle(s){const l=At(s);return{"grid-column-start":s["grid-column-start"]||l.columnStart,"grid-column-end":s["grid-column-end"]||l.columnEnd,"grid-row-start":s["grid-row-start"]||l.rowStart,"grid-row-end":s["grid-row-end"]||l.rowEnd}},toStyle(s,{name:l}){const c=s["grid-row-start"]||"auto",p=s["grid-row-end"]||"auto",a=s["grid-column-start"]||"auto",d=s["grid-column-end"]||"auto";return{[l]:`${c} / ${a} / ${p} / ${d}`}}},{})}const Mt=function(t,e={}){const r={itemResizable:!0,...e},{Canvas:n,Commands:o,Components:i}=t,{itemResizable:s}=r,l=n.events,c=o.events,p=i.events,a=`${c.runBeforeCommand}tlb-move`,d=`${c.runBeforeCommand}resize`;let u;Et(t);const g=({options:y})=>{_(t,y.target,r)&&(t.runCommand(L,{...y}),y.abort=!0)},h=y=>{const{options:f}=y;_(t,f.component,r)&&(f.options=Object.assign(f.options||{},xt(t,f)))},m=()=>{const y=n.getSpots({type:A}).pop();if(!y)return;let f=y.attributes.spotEl;f||(f=document.createElement("div"),f.className=D,y.set({spotEl:f})),Object.entries(y.getStyle()).forEach(([S,C])=>f.style.setProperty(S,C)),u==null||u.appendChild(f)},w=({spot:y})=>{const f=y.attributes.spotEl;y.type!==A||!f||u==null||u.removeChild(f)};if(s){const y=f=>{const S=Y(s)?s({component:f}):s;return typeof S=="boolean"?S:{tl:!1,tc:!1,tr:!1,cl:!1,cr:!1,bl:!1,bc:!1,br:!1,...S}};t.on(p.resizeInit,f=>{const{component:S}=f;if(_(t,S,r)){const C=y(S);f.resizable=C}})}const b=[[a,g],[d,h],[l.spot,m],[l.spotRemove,w]];b.forEach(([y,f])=>{t.on(y,f)}),t.onReady(()=>{u=n.getSpotsEl(),ht(),Dt(t,r)});const v=()=>{delete t.Commands.commands[L],b.forEach(([y,f])=>{t.off(y,f)})};gt({editor:t,licenseKey:r.licenseKey,plan:ft,pluginName:N,cleanup:v})},It=ut(Mt);module.exports=It;
+    `,e.head.appendChild(o)};function Q(t){const{editor:e,type:r}=t,n=Ct(e,t.component),o=L(e,n.component);if(!vt(e,n,o,r))return{target:n,container:o,startScroll:et(e).scroll,shadowContainerEl:document.createElement("div"),shadowSnappedEl:document.createElement("div"),shadowTargetEl:document.createElement("div"),spot:e.Canvas.addSpot({type:A,component:o.component})}}function Z(t){const{editor:e,shadowTargetEl:r,shadowSnappedEl:n,shadowContainerEl:o,spotEl:i,target:s,container:l}=t,{Canvas:d}=e,c=e.config.stylePrefix;i==null||i.appendChild(o),o==null||o.appendChild(r),o==null||o.appendChild(n),wt(o,l),St(r,s,l),bt(n,s),$t(o,l.el),s.el.style.opacity="0";const p=d.getSpots().filter(a=>a.type!==A);e.em.stopDefault({preserveSelected:!0}),d.removeSpots(p),d.startAutoscroll(),d.getBody().classList.add(`${c}is__grabbing`)}function V(t){const{editor:e,shadowSnappedEl:r,shadowContainerEl:n,target:o,cancelled:i}=t,{Canvas:s}=e,l=e.config.stylePrefix,{component:d}=o;if(!i){const c=window.getComputedStyle(r);d.addStyle({"grid-area":c.gridArea,width:"",height:""})}o.el.style.opacity="",n.contains(r)&&(n==null||n.removeChild(r)),e.getModel().runDefault({preserveSelected:1}),s.stopAutoscroll(),s.getBody().classList.remove(`${l}is__grabbing`),s.removeSpots({type:A}),e.select(d)}function wt(t,{rows:e,columns:r}){const n=[];for(let o=0;o<r.length;o++){n[o]=[];for(let i=0;i<e.length;i++){const s=document.createElement("div");s.className=X,s.style.gridArea=`${i+1} / ${o+1}`,n[o][i]=s,t.appendChild(s)}}return n}function St(t,e,r){return t.className=k,t.style.top=`${e.offset.top-r.offset.top}px`,t.style.left=`${e.offset.left-r.offset.left}px`,t.style.width=`${e.offset.width+e.margin.left+e.margin.right}px`,t.style.height=`${e.offset.height+e.margin.top+e.margin.bottom}px`,t}function bt(t,e){const r=ot(e.el,e.computedStyles);return t.className=J,t.style.gridArea=`${r.row.start} / ${r.column.start} / ${r.row.end} / ${r.column.end}`,t}function $t(t,e){const r=window.getComputedStyle(e);t.className=yt,t.style.position="relative",t.style.display=r.display,t.style.gap=r.gap,t.style.padding=r.padding,t.style.border=r.border,t.style.gridTemplateColumns=r.gridTemplateColumns,t.style.gridTemplateRows=r.gridTemplateRows}function tt(t,e){if(e){if(Array.isArray(e))return[...e].pop()}else return[...t.getSelectedAll()].pop();return e}function Ct(t,e){const r=tt(t,e),n=r.getEl(),o=window.getComputedStyle(n);return{component:r,el:n,offset:t.Canvas.offset(n),margin:{top:parseFloat(o.marginTop),right:parseFloat(o.marginRight),bottom:parseFloat(o.marginBottom),left:parseFloat(o.marginLeft)},computedStyles:o}}function L(t,e){const r=e.parent(),n=r.getEl(),o=window.getComputedStyle(n);return{component:r,el:n,offset:t.Canvas.offset(n),computedStyles:o,padding:{top:parseFloat(o.paddingTop),right:parseFloat(o.paddingRight),bottom:parseFloat(o.paddingBottom),left:parseFloat(o.paddingLeft)},columns:o.gridTemplateColumns.split(" ").map(s=>parseFloat(s)),rows:o.gridTemplateRows.split(" ").map(s=>parseFloat(s)),gap:{column:parseInt(o.columnGap),row:parseInt(o.rowGap)}}}function E(t,e,r,n,o=1){let i=0;for(let s=e;s<=t.length;s++){if(i+(t[s-1]+n)*o>r)return s;i+=n+t[s-1]}return t.length+1}function et(t){const{scrollY:e,scrollX:r}=t.Canvas.getWindow();return{scroll:{top:e,left:r}}}function vt(t,e,r,n){const o=i=>t.em.logWarning(i);return n==="draggable"&&e.component.get(n)===!1?(o(`[${N}] The element is not ${n}`),!0):r.computedStyles.display!=="grid"?(o(`[${N}] The container does not have style display:grid`),!0):!1}function _(t,e,r={}){const n=tt(t,e),o=n==null?void 0:n.parent(),i=o==null?void 0:o.getEl();if(!o||!i)return!1;const{enableGrid:s}=r,l=window.getComputedStyle(i).display==="grid";return K(s)?s({component:n,parent:o,isParentGrid:l}):l}const B=t=>t.split(" ").map(e=>parseFloat(e));function ot(t,e){const r=t.ownerDocument.defaultView,n=e||r.getComputedStyle(t),o=n.gridArea.split("/").some(S=>isNaN(parseInt(S.trim()))),i={isComputed:o,raw:n.gridArea};if(!o)return{...i,row:{start:parseInt(n.gridRowStart),end:parseInt(n.gridRowEnd)},column:{start:parseInt(n.gridColumnStart),end:parseInt(n.gridColumnEnd)}};const s=t.parentElement,l=r.getComputedStyle(s),d=parseFloat(l.columnGap)||0,c=parseFloat(l.rowGap)||0,p=B(l.gridTemplateColumns),a=B(l.gridTemplateRows),u=parseFloat(l.paddingLeft)||0,m=parseFloat(l.paddingTop)||0,h=s.getBoundingClientRect(),f=t.getBoundingClientRect(),w=(S,$,x,C,M)=>{let P=1,T=C+M;for(let R=0;R<$.length;R++){const I=$[R],O=T+I;if(S>=T&&S<O)return P;T=O+x,P++}return-1},b=w(f.left,p,d,h.left,u),v=w(f.right-1,p,d,h.left,u)+1,y=w(f.top,a,c,h.top,m),g=w(f.bottom-1,a,c,h.top,m)+1;return{...i,row:{start:y,end:g},column:{start:b,end:v}}}function Et(t){t.Commands.add(F,{stop(){},run(e,r,n={}){const o=Q({editor:e,component:n.target,type:"draggable"});if(!o){this.stopCommand();return}const{spot:i,target:s,shadowContainerEl:l,shadowSnappedEl:d,shadowTargetEl:c,startScroll:p}=o;let{container:a}=o,u;new e.Utils.Dragger({doc:s.el.ownerDocument,onStart:()=>{u=setTimeout(()=>{Z({editor:e,shadowTargetEl:c,shadowSnappedEl:d,shadowContainerEl:l,spotEl:i.attributes.spotEl,target:s,container:a}),a=L(e,s.component)},10)},onEnd:(h,f,{cancelled:w})=>{clearTimeout(u),V({editor:e,shadowSnappedEl:d,shadowContainerEl:l,target:s,cancelled:w}),this.stopCommand(),e.em.set("_cmpDrag",1)},setPosition:({x:h,y:f})=>{const{scroll:w}=et(e),{columns:b,rows:v,gap:y,offset:g,padding:S}=a,{offset:$,margin:x}=s,C=$.top-g.top-S.top-x.top+f-p.top+w.top,M=$.left-g.left-S.left-x.left+h-p.left+w.left,P=Math.min(E(b,1,M,y.column,.5),b.length),T=Math.min(E(v,1,C,y.row,.5),v.length),R=Math.min(E(b,P,$.width,y.column)+1,b.length+1),I=Math.min(E(v,T,$.height,y.row)+1,v.length+1);d.style.gridArea=`${T} / ${P} / ${I} / ${R}`,c.style.top=`${C+S.top}px`,c.style.left=`${M+S.left}px`}}).start(n.event)}})}function xt(t,e){const r=Q({editor:t,component:e.component,type:"resizable"});if(!r)return;const{onMove:n,onEnd:o}=e.options||{},{spot:i,target:s,shadowContainerEl:l,shadowSnappedEl:d,shadowTargetEl:c}=r;let{container:p}=r,a="",u;return{onStart:m=>{a=m.target.dataset.gjsHandler||"",u=setTimeout(()=>{Z({editor:t,shadowTargetEl:c,shadowSnappedEl:d,shadowContainerEl:l,spotEl:i.attributes.spotEl,target:s,container:p}),p=L(t,s.component)},10),t.trigger("component:resize",{...s,type:"start"})},onEnd:(m,h)=>{const{startDim:f,rectDim:w}=h.resizer,b=JSON.stringify(f)===JSON.stringify(w);clearTimeout(u),V({editor:t,shadowSnappedEl:d,shadowContainerEl:l,target:s,cancelled:b}),o==null||o(m,h)},onMove:(m,h)=>{const f=ot(d),w=s.margin.left,b=s.margin.top,v=s.margin.bottom,y=s.margin.right,{w:g,t:S,l:$,h:x}=h.resizer.rectDim,C={t:S-b,l:$-w,h:x+b+v,w:g+w+y};a.endsWith("l")&&(f.column.start=E(p.columns,1,C.l-p.offset.left-p.padding.left,p.gap.column,.5)),a.startsWith("t")&&(f.row.start=E(p.rows,1,C.t-p.offset.top-p.padding.top,p.gap.row,.5)),a.endsWith("r")&&(f.column.end=Math.max(E(p.columns,f.column.start,C.w,p.gap.column,.5),f.column.start+1)),a.startsWith("b")&&(f.row.end=Math.max(E(p.rows,f.row.start,C.h,p.gap.row,.5),f.row.start+1)),d.style.gridArea=`${f.row.start} / ${f.column.start} / ${f.row.end} / ${f.column.end}`,c.style.width=`${C.w}px`,c.style.height=`${C.h}px`,c.style.left=`${C.l-p.offset.left}px`,c.style.top=`${C.t-p.offset.top}px`,n==null||n(m,h)}}}const U=["px","%","em","rem","vw","vh"],Tt=(t,e)=>{const r=t.Styles.getSectors().find(n=>!!n.getProperty(e));return{sector:r,property:r?r.getProperty(e):void 0}},Gt=(t,e)=>Tt(t,e),Pt=(t,{x:e,y:r,mergable:n}={})=>{const o={property:`${t}-x`,type:"integer",units:U,...e},i={property:`${t}-y`,type:"integer",units:U,...r};return{property:t,type:"composite",properties:[o,i],...n&&{fromStyle(s,{name:l,separator:d,property:c}){const[p,a]=c.getProperties(),[u,m]=(s[l]||"").split(d);return{[p.getId()]:s[p.getName()]||u||"",[a.getId()]:s[a.getName()]||m||u||""}},toStyle(s,{name:l,property:d}){const[c,p]=d.getProperties(),a=s[c.getId()],u=s[p.getId()];return{[l]:a===u?a:`${a} ${u}`}}}}},z={display:["grid"]};function Rt(t=""){const e=/^repeat\(\s*(\d+)\s*,\s*(.+)\s*\)$/i,r=/^minmax\(\s*(.+?)\s*,\s*(.+?)\s*\)$/i,n=t.match(e);if(!n)return null;const o=parseInt(n[1],10),i=n[2];let s=i,l=i;const d=i.match(r);return d&&(s=d[1],l=d[2]),{total:o,min:s===l?"":s,max:l}}function At(t={}){let e="",r="",n="",o="";const i=f=>f.split("/").map(w=>w.trim()).filter(Boolean),s=t["grid-area"]||"",l=t["grid-column"]||"",d=t["grid-row"]||"",c=i(s),p=i(l),a=i(d),u=c.length,m=p.length,h=a.length;return u===4?(n=c[0],e=c[1],o=c[2],r=c[3]):u===3?(n=c[0],e=c[1],o=c[2]):u===2?(n=c[0],e=c[1]):u===1&&(n=c[0]),m===2?(e=p[0],r=p[1]):m===1&&(e=p[0]),h===2?(n=a[0],o=a[1]):h===1&&(n=a[0]),{columnStart:e,columnEnd:r,rowStart:n,rowEnd:o}}function q(t){const{property:e,label:r}=t,n="1",o="1fr";return{property:e,label:r,type:"composite",requires:z,generic:!0,properties:[{name:" ",property:`${e}-repeat`,type:"number",full:!0,min:1,default:"1"},{label:"Min size",property:`${e}-min`,type:"number",min:0,units:["px","%"],default:"0"},{label:"Max size",property:`${e}-max`,type:"number",min:1,units:["fr","px","%"],default:"1"}],fromStyle(i,s){const{name:l,property:d}=s,[c,p,a]=d.getProperties(),u=i[l],m=Rt(u),h=(m==null?void 0:m.max)??o;return{[c.id]:(m==null?void 0:m.total)??n,[p.id]:(m==null?void 0:m.min)??"",[a.id]:h===o?"":h}},toStyle(i,{name:s,property:l}){const[d,c,p]=l.getProperties(),a=i[d.id],u=i[c.id],m=i[p.id]||o,h=u&&m?`minmax(${u}, ${m})`:m;return{[s]:`repeat(${a||n}, ${h})`}}}}function Dt(t,e){if(!e.styleableGrid)return;const{property:r,...n}=Gt(t,"display");if(!r)return;const o=r.getOption("grid"),i=n.sector;o||r.addOption({id:"grid",label:"Grid"}),i.addProperty(q({label:"Columns",property:"grid-template-columns"}),{}),i.addProperty(q({label:"Rows",property:"grid-template-rows"}),{}),i.addProperty({id:"grid-gap",requires:z,...Pt("gap",{x:{id:"grid-row-gap",label:"Row",property:"row-gap",min:0,default:"0"},y:{id:"grid-column-gap",label:"Column",property:"column-gap",min:0,default:"0"},mergable:!0})},{}),i.addProperty({type:"composite",property:"grid-area",label:"Grid area",requiresParent:z,generic:!0,properties:[{label:"Row start",property:"grid-row-start",type:"integer",default:"auto"},{label:"Row end",property:"grid-row-end",type:"integer",default:"auto"},{label:"Column start",property:"grid-column-start",type:"integer",default:"auto"},{label:"Column end",property:"grid-column-end",type:"integer",default:"auto"}],fromStyle(s){const l=At(s);return{"grid-column-start":s["grid-column-start"]||l.columnStart,"grid-column-end":s["grid-column-end"]||l.columnEnd,"grid-row-start":s["grid-row-start"]||l.rowStart,"grid-row-end":s["grid-row-end"]||l.rowEnd}},toStyle(s,{name:l}){const d=s["grid-row-start"]||"auto",c=s["grid-row-end"]||"auto",p=s["grid-column-start"]||"auto",a=s["grid-column-end"]||"auto";return{[l]:`${d} / ${p} / ${c} / ${a}`}}},{})}const Mt=function(t,e={}){const r={itemResizable:!0,...e},{Canvas:n,Commands:o,Components:i}=t,{itemResizable:s}=r,l=n.events,d=o.events,c=i.events,p=`${d.runBeforeCommand}tlb-move`,a=`${d.runBeforeCommand}resize`;let u;Et(t);const m=({options:y})=>{_(t,y.target,r)&&(t.runCommand(F,{...y}),y.abort=!0)},h=y=>{const{options:g}=y;_(t,g.component,r)&&(g.options=Object.assign(g.options||{},xt(t,g)))},f=()=>{const y=n.getSpots({type:A}).pop();if(!y)return;let g=y.attributes.spotEl;g||(g=document.createElement("div"),g.className=D,y.set({spotEl:g})),Object.entries(y.getStyle()).forEach(([S,$])=>g.style.setProperty(S,$)),u==null||u.appendChild(g)},w=({spot:y})=>{const g=y.attributes.spotEl;y.type!==A||!g||u==null||u.removeChild(g)};if(s){const y=g=>{const S=K(s)?s({component:g}):s;return typeof S=="boolean"?S:{tl:!1,tc:!1,tr:!1,cl:!1,cr:!1,bl:!1,bc:!1,br:!1,...S}};t.on(c.resizeInit,g=>{const{component:S}=g;if(_(t,S,r)){const $=y(S);g.resizable=$}})}const b=[[p,m],[a,h],[l.spot,f],[l.spotRemove,w]];b.forEach(([y,g])=>{t.on(y,g)}),t.onReady(()=>{u=n.getSpotsEl(),ht(),Dt(t,r)});const v=()=>{delete t.Commands.commands[F],b.forEach(([y,g])=>{t.off(y,g)})};mt({editor:t,licenseKey:r.licenseKey,plan:ft,pluginName:N,cleanup:v})},It=ut(Mt);module.exports=It;