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

package/dist/rendererReact/index.cjs.d.ts

@@ -1,3 +1,4 @@
-import { ReactRendererPluginOptions } from './types';
-declare const _default: import('../utils').PluginWithInit<ReactRendererPluginOptions>;
+import { RendererReactOptions } from './types';
+export type * from './types';
+declare const _default: import('../utils').PluginWithInit<RendererReactOptions>;
 export default _default;

package/dist/rendererReact/index.cjs.js

@@ -1 +1 @@
-"use strict";const m=require("react/jsx-runtime"),h=require("react"),D=require("react-dom/client"),A="app.grapesjs.com",N="app-stage.grapesjs.com",x=[A,N,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],L="license:check:start",O="license:check:end",U=()=>typeof window<"u",j=({isDev:e,isStage:t})=>`${e?"":`https://${t?N:A}`}/api`,W=()=>{const e=U()&&window.location.hostname;return!!e&&(x.includes(e)||x.some(t=>e.endsWith(t)))};async function P({path:e,baseApiUrl:t,method:n="GET",headers:s={},params:r,body:i}){const c=`${t||j({isDev:!1,isStage:!1})}${e}`,l={method:n,headers:{"Content-Type":"application/json",...s}};i&&(l.body=JSON.stringify(i));const u=r?new URLSearchParams(r).toString():"",a=u?`?${u}`:"",d=await fetch(`${c}${a}`,l);if(!d.ok)throw new Error(`HTTP error! status: ${d.status}`);return d.json()}var g=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(g||{});const R={[g.free]:0,[g.startup]:10,[g.business]:20,[g.enterprise]:30};function I(e){const t=e;return t.init=n=>s=>e(s,n),t}const K=e=>I(e);async function $({editor:e,plan:t,pluginName:n,licenseKey:s,cleanup:r}){let i="",o=!1;const c=W(),l=a=>{console.warn("Cleanup plugin:",n,"Reason:",a),r()},u=(a={})=>{var y;const{error:d,sdkLicense:p}=a,f=(y=a.plan)==null?void 0:y.category;if(!(p||a.license)||d)l(d||"Invalid license");else if(f){const w=R[t],v=R[f];w>v&&l({pluginRequiredPlan:t,licensePlan:f})}};e.on(L,a=>{i=a==null?void 0:a.baseApiUrl,o=!0}),e.on(O,a=>{u(a)}),setTimeout(async()=>{if(!o){if(c)return;if(s){const a=await V({licenseKey:s,pluginName:n,baseApiUrl:i});a&&u(a)}else l("The `licenseKey` option not provided")}},2e3)}async function V(e){const{licenseKey:t,pluginName:n,baseApiUrl:s}=e;try{return(await P({baseApiUrl:s,path:`/sdk/${t||"na"}`,method:"POST",params:{d:window.location.hostname,pn:n}})).result||{}}catch(r){return console.error("Error during SDK license check:",r),!1}}function E(e){const t={};let n=!1;for(const s in e)if(Object.prototype.hasOwnProperty.call(e,s)){const r=e[s];if(typeof r=="string"||typeof r=="number"){const i=s.includes("-")?s.replace(/-([a-z])/g,o=>o[1].toUpperCase()):s;t[i]=r,n=!0}}return n?t:void 0}function M(e){const t={};return e.split(";").forEach(n=>{if(!n.trim())return;const s=n.indexOf(":");if(s>0){const r=n.substring(0,s).trim(),i=n.substring(s+1).trim();if(r&&i){const o=r.replace(/-([a-z])/g,c=>c[1].toUpperCase());t[o]=i}}}),Object.keys(t).length>0?t:void 0}function q(e){if(e){if(typeof e=="object"&&!Array.isArray(e))return E(e);if(typeof e=="string"){let t=M(e);if(!t)try{const n=JSON.parse(e);typeof n=="object"&&n!==null&&!Array.isArray(n)&&(t=E(n))}catch(n){console.error("Failed to parse style string as JSON",n)}return t}if(Array.isArray(e)){const t={};return e.forEach(n=>{if(typeof n=="object"&&n!==null){const s=n.name||n.property,r=n.value;if(typeof s=="string"&&s&&r!==void 0&&r!==""){const i=s.replace(/-([a-z])/g,o=>o[1].toUpperCase());t[i]=r}}}),Object.keys(t).length>0?t:void 0}}}function z(e){return S[e]?S[e]:e.includes("-")?e.replace(/-([a-z])/g,(t,n)=>n.toUpperCase()):e}function F(e){var s;const t={},n=((s=e.xmlns)==null?void 0:s.includes("svg"))||e.viewBox!==void 0||e.d!==void 0;for(const[r,i]of Object.entries(e))if(r==="style")t.style=q(i);else if(r.startsWith("data-"))t[r]=i;else{const o=z(r);n||J.has(o)||o.startsWith("svg")?t[o]=i:!B.has(o)&&!o.startsWith("on")&&!o.startsWith("aria-")&&!o.startsWith("data-")?t[`data-${r.toLowerCase()}`]=i:t[o]=i}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"]),J=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"]),S={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 G(e,t,n){const[s,r]=h.useState();return{connectDom:h.useCallback(o=>{if(!o)return;const c=Q(e,t,o,n);r(c)},[s]),view:s}}function H(e){const[t,n]=h.useState(0);return h.useEffect(()=>{if(!e)return()=>{};const s=()=>n(c=>c+1),{em:r}=e,o=`${r.Components.events.update}:components`;return e.on(o,s),()=>e.off(o,s)},[e]),t}function Q(e,t,n,s){var c;const{em:r,Components:i}=e;let o=t.getView();if((o==null?void 0:o.el)===n)return o;if(!o){const{ComponentView:l}=i,{draggableComponents:u}=i.config,a=t.attributes.type||"default",d=((c=i.getType(a))==null?void 0:c.view)||l,p={draggableComponents:u,frameView:s,em:r},f=d.extend({initComponents(){},_createElement(){return n},render(){return this._ensureElement(),this._setData(),this.renderAttributes(),this.postRender(),this}});o=new f({el:n,config:p,model:t})}return o.el=n,o.render(),o}function X(e,t){const{Components:n}=e,s=r=>{const{id:i,model:o}=r;n.addType(i,{model:{toJSON(...c){const l=o.prototype.toJSON.apply(this,c);return l.tagName=this.tagName,l}}})};n.getTypes().forEach(s),e.on("component:type:add",s),Object.entries(t.components||{}).forEach(([r,i])=>{var o;n.addType(r,{isComponent:c=>(c==null?void 0:c.tagName)===r,model:{defaults:{type:r,traits:i.props?i.props():[],...((o=i.model)==null?void 0:o.defaults)||{}}}})})}function T(e){var b;const{component:t,config:n,editor:s,frameView:r,onMount:i,tagName:o}=e,{connectDom:c,view:l}=G(s,t,r),u=H(t);h.useEffect(()=>{if(!l||!i)return;const C=setTimeout(()=>i(l));return()=>clearTimeout(C)},[l]);const a=t.get("type")||"default",d=t.content,p=(b=n.components)==null?void 0:b[a],f=(p==null?void 0:p.component)||o||t.tagName||"div",k=t.components(),y=k.length?k.map(C=>m.jsx(T,{component:C,config:n,editor:s,frameView:r},C.cid)):d,w=F(t.getAttributes()),v=p==null?void 0:p.editorRender;if(v)return m.jsx(v,{props:w,editor:s,component:t,connectDom:c,children:y});if(p!=null&&p.component)return m.jsx("gjs-wrapper",{ref:c,children:m.jsx(f,{...w,children:y})});if(t.isInstanceOf("textnode"))return d;const _=t.isInstanceOf("text")?u:void 0;return h.createElement(f,{...w,ref:c,key:_},t.get("void")?null:y)}const Y=e=>{var i;const{frame:t,window:n,onMount:s}=e,{root:r}=t;try{(i=n.__reactRoot)==null||i.unmount(),n.__reactRoot=void 0;const o=D.createRoot(n.document.body);o.render(m.jsx(Z,{...e,component:r,onMount:s})),n.__reactRoot=o}catch(o){console.error("Error setting up React renderer",o)}return r.getView()};function Z(e){const{editor:t,component:n,window:s,frameView:r,config:i,onMount:o}=e,c=s.document,l=i.wrapper||h.Fragment,u={editorProps:{doc:c,editor:t,frameView:r}},a=i.wrapper?u:{};return m.jsx(l,{...a,children:m.jsx(T,{tagName:"div",component:n,config:i,editor:t,frameView:r,onMount:o})})}const ee="rendererReact",te=function(e,t={}){e.Canvas.config.customRenderer=n=>Y({...n,config:t}),X(e,t),$({editor:e,licenseKey:t.licenseKey,plan:g.startup,pluginName:ee,cleanup:()=>{e.Canvas.config.customRenderer=void 0}})},ne=K(te);module.exports=ne;
+"use strict";const y=require("react/jsx-runtime"),g=require("react"),I=require("react-dom/client"),j="app.grapesjs.com",U="app-stage.grapesjs.com",N=[j,U,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],W="license:check:start",B="license:check:end",$=()=>typeof window<"u",F=({isDev:e,isStage:t})=>`${e?"":`https://${t?U:j}`}/api`,K=()=>{const e=$()&&window.location.hostname;return!!e&&(N.includes(e)||N.some(t=>e.endsWith(t)))},V=e=>e.replace(/[A-Z]+(?![a-z])|[A-Z]/g,(t,n)=>(n?"-":"")+t.toLowerCase()),T=e=>typeof e=="string";function z(e){return typeof e=="function"}async function M({path:e,baseApiUrl:t,method:n="GET",headers:s={},params:r,body:o}){const c=`${t||F({isDev:!1,isStage:!1})}${e}`,a={method:n,headers:{"Content-Type":"application/json",...s}};o&&(a.body=JSON.stringify(o));const u=r?new URLSearchParams(r).toString():"",l=u?`?${u}`:"",d=await fetch(`${c}${l}`,a);if(!d.ok)throw new Error(`HTTP error! status: ${d.status}`);return d.json()}var C=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(C||{});const P={[C.free]:0,[C.startup]:10,[C.business]:20,[C.enterprise]:30};function q(e){const t=e;return t.init=n=>s=>e(s,n),t}const J=e=>q(e);async function G({editor:e,plan:t,pluginName:n,licenseKey:s,cleanup:r}){let o="",i=!1;const c=K(),a=l=>{console.warn("Cleanup plugin:",n,"Reason:",l),r()},u=(l={})=>{var h;const{error:d,sdkLicense:m}=l,f=(h=l.plan)==null?void 0:h.category;if(!(m||l.license)||d)a(d||"Invalid license");else if(f){const k=P[t],w=P[f];k>w&&a({pluginRequiredPlan:t,licensePlan:f})}};e.on(W,l=>{o=l==null?void 0:l.baseApiUrl,i=!0}),e.on(B,l=>{u(l)}),setTimeout(async()=>{if(!i){if(c)return;if(s){const l=await H({licenseKey:s,pluginName:n,baseApiUrl:o});l&&u(l)}else a("The `licenseKey` option not provided")}},2e3)}async function H(e){const{licenseKey:t,pluginName:n,baseApiUrl:s}=e;try{return(await M({baseApiUrl:s,path:`/sdk/${t||"na"}`,method:"POST",params:{d:window.location.hostname,pn:n}})).result||{}}catch(r){return console.error("Error during SDK license check:",r),!1}}function Z(e){const t={};for(const n in e)if(Object.prototype.hasOwnProperty.call(e,n)){const s=V(n);t[s]=e[n]}return t}const Q=(e,t)=>{const n=e.components||{};for(const s in n){const r=n[s];if(r.component===t)return{cmpConfig:r,type:s}}};function O(e){const t={};let n=!1;for(const s in e)if(Object.prototype.hasOwnProperty.call(e,s)){const r=e[s];if(typeof r=="string"||typeof r=="number"){const o=s.includes("-")?s.replace(/-([a-z])/g,i=>i[1].toUpperCase()):s;t[o]=r,n=!0}}return n?t:void 0}function X(e){const t={};return e.split(";").forEach(n=>{if(!n.trim())return;const s=n.indexOf(":");if(s>0){const r=n.substring(0,s).trim(),o=n.substring(s+1).trim();if(r&&o){const i=r.replace(/-([a-z])/g,c=>c[1].toUpperCase());t[i]=o}}}),Object.keys(t).length>0?t:void 0}function Y(e){if(e){if(typeof e=="object"&&!Array.isArray(e))return O(e);if(typeof e=="string"){let t=X(e);if(!t)try{const n=JSON.parse(e);typeof n=="object"&&n!==null&&!Array.isArray(n)&&(t=O(n))}catch(n){console.error("Failed to parse style string as JSON",n)}return t}if(Array.isArray(e)){const t={};return e.forEach(n=>{if(typeof n=="object"&&n!==null){const s=n.name||n.property,r=n.value;if(typeof s=="string"&&s&&r!==void 0&&r!==""){const o=s.replace(/-([a-z])/g,i=>i[1].toUpperCase());t[o]=r}}}),Object.keys(t).length>0?t:void 0}}}function ee(e){return L[e]?L[e]:e.includes("-")?e.replace(/-([a-z])/g,(t,n)=>n.toUpperCase()):e}function te(e){var n;const t={};for(const[s,r]of Object.entries(e))if(s==="style")t.style=Y(r);else if(s.startsWith("data-"))t[s]=r;else{const o=ee(s);((n=e.xmlns)==null?void 0:n.includes("svg"))||e.viewBox!==void 0||e.d!==void 0||oe.has(o)||o.startsWith("svg")?t[o]=r:!ne.has(o)&&!o.startsWith("on")&&!o.startsWith("aria-")&&!o.startsWith("data-")?t[s]=r:t[o]=r}return t}const ne=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"]),oe=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"]),L={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"},E=e=>(e==null?void 0:e.$$typeof)&&typeof e.props=="object";function se(e){return t=>{const n=t.getContent();E(n)&&t.set({content:b({...e,model:n}),reactContent:n})}}const re=e=>t=>{const n=t.component;E(n)&&(t.component={components:b({...e,model:n})})};function b(e){const{model:t,editor:n,config:s}=e;if(E(t)){const r=t,o={},{type:i,props:c={}}=r,{children:a,className:u,style:l,...d}=c,m=p=>({type:"textnode",content:p}),f=typeof i=="symbol";if(z(i)){const p=Q(s,i);o.type=p==null?void 0:p.type}else n.Components.getType(i)?o.type=i:f||(o.tagName=i);if(u&&(o.classes=u),l&&(o.style=Z(l)),Array.isArray(a)?o.components=a.map(p=>T(p)?m(p):b({...e,model:p})).filter(Boolean):T(a)&&(o.components=m(a)),Object.keys(d).length){const p=n.Parser.parserHtml.splitPropsFromAttr(d);o.attributes=p.attrs,Object.assign(o,p.props)}return o}}function ce(e){const{component:t}=e,[n,s]=g.useState(0),[r,o]=g.useState();return g.useEffect(()=>{if(!t)return()=>{};const c=()=>s(p=>p+1),a=()=>{[...t.views].forEach(h=>h.remove()),o(void 0)},{em:u}=t,l=u.Components.events,m=[...["components","attributes","classes"].map(p=>`${l.update}:${p}`),"rerender"].join(" "),f=[l.removed,"rerender"].join(" ");return t.on(m,c),t.on(f,a),()=>{t.off(m,c),t.off(f,a),a()}},[t]),{key:n,view:r,connectDom:c=>{if(!c)return;const a=ie({...e,el:c});o(a)}}}function ie(e){var a;const{editor:t,component:n,el:s,frameView:r}=e,{em:o,Components:i}=t;let c=n.getView(r.model);if((c==null?void 0:c.el)===s)return c;if(!c){const{ComponentView:u}=i,l=n.attributes.type||"default",d=((a=i.getType(l))==null?void 0:a.view)||u,m={...i.config,frameView:r,em:o},f=d.extend({initComponents(){},_createElement(){return s},_removeElement(){},__clearAttributes(){},render(){var p;return this._ensureElement(),this._setData(),this.renderAttributes(),(p=this.updateSrc)==null||p.call(this),this}});c=new f({el:s,config:m,model:n})}return c.el=s,c.render(),c}function ae(e,t){const{Components:n}=e,s=r=>{const{id:o,model:i}=r;n.addType(o,{model:{toJSON(...c){const a=i.prototype.toJSON.apply(this,c);return a.tagName=this.tagName,a}}})};n.getTypes().forEach(s),e.on("component:type:add",s),Object.entries(t.components||{}).forEach(([r,o])=>{var m,f;const{allowPropClassName:i,allowPropId:c,allowChildren:a}=o,u=!c&&!i,l=()=>({disabled:u}),d=()=>({disableClasses:!i,disableComponent:!c});n.addType(r,{isComponent:p=>(p==null?void 0:p.tagName)===r,model:{defaults:{type:r,traits:((m=o.props)==null?void 0:m.call(o))||[],droppable:!!a,stylable:!u,styleManager:l,selectorManager:d,...((f=o.model)==null?void 0:f.defaults)||{}}}})})}function _(e){var x;const{component:t,config:n,editor:s,frameView:r,onMount:o,tagName:i,children:c}=e,{key:a,view:u,connectDom:l}=ce(e);g.useEffect(()=>{if(!u&&!o)return;const v=setTimeout(()=>{u&&(o==null||o(u),setTimeout(()=>u.postRender()))});return()=>clearTimeout(v)},[u]);const d=t.get("type")||"default",m=t.content,f=(x=n.components)==null?void 0:x[d],p=(f==null?void 0:f.component)||i||t.tagName||"div",h=t.components(),k=h.length?h.map(v=>y.jsx(_,{component:v,config:n,editor:s,frameView:r},v.cid)):[m||void 0],w=te(t.getAttributes()),A=f==null?void 0:f.editorRender,S=[...k,c].filter(v=>v??!1),R=S.length?S:null;if(A)return y.jsx(A,{props:w,editor:s,component:t,connectDom:l,children:R});if(f!=null&&f.component)return y.jsx("gjs-wrapper",{ref:l,style:f.wrapperStyle,children:y.jsx(p,{...w,children:R})});if(t.isInstanceOf("textnode"))return m;const D=t.isInstanceOf("text")?a:void 0;return g.createElement(p,{...w,ref:l,key:D},t.get("void")?null:R)}const le=e=>{const{frame:t,window:n,onMount:s,editor:r}=e,o=r.Canvas.events,{root:i}=t;try{const c=I.createRoot(n.document.body);c.render(y.jsx(pe,{...e,component:i,onMount:s}));const a=()=>c.unmount();t.once(o.frameUnload,a),n.addEventListener("unload",a)}catch(c){console.warn(c)}return i.getView()};function pe(e){const{editor:t,component:n,window:s,frameView:r,config:o,onMount:i}=e,c=s.document,a=o.rootComponent||g.Fragment,u=o.rootComponent?{editorProps:{doc:c,editor:t,frameView:r}}:{},l=(o==null?void 0:o.bodyAfter)||g.Fragment;return y.jsx(a,{...u,children:y.jsx(_,{tagName:"div",component:n,config:o,editor:t,frameView:r,onMount:i,children:y.jsx(l,{...u})})})}const ue="rendererReact",fe=C.startup,de=function(e,t={}){const{Blocks:n,Pages:s}=e,r=n.events,o=s.events;e.Canvas.config.customRenderer=c=>le({...c,config:t}),e.Components.config.processor=c=>b({model:c,editor:e,config:t}),ae(e,t);const i=[[r.add,se({editor:e,config:t})],[o.addBefore,re({editor:e,config:t})]];i.forEach(([c,a])=>e.on(c,a)),G({editor:e,licenseKey:t.licenseKey,plan:fe,pluginName:ue,cleanup:()=>{e.Canvas.config.customRenderer=void 0,e.Components.config.processor=void 0,i.forEach(([c,a])=>e.off(c,a))}})},me=J(de);module.exports=me;

