@grapesjs/studio-sdk-plugins 1.0.33-rc.1 → 1.0.33

package/dist/canvasGridMode/index.es.js

@@ -1,7 +1,7 @@
-const q = "app.grapesjs.com", H = "app-stage.grapesjs.com", nt = "app2.grapesjs.com", rt = "app-stage2.grapesjs.com", W = [
-  q,
-  nt,
+const H = "app.grapesjs.com", Y = "app-stage.grapesjs.com", nt = "app2.grapesjs.com", rt = "app-stage2.grapesjs.com", W = [
   H,
+  nt,
+  Y,
   rt,
   "localhost",
   "127.0.0.1",
@@ -11,11 +11,15 @@ const q = "app.grapesjs.com", H = "app-stage.grapesjs.com", nt = "app2.grapesjs.
   // 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 ? H : q}`}/api`, ct = () => {
+], st = "license:check:start", at = "license:check:end", it = () => typeof window < "u", lt = ({
+  isDev: t,
+  isStage: e,
+  isPlatform: r
+}) => `${t ? "" : `https://${e ? Y : H}`}/${r ? "platform-api" : "api"}`, ct = () => {
   const t = it() && window.location.hostname;
   return !!t && (W.includes(t) || W.some((e) => t.endsWith(e)));
 };
