@grapesjs/studio-sdk-plugins 1.0.25 → 1.0.26-rc.1

package/dist/rendererReact/rendererProject/index.es.js

@@ -1,91 +1,87 @@
-import { jsx as u, jsxs as S, Fragment as v } from "react/jsx-runtime";
-import { createElement as W, Fragment as T } from "react";
-function E(s, t, e) {
-  const o = s.getId(), a = s.getType(), r = o || void 0;
-  let n;
-  return o ? n = o : t ? n = `${t}-${e ?? 0}` : a === "head" ? n = "gjs-head" : t === "gjs-head" ? n = `${t}-${e ?? 0}` : n = `gjs-${a}`, { key: n, nodeId: r };
+import { jsx as l, jsxs as C } from "react/jsx-runtime";
+import { createElement as T, Fragment as v } from "react";
+var m = /* @__PURE__ */ ((n) => (n.NoPagesFound = "noPagesFound", n.PageNotFound = "pageNotFound", n.NoFramesFound = "noFramesFound", n.MissingRootComponent = "missingRootComponent", n.ComponentNotFound = "componentNotFound", n))(m || {});
+function k(n) {
+  const { config: t, errorType: e } = n, r = t == null ? void 0 : t.errorComponent;
+  return r ? /* @__PURE__ */ l(r, { ...n }) : /* @__PURE__ */ C("div", { children: [
+    "Error: ",
+    e
+  ] });
 }
-const O = {
-  noPagesFound: () => "No pages found in project",
-  pageNotFound: ({ pageId: s = "" }) => `Page not found: ${s}`,
-  noFramesFound: () => "No frames found in page",
-  missingRootComponent: () => "Missing root component",
-  componentNotFound: ({ componentId: s = "" }) => `Component not found: ${s}`
-};
-function R(s) {
+function P(n) {
   const t = {};
   let e = !1;
-  for (const o in s)
-    if (Object.prototype.hasOwnProperty.call(s, o)) {
-      const a = s[o];
-      if (typeof a == "string" || typeof a == "number") {
-        const r = o.includes("-") ? o.replace(/-([a-z])/g, (n) => n[1].toUpperCase()) : o;
-        t[r] = a, e = !0;
+  for (const r in n)
+    if (Object.prototype.hasOwnProperty.call(n, r)) {
+      const s = n[r];
+      if (typeof s == "string" || typeof s == "number") {
+        const o = r.includes("-") ? r.replace(/-([a-z])/g, (i) => i[1].toUpperCase()) : r;
+        t[o] = s, e = !0;
       }
     }
   return e ? t : void 0;
 }
-function D(s) {
+function D(n) {
   const t = {};
-  return s.split(";").forEach((e) => {
+  return n.split(";").forEach((e) => {
     if (!e.trim()) return;
-    const o = e.indexOf(":");
-    if (o > 0) {
-      const a = e.substring(0, o).trim(), r = e.substring(o + 1).trim();
-      if (a && r) {
-        const n = a.replace(/-([a-z])/g, (c) => c[1].toUpperCase());
-        t[n] = r;
+    const r = e.indexOf(":");
+    if (r > 0) {
+      const s = e.substring(0, r).trim(), o = e.substring(r + 1).trim();
+      if (s && o) {
+        const i = s.replace(/-([a-z])/g, (c) => c[1].toUpperCase());
+        t[i] = o;
       }
     }
   }), Object.keys(t).length > 0 ? t : void 0;
 }
-function I(s) {
-  if (s) {
-    if (typeof s == "object" && !Array.isArray(s))
-      return R(s);
-    if (typeof s == "string") {
-      let t = D(s);
+function W(n) {
+  if (n) {
+    if (typeof n == "object" && !Array.isArray(n))
+      return P(n);
+    if (typeof n == "string") {
+      let t = D(n);
       if (!t)
         try {
-          const e = JSON.parse(s);
-          typeof e == "object" && e !== null && !Array.isArray(e) && (t = R(e));
+          const e = JSON.parse(n);
+          typeof e == "object" && e !== null && !Array.isArray(e) && (t = P(e));
         } catch (e) {
           console.error("Failed to parse style string as JSON", e);
         }
       return t;
     }
-    if (Array.isArray(s)) {
+    if (Array.isArray(n)) {
       const t = {};
-      return s.forEach((e) => {
+      return n.forEach((e) => {
         if (typeof e == "object" && e !== null) {
-          const o = e.name || e.property, a = e.value;
-          if (typeof o == "string" && o && a !== void 0 && a !== "") {
-            const r = o.replace(/-([a-z])/g, (n) => n[1].toUpperCase());
-            t[r] = a;
+          const r = e.name || e.property, s = e.value;
+          if (typeof r == "string" && r && s !== void 0 && s !== "") {
+            const o = r.replace(/-([a-z])/g, (i) => i[1].toUpperCase());
+            t[o] = s;
           }
         }
       }), Object.keys(t).length > 0 ? t : void 0;
     }
   }
 }
-function B(s) {
-  return F[s] ? F[s] : s.includes("-") ? s.replace(/-([a-z])/g, (t, e) => e.toUpperCase()) : s;
+function B(n) {
+  return j[n] ? j[n] : n.includes("-") ? n.replace(/-([a-z])/g, (t, e) => e.toUpperCase()) : n;
 }
-function M(s) {
-  var o;
-  const t = {}, e = ((o = s.xmlns) == null ? void 0 : o.includes("svg")) || s.viewBox !== void 0 || s.d !== void 0;
-  for (const [a, r] of Object.entries(s))
-    if (a === "style")
-      t.style = I(r);
-    else if (a.startsWith("data-"))
-      t[a] = r;
+function I(n) {
+  var e;
+  const t = {};
+  for (const [r, s] of Object.entries(n))
+    if (r === "style")
+      t.style = W(s);
+    else if (r.startsWith("data-"))
+      t[r] = s;
     else {
-      const n = B(a);
-      e || L.has(n) || n.startsWith("svg") ? t[n] = r : !z.has(n) && !n.startsWith("on") && !n.startsWith("aria-") && !n.startsWith("data-") ? t[`data-${a.toLowerCase()}`] = r : t[n] = r;
+      const o = B(r);
+      ((e = n.xmlns) == null ? void 0 : e.includes("svg")) || n.viewBox !== void 0 || n.d !== void 0 || z.has(o) || o.startsWith("svg") ? t[o] = s : !M.has(o) && !o.startsWith("on") && !o.startsWith("aria-") && !o.startsWith("data-") ? t[r] = s : t[o] = s;
     }
   return t;
 }
-const z = /* @__PURE__ */ new Set([
+const M = /* @__PURE__ */ new Set([
   "className",
   "id",
   "style",
@@ -126,7 +122,7 @@ const z = /* @__PURE__ */ new Set([
   "aria-labelledby",
   "aria-describedby",
   "role"
-]), L = /* @__PURE__ */ new Set([
+]), z = /* @__PURE__ */ new Set([
   "x",
   "y",
   "d",
@@ -169,7 +165,7 @@ const z = /* @__PURE__ */ new Set([
   "clipPath",
   "overflow",
   "pointerEvents"
-]), F = {
+]), j = {
   class: "className",
   for: "htmlFor",
   "http-equiv": "httpEquiv",
@@ -186,117 +182,106 @@ const z = /* @__PURE__ */ new Set([
   "font-family": "fontFamily",
   "font-size": "fontSize",
   "text-anchor": "textAnchor"
-}, A = function s(t) {
-  var $;
-  const { component: e, config: o, children: a, parentId: r, index: n } = t;
+};
+function L(n, t, e) {
+  const { id: r, type: s } = n, o = r || void 0;
+  let i;
+  return r ? i = r : t ? i = `${t}-${e ?? 0}` : s === "head" ? i = "gjs-head" : t === "gjs-head" ? i = `${t}-${e ?? 0}` : i = `gjs-${s}`, { key: i, nodeId: o };
+}
+const R = function n(t) {
+  var w;
+  const { component: e, config: r, children: s, parentId: o, index: i } = t;
   if (!e) return null;
-  const c = e.getType() || "", p = e.getContent();
-  if (c === "textnode") return p;
-  const l = ($ = o.components) == null ? void 0 : $[c], i = (l == null ? void 0 : l.component) || e.getTagName() || "div", h = e.getAttributes(), { key: f, nodeId: w } = E(e, r, n), b = !!(l != null && l.component), C = b ? h : M(h);
-  b && Object.keys(C).forEach((m) => {
-    const g = C[m];
-    typeof g == "string" && !isNaN(Number(g)) && g.trim() !== "" && (C[m] = Number(g));
+  const { type: c, content: a } = e;
+  if (c === "textnode") return a;
+  const u = (w = r == null ? void 0 : r.components) == null ? void 0 : w[c], d = (u == null ? void 0 : u.component) || e.tagName || "div", h = e.attributes, { key: g, nodeId: N } = L(e, o, i), b = !!(u != null && u.component), A = I(h);
+  b && Object.keys(A).forEach((y) => {
+    const p = A[y];
+    typeof p == "string" && !isNaN(Number(p)) && p.trim() !== "" && (A[y] = Number(p));
   });
-  const x = e.getComponents(), N = [...x.length ? x.map((m, g) => /* @__PURE__ */ u(
-    s,
-    {
-      config: o,
-      component: m,
-      parentId: f,
-      index: g
-    },
-    `${m.getId()}-${g}`
-  )) : [p], a], P = {
-    ...C,
-    ...w ? { id: w } : {}
+  const { components: F } = e, x = [...F.length ? F.map((y, p) => /* @__PURE__ */ l(n, { config: r, component: y, parentId: g, index: p }, `${y.id}-${p}`)) : [a], s], $ = {
+    ...A,
+    ...N ? { id: N } : {}
   };
-  return b ? /* @__PURE__ */ u(i, { ...P, children: N }, f) : /* @__PURE__ */ W(i, { ...P, key: f }, e.isVoid() ? null : N);
+  return b ? /* @__PURE__ */ l(d, { ...$, children: x }, g) : /* @__PURE__ */ T(d, { ...$, key: g }, e.isVoid ? null : x);
 };
-class k {
+function U(n) {
+  var a;
+  const { config: t, root: e, css: r } = n, s = (t == null ? void 0 : t.rootComponent) || v, o = ((a = e.docEl) == null ? void 0 : a.tagName) || "html", i = (t == null ? void 0 : t.headAfter) || v, c = (t == null ? void 0 : t.bodyAfter) || v;
+  return /* @__PURE__ */ l(o, { children: /* @__PURE__ */ C(s, { children: [
+    /* @__PURE__ */ C(R, { component: e.head, config: t, children: [
+      /* @__PURE__ */ l("style", { children: `${r}` }),
+      /* @__PURE__ */ l(i, {})
+    ] }),
+    /* @__PURE__ */ l(R, { component: e, config: t, children: /* @__PURE__ */ l(c, {}) })
+  ] }) });
+}
+class S {
   constructor(t) {
     this.data = t;
   }
-  getId() {
+  get id() {
     var t;
     return (t = this.data.attributes) == null ? void 0 : t.id;
   }
-  getType() {
+  get type() {
     return this.data.type || "default";
   }
-  getTagName() {
-    const t = this.getType();
+  get tagName() {
+    const { type: t } = this;
     return t === "svg" ? "svg" : t === "image" ? "img" : t === "linkBox" || t === "link" ? "a" : t === "head" ? "head" : t === "wrapper" ? "body" : this.data.tagName || "";
   }
-  isVoid() {
-    return this.getTagName() === "img" ? !0 : !!this.data.void;
+  get isVoid() {
+    return this.tagName === "img" ? !0 : !!this.data.void;
   }
-  getAttributes() {
-    const t = { ...this.data.attributes }, e = this.getClasses();
+  get attributes() {
+    const t = { ...this.data.attributes }, { classes: e } = this;
     e.length && (t.class = e.join(" "));
-    function o(a, r) {
-      return Object.prototype.hasOwnProperty.call(a, r);
+    function r(s, o) {
+      return Object.prototype.hasOwnProperty.call(s, o);
     }
-    return o(t, "id") || (t.id = this.getId()), t;
-  }
-  getStyle() {
-    return this.data.style || {};
+    return r(t, "id") || (t.id = this.id), t;
   }
-  getContent() {
+  get content() {
     return this.data.content || "";
   }
-  getComponents() {
-    return (this.data.components || []).map((t) => new k(t));
+  get components() {
+    return (this.data.components || []).map((t) => new S(t));
   }
-  getHead() {
-    return this.data.head ? new k(this.data.head) : null;
+  get head() {
+    return new S(this.data.head || { tagName: "head" });
   }
-  getDocEl() {
+  get docEl() {
     return this.data.docEl;
   }
-  getClasses() {
+  get classes() {
     return (this.data.classes || []).map((e) => typeof e == "string" ? e : e.name);
   }
-  hasClass(t) {
-    return this.getClasses().includes(t);
-  }
 }
-class U {
+class _ {
   constructor(t) {
     this.data = t;
   }
-  getComponent() {
-    return this.data.component ? new k(this.data.component) : null;
-  }
-  getWidth() {
-    return this.data.width || "";
-  }
-  getHeight() {
-    return this.data.height || "";
+  get component() {
+    return this.data.component ? new S(this.data.component) : null;
   }
 }
 class V {
   constructor(t) {
     this.data = t;
   }
-  getId() {
+  get id() {
     return this.data.id;
   }
-  getName() {
-    return this.data.name || "";
-  }
-  getFrames() {
-    return (this.data.frames || []).map((t) => new U(t));
+  get frames() {
+    return (this.data.frames || []).map((t) => new _(t));
   }
 }
-class q {
-  constructor(t) {
-    this.assets = t;
-  }
-  getAll() {
-    return this.assets;
-  }
+function E(n) {
+  const t = /(-?\d*\.?\d+)\w{0,}/.exec(n);
+  return t ? parseFloat(t[1]) : Number.MAX_VALUE;
 }
-class G {
+class q {
   constructor(t) {
     this.rules = t;
   }
@@ -306,50 +291,75 @@ class G {
   getRulesByGroup(t) {
     return this.rules.filter((e) => e.group === t);
   }
-  getWrapperRules() {
-    return this.rules.filter((t) => t.wrapper === 1);
+  getAtRule(t) {
+    const { atRuleType: e, mediaText: r } = t, s = e ? `@${e}` : r ? "@media" : "";
+    return s + (r && s ? ` ${r}` : "");
+  }
+  selectorsToString(t, e = {}) {
+    const r = [], { state: s, selectorsAdd: o, selectors: i = [] } = t, c = i.map((u) => this.getFromSelectorName(u)).join(""), a = s && !e.skipState ? `:${s}` : "";
+    return c && r.push(`${c}${a}`), o && !e.skipAdd && r.push(o), r.join(", ");
+  }
+  getFromSelectorName(t = "") {
+    return `${t.startsWith("#") ? "" : "."}${t}`;
+  }
+  styleToString(t = {}) {
+    const e = [], { style: r = {}, important: s } = t;
+    for (const o in r) {
+      const i = Array.isArray(s) ? s.indexOf(o) >= 0 : s;
+      if (o.substring(0, 2) === "__") continue;
+      const a = r[o];
+      (Array.isArray(a) ? a : [a]).forEach((f) => {
+        const d = `${f}${i ? " !important" : ""}`;
+        d && e.push(`${o}:${d};`);
+      });
+    }
+    return e.join("");
+  }
+  getDeclaration(t) {
+    const { singleAtRule: e } = t, r = this.selectorsToString(t), s = this.styleToString(t);
+    let o = "";
+    return (r || e) && s && (o = e ? s : `${r}{${s}}`), o;
+  }
+  buildFromRule(t) {
+    let e = "";
+    const r = this.selectorsToString(t), { selectorsAdd: s, singleAtRule: o } = t;
+    if (r || s || o) {
+      const i = this.getDeclaration(t);
+      i && (e += i);
+    }
+    return e;
+  }
+  sortMediaObject(t = {}) {
+    const e = [];
+    for (const r in t) {
+      const s = t[r];
+      e.push({ key: r, value: s });
+    }
+    return e.sort((r, s) => {
+      const o = [r.key, s.key].every((a) => a.indexOf("min-width") !== -1), i = o ? r.key : s.key, c = o ? s.key : r.key;
+      return E(i) - E(c);
+    });
   }
   getCssAsString() {
     if (!this.rules || !this.rules.length) return "";
-    const t = (r) => {
-      if (!r || !r.selectors || !r.style) return "";
-      let n = r.selectors;
-      if (typeof n == "string")
-        n = [n];
-      else if (!Array.isArray(n))
-        return "";
-      const c = n.map(
-        (i) => typeof i == "string" && !i.startsWith(".") && !i.startsWith("#") && !i.startsWith("[") && !i.startsWith(":") && !i.startsWith(">") && !i.startsWith("*") && !i.startsWith("@") ? "." + i : i
-      ), p = r.state, l = p ? c.map((i) => `${i.trim()}:${p}`).join(", ") : c.join(""), d = Object.entries(r.style).map(([i, h]) => `  ${i}: ${h};`).join(`
-`);
-      return d ? `${l} {
-${d}
-}` : "";
-    }, e = [], o = {};
-    this.rules.forEach((r) => {
-      if (!r || !r.selectors || !r.style) return;
-      const n = r.atRuleType && r.mediaText ? `@${r.atRuleType} ${r.mediaText}` : r.mediaText ? `@media ${r.mediaText}` : null;
-      n ? (o[n] || (o[n] = []), o[n].push(r)) : e.push(r);
-    });
-    let a = e.map((r) => t(r)).join(`
+    const { rules: t } = this, e = {}, r = [];
+    return t.forEach((s) => {
+      const o = this.getAtRule(s);
+      if (o) {
+        const i = e[o];
+        i ? i.push(s) : e[o] = [s];
+        return;
+      }
+      r.push(this.buildFromRule(s));
+    }), this.sortMediaObject(e).forEach((s) => {
+      let o = "";
+      const i = s.key;
+      s.value.forEach((a) => {
+        const u = this.buildFromRule(a);
+        a.singleAtRule ? r.push(`${i}{${u}}`) : o += u;
+      }), o && r.push(`${i}{${o}}`);
+    }), r.join(`
 `);
-    return Object.keys(o).forEach((r) => {
-      const n = o[r].map((c) => t(c)).join(`
-  `);
-      n && (a += `
-
-${r} {
-  ${n}
-}`);
-    }), a;
-  }
-}
-class H {
-  constructor(t) {
-    this.symbols = t;
-  }
-  getAll() {
-    return this.symbols;
   }
 }
 class J {
@@ -368,79 +378,48 @@ class K {
     return this.pages;
   }
 }
-class _ {
+class G {
   constructor(t) {
-    this.assetManager = new q(t.assets || []), this.cssComposer = new G(t.styles || []), this.pages = new K(t.pages || []), this.symbols = new H(t.symbols || []), this.dataSources = new J(t.dataSources || []);
-  }
-  getAssetManager() {
-    return this.assetManager;
-  }
-  getCssComposer() {
-    return this.cssComposer;
-  }
-  getPages() {
-    return this.pages;
-  }
-  getSymbols() {
-    return this.symbols;
-  }
-  getDataSources() {
-    return this.dataSources;
+    this.Css = new q(t.styles || []), this.Pages = new K(t.pages || []), this.DataSources = new J(t.dataSources || []);
   }
 }
-function j(s, t) {
-  if (s.getId() === t) return s;
-  for (const e of s.getComponents()) {
-    const o = j(e, t);
-    if (o) return o;
+function O(n, t) {
+  if (n.id === t) return n;
+  for (const e of n.components) {
+    const r = O(e, t);
+    if (r) return r;
   }
   return null;
 }
-function Y(s) {
+const Y = function(n) {
   var d;
-  const { config: t, root: e, css: o } = s, a = t.wrapper || T, r = e.getHead(), n = (d = e.getDocEl) == null ? void 0 : d.call(e), c = e.getAttributes().doctype || "<!DOCTYPE html>", p = (n == null ? void 0 : n.tagName) || "html", { skipDocType: l } = t;
-  return /* @__PURE__ */ S(v, { children: [
-    l !== void 0 && !l && c,
-    /* @__PURE__ */ S(p, { children: [
-      /* @__PURE__ */ u(A, { component: r, config: t, children: /* @__PURE__ */ u("style", { children: `${o}` }) }),
-      /* @__PURE__ */ u(a, { children: /* @__PURE__ */ u(A, { component: e, config: t }) })
-    ] })
-  ] });
-}
-function y(s, t) {
-  const e = s ? typeof s == "function" ? s(t) : s : "An error occurred";
-  return /* @__PURE__ */ u(v, { children: /* @__PURE__ */ u("html", { children: /* @__PURE__ */ u("body", { children: e }) }) });
-}
-const tt = ({ projectJson: s, config: t = {}, pageId: e, componentId: o }) => {
-  var i;
-  const a = new _(s), r = a.getCssComposer().getCssAsString(), n = a.getPages().getAll(), c = { ...O, ...t.errors };
-  if (!n.length)
-    return y(c.noPagesFound, { projectJson: s });
-  const p = e ? n.find((h) => h.getName() === e) : n[0];
-  if (!p)
-    return y(c.pageNotFound, { pageId: e });
-  const l = p.getFrames();
-  if (!l.length)
-    return y(c.noFramesFound, { page: p });
-  const d = (i = l[0]) == null ? void 0 : i.getComponent();
-  if (!d)
-    return y(c.missingRootComponent, { frame: l[0] });
-  if (o) {
-    const h = j(d, o);
+  const { projectData: t, config: e = {}, pageId: r, componentId: s } = n, o = new G(t), i = o.Css.getCssAsString(), c = o.Pages.getAll();
+  if (!c.length)
+    return /* @__PURE__ */ l(k, { ...n, errorType: m.NoPagesFound });
+  const a = r ? c.find((h) => h.id === r) : c[0];
+  if (!a)
+    return /* @__PURE__ */ l(k, { ...n, errorType: m.PageNotFound });
+  const { frames: u } = a;
+  if (!u.length)
+    return /* @__PURE__ */ l(k, { ...n, errorType: m.NoFramesFound });
+  const f = (d = u[0]) == null ? void 0 : d.component;
+  if (!f)
+    return /* @__PURE__ */ l(k, { ...n, errorType: m.MissingRootComponent });
+  if (s) {
+    const h = O(f, s);
     if (!h)
-      return y(c.componentNotFound, { componentId: o });
+      return /* @__PURE__ */ l(k, { ...n, errorType: m.ComponentNotFound });
     if (h) {
-      const f = t.wrapper || T;
-      return /* @__PURE__ */ S(v, { children: [
-        /* @__PURE__ */ u("style", { children: `${r}` }),
-        /* @__PURE__ */ u(f, { children: /* @__PURE__ */ u(A, { component: h, config: t }) })
+      const g = e.rootComponent || v;
+      return /* @__PURE__ */ C(g, { children: [
+        /* @__PURE__ */ l("style", { children: `${i}` }),
+        /* @__PURE__ */ l(R, { component: h, config: e })
       ] });
     }
     return null;
   }
-  return /* @__PURE__ */ u(Y, { config: t, root: d, css: r });
+  return /* @__PURE__ */ l(U, { config: e, root: f, css: i });
 };
 export {
-  tt as GrapesJSProject,
-  A as RenderProjectComponent
+  Y as RenderProject
 };

package/dist/rendererReact/rendererProject/index.js

@@ -1,10 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),S=require("react");function T(s,t,e){const o=s.getId(),a=s.getType(),r=o||void 0;let n;return o?n=o:t?n=`${t}-${e??0}`:a==="head"?n="gjs-head":t==="gjs-head"?n=`${t}-${e??0}`:n=`gjs-${a}`,{key:n,nodeId:r}}const $={noPagesFound:()=>"No pages found in project",pageNotFound:({pageId:s=""})=>`Page not found: ${s}`,noFramesFound:()=>"No frames found in page",missingRootComponent:()=>"Missing root component",componentNotFound:({componentId:s=""})=>`Component not found: ${s}`};function N(s){const t={};let e=!1;for(const o in s)if(Object.prototype.hasOwnProperty.call(s,o)){const a=s[o];if(typeof a=="string"||typeof a=="number"){const r=o.includes("-")?o.replace(/-([a-z])/g,n=>n[1].toUpperCase()):o;t[r]=a,e=!0}}return e?t:void 0}function W(s){const t={};return s.split(";").forEach(e=>{if(!e.trim())return;const o=e.indexOf(":");if(o>0){const a=e.substring(0,o).trim(),r=e.substring(o+1).trim();if(a&&r){const n=a.replace(/-([a-z])/g,l=>l[1].toUpperCase());t[n]=r}}}),Object.keys(t).length>0?t:void 0}function E(s){if(s){if(typeof s=="object"&&!Array.isArray(s))return N(s);if(typeof s=="string"){let t=W(s);if(!t)try{const e=JSON.parse(s);typeof e=="object"&&e!==null&&!Array.isArray(e)&&(t=N(e))}catch(e){console.error("Failed to parse style string as JSON",e)}return t}if(Array.isArray(s)){const t={};return s.forEach(e=>{if(typeof e=="object"&&e!==null){const o=e.name||e.property,a=e.value;if(typeof o=="string"&&o&&a!==void 0&&a!==""){const r=o.replace(/-([a-z])/g,n=>n[1].toUpperCase());t[r]=a}}}),Object.keys(t).length>0?t:void 0}}}function O(s){return R[s]?R[s]:s.includes("-")?s.replace(/-([a-z])/g,(t,e)=>e.toUpperCase()):s}function D(s){var o;const t={},e=((o=s.xmlns)==null?void 0:o.includes("svg"))||s.viewBox!==void 0||s.d!==void 0;for(const[a,r]of Object.entries(s))if(a==="style")t.style=E(r);else if(a.startsWith("data-"))t[a]=r;else{const n=O(a);e||M.has(n)||n.startsWith("svg")?t[n]=r:!I.has(n)&&!n.startsWith("on")&&!n.startsWith("aria-")&&!n.startsWith("data-")?t[`data-${a.toLowerCase()}`]=r:t[n]=r}return t}const I=new Set(["className","id","style","href","src","alt","title","target","rel","type","name","value","placeholder","onClick","onChange","onSubmit","onBlur","onFocus","disabled","readOnly","checked","selected","multiple","width","height","maxLength","min","max","step","rows","cols","autoComplete","autoFocus","required","spellCheck","tabIndex","aria-label","aria-labelledby","aria-describedby","role"]),M=new Set(["x","y","d","cx","cy","r","rx","ry","x1","x2","y1","y2","points","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","strokeDasharray","strokeOpacity","fillOpacity","fillRule","clipRule","transform","viewBox","preserveAspectRatio","pathLength","vectorEffect","dominantBaseline","alignmentBaseline","textAnchor","fontFamily","fontSize","fontStyle","fontWeight","textDecoration","baselineShift","opacity","mask","clipPath","overflow","pointerEvents"]),R={class:"className",for:"htmlFor","http-equiv":"httpEquiv","accept-charset":"acceptCharset","stroke-width":"strokeWidth","stroke-linecap":"strokeLinecap","stroke-linejoin":"strokeLinejoin","fill-rule":"fillRule","clip-rule":"clipRule","stroke-miterlimit":"strokeMiterlimit","stroke-dasharray":"strokeDasharray","stroke-opacity":"strokeOpacity","fill-opacity":"fillOpacity","font-family":"fontFamily","font-size":"fontSize","text-anchor":"textAnchor"},x=function s(t){var P;const{component:e,config:o,children:a,parentId:r,index:n}=t;if(!e)return null;const l=e.getType()||"",p=e.getContent();if(l==="textnode")return p;const u=(P=o.components)==null?void 0:P[l],i=(u==null?void 0:u.component)||e.getTagName()||"div",h=e.getAttributes(),{key:f,nodeId:k}=T(e,r,n),b=!!(u!=null&&u.component),C=b?h:D(h);b&&Object.keys(C).forEach(m=>{const g=C[m];typeof g=="string"&&!isNaN(Number(g))&&g.trim()!==""&&(C[m]=Number(g))});const A=e.getComponents(),v=[...A.length?A.map((m,g)=>c.jsx(s,{config:o,component:m,parentId:f,index:g},`${m.getId()}-${g}`)):[p],a],w={...C,...k?{id:k}:{}};return b?c.jsx(i,{...w,children:v},f):S.createElement(i,{...w,key:f},e.isVoid()?null:v)};class j{constructor(t){this.data=t}getId(){var t;return(t=this.data.attributes)==null?void 0:t.id}getType(){return this.data.type||"default"}getTagName(){const t=this.getType();return t==="svg"?"svg":t==="image"?"img":t==="linkBox"||t==="link"?"a":t==="head"?"head":t==="wrapper"?"body":this.data.tagName||""}isVoid(){return this.getTagName()==="img"?!0:!!this.data.void}getAttributes(){const t={...this.data.attributes},e=this.getClasses();e.length&&(t.class=e.join(" "));function o(a,r){return Object.prototype.hasOwnProperty.call(a,r)}return o(t,"id")||(t.id=this.getId()),t}getStyle(){return this.data.style||{}}getContent(){return this.data.content||""}getComponents(){return(this.data.components||[]).map(t=>new j(t))}getHead(){return this.data.head?new j(this.data.head):null}getDocEl(){return this.data.docEl}getClasses(){return(this.data.classes||[]).map(e=>typeof e=="string"?e:e.name)}hasClass(t){return this.getClasses().includes(t)}}class B{constructor(t){this.data=t}getComponent(){return this.data.component?new j(this.data.component):null}getWidth(){return this.data.width||""}getHeight(){return this.data.height||""}}class z{constructor(t){this.data=t}getId(){return this.data.id}getName(){return this.data.name||""}getFrames(){return(this.data.frames||[]).map(t=>new B(t))}}class L{constructor(t){this.assets=t}getAll(){return this.assets}}class q{constructor(t){this.rules=t}getAll(){return this.rules}getRulesByGroup(t){return this.rules.filter(e=>e.group===t)}getWrapperRules(){return this.rules.filter(t=>t.wrapper===1)}getCssAsString(){if(!this.rules||!this.rules.length)return"";const t=r=>{if(!r||!r.selectors||!r.style)return"";let n=r.selectors;if(typeof n=="string")n=[n];else if(!Array.isArray(n))return"";const l=n.map(i=>typeof i=="string"&&!i.startsWith(".")&&!i.startsWith("#")&&!i.startsWith("[")&&!i.startsWith(":")&&!i.startsWith(">")&&!i.startsWith("*")&&!i.startsWith("@")?"."+i:i),p=r.state,u=p?l.map(i=>`${i.trim()}:${p}`).join(", "):l.join(""),d=Object.entries(r.style).map(([i,h])=>`  ${i}: ${h};`).join(`
-`);return d?`${u} {
-${d}
-}`:""},e=[],o={};this.rules.forEach(r=>{if(!r||!r.selectors||!r.style)return;const n=r.atRuleType&&r.mediaText?`@${r.atRuleType} ${r.mediaText}`:r.mediaText?`@media ${r.mediaText}`:null;n?(o[n]||(o[n]=[]),o[n].push(r)):e.push(r)});let a=e.map(r=>t(r)).join(`
-`);return Object.keys(o).forEach(r=>{const n=o[r].map(l=>t(l)).join(`
-  `);n&&(a+=`
-
-${r} {
-  ${n}
-}`)}),a}}class U{constructor(t){this.symbols=t}getAll(){return this.symbols}}class G{constructor(t){this.list=t}getAll(){return this.list}}class J{constructor(t){this.pages=t.map(e=>new z(e))}getAll(){return this.pages}}class V{constructor(t){this.assetManager=new L(t.assets||[]),this.cssComposer=new q(t.styles||[]),this.pages=new J(t.pages||[]),this.symbols=new U(t.symbols||[]),this.dataSources=new G(t.dataSources||[])}getAssetManager(){return this.assetManager}getCssComposer(){return this.cssComposer}getPages(){return this.pages}getSymbols(){return this.symbols}getDataSources(){return this.dataSources}}function F(s,t){if(s.getId()===t)return s;for(const e of s.getComponents()){const o=F(e,t);if(o)return o}return null}function H(s){var d;const{config:t,root:e,css:o}=s,a=t.wrapper||S.Fragment,r=e.getHead(),n=(d=e.getDocEl)==null?void 0:d.call(e),l=e.getAttributes().doctype||"<!DOCTYPE html>",p=(n==null?void 0:n.tagName)||"html",{skipDocType:u}=t;return c.jsxs(c.Fragment,{children:[u!==void 0&&!u&&l,c.jsxs(p,{children:[c.jsx(x,{component:r,config:t,children:c.jsx("style",{children:`${o}`})}),c.jsx(a,{children:c.jsx(x,{component:e,config:t})})]})]})}function y(s,t){const e=s?typeof s=="function"?s(t):s:"An error occurred";return c.jsx(c.Fragment,{children:c.jsx("html",{children:c.jsx("body",{children:e})})})}const K=({projectJson:s,config:t={},pageId:e,componentId:o})=>{var i;const a=new V(s),r=a.getCssComposer().getCssAsString(),n=a.getPages().getAll(),l={...$,...t.errors};if(!n.length)return y(l.noPagesFound,{projectJson:s});const p=e?n.find(h=>h.getName()===e):n[0];if(!p)return y(l.pageNotFound,{pageId:e});const u=p.getFrames();if(!u.length)return y(l.noFramesFound,{page:p});const d=(i=u[0])==null?void 0:i.getComponent();if(!d)return y(l.missingRootComponent,{frame:u[0]});if(o){const h=F(d,o);if(!h)return y(l.componentNotFound,{componentId:o});if(h){const f=t.wrapper||S.Fragment;return c.jsxs(c.Fragment,{children:[c.jsx("style",{children:`${r}`}),c.jsx(f,{children:c.jsx(x,{component:h,config:t})})]})}return null}return c.jsx(H,{config:t,root:d,css:r})};exports.GrapesJSProject=K;exports.RenderProjectComponent=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),k=require("react");var m=(r=>(r.NoPagesFound="noPagesFound",r.PageNotFound="pageNotFound",r.NoFramesFound="noFramesFound",r.MissingRootComponent="missingRootComponent",r.ComponentNotFound="componentNotFound",r))(m||{});function x(r){const{config:t,errorType:e}=r,s=t==null?void 0:t.errorComponent;return s?a.jsx(s,{...r}):a.jsxs("div",{children:["Error: ",e]})}function P(r){const t={};let e=!1;for(const s in r)if(Object.prototype.hasOwnProperty.call(r,s)){const n=r[s];if(typeof n=="string"||typeof n=="number"){const o=s.includes("-")?s.replace(/-([a-z])/g,i=>i[1].toUpperCase()):s;t[o]=n,e=!0}}return e?t:void 0}function O(r){const t={};return r.split(";").forEach(e=>{if(!e.trim())return;const s=e.indexOf(":");if(s>0){const n=e.substring(0,s).trim(),o=e.substring(s+1).trim();if(n&&o){const i=n.replace(/-([a-z])/g,l=>l[1].toUpperCase());t[i]=o}}}),Object.keys(t).length>0?t:void 0}function T(r){if(r){if(typeof r=="object"&&!Array.isArray(r))return P(r);if(typeof r=="string"){let t=O(r);if(!t)try{const e=JSON.parse(r);typeof e=="object"&&e!==null&&!Array.isArray(e)&&(t=P(e))}catch(e){console.error("Failed to parse style string as JSON",e)}return t}if(Array.isArray(r)){const t={};return r.forEach(e=>{if(typeof e=="object"&&e!==null){const s=e.name||e.property,n=e.value;if(typeof s=="string"&&s&&n!==void 0&&n!==""){const o=s.replace(/-([a-z])/g,i=>i[1].toUpperCase());t[o]=n}}}),Object.keys(t).length>0?t:void 0}}}function D(r){return $[r]?$[r]:r.includes("-")?r.replace(/-([a-z])/g,(t,e)=>e.toUpperCase()):r}function W(r){var e;const t={};for(const[s,n]of Object.entries(r))if(s==="style")t.style=T(n);else if(s.startsWith("data-"))t[s]=n;else{const o=D(s);((e=r.xmlns)==null?void 0:e.includes("svg"))||r.viewBox!==void 0||r.d!==void 0||M.has(o)||o.startsWith("svg")?t[o]=n:!B.has(o)&&!o.startsWith("on")&&!o.startsWith("aria-")&&!o.startsWith("data-")?t[s]=n:t[o]=n}return t}const B=new Set(["className","id","style","href","src","alt","title","target","rel","type","name","value","placeholder","onClick","onChange","onSubmit","onBlur","onFocus","disabled","readOnly","checked","selected","multiple","width","height","maxLength","min","max","step","rows","cols","autoComplete","autoFocus","required","spellCheck","tabIndex","aria-label","aria-labelledby","aria-describedby","role"]),M=new Set(["x","y","d","cx","cy","r","rx","ry","x1","x2","y1","y2","points","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","strokeDasharray","strokeOpacity","fillOpacity","fillRule","clipRule","transform","viewBox","preserveAspectRatio","pathLength","vectorEffect","dominantBaseline","alignmentBaseline","textAnchor","fontFamily","fontSize","fontStyle","fontWeight","textDecoration","baselineShift","opacity","mask","clipPath","overflow","pointerEvents"]),$={class:"className",for:"htmlFor","http-equiv":"httpEquiv","accept-charset":"acceptCharset","stroke-width":"strokeWidth","stroke-linecap":"strokeLinecap","stroke-linejoin":"strokeLinejoin","fill-rule":"fillRule","clip-rule":"clipRule","stroke-miterlimit":"strokeMiterlimit","stroke-dasharray":"strokeDasharray","stroke-opacity":"strokeOpacity","fill-opacity":"fillOpacity","font-family":"fontFamily","font-size":"fontSize","text-anchor":"textAnchor"};function I(r,t,e){const{id:s,type:n}=r,o=s||void 0;let i;return s?i=s:t?i=`${t}-${e??0}`:n==="head"?i="gjs-head":t==="gjs-head"?i=`${t}-${e??0}`:i=`gjs-${n}`,{key:i,nodeId:o}}const v=function r(t){var N;const{component:e,config:s,children:n,parentId:o,index:i}=t;if(!e)return null;const{type:l,content:c}=e;if(l==="textnode")return c;const u=(N=s==null?void 0:s.components)==null?void 0:N[l],d=(u==null?void 0:u.component)||e.tagName||"div",h=e.attributes,{key:g,nodeId:j}=I(e,o,i),C=!!(u!=null&&u.component),A=W(h);C&&Object.keys(A).forEach(y=>{const p=A[y];typeof p=="string"&&!isNaN(Number(p))&&p.trim()!==""&&(A[y]=Number(p))});const{components:R}=e,b=[...R.length?R.map((y,p)=>a.jsx(r,{config:s,component:y,parentId:g,index:p},`${y.id}-${p}`)):[c],n],F={...A,...j?{id:j}:{}};return C?a.jsx(d,{...F,children:b},g):k.createElement(d,{...F,key:g},e.isVoid?null:b)};function z(r){var c;const{config:t,root:e,css:s}=r,n=(t==null?void 0:t.rootComponent)||k.Fragment,o=((c=e.docEl)==null?void 0:c.tagName)||"html",i=(t==null?void 0:t.headAfter)||k.Fragment,l=(t==null?void 0:t.bodyAfter)||k.Fragment;return a.jsx(o,{children:a.jsxs(n,{children:[a.jsxs(v,{component:e.head,config:t,children:[a.jsx("style",{children:`${s}`}),a.jsx(i,{})]}),a.jsx(v,{component:e,config:t,children:a.jsx(l,{})})]})})}class S{constructor(t){this.data=t}get id(){var t;return(t=this.data.attributes)==null?void 0:t.id}get type(){return this.data.type||"default"}get tagName(){const{type:t}=this;return t==="svg"?"svg":t==="image"?"img":t==="linkBox"||t==="link"?"a":t==="head"?"head":t==="wrapper"?"body":this.data.tagName||""}get isVoid(){return this.tagName==="img"?!0:!!this.data.void}get attributes(){const t={...this.data.attributes},{classes:e}=this;e.length&&(t.class=e.join(" "));function s(n,o){return Object.prototype.hasOwnProperty.call(n,o)}return s(t,"id")||(t.id=this.id),t}get content(){return this.data.content||""}get components(){return(this.data.components||[]).map(t=>new S(t))}get head(){return new S(this.data.head||{tagName:"head"})}get docEl(){return this.data.docEl}get classes(){return(this.data.classes||[]).map(e=>typeof e=="string"?e:e.name)}}class L{constructor(t){this.data=t}get component(){return this.data.component?new S(this.data.component):null}}class U{constructor(t){this.data=t}get id(){return this.data.id}get frames(){return(this.data.frames||[]).map(t=>new L(t))}}function w(r){const t=/(-?\d*\.?\d+)\w{0,}/.exec(r);return t?parseFloat(t[1]):Number.MAX_VALUE}class _{constructor(t){this.rules=t}getAll(){return this.rules}getRulesByGroup(t){return this.rules.filter(e=>e.group===t)}getAtRule(t){const{atRuleType:e,mediaText:s}=t,n=e?`@${e}`:s?"@media":"";return n+(s&&n?` ${s}`:"")}selectorsToString(t,e={}){const s=[],{state:n,selectorsAdd:o,selectors:i=[]}=t,l=i.map(u=>this.getFromSelectorName(u)).join(""),c=n&&!e.skipState?`:${n}`:"";return l&&s.push(`${l}${c}`),o&&!e.skipAdd&&s.push(o),s.join(", ")}getFromSelectorName(t=""){return`${t.startsWith("#")?"":"."}${t}`}styleToString(t={}){const e=[],{style:s={},important:n}=t;for(const o in s){const i=Array.isArray(n)?n.indexOf(o)>=0:n;if(o.substring(0,2)==="__")continue;const c=s[o];(Array.isArray(c)?c:[c]).forEach(f=>{const d=`${f}${i?" !important":""}`;d&&e.push(`${o}:${d};`)})}return e.join("")}getDeclaration(t){const{singleAtRule:e}=t,s=this.selectorsToString(t),n=this.styleToString(t);let o="";return(s||e)&&n&&(o=e?n:`${s}{${n}}`),o}buildFromRule(t){let e="";const s=this.selectorsToString(t),{selectorsAdd:n,singleAtRule:o}=t;if(s||n||o){const i=this.getDeclaration(t);i&&(e+=i)}return e}sortMediaObject(t={}){const e=[];for(const s in t){const n=t[s];e.push({key:s,value:n})}return e.sort((s,n)=>{const o=[s.key,n.key].every(c=>c.indexOf("min-width")!==-1),i=o?s.key:n.key,l=o?n.key:s.key;return w(i)-w(l)})}getCssAsString(){if(!this.rules||!this.rules.length)return"";const{rules:t}=this,e={},s=[];return t.forEach(n=>{const o=this.getAtRule(n);if(o){const i=e[o];i?i.push(n):e[o]=[n];return}s.push(this.buildFromRule(n))}),this.sortMediaObject(e).forEach(n=>{let o="";const i=n.key;n.value.forEach(c=>{const u=this.buildFromRule(c);c.singleAtRule?s.push(`${i}{${u}}`):o+=u}),o&&s.push(`${i}{${o}}`)}),s.join(`
+`)}}class q{constructor(t){this.list=t}getAll(){return this.list}}class V{constructor(t){this.pages=t.map(e=>new U(e))}getAll(){return this.pages}}class J{constructor(t){this.Css=new _(t.styles||[]),this.Pages=new V(t.pages||[]),this.DataSources=new q(t.dataSources||[])}}function E(r,t){if(r.id===t)return r;for(const e of r.components){const s=E(e,t);if(s)return s}return null}const K=function(r){var d;const{projectData:t,config:e={},pageId:s,componentId:n}=r,o=new J(t),i=o.Css.getCssAsString(),l=o.Pages.getAll();if(!l.length)return a.jsx(x,{...r,errorType:m.NoPagesFound});const c=s?l.find(h=>h.id===s):l[0];if(!c)return a.jsx(x,{...r,errorType:m.PageNotFound});const{frames:u}=c;if(!u.length)return a.jsx(x,{...r,errorType:m.NoFramesFound});const f=(d=u[0])==null?void 0:d.component;if(!f)return a.jsx(x,{...r,errorType:m.MissingRootComponent});if(n){const h=E(f,n);if(!h)return a.jsx(x,{...r,errorType:m.ComponentNotFound});if(h){const g=e.rootComponent||k.Fragment;return a.jsxs(g,{children:[a.jsx("style",{children:`${i}`}),a.jsx(v,{component:h,config:e})]})}return null}return a.jsx(z,{config:e,root:f,css:i})};exports.RenderProject=K;