package/dist/rendererReact/index.d.ts

@@ -1,3 +1,4 @@
-import { ReactRendererPluginOptions } from './types';
-declare const _default: import('../utils').PluginWithInit<ReactRendererPluginOptions>;
+import { RendererReactOptions } from './types';
+export type * from './types';
+declare const _default: import('../utils').PluginWithInit<RendererReactOptions>;
 export default _default;

package/dist/rendererReact/index.es.d.ts

@@ -1,3 +1,4 @@
-import { ReactRendererPluginOptions } from './types';
-declare const _default: import('../utils').PluginWithInit<ReactRendererPluginOptions>;
+import { RendererReactOptions } from './types';
+export type * from './types';
+declare const _default: import('../utils').PluginWithInit<RendererReactOptions>;
 export default _default;

package/dist/rendererReact/index.es.js

@@ -1,9 +1,9 @@
-import { jsx as m } from "react/jsx-runtime";
-import { useState as A, useCallback as L, useEffect as x, createElement as O, Fragment as U } from "react";
-import { createRoot as W } from "react-dom/client";
-const N = "app.grapesjs.com", T = "app-stage.grapesjs.com", b = [
-  N,
-  T,
+import { jsx as y } from "react/jsx-runtime";
+import { useState as N, useEffect as _, createElement as $, Fragment as T } from "react";
+import { createRoot as j } from "react-dom/client";
+const D = "app.grapesjs.com", I = "app-stage.grapesjs.com", x = [
+  D,
+  I,
   "localhost",
   "127.0.0.1",
   ".local-credentialless.webcontainer.io",
@@ -12,82 +12,85 @@ const N = "app.grapesjs.com", T = "app-stage.grapesjs.com", b = [
   // For stackblitz.com demos
   "-sandpack.codesandbox.io"
   // For Sandpack demos
-], P = "license:check:start", I = "license:check:end", K = () => typeof window < "u", j = ({ isDev: e, isStage: t }) => `${e ? "" : `https://${t ? T : N}`}/api`, $ = () => {
-  const e = K() && window.location.hostname;
-  return !!e && (b.includes(e) || b.some((t) => e.endsWith(t)));
-};
-async function V({
+], K = "license:check:start", F = "license:check:end", V = () => typeof window < "u", z = ({ isDev: e, isStage: t }) => `${e ? "" : `https://${t ? I : D}`}/api`, M = () => {
+  const e = V() && window.location.hostname;
+  return !!e && (x.includes(e) || x.some((t) => e.endsWith(t)));
+}, J = (e) => e.replace(/[A-Z]+(?![a-z])|[A-Z]/g, (t, n) => (n ? "-" : "") + t.toLowerCase()), P = (e) => typeof e == "string";
+function q(e) {
+  return typeof e == "function";
+}
+async function G({
   path: e,
   baseApiUrl: t,
   method: n = "GET",
   headers: s = {},
   params: r,
-  body: i
+  body: o
 }) {
-  const c = `${t || j({ isDev: !1, isStage: !1 })}${e}`, l = {
+  const c = `${t || z({ isDev: !1, isStage: !1 })}${e}`, a = {
     method: n,
     headers: {
       "Content-Type": "application/json",
       ...s
     }
   };
-  i && (l.body = JSON.stringify(i));
-  const u = r ? new URLSearchParams(r).toString() : "", a = u ? `?${u}` : "", d = await fetch(`${c}${a}`, l);
+  o && (a.body = JSON.stringify(o));
+  const f = r ? new URLSearchParams(r).toString() : "", l = f ? `?${f}` : "", d = await fetch(`${c}${l}`, a);
   if (!d.ok)
     throw new Error(`HTTP error! status: ${d.status}`);
   return d.json();
 }
-var y = /* @__PURE__ */ ((e) => (e.free = "free", e.startup = "startup", e.business = "business", e.enterprise = "enterprise", e))(y || {});
-const R = {
-  [y.free]: 0,
-  [y.startup]: 10,
-  [y.business]: 20,
-  [y.enterprise]: 30
+var v = /* @__PURE__ */ ((e) => (e.free = "free", e.startup = "startup", e.business = "business", e.enterprise = "enterprise", e))(v || {});
+const O = {
+  [v.free]: 0,
+  [v.startup]: 10,
+  [v.business]: 20,
+  [v.enterprise]: 30
 };
-function M(e) {
+function H(e) {
   const t = e;
   return t.init = (n) => (s) => e(s, n), t;
 }
-const z = (e) => /* @__PURE__ */ M(e);
-async function F({
+const Z = (e) => /* @__PURE__ */ H(e);
+async function Q({
   editor: e,
   plan: t,
   pluginName: n,
   licenseKey: s,
   cleanup: r
 }) {
-  let i = "", o = !1;
-  const c = $(), l = (a) => {
-    console.warn("Cleanup plugin:", n, "Reason:", a), r();
-  }, u = (a = {}) => {
+  let o = "", i = !1;
+  const c = M(), a = (l) => {
+    console.warn("Cleanup plugin:", n, "Reason:", l), r();
+  }, f = (l = {}) => {
     var h;
-    const { error: d, sdkLicense: p } = a, f = (h = a.plan) == null ? void 0 : h.category;
-    if (!(p || a.license) || d)
-      l(d || "Invalid license");
-    else if (f) {
-      const g = R[t], w = R[f];
-      g > w && l({ pluginRequiredPlan: t, licensePlan: f });
+    const { error: d, sdkLicense: m } = l, u = (h = l.plan) == null ? void 0 : h.category;
+    if (!(m || l.license) || d)
+      a(d || "Invalid license");
+    else if (u) {
+      const b = O[t], C = O[u];
+      b > C && a({ pluginRequiredPlan: t, licensePlan: u });
     }
   };
-  e.on(P, (a) => {
-    i = a == null ? void 0 : a.baseApiUrl, o = !0;
-  }), e.on(I, (a) => {
-    u(a);
+  e.on(K, (l) => {
+    o = l == null ? void 0 : l.baseApiUrl, i = !0;
+  }), e.on(F, (l) => {
+    f(l);
   }), setTimeout(async () => {
-    if (!o) {
+    if (!i) {
       if (c) return;
       if (s) {
-        const a = await B({ licenseKey: s, pluginName: n, baseApiUrl: i });
-        a && u(a);
+        const l = await X({ licenseKey: s, pluginName: n, baseApiUrl: o });
+        l && f(l);
       } else
-        l("The `licenseKey` option not provided");
+        a("The `licenseKey` option not provided");
     }
   }, 2e3);
 }
-async function B(e) {
+async function X(e) {
   const { licenseKey: t, pluginName: n, baseApiUrl: s } = e;
   try {
-    return (await V({
+    return (await G({
       baseApiUrl: s,
       path: `/sdk/${t || "na"}`,
       method: "POST",
@@ -100,43 +103,60 @@ async function B(e) {
     return console.error("Error during SDK license check:", r), !1;
   }
 }
-function E(e) {
+function Y(e) {
+  const t = {};
+  for (const n in e)
+    if (Object.prototype.hasOwnProperty.call(e, n)) {
+      const s = J(n);
+      t[s] = e[n];
+    }
+  return t;
+}
+const ee = (e, t) => {
+  const n = e.components || {};
+  for (const s in n) {
+    const r = n[s];
+    if (r.component === t)
+      return { cmpConfig: r, type: s };
+  }
+};
+function L(e) {
   const t = {};
   let n = !1;
   for (const s in e)
     if (Object.prototype.hasOwnProperty.call(e, s)) {
       const r = e[s];
       if (typeof r == "string" || typeof r == "number") {
-        const i = s.includes("-") ? s.replace(/-([a-z])/g, (o) => o[1].toUpperCase()) : s;
-        t[i] = r, n = !0;
+        const o = s.includes("-") ? s.replace(/-([a-z])/g, (i) => i[1].toUpperCase()) : s;
+        t[o] = r, n = !0;
       }
     }
   return n ? t : void 0;
 }
-function J(e) {
+function te(e) {
   const t = {};
   return e.split(";").forEach((n) => {
     if (!n.trim()) return;
     const s = n.indexOf(":");
     if (s > 0) {
-      const r = n.substring(0, s).trim(), i = n.substring(s + 1).trim();
-      if (r && i) {
-        const o = r.replace(/-([a-z])/g, (c) => c[1].toUpperCase());
-        t[o] = i;
+      const r = n.substring(0, s).trim(), o = n.substring(s + 1).trim();
+      if (r && o) {
+        const i = r.replace(/-([a-z])/g, (c) => c[1].toUpperCase());
+        t[i] = o;
       }
     }
   }), Object.keys(t).length > 0 ? t : void 0;
 }
-function q(e) {
+function ne(e) {
   if (e) {
     if (typeof e == "object" && !Array.isArray(e))
-      return E(e);
+      return L(e);
     if (typeof e == "string") {
-      let t = J(e);
+      let t = te(e);
       if (!t)
         try {
           const n = JSON.parse(e);
-          typeof n == "object" && n !== null && !Array.isArray(n) && (t = E(n));
+          typeof n == "object" && n !== null && !Array.isArray(n) && (t = L(n));
         } catch (n) {
           console.error("Failed to parse style string as JSON", n);
         }
@@ -148,32 +168,32 @@ function q(e) {
         if (typeof n == "object" && n !== null) {
           const s = n.name || n.property, r = n.value;
           if (typeof s == "string" && s && r !== void 0 && r !== "") {
-            const i = s.replace(/-([a-z])/g, (o) => o[1].toUpperCase());
-            t[i] = r;
+            const o = s.replace(/-([a-z])/g, (i) => i[1].toUpperCase());
+            t[o] = r;
           }
         }
       }), Object.keys(t).length > 0 ? t : void 0;
     }
   }
 }
-function G(e) {
-  return S[e] ? S[e] : e.includes("-") ? e.replace(/-([a-z])/g, (t, n) => n.toUpperCase()) : e;
+function oe(e) {
+  return U[e] ? U[e] : e.includes("-") ? e.replace(/-([a-z])/g, (t, n) => n.toUpperCase()) : e;
 }
-function H(e) {
-  var s;
-  const t = {}, n = ((s = e.xmlns) == null ? void 0 : s.includes("svg")) || e.viewBox !== void 0 || e.d !== void 0;
-  for (const [r, i] of Object.entries(e))
-    if (r === "style")
-      t.style = q(i);
-    else if (r.startsWith("data-"))
-      t[r] = i;
+function se(e) {
+  var n;
+  const t = {};
+  for (const [s, r] of Object.entries(e))
+    if (s === "style")
+      t.style = ne(r);
+    else if (s.startsWith("data-"))
+      t[s] = r;
     else {
-      const o = G(r);
-      n || X.has(o) || o.startsWith("svg") ? t[o] = i : !Q.has(o) && !o.startsWith("on") && !o.startsWith("aria-") && !o.startsWith("data-") ? t[`data-${r.toLowerCase()}`] = i : t[o] = i;
+      const o = oe(s);
+      ((n = e.xmlns) == null ? void 0 : n.includes("svg")) || e.viewBox !== void 0 || e.d !== void 0 || ce.has(o) || o.startsWith("svg") ? t[o] = r : !re.has(o) && !o.startsWith("on") && !o.startsWith("aria-") && !o.startsWith("data-") ? t[s] = r : t[o] = r;
     }
   return t;
 }
-const Q = /* @__PURE__ */ new Set([
+const re = /* @__PURE__ */ new Set([
   "className",
   "id",
   "style",
@@ -214,7 +234,7 @@ const Q = /* @__PURE__ */ new Set([
   "aria-labelledby",
   "aria-describedby",
   "role"
-]), X = /* @__PURE__ */ new Set([
+]), ce = /* @__PURE__ */ new Set([
   "x",
   "y",
   "d",
@@ -257,7 +277,7 @@ const Q = /* @__PURE__ */ new Set([
   "clipPath",
   "overflow",
   "pointerEvents"
-]), S = {
+]), U = {
   class: "className",
   for: "htmlFor",
   "http-equiv": "httpEquiv",
@@ -274,132 +294,178 @@ const Q = /* @__PURE__ */ new Set([
   "font-family": "fontFamily",
   "font-size": "fontSize",
   "text-anchor": "textAnchor"
-};
-function Y(e, t, n) {
-  const [s, r] = A();
-  return {
-    connectDom: L(
-      (o) => {
-        if (!o) return;
-        const c = ee(e, t, o, n);
-        r(c);
-      },
-      [s]
-    ),
-    view: s
+}, R = (e) => (e == null ? void 0 : e.$$typeof) && typeof e.props == "object";
+function ie(e) {
+  return (t) => {
+    const n = t.getContent();
+    R(n) && t.set({
+      content: w({ ...e, model: n }),
+      reactContent: n
+    });
   };
 }
-function Z(e) {
-  const [t, n] = A(0);
-  return x(() => {
-    if (!e) return () => {
+const ae = (e) => (t) => {
+  const n = t.component;
+  R(n) && (t.component = { components: w({ ...e, model: n }) });
+};
+function w(e) {
+  const { model: t, editor: n, config: s } = e;
+  if (R(t)) {
+    const r = t, o = {}, { type: i, props: c = {} } = r, { children: a, className: f, style: l, ...d } = c, m = (p) => ({ type: "textnode", content: p }), u = typeof i == "symbol";
+    if (q(i)) {
+      const p = ee(s, i);
+      o.type = p == null ? void 0 : p.type;
+    } else n.Components.getType(i) ? o.type = i : u || (o.tagName = i);
+    if (f && (o.classes = f), l && (o.style = Y(l)), Array.isArray(a) ? o.components = a.map((p) => P(p) ? m(p) : w({ ...e, model: p })).filter(Boolean) : P(a) && (o.components = m(a)), Object.keys(d).length) {
+      const p = n.Parser.parserHtml.splitPropsFromAttr(d);
+      o.attributes = p.attrs, Object.assign(o, p.props);
+    }
+    return o;
+  }
+}
+function le(e) {
+  const { component: t } = e, [n, s] = N(0), [r, o] = N();
+  return _(() => {
+    if (!t) return () => {
     };
-    const s = () => n((c) => c + 1), { em: r } = e, o = `${r.Components.events.update}:components`;
-    return e.on(o, s), () => e.off(o, s);
-  }, [e]), t;
+    const c = () => s((p) => p + 1), a = () => {
+      [...t.views].forEach((h) => h.remove()), o(void 0);
+    }, { em: f } = t, l = f.Components.events, m = [...["components", "attributes", "classes"].map((p) => `${l.update}:${p}`), "rerender"].join(" "), u = [l.removed, "rerender"].join(" ");
+    return t.on(m, c), t.on(u, a), () => {
+      t.off(m, c), t.off(u, a), a();
+    };
+  }, [t]), { key: n, view: r, connectDom: (c) => {
+    if (!c) return;
+    const a = pe({ ...e, el: c });
+    o(a);
+  } };
 }
-function ee(e, t, n, s) {
-  var c;
-  const { em: r, Components: i } = e;
-  let o = t.getView();
-  if ((o == null ? void 0 : o.el) === n)
-    return o;
-  if (!o) {
-    const { ComponentView: l } = i, { draggableComponents: u } = i.config, a = t.attributes.type || "default", d = ((c = i.getType(a)) == null ? void 0 : c.view) || l, p = { draggableComponents: u, frameView: s, em: r }, f = d.extend({
+function pe(e) {
+  var a;
+  const { editor: t, component: n, el: s, frameView: r } = e, { em: o, Components: i } = t;
+  let c = n.getView(r.model);
+  if ((c == null ? void 0 : c.el) === s)
+    return c;
+  if (!c) {
+    const { ComponentView: f } = i, l = n.attributes.type || "default", d = ((a = i.getType(l)) == null ? void 0 : a.view) || f, m = { ...i.config, frameView: r, em: o }, u = d.extend({
       initComponents() {
       },
       _createElement() {
-        return n;
+        return s;
+      },
+      _removeElement() {
+      },
+      __clearAttributes() {
       },
       render() {
-        return this._ensureElement(), this._setData(), this.renderAttributes(), this.postRender(), this;
+        var p;
+        return this._ensureElement(), this._setData(), this.renderAttributes(), (p = this.updateSrc) == null || p.call(this), this;
       }
     });
-    o = new f({ el: n, config: p, model: t });
+    c = new u({ el: s, config: m, model: n });
   }
-  return o.el = n, o.render(), o;
+  return c.el = s, c.render(), c;
 }
-function te(e, t) {
+function fe(e, t) {
   const { Components: n } = e, s = (r) => {
-    const { id: i, model: o } = r;
-    n.addType(i, {
+    const { id: o, model: i } = r;
+    n.addType(o, {
       model: {
         toJSON(...c) {
-          const l = o.prototype.toJSON.apply(this, c);
-          return l.tagName = this.tagName, l;
+          const a = i.prototype.toJSON.apply(this, c);
+          return a.tagName = this.tagName, a;
         }
       }
     });
   };
-  n.getTypes().forEach(s), e.on("component:type:add", s), Object.entries(t.components || {}).forEach(([r, i]) => {
-    var o;
+  n.getTypes().forEach(s), e.on("component:type:add", s), Object.entries(t.components || {}).forEach(([r, o]) => {
+    var m, u;
+    const { allowPropClassName: i, allowPropId: c, allowChildren: a } = o, f = !c && !i, l = () => ({
+      disabled: f
+    }), d = () => ({
+      disableClasses: !i,
+      disableComponent: !c
+    });
     n.addType(r, {
-      isComponent: (c) => (c == null ? void 0 : c.tagName) === r,
+      isComponent: (p) => (p == null ? void 0 : p.tagName) === r,
       model: {
         defaults: {
           type: r,
-          traits: i.props ? i.props() : [],
-          ...((o = i.model) == null ? void 0 : o.defaults) || {}
+          traits: ((m = o.props) == null ? void 0 : m.call(o)) || [],
+          droppable: !!a,
+          stylable: !f,
+          styleManager: l,
+          selectorManager: d,
+          ...((u = o.model) == null ? void 0 : u.defaults) || {}
         }
       }
     });
   });
 }
-function _(e) {
-  var k;
-  const { component: t, config: n, editor: s, frameView: r, onMount: i, tagName: o } = e, { connectDom: c, view: l } = Y(s, t, r), u = Z(t);
-  x(() => {
-    if (!l || !i) return;
-    const v = setTimeout(() => i(l));
-    return () => clearTimeout(v);
-  }, [l]);
-  const a = t.get("type") || "default", d = t.content, p = (k = n.components) == null ? void 0 : k[a], f = (p == null ? void 0 : p.component) || o || t.tagName || "div", C = t.components(), h = C.length ? C.map((v) => /* @__PURE__ */ m(_, { component: v, config: n, editor: s, frameView: r }, v.cid)) : d, g = H(t.getAttributes()), w = p == null ? void 0 : p.editorRender;
-  if (w)
-    return /* @__PURE__ */ m(w, { props: g, editor: s, component: t, connectDom: c, children: h });
-  if (p != null && p.component)
-    return /* @__PURE__ */ m("gjs-wrapper", { ref: c, children: /* @__PURE__ */ m(f, { ...g, children: h }) });
+function W(e) {
+  var S;
+  const { component: t, config: n, editor: s, frameView: r, onMount: o, tagName: i, children: c } = e, { key: a, view: f, connectDom: l } = le(e);
+  _(() => {
+    if (!f && !o) return;
+    const g = setTimeout(() => {
+      f && (o == null || o(f), setTimeout(() => f.postRender()));
+    });
+    return () => clearTimeout(g);
+  }, [f]);
+  const d = t.get("type") || "default", m = t.content, u = (S = n.components) == null ? void 0 : S[d], p = (u == null ? void 0 : u.component) || i || t.tagName || "div", h = t.components(), b = h.length ? h.map((g) => /* @__PURE__ */ y(W, { component: g, config: n, editor: s, frameView: r }, g.cid)) : [m || void 0], C = se(t.getAttributes()), E = u == null ? void 0 : u.editorRender, A = [...b, c].filter((g) => g ?? !1), k = A.length ? A : null;
+  if (E)
+    return /* @__PURE__ */ y(E, { props: C, editor: s, component: t, connectDom: l, children: k });
+  if (u != null && u.component)
+    return /* @__PURE__ */ y("gjs-wrapper", { ref: l, style: u.wrapperStyle, children: /* @__PURE__ */ y(p, { ...C, children: k }) });
   if (t.isInstanceOf("textnode"))
-    return d;
-  const D = t.isInstanceOf("text") ? u : void 0;
-  return /* @__PURE__ */ O(f, { ...g, ref: c, key: D }, t.get("void") ? null : h);
+    return m;
+  const B = t.isInstanceOf("text") ? a : void 0;
+  return /* @__PURE__ */ $(p, { ...C, ref: l, key: B }, t.get("void") ? null : k);
 }
-const ne = (e) => {
-  var i;
-  const { frame: t, window: n, onMount: s } = e, { root: r } = t;
+const ue = (e) => {
+  const { frame: t, window: n, onMount: s, editor: r } = e, o = r.Canvas.events, { root: i } = t;
   try {
-    (i = n.__reactRoot) == null || i.unmount(), n.__reactRoot = void 0;
-    const o = W(n.document.body);
-    o.render(/* @__PURE__ */ m(oe, { ...e, component: r, onMount: s })), n.__reactRoot = o;
-  } catch (o) {
-    console.error("Error setting up React renderer", o);
+    const c = j(n.document.body);
+    c.render(/* @__PURE__ */ y(de, { ...e, component: i, onMount: s }));
+    const a = () => c.unmount();
+    t.once(o.frameUnload, a), n.addEventListener("unload", a);
+  } catch (c) {
+    console.warn(c);
   }
-  return r.getView();
+  return i.getView();
 };
-function oe(e) {
-  const { editor: t, component: n, window: s, frameView: r, config: i, onMount: o } = e, c = s.document, l = i.wrapper || U, u = { editorProps: { doc: c, editor: t, frameView: r } }, a = i.wrapper ? u : {};
-  return /* @__PURE__ */ m(l, { ...a, children: /* @__PURE__ */ m(
-    _,
+function de(e) {
+  const { editor: t, component: n, window: s, frameView: r, config: o, onMount: i } = e, c = s.document, a = o.rootComponent || T, f = o.rootComponent ? { editorProps: { doc: c, editor: t, frameView: r } } : {}, l = (o == null ? void 0 : o.bodyAfter) || T;
+  return /* @__PURE__ */ y(a, { ...f, children: /* @__PURE__ */ y(
+    W,
     {
       tagName: "div",
       component: n,
-      config: i,
+      config: o,
       editor: t,
       frameView: r,
-      onMount: o
+      onMount: i,
+      children: /* @__PURE__ */ y(l, { ...f })
     }
   ) });
 }
-const se = "rendererReact", re = function(e, t = {}) {
-  e.Canvas.config.customRenderer = (n) => ne({ ...n, config: t }), te(e, t), F({
+const me = "rendererReact", ye = v.startup, he = function(e, t = {}) {
+  const { Blocks: n, Pages: s } = e, r = n.events, o = s.events;
+  e.Canvas.config.customRenderer = (c) => ue({ ...c, config: t }), e.Components.config.processor = (c) => w({ model: c, editor: e, config: t }), fe(e, t);
+  const i = [
+    [r.add, ie({ editor: e, config: t })],
+    [o.addBefore, ae({ editor: e, config: t })]
+  ];
+  i.forEach(([c, a]) => e.on(c, a)), Q({
     editor: e,
     licenseKey: t.licenseKey,
-    plan: y.startup,
-    pluginName: se,
+    plan: ye,
+    pluginName: me,
     cleanup: () => {
-      e.Canvas.config.customRenderer = void 0;
+      e.Canvas.config.customRenderer = void 0, e.Components.config.processor = void 0, i.forEach(([c, a]) => e.off(c, a));
     }
   });
-}, le = z(re);
+}, we = Z(he);
 export {
-  le as default
+  we as default
 };