@grapesjs/studio-sdk-plugins 1.0.28-rc.2 → 1.0.28

package/dist/canvasGridMode/index.es.js

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