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

package/dist/canvasGridMode/index.es.js

@@ -18,8 +18,8 @@ const H = "app.grapesjs.com", Y = "app-stage.grapesjs.com", st = "app2.grapesjs.
 ], 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 = () => {
+  isPlatform: n
+}) => `${t ? "" : `https://${e ? Y : H}`}/${n ? "platform-api" : "api"}`, pt = () => {
   if (!lt()) return "";
   const { hostname: t } = window.location;
   if (t) return t;
@@ -38,16 +38,16 @@ function X(t) {
 async function gt({
   path: t,
   baseApiUrl: e,
-  method: r = "GET",
-  headers: n = {},
+  method: n = "GET",
+  headers: r = {},
   params: o,
   body: a
 }) {
   const l = `${e || ct({ isDev: !1, isStage: !1 })}${t}`, c = {
-    method: r,
+    method: n,
     headers: {
       "Content-Type": "application/json",
-      ...n
+      ...r
     }
   };
   a && (c.body = JSON.stringify(a));
@@ -56,29 +56,32 @@ async function gt({
     throw new Error(`HTTP error! status: ${i.status}`);
   return i.json();
 }
-var P = /* @__PURE__ */ ((t) => (t.free = "free", t.startup = "startup", t.business = "business", t.enterprise = "enterprise", t))(P || {}), _ = /* @__PURE__ */ ((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))(_ || {});
+var E = /* @__PURE__ */ ((t) => (t.free = "free", t.startup = "startup", t.business = "business", t.enterprise = "enterprise", t))(E || {}), B = /* @__PURE__ */ ((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 = {
-  [P.free]: 0,
-  [P.startup]: 10,
-  [P.business]: 20,
-  [P.enterprise]: 30
+  [E.free]: 0,
+  [E.startup]: 10,
+  [E.business]: 20,
+  [E.enterprise]: 30
 };
-function ut(t) {
-  const e = t;
-  return e.init = (r) => (n) => t(n, r), e;
+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) => /* @__PURE__ */ ut(t);
+const ft = (t, e) => /* @__PURE__ */ ut(t, e);
 async function mt({
   editor: t,
   plan: e,
-  pluginName: r,
-  licenseKey: n,
+  pluginName: n,
+  licenseKey: r,
   onLicenseCheckResponse: o,
   cleanup: a
 }) {
   let s = "", l;
   const c = (i) => {
-    console.warn("Cleanup plugin:", r, "Reason:", i), a();
+    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;
@@ -89,15 +92,15 @@ async function mt({
       b > $ && c({ pluginRequiredPlan: e, licensePlan: h });
     }
   };
-  t.Commands.has(_.settings) && (l = t.runCommand(_.settings), s = (l == null ? void 0 : l.baseUrl) || "");
+  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 (n) {
-          const i = await ht({ licenseKey: n, pluginName: r, baseApiUrl: s });
+        if (r) {
+          const i = await ht({ licenseKey: r, pluginName: n, baseApiUrl: s });
           p(i);
         } else
           c("The `licenseKey` option not provided");
@@ -118,27 +121,27 @@ const yt = (t) => ({
   plan: t.licensePlan
 });
 async function ht(t) {
-  const { licenseKey: e, pluginName: r, baseApiUrl: n } = t;
+  const { licenseKey: e, pluginName: n, baseApiUrl: r } = t;
   try {
     return (await gt({
-      baseApiUrl: n,
+      baseApiUrl: r,
       path: `/sdk/${e || "na"}`,
       method: "POST",
       params: {
         d: window.location.hostname,
-        pn: r
+        pn: n
       }
     })).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");
+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%;
@@ -148,25 +151,25 @@ const N = "canvasGridMode", wt = P.startup, F = "component-grid-mode", M = "grid
         .${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))
+  const { editor: e, type: n } = t, r = Pt(e, t.component), o = O(e, r.component);
+  if (!Tt(e, r, o, n))
     return {
-      target: n,
+      target: r,
       container: o,
       startScroll: ot(e).scroll,
       shadowContainerEl: document.createElement("div"),
@@ -179,47 +182,47 @@ function Z(t) {
     };
 }
 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 { 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: r, shadowContainerEl: n, target: o, cancelled: a } = t, { Canvas: s } = e, l = e.config.stylePrefix, { component: c } = o;
+  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(r);
+    const d = window.getComputedStyle(n);
     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);
+  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: r
+  columns: n
 }) {
-  const n = [];
-  for (let o = 0; o < r.length; o++) {
-    n[o] = [];
+  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}`, n[o][a] = s, t.appendChild(s);
+      s.className = K, s.style.gridArea = `${a + 1} / ${o + 1}`, r[o][a] = s, t.appendChild(s);
     }
   }
-  return n;
+  return r;
 }
-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 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 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;
+  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 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;
+  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) {
@@ -228,12 +231,12 @@ function et(t, e) {
   } else return [...t.getSelectedAll()].pop();
   return e;
 }
-function Tt(t, e) {
-  const r = et(t, e), n = r.getEl(), o = window.getComputedStyle(n);
+function Pt(t, e) {
+  const n = et(t, e), r = n.getEl(), o = window.getComputedStyle(r);
   return {
-    component: r,
-    el: n,
-    offset: t.Canvas.offset(n),
+    component: n,
+    el: r,
+    offset: t.Canvas.offset(r),
     margin: {
       top: parseFloat(o.marginTop),
       right: parseFloat(o.marginRight),
@@ -244,11 +247,11 @@ function Tt(t, e) {
   };
 }
 function O(t, e) {
-  const r = e.parent(), n = r.getEl(), o = window.getComputedStyle(n);
+  const n = e.parent(), r = n.getEl(), o = window.getComputedStyle(r);
   return {
-    component: r,
-    el: n,
-    offset: t.Canvas.offset(n),
+    component: n,
+    el: r,
+    offset: t.Canvas.offset(r),
     computedStyles: o,
     padding: {
       top: parseFloat(o.paddingTop),
@@ -264,49 +267,49 @@ function O(t, e) {
     }
   };
 }
-function x(t, e, r, n, o = 1) {
+function x(t, e, n, r, o = 1) {
   let a = 0;
   for (let s = e; s <= t.length; s++) {
-    if (a + (t[s - 1] + n) * o > r)
+    if (a + (t[s - 1] + r) * o > n)
       return s;
-    a += n + t[s - 1];
+    a += r + t[s - 1];
   }
   return t.length + 1;
 }
 function ot(t) {
-  const { scrollY: e, scrollX: r } = t.Canvas.getWindow();
+  const { scrollY: e, scrollX: n } = t.Canvas.getWindow();
   return {
     scroll: {
       top: e,
-      left: r
+      left: n
     }
   };
 }
-function Et(t, e, r, n) {
+function Tt(t, e, n, r) {
   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;
+  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, r = {}) {
-  const n = et(t, e), o = n == null ? void 0 : n.parent(), a = o == null ? void 0 : o.getEl();
+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 } = r, l = window.getComputedStyle(a).display === "grid";
-  return X(s) ? s({ component: n, parent: o, isParentGrid: l }) : l;
+  const { enableGrid: s } = n, l = window.getComputedStyle(a).display === "grid";
+  return X(s) ? s({ component: r, parent: o, isParentGrid: l }) : l;
 }
-const U = (t) => t.split(" ").map((e) => parseFloat(e));
+const k = (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 = {
+  const n = t.ownerDocument.defaultView, r = e || n.getComputedStyle(t), o = r.gridArea.split("/").some((S) => isNaN(parseInt(S.trim()))), a = {
     isComputed: o,
-    raw: n.gridArea
+    raw: r.gridArea
   }, s = {
     ...a,
     row: {
-      start: parseInt(n.gridRowStart) || 1,
-      end: parseInt(n.gridRowEnd) || 2
+      start: parseInt(r.gridRowStart) || 1,
+      end: parseInt(r.gridRowEnd) || 2
     },
     column: {
-      start: parseInt(n.gridColumnStart) || 1,
-      end: parseInt(n.gridColumnEnd) || 2
+      start: parseInt(r.gridColumnStart) || 1,
+      end: parseInt(r.gridColumnEnd) || 2
     }
   };
   if (!o)
@@ -314,13 +317,13 @@ function nt(t, e) {
   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) => {
+  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 < T.length; D++) {
-      const rt = T[D], z = A + rt;
+    for (let D = 0; D < P.length; D++) {
+      const rt = P[D], z = A + rt;
       if (S >= A && S < z)
         return G;
-      A = z + E, 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;
@@ -336,12 +339,12 @@ function nt(t, e) {
     }
   };
 }
-function Pt(t) {
+function Et(t) {
   t.Commands.add(F, {
     stop() {
     },
-    run(e, r, n = {}) {
-      const o = Z({ editor: e, component: n.target, type: "draggable" });
+    run(e, n, r = {}) {
+      const o = Z({ editor: e, component: r.target, type: "draggable" });
       if (!o) {
         this.stopCommand();
         return;
@@ -373,22 +376,22 @@ function Pt(t) {
           }), 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, 0.5), b.length), G = Math.min(x($, 1, E, y.row, 0.5), $.length), A = Math.min(
+          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, 0.5), b.length), G = Math.min(x($, 1, T, y.row, 0.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`;
+          c.style.gridArea = `${G} / ${I} / ${D} / ${A}`, d.style.top = `${T + v.top}px`, d.style.left = `${R + v.left}px`;
         }
-      }).start(n.event);
+      }).start(r.event);
     }
   });
 }
 function Gt(t, e) {
-  const r = Z({ editor: t, component: e.component, type: "resizable" });
-  if (!r)
+  const n = Z({ editor: t, component: e.component, type: "resizable" });
+  if (!n)
     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;
+  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(() => {
@@ -410,10 +413,10 @@ function Gt(t, e) {
     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 = {
+      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: T - b,
-        h: E + $ + y,
+        l: P - b,
+        h: T + $ + y,
         w: v + b + f
       };
       i.endsWith("l") && (u.column.start = x(
@@ -434,33 +437,33 @@ function Gt(t, e) {
       )), i.startsWith("b") && (u.row.end = Math.max(
         x(p.rows, u.row.start, R.h, p.gap.row, 0.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);
+      )), 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 k = ["px", "%", "em", "rem", "vw", "vh"], At = (t, e) => {
-  const r = t.Styles.getSectors().find((n) => !!n.getProperty(e));
+const U = ["px", "%", "em", "rem", "vw", "vh"], At = (t, e) => {
+  const n = t.Styles.getSectors().find((r) => !!r.getProperty(e));
   return {
-    sector: r,
-    property: r ? r.getProperty(e) : void 0
+    sector: n,
+    property: n ? n.getProperty(e) : void 0
   };
-}, Dt = (t, e) => At(t, e), Mt = (t, { x: e, y: r, mergable: n } = {}) => {
+}, Dt = (t, e) => At(t, e), Mt = (t, { x: e, y: n, mergable: r } = {}) => {
   const o = {
     property: `${t}-x`,
     type: "integer",
-    units: k,
+    units: U,
     ...e
   }, a = {
     property: `${t}-y`,
     type: "integer",
-    units: k,
-    ...r
+    units: U,
+    ...n
   };
   return {
     property: t,
     type: "composite",
     properties: [o, a],
-    ...n && {
+    ...r && {
       fromStyle(s, { name: l, separator: c, property: d }) {
         const [p, i] = d.getProperties(), [g, m] = (s[l] || "").split(c);
         return {
@@ -476,14 +479,14 @@ const k = ["px", "%", "em", "rem", "vw", "vh"], At = (t, e) => {
       }
     }
   };
-}, B = { display: ["grid"] };
+}, N = { 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)
+  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(n[1], 10), a = n[2];
+  const o = parseInt(r[1], 10), a = r[2];
   let s = a, l = a;
-  const c = a.match(r);
+  const c = a.match(n);
   return c && (s = c[1], l = c[2]), {
     total: o,
     min: s === l ? "" : s,
@@ -491,22 +494,22 @@ function Ct(t = "") {
   };
 }
 function It(t = {}) {
-  let e = "", r = "", n = "", o = "";
+  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 ? (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]), {
+  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: r,
-    rowStart: n,
+    columnEnd: n,
+    rowStart: r,
     rowEnd: o
   };
 }
 function q(t) {
-  const { property: e, label: r } = t, n = "1", o = "1fr";
+  const { property: e, label: n } = t, r = "1", o = "1fr";
   return {
     property: e,
-    label: r,
+    label: n,
     type: "composite",
-    requires: B,
+    requires: N,
     generic: !0,
     properties: [
       {
@@ -537,7 +540,7 @@ function q(t) {
     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,
+        [d.id]: (m == null ? void 0 : m.total) ?? r,
         [p.id]: (m == null ? void 0 : m.min) ?? "",
         [i.id]: h === o ? "" : h
       };
@@ -545,17 +548,17 @@ function q(t) {
     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})`
+        [s]: `repeat(${i || r}, ${h})`
       };
     }
   };
 }
-function Lt(t, e) {
+function _t(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(
+  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"
@@ -570,7 +573,7 @@ function Lt(t, e) {
   ), a.addProperty(
     {
       id: "grid-gap",
-      requires: B,
+      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" },
@@ -583,7 +586,7 @@ function Lt(t, e) {
       type: "composite",
       property: "grid-area",
       label: "Grid area",
-      requiresParent: B,
+      requiresParent: N,
       //   detached: true,
       generic: !0,
       properties: [
@@ -631,20 +634,20 @@ function Lt(t, e) {
     {}
   );
 }
-const _t = function(t, e = {}) {
-  const r = {
+const Lt = function(t, e = {}) {
+  const n = {
     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`;
+  }, { 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;
-  Pt(t);
+  Et(t);
   const m = ({ options: y }) => {
-    L(t, y.target, r) && (t.runCommand(F, { ...y }), y.abort = !0);
+    L(t, y.target, n) && (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)));
+    L(t, f.component, n) && (f.options = Object.assign(f.options || {}, Gt(t, f)));
   }, w = () => {
-    const y = n.getSpots({
+    const y = r.getSpots({
       type: M
     }).pop();
     if (!y) return;
@@ -671,7 +674,7 @@ const _t = function(t, e = {}) {
     };
     t.on(d.resizeInit, (f) => {
       const { component: v } = f;
-      if (L(t, v, r)) {
+      if (L(t, v, n)) {
         const S = y(v);
         f.resizable = S;
       }
@@ -686,7 +689,7 @@ const _t = function(t, e = {}) {
   b.forEach(([y, f]) => {
     t.on(y, f);
   }), t.onReady(() => {
-    g = n.getSpotsEl(), vt(), Lt(t, r);
+    g = r.getSpotsEl(), vt(), _t(t, n);
   });
   const $ = () => {
     delete t.Commands.commands[F], b.forEach(([y, f]) => {
@@ -695,12 +698,12 @@ const _t = function(t, e = {}) {
   };
   mt({
     editor: t,
-    licenseKey: r.licenseKey,
+    licenseKey: n.licenseKey,
     plan: wt,
-    pluginName: N,
+    pluginName: _,
     cleanup: $
   });
-}, Nt = ft(_t);
+}, Bt = ft(Lt, _);
 export {
-  Nt as default
+  Bt as default
 };