@grapesjs/studio-sdk-plugins 1.0.27 → 1.0.28-rc.1

package/dist/canvasGridMode/index.es.js

@@ -1,6 +1,6 @@
-const q = "app.grapesjs.com", K = "app-stage.grapesjs.com", U = [
+const q = "app.grapesjs.com", H = "app-stage.grapesjs.com", B = [
   q,
-  K,
+  H,
   "localhost",
   "127.0.0.1",
   ".local-credentialless.webcontainer.io",
@@ -9,14 +9,14 @@ const q = "app.grapesjs.com", K = "app-stage.grapesjs.com", U = [
   // For stackblitz.com demos
   "-sandpack.codesandbox.io"
   // For Sandpack demos
-], st = "license:check:start", at = "license:check:end", it = () => typeof window < "u", lt = ({ isDev: t, isStage: e }) => `${t ? "" : `https://${e ? K : q}`}/api`, ct = () => {
-  const t = it() && window.location.hostname;
-  return !!t && (U.includes(t) || U.some((e) => t.endsWith(e)));
+], 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)));
 };
-function J(t) {
+function Y(t) {
   return typeof t == "function";
 }
-async function pt({
+async function lt({
   path: t,
   baseApiUrl: e,
   method: r = "GET",
@@ -24,7 +24,7 @@ async function pt({
   params: n,
   body: i
 }) {
-  const l = `${e || lt({ isDev: !1, isStage: !1 })}${t}`, c = {
+  const l = `${e || at({ isDev: !1, isStage: !1 })}${t}`, c = {
     method: r,
     headers: {
       "Content-Type": "application/json",
@@ -37,19 +37,19 @@ async function pt({
     throw new Error(`HTTP error! status: ${d.status}`);
   return d.json();
 }
-var M = /* @__PURE__ */ ((t) => (t.free = "free", t.startup = "startup", t.business = "business", t.enterprise = "enterprise", t))(M || {});
-const j = {
-  [M.free]: 0,
-  [M.startup]: 10,
-  [M.business]: 20,
-  [M.enterprise]: 30
+var R = /* @__PURE__ */ ((t) => (t.free = "free", t.startup = "startup", t.business = "business", t.enterprise = "enterprise", t))(R || {});
+const O = {
+  [R.free]: 0,
+  [R.startup]: 10,
+  [R.business]: 20,
+  [R.enterprise]: 30
 };
-function dt(t) {
+function ct(t) {
   const e = t;
   return e.init = (r) => (o) => t(o, r), e;
 }
-const ut = (t) => /* @__PURE__ */ dt(t);
-async function gt({
+const pt = (t) => /* @__PURE__ */ ct(t);
+async function dt({
   editor: t,
   plan: e,
   pluginName: r,
@@ -57,37 +57,37 @@ async function gt({
   cleanup: n
 }) {
   let i = "", s = !1;
-  const l = ct(), c = (a) => {
+  const l = it(), c = (a) => {
     console.warn("Cleanup plugin:", r, "Reason:", a), n();
   }, p = (a = {}) => {
-    var S;
-    const { error: d, sdkLicense: u } = a, g = (S = a.plan) == null ? void 0 : S.category;
+    var g;
+    const { error: d, sdkLicense: u } = a, m = (g = a.plan) == null ? void 0 : g.category;
     if (!(u || a.license) || d)
       c(d || "Invalid license");
-    else if (g) {
-      const f = j[e], b = j[g];
-      f > b && c({ pluginRequiredPlan: e, licensePlan: g });
+    else if (m) {
+      const w = O[e], b = O[m];
+      w > b && c({ pluginRequiredPlan: e, licensePlan: m });
     }
   };
-  t.on(st, (a) => {
+  t.on(ot, (a) => {
     i = a == null ? void 0 : a.baseApiUrl, s = !0;
-  }), t.on(at, (a) => {
+  }), t.on(rt, (a) => {
     p(a);
   }), setTimeout(async () => {
     if (!s) {
       if (l) return;
       if (o) {
-        const a = await mt({ licenseKey: o, pluginName: r, baseApiUrl: i });
+        const a = await ut({ licenseKey: o, pluginName: r, baseApiUrl: i });
         a && p(a);
       } else
         c("The `licenseKey` option not provided");
     }
   }, 2e3);
 }
-async function mt(t) {
+async function ut(t) {
   const { licenseKey: e, pluginName: r, baseApiUrl: o } = t;
   try {
-    return (await pt({
+    return (await lt({
       baseApiUrl: o,
       path: `/sdk/${e || "na"}`,
       method: "POST",
@@ -100,10 +100,10 @@ async function mt(t) {
     return console.error("Error during SDK license check:", n), !1;
   }
 }
-const W = "canvasGridMode", ft = M.startup, F = "component-grid-mode", _ = "grid-mode", L = "gjs-drag-grid-spot", Q = `${L}__grid-item`, Z = `${L}__grid-target`, V = `${L}__snapped`, yt = `${L}__container`, ht = () => {
+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 = `
-        .${Q} {
+        .${K} {
             outline: 2px solid ${o};
             background: ${r};
             outline-offset: -2px;
@@ -112,14 +112,14 @@ const W = "canvasGridMode", ft = M.startup, F = "component-grid-mode", _ = "grid
             height: 100%;
             opacity: 0.1;
         }
-        .${V} {
+        .${J} {
             width: 100%;
             height: 100%;
             outline: 2px solid ${o};
             outline-offset: -2px;
             position: absolute;
         }
-        .${Z} {
+        .${X} {
             position: absolute;
             z-index: -1;
             background: ${r};
@@ -129,29 +129,29 @@ const W = "canvasGridMode", ft = M.startup, F = "component-grid-mode", _ = "grid
         }
     `, e.head.appendChild(n);
 };
-function tt(t) {
-  const { editor: e, type: r } = t, o = $t(e, t.component), n = B(e, o.component);
-  if (!vt(e, o, n, r))
+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))
     return {
       target: o,
       container: n,
-      startScroll: O(e).scroll,
+      startScroll: et(e).scroll,
       shadowContainerEl: document.createElement("div"),
       shadowSnappedEl: document.createElement("div"),
       shadowTargetEl: document.createElement("div"),
       spot: e.Canvas.addSpot({
-        type: _,
+        type: A,
         component: n.component
       })
     };
 }
-function et(t) {
+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), wt(n, l), St(r, s, l), bt(o, s), Ct(n, l.el), s.el.style.opacity = "0";
-  const a = c.getSpots().filter((d) => d.type !== _);
+  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 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 nt(t) {
+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;
   if (!i) {
     const p = window.getComputedStyle(r);
@@ -161,9 +161,9 @@ function nt(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: _ }), e.select(c);
+  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);
 }
-function wt(t, {
+function yt(t, {
   rows: e,
   columns: r
 }) {
@@ -172,31 +172,31 @@ function wt(t, {
     o[n] = [];
     for (let i = 0; i < e.length; i++) {
       const s = document.createElement("div");
-      s.className = Q, s.style.gridArea = `${i + 1} / ${n + 1}`, o[n][i] = s, t.appendChild(s);
+      s.className = K, s.style.gridArea = `${i + 1} / ${n + 1}`, o[n][i] = s, t.appendChild(s);
     }
   }
   return o;
 }
-function St(t, e, r) {
-  return t.className = Z, 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 ht(t, e, r) {
+  return t.className = X, t.style.top = `${e.offset.top - r.offset.top}px`, t.style.left = `${e.offset.left - r.offset.left}px`, t.style.width = `${e.offset.width + e.margin.left + e.margin.right}px`, t.style.height = `${e.offset.height + e.margin.top + e.margin.bottom}px`, t;
 }
-function bt(t, e) {
-  const r = rt(e.el, e.computedStyles);
-  return t.className = V, t.style.gridArea = `${r.row.start} / ${r.column.start} / ${r.row.end} / ${r.column.end}`, t;
+function wt(t, e) {
+  const r = nt(e.el, e.computedStyles);
+  return t.className = J, t.style.gridArea = `${r.row.start} / ${r.column.start} / ${r.row.end} / ${r.column.end}`, t;
 }
-function Ct(t, e) {
+function St(t, e) {
   const r = window.getComputedStyle(e);
-  t.className = yt, t.style.position = "relative", t.style.display = r.display, t.style.gap = r.gap, t.style.padding = r.padding, t.style.border = r.border, t.style.gridTemplateColumns = r.gridTemplateColumns, t.style.gridTemplateRows = r.gridTemplateRows;
+  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;
 }
-function ot(t, e) {
+function tt(t, e) {
   if (e) {
     if (Array.isArray(e))
       return [...e].pop();
   } else return [...t.getSelectedAll()].pop();
   return e;
 }
-function $t(t, e) {
-  const r = ot(t, e), o = r.getEl(), n = window.getComputedStyle(o);
+function bt(t, e) {
+  const r = tt(t, e), o = r.getEl(), n = window.getComputedStyle(o);
   return {
     component: r,
     el: o,
@@ -210,7 +210,7 @@ function $t(t, e) {
     computedStyles: n
   };
 }
-function B(t, e) {
+function z(t, e) {
   const r = e.parent(), o = r.getEl(), n = window.getComputedStyle(o);
   return {
     component: r,
@@ -231,7 +231,7 @@ function B(t, e) {
     }
   };
 }
-function P(t, e, r, o, n = 1) {
+function E(t, e, r, o, n = 1) {
   let i = 0;
   for (let s = e; s <= t.length; s++) {
     if (i + (t[s - 1] + o) * n > r)
@@ -240,7 +240,7 @@ function P(t, e, r, o, n = 1) {
   }
   return t.length + 1;
 }
-function O(t) {
+function et(t) {
   const { scrollY: e, scrollX: r } = t.Canvas.getWindow();
   return {
     scroll: {
@@ -249,20 +249,20 @@ function O(t) {
     }
   };
 }
-function vt(t, e, r, o) {
+function Ct(t, e, r, o) {
   const n = (i) => t.em.logWarning(i);
-  return o === "draggable" && e.component.get(o) === !1 ? (n(`[${W}] The element is not ${o}`), !0) : r.computedStyles.display !== "grid" ? (n(`[${W}] The container does not have style display:grid`), !0) : !1;
+  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 N(t, e, r = {}) {
-  const o = ot(t, e), n = o == null ? void 0 : o.parent(), i = n == null ? void 0 : n.getEl();
+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)
     return !1;
   const { enableGrid: s } = r, l = window.getComputedStyle(i).display === "grid";
-  return J(s) ? s({ component: o, parent: n, isParentGrid: l }) : l;
+  return Y(s) ? s({ component: o, parent: n, isParentGrid: l }) : l;
 }
-const Y = (t) => t.split(" ").map((e) => parseFloat(e));
-function rt(t, e) {
-  const r = t.ownerDocument.defaultView, o = e || r.getComputedStyle(t), n = o.gridArea.split("/").some((w) => isNaN(parseInt(w.trim()))), i = {
+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
   };
@@ -278,21 +278,21 @@ function rt(t, e) {
         end: parseInt(o.gridColumnEnd)
       }
     };
-  const s = t.parentElement, l = r.getComputedStyle(s), c = parseFloat(l.columnGap) || 0, p = parseFloat(l.rowGap) || 0, a = Y(l.gridTemplateColumns), d = Y(l.gridTemplateRows), u = parseFloat(l.paddingLeft) || 0, g = parseFloat(l.paddingTop) || 0, h = s.getBoundingClientRect(), S = t.getBoundingClientRect(), f = (w, C, T, R, A) => {
-    let x = 1, E = R + A;
-    for (let G = 0; G < C.length; G++) {
-      const D = C[G], I = E + D;
-      if (w >= E && w < I)
-        return x;
-      E = I + T, x++;
+  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) => {
+    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)
+        return G;
+      T = W + x, G++;
     }
     return -1;
-  }, b = f(S.left, a, c, h.left, u), v = f(S.right - 1, a, c, h.left, u) + 1, m = f(S.top, d, p, h.top, g), y = f(S.bottom - 1, d, p, h.top, g) + 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;
   return {
     ...i,
     row: {
-      start: m,
-      end: y
+      start: y,
+      end: f
     },
     column: {
       start: b,
@@ -300,12 +300,12 @@ function rt(t, e) {
     }
   };
 }
-function Et(t) {
-  t.Commands.add(F, {
+function $t(t) {
+  t.Commands.add(N, {
     stop() {
     },
     run(e, r, o = {}) {
-      const n = tt({ editor: e, component: o.target, type: "draggable" });
+      const n = Q({ editor: e, component: o.target, type: "draggable" });
       if (!n) {
         this.stopCommand();
         return;
@@ -316,7 +316,7 @@ function Et(t) {
         doc: s.el.ownerDocument,
         onStart: () => {
           u = setTimeout(() => {
-            et({
+            Z({
               editor: e,
               shadowTargetEl: p,
               shadowSnappedEl: c,
@@ -324,39 +324,39 @@ function Et(t) {
               spotEl: i.attributes.spotEl,
               target: s,
               container: d
-            }), d = B(e, s.component);
+            }), d = z(e, s.component);
           }, 10);
         },
-        onEnd: (h, S, { cancelled: f }) => {
-          clearTimeout(u), nt({
+        onEnd: (h, g, { cancelled: w }) => {
+          clearTimeout(u), V({
             editor: e,
             shadowSnappedEl: c,
             shadowContainerEl: l,
             target: s,
-            cancelled: f
+            cancelled: w
           }), this.stopCommand(), e.em.set("_cmpDrag", 1);
         },
-        setPosition: ({ x: h, y: S }) => {
-          const { scroll: f } = O(e), { columns: b, rows: v, gap: m, offset: y, padding: w } = d, { offset: C, margin: T } = s, R = C.top - y.top - w.top - T.top + S - a.top + f.top, A = C.left - y.left - w.left - T.left + h - a.left + f.left, x = Math.min(P(b, 1, A, m.column, 0.5), b.length), E = Math.min(P(v, 1, R, m.row, 0.5), v.length), G = Math.min(
-            P(b, x, C.width, m.column) + 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(
+            E(b, G, C.width, y.column) + 1,
             b.length + 1
-          ), D = Math.min(P(v, E, C.height, m.row) + 1, v.length + 1);
-          c.style.gridArea = `${E} / ${x} / ${D} / ${G}`, p.style.top = `${R + w.top}px`, p.style.left = `${A + w.left}px`;
+          ), 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);
     }
   });
 }
-function xt(t, e) {
-  const r = tt({ editor: t, component: e.target, type: "resizable" });
+function vt(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;
   let { container: a } = r, d = "", u;
   return {
-    onStart: (g) => {
-      d = g.target.dataset.gjsHandler || "", u = setTimeout(() => {
-        et({
+    onStart: (m) => {
+      d = m.target.dataset.gjsHandler || "", u = setTimeout(() => {
+        Z({
           editor: t,
           shadowTargetEl: p,
           shadowSnappedEl: c,
@@ -364,64 +364,58 @@ function xt(t, e) {
           spotEl: i.attributes.spotEl,
           target: s,
           container: a
-        }), a = B(t, s.component);
+        }), a = z(t, s.component);
       }, 10), t.trigger("component:resize", { ...s, type: "start" });
     },
-    onEnd: (g, h) => {
-      const { startDim: S, rectDim: f } = h.resizer, b = JSON.stringify(S) === JSON.stringify(f);
-      clearTimeout(u), nt({ editor: t, shadowSnappedEl: c, shadowContainerEl: l, target: s, cancelled: b }), n == null || n(g, h);
+    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);
     },
-    onMove: (g) => {
-      var k;
-      const h = g;
-      if (((k = h.target) == null ? void 0 : k.nodeName) === "I")
-        return;
-      const { scroll: S } = O(t), f = rt(c);
-      let b = 0, v = 0, m = 0, y = 0;
-      const w = s.margin.left, C = s.margin.top, T = s.margin.bottom, R = s.margin.right, { width: A, top: x, left: E, height: G } = s.offset, D = h.clientX, I = h.clientY, $ = {
-        t: x - C,
-        l: E - w,
-        h: G + C + T,
-        w: A + w + R
+    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, $ = {
+        t: S - b,
+        l: C - w,
+        h: x + b + v,
+        w: f + w + y
       };
-      d.startsWith("t") ? ($.t = I - C, $.h = x + G + C + T - I) : d.startsWith("b") && ($.h = I - x + C + T), d.endsWith("l") ? ($.l = D - w, $.w = E + A + w + R - D) : d.endsWith("r") && ($.w = D - E + w + R), d.endsWith("l") && (m = S.left, f.column.start = P(
+      d.endsWith("l") && (g.column.start = E(
         a.columns,
         1,
-        $.l - a.offset.left - m - a.padding.left,
+        $.l - a.offset.left - a.padding.left,
         a.gap.column,
         0.5
-      )), d.startsWith("t") && (b = S.top, f.row.start = P(
+      )), d.startsWith("t") && (g.row.start = E(
         a.rows,
         1,
-        $.t - a.offset.top + b - a.padding.top,
+        $.t - a.offset.top - a.padding.top,
         a.gap.row,
         0.5
-      )), d.endsWith("r") && (y = S.left, f.column.end = Math.max(
-        P(a.columns, f.column.start, $.w - y, a.gap.column, 0.5),
-        f.column.start + 1
-      )), d.startsWith("b") && (v = S.top, f.row.end = Math.max(
-        P(a.rows, f.row.start, $.h + v, a.gap.row, 0.5),
-        f.row.start + 1
-      )), c.style.gridArea = `${f.row.start} / ${f.column.start} / ${f.row.end} / ${f.column.end}`, p.style.width = `${$.w + y + m}px`, p.style.height = `${$.h + v - b}px`, p.style.left = `${$.l - a.offset.left - m}px`, p.style.top = `${$.t - a.offset.top + b}px`, o == null || o(g);
+      )), 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);
     }
   };
 }
-const H = ["px", "%", "em", "rem", "vw", "vh"], Tt = (t, e) => {
+const U = ["px", "%", "em", "rem", "vw", "vh"], Et = (t, e) => {
   const r = t.Styles.getSectors().find((o) => !!o.getProperty(e));
   return {
     sector: r,
     property: r ? r.getProperty(e) : void 0
   };
-}, Rt = (t, e) => Tt(t, e), Gt = (t, { x: e, y: r, mergable: o } = {}) => {
+}, xt = (t, e) => Et(t, e), Tt = (t, { x: e, y: r, mergable: o } = {}) => {
   const n = {
     property: `${t}-x`,
     type: "integer",
-    units: H,
+    units: U,
     ...e
   }, i = {
     property: `${t}-y`,
     type: "integer",
-    units: H,
+    units: U,
     ...r
   };
   return {
@@ -430,10 +424,10 @@ const H = ["px", "%", "em", "rem", "vw", "vh"], Tt = (t, e) => {
     properties: [n, i],
     ...o && {
       fromStyle(s, { name: l, separator: c, property: p }) {
-        const [a, d] = p.getProperties(), [u, g] = (s[l] || "").split(c);
+        const [a, d] = p.getProperties(), [u, m] = (s[l] || "").split(c);
         return {
           [a.getId()]: s[a.getName()] || u || "",
-          [d.getId()]: s[d.getName()] || g || u || ""
+          [d.getId()]: s[d.getName()] || m || u || ""
         };
       },
       toStyle(s, { name: l, property: c }) {
@@ -444,8 +438,8 @@ const H = ["px", "%", "em", "rem", "vw", "vh"], Tt = (t, e) => {
       }
     }
   };
-}, z = { display: ["grid"] };
-function Pt(t = "") {
+}, 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)
     return null;
@@ -458,23 +452,23 @@ function Pt(t = "") {
     max: l
   };
 }
-function At(t = {}) {
+function Gt(t = {}) {
   let e = "", r = "", o = "", n = "";
-  const i = (S) => S.split("/").map((f) => f.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 ? (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]), g === 2 ? (e = a[0], r = a[1]) : g === 1 && (e = a[0]), h === 2 ? (o = d[0], n = d[1]) : h === 1 && (o = d[0]), {
+  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]), {
     columnStart: e,
     columnEnd: r,
     rowStart: o,
     rowEnd: n
   };
 }
-function X(t) {
+function j(t) {
   const { property: e, label: r } = t, o = "1", n = "1fr";
   return {
     property: e,
     label: r,
     type: "composite",
-    requires: z,
+    requires: F,
     generic: !0,
     properties: [
       {
@@ -503,34 +497,34 @@ function X(t) {
       }
     ],
     fromStyle(i, s) {
-      const { name: l, property: c } = s, [p, a, d] = c.getProperties(), u = i[l], g = Pt(u), h = (g == null ? void 0 : g.max) ?? n;
+      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;
       return {
-        [p.id]: (g == null ? void 0 : g.total) ?? o,
-        [a.id]: (g == null ? void 0 : g.min) ?? "",
+        [p.id]: (m == null ? void 0 : m.total) ?? o,
+        [a.id]: (m == null ? void 0 : m.min) ?? "",
         [d.id]: h === n ? "" : h
       };
     },
     toStyle(i, { name: s, property: l }) {
-      const [c, p, a] = l.getProperties(), d = i[c.id], u = i[p.id], g = i[a.id] || n, h = u && g ? `minmax(${u}, ${g})` : g;
+      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;
       return {
         [s]: `repeat(${d || o}, ${h})`
       };
     }
   };
 }
-function Dt(t, e) {
+function Pt(t, e) {
   if (!e.styleableGrid) return;
-  const { property: r, ...o } = Rt(t, "display");
+  const { property: r, ...o } = xt(t, "display");
   if (!r) return;
   const n = r.getOption("grid"), i = o.sector;
   n || r.addOption({ id: "grid", label: "Grid" }), i.addProperty(
-    X({
+    j({
       label: "Columns",
       property: "grid-template-columns"
     }),
     {}
   ), i.addProperty(
-    X({
+    j({
       label: "Rows",
       property: "grid-template-rows"
     }),
@@ -538,8 +532,8 @@ function Dt(t, e) {
   ), i.addProperty(
     {
       id: "grid-gap",
-      requires: z,
-      ...Gt("gap", {
+      requires: F,
+      ...Tt("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
@@ -551,7 +545,7 @@ function Dt(t, e) {
       type: "composite",
       property: "grid-area",
       label: "Grid area",
-      requiresParent: z,
+      requiresParent: F,
       //   detached: true,
       generic: !0,
       properties: [
@@ -581,7 +575,7 @@ function Dt(t, e) {
         }
       ],
       fromStyle(s) {
-        const l = At(s);
+        const l = Gt(s);
         return {
           "grid-column-start": s["grid-column-start"] || l.columnStart,
           "grid-column-end": s["grid-column-end"] || l.columnEnd,
@@ -599,32 +593,33 @@ function Dt(t, e) {
     {}
   );
 }
-const It = function(t, e = {}) {
+const At = 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`;
   let u;
-  Et(t);
-  const g = ({ options: m }) => {
-    N(t, m.target, r) && (t.runCommand(F, { ...m }), m.abort = !0);
-  }, h = ({ options: m }) => {
-    N(t, m.target, r) && Object.assign(m.options, xt(t, m));
-  }, S = () => {
-    const m = o.getSpots({
-      type: _
+  $t(t);
+  const m = ({ options: y }) => {
+    _(t, y.target, r) && (t.runCommand(N, { ...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({
+      type: A
     }).pop();
-    if (!m) return;
-    let y = m.attributes.spotEl;
-    y || (y = document.createElement("div"), y.className = L, m.set({ spotEl: y })), Object.entries(m.getStyle()).forEach(([w, C]) => y.style.setProperty(w, C)), u == null || u.appendChild(y);
-  }, f = ({ spot: m }) => {
-    const y = m.attributes.spotEl;
-    m.type !== _ || !y || u == null || u.removeChild(y);
+    if (!y) return;
+    let f = y.attributes.spotEl;
+    f || (f = document.createElement("div"), f.className = D, y.set({ spotEl: f })), Object.entries(y.getStyle()).forEach(([S, C]) => f.style.setProperty(S, C)), u == null || u.appendChild(f);
+  }, w = ({ spot: y }) => {
+    const f = y.attributes.spotEl;
+    y.type !== A || !f || u == null || u.removeChild(f);
   };
   if (s) {
-    const m = (y) => {
-      const w = J(s) ? s({ component: y }) : s;
-      return typeof w == "boolean" ? w : {
+    const y = (f) => {
+      const S = Y(s) ? s({ component: f }) : s;
+      return typeof S == "boolean" ? S : {
         tl: !1,
         tc: !1,
         tr: !1,
@@ -633,41 +628,41 @@ const It = function(t, e = {}) {
         bl: !1,
         bc: !1,
         br: !1,
-        ...w
+        ...S
       };
     };
-    t.on(p.resizeInit, (y) => {
-      const { component: w } = y;
-      if (N(t, w, r)) {
-        const C = m(w);
-        y.resizable = C;
+    t.on(p.resizeInit, (f) => {
+      const { component: S } = f;
+      if (_(t, S, r)) {
+        const C = y(S);
+        f.resizable = C;
       }
     });
   }
   const b = [
-    [a, g],
+    [a, m],
     [d, h],
-    [l.spot, S],
-    [l.spotRemove, f]
+    [l.spot, g],
+    [l.spotRemove, w]
   ];
-  b.forEach(([m, y]) => {
-    t.on(m, y);
+  b.forEach(([y, f]) => {
+    t.on(y, f);
   }), t.onReady(() => {
-    u = o.getSpotsEl(), ht(), Dt(t, r);
+    u = o.getSpotsEl(), ft(), Pt(t, r);
   });
   const v = () => {
-    delete t.Commands.commands[F], b.forEach(([m, y]) => {
-      t.off(m, y);
+    delete t.Commands.commands[N], b.forEach(([y, f]) => {
+      t.off(y, f);
     });
   };
-  gt({
+  dt({
     editor: t,
     licenseKey: r.licenseKey,
-    plan: ft,
-    pluginName: W,
+    plan: mt,
+    pluginName: L,
     cleanup: v
   });
-}, Mt = ut(It);
+}, Dt = pt(At);
 export {
-  Mt as default
+  Dt as default
 };