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

package/dist/canvasGridMode/index.es.js

@@ -1,113 +1,126 @@
-const Y = "app.grapesjs.com", H = "app-stage.grapesjs.com", rt = "app2.grapesjs.com", st = "app-stage2.grapesjs.com", j = [
-  Y,
-  rt,
+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",
   // For stackblitz.com demos
   ".local.webcontainer.io",
   // For stackblitz.com demos
-  "-sandpack.codesandbox.io"
+  "-sandpack.codesandbox.io",
   // For Sandpack demos
-], at = "license:check:end", it = () => typeof window < "u", lt = ({
+  ".claudemcpcontent.com",
+  // For Claude mcp app
+  ".web-sandbox.oaiusercontent.com"
+  // For OpenAI mcp app
+], it = "license:check:end", lt = () => typeof window < "u", ct = ({
   isDev: t,
   isStage: e,
   isPlatform: r
-}) => `${t ? "" : `https://${e ? H : Y}`}/${r ? "platform-api" : "api"}`, ct = () => {
-  const t = it() && window.location.hostname;
+}) => `${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 pt({
+async function gt({
   path: t,
   baseApiUrl: e,
   method: r = "GET",
   headers: n = {},
   params: o,
-  body: i
+  body: a
 }) {
-  const a = `${e || lt({ isDev: !1, isStage: !1 })}${t}`, p = {
+  const l = `${e || ct({ isDev: !1, isStage: !1 })}${t}`, c = {
     method: r,
     headers: {
       "Content-Type": "application/json",
       ...n
     }
   };
-  i && (p.body = JSON.stringify(i));
-  const d = o ? new URLSearchParams(o).toString() : "", c = d ? `?${d}` : "", l = await fetch(`${a}${c}`, p);
-  if (!l.ok)
-    throw new Error(`HTTP error! status: ${l.status}`);
-  return l.json();
+  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 G = /* @__PURE__ */ ((t) => (t.free = "free", t.startup = "startup", t.business = "business", t.enterprise = "enterprise", t))(G || {}), _ = /* @__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.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 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))(_ || {});
 const W = {
-  [G.free]: 0,
-  [G.startup]: 10,
-  [G.business]: 20,
-  [G.enterprise]: 30
+  [P.free]: 0,
+  [P.startup]: 10,
+  [P.business]: 20,
+  [P.enterprise]: 30
 };
-function dt(t) {
+function ut(t) {
   const e = t;
   return e.init = (r) => (n) => t(n, r), e;
 }
-const gt = (t) => /* @__PURE__ */ dt(t);
-async function ut({
+const ft = (t) => /* @__PURE__ */ ut(t);
+async function mt({
   editor: t,
   plan: e,
   pluginName: r,
   licenseKey: n,
   onLicenseCheckResponse: o,
-  cleanup: i
+  cleanup: a
 }) {
-  let s = "", a;
-  const p = (l) => {
-    console.warn("Cleanup plugin:", r, "Reason:", l), i();
-  }, d = (l = {}) => {
-    var w;
-    const { error: g, sdkLicense: u } = l, h = (w = l.plan) == null ? void 0 : w.category;
-    if (!(u || l.license) || g)
-      p(g || "Invalid license");
+  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 v = W[e], R = W[h];
-      v > R && p({ pluginRequiredPlan: e, licensePlan: h });
+      const b = W[e], $ = W[h];
+      b > $ && c({ pluginRequiredPlan: e, licensePlan: h });
     }
   };
-  t.Commands.has(_.settings) && (a = t.runCommand(_.settings), s = (a == null ? void 0 : a.baseUrl) || "");
-  const c = (l) => {
-    o == null || o(l), l && d(l);
+  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 (!a) {
+  if (!l) {
     t.onReady(async () => {
-      if (!ct())
+      if (!dt())
         if (n) {
-          const l = await mt({ licenseKey: n, pluginName: r, baseApiUrl: s });
-          c(l);
+          const i = await ht({ licenseKey: n, pluginName: r, baseApiUrl: s });
+          p(i);
         } else
-          p("The `licenseKey` option not provided");
+          c("The `licenseKey` option not provided");
     });
     return;
   }
-  if (a.licensePlan || a.licenseError) {
-    const l = ft(a);
-    c(l);
+  if (l.licensePlan || l.licenseError) {
+    const i = yt(l);
+    p(i);
     return;
   }
-  t.on(at, (l) => c(l));
+  t.on(it, (i) => p(i));
 }
-const ft = (t) => ({
+const yt = (t) => ({
   sdkLicense: t.license,
   license: t.license,
   error: t.licenseError,
   plan: t.licensePlan
 });
-async function mt(t) {
+async function ht(t) {
   const { licenseKey: e, pluginName: r, baseApiUrl: n } = t;
   try {
-    return (await pt({
+    return (await gt({
       baseApiUrl: n,
       path: `/sdk/${e || "na"}`,
       method: "POST",
@@ -120,7 +133,7 @@ async function mt(t) {
     return console.error("Error during SDK license check:", o), !1;
   }
 }
-const N = "canvasGridMode", yt = G.startup, F = "component-grid-mode", D = "grid-mode", M = "gjs-drag-grid-spot", K = `${M}__grid-item`, J = `${M}__grid-target`, Q = `${M}__snapped`, ht = `${M}__container`, wt = () => {
+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 = `
         .${K} {
@@ -150,8 +163,8 @@ const N = "canvasGridMode", yt = G.startup, F = "component-grid-mode", D = "grid
     `, e.head.appendChild(o);
 };
 function Z(t) {
-  const { editor: e, type: r } = t, n = Rt(e, t.component), o = O(e, n.component);
-  if (!Tt(e, n, o, r))
+  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,
@@ -160,53 +173,53 @@ function Z(t) {
       shadowSnappedEl: document.createElement("div"),
       shadowTargetEl: document.createElement("div"),
       spot: e.Canvas.addSpot({
-        type: D,
+        type: M,
         component: o.component
       })
     };
 }
 function V(t) {
-  const { editor: e, shadowTargetEl: r, shadowSnappedEl: n, shadowContainerEl: o, spotEl: i, target: s, container: a } = t, { Canvas: p } = e, d = e.config.stylePrefix;
-  i == null || i.appendChild(o), o == null || o.appendChild(r), o == null || o.appendChild(n), bt(o, a), vt(r, s, a), $t(n, s), St(o, a.el), s.el.style.opacity = "0";
-  const c = p.getSpots().filter((l) => l.type !== D);
-  e.em.stopDefault({ preserveSelected: !0 }), p.removeSpots(c), p.startAutoscroll(), p.getBody().classList.add(`${d}is__grabbing`);
+  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: i } = t, { Canvas: s } = e, a = e.config.stylePrefix, { component: p } = o;
-  if (!i) {
+  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);
-    p.addStyle({
+    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(`${a}is__grabbing`), s.removeSpots({ type: D }), e.select(p);
+  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 bt(t, {
+function $t(t, {
   rows: e,
   columns: r
 }) {
   const n = [];
   for (let o = 0; o < r.length; o++) {
     n[o] = [];
-    for (let i = 0; i < e.length; i++) {
+    for (let a = 0; a < e.length; a++) {
       const s = document.createElement("div");
-      s.className = K, s.style.gridArea = `${i + 1} / ${o + 1}`, n[o][i] = s, t.appendChild(s);
+      s.className = K, s.style.gridArea = `${a + 1} / ${o + 1}`, n[o][a] = s, t.appendChild(s);
     }
   }
   return n;
 }
-function vt(t, e, 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 $t(t, e) {
+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 St(t, e) {
+function xt(t, e) {
   const r = window.getComputedStyle(e);
-  t.className = ht, 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;
+  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) {
@@ -215,7 +228,7 @@ function et(t, e) {
   } else return [...t.getSelectedAll()].pop();
   return e;
 }
-function Rt(t, e) {
+function Tt(t, e) {
   const r = et(t, e), n = r.getEl(), o = window.getComputedStyle(n);
   return {
     component: r,
@@ -251,12 +264,12 @@ function O(t, e) {
     }
   };
 }
-function T(t, e, r, n, o = 1) {
-  let i = 0;
+function x(t, e, r, n, o = 1) {
+  let a = 0;
   for (let s = e; s <= t.length; s++) {
-    if (i + (t[s - 1] + n) * o > r)
+    if (a + (t[s - 1] + n) * o > r)
       return s;
-    i += n + t[s - 1];
+    a += n + t[s - 1];
   }
   return t.length + 1;
 }
@@ -269,58 +282,61 @@ function ot(t) {
     }
   };
 }
-function Tt(t, e, r, n) {
-  const o = (i) => t.em.logWarning(i);
+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(), i = o == null ? void 0 : o.getEl();
-  if (!o || !i)
+  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, a = window.getComputedStyle(i).display === "grid";
-  return X(s) ? s({ component: n, parent: o, isParentGrid: a }) : a;
+  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((b) => isNaN(parseInt(b.trim()))), i = {
+  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 {
-      ...i,
-      row: {
-        start: parseInt(n.gridRowStart),
-        end: parseInt(n.gridRowEnd)
-      },
-      column: {
-        start: parseInt(n.gridColumnStart),
-        end: parseInt(n.gridColumnEnd)
-      }
-    };
-  const s = t.parentElement, a = r.getComputedStyle(s), p = parseFloat(a.columnGap) || 0, d = parseFloat(a.rowGap) || 0, c = U(a.gridTemplateColumns), l = U(a.gridTemplateRows), g = parseFloat(a.paddingLeft) || 0, u = parseFloat(a.paddingTop) || 0, h = s.getBoundingClientRect(), m = t.getBoundingClientRect(), w = (b, $, x, S, C) => {
-    let E = 1, P = S + C;
-    for (let A = 0; A < $.length; A++) {
-      const I = $[A], z = P + I;
-      if (b >= P && b < z)
-        return E;
-      P = z + x, E++;
+    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;
-  }, v = w(m.left, c, p, h.left, g), R = w(m.right - 1, c, p, h.left, g) + 1, y = w(m.top, l, d, h.top, u), f = w(m.bottom - 1, l, d, h.top, u) + 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 {
-    ...i,
+    ...a,
     row: {
-      start: y,
-      end: f
+      start: f,
+      end: v
     },
     column: {
-      start: v,
-      end: R
+      start: $,
+      end: y
     }
   };
 }
-function xt(t) {
+function Pt(t) {
   t.Commands.add(F, {
     stop() {
     },
@@ -330,8 +346,8 @@ function xt(t) {
         this.stopCommand();
         return;
       }
-      const { spot: i, target: s, shadowContainerEl: a, shadowSnappedEl: p, shadowTargetEl: d, startScroll: c } = o;
-      let { container: l } = o, g;
+      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: () => {
@@ -339,100 +355,102 @@ function xt(t) {
             V({
               editor: e,
               shadowTargetEl: d,
-              shadowSnappedEl: p,
-              shadowContainerEl: a,
-              spotEl: i.attributes.spotEl,
+              shadowSnappedEl: c,
+              shadowContainerEl: l,
+              spotEl: a.attributes.spotEl,
               target: s,
-              container: l
-            }), l = O(e, s.component);
+              container: i
+            }), i = O(e, s.component);
           }, 10);
         },
-        onEnd: (h, m, { cancelled: w }) => {
+        onEnd: (h, w, { cancelled: u }) => {
           clearTimeout(g), tt({
             editor: e,
-            shadowSnappedEl: p,
-            shadowContainerEl: a,
+            shadowSnappedEl: c,
+            shadowContainerEl: l,
             target: s,
-            cancelled: w
+            cancelled: u
           }), this.stopCommand(), e.em.set("_cmpDrag", 1);
         },
-        setPosition: ({ x: h, y: m }) => {
-          const { scroll: w } = ot(e), { columns: v, rows: R, gap: y, offset: f, padding: b } = l, { offset: $, margin: x } = s, S = $.top - f.top - b.top - x.top + m - c.top + w.top, C = $.left - f.left - b.left - x.left + h - c.left + w.left, E = Math.min(T(v, 1, C, y.column, 0.5), v.length), P = Math.min(T(R, 1, S, y.row, 0.5), R.length), A = Math.min(
-            T(v, E, $.width, y.column) + 1,
-            v.length + 1
-          ), I = Math.min(T(R, P, $.height, y.row) + 1, R.length + 1);
-          p.style.gridArea = `${P} / ${E} / ${I} / ${A}`, d.style.top = `${S + b.top}px`, d.style.left = `${C + b.left}px`;
+        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(
+            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 Pt(t, e) {
+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: i, target: s, shadowContainerEl: a, shadowSnappedEl: p, shadowTargetEl: d } = r;
-  let { container: c } = r, l = "", g;
+  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: (u) => {
-      l = u.target.dataset.gjsHandler || "", g = setTimeout(() => {
+    onStart: (h) => {
+      i = h.target.dataset.gjsHandler || "", g = !1, m = setTimeout(() => {
         V({
           editor: t,
           shadowTargetEl: d,
-          shadowSnappedEl: p,
-          shadowContainerEl: a,
-          spotEl: i.attributes.spotEl,
+          shadowSnappedEl: c,
+          shadowContainerEl: l,
+          spotEl: a.attributes.spotEl,
           target: s,
-          container: c
-        }), c = O(t, s.component);
-      }, 10), t.trigger("component:resize", { ...s, type: "start" });
+          container: p
+        }), p = O(t, s.component), g = !0;
+      }, 10), t.trigger("component:resize", { ...s || {}, type: "start" });
     },
-    onEnd: (u, h) => {
-      const { startDim: m, rectDim: w } = h.resizer, v = JSON.stringify(m) === JSON.stringify(w);
-      clearTimeout(g), tt({ editor: t, shadowSnappedEl: p, shadowContainerEl: a, target: s, cancelled: v }), o == null || o(u, h);
+    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: (u, h) => {
-      const m = nt(p), w = s.margin.left, v = s.margin.top, R = s.margin.bottom, y = s.margin.right, { w: f, t: b, l: $, h: x } = h.resizer.rectDim, S = {
-        t: b - v,
-        l: $ - w,
-        h: x + v + R,
-        w: f + w + y
+    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
       };
-      l.endsWith("l") && (m.column.start = T(
-        c.columns,
+      i.endsWith("l") && (u.column.start = x(
+        p.columns,
         1,
-        S.l - c.offset.left - c.padding.left,
-        c.gap.column,
+        R.l - p.offset.left - p.padding.left,
+        p.gap.column,
         0.5
-      )), l.startsWith("t") && (m.row.start = T(
-        c.rows,
+      )), i.startsWith("t") && (u.row.start = x(
+        p.rows,
         1,
-        S.t - c.offset.top - c.padding.top,
-        c.gap.row,
+        R.t - p.offset.top - p.padding.top,
+        p.gap.row,
         0.5
-      )), l.endsWith("r") && (m.column.end = Math.max(
-        T(c.columns, m.column.start, S.w, c.gap.column, 0.5),
-        m.column.start + 1
-      )), l.startsWith("b") && (m.row.end = Math.max(
-        T(c.rows, m.row.start, S.h, c.gap.row, 0.5),
-        m.row.start + 1
-      )), p.style.gridArea = `${m.row.start} / ${m.column.start} / ${m.row.end} / ${m.column.end}`, d.style.width = `${S.w}px`, d.style.height = `${S.h}px`, d.style.left = `${S.l - c.offset.left}px`, d.style.top = `${S.t - c.offset.top}px`, n == null || n(u, h);
+      )), i.endsWith("r") && (u.column.end = Math.max(
+        x(p.columns, u.column.start, R.w, p.gap.column, 0.5),
+        u.column.start + 1
+      )), 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);
     }
   };
 }
-const k = ["px", "%", "em", "rem", "vw", "vh"], Gt = (t, e) => {
+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
   };
-}, Et = (t, e) => Gt(t, e), At = (t, { x: e, y: r, mergable: n } = {}) => {
+}, Dt = (t, e) => At(t, e), Mt = (t, { x: e, y: r, mergable: n } = {}) => {
   const o = {
     property: `${t}-x`,
     type: "integer",
     units: k,
     ...e
-  }, i = {
+  }, a = {
     property: `${t}-y`,
     type: "integer",
     units: k,
@@ -441,41 +459,41 @@ const k = ["px", "%", "em", "rem", "vw", "vh"], Gt = (t, e) => {
   return {
     property: t,
     type: "composite",
-    properties: [o, i],
+    properties: [o, a],
     ...n && {
-      fromStyle(s, { name: a, separator: p, property: d }) {
-        const [c, l] = d.getProperties(), [g, u] = (s[a] || "").split(p);
+      fromStyle(s, { name: l, separator: c, property: d }) {
+        const [p, i] = d.getProperties(), [g, m] = (s[l] || "").split(c);
         return {
-          [c.getId()]: s[c.getName()] || g || "",
-          [l.getId()]: s[l.getName()] || u || g || ""
+          [p.getId()]: s[p.getName()] || g || "",
+          [i.getId()]: s[i.getName()] || m || g || ""
         };
       },
-      toStyle(s, { name: a, property: p }) {
-        const [d, c] = p.getProperties(), l = s[d.getId()], g = s[c.getId()];
+      toStyle(s, { name: l, property: c }) {
+        const [d, p] = c.getProperties(), i = s[d.getId()], g = s[p.getId()];
         return {
-          [a]: l === g ? l : `${l} ${g}`
+          [l]: i === g ? i : `${i} ${g}`
         };
       }
     }
   };
 }, B = { display: ["grid"] };
-function Dt(t = "") {
+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), i = n[2];
-  let s = i, a = i;
-  const p = i.match(r);
-  return p && (s = p[1], a = p[2]), {
+  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 === a ? "" : s,
-    max: a
+    min: s === l ? "" : s,
+    max: l
   };
 }
-function Mt(t = {}) {
+function It(t = {}) {
   let e = "", r = "", n = "", o = "";
-  const i = (m) => m.split("/").map((w) => w.trim()).filter(Boolean), s = t["grid-area"] || "", a = t["grid-column"] || "", p = t["grid-row"] || "", d = i(s), c = i(a), l = i(p), g = d.length, u = c.length, h = l.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]), u === 2 ? (e = c[0], r = c[1]) : u === 1 && (e = c[0]), h === 2 ? (n = l[0], o = l[1]) : h === 1 && (n = l[0]), {
+  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,
@@ -516,51 +534,51 @@ function q(t) {
         default: "1"
       }
     ],
-    fromStyle(i, s) {
-      const { name: a, property: p } = s, [d, c, l] = p.getProperties(), g = i[a], u = Dt(g), h = (u == null ? void 0 : u.max) ?? o;
+    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]: (u == null ? void 0 : u.total) ?? n,
-        [c.id]: (u == null ? void 0 : u.min) ?? "",
-        [l.id]: h === o ? "" : h
+        [d.id]: (m == null ? void 0 : m.total) ?? n,
+        [p.id]: (m == null ? void 0 : m.min) ?? "",
+        [i.id]: h === o ? "" : h
       };
     },
-    toStyle(i, { name: s, property: a }) {
-      const [p, d, c] = a.getProperties(), l = i[p.id], g = i[d.id], u = i[c.id] || o, h = g && u ? `minmax(${g}, ${u})` : u;
+    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(${l || n}, ${h})`
+        [s]: `repeat(${i || n}, ${h})`
       };
     }
   };
 }
