@grapesjs/studio-sdk-plugins 1.0.35 → 1.0.36

package/dist/canvasGridMode/index.es.js

@@ -1,8 +1,8 @@
-const H = "app.grapesjs.com", Y = "app-stage.grapesjs.com", nt = "app2.grapesjs.com", rt = "app-stage2.grapesjs.com", W = [
-  H,
-  nt,
+const Y = "app.grapesjs.com", H = "app-stage.grapesjs.com", rt = "app2.grapesjs.com", st = "app-stage2.grapesjs.com", j = [
   Y,
   rt,
+  H,
+  st,
   "localhost",
   "127.0.0.1",
   ".local-credentialless.webcontainer.io",
@@ -11,15 +11,15 @@ const H = "app.grapesjs.com", Y = "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 = ({
+], 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 = () => {
+}) => `${t ? "" : `https://${e ? H : Y}`}/${r ? "platform-api" : "api"}`, ct = () => {
   const t = it() && window.location.hostname;
-  return !!t && (W.includes(t) || W.some((e) => t.endsWith(e)));
+  return !!t && (j.includes(t) || j.some((e) => t.endsWith(e)));
 };
-function K(t) {
+function X(t) {
   return typeof t == "function";
 }
 async function pt({
@@ -30,21 +30,21 @@ async function pt({
   params: o,
   body: i
 }) {
-  const l = `${e || lt({ isDev: !1, isStage: !1 })}${t}`, d = {
+  const a = `${e || lt({ isDev: !1, isStage: !1 })}${t}`, p = {
     method: r,
     headers: {
       "Content-Type": "application/json",
       ...n
     }
   };
-  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();
+  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();
 }
-var G = /* @__PURE__ */ ((t) => (t.free = "free", t.startup = "startup", t.business = "business", t.enterprise = "enterprise", t))(G || {});
-const j = {
+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))(_ || {});
+const W = {
   [G.free]: 0,
   [G.startup]: 10,
   [G.business]: 20,
@@ -54,8 +54,8 @@ function dt(t) {
   const e = t;
   return e.init = (r) => (n) => t(n, r), e;
 }
-const ut = (t) => /* @__PURE__ */ dt(t);
-async function mt({
+const gt = (t) => /* @__PURE__ */ dt(t);
+async function ut({
   editor: t,
   plan: e,
   pluginName: r,
@@ -63,35 +63,48 @@ async function mt({
   onLicenseCheckResponse: o,
   cleanup: i
 }) {
-  let s = "", l = !1;
-  const d = ct(), c = (a) => {
-    console.warn("Cleanup plugin:", r, "Reason:", a), i();
-  }, p = (a = {}) => {
+  let s = "", a;
+  const p = (l) => {
+    console.warn("Cleanup plugin:", r, "Reason:", l), i();
+  }, d = (l = {}) => {
     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");
+    const { error: g, sdkLicense: u } = l, h = (w = l.plan) == null ? void 0 : w.category;
+    if (!(u || l.license) || g)
+      p(g || "Invalid license");
     else if (h) {
-      const b = j[e], v = j[h];
-      b > v && c({ pluginRequiredPlan: e, licensePlan: h });
+      const v = W[e], R = W[h];
+      v > R && p({ pluginRequiredPlan: e, licensePlan: h });
     }
   };
-  t.on(st, (a) => {
-    s = a == null ? void 0 : a.baseApiUrl, l = !0;
-  }), t.on(at, (a) => {
-    o == null || o(a), p(a);
-  }), setTimeout(async () => {
-    if (!l) {
-      if (d) return;
-      if (n) {
-        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);
+  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);
+  };
+  if (!a) {
+    t.onReady(async () => {
+      if (!ct())
+        if (n) {
+          const l = await mt({ licenseKey: n, pluginName: r, baseApiUrl: s });
+          c(l);
+        } else
+          p("The `licenseKey` option not provided");
+    });
+    return;
+  }
+  if (a.licensePlan || a.licenseError) {
+    const l = ft(a);
+    c(l);
+    return;
+  }
+  t.on(at, (l) => c(l));
 }
-async function gt(t) {
+const ft = (t) => ({
+  sdkLicense: t.license,
+  license: t.license,
+  error: t.licenseError,
+  plan: t.licensePlan
+});
+async function mt(t) {
   const { licenseKey: e, pluginName: r, baseApiUrl: n } = t;
   try {
     return (await pt({
@@ -107,10 +120,10 @@ async function gt(t) {
     return console.error("Error during SDK license check:", o), !1;
   }
 }
-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 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 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 = `
-        .${X} {
+        .${K} {
             outline: 2px solid ${n};
             background: ${r};
             outline-offset: -2px;
@@ -119,14 +132,14 @@ const N = "canvasGridMode", ft = G.startup, F = "component-grid-mode", A = "grid
             height: 100%;
             opacity: 0.1;
         }
-        .${J} {
+        .${Q} {
             width: 100%;
             height: 100%;
             outline: 2px solid ${n};
             outline-offset: -2px;
             position: absolute;
         }
-        .${k} {
+        .${J} {
             position: absolute;
             z-index: -1;
             background: ${r};
@@ -136,41 +149,41 @@ const N = "canvasGridMode", ft = G.startup, F = "component-grid-mode", A = "grid
         }
     `, e.head.appendChild(o);
 };
-function Q(t) {
-  const { editor: e, type: r } = t, n = Ct(e, t.component), o = L(e, n.component);
-  if (!vt(e, n, o, r))
+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))
     return {
       target: n,
       container: o,
-      startScroll: et(e).scroll,
+      startScroll: ot(e).scroll,
       shadowContainerEl: document.createElement("div"),
       shadowSnappedEl: document.createElement("div"),
       shadowTargetEl: document.createElement("div"),
       spot: e.Canvas.addSpot({
-        type: A,
+        type: D,
         component: o.component
       })
     };
 }
-function Z(t) {
-  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: d } = o;
+  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`);
+}
+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 c = window.getComputedStyle(r);
-    d.addStyle({
-      "grid-area": c.gridArea,
+    const d = window.getComputedStyle(r);
+    p.addStyle({
+      "grid-area": d.gridArea,
       width: "",
       height: ""
     });
   }
-  o.el.style.opacity = "", n.contains(r) && (n == null || n.removeChild(r)), e.getModel().runDefault({ preserveSelected: 1 }), s.stopAutoscroll(), s.getBody().classList.remove(`${l}is__grabbing`), s.removeSpots({ type: A }), e.select(d);
+  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);
 }
-function wt(t, {
+function bt(t, {
   rows: e,
   columns: r
 }) {
@@ -179,31 +192,31 @@ function wt(t, {
     n[o] = [];
     for (let i = 0; i < e.length; i++) {
       const s = document.createElement("div");
-      s.className = X, s.style.gridArea = `${i + 1} / ${o + 1}`, n[o][i] = s, t.appendChild(s);
+      s.className = K, s.style.gridArea = `${i + 1} / ${o + 1}`, n[o][i] = s, t.appendChild(s);
     }
   }
   return n;
 }
-function St(t, e, r) {
-  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 vt(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) {
+  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) {
   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 = 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;
 }
-function tt(t, e) {
+function et(t, e) {
   if (e) {
     if (Array.isArray(e))
       return [...e].pop();
   } else return [...t.getSelectedAll()].pop();
   return e;
 }
-function Ct(t, e) {
-  const r = tt(t, e), n = r.getEl(), o = window.getComputedStyle(n);
+function Rt(t, e) {
+  const r = et(t, e), n = r.getEl(), o = window.getComputedStyle(n);
   return {
     component: r,
     el: n,
@@ -217,7 +230,7 @@ function Ct(t, e) {
     computedStyles: o
   };
 }
-function L(t, e) {
+function O(t, e) {
   const r = e.parent(), n = r.getEl(), o = window.getComputedStyle(n);
   return {
     component: r,
@@ -238,7 +251,7 @@ function L(t, e) {
     }
   };
 }
-function E(t, e, r, n, o = 1) {
+function T(t, e, r, n, o = 1) {
   let i = 0;
   for (let s = e; s <= t.length; s++) {
     if (i + (t[s - 1] + n) * o > r)
@@ -247,7 +260,7 @@ function E(t, e, r, n, o = 1) {
   }
   return t.length + 1;
 }
-function et(t) {
+function ot(t) {
   const { scrollY: e, scrollX: r } = t.Canvas.getWindow();
   return {
     scroll: {
@@ -256,20 +269,20 @@ function et(t) {
     }
   };
 }
-function vt(t, e, r, n) {
+function Tt(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 n = tt(t, e), o = n == null ? void 0 : n.parent(), i = o == null ? void 0 : o.getEl();
+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)
     return !1;
-  const { enableGrid: s } = r, l = window.getComputedStyle(i).display === "grid";
-  return K(s) ? s({ component: n, parent: o, isParentGrid: l }) : l;
+  const { enableGrid: s } = r, a = window.getComputedStyle(i).display === "grid";
+  return X(s) ? s({ component: n, parent: o, isParentGrid: a }) : a;
 }
-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 = {
+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 = {
     isComputed: o,
     raw: n.gridArea
   };
@@ -285,144 +298,144 @@ function ot(t, e) {
         end: parseInt(n.gridColumnEnd)
       }
     };
-  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 P;
-      T = O + x, P++;
+  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 -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;
+  }, 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;
   return {
     ...i,
     row: {
       start: y,
-      end: g
+      end: f
     },
     column: {
-      start: b,
-      end: v
+      start: v,
+      end: R
     }
   };
 }
-function Et(t) {
+function xt(t) {
   t.Commands.add(F, {
     stop() {
     },
     run(e, r, n = {}) {
-      const o = Q({ editor: e, component: n.target, type: "draggable" });
+      const o = Z({ editor: e, component: n.target, type: "draggable" });
       if (!o) {
         this.stopCommand();
         return;
       }
-      const { spot: i, target: s, shadowContainerEl: l, shadowSnappedEl: d, shadowTargetEl: c, startScroll: p } = o;
-      let { container: a } = o, u;
+      const { spot: i, target: s, shadowContainerEl: a, shadowSnappedEl: p, shadowTargetEl: d, startScroll: c } = o;
+      let { container: l } = o, g;
       new e.Utils.Dragger({
         doc: s.el.ownerDocument,
         onStart: () => {
-          u = setTimeout(() => {
-            Z({
+          g = setTimeout(() => {
+            V({
               editor: e,
-              shadowTargetEl: c,
-              shadowSnappedEl: d,
-              shadowContainerEl: l,
+              shadowTargetEl: d,
+              shadowSnappedEl: p,
+              shadowContainerEl: a,
               spotEl: i.attributes.spotEl,
               target: s,
-              container: a
-            }), a = L(e, s.component);
+              container: l
+            }), l = O(e, s.component);
           }, 10);
         },
-        onEnd: (h, f, { cancelled: w }) => {
-          clearTimeout(u), V({
+        onEnd: (h, m, { cancelled: w }) => {
+          clearTimeout(g), tt({
             editor: e,
-            shadowSnappedEl: d,
-            shadowContainerEl: l,
+            shadowSnappedEl: p,
+            shadowContainerEl: a,
             target: s,
             cancelled: w
           }), this.stopCommand(), e.em.set("_cmpDrag", 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, $.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`;
+        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`;
         }
       }).start(n.event);
     }
   });
 }
-function xt(t, e) {
-  const r = Q({ editor: t, component: e.component, type: "resizable" });
+function Pt(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: l, shadowSnappedEl: d, shadowTargetEl: c } = r;
-  let { container: p } = r, a = "", u;
+  const { onMove: n, onEnd: o } = e.options || {}, { spot: i, target: s, shadowContainerEl: a, shadowSnappedEl: p, shadowTargetEl: d } = r;
+  let { container: c } = r, l = "", g;
   return {
-    onStart: (m) => {
-      a = m.target.dataset.gjsHandler || "", u = setTimeout(() => {
-        Z({
+    onStart: (u) => {
+      l = u.target.dataset.gjsHandler || "", g = setTimeout(() => {
+        V({
           editor: t,
-          shadowTargetEl: c,
-          shadowSnappedEl: d,
-          shadowContainerEl: l,
+          shadowTargetEl: d,
+          shadowSnappedEl: p,
+          shadowContainerEl: a,
           spotEl: i.attributes.spotEl,
           target: s,
-          container: p
-        }), p = L(t, s.component);
+          container: c
+        }), c = O(t, s.component);
       }, 10), t.trigger("component:resize", { ...s, type: "start" });
     },
-    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);
+    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);
     },
-    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,
+    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 + b + v,
-        w: g + w + y
+        h: x + v + R,
+        w: f + w + y
       };
-      a.endsWith("l") && (f.column.start = E(
-        p.columns,
+      l.endsWith("l") && (m.column.start = T(
+        c.columns,
         1,
-        C.l - p.offset.left - p.padding.left,
-        p.gap.column,
+        S.l - c.offset.left - c.padding.left,
+        c.gap.column,
         0.5
-      )), a.startsWith("t") && (f.row.start = E(
-        p.rows,
+      )), l.startsWith("t") && (m.row.start = T(
+        c.rows,
         1,
-        C.t - p.offset.top - p.padding.top,
-        p.gap.row,
+        S.t - c.offset.top - c.padding.top,
+        c.gap.row,
         0.5
-      )), 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);
+      )), 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);
     }
   };
 }
-const U = ["px", "%", "em", "rem", "vw", "vh"], Tt = (t, e) => {
+const k = ["px", "%", "em", "rem", "vw", "vh"], Gt = (t, e) => {
   const r = t.Styles.getSectors().find((n) => !!n.getProperty(e));
   return {
     sector: r,
     property: r ? r.getProperty(e) : void 0
   };
-}, Gt = (t, e) => Tt(t, e), Pt = (t, { x: e, y: r, mergable: n } = {}) => {
+}, Et = (t, e) => Gt(t, e), At = (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 {
@@ -430,39 +443,39 @@ const U = ["px", "%", "em", "rem", "vw", "vh"], Tt = (t, e) => {
     type: "composite",
     properties: [o, i],
     ...n && {
-      fromStyle(s, { name: l, separator: d, property: c }) {
-        const [p, a] = c.getProperties(), [u, m] = (s[l] || "").split(d);
+      fromStyle(s, { name: a, separator: p, property: d }) {
+        const [c, l] = d.getProperties(), [g, u] = (s[a] || "").split(p);
         return {
-          [p.getId()]: s[p.getName()] || u || "",
-          [a.getId()]: s[a.getName()] || m || u || ""
+          [c.getId()]: s[c.getName()] || g || "",
+          [l.getId()]: s[l.getName()] || u || g || ""
         };
       },
-      toStyle(s, { name: l, property: d }) {
-        const [c, p] = d.getProperties(), a = s[c.getId()], u = s[p.getId()];
+      toStyle(s, { name: a, property: p }) {
+        const [d, c] = p.getProperties(), l = s[d.getId()], g = s[c.getId()];
         return {
-          [l]: a === u ? a : `${a} ${u}`
+          [a]: l === g ? l : `${l} ${g}`
         };
       }
     }
   };
-}, z = { display: ["grid"] };
-function Rt(t = "") {
+}, B = { display: ["grid"] };
+function Dt(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 d = i.match(r);
-  return d && (s = d[1], l = d[2]), {
+  let s = i, a = i;
+  const p = i.match(r);
+  return p && (s = p[1], a = p[2]), {
     total: o,
-    min: s === l ? "" : s,
-    max: l
+    min: s === a ? "" : s,
+    max: a
   };
 }
-function At(t = {}) {
+function Mt(t = {}) {
   let e = "", r = "", n = "", o = "";
-  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]), {
+  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]), {
     columnStart: e,
     columnEnd: r,
     rowStart: n,
@@ -475,7 +488,7 @@ function q(t) {
     property: e,
     label: r,
     type: "composite",
-    requires: z,
+    requires: B,
     generic: !0,
     properties: [
       {
@@ -504,24 +517,24 @@ function q(t) {
       }
     ],
     fromStyle(i, s) {
-      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;
+      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;
       return {
-        [c.id]: (m == null ? void 0 : m.total) ?? n,
-        [p.id]: (m == null ? void 0 : m.min) ?? "",
-        [a.id]: h === o ? "" : h
+        [d.id]: (u == null ? void 0 : u.total) ?? n,
+        [c.id]: (u == null ? void 0 : u.min) ?? "",
+        [l.id]: h === o ? "" : h
       };
     },
-    toStyle(i, { name: s, property: l }) {
-      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;
+    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;
       return {
-        [s]: `repeat(${a || n}, ${h})`
+        [s]: `repeat(${l || n}, ${h})`
       };
     }
   };
 }
-function Dt(t, e) {
+function Ct(t, e) {
   if (!e.styleableGrid) return;
-  const { property: r, ...n } = Gt(t, "display");
+  const { property: r, ...n } = Et(t, "display");
   if (!r) return;
   const o = r.getOption("grid"), i = n.sector;
   o || r.addOption({ id: "grid", label: "Grid" }), i.addProperty(
@@ -539,8 +552,8 @@ function Dt(t, e) {
   ), i.addProperty(
     {
       id: "grid-gap",
-      requires: z,
-      ...Pt("gap", {
+      requires: B,
+      ...At("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
@@ -552,7 +565,7 @@ function Dt(t, e) {
       type: "composite",
       property: "grid-area",
       label: "Grid area",
-      requiresParent: z,
+      requiresParent: B,
       //   detached: true,
       generic: !0,
       properties: [
@@ -582,51 +595,51 @@ function Dt(t, e) {
         }
       ],
       fromStyle(s) {
-        const l = At(s);
+        const a = Mt(s);
         return {
-          "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
+          "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
         };
       },
-      toStyle(s, { name: l }) {
-        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";
+      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";
         return {
-          [l]: `${d} / ${p} / ${c} / ${a}`
+          [a]: `${p} / ${c} / ${d} / ${l}`
         };
       }
     },
     {}
   );
 }
-const Mt = function(t, e = {}) {
+const It = function(t, e = {}) {
   const r = {
     itemResizable: !0,
     ...e
-  }, { 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 m = ({ options: y }) => {
-    _(t, y.target, r) && (t.runCommand(F, { ...y }), y.abort = !0);
+  }, { 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`;
+  let g;
+  xt(t);
+  const u = ({ options: y }) => {
+    L(t, y.target, r) && (t.runCommand(F, { ...y }), y.abort = !0);
   }, h = (y) => {
-    const { options: g } = y;
-    _(t, g.component, r) && (g.options = Object.assign(g.options || {}, xt(t, g)));
-  }, f = () => {
+    const { options: f } = y;
+    L(t, f.component, r) && (f.options = Object.assign(f.options || {}, Pt(t, f)));
+  }, m = () => {
     const y = n.getSpots({
-      type: A
+      type: D
     }).pop();
     if (!y) return;
-    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);
+    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 }) => {
-    const g = y.attributes.spotEl;
-    y.type !== A || !g || u == null || u.removeChild(g);
+    const f = y.attributes.spotEl;
+    y.type !== D || !f || g == null || g.removeChild(f);
   };
   if (s) {
-    const y = (g) => {
-      const S = K(s) ? s({ component: g }) : s;
-      return typeof S == "boolean" ? S : {
+    const y = (f) => {
+      const b = X(s) ? s({ component: f }) : s;
+      return typeof b == "boolean" ? b : {
         tl: !1,
         tc: !1,
         tr: !1,
@@ -635,41 +648,41 @@ const Mt = function(t, e = {}) {
         bl: !1,
         bc: !1,
         br: !1,
-        ...S
+        ...b
       };
     };
-    t.on(c.resizeInit, (g) => {
-      const { component: S } = g;
-      if (_(t, S, r)) {
-        const $ = y(S);
-        g.resizable = $;
+    t.on(d.resizeInit, (f) => {
+      const { component: b } = f;
+      if (L(t, b, r)) {
+        const $ = y(b);
+        f.resizable = $;
       }
     });
   }
-  const b = [
-    [p, m],
-    [a, h],
-    [l.spot, f],
-    [l.spotRemove, w]
+  const v = [
+    [c, u],
+    [l, h],
+    [a.spot, m],
+    [a.spotRemove, w]
   ];
-  b.forEach(([y, g]) => {
-    t.on(y, g);
+  v.forEach(([y, f]) => {
+    t.on(y, f);
   }), t.onReady(() => {
-    u = n.getSpotsEl(), ht(), Dt(t, r);
+    g = n.getSpotsEl(), wt(), Ct(t, r);
   });
-  const v = () => {
-    delete t.Commands.commands[F], b.forEach(([y, g]) => {
-      t.off(y, g);
+  const R = () => {
+    delete t.Commands.commands[F], v.forEach(([y, f]) => {
+      t.off(y, f);
     });
   };
-  mt({
+  ut({
     editor: t,
     licenseKey: r.licenseKey,
-    plan: ft,
+    plan: yt,
     pluginName: N,
-    cleanup: v
+    cleanup: R
   });
-}, It = ut(Mt);
+}, Lt = gt(It);
 export {
-  It as default
+  Lt as default
 };