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

package/dist/flexComponent/index.es.js

@@ -1,8 +1,8 @@
-const ue = "app.grapesjs.com", de = "app-stage.grapesjs.com", Pe = "app2.grapesjs.com", me = "app-stage2.grapesjs.com", ae = [
+const ue = "app.grapesjs.com", de = "app-stage.grapesjs.com", me = "app2.grapesjs.com", ze = "app-stage2.grapesjs.com", ae = [
   ue,
-  Pe,
-  de,
   me,
+  de,
+  ze,
   "localhost",
   "127.0.0.1",
   ".local-credentialless.webcontainer.io",
@@ -15,12 +15,12 @@ const ue = "app.grapesjs.com", de = "app-stage.grapesjs.com", Pe = "app2.grapesj
   // For Claude mcp app
   ".web-sandbox.oaiusercontent.com"
   // For OpenAI mcp app
-], ze = "license:check:end", Se = () => typeof window < "u", xe = ({
+], Se = "license:check:end", xe = () => typeof window < "u", ve = ({
   isDev: t,
   isStage: e,
   isPlatform: s
-}) => `${t ? "" : `https://${e ? de : ue}`}/${s ? "platform-api" : "api"}`, ve = () => {
-  if (!Se()) return "";
+}) => `${t ? "" : `https://${e ? de : ue}`}/${s ? "platform-api" : "api"}`, we = () => {
+  if (!xe()) return "";
   const { hostname: t } = window.location;
   if (t) return t;
   try {
@@ -28,14 +28,14 @@ const ue = "app.grapesjs.com", de = "app-stage.grapesjs.com", Pe = "app2.grapesj
   } catch {
     return "";
   }
-}, we = () => {
-  const t = ve();
+}, Re = () => {
+  const t = we();
   return !!t && (ae.includes(t) || ae.some((e) => t.endsWith(e)));
 };