-function Ct(t, e) {
+function Lt(t, e) {
   if (!e.styleableGrid) return;
-  const { property: r, ...n } = Et(t, "display");
+  const { property: r, ...n } = Dt(t, "display");
   if (!r) return;
-  const o = r.getOption("grid"), i = n.sector;
-  o || r.addOption({ id: "grid", label: "Grid" }), i.addProperty(
+  const o = r.getOption("grid"), a = n.sector;
+  o || r.addOption({ id: "grid", label: "Grid" }), a.addProperty(
     q({
       label: "Columns",
       property: "grid-template-columns"
     }),
     {}
-  ), i.addProperty(
+  ), a.addProperty(
     q({
       label: "Rows",
       property: "grid-template-rows"
     }),
     {}
-  ), i.addProperty(
+  ), a.addProperty(
     {
       id: "grid-gap",
       requires: B,
-      ...At("gap", {
+      ...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
       })
     },
     {}
-  ), i.addProperty(
+  ), a.addProperty(
     {
       type: "composite",
       property: "grid-area",
@@ -595,51 +613,51 @@ function Ct(t, e) {
         }
       ],
       fromStyle(s) {
-        const a = Mt(s);
+        const l = It(s);
         return {
-          "grid-column-start": s["grid-column-start"] || a.columnStart,
-          "grid-column-end": s["grid-column-end"] || a.columnEnd,
-          "grid-row-start": s["grid-row-start"] || a.rowStart,
-          "grid-row-end": s["grid-row-end"] || a.rowEnd
+          "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: a }) {
-        const p = s["grid-row-start"] || "auto", d = s["grid-row-end"] || "auto", c = s["grid-column-start"] || "auto", l = s["grid-column-end"] || "auto";
+      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 {
-          [a]: `${p} / ${c} / ${d} / ${l}`
+          [l]: `${c} / ${p} / ${d} / ${i}`
         };
       }
     },
     {}
   );
 }
-const It = function(t, e = {}) {
+const _t = function(t, e = {}) {
   const r = {
     itemResizable: !0,
     ...e
-  }, { Canvas: n, Commands: o, Components: i } = t, { itemResizable: s } = r, a = n.events, p = o.events, d = i.events, c = `${p.runBeforeCommand}tlb-move`, l = `${p.runBeforeCommand}resize`;
+  }, { 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;
-  xt(t);
-  const u = ({ options: y }) => {
+  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 || {}, Pt(t, f)));
-  }, m = () => {
+    L(t, f.component, r) && (f.options = Object.assign(f.options || {}, Gt(t, f)));
+  }, w = () => {
     const y = n.getSpots({
-      type: D
+      type: M
     }).pop();
     if (!y) return;
     let f = y.attributes.spotEl;
-    f || (f = document.createElement("div"), f.className = M, y.set({ spotEl: f })), Object.entries(y.getStyle()).forEach(([b, $]) => f.style.setProperty(b, $)), g == null || g.appendChild(f);
-  }, w = ({ spot: y }) => {
+    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 !== D || !f || g == null || g.removeChild(f);
+    y.type !== M || !f || g == null || g.removeChild(f);
   };
   if (s) {
     const y = (f) => {
-      const b = X(s) ? s({ component: f }) : s;
-      return typeof b == "boolean" ? b : {
+      const v = X(s) ? s({ component: f }) : s;
+      return typeof v == "boolean" ? v : {
         tl: !1,
         tc: !1,
         tr: !1,
@@ -648,41 +666,41 @@ const It = function(t, e = {}) {
         bl: !1,
         bc: !1,
         br: !1,
-        ...b
+        ...v
       };
     };
     t.on(d.resizeInit, (f) => {
-      const { component: b } = f;
-      if (L(t, b, r)) {
-        const $ = y(b);
-        f.resizable = $;
+      const { component: v } = f;
+      if (L(t, v, r)) {
+        const S = y(v);
+        f.resizable = S;
       }
     });
   }
-  const v = [
-    [c, u],
-    [l, h],
-    [a.spot, m],
-    [a.spotRemove, w]
+  const b = [
+    [p, m],
+    [i, h],
+    [l.spot, w],
+    [l.spotRemove, u]
   ];
-  v.forEach(([y, f]) => {
+  b.forEach(([y, f]) => {
     t.on(y, f);
   }), t.onReady(() => {
-    g = n.getSpotsEl(), wt(), Ct(t, r);
+    g = n.getSpotsEl(), vt(), Lt(t, r);
   });
-  const R = () => {
-    delete t.Commands.commands[F], v.forEach(([y, f]) => {
+  const $ = () => {
+    delete t.Commands.commands[F], b.forEach(([y, f]) => {
       t.off(y, f);
     });
   };
-  ut({
+  mt({
     editor: t,
     licenseKey: r.licenseKey,
-    plan: yt,
+    plan: wt,
     pluginName: N,
-    cleanup: R
+    cleanup: $
   });
-}, Lt = gt(It);
+}, Nt = ft(_t);
 export {
-  Lt as default
+  Nt as default
 };