-function Y(t) {
+function K(t) {
   return typeof t == "function";
 }
 async function pt({
@@ -26,67 +30,68 @@ async function pt({
   params: o,
   body: i
 }) {
-  const l = `${e || lt({ isDev: !1, isStage: !1 })}${t}`, c = {
+  const l = `${e || lt({ isDev: !1, isStage: !1 })}${t}`, d = {
     method: r,
     headers: {
       "Content-Type": "application/json",
       ...n
     }
   };
-  i && (c.body = JSON.stringify(i));
-  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();
+  i && (d.body = JSON.stringify(i));
+  const c = o ? new URLSearchParams(o).toString() : "", p = c ? `?${c}` : "", a = await fetch(`${l}${p}`, d);
+  if (!a.ok)
+    throw new Error(`HTTP error! status: ${a.status}`);
+  return a.json();
 }
-var R = /* @__PURE__ */ ((t) => (t.free = "free", t.startup = "startup", t.business = "business", t.enterprise = "enterprise", t))(R || {});
+var G = /* @__PURE__ */ ((t) => (t.free = "free", t.startup = "startup", t.business = "business", t.enterprise = "enterprise", t))(G || {});
 const j = {
-  [R.free]: 0,
-  [R.startup]: 10,
-  [R.business]: 20,
-  [R.enterprise]: 30
+  [G.free]: 0,
+  [G.startup]: 10,
+  [G.business]: 20,
+  [G.enterprise]: 30
 };
 function dt(t) {
   const e = t;
   return e.init = (r) => (n) => t(n, r), e;
 }
 const ut = (t) => /* @__PURE__ */ dt(t);
-async function gt({
+async function mt({
   editor: t,
   plan: e,
   pluginName: r,
   licenseKey: n,
-  cleanup: o
+  onLicenseCheckResponse: o,
+  cleanup: i
 }) {
-  let i = "", s = !1;
-  const l = ct(), c = (a) => {
-    console.warn("Cleanup plugin:", r, "Reason:", a), o();
+  let s = "", l = !1;
+  const d = ct(), c = (a) => {
+    console.warn("Cleanup plugin:", r, "Reason:", a), i();
   }, p = (a = {}) => {
-    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 (g) {
-      const w = j[e], b = j[g];
-      w > b && c({ pluginRequiredPlan: e, licensePlan: g });
+    var w;
+    const { error: u, sdkLicense: m } = a, h = (w = a.plan) == null ? void 0 : w.category;
+    if (!(m || a.license) || u)
+      c(u || "Invalid license");
+    else if (h) {
+      const b = j[e], v = j[h];
+      b > v && c({ pluginRequiredPlan: e, licensePlan: h });
     }
   };
   t.on(st, (a) => {
-    i = a == null ? void 0 : a.baseApiUrl, s = !0;
+    s = a == null ? void 0 : a.baseApiUrl, l = !0;
   }), t.on(at, (a) => {
-    p(a);
+    o == null || o(a), p(a);
   }), setTimeout(async () => {
-    if (!s) {
-      if (l) return;
+    if (!l) {
+      if (d) return;
       if (n) {
-        const a = await mt({ licenseKey: n, pluginName: r, baseApiUrl: i });
-        a && p(a);
+        const a = await gt({ licenseKey: n, pluginName: r, baseApiUrl: s });
+        o == null || o(a), a && p(a);
       } else
         c("The `licenseKey` option not provided");
     }
   }, 2e3);
 }
-async function mt(t) {
+async function gt(t) {
   const { licenseKey: e, pluginName: r, baseApiUrl: n } = t;
   try {
     return (await pt({
@@ -102,10 +107,10 @@ async function mt(t) {
     return console.error("Error during SDK license check:", o), !1;
   }
 }
-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 N = "canvasGridMode", ft = G.startup, F = "component-grid-mode", A = "grid-mode", D = "gjs-drag-grid-spot", X = `${D}__grid-item`, k = `${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} {
+        .${X} {
             outline: 2px solid ${n};
             background: ${r};
             outline-offset: -2px;
@@ -121,7 +126,7 @@ const N = "canvasGridMode", ft = R.startup, L = "component-grid-mode", A = "grid
             outline-offset: -2px;
             position: absolute;
         }
-        .${X} {
+        .${k} {
             position: absolute;
             z-index: -1;
             background: ${r};
@@ -132,7 +137,7 @@ const N = "canvasGridMode", ft = R.startup, L = "component-grid-mode", A = "grid
     `, e.head.appendChild(o);
 };
 function Q(t) {
-  const { editor: e, type: r } = t, n = $t(e, t.component), o = z(e, n.component);
+  const { editor: e, type: r } = t, n = Ct(e, t.component), o = L(e, n.component);
   if (!vt(e, n, o, r))
     return {
       target: n,
@@ -148,22 +153,22 @@ function Q(t) {
     };
 }
 function Z(t) {
-  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`);
+  const { editor: e, shadowTargetEl: r, shadowSnappedEl: n, shadowContainerEl: o, spotEl: i, target: s, container: l } = t, { Canvas: d } = e, c = 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), $t(o, l.el), s.el.style.opacity = "0";
+  const p = d.getSpots().filter((a) => a.type !== A);
+  e.em.stopDefault({ preserveSelected: !0 }), d.removeSpots(p), d.startAutoscroll(), d.getBody().classList.add(`${c}is__grabbing`);
 }
 function V(t) {
-  const { editor: e, shadowSnappedEl: r, shadowContainerEl: n, target: o, cancelled: i } = t, { Canvas: s } = e, l = e.config.stylePrefix, { component: c } = o;
+  const { editor: e, shadowSnappedEl: r, shadowContainerEl: n, target: o, cancelled: i } = t, { Canvas: s } = e, l = e.config.stylePrefix, { component: d } = o;
   if (!i) {
-    const p = window.getComputedStyle(r);
-    c.addStyle({
-      "grid-area": p.gridArea,
+    const c = window.getComputedStyle(r);
+    d.addStyle({
+      "grid-area": c.gridArea,
       width: "",
       height: ""
     });
   }
-  o.el.style.opacity = "", n.contains(r) && (n == null || n.removeChild(r)), e.getModel().runDefault({ preserveSelected: 1 }), s.stopAutoscroll(), s.getBody().classList.remove(`${l}is__grabbing`), s.removeSpots({ type: 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(d);
 }
 function wt(t, {
   rows: e,
@@ -174,19 +179,19 @@ function wt(t, {
     n[o] = [];
     for (let i = 0; i < e.length; i++) {
       const s = document.createElement("div");
-      s.className = K, s.style.gridArea = `${i + 1} / ${o + 1}`, n[o][i] = s, t.appendChild(s);
+      s.className = X, s.style.gridArea = `${i + 1} / ${o + 1}`, n[o][i] = s, t.appendChild(s);
     }
   }
   return n;
 }
 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;
+  return t.className = k, 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 = 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 Ct(t, e) {
+function $t(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;
 }
@@ -197,7 +202,7 @@ function tt(t, e) {
   } else return [...t.getSelectedAll()].pop();
   return e;
 }
-function $t(t, e) {
+function Ct(t, e) {
   const r = tt(t, e), n = r.getEl(), o = window.getComputedStyle(n);
   return {
     component: r,
@@ -212,7 +217,7 @@ function $t(t, e) {
     computedStyles: o
   };
 }
-function z(t, e) {
+function L(t, e) {
   const r = e.parent(), n = r.getEl(), o = window.getComputedStyle(n);
   return {
     component: r,
@@ -260,7 +265,7 @@ function _(t, e, r = {}) {
   if (!o || !i)
     return !1;
   const { enableGrid: s } = r, l = window.getComputedStyle(i).display === "grid";
-  return Y(s) ? s({ component: n, parent: o, isParentGrid: l }) : l;
+  return K(s) ? s({ component: n, parent: o, isParentGrid: l }) : l;
 }
 const B = (t) => t.split(" ").map((e) => parseFloat(e));
 function ot(t, e) {
@@ -280,21 +285,21 @@ function ot(t, e) {
         end: parseInt(n.gridColumnEnd)
       }
     };
-  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], O = T + I;
+  const s = t.parentElement, l = r.getComputedStyle(s), d = parseFloat(l.columnGap) || 0, c = parseFloat(l.rowGap) || 0, p = B(l.gridTemplateColumns), a = B(l.gridTemplateRows), u = parseFloat(l.paddingLeft) || 0, m = parseFloat(l.paddingTop) || 0, h = s.getBoundingClientRect(), f = t.getBoundingClientRect(), w = (S, $, x, C, M) => {
+    let P = 1, T = C + M;
+    for (let R = 0; R < $.length; R++) {
+      const I = $[R], O = T + I;
       if (S >= T && S < O)
-        return G;
-      T = O + x, G++;
+        return P;
+      T = O + x, P++;
     }
     return -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;
+  }, b = w(f.left, p, d, h.left, u), v = w(f.right - 1, p, d, h.left, u) + 1, y = w(f.top, a, c, h.top, m), g = w(f.bottom - 1, a, c, h.top, m) + 1;
   return {
     ...i,
     row: {
       start: y,
-      end: f
+      end: g
     },
     column: {
       start: b,
@@ -303,7 +308,7 @@ function ot(t, e) {
   };
 }
 function Et(t) {
-  t.Commands.add(L, {
+  t.Commands.add(F, {
     stop() {
     },
     run(e, r, n = {}) {
@@ -312,38 +317,38 @@ function Et(t) {
         this.stopCommand();
         return;
       }
-      const { spot: i, target: s, shadowContainerEl: l, shadowSnappedEl: c, shadowTargetEl: p, startScroll: a } = o;
-      let { container: d } = o, u;
+      const { spot: i, target: s, shadowContainerEl: l, shadowSnappedEl: d, shadowTargetEl: c, startScroll: p } = o;
+      let { container: a } = o, u;
       new e.Utils.Dragger({
         doc: s.el.ownerDocument,
         onStart: () => {
           u = setTimeout(() => {
             Z({
               editor: e,
-              shadowTargetEl: p,
-              shadowSnappedEl: c,
+              shadowTargetEl: c,
+              shadowSnappedEl: d,
               shadowContainerEl: l,
               spotEl: i.attributes.spotEl,
               target: s,
-              container: d
-            }), d = z(e, s.component);
+              container: a
+            }), a = L(e, s.component);
           }, 10);
         },
-        onEnd: (h, m, { cancelled: w }) => {
+        onEnd: (h, f, { cancelled: w }) => {
           clearTimeout(u), V({
             editor: e,
-            shadowSnappedEl: c,
+            shadowSnappedEl: d,
             shadowContainerEl: l,
             target: s,
             cancelled: w
           }), this.stopCommand(), e.em.set("_cmpDrag", 1);
         },
-        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,
+        setPosition: ({ x: h, y: f }) => {
+          const { scroll: w } = et(e), { columns: b, rows: v, gap: y, offset: g, padding: S } = a, { offset: $, margin: x } = s, C = $.top - g.top - S.top - x.top + f - p.top + w.top, M = $.left - g.left - S.left - x.left + h - p.left + w.left, P = Math.min(E(b, 1, M, y.column, 0.5), b.length), T = Math.min(E(v, 1, C, y.row, 0.5), v.length), R = Math.min(
+            E(b, P, $.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`;
+          ), I = Math.min(E(v, T, $.height, y.row) + 1, v.length + 1);
+          d.style.gridArea = `${T} / ${P} / ${I} / ${R}`, c.style.top = `${C + S.top}px`, c.style.left = `${M + S.left}px`;
         }
       }).start(n.event);
     }
@@ -353,71 +358,71 @@ function xt(t, e) {
   const r = Q({ editor: t, component: e.component, type: "resizable" });
   if (!r)
     return;
-  const { onMove: n, onEnd: o } = e.options || {}, { spot: i, target: s, shadowContainerEl: l, shadowSnappedEl: c, shadowTargetEl: p } = r;
-  let { container: a } = r, d = "", u;
+  const { onMove: n, onEnd: o } = e.options || {}, { spot: i, target: s, shadowContainerEl: l, shadowSnappedEl: d, shadowTargetEl: c } = r;
+  let { container: p } = r, a = "", u;
   return {
-    onStart: (g) => {
-      d = g.target.dataset.gjsHandler || "", u = setTimeout(() => {
+    onStart: (m) => {
+      a = m.target.dataset.gjsHandler || "", u = setTimeout(() => {
         Z({
           editor: t,
-          shadowTargetEl: p,
-          shadowSnappedEl: c,
+          shadowTargetEl: c,
+          shadowSnappedEl: d,
           shadowContainerEl: l,
           spotEl: i.attributes.spotEl,
           target: s,
-          container: a
-        }), a = z(t, s.component);
+          container: p
+        }), p = L(t, s.component);
       }, 10), t.trigger("component:resize", { ...s, type: "start" });
     },
-    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);
+    onEnd: (m, h) => {
+      const { startDim: f, rectDim: w } = h.resizer, b = JSON.stringify(f) === JSON.stringify(w);
+      clearTimeout(u), V({ editor: t, shadowSnappedEl: d, shadowContainerEl: l, target: s, cancelled: b }), o == null || o(m, h);
     },
-    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, $ = {
+    onMove: (m, h) => {
+      const f = ot(d), w = s.margin.left, b = s.margin.top, v = s.margin.bottom, y = s.margin.right, { w: g, t: S, l: $, h: x } = h.resizer.rectDim, C = {
         t: S - b,
-        l: C - w,
+        l: $ - w,
         h: x + b + v,
-        w: f + w + y
+        w: g + w + y
       };
-      d.endsWith("l") && (m.column.start = E(
-        a.columns,
+      a.endsWith("l") && (f.column.start = E(
+        p.columns,
         1,
-        $.l - a.offset.left - a.padding.left,
-        a.gap.column,
+        C.l - p.offset.left - p.padding.left,
+        p.gap.column,
         0.5
-      )), d.startsWith("t") && (m.row.start = E(
-        a.rows,
+      )), a.startsWith("t") && (f.row.start = E(
+        p.rows,
         1,
-        $.t - a.offset.top - a.padding.top,
-        a.gap.row,
+        C.t - p.offset.top - p.padding.top,
+        p.gap.row,
         0.5
-      )), 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);
+      )), a.endsWith("r") && (f.column.end = Math.max(
+        E(p.columns, f.column.start, C.w, p.gap.column, 0.5),
+        f.column.start + 1
+      )), a.startsWith("b") && (f.row.end = Math.max(
+        E(p.rows, f.row.start, C.h, p.gap.row, 0.5),
+        f.row.start + 1
+      )), d.style.gridArea = `${f.row.start} / ${f.column.start} / ${f.row.end} / ${f.column.end}`, c.style.width = `${C.w}px`, c.style.height = `${C.h}px`, c.style.left = `${C.l - p.offset.left}px`, c.style.top = `${C.t - p.offset.top}px`, n == null || n(m, h);
     }
   };
 }
-const k = ["px", "%", "em", "rem", "vw", "vh"], Tt = (t, e) => {
+const U = ["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
   };
-}, Rt = (t, e) => Tt(t, e), Gt = (t, { x: e, y: r, mergable: n } = {}) => {
+}, Gt = (t, e) => Tt(t, e), Pt = (t, { x: e, y: r, mergable: n } = {}) => {
   const o = {
     property: `${t}-x`,
     type: "integer",
-    units: k,
+    units: U,
     ...e
   }, i = {
     property: `${t}-y`,
     type: "integer",
-    units: k,
+    units: U,
     ...r
   };
   return {
@@ -425,30 +430,30 @@ const k = ["px", "%", "em", "rem", "vw", "vh"], Tt = (t, e) => {
     type: "composite",
     properties: [o, i],
     ...n && {
-      fromStyle(s, { name: l, separator: c, property: p }) {
-        const [a, d] = p.getProperties(), [u, g] = (s[l] || "").split(c);
+      fromStyle(s, { name: l, separator: d, property: c }) {
+        const [p, a] = c.getProperties(), [u, m] = (s[l] || "").split(d);
         return {
-          [a.getId()]: s[a.getName()] || u || "",
-          [d.getId()]: s[d.getName()] || g || u || ""
+          [p.getId()]: s[p.getName()] || u || "",
+          [a.getId()]: s[a.getName()] || m || u || ""
         };
       },
-      toStyle(s, { name: l, property: c }) {
-        const [p, a] = c.getProperties(), d = s[p.getId()], u = s[a.getId()];
+      toStyle(s, { name: l, property: d }) {
+        const [c, p] = d.getProperties(), a = s[c.getId()], u = s[p.getId()];
         return {
-          [l]: d === u ? d : `${d} ${u}`
+          [l]: a === u ? a : `${a} ${u}`
         };
       }
     }
   };
-}, F = { display: ["grid"] };
-function Pt(t = "") {
+}, z = { display: ["grid"] };
+function Rt(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, l = i;
-  const c = i.match(r);
-  return c && (s = c[1], l = c[2]), {
+  const d = i.match(r);
+  return d && (s = d[1], l = d[2]), {
     total: o,
     min: s === l ? "" : s,
     max: l
@@ -456,21 +461,21 @@ function Pt(t = "") {
 }
 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]), {
+  const i = (f) => f.split("/").map((w) => w.trim()).filter(Boolean), s = t["grid-area"] || "", l = t["grid-column"] || "", d = t["grid-row"] || "", c = i(s), p = i(l), a = i(d), u = c.length, m = p.length, h = a.length;
+  return u === 4 ? (n = c[0], e = c[1], o = c[2], r = c[3]) : u === 3 ? (n = c[0], e = c[1], o = c[2]) : u === 2 ? (n = c[0], e = c[1]) : u === 1 && (n = c[0]), m === 2 ? (e = p[0], r = p[1]) : m === 1 && (e = p[0]), h === 2 ? (n = a[0], o = a[1]) : h === 1 && (n = a[0]), {
     columnStart: e,
     columnEnd: r,
     rowStart: n,
     rowEnd: o
   };
 }
-function U(t) {
+function q(t) {
   const { property: e, label: r } = t, n = "1", o = "1fr";
   return {
     property: e,
     label: r,
     type: "composite",
-    requires: F,
+    requires: z,
     generic: !0,
     properties: [
       {
@@ -499,34 +504,34 @@ function U(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) ?? o;
+      const { name: l, property: d } = s, [c, p, a] = d.getProperties(), u = i[l], m = Rt(u), h = (m == null ? void 0 : m.max) ?? o;
       return {
-        [p.id]: (g == null ? void 0 : g.total) ?? n,
-        [a.id]: (g == null ? void 0 : g.min) ?? "",
-        [d.id]: h === o ? "" : h
+        [c.id]: (m == null ? void 0 : m.total) ?? n,
+        [p.id]: (m == null ? void 0 : m.min) ?? "",
+        [a.id]: h === o ? "" : 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] || o, h = u && g ? `minmax(${u}, ${g})` : g;
+      const [d, c, p] = l.getProperties(), a = i[d.id], u = i[c.id], m = i[p.id] || o, h = u && m ? `minmax(${u}, ${m})` : m;
       return {
-        [s]: `repeat(${d || n}, ${h})`
+        [s]: `repeat(${a || n}, ${h})`
       };
     }
   };
 }
 function Dt(t, e) {
   if (!e.styleableGrid) return;
-  const { property: r, ...n } = Rt(t, "display");
+  const { property: r, ...n } = Gt(t, "display");
   if (!r) return;
   const o = r.getOption("grid"), i = n.sector;
   o || r.addOption({ id: "grid", label: "Grid" }), i.addProperty(
-    U({
+    q({
       label: "Columns",
       property: "grid-template-columns"
     }),
     {}
   ), i.addProperty(
-    U({
+    q({
       label: "Rows",
       property: "grid-template-rows"
     }),
@@ -534,8 +539,8 @@ function Dt(t, e) {
   ), i.addProperty(
     {
       id: "grid-gap",
-      requires: F,
-      ...Gt("gap", {
+      requires: z,
+      ...Pt("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
@@ -547,7 +552,7 @@ function Dt(t, e) {
       type: "composite",
       property: "grid-area",
       label: "Grid area",
-      requiresParent: F,
+      requiresParent: z,
       //   detached: true,
       generic: !0,
       properties: [
@@ -586,9 +591,9 @@ function Dt(t, e) {
         };
       },
       toStyle(s, { name: l }) {
-        const c = s["grid-row-start"] || "auto", p = s["grid-row-end"] || "auto", a = s["grid-column-start"] || "auto", d = s["grid-column-end"] || "auto";
+        const d = s["grid-row-start"] || "auto", c = s["grid-row-end"] || "auto", p = s["grid-column-start"] || "auto", a = s["grid-column-end"] || "auto";
         return {
-          [l]: `${c} / ${a} / ${p} / ${d}`
+          [l]: `${d} / ${p} / ${c} / ${a}`
         };
       }
     },
@@ -599,28 +604,28 @@ const Mt = function(t, e = {}) {
   const r = {
     itemResizable: !0,
     ...e
-  }, { 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`;
+  }, { Canvas: n, Commands: o, Components: i } = t, { itemResizable: s } = r, l = n.events, d = o.events, c = i.events, p = `${d.runBeforeCommand}tlb-move`, a = `${d.runBeforeCommand}resize`;
   let u;
   Et(t);
-  const g = ({ options: y }) => {
-    _(t, y.target, r) && (t.runCommand(L, { ...y }), y.abort = !0);
+  const m = ({ options: y }) => {
+    _(t, y.target, r) && (t.runCommand(F, { ...y }), y.abort = !0);
   }, h = (y) => {
-    const { options: f } = y;
-    _(t, f.component, r) && (f.options = Object.assign(f.options || {}, xt(t, f)));
-  }, m = () => {
+    const { options: g } = y;
+    _(t, g.component, r) && (g.options = Object.assign(g.options || {}, xt(t, g)));
+  }, f = () => {
     const y = n.getSpots({
       type: A
     }).pop();
     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);
+    let g = y.attributes.spotEl;
+    g || (g = document.createElement("div"), g.className = D, y.set({ spotEl: g })), Object.entries(y.getStyle()).forEach(([S, $]) => g.style.setProperty(S, $)), u == null || u.appendChild(g);
   }, w = ({ spot: y }) => {
-    const f = y.attributes.spotEl;
-    y.type !== A || !f || u == null || u.removeChild(f);
+    const g = y.attributes.spotEl;
+    y.type !== A || !g || u == null || u.removeChild(g);
   };
   if (s) {
-    const y = (f) => {
-      const S = Y(s) ? s({ component: f }) : s;
+    const y = (g) => {
+      const S = K(s) ? s({ component: g }) : s;
       return typeof S == "boolean" ? S : {
         tl: !1,
         tc: !1,
@@ -633,31 +638,31 @@ const Mt = function(t, e = {}) {
         ...S
       };
     };
-    t.on(p.resizeInit, (f) => {
-      const { component: S } = f;
+    t.on(c.resizeInit, (g) => {
+      const { component: S } = g;
       if (_(t, S, r)) {
-        const C = y(S);
-        f.resizable = C;
+        const $ = y(S);
+        g.resizable = $;
       }
     });
   }
   const b = [
-    [a, g],
-    [d, h],
-    [l.spot, m],
+    [p, m],
+    [a, h],
+    [l.spot, f],
     [l.spotRemove, w]
   ];
-  b.forEach(([y, f]) => {
-    t.on(y, f);
+  b.forEach(([y, g]) => {
+    t.on(y, g);
   }), t.onReady(() => {
     u = n.getSpotsEl(), ht(), Dt(t, r);
   });
   const v = () => {
-    delete t.Commands.commands[L], b.forEach(([y, f]) => {
-      t.off(y, f);
+    delete t.Commands.commands[F], b.forEach(([y, g]) => {
+      t.off(y, g);
     });
   };
-  gt({
+  mt({
     editor: t,
     licenseKey: r.licenseKey,
     plan: ft,