-function Re(t) {
+function Ge(t) {
   return typeof t == "function";
 }
-async function Ge({
+async function Ce({
   path: t,
   baseApiUrl: e,
   method: s = "GET",
@@ -43,32 +43,35 @@ async function Ge({
   params: a,
   body: i
 }) {
-  const l = `${e || xe({ isDev: !1, isStage: !1 })}${t}`, p = {
+  const c = `${e || ve({ isDev: !1, isStage: !1 })}${t}`, l = {
     method: s,
     headers: {
       "Content-Type": "application/json",
       ...n
     }
   };
-  i && (p.body = JSON.stringify(i));
-  const g = a ? new URLSearchParams(a).toString() : "", f = g ? `?${g}` : "", r = await fetch(`${l}${f}`, p);
+  i && (l.body = JSON.stringify(i));
+  const g = a ? new URLSearchParams(a).toString() : "", f = g ? `?${g}` : "", r = await fetch(`${c}${f}`, l);
   if (!r.ok)
     throw new Error(`HTTP error! status: ${r.status}`);
   return r.json();
 }
-var L = /* @__PURE__ */ ((t) => (t.free = "free", t.startup = "startup", t.business = "business", t.enterprise = "enterprise", t))(L || {}), W = /* @__PURE__ */ ((t) => (t.toastAdd = "studio:toastAdd", t.toastRemove = "studio:toastRemove", t.dialogOpen = "studio:dialogOpen", t.dialogClose = "studio:dialogClose", t.dialogExportCode = "studio:dialogExportCode", t.dialogImportCode = "studio:dialogImportCode", t.openEditCode = "studio:openEditCode", t.sidebarLeftSet = "studio:sidebarLeft:set", t.sidebarLeftGet = "studio:sidebarLeft:get", t.sidebarLeftToggle = "studio:sidebarLeft:toggle", t.sidebarRightSet = "studio:sidebarRight:set", t.sidebarRightGet = "studio:sidebarRight:get", t.sidebarRightToggle = "studio:sidebarRight:toggle", t.sidebarTopSet = "studio:sidebarTop:set", t.sidebarTopGet = "studio:sidebarTop:get", t.sidebarTopToggle = "studio:sidebarTop:toggle", t.sidebarBottomSet = "studio:sidebarBottom:set", t.sidebarBottomGet = "studio:sidebarBottom:get", t.sidebarBottomToggle = "studio:sidebarBottom:toggle", t.symbolAdd = "studio:symbolAdd", t.symbolDetach = "studio:symbolDetach", t.symbolOverride = "studio:symbolOverride", t.symbolPropagateStyles = "studio:propagateStyles", t.getPagesConfig = "studio:getPagesConfig", t.setPagesConfig = "studio:setPagesConfig", t.getPageSettings = "studio:getPageSettings", t.setPageSettings = "studio:setPageSettings", t.clearPage = "studio:clearPage", t.projectFiles = "studio:projectFiles", t.validateCode = "studio:validateCode", t.canvasReload = "studio:canvasReload", t.getBlocksPanel = "studio:getBlocksPanel", t.setBlocksPanel = "studio:setBlocksPanel", t.getStateContextMenu = "studio:getStateContextMenu", t.setStateContextMenu = "studio:setStateContextMenu", t.contextMenuComponent = "studio:contextMenuComponent", t.layoutAdd = "studio:layoutAdd", t.layoutRemove = "studio:layoutRemove", t.layoutToggle = "studio:layoutToggle", t.layoutUpdate = "studio:layoutUpdate", t.layoutGet = "studio:layoutGet", t.layoutConfigGet = "studio:layoutConfigGet", t.layoutConfigSet = "studio:layoutConfigSet", t.layoutComponentAdd = "studio:layoutComponentAdd", t.layoutComponentGet = "studio:layoutComponentGet", t.layoutComponentRemove = "studio:layoutComponentRemove", t.layoutComponentRender = "studio:layoutComponentRender", t.getStateTheme = "studio:getStateTheme", t.setStateTheme = "studio:setStateTheme", t.settings = "studio:settings", t.assetProviderGet = "studio:assetProviderGet", t.assetProviderAdd = "studio:assetProviderAdd", t.assetProviderRemove = "studio:assetProviderRemove", t.fontGet = "studio:fontGet", t.fontAdd = "studio:fontAdd", t.fontRemove = "studio:fontRemove", t.fontManagerOpen = "studio:fontManagerOpen", t.menuFontLoad = "studio:menuFontLoad", t.toggleStateDataSource = "studio:toggleStateDataSource", t.getStateDataSource = "studio:getStateDataSource", t.dataSourceSetGlobalData = "studio:dataSourceSetGlobalData", t.dataSourceSetImporter = "studio:dataSourceSetImporter", t.dataSourceSetExporter = "studio:dataSourceSetExporter", t.setDragAbsolute = "studio:setDragAbsolute", t))(W || {}), ge = /* @__PURE__ */ ((t) => (t.web = "web", t.email = "email", t.document = "document", t.react = "react", t))(ge || {});
+var L = /* @__PURE__ */ ((t) => (t.free = "free", t.startup = "startup", t.business = "business", t.enterprise = "enterprise", t))(L || {}), W = /* @__PURE__ */ ((t) => (t.toastAdd = "studio:toastAdd", t.toastRemove = "studio:toastRemove", t.dialogOpen = "studio:dialogOpen", t.dialogClose = "studio:dialogClose", t.dialogExportCode = "studio:dialogExportCode", t.dialogImportCode = "studio:dialogImportCode", t.openEditCode = "studio:openEditCode", t.openBlocks = "studio:openBlocks", t.appendComponent = "studio:appendComponent", 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))(W || {}), ge = /* @__PURE__ */ ((t) => (t.web = "web", t.email = "email", t.document = "document", t.react = "react", t))(ge || {});
 const ie = {
   [L.free]: 0,
   [L.startup]: 10,
   [L.business]: 20,
   [L.enterprise]: 30
 };
-function Ce(t) {
-  const e = t;
-  return e.init = (s) => (n) => t(n, s), e;
+function Ie(t, e) {
+  const s = t;
+  return s.init = (n) => {
+    const a = (i) => t(i, n);
+    return a.__gjsPluginId = e, a;
+  }, s;
 }
-const Ie = (t) => /* @__PURE__ */ Ce(t);
-async function Te({
+const Te = (t, e) => /* @__PURE__ */ Ie(t, e);
+async function Ee({
   editor: t,
   plan: e,
   pluginName: s,
@@ -76,51 +79,51 @@ async function Te({
   onLicenseCheckResponse: a,
   cleanup: i
 }) {
-  let o = "", l;
-  const p = (r) => {
-    console.warn("Cleanup plugin:", s, "Reason:", r), i();
+  let o = "", c;
+  const l = (r) => {
+    console.warn("Cleanup plugin:", s, "Reason:", r), i(t, s);
   }, g = (r = {}) => {
     var v;
     const { error: h, sdkLicense: I } = r, b = (v = r.plan) == null ? void 0 : v.category;
     if (!(I || r.license) || h)
-      p(h || "Invalid license");
+      l(h || "Invalid license");
     else if (b) {
       const G = ie[e], m = ie[b];
-      G > m && p({ pluginRequiredPlan: e, licensePlan: b });
+      G > m && l({ pluginRequiredPlan: e, licensePlan: b });
     }
   };
-  t.Commands.has(W.settings) && (l = t.runCommand(W.settings), o = (l == null ? void 0 : l.baseUrl) || "");
+  t.Commands.has(W.settings) && (c = t.runCommand(W.settings), o = (c == null ? void 0 : c.baseUrl) || "");
   const f = (r) => {
     a == null || a(r), r && g(r);
   };
-  if (!l) {
+  if (!c) {
     t.onReady(async () => {
-      if (!we())
+      if (!Re())
         if (n) {
-          const r = await Ae({ licenseKey: n, pluginName: s, baseApiUrl: o });
+          const r = await Le({ licenseKey: n, pluginName: s, baseApiUrl: o });
           f(r);
         } else
-          p("The `licenseKey` option not provided");
+          l("The `licenseKey` option not provided");
     });
     return;
   }
-  if (l.licensePlan || l.licenseError) {
-    const r = Ee(l);
+  if (c.licensePlan || c.licenseError) {
+    const r = Ae(c);
     f(r);
     return;
   }
-  t.on(ze, (r) => f(r));
+  t.on(Se, (r) => f(r));
 }
-const Ee = (t) => ({
+const Ae = (t) => ({
   sdkLicense: t.license,
   license: t.license,
   error: t.licenseError,
   plan: t.licensePlan
 });
-async function Ae(t) {
+async function Le(t) {
   const { licenseKey: e, pluginName: s, baseApiUrl: n } = t;
   try {
-    return (await Ge({
+    return (await Ce({
       baseApiUrl: n,
       path: `/sdk/${e || "na"}`,
       method: "POST",
@@ -136,7 +139,7 @@ async function Ae(t) {
 const he = (t) => (e) => {
   var s;
   return ((s = e.getAttribute) == null ? void 0 : s.call(e, se)) === t;
-}, Le = (...t) => (e) => t.some((s) => e.is(s)), Me = (...t) => (e, s) => t.some((n) => s.is(n)), fe = "gjs-plg-", se = "data-type-role", D = class D {
+}, Me = (...t) => (e) => t.some((s) => e.is(s)), $e = (...t) => (e, s) => t.some((n) => s.is(n)), fe = "gjs-plg-", se = "data-type-role", D = class D {
   constructor(e) {
     this.config = e;
   }
@@ -198,7 +201,7 @@ const U = class U {
 };
 U.CSS_FLEX_DIRECTION = "flex-direction";
 let q = U;
-const N = class N {
+const B = class B {
   constructor(e) {
     this.config = e;
   }
@@ -206,7 +209,7 @@ const N = class N {
     var n;
     if ((n = this.config) != null && n.getSize) return this.config.getSize(e);
     const s = e.componentColumn;
-    if (s.is(N.MJML_COLUMN_TYPE)) {
+    if (s.is(B.MJML_COLUMN_TYPE)) {
       const i = s.getAttributes().width;
       if (i && (i.includes("%") || !isNaN(parseFloat(i))))
         return parseFloat(i);
@@ -221,12 +224,12 @@ const N = class N {
       this.config.setSize(e);
     else {
       const { componentColumn: n, sizeValue: a, partial: i } = e;
-      n.is(N.MJML_COLUMN_TYPE) && n.addAttributes({ width: `${parseFloat(a)}%` }, { partial: i });
+      n.is(B.MJML_COLUMN_TYPE) && n.addAttributes({ width: `${parseFloat(a)}%` }, { partial: i });
     }
   }
 };
-N.MJML_COLUMN_TYPE = "mj-column";
-let Z = N;
+B.MJML_COLUMN_TYPE = "mj-column";
+let Z = B;
 const X = class X {
   constructor(e) {
     this.config = e;
@@ -252,7 +255,7 @@ const X = class X {
 };
 X.MJML_SECTION_TYPE = "mj-section";
 let Q = X;
-class $e {
+class He {
   constructor(e) {
     this.config = e;
   }
@@ -263,8 +266,8 @@ class $e {
     if (!a) return 0;
     let i = a;
     if (a.tagName !== "TABLE") {
-      const l = a.querySelectorAll("table");
-      l.length && (i = l[0]);
+      const c = a.querySelectorAll("table");
+      c.length && (i = c[0]);
     }
     return n ? i.clientHeight : i.clientWidth;
   }
@@ -285,7 +288,7 @@ class M {
     return this.handlerCache.has(s) || ($(e) ? this.handlerCache.set(s, {
       sizeHandler: new Z(e),
       gapHandler: new Q(e),
-      parentSizeHandler: new $e(e)
+      parentSizeHandler: new He(e)
     }) : this.handlerCache.set(s, {
       sizeHandler: new K(e),
       gapHandler: new J(e),
@@ -300,15 +303,15 @@ const oe = (t) => {
   t.style.display = "none";
 }, re = (t) => {
   t.style.display = "block";
-}, H = (t) => +parseFloat(`${t}`).toFixed(2), $ = (t) => t.projectType === ge.email, He = (t) => t ? ["top", "bottom"] : ["left", "right"], Ve = (t) => {
+}, H = (t) => +parseFloat(`${t}`).toFixed(2), $ = (t) => t.projectType === ge.email, Ve = (t) => t ? ["top", "bottom"] : ["left", "right"], De = (t) => {
   const e = t.parent();
   return e ? e.components().models.indexOf(t) === 0 : !1;
-}, De = (t) => {
+}, je = (t) => {
   const e = t.parent();
   if (!e) return !1;
   const s = e.components().models;
   return s.indexOf(t) === s.length - 1;
-}, je = (t) => {
+}, Be = (t) => {
   const e = t.parent();
   if (!e) return !1;
   const s = e.components().models;
@@ -316,23 +319,29 @@ const oe = (t) => {
 }, Ne = (t, e, s, n) => {
   const i = t + (s ? e === "top" ? -1 : e === "bottom" ? 1 : 0 : e === "left" ? -1 : e === "right" ? 1 : 0);
   return i >= 0 && i < n ? i : -1;
-}, O = (t) => t === "top" || t === "bottom", Be = (t, e) => !!(Ve(t) && (e === "left" || e === "top") || De(t) && (e === "right" || e === "bottom")), Fe = (t) => {
+}, O = (t) => t === "top" || t === "bottom", _e = (t, e) => !!(De(t) && (e === "left" || e === "top") || je(t) && (e === "right" || e === "bottom")), Fe = (t) => {
   const e = t.parent();
   return e ? e.components().models.length > 1 : !1;
 }, le = (t, e) => t === "right" || t === "bottom" ? e > 0 : e < 0, ne = (t, e, s = !1) => {
-  const n = !s, a = t.getEl();
-  if (!a)
-    return n ? 0 : "";
-  const o = window.getComputedStyle(a)[e] || "";
+  const n = !s, a = n ? 0 : "", i = t.getEl();
+  let o;
+  try {
+    o = i ? window.getComputedStyle(i) : void 0;
+  } catch {
+    o = void 0;
+  }
+  if (!o)
+    return a;
+  const c = o[e] || "";
   if (n) {
     let l;
-    return typeof o == "string" ? (l = parseFloat(o.replace(/[^-\d.]/g, "")), isNaN(l) && (l = 0)) : l = Number(o) || 0, l;
+    return typeof c == "string" ? (l = parseFloat(c.replace(/[^-\d.]/g, "")), isNaN(l) && (l = 0)) : l = Number(c) || 0, l;
   }
-  return o;
+  return c;
 }, ce = (t, e, s) => {
   const n = ee({ componentRow: t, isVertical: e }, s), a = t.components().models;
   return n * (a.length - 1);
-}, B = (t, e) => T(e).parentSizeHandler.isLayoutVertical({ componentRow: t }), F = (t, e) => T(e).sizeHandler.getSize(t), ee = (t, e) => {
+}, N = (t, e) => T(e).parentSizeHandler.isLayoutVertical({ componentRow: t }), _ = (t, e) => T(e).sizeHandler.getSize(t), ee = (t, e) => {
   if (e != null && e.disableGapHandler) return 0;
   const { gapHandler: s, parentSizeHandler: n } = T(e);
   if (!s.isGapSupported()) return 0;
@@ -341,19 +350,19 @@ const oe = (t) => {
 }, te = (t, e) => T(e).parentSizeHandler.getParentSize(t), V = (t, e) => {
   T(e).sizeHandler.setSize(t);
 }, ye = (t, e) => {
-  const s = F(t, e);
+  const s = _(t, e);
   V({ ...t, sizeValue: `${s}%`, partial: !1 }, e);
 }, be = (t, e) => {
   if (e != null && e.disableGapHandler) return;
   const { gapHandler: s } = T(e);
   s.isGapSupported() && s.setGap(t);
-}, _e = (t, e) => {
+}, Oe = (t, e) => {
   const s = t.getStyle().gap;
   if (!s) return;
-  const n = t.components().models, a = { componentRow: t, isVertical: B(t, e) };
+  const n = t.components().models, a = { componentRow: t, isVertical: N(t, e) };
   n.map((i) => ye({ ...a, componentColumn: i }, e)), be({ ...a, gapValue: String(s), partial: !1 }, e);
 };
-function Oe(t, e) {
+function ke(t, e) {
   const { Blocks: s } = t, { typeColumn: n, typeRow: a, blocks: i } = e;
   if (i === !1 || $(e)) return;
   const o = (r) => ({
@@ -362,36 +371,36 @@ function Oe(t, e) {
       type: n,
       style: { "flex-basis": `${h}%` }
     }))
-  }), l = (r) => `<div class="gs-block-item__flex-row" style="display: flex; height: 1.75rem; width: 100%; flex-wrap: nowrap; gap: 0.5rem;">
+  }), c = (r) => `<div class="gs-block-item__flex-row" style="display: flex; height: 1.75rem; width: 100%; flex-wrap: nowrap; gap: 0.5rem;">
       ${r.map((h) => `<div style="flex-basis: ${h}%; border-color: currentColor; border-width: 2px; border-radius: 0.12rem;"></div>`).join("")}
-    </div>`, p = (r, h) => ({
+    </div>`, l = (r, h) => ({
     id: `flex-row-${h.join("-")}`,
     label: r,
     category: "Layout",
     select: !0,
     full: !0,
     attributes: { class: "gs-block-item__flex gs-utl-w-full" },
-    media: l(h),
+    media: c(h),
     content: o(h)
   }), g = [
-    p("1 Column", [100]),
-    p("2 Columns 50/50", [50, 50]),
-    p("2 Columns 25/75", [25, 75]),
-    p("2 Columns 75/25", [75, 25]),
-    p("3 Columns", [33.33, 33.33, 33.33]),
-    p("3 Columns 50/25/25", [50, 25, 25]),
-    p("3 Columns 25/50/25", [25, 50, 25]),
-    p("3 Columns 25/25/50", [25, 25, 50]),
-    p("4 Columns", [25, 25, 25, 25]),
-    p("5 Columns", [20, 20, 20, 20, 20])
-  ], f = Re(i) ? i({ blocks: g }) : g;
+    l("1 Column", [100]),
+    l("2 Columns 50/50", [50, 50]),
+    l("2 Columns 25/75", [25, 75]),
+    l("2 Columns 75/25", [75, 25]),
+    l("3 Columns", [33.33, 33.33, 33.33]),
+    l("3 Columns 50/25/25", [50, 25, 25]),
+    l("3 Columns 25/50/25", [25, 50, 25]),
+    l("3 Columns 25/25/50", [25, 25, 50]),
+    l("4 Columns", [25, 25, 25, 25]),
+    l("5 Columns", [20, 20, 20, 20, 20])
+  ], f = Ge(i) ? i({ blocks: g }) : g;
   return f.forEach((r) => s.add(r.id, r)), () => {
     f.forEach((r) => s.remove(r.id));
   };
 }
-const ke = (t, e) => {
-  const { Components: s } = t, { typeRow: n, typeColumn: a, extendTypeColumn: i } = e, o = `${fe}${a}`, p = !!a && !!s.getType(a) && !i;
-  if (!(!a || p || $(e)))
+const Ue = (t, e) => {
+  const { Components: s } = t, { typeRow: n, typeColumn: a, extendTypeColumn: i } = e, o = `${fe}${a}`, l = !!a && !!s.getType(a) && !i;
+  if (!(!a || l || $(e)))
     return s.addType(a, {
       isComponent: he(a),
       model: {
@@ -401,7 +410,7 @@ const ke = (t, e) => {
           emptyState: !0,
           classes: o,
           icon: '<svg viewBox="0 0 24 24"><path d="M14.5 2.3A1.8 1.8 0 0 0 12.7 4v16c0 1 .8 1.8 1.8 1.8h3a1.8 1.8 0 0 0 1.8-1.8V4a1.8 1.8 0 0 0-1.8-1.8zm-8 0A1.8 1.8 0 0 0 4.7 4v16c0 1 .8 1.8 1.8 1.8h3a1.8 1.8 0 0 0 1.8-1.8V4a1.8 1.8 0 0 0-1.8-1.8z"/></svg>',
-          draggable: Me(n),
+          draggable: $e(n),
           attributes: { [se]: a },
           styles: `
           .${o} {
@@ -413,9 +422,9 @@ const ke = (t, e) => {
     }), () => {
       s.removeType(a);
     };
-}, Ue = (t, e) => {
-  const { Components: s } = t, { typeRow: n, typeColumn: a, extendTypeRow: i } = e, o = `${fe}${n}`, p = !!n && !!s.getType(n) && !i;
-  if (!(!n || p || $(e)))
+}, Xe = (t, e) => {
+  const { Components: s } = t, { typeRow: n, typeColumn: a, extendTypeRow: i } = e, o = `${fe}${n}`, l = !!n && !!s.getType(n) && !i;
+  if (!(!n || l || $(e)))
     return s.addType(n, {
       isComponent: he(n),
       model: {
@@ -425,7 +434,7 @@ const ke = (t, e) => {
           icon: '<svg viewBox="0 0 24 24"><path d="M4 4.8a1.8 1.8 0 0 0-1.8 1.7v3c0 1 .8 1.8 1.8 1.8h16a1.8 1.8 0 0 0 1.8-1.8v-3A1.8 1.8 0 0 0 20 4.7zm0 8a1.8 1.8 0 0 0-1.8 1.7v3c0 1 .8 1.8 1.8 1.8h16a1.8 1.8 0 0 0 1.8-1.8v-3a1.8 1.8 0 0 0-1.8-1.8z"/></svg>',
           emptyState: { styleIn: "width: 100%" },
           attributes: { [se]: n },
-          droppable: Le(a),
+          droppable: Me(a),
           traits: [
             // {
             //   type: 'number',
@@ -483,7 +492,7 @@ const ke = (t, e) => {
     }), () => {
       s.removeType(n);
     };
-}, Xe = "flexComponent", Ye = L.startup;
+}, Pe = "flexComponent", Ye = L.startup;
 class We {
   constructor() {
     this.resizableChildTypes = /* @__PURE__ */ new Set(), this.gapAdjustableParentTypes = /* @__PURE__ */ new Set(), this.typeRelationships = /* @__PURE__ */ new Map();
@@ -524,12 +533,12 @@ class Ke {
     const o = e.parent();
     if (!o || !this.registry.isValidRelationship(o, e)) return;
     i.snapEnabled = o.get("snap") ?? a.snapEnabled, i.snapDivisions = o.get("snap-divisions") ?? a.snapDivisions ?? 12;
-    const l = o.components().models, p = l.findIndex((h) => h.cid === e.cid), g = B(o, a), f = Ne(p, s, g, l.length);
+    const c = o.components().models, l = c.findIndex((h) => h.cid === e.cid), g = N(o, a), f = Ne(l, s, g, c.length);
     f !== -1 && (i.adjacentIdx = f);
     const r = { componentColumn: e, componentRow: o, isVertical: g };
-    if (i.startPercent = F(r, a), typeof i.adjacentIdx < "u") {
-      const h = l[i.adjacentIdx];
-      i.neighborStartPercent = F({ ...r, componentColumn: h }, a);
+    if (i.startPercent = _(r, a), typeof i.adjacentIdx < "u") {
+      const h = c[i.adjacentIdx];
+      i.neighborStartPercent = _({ ...r, componentColumn: h }, a);
     }
   }
   updateResizeByDelta(e, s, n) {
@@ -537,26 +546,26 @@ class Ke {
     !a.resizing || !i || (a.snapEnabled ? this.updateSnapResize(e, s, n) : this.updateContinuesResize(e, s, n));
   }
   finishResize(e) {
-    const s = e.parent(), n = s == null ? void 0 : s.components().models, a = { componentRow: s, isVertical: !!s && B(s, this.opts) };
+    const s = e.parent(), n = s == null ? void 0 : s.components().models, a = { componentRow: s, isVertical: !!s && N(s, this.opts) };
     n == null || n.forEach((i) => ye({ ...a, componentColumn: i }, this.opts)), this.clearState(e);
   }
   updateContinuesResize(e, s, n) {
     const a = this.getState(e), i = e.parent(), { opts: o } = this;
     if (!i) return;
-    const l = o.minItemPercent ?? 0, p = O(s), g = te({ componentRow: i, isVertical: p }, o), f = ce(i, p, this.opts), h = 100 - f / g * 100, I = n / (g - f) * h, { startPercent: b = 0, neighborStartPercent: x = 0 } = a, v = { componentRow: i, isVertical: p, componentColumn: e, partial: !0 }, G = le(s, n) ? b + Math.abs(I) : b - Math.abs(I);
+    const c = o.minItemPercent ?? 0, l = O(s), g = te({ componentRow: i, isVertical: l }, o), f = ce(i, l, this.opts), h = 100 - f / g * 100, I = n / (g - f) * h, { startPercent: b = 0, neighborStartPercent: x = 0 } = a, v = { componentRow: i, isVertical: l, componentColumn: e, partial: !0 }, G = le(s, n) ? b + Math.abs(I) : b - Math.abs(I);
     if (typeof a.adjacentIdx < "u") {
-      const m = i.components().models[a.adjacentIdx], w = b + x, z = w - l, c = Math.min(z, Math.max(l, G)), u = w - c;
-      V({ ...v, sizeValue: `${H(c)}%` }, o), V(
+      const m = i.components().models[a.adjacentIdx], w = b + x, z = w - c, p = Math.min(z, Math.max(c, G)), u = w - p;
+      V({ ...v, sizeValue: `${H(p)}%` }, o), V(
         { ...v, componentColumn: m, sizeValue: `${H(u)}%` },
         o
       );
     } else {
-      const m = Math.max(l, Math.min(h, G));
+      const m = Math.max(c, Math.min(h, G));
       V({ ...v, sizeValue: `${H(m)}%` }, o);
     }
   }
   updateSnapResize(e, s, n) {
-    const a = this.getState(e), i = e.parent(), o = O(s), l = te({ componentRow: i, isVertical: o }, this.opts), p = ce(i, o, this.opts), g = l - p, f = n / g * 100, r = le(s, n), { startPercent: h = 0, snapDivisions: I = 12 } = a, b = r ? h + Math.abs(f) : h - Math.abs(f), x = 100 / I, v = Math.floor(b / x) * x, G = Math.ceil(b / x) * x, m = Math.abs(G - b), w = Math.abs(b - v), z = x * 0.2, S = m < w ? G : v;
+    const a = this.getState(e), i = e.parent(), o = O(s), c = te({ componentRow: i, isVertical: o }, this.opts), l = ce(i, o, this.opts), g = c - l, f = n / g * 100, r = le(s, n), { startPercent: h = 0, snapDivisions: I = 12 } = a, b = r ? h + Math.abs(f) : h - Math.abs(f), x = 100 / I, v = Math.floor(b / x) * x, G = Math.ceil(b / x) * x, m = Math.abs(G - b), w = Math.abs(b - v), z = x * 0.2, S = m < w ? G : v;
     if (S > 0 && S < 100 && (m < z || w < z) && a.lastSnappedPercent !== S) {
       a.lastSnappedPercent = S;
       let y = Math.abs(S - h) / 100 * g;
@@ -570,20 +579,20 @@ class Je {
   }
   updateGapByDelta(e, s, n, a) {
     if (!this.registry.isGapAdjustableParent(e)) return;
-    const { opts: i } = this, o = Math.max(0, n + s), l = te({ componentRow: e, isVertical: a }, i), p = o / l * 100, g = e.components().models, f = g.length - 1, r = { componentRow: e, isVertical: a }, h = g.reduce(
-      (z, S) => z + F({ ...r, componentColumn: S }, i),
+    const { opts: i } = this, o = Math.max(0, n + s), c = te({ componentRow: e, isVertical: a }, i), l = o / c * 100, g = e.components().models, f = g.length - 1, r = { componentRow: e, isVertical: a }, h = g.reduce(
+      (z, S) => z + _({ ...r, componentColumn: S }, i),
       0
-    ), b = 100 - p * f, x = i.minItemPercent || 5;
+    ), b = 100 - l * f, x = i.minItemPercent || 5;
     if (b < x * g.length)
       return;
-    const G = 100 - f * p, m = h - G, w = { componentRow: e, isVertical: a, partial: !0 };
+    const G = 100 - f * l, m = h - G, w = { componentRow: e, isVertical: a, partial: !0 };
     g.map((z) => {
-      const S = F({ ...r, componentColumn: z }, i), c = S - S / h * m;
-      V({ ...w, componentColumn: z, sizeValue: `${H(c)}%` }, i);
-    }), be({ ...w, gapValue: `${H(p)}%` }, i);
+      const S = _({ ...r, componentColumn: z }, i), p = S - S / h * m;
+      V({ ...w, componentColumn: z, sizeValue: `${H(p)}%` }, i);
+    }), be({ ...w, gapValue: `${H(l)}%` }, i);
   }
   finishGapAdjust(e) {
-    _e(e, this.opts);
+    Oe(e, this.opts);
   }
 }
 class qe {
@@ -616,9 +625,9 @@ class qe {
 const k = "gs-flex-spots", pe = `${k}__handle-size`, Ze = `${k}__handle-gap`;
 function Qe(t, e) {
   const { Canvas: s } = t, n = "flex-resize-spot";
-  let a, i, o, l, p = null, g = null;
+  let a, i, o, c, l = null, g = null;
   const f = new We(), r = new qe(t, f, e), h = () => {
-    var c;
+    var p;
     a = document.createElement("div"), a.className = k, a.style.display = "none", i = document.createElement("div"), i.className = `${k}__handles`, i.style.position = "absolute", i.style.pointerEvents = "none", i.style.zIndex = "21", o = {
       left: document.createElement("div"),
       right: document.createElement("div"),
@@ -637,7 +646,7 @@ function Qe(t, e) {
         ${P === "top" ? "top: 0px;" : ""}
         ${P === "bottom" ? "bottom: 0px;" : ""}
       `, y.addEventListener("pointerdown", I(P)), i.appendChild(y);
-    }), !e.disableGapHandler && !$(e) && (l = document.createElement("div"), l.className = Ze, l.style.cssText = `
+    }), !e.disableGapHandler && !$(e) && (c = document.createElement("div"), c.className = Ze, c.style.cssText = `
         position: absolute;
         background-color: var(--gs-theme-cl-cmp-bg1, #3b97e3);
         border-width: 2px;
@@ -647,70 +656,70 @@ function Qe(t, e) {
         pointer-events: all;
         max-width: 3rem;
         max-height: 3rem;
-      `, l.addEventListener("pointerdown", b()), i.appendChild(l)), a.append(i), (c = s.getSpotsEl()) == null || c.appendChild(a);
-  }, I = (c) => (u) => {
-    if (!p) return;
-    u.stopPropagation(), u.preventDefault(), r.startResize(p, c, u);
+      `, c.addEventListener("pointerdown", b()), i.appendChild(c)), a.append(i), (p = s.getSpotsEl()) == null || p.appendChild(a);
+  }, I = (p) => (u) => {
+    if (!l) return;
+    u.stopPropagation(), u.preventDefault(), r.startResize(l, p, u);
     const y = u.clientX, P = u.clientY;
     u.target.setPointerCapture(u.pointerId);
     const d = (E) => {
-      const C = t.Canvas.getZoomMultiplier(), A = (E.clientX - y) * C, _ = (E.clientY - P) * C, Y = O(c) ? _ : A;
-      r.updateResizeByDelta(p, c, Y);
+      const C = t.Canvas.getZoomMultiplier(), A = (E.clientX - y) * C, F = (E.clientY - P) * C, Y = O(p) ? F : A;
+      r.updateResizeByDelta(l, p, Y);
     }, R = () => {
-      r.finishResize(p), u.target.releasePointerCapture(u.pointerId), document.removeEventListener("pointermove", d), document.removeEventListener("pointerup", R);
+      r.finishResize(l), u.target.releasePointerCapture(u.pointerId), document.removeEventListener("pointermove", d), document.removeEventListener("pointerup", R);
     };
     document.addEventListener("pointermove", d), document.addEventListener("pointerup", R);
-  }, b = () => (c) => {
+  }, b = () => (p) => {
     if (!g) return;
     const u = g;
-    c.stopPropagation(), c.preventDefault();
-    const y = B(u, e), P = ee({ componentRow: u, isVertical: y }, e), d = c.clientX, R = c.clientY;
-    c.target.setPointerCapture(c.pointerId);
+    p.stopPropagation(), p.preventDefault();
+    const y = N(u, e), P = ee({ componentRow: u, isVertical: y }, e), d = p.clientX, R = p.clientY;
+    p.target.setPointerCapture(p.pointerId);
     const E = (A) => {
-      const _ = t.Canvas.getZoomMultiplier(), Y = y ? (A.clientY - R) * _ : (A.clientX - d) * _;
+      const F = t.Canvas.getZoomMultiplier(), Y = y ? (A.clientY - R) * F : (A.clientX - d) * F;
       r.updateGapByDelta(u, Y, P, y);
     }, C = () => {
-      r.finishGapAdjust(u), c.target.releasePointerCapture(c.pointerId), document.removeEventListener("pointermove", E), document.removeEventListener("pointerup", C);
+      r.finishGapAdjust(u), p.target.releasePointerCapture(p.pointerId), document.removeEventListener("pointermove", E), document.removeEventListener("pointerup", C);
     };
     document.addEventListener("pointermove", E), document.addEventListener("pointerup", C);
-  }, x = (c) => {
-    const u = c.component;
-    if (!u || !a || (p = u, g = u.parent(), !g)) return;
+  }, x = (p) => {
+    const u = p.component;
+    if (!u || !a || (l = u, g = u.parent(), !g)) return;
     const y = g;
     re(a);
-    const P = c.getStyle();
+    const P = p.getStyle();
     i && Object.assign(i.style, P);
-    const d = B(y, e), R = He(d);
+    const d = N(y, e), R = Ve(d);
     if (Object.values(o).forEach(oe), R.forEach((C) => {
-      if (Be(u, C)) return;
+      if (_e(u, C)) return;
       const A = o[C];
       re(A);
-    }), T(e).gapHandler.isGapSupported() && l && Fe(u)) {
+    }), T(e).gapHandler.isGapSupported() && c && Fe(u)) {
       const C = ee({ componentRow: y, isVertical: d }, e);
-      v(C, d, je(u));
+      v(C, d, Be(u));
     }
-  }, v = (c, u, y = !1) => {
-    const P = e.gapHandleSize, d = l.style;
+  }, v = (p, u, y = !1) => {
+    const P = e.gapHandleSize, d = c.style;
     if (u) {
       d.height = `${P}px`;
-      const R = l.offsetHeight;
-      y ? (d.top = `-${(c + R) / 2}px`, d.bottom = "") : (d.bottom = `-${(c + R) / 2}px`, d.top = ""), d.width = "50%", d.left = "50%", d.transform = "translateX(-50%)", d.cursor = "row-resize";
+      const R = c.offsetHeight;
+      y ? (d.top = `-${(p + R) / 2}px`, d.bottom = "") : (d.bottom = `-${(p + R) / 2}px`, d.top = ""), d.width = "50%", d.left = "50%", d.transform = "translateX(-50%)", d.cursor = "row-resize";
     } else {
       d.width = `${P}px`;
-      const R = l.offsetWidth;
-      y ? (d.left = `-${(c + R) / 2}px`, d.right = "") : (d.right = `-${(c + R) / 2}px`, d.left = ""), d.height = "50%", d.top = "50%", d.transform = "translateY(-50%)", d.cursor = "col-resize";
+      const R = c.offsetWidth;
+      y ? (d.left = `-${(p + R) / 2}px`, d.right = "") : (d.right = `-${(p + R) / 2}px`, d.left = ""), d.height = "50%", d.top = "50%", d.transform = "translateY(-50%)", d.cursor = "col-resize";
     }
   }, G = () => {
-    a && (oe(a), p = null, g = null);
+    a && (oe(a), l = null, g = null);
   }, m = () => {
     s.removeSpots({ type: n });
-    const c = t.getSelected(), u = c == null ? void 0 : c.parent();
-    c && u && f.isValidRelationship(u, c) ? s.addSpot({ type: n, component: c }) : G();
+    const p = t.getSelected(), u = p == null ? void 0 : p.parent();
+    p && u && f.isValidRelationship(u, p) ? s.addSpot({ type: n, component: p }) : G();
   }, w = () => {
-    const c = s.getSpots().filter((u) => u.type === n)[0];
-    c && x(c);
-  }, z = (c, u) => {
-    f.registerTypeRelationship(c, u);
+    const p = s.getSpots().filter((u) => u.type === n)[0];
+    p && x(p);
+  }, z = (p, u) => {
+    f.registerTypeRelationship(p, u);
   };
   t.onReady(() => {
     h(), $(e) ? z("mj-section", "mj-column") : z(e.typeRow, e.typeColumn);
@@ -728,17 +737,17 @@ const et = function(t, e = {}) {
     snapDivisions: 12,
     minItemPercent: 5,
     ...e
-  }, n = [Ue(t, s), ke(t, s)], a = Qe(t, s), i = Oe(t, s);
-  Te({
+  }, n = [Xe(t, s), Ue(t, s)], a = Qe(t, s), i = ke(t, s);
+  Ee({
     editor: t,
     licenseKey: s.licenseKey,
     plan: Ye,
-    pluginName: Xe,
+    pluginName: Pe,
     cleanup: () => {
       n.forEach((o) => o == null ? void 0 : o()), a(), i == null || i();
     }
   });
-}, tt = Ie(et);
+}, tt = Te(et, Pe);
 export {
   tt as default
 };