@grapesjs/studio-sdk-plugins 1.0.38 → 1.0.39-rc.1

package/dist/canvasFullSize/index.es.js

@@ -1,22 +1,22 @@
-function J(e, i, t) {
-  let o, n, l, d, r;
+function Q(e, i, t) {
+  let n, o, l, d, r;
   const c = i;
   function f() {
     const a = Date.now() - d;
-    a < c && a >= 0 ? o = setTimeout(f, c - a) : (o = null, r = e.apply(l, n), l = n = null);
+    a < c && a >= 0 ? n = setTimeout(f, c - a) : (n = null, r = e.apply(l, o), l = o = null);
   }
   const p = function() {
-    return l = this, n = arguments, d = Date.now(), o || (o = setTimeout(f, c)), r;
+    return l = this, o = arguments, d = Date.now(), n || (n = setTimeout(f, c)), r;
   };
   return p.clear = function() {
-    o && (clearTimeout(o), o = null);
+    n && (clearTimeout(n), n = null);
   }, p.flush = function() {
-    o && (r = e.apply(l, n), l = n = null, clearTimeout(o), o = null);
+    n && (r = e.apply(l, o), l = o = null, clearTimeout(n), n = null);
   }, p;
 }
-const k = "app.grapesjs.com", z = "app-stage.grapesjs.com", Q = "app2.grapesjs.com", C = "app-stage2.grapesjs.com", B = [
-  k,
-  Q,
+const N = "app.grapesjs.com", z = "app-stage.grapesjs.com", S = "app2.grapesjs.com", C = "app-stage2.grapesjs.com", _ = [
+  N,
+  S,
   z,
   C,
   "localhost",
@@ -35,7 +35,7 @@ const k = "app.grapesjs.com", z = "app-stage.grapesjs.com", Q = "app2.grapesjs.c
   isDev: e,
   isStage: i,
   isPlatform: t
-}) => `${e ? "" : `https://${i ? z : k}`}/${t ? "platform-api" : "api"}`, oe = () => {
+}) => `${e ? "" : `https://${i ? z : N}`}/${t ? "platform-api" : "api"}`, oe = () => {
   if (!te()) return "";
   const { hostname: e } = window.location;
   if (e) return e;
@@ -46,71 +46,74 @@ const k = "app.grapesjs.com", z = "app-stage.grapesjs.com", Q = "app2.grapesjs.c
   }
 }, ne = () => {
   const e = oe();
-  return !!e && (B.includes(e) || B.some((i) => e.endsWith(i)));
+  return !!e && (_.includes(e) || _.some((i) => e.endsWith(i)));
 };
 async function ae({
   path: e,
   baseApiUrl: i,
   method: t = "GET",
-  headers: o = {},
-  params: n,
+  headers: n = {},
+  params: o,
   body: l
 }) {
   const r = `${i || se({ isDev: !1, isStage: !1 })}${e}`, c = {
     method: t,
     headers: {
       "Content-Type": "application/json",
-      ...o
+      ...n
     }
   };
   l && (c.body = JSON.stringify(l));
-  const f = n ? new URLSearchParams(n).toString() : "", p = f ? `?${f}` : "", a = await fetch(`${r}${p}`, c);
+  const f = o ? new URLSearchParams(o).toString() : "", p = f ? `?${f}` : "", a = await fetch(`${r}${p}`, c);
   if (!a.ok)
     throw new Error(`HTTP error! status: ${a.status}`);
   return a.json();
 }
-var y = /* @__PURE__ */ ((e) => (e.free = "free", e.startup = "startup", e.business = "business", e.enterprise = "enterprise", e))(y || {}), O = /* @__PURE__ */ ((e) => (e.toastAdd = "studio:toastAdd", e.toastRemove = "studio:toastRemove", e.dialogOpen = "studio:dialogOpen", e.dialogClose = "studio:dialogClose", e.dialogExportCode = "studio:dialogExportCode", e.dialogImportCode = "studio:dialogImportCode", e.openEditCode = "studio:openEditCode", e.sidebarLeftSet = "studio:sidebarLeft:set", e.sidebarLeftGet = "studio:sidebarLeft:get", e.sidebarLeftToggle = "studio:sidebarLeft:toggle", e.sidebarRightSet = "studio:sidebarRight:set", e.sidebarRightGet = "studio:sidebarRight:get", e.sidebarRightToggle = "studio:sidebarRight:toggle", e.sidebarTopSet = "studio:sidebarTop:set", e.sidebarTopGet = "studio:sidebarTop:get", e.sidebarTopToggle = "studio:sidebarTop:toggle", e.sidebarBottomSet = "studio:sidebarBottom:set", e.sidebarBottomGet = "studio:sidebarBottom:get", e.sidebarBottomToggle = "studio:sidebarBottom:toggle", e.symbolAdd = "studio:symbolAdd", e.symbolDetach = "studio:symbolDetach", e.symbolOverride = "studio:symbolOverride", e.symbolPropagateStyles = "studio:propagateStyles", e.getPagesConfig = "studio:getPagesConfig", e.setPagesConfig = "studio:setPagesConfig", e.getPageSettings = "studio:getPageSettings", e.setPageSettings = "studio:setPageSettings", e.clearPage = "studio:clearPage", e.projectFiles = "studio:projectFiles", e.validateCode = "studio:validateCode", e.canvasReload = "studio:canvasReload", e.getBlocksPanel = "studio:getBlocksPanel", e.setBlocksPanel = "studio:setBlocksPanel", e.getStateContextMenu = "studio:getStateContextMenu", e.setStateContextMenu = "studio:setStateContextMenu", e.contextMenuComponent = "studio:contextMenuComponent", e.layoutAdd = "studio:layoutAdd", e.layoutRemove = "studio:layoutRemove", e.layoutToggle = "studio:layoutToggle", e.layoutUpdate = "studio:layoutUpdate", e.layoutGet = "studio:layoutGet", e.layoutConfigGet = "studio:layoutConfigGet", e.layoutConfigSet = "studio:layoutConfigSet", e.layoutComponentAdd = "studio:layoutComponentAdd", e.layoutComponentGet = "studio:layoutComponentGet", e.layoutComponentRemove = "studio:layoutComponentRemove", e.layoutComponentRender = "studio:layoutComponentRender", e.getStateTheme = "studio:getStateTheme", e.setStateTheme = "studio:setStateTheme", e.settings = "studio:settings", e.assetProviderGet = "studio:assetProviderGet", e.assetProviderAdd = "studio:assetProviderAdd", e.assetProviderRemove = "studio:assetProviderRemove", e.fontGet = "studio:fontGet", e.fontAdd = "studio:fontAdd", e.fontRemove = "studio:fontRemove", e.fontManagerOpen = "studio:fontManagerOpen", e.menuFontLoad = "studio:menuFontLoad", e.toggleStateDataSource = "studio:toggleStateDataSource", e.getStateDataSource = "studio:getStateDataSource", e.dataSourceSetGlobalData = "studio:dataSourceSetGlobalData", e.dataSourceSetImporter = "studio:dataSourceSetImporter", e.dataSourceSetExporter = "studio:dataSourceSetExporter", e.setDragAbsolute = "studio:setDragAbsolute", e))(O || {});
+var y = /* @__PURE__ */ ((e) => (e.free = "free", e.startup = "startup", e.business = "business", e.enterprise = "enterprise", e))(y || {}), O = /* @__PURE__ */ ((e) => (e.toastAdd = "studio:toastAdd", e.toastRemove = "studio:toastRemove", e.dialogOpen = "studio:dialogOpen", e.dialogClose = "studio:dialogClose", e.dialogExportCode = "studio:dialogExportCode", e.dialogImportCode = "studio:dialogImportCode", e.openEditCode = "studio:openEditCode", e.openBlocks = "studio:openBlocks", e.appendComponent = "studio:appendComponent", e.sidebarLeftSet = "studio:sidebarLeft:set", e.sidebarLeftGet = "studio:sidebarLeft:get", e.sidebarLeftToggle = "studio:sidebarLeft:toggle", e.sidebarRightSet = "studio:sidebarRight:set", e.sidebarRightGet = "studio:sidebarRight:get", e.sidebarRightToggle = "studio:sidebarRight:toggle", e.sidebarTopSet = "studio:sidebarTop:set", e.sidebarTopGet = "studio:sidebarTop:get", e.sidebarTopToggle = "studio:sidebarTop:toggle", e.sidebarBottomSet = "studio:sidebarBottom:set", e.sidebarBottomGet = "studio:sidebarBottom:get", e.sidebarBottomToggle = "studio:sidebarBottom:toggle", e.symbolAdd = "studio:symbolAdd", e.symbolDetach = "studio:symbolDetach", e.symbolOverride = "studio:symbolOverride", e.symbolPropagateStyles = "studio:propagateStyles", e.getPagesConfig = "studio:getPagesConfig", e.setPagesConfig = "studio:setPagesConfig", e.getPageSettings = "studio:getPageSettings", e.setPageSettings = "studio:setPageSettings", e.clearPage = "studio:clearPage", e.projectFiles = "studio:projectFiles", e.validateCode = "studio:validateCode", e.canvasReload = "studio:canvasReload", e.getBlocksPanel = "studio:getBlocksPanel", e.setBlocksPanel = "studio:setBlocksPanel", e.getStateContextMenu = "studio:getStateContextMenu", e.setStateContextMenu = "studio:setStateContextMenu", e.contextMenuComponent = "studio:contextMenuComponent", e.layoutAdd = "studio:layoutAdd", e.layoutRemove = "studio:layoutRemove", e.layoutToggle = "studio:layoutToggle", e.layoutUpdate = "studio:layoutUpdate", e.layoutGet = "studio:layoutGet", e.layoutConfigGet = "studio:layoutConfigGet", e.layoutConfigSet = "studio:layoutConfigSet", e.layoutComponentAdd = "studio:layoutComponentAdd", e.layoutComponentGet = "studio:layoutComponentGet", e.layoutComponentRemove = "studio:layoutComponentRemove", e.layoutComponentRender = "studio:layoutComponentRender", e.getStateTheme = "studio:getStateTheme", e.setStateTheme = "studio:setStateTheme", e.settings = "studio:settings", e.assetProviderGet = "studio:assetProviderGet", e.assetProviderAdd = "studio:assetProviderAdd", e.assetProviderRemove = "studio:assetProviderRemove", e.fontGet = "studio:fontGet", e.fontAdd = "studio:fontAdd", e.fontRemove = "studio:fontRemove", e.fontManagerOpen = "studio:fontManagerOpen", e.menuFontLoad = "studio:menuFontLoad", e.toggleStateDataSource = "studio:toggleStateDataSource", e.getStateDataSource = "studio:getStateDataSource", e.dataSourceSetGlobalData = "studio:dataSourceSetGlobalData", e.dataSourceSetImporter = "studio:dataSourceSetImporter", e.dataSourceSetExporter = "studio:dataSourceSetExporter", e.setDragAbsolute = "studio:setDragAbsolute", e))(O || {});
 const F = {
   [y.free]: 0,
   [y.startup]: 10,
   [y.business]: 20,
   [y.enterprise]: 30
 };
-function ie(e) {
-  const i = e;
-  return i.init = (t) => (o) => e(o, t), i;
+function ie(e, i) {
+  const t = e;
+  return t.init = (n) => {
+    const o = (l) => e(l, n);
+    return o.__gjsPluginId = i, o;
+  }, t;
 }
-const re = (e) => /* @__PURE__ */ ie(e);
+const re = (e, i) => /* @__PURE__ */ ie(e, i);
 async function le({
   editor: e,
   plan: i,
   pluginName: t,
-  licenseKey: o,
-  onLicenseCheckResponse: n,
+  licenseKey: n,
+  onLicenseCheckResponse: o,
   cleanup: l
 }) {
   let d = "", r;
   const c = (a) => {
-    console.warn("Cleanup plugin:", t, "Reason:", a), l();
+    console.warn("Cleanup plugin:", t, "Reason:", a), l(e, t);
   }, f = (a = {}) => {
-    var T;
-    const { error: v, sdkLicense: R } = a, b = (T = a.plan) == null ? void 0 : T.category;
+    var P;
+    const { error: v, sdkLicense: R } = a, b = (P = a.plan) == null ? void 0 : P.category;
     if (!(R || a.license) || v)
       c(v || "Invalid license");
     else if (b) {
-      const D = F[i], m = F[b];
-      D > m && c({ pluginRequiredPlan: i, licensePlan: b });
+      const D = F[i], M = F[b];
+      D > M && c({ pluginRequiredPlan: i, licensePlan: b });
     }
   };
   e.Commands.has(O.settings) && (r = e.runCommand(O.settings), d = (r == null ? void 0 : r.baseUrl) || "");
   const p = (a) => {
-    n == null || n(a), a && f(a);
+    o == null || o(a), a && f(a);
   };
   if (!r) {
     e.onReady(async () => {
       if (!ne())
-        if (o) {
-          const a = await ue({ licenseKey: o, pluginName: t, baseApiUrl: d });
+        if (n) {
+          const a = await ue({ licenseKey: n, pluginName: t, baseApiUrl: d });
           p(a);
         } else
           c("The `licenseKey` option not provided");
@@ -131,10 +134,10 @@ const ce = (e) => ({
   plan: e.licensePlan
 });
 async function ue(e) {
-  const { licenseKey: i, pluginName: t, baseApiUrl: o } = e;
+  const { licenseKey: i, pluginName: t, baseApiUrl: n } = e;
   try {
     return (await ae({
-      baseApiUrl: o,
+      baseApiUrl: n,
       path: `/sdk/${i || "na"}`,
       method: "POST",
       params: {
@@ -142,18 +145,18 @@ async function ue(e) {
         pn: t
       }
     })).result || {};
-  } catch (n) {
-    return console.error("Error during SDK license check:", n), !1;
+  } catch (o) {
+    return console.error("Error during SDK license check:", o), !1;
   }
 }
-const N = "data-gs-plg-", _ = "canvasFullSize", ge = y.startup, pe = (e, i) => {
-  const { rule: t, ruleView: o } = i, { style: n } = t.attributes;
-  if (n && n[e]) {
-    const l = n[e], d = /([0-9.]+)(vh|dvh|lvh|svh)/g, r = d.test(l), c = o.frameView.model;
+const k = "data-gs-plg-", I = "canvasFullSize", ge = y.startup, pe = (e, i) => {
+  const { rule: t, ruleView: n } = i, { style: o } = t.attributes;
+  if (o && o[e]) {
+    const l = o[e], d = /([0-9.]+)(vh|dvh|lvh|svh)/g, r = d.test(l), c = n.frameView.model;
     if (r && c.hasAutoHeight()) {
       const f = l.replace(d, (a, v) => `${window.innerHeight * (parseFloat(v) / 100)}px`), p = t.toCSS({
         style: {
-          ...n,
+          ...o,
           [e]: f
         }
       });
@@ -163,7 +166,7 @@ const N = "data-gs-plg-", _ = "canvasFullSize", ge = y.startup, pe = (e, i) => {
 }, de = (e) => {
   ["height", "min-height", "max-height"].forEach((i) => pe(i, e));
 }, fe = function(e, i = {}) {
-  const { Canvas: t, Commands: o, Devices: n, Css: l } = e, d = {
+  const { Canvas: t, Commands: n, Devices: o, Css: l } = e, d = {
     deviceMaxWidth: 1200,
     deviceMinHeigth: 500,
     canvasOffsetY: 30,
@@ -181,13 +184,13 @@ const N = "data-gs-plg-", _ = "canvasFullSize", ge = y.startup, pe = (e, i) => {
     deviceFixedHeight: v,
     frameBorderRadius: R,
     frameTransition: b
-  } = d, w = `${a}px`, T = t.events, D = "core:preview", m = `${o.events.stopCommand}${D}`, M = t.getConfig(), I = `${_}:disable`, W = n.getAll().map((s) => ({ ...s.attributes })), K = f * 1e3, L = { x: c, y: r };
-  let P = {}, G, A;
-  M.scrollableCanvas = !v, n.getAll().map((s) => {
+  } = d, w = `${a}px`, P = t.events, D = "core:preview", M = `${n.events.stopCommand}${D}`, L = t.getConfig(), j = `${I}:disable`, W = o.getAll().map((s) => ({ ...s.attributes })), K = f * 1e3, m = { x: c, y: r };
+  let T = {}, G, A;
+  L.scrollableCanvas = !v, o.getAll().map((s) => {
     !s.get("width") && s.set("width", `${p}px`), !s.get("height") && s.set("height", v ? "100vh" : "auto"), !s.get("minHeight") && s.set("minHeight", w);
   });
   const H = (s) => {
-    const u = `${N}canvas-full-size`, g = document.querySelector(`style[${u}]`);
+    const u = `${k}canvas-full-size`, g = document.querySelector(`style[${u}]`);
     if (s && g)
       return g.remove();
     const h = g || document.createElement("style"), x = t.getZoomMultiplier();
@@ -197,9 +200,9 @@ const N = "data-gs-plg-", _ = "canvasFullSize", ge = y.startup, pe = (e, i) => {
       .gjs-frame { border-radius: ${R}px }
     `, !g && document.body.appendChild(h);
   };
-  e.on(T.frameLoadHead, (s) => {
-    if (!M.scrollableCanvas) return;
-    const { window: u } = s, g = u.document, h = g.head, x = `${N}canvas-full-size-wrappers`, $ = h.querySelector(`style[${x}]`) || g.createElement("style");
+  e.on(P.frameLoadHead, (s) => {
+    if (!L.scrollableCanvas) return;
+    const { window: u } = s, g = u.document, h = g.head, x = `${k}canvas-full-size-wrappers`, $ = h.querySelector(`style[${x}]`) || g.createElement("style");
     $.setAttribute(x, "true"), $.innerHTML = `
       body { height: auto !important; }
       [data-gjs-type="wrapper"] { min-height: ${w} !important; }
@@ -207,57 +210,57 @@ const N = "data-gs-plg-", _ = "canvasFullSize", ge = y.startup, pe = (e, i) => {
       [data-gjs-type="mj-body"] { min-height: ${w} !important; }
     `, !h.contains($) && h.appendChild($);
   });
-  const j = () => G.style.display = "none", Z = () => G.style.display = "", q = () => {
+  const B = () => G.style.display = "none", Z = () => G.style.display = "", q = () => {
     var h;
     if (!v) return;
     const s = t.getZoomMultiplier(), g = t.getRect().height * s - r * 2;
-    (h = n.getSelected()) == null || h.set("height", `${Math.max(g, a)}px`), t.fitViewport({ zoom: t.getZoom(), gap: L });
-  }, E = J(() => {
+    (h = o.getSelected()) == null || h.set("height", `${Math.max(g, a)}px`), t.fitViewport({ zoom: t.getZoom(), gap: m });
+  }, E = Q(() => {
     t.fitViewport({
       zoom: (s) => s > 100 ? 100 : s,
       ignoreHeight: !0,
-      gap: L
+      gap: m
     }), q(), H(), setTimeout(() => {
       var u, g;
       const { em: s } = e;
-      s.destroyed || ((g = (u = e.getSelected()) == null ? void 0 : u.getEl()) == null || g.scrollIntoView({ block: "nearest" }), e.refresh({ tools: !0 }), Z(), o.isActive(D) ? s.stopDefault() : s.runDefault());
+      s.destroyed || ((g = (u = e.getSelected()) == null ? void 0 : u.getEl()) == null || g.scrollIntoView({ block: "nearest" }), e.refresh({ tools: !0 }), Z(), n.isActive(D) ? s.stopDefault() : s.runDefault());
     }, K);
   }, 100), X = (s = {}) => {
     s.options && s.options.from !== "fitViewport" && t.fitViewport({
       zoom: t.getZoom(),
       ignoreHeight: !0,
-      gap: L
+      gap: m
     });
   }, Y = () => {
-    j(), E();
-  }, S = () => {
-    P.overflowX = "hidden", P.overflowY = "auto";
+    B(), E();
+  }, J = () => {
+    T.overflowX = "hidden", T.overflowY = "auto";
   }, U = () => {
     A == null || A.disconnect(), E.clear();
   }, V = [
-    [n.events.select, Y],
-    [T.zoom, X],
-    [m, S],
+    [o.events.select, Y],
+    [P.zoom, X],
+    [M, J],
     [e.events.destroy, U],
     [l.events.mountBefore, de]
   ];
-  o.add(I, () => {
-    n.devices.reset(W), M.scrollableCanvas = !1, t.getModel().updateDevice(), t.setZoom(100), t.setCoords(0, 0), P.overflowY = "hidden", H(!0), V.forEach(([s, u]) => e.off(s, u)), U(), o.run("studio:canvasReload");
+  n.add(j, () => {
+    o.devices.reset(W), L.scrollableCanvas = !1, t.getModel().updateDevice(), t.setZoom(100), t.setCoords(0, 0), T.overflowY = "hidden", H(!0), V.forEach(([s, u]) => e.off(s, u)), U(), n.run("studio:canvasReload");
   }), V.forEach(([s, u]) => e.on(s, u)), e.onReady(() => {
     const s = t.getElement(), u = t.getFramesEl(), g = t.getCanvasView();
-    G = t.getSpotsEl(), P = s.style, P.overflowX = "hidden", u.style.transition = `transform ${f}s`, document.removeEventListener("keypress", g.onKeyPress), H(), A = new ResizeObserver(() => {
-      j(), E();
+    G = t.getSpotsEl(), T = s.style, T.overflowX = "hidden", u.style.transition = `transform ${f}s`, document.removeEventListener("keypress", g.onKeyPress), H(), A = new ResizeObserver(() => {
+      B(), E();
     }), A.observe(s.parentElement), E();
   }), le({
     editor: e,
     licenseKey: d.licenseKey,
     plan: ge,
-    pluginName: _,
+    pluginName: I,
     cleanup: () => {
-      e.runCommand(I);
+      e.runCommand(j);
     }
   });
-}, he = re(fe);
+}, he = re(fe, I);
 export {
   he as default
 };

package/dist/canvasFullSize/index.js

@@ -0,0 +1,10 @@
+"use strict";function Q(e,i,t){let n,o,l,d,r;const c=i;function f(){const a=Date.now()-d;a<c&&a>=0?n=setTimeout(f,c-a):(n=null,r=e.apply(l,o),l=o=null)}const p=function(){return l=this,o=arguments,d=Date.now(),n||(n=setTimeout(f,c)),r};return p.clear=function(){n&&(clearTimeout(n),n=null)},p.flush=function(){n&&(r=e.apply(l,o),l=o=null,clearTimeout(n),n=null)},p}const N="app.grapesjs.com",z="app-stage.grapesjs.com",S="app2.grapesjs.com",C="app-stage2.grapesjs.com",_=[N,S,z,C,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io",".claudemcpcontent.com",".web-sandbox.oaiusercontent.com"],ee="license:check:end",te=()=>typeof window<"u",se=({isDev:e,isStage:i,isPlatform:t})=>`${e?"":`https://${i?z:N}`}/${t?"platform-api":"api"}`,oe=()=>{if(!te())return"";const{hostname:e}=window.location;if(e)return e;try{return window.parent.location.hostname||""}catch{return""}},ne=()=>{const e=oe();return!!e&&(_.includes(e)||_.some(i=>e.endsWith(i)))};async function ae({path:e,baseApiUrl:i,method:t="GET",headers:n={},params:o,body:l}){const r=`${i||se({isDev:!1,isStage:!1})}${e}`,c={method:t,headers:{"Content-Type":"application/json",...n}};l&&(c.body=JSON.stringify(l));const f=o?new URLSearchParams(o).toString():"",p=f?`?${f}`:"",a=await fetch(`${r}${p}`,c);if(!a.ok)throw new Error(`HTTP error! status: ${a.status}`);return a.json()}var y=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(y||{}),O=(e=>(e.toastAdd="studio:toastAdd",e.toastRemove="studio:toastRemove",e.dialogOpen="studio:dialogOpen",e.dialogClose="studio:dialogClose",e.dialogExportCode="studio:dialogExportCode",e.dialogImportCode="studio:dialogImportCode",e.openEditCode="studio:openEditCode",e.openBlocks="studio:openBlocks",e.appendComponent="studio:appendComponent",e.sidebarLeftSet="studio:sidebarLeft:set",e.sidebarLeftGet="studio:sidebarLeft:get",e.sidebarLeftToggle="studio:sidebarLeft:toggle",e.sidebarRightSet="studio:sidebarRight:set",e.sidebarRightGet="studio:sidebarRight:get",e.sidebarRightToggle="studio:sidebarRight:toggle",e.sidebarTopSet="studio:sidebarTop:set",e.sidebarTopGet="studio:sidebarTop:get",e.sidebarTopToggle="studio:sidebarTop:toggle",e.sidebarBottomSet="studio:sidebarBottom:set",e.sidebarBottomGet="studio:sidebarBottom:get",e.sidebarBottomToggle="studio:sidebarBottom:toggle",e.symbolAdd="studio:symbolAdd",e.symbolDetach="studio:symbolDetach",e.symbolOverride="studio:symbolOverride",e.symbolPropagateStyles="studio:propagateStyles",e.getPagesConfig="studio:getPagesConfig",e.setPagesConfig="studio:setPagesConfig",e.getPageSettings="studio:getPageSettings",e.setPageSettings="studio:setPageSettings",e.clearPage="studio:clearPage",e.projectFiles="studio:projectFiles",e.validateCode="studio:validateCode",e.canvasReload="studio:canvasReload",e.getBlocksPanel="studio:getBlocksPanel",e.setBlocksPanel="studio:setBlocksPanel",e.getStateContextMenu="studio:getStateContextMenu",e.setStateContextMenu="studio:setStateContextMenu",e.contextMenuComponent="studio:contextMenuComponent",e.layoutAdd="studio:layoutAdd",e.layoutRemove="studio:layoutRemove",e.layoutToggle="studio:layoutToggle",e.layoutUpdate="studio:layoutUpdate",e.layoutGet="studio:layoutGet",e.layoutConfigGet="studio:layoutConfigGet",e.layoutConfigSet="studio:layoutConfigSet",e.layoutComponentAdd="studio:layoutComponentAdd",e.layoutComponentGet="studio:layoutComponentGet",e.layoutComponentRemove="studio:layoutComponentRemove",e.layoutComponentRender="studio:layoutComponentRender",e.getStateTheme="studio:getStateTheme",e.setStateTheme="studio:setStateTheme",e.settings="studio:settings",e.assetProviderGet="studio:assetProviderGet",e.assetProviderAdd="studio:assetProviderAdd",e.assetProviderRemove="studio:assetProviderRemove",e.fontGet="studio:fontGet",e.fontAdd="studio:fontAdd",e.fontRemove="studio:fontRemove",e.fontManagerOpen="studio:fontManagerOpen",e.menuFontLoad="studio:menuFontLoad",e.toggleStateDataSource="studio:toggleStateDataSource",e.getStateDataSource="studio:getStateDataSource",e.dataSourceSetGlobalData="studio:dataSourceSetGlobalData",e.dataSourceSetImporter="studio:dataSourceSetImporter",e.dataSourceSetExporter="studio:dataSourceSetExporter",e.setDragAbsolute="studio:setDragAbsolute",e))(O||{});const F={[y.free]:0,[y.startup]:10,[y.business]:20,[y.enterprise]:30};function ie(e,i){const t=e;return t.init=n=>{const o=l=>e(l,n);return o.__gjsPluginId=i,o},t}const re=(e,i)=>ie(e,i);async function le({editor:e,plan:i,pluginName:t,licenseKey:n,onLicenseCheckResponse:o,cleanup:l}){let d="",r;const c=a=>{console.warn("Cleanup plugin:",t,"Reason:",a),l(e,t)},f=(a={})=>{var P;const{error:v,sdkLicense:R}=a,b=(P=a.plan)==null?void 0:P.category;if(!(R||a.license)||v)c(v||"Invalid license");else if(b){const D=F[i],M=F[b];D>M&&c({pluginRequiredPlan:i,licensePlan:b})}};e.Commands.has(O.settings)&&(r=e.runCommand(O.settings),d=(r==null?void 0:r.baseUrl)||"");const p=a=>{o==null||o(a),a&&f(a)};if(!r){e.onReady(async()=>{if(!ne())if(n){const a=await ue({licenseKey:n,pluginName:t,baseApiUrl:d});p(a)}else c("The `licenseKey` option not provided")});return}if(r.licensePlan||r.licenseError){const a=ce(r);p(a);return}e.on(ee,a=>p(a))}const ce=e=>({sdkLicense:e.license,license:e.license,error:e.licenseError,plan:e.licensePlan});async function ue(e){const{licenseKey:i,pluginName:t,baseApiUrl:n}=e;try{return(await ae({baseApiUrl:n,path:`/sdk/${i||"na"}`,method:"POST",params:{d:window.location.hostname,pn:t}})).result||{}}catch(o){return console.error("Error during SDK license check:",o),!1}}const k="data-gs-plg-",I="canvasFullSize",ge=y.startup,pe=(e,i)=>{const{rule:t,ruleView:n}=i,{style:o}=t.attributes;if(o&&o[e]){const l=o[e],d=/([0-9.]+)(vh|dvh|lvh|svh)/g,r=d.test(l),c=n.frameView.model;if(r&&c.hasAutoHeight()){const f=l.replace(d,(a,v)=>`${window.innerHeight*(parseFloat(v)/100)}px`),p=t.toCSS({style:{...o,[e]:f}});i.css=p}}},de=e=>{["height","min-height","max-height"].forEach(i=>pe(i,e))},fe=function(e,i={}){const{Canvas:t,Commands:n,Devices:o,Css:l}=e,d={deviceMaxWidth:1200,deviceMinHeigth:500,canvasOffsetY:30,canvasOffsetX:50,canvasTransition:.3,frameBorderRadius:5,frameTransition:.3,...i},{canvasOffsetY:r,canvasOffsetX:c,canvasTransition:f,deviceMaxWidth:p,deviceMinHeigth:a,deviceFixedHeight:v,frameBorderRadius:R,frameTransition:b}=d,w=`${a}px`,P=t.events,D="core:preview",M=`${n.events.stopCommand}${D}`,L=t.getConfig(),j=`${I}:disable`,W=o.getAll().map(s=>({...s.attributes})),K=f*1e3,m={x:c,y:r};let T={},G,A;L.scrollableCanvas=!v,o.getAll().map(s=>{!s.get("width")&&s.set("width",`${p}px`),!s.get("height")&&s.set("height",v?"100vh":"auto"),!s.get("minHeight")&&s.set("minHeight",w)});const H=s=>{const u=`${k}canvas-full-size`,g=document.querySelector(`style[${u}]`);if(s&&g)return g.remove();const h=g||document.createElement("style"),x=t.getZoomMultiplier();h.setAttribute(u,"true"),h.innerHTML=`
+      .gjs-frame-wrapper { transition: width ${b}s !important; }
+      .gjs-frame-wrapper__bottom { height: ${r*x}px }
+      .gjs-frame { border-radius: ${R}px }
+    `,!g&&document.body.appendChild(h)};e.on(P.frameLoadHead,s=>{if(!L.scrollableCanvas)return;const{window:u}=s,g=u.document,h=g.head,x=`${k}canvas-full-size-wrappers`,$=h.querySelector(`style[${x}]`)||g.createElement("style");$.setAttribute(x,"true"),$.innerHTML=`
+      body { height: auto !important; }
+      [data-gjs-type="wrapper"] { min-height: ${w} !important; }
+      [data-gjs-type="mjml"] { min-height: ${w} !important; }
+      [data-gjs-type="mj-body"] { min-height: ${w} !important; }
+    `,!h.contains($)&&h.appendChild($)});const B=()=>G.style.display="none",Z=()=>G.style.display="",q=()=>{var h;if(!v)return;const s=t.getZoomMultiplier(),g=t.getRect().height*s-r*2;(h=o.getSelected())==null||h.set("height",`${Math.max(g,a)}px`),t.fitViewport({zoom:t.getZoom(),gap:m})},E=Q(()=>{t.fitViewport({zoom:s=>s>100?100:s,ignoreHeight:!0,gap:m}),q(),H(),setTimeout(()=>{var u,g;const{em:s}=e;s.destroyed||((g=(u=e.getSelected())==null?void 0:u.getEl())==null||g.scrollIntoView({block:"nearest"}),e.refresh({tools:!0}),Z(),n.isActive(D)?s.stopDefault():s.runDefault())},K)},100),X=(s={})=>{s.options&&s.options.from!=="fitViewport"&&t.fitViewport({zoom:t.getZoom(),ignoreHeight:!0,gap:m})},Y=()=>{B(),E()},J=()=>{T.overflowX="hidden",T.overflowY="auto"},U=()=>{A==null||A.disconnect(),E.clear()},V=[[o.events.select,Y],[P.zoom,X],[M,J],[e.events.destroy,U],[l.events.mountBefore,de]];n.add(j,()=>{o.devices.reset(W),L.scrollableCanvas=!1,t.getModel().updateDevice(),t.setZoom(100),t.setCoords(0,0),T.overflowY="hidden",H(!0),V.forEach(([s,u])=>e.off(s,u)),U(),n.run("studio:canvasReload")}),V.forEach(([s,u])=>e.on(s,u)),e.onReady(()=>{const s=t.getElement(),u=t.getFramesEl(),g=t.getCanvasView();G=t.getSpotsEl(),T=s.style,T.overflowX="hidden",u.style.transition=`transform ${f}s`,document.removeEventListener("keypress",g.onKeyPress),H(),A=new ResizeObserver(()=>{B(),E()}),A.observe(s.parentElement),E()}),le({editor:e,licenseKey:d.licenseKey,plan:ge,pluginName:I,cleanup:()=>{e.runCommand(j)}})},he=re(fe,I);module.exports=he;

package/dist/canvasFullSize/index.umd.js

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

package/dist/canvasGridMode/index.cjs.js

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