${xe()}
@@ -1687,14 +1695,14 @@
title="${project.title}"
class="bg-white ${data.selectedSize!=="none"?`border border-solid ${project.dark?"border-gray-800":"border-gray-200"} shadow-2xl shadow-blue-500`:""}"
style="${data.selectedSize==="none"?"width: 100%; height: 100%":`
- width: ${l}px;
- height: ${i}px;
- transform: scale(${Math.min(o/l,s/i)});
+ width: ${i}px;
+ height: ${l}px;
+ transform: scale(${Math.min(o/i,s/l)});
position: absolute;
top: 50%;
left: 50%;
- margin-top: -${i/2}px;
- margin-left: -${l/2}px;`}"
+ margin-top: -${l/2}px;
+ margin-left: -${i/2}px;`}"
allow="accelerometer *; bluetooth *; camera *; encrypted-media *; display-capture *; geolocation *; gyroscope *; microphone *; midi *; clipboard-read *; clipboard-write *; serial *; xr-spatial-tracking *"
allowfullscreen="true"
allowpaymentrequest="true"
@@ -1753,7 +1761,7 @@
${$e()}
${ke()}
-
`,d=document.querySelector(t);if(!d)return;let c=new DOMParser().parseFromString(n,"text/html");if(c.body.innerHTML.trim()===n.trim())return;if(App.initialRender)return d.innerHTML=n,renderPreview(!0),App.initialRender=!1,!1;let g=d.firstElementChild,h=c.body.firstElementChild;diffNodes(g,h)}};window.modifyRootVariable=t=>{let e=`
+
`,d=document.querySelector(t);if(!d)return;let c=new DOMParser().parseFromString(n,"text/html");if(c.body.innerHTML.trim()===n.trim())return;if(App.initialRender)return d.innerHTML=n,renderPreview(!0),App.initialRender=!1,!1;let f=d.firstElementChild,g=c.body.firstElementChild;diffNodes(f,g)}};window.modifyRootVariable=t=>{let e=`
Name:
@@ -1818,9 +1826,20 @@
document.querySelector('dialog[open]').querySelector('footer > button:last-child').onclick();
}
">
- `;Modal.render({title:"Add A Style",content:t,onLoad(){document.getElementById("vvrh9nxwk").focus(),document.getElementById("vvrh9nxwk").select()},onConfirm(){let e=document.getElementById("vvrh9nxwk").value;if(e){e=e.charAt(0).toLowerCase()+e.slice(1);let a=project.css.styles;data.breakpointKey&&data.stylesTarget&&(a=project.css.breakpoints[`${data.breakpointKey}px`]),a[`${e}`]?Modal.render({title:"Unable to add style!",content:"Style already exists!"}):a[e]={base:{},pseudos:[]}}else Modal.render({title:"Unable to add style",content:"No value detected!"})}})};window.addStylePropModal=(t,e)=>{let a=data.defaultValues,o=Object.keys(project.css.rootVariables).sort(),s=Object.keys(data.cssFixedValueProperties).sort(),r=Object.keys(data.cssRangedValueProperties).sort(),l=o.map(p=>`
+ `;Modal.render({title:"Add A Style",content:t,onLoad(){document.getElementById("vvrh9nxwk").focus(),document.getElementById("vvrh9nxwk").select()},onConfirm(){let e=document.getElementById("vvrh9nxwk").value;if(e){e=e.charAt(0).toLowerCase()+e.slice(1);let a=project.css.styles;data.breakpointKey&&data.stylesTarget&&(a=project.css.breakpoints[`${data.breakpointKey}px`]),a[`${e}`]?Modal.render({title:"Unable to add style!",content:"Style already exists!"}):a[e]={base:{},pseudos:[]}}else Modal.render({title:"Unable to add style",content:"No value detected!"})}})};window.duplicateStyle=()=>{let t=`
+
+ `;Modal.render({title:"Name your style",content:t,onLoad(){document.getElementById("vvrh9nxwk").focus(),document.getElementById("vvrh9nxwk").select()},onConfirm(){let e=document.getElementById("vvrh9nxwk").value;if(e){e=e.charAt(0).toLowerCase()+e.slice(1);let a=project.css.styles;data.breakpointKey&&data.stylesTarget&&(a=project.css.breakpoints[`${data.breakpointKey}px`]),a[`${e}`]?Modal.render({title:"Unable to add style!",content:"Style already exists!"}):a[e]=a[data.stylesTarget]}else Modal.render({title:"Unable to add style",content:"No value detected!"})}})};window.addStylePropModal=(t,e)=>{let a=data.defaultValues,o=Object.keys(project.css.rootVariables).sort(),s=Object.keys(data.cssFixedValueProperties).sort(),r=Object.keys(data.cssRangedValueProperties).sort(),i=o.map(p=>`
- `).join(""),i=s.map(p=>`
+ `).join(""),l=s.map(p=>`
`).join(""),n=r.map(p=>`
@@ -1830,10 +1849,10 @@
${data.canUseQuickCommands?`
You can also apply styles using
tailwind classes as quick commands!
-
`:""}`;Modal.render({title:`Add New Style to "${t}"`,content:d,onLoad(){document.getElementById("ool1zyibs").focus();let p=document.getElementById("property-type"),c=document.getElementById("property-unit"),g=document.getElementById("unit-section");function h(u){c.innerHTML="",data.cssRangedValueProperties[u]?(g.style.display=noUnitProperties.includes(u)?"none":"block",u.startsWith("animation")?unitOptions.animation.forEach($=>{c.innerHTML+=`
`}):transformUnits.includes(u)?unitOptions.transform.forEach($=>{c.innerHTML+=`
`}):unitOptions.default.forEach($=>{c.innerHTML+=`
`})):(data.cssFixedValueProperties[u],g.style.display="none")}p.onchange=function(){let u=this.value;h(u),document.getElementById("ool1zyibs").value=u}},onConfirm(){let p=document.getElementById("ool1zyibs").value.trim(),c=document.getElementById("property-unit")?document.getElementById("property-unit").value:"",g=["opacity","z-index"],h=data.cssQuickCommands;p.split(",").map($=>$.trim()).forEach($=>{let[w,x]=$.split("=").map(v=>v.trim());if(w=w.toLowerCase(),Object.keys(h).includes(w))h[w].split(";").filter(Boolean).forEach(y=>{let[C,L]=y.split(":").map(A=>A.trim());C=C.toLowerCase(),e[C]=L});else{let v;if(x)v=x+(c&&!g.includes(w)?c:"");else{let m=a[w]||a.default;v=c?`${m}${c}`:m}g.includes(w)?e[w]=x||"1":e[w]=v}}),App.render("#app"),renderPreview(),saveState()}})};window.renameStyleTarget=t=>{Modal.render({title:`Are you sure you want to rename the "${t}" style?`,content:`
+
`:""}`;Modal.render({title:`Add New Style to "${t}"`,content:d,onLoad(){document.getElementById("ool1zyibs").focus();let p=document.getElementById("property-type"),c=document.getElementById("property-unit"),f=document.getElementById("unit-section");function g(u){c.innerHTML="",data.cssRangedValueProperties[u]?(f.style.display=noUnitProperties.includes(u)?"none":"block",u.startsWith("animation")?unitOptions.animation.forEach(k=>{c.innerHTML+=`
`}):transformUnits.includes(u)?unitOptions.transform.forEach(k=>{c.innerHTML+=`
`}):unitOptions.default.forEach(k=>{c.innerHTML+=`
`})):(data.cssFixedValueProperties[u],f.style.display="none")}p.onchange=function(){let u=this.value;g(u),document.getElementById("ool1zyibs").value=u}},onConfirm(){let p=document.getElementById("ool1zyibs").value.trim(),c=document.getElementById("property-unit")?document.getElementById("property-unit").value:"",f=["opacity","z-index"],g=data.cssQuickCommands;p.split(",").map(k=>k.trim()).forEach(k=>{let[w,x]=k.split("=").map(v=>v.trim());if(w=w.toLowerCase(),Object.keys(g).includes(w))g[w].split(";").filter(Boolean).forEach(h=>{let[S,L]=h.split(":").map(P=>P.trim());S=S.toLowerCase(),e[S]=L});else{let v;if(x)v=x+(c&&!f.includes(w)?c:"");else{let m=a[w]||a.default;v=c?`${m}${c}`:m}f.includes(w)?e[w]=x||"1":e[w]=v}}),App.render("#app"),renderPreview(),saveState()}})};window.renameStyleTarget=t=>{Modal.render({title:`Are you sure you want to rename the "${t}" style?`,content:`
- `,onLoad(){document.getElementById("vvrh9nxwk").focus()},onConfirm(){let e=document.getElementById("vvrh9nxwk").value;e?project.css.animations[data.animationTarget].keyframes[`${e}`]?Modal.render({title:"Unable to add keyframe!",content:"Keyframe already exists!"}):(project.css.animations[data.animationTarget].keyframes[e]={},saveState()):Modal.render({title:"Unable to add keyframe",content:"No value detected!"})}})};window.deleteStyleProp=(t,e,a,o=null)=>{let s=null;o?(o==="breakpoints"&&(s=project.css.breakpoints[`${data.breakpointKey}px`][t][data.stylesPropTarget]),o==="animations"&&(s=project.css.animations[data.animationTarget].keyframes[data.animationKeyframe])):s=project.css.styles[t][data.stylesPropTarget],e in s&&delete s[`${e}`],saveState(),a.closest("dialog[open]").remove(),App.render("#app"),renderPreview()};window.clearStyles=(t,e,a)=>{project.css.styles[e]&&delete project.css[e];let o=!1;for(let s of t)s.style===e&&(s.style="",o=!0),s.children&&s.children.length>0&&clearStyles(s.children,e,()=>{o=!0}),o&&typeof a=="function"&&a()};window.styleModal=(t,e,a,o=null)=>{let s=data.cssFixedValueProperties,r=null;o&&(r=o);let l="";if(s[e]){let i=s[e].map(n=>`
+ `,onLoad(){document.getElementById("vvrh9nxwk").focus()},onConfirm(){let e=document.getElementById("vvrh9nxwk").value;e?project.css.animations[data.animationTarget].keyframes[`${e}`]?Modal.render({title:"Unable to add keyframe!",content:"Keyframe already exists!"}):(project.css.animations[data.animationTarget].keyframes[e]={},saveState()):Modal.render({title:"Unable to add keyframe",content:"No value detected!"})}})};window.deleteStyleProp=(t,e,a,o=null)=>{let s=null;o?(o==="breakpoints"&&(s=project.css.breakpoints[`${data.breakpointKey}px`][t][data.stylesPropTarget]),o==="animations"&&(s=project.css.animations[data.animationTarget].keyframes[data.animationKeyframe])):s=project.css.styles[t][data.stylesPropTarget],e in s&&delete s[`${e}`],saveState(),a.closest("dialog[open]").remove(),App.render("#app"),renderPreview()};window.clearStyles=(t,e,a)=>{project.css.styles[e]&&delete project.css[e];let o=!1;for(let s of t)s.style===e&&(s.style="",o=!0),s.children&&s.children.length>0&&clearStyles(s.children,e,()=>{o=!0}),o&&typeof a=="function"&&a()};window.styleModal=(t,e,a,o=null)=>{let s=data.cssFixedValueProperties,r=null;o&&(r=o);let i="";if(s[e]){let l=s[e].map(n=>`
- `).join("");l=`
+ `).join("");i=`
-
`}else l=`
+
`}else i=`
button:last-child').onclick();
}
"/>
-
`;l+=`
+
`;i+=`
-
`,Modal.render({title:`Modify "${e}" Style`,content:l,onLoad(){if(document.getElementById("new-value")){let i=document.getElementById("new-value");i.focus(),i.tagName.toLowerCase()==="input"&&i.select()}},onConfirm(){saveState();let i=document.getElementById("new-value").value,n=null;o?(o==="breakpoints"&&project.css.breakpoints[`${data.breakpointKey}px`][t][data.stylesPropTarget]&&(n=project.css.breakpoints[`${data.breakpointKey}px`][t][data.stylesPropTarget]),o==="animations"&&project.css.animations[data.animationTarget].keyframes[data.animationKeyframe]&&(n=project.css.animations[data.animationTarget].keyframes[data.animationKeyframe])):data.stylesPropTarget&&(n=project.css.styles[t][data.stylesPropTarget]),i===""?delete n[e]:n[e]=`${i}`,saveState(),App.render("#app"),renderPreview()}})};window.addPseudo=t=>{if(!project.css.styles[t])return;project.css.styles[t].pseudos||(project.css.styles[t].pseudos=[]);let o=`
+
`,Modal.render({title:`Modify "${e}" Style`,content:i,onLoad(){if(document.getElementById("new-value")){let l=document.getElementById("new-value");l.focus(),l.tagName.toLowerCase()==="input"&&l.select()}},onConfirm(){saveState();let l=document.getElementById("new-value").value,n=null;o?(o==="breakpoints"&&project.css.breakpoints[`${data.breakpointKey}px`][t][data.stylesPropTarget]&&(n=project.css.breakpoints[`${data.breakpointKey}px`][t][data.stylesPropTarget]),o==="animations"&&project.css.animations[data.animationTarget].keyframes[data.animationKeyframe]&&(n=project.css.animations[data.animationTarget].keyframes[data.animationKeyframe])):data.stylesPropTarget&&(n=project.css.styles[t][data.stylesPropTarget]),l===""?delete n[e]:n[e]=`${l}`,saveState(),App.render("#app"),renderPreview()}})};window.addPseudo=t=>{if(!project.css.styles[t])return;project.css.styles[t].pseudos||(project.css.styles[t].pseudos=[]);let o=`
- `;Modal.render({title:"Add A Pseudo-Class/Element",content:o,onLoad(){document.getElementById("pseudo-input").focus()},onConfirm(){let s=document.getElementById("pseudo-selector").value.trim(),r=document.getElementById("pseudo-input").value.trim();if(r){let l=r.split(";").reduce((n,d)=>{let[p,c]=d.split(":").map(g=>g.trim());return p&&c&&(n[p]=c),n},{}),i=project.css.styles[t].pseudos.find(n=>n.selector===r);if(i)i.styles={...i.styles,...l};else{let n={selector:r,styles:l};project.css.styles[t].pseudos.push(n)}App.render("#app"),renderPreview(),saveState()}else Modal.render({title:"Unable to add pseudo",content:"Please select a pseudo and enter valid CSS properties and values."})}})};window.renamePseudo=t=>{let o=`
+ `;Modal.render({title:"Add A Pseudo-Class/Element",content:o,onLoad(){document.getElementById("pseudo-input").focus()},onConfirm(){let s=document.getElementById("pseudo-selector").value.trim(),r=document.getElementById("pseudo-input").value.trim();if(r){let i=r.split(";").reduce((n,d)=>{let[p,c]=d.split(":").map(f=>f.trim());return p&&c&&(n[p]=c),n},{}),l=project.css.styles[t].pseudos.find(n=>n.selector===r);if(l)l.styles={...l.styles,...i};else{let n={selector:r,styles:i};project.css.styles[t].pseudos.push(n)}App.render("#app"),renderPreview(),saveState()}else Modal.render({title:"Unable to add pseudo",content:"Please select a pseudo and enter valid CSS properties and values."})}})};window.renamePseudo=t=>{let o=`
- `;Modal.render({title:`Are you sure you want to rename the "${t}" pseudo-class/element?`,content:o,onLoad(){document.getElementById("pseudo-name-input").focus()},onConfirm(){let s=document.getElementById("pseudo-name-input").value.trim();if(s){let r=project.css.styles[data.stylesTarget];if(!r||!r.pseudos)return;if(r.pseudos.find(n=>n.selector===s)){Modal.render({title:"Unable to rename pseudo!",content:"Pseudo with the new name already exists!"});return}let i=r.pseudos.findIndex(n=>n.selector===t);if(i===-1){Modal.render({title:"Pseudo not found!",content:`No pseudo with the name "${t}" found!`});return}r.pseudos[i].selector=s,App.render("#app"),saveState()}else Modal.render({title:"Unable to rename pseudo",content:"No value detected!"})}})};window.deletePseudo=()=>{let t=data.pseudosSelector,e=data.pseudosSelectorIndex;Modal.render({title:`Are you sure you want to delete the "${t}" pseudo-class/element?`,content:'
You will still be able to undo.
',onConfirm(){let o=project.css.styles[data.stylesTarget];!o||!o.pseudos||(data.pseudosSelector=null,data.pseudosSelectorIndex=0,o.pseudos.splice(e,1),saveState(),renderPreview())}})};window.fetchCssQuickCommands=async t=>{try{let e=await fetch(t);if(!e.ok)throw new Error("Network response was not ok");return data.canUseQuickCommands=!0,await e.json()}catch(e){console.error("Error fetching CSS quick commands:",e)}};window.applyCssQuickCommands=async t=>{let e=await fetchCssQuickCommands(t);e&&(data.cssQuickCommands=e)};window.addAttribute=t=>{if(!t)return;let e=t.toLowerCase().split(",").map(a=>a.trim().toLowerCase());data.selectedLayerIds.forEach(a=>{let{layer:o}=findLayerById(a,project.html);o&&(o.props||(o.props={}),saveState(),e.forEach(s=>{let[r,l]=s.split("=").map(i=>i.trim());r==="id"&&(l=generateId()),r in o.props?l!==void 0&&(o.props[r]=l):o.props[r]=l!==void 0?l:""}),saveState())})};window.html2json=t=>{function e(r){let l=data.boxElements,i=data.textElements,n=["br","hr","input","progress","optgroup","input","link","img","svg","path","polygon","rect","circle","ellipse","g","defs","clipPath"],d=r.tagName.toLowerCase(),p={tag:r.tagName.toLowerCase(),id:generateId(),style:"",state:{collapsed:!1,visible:!0,selected:!1}};if(p.name=d,l.includes(d)?(p.type="box",p.text=""):i.includes(d)?(p.type="text",p.text=""):(p.type=d,n.includes(d)||(p.text="")),r.hasAttributes()){let c={};Array.from(r.attributes).forEach(g=>{c[`${g.name.toLowerCase()}`]=`${g.value}`}),p.props=c}return r.childNodes.length>0&&(p.children=[],r.childNodes.forEach(c=>{c.nodeType===Node.ELEMENT_NODE?p.children.push(e(c)):c.nodeType===Node.TEXT_NODE&&c.nodeValue.trim()&&(p.text=c.nodeValue.trim())})),p}let o=new DOMParser().parseFromString(t,"text/html");return Array.from(o.body.children).map(r=>e(r))};window.json2html=t=>{function e(s){let r=i=>{let n="";if(i.state&&!i.state.visible)return n;if(!i.tag)return n+=i.text||"",n;if(n+=`<${i.tag}`,i.props)for(let[d,p]of Object.entries(i.props))n+=` ${d}="${p}"`;if(n+=">",i.text&&(n+=a(i.text)),i.children)for(let d of i.children)n+=r(d);return n+=``,n},l="";return Array.isArray(s)||(s=[s]),Array.isArray(s)&&s.forEach(i=>{l+=r(i)}),l}function a(s){let r={"&":"&","<":"<",">":">",'"':""","'":"'"};return s.replace(/[&<>"']/g,function(l){return r[l]})}function o(s){let r=e(s),l=" ",i="",n="";return r.split(/>\s*\r
-`,d.match(/^]*[^\/]$/)&&!d.startsWith("
{if(typeof t!="string")throw new Error("Input must be a CSS string");let e={rootVariables:{},styles:{},animations:{},breakpoints:{}},a=/@import\s+url\(['"]([^'"]+)['"]\);/g,o;for(;(o=a.exec(t))!==null;){let u=o[1].trim();project.libraries&&!project.libraries.includes(u)&&project.libraries.push(u)}t=t.replace(a,"");function s(u){return u.replace(/\/\*[\s\S]*?\*\//g,"").replace(/\/\/[^\n]*/g,"")}t=s(t);let r=/([^{@]+)\{([^}]+)\}/g,l=/@media\s*([^{]+)\s*\{([\s\S]*?\{[\s\S]*?\})\s*}/g,i=/@keyframes\s+([^{\s]+)\s*\{([^}]*\{[^}]*\}[^}]*)\}/g;function n(u,$,w){if(u=u.trim(),u===":root"){$.split(";").forEach(C=>{let[L,A]=C.split(":").map(q=>q.trim());L&&A&&(e.rootVariables[L]=A)});return}let x=u.match(/^(.*?)(::?[a-zA-Z0-9-]+)$/),v=u,m=null;x&&(v=x[1].trim(),m=x[2]),w[v]||(w[v]={});let y=w[v];if(m){y.pseudos=y.pseudos||[];let C={selector:m,styles:{}};y.pseudos.push(C),y=C.styles}else y.base=y.base||{},y=y.base;$.split(";").forEach(C=>{let[L,A]=C.split(":").map(q=>q.trim());L&&A&&(y[L]=A)})}function d(u,$){let w;for(;(w=r.exec(u))!==null;){let x=w[1].trim(),v=w[2].trim();n(x,v,$)}}function p(u,$){let w={};$.split("}").forEach(x=>{if(x=x.trim(),!x)return;let[v,m]=x.split("{").map(y=>y.trim());v&&(v.includes("to")||v.includes("from")||v.includes("%"))&&m.split(";").forEach(y=>{let[C,L]=y.split(":").map(A=>A.trim());C&&L&&(w[v]=w[v]||{},w[v][C]=L)})}),e.animations[u]={keyframes:w}}let c;for(;(c=l.exec(t))!==null;){let u=c[1].trim().split(")")[0].split(":")[1].trim(),$=c[2].trim(),w={};d($,w),e.breakpoints[u]=w}let g=t.replace(l,"");d(g,e.styles);let h;for(;(h=i.exec(t))!==null;){let u=h[1].trim(),$=h[2].trim();p(u,$)}return Object.keys(e.styles).forEach(u=>{Object.keys(e.styles[u]).length===0&&delete e.styles[u]}),e};window.json2css=t=>{let e="",a="",o=";",s="{",r="}";function l(p){return/var\(--/.test(p)}function i(p,c,g=0){let h=" ".repeat(g),u="",$=c.variables||{},w=c.base||{},x=c.pseudos||[],v=c.children||{};u+=`${h}${p} ${s}
-`;for(let[m,y]of Object.entries($))u+=`${h} ${a}${m}: ${y}${o}
-`;for(let[m,y]of Object.entries(w))l(y)&&(y=y.replace(/var\(--([a-zA-Z0-9-_]+)\)/g,(C,L)=>`var(--${L})`)),u+=`${h} ${m}: ${y}${o}
-`;u+=`${h}${r}
-`,x.forEach(({selector:m,styles:y})=>{u+=`${h}${p}${m} ${s}
-`;for(let[C,L]of Object.entries(y))l(L)&&(L=L.replace(/var\(--([a-zA-Z0-9-_]+)\)/g,(A,q)=>`var(--${q})`)),u+=`${h} ${C}: ${L}${o}
-`;u+=`${h}${r}
-`});for(let[m,y]of Object.entries(v))u+=i(`${p} ${m}`,y,g+1);return u}function n(p,c=0){let g=" ".repeat(c),h="";for(let[u,$]of Object.entries(p)){h+=`${g}@keyframes ${u} ${s}
-`;for(let[w,x]of Object.entries($.keyframes)){h+=`${g} ${w} ${s}
-`;for(let[v,m]of Object.entries(x))l(m)&&(m=m.replace(/var\(--([a-zA-Z0-9-_]+)\)/g,(y,C)=>`var(--${C})`)),h+=`${g} ${v}: ${m}${o}
-`;h+=`${g} ${r}
-`}h+=`${g}${r}
-`}return h}function d(p,c=0){let g=" ".repeat(c),h="";for(let[u,$]of Object.entries(p)){h+=`${g}@media (min-width: ${u}) ${s}
-`;for(let[w,x]of Object.entries($))h+=i(w,x,c+1);h+=`${g}${r}
-`}return h}if(t.rootVariables&&Object.keys(t.rootVariables).length){e+=`:root {
+ `;Modal.render({title:`Are you sure you want to rename the "${t}" pseudo-class/element?`,content:o,onLoad(){document.getElementById("pseudo-name-input").focus()},onConfirm(){let s=document.getElementById("pseudo-name-input").value.trim();if(s){let r=project.css.styles[data.stylesTarget];if(!r||!r.pseudos)return;if(r.pseudos.find(n=>n.selector===s)){Modal.render({title:"Unable to rename pseudo!",content:"Pseudo with the new name already exists!"});return}let l=r.pseudos.findIndex(n=>n.selector===t);if(l===-1){Modal.render({title:"Pseudo not found!",content:`No pseudo with the name "${t}" found!`});return}r.pseudos[l].selector=s,App.render("#app"),saveState()}else Modal.render({title:"Unable to rename pseudo",content:"No value detected!"})}})};window.deletePseudo=()=>{let t=data.pseudosSelector,e=data.pseudosSelectorIndex;Modal.render({title:`Are you sure you want to delete the "${t}" pseudo-class/element?`,content:'You will still be able to undo.
',onConfirm(){let o=project.css.styles[data.stylesTarget];!o||!o.pseudos||(data.pseudosSelector=null,data.pseudosSelectorIndex=0,o.pseudos.splice(e,1),saveState(),renderPreview())}})};window.fetchCssQuickCommands=async t=>{try{let e=await fetch(t);if(!e.ok)throw new Error("Network response was not ok");return data.canUseQuickCommands=!0,await e.json()}catch(e){console.error("Error fetching CSS quick commands:",e)}};window.applyCssQuickCommands=async t=>{let e=await fetchCssQuickCommands(t);e&&(data.cssQuickCommands=e)};window.addAttribute=t=>{if(!t)return;let e=t.toLowerCase().split(",").map(a=>a.trim().toLowerCase());data.selectedLayerIds.forEach(a=>{let{layer:o}=findLayerById(a,project.html);o&&(o.props||(o.props={}),saveState(),e.forEach(s=>{let[r,i]=s.split("=").map(l=>l.trim());r==="id"&&(i=generateId()),r in o.props?i!==void 0&&(o.props[r]=i):o.props[r]=i!==void 0?i:""}),saveState())})};window.html2json=t=>{function e(r){let i=data.boxElements,l=data.textElements,n=["br","hr","input","progress","optgroup","input","link","img","svg","path","polygon","rect","circle","ellipse","g","defs","clipPath"],d=r.tagName.toLowerCase(),p={tag:r.tagName.toLowerCase(),id:generateId(),style:"",state:{collapsed:!1,visible:!0,selected:!1}};if(p.name=d,i.includes(d)?(p.type="box",p.text=""):l.includes(d)?(p.type="text",p.text=""):(p.type=d,n.includes(d)||(p.text="")),r.hasAttributes()){let c={};Array.from(r.attributes).forEach(f=>{c[`${f.name.toLowerCase()}`]=`${f.value}`}),p.props=c}return r.childNodes.length>0&&(p.children=[],r.childNodes.forEach(c=>{c.nodeType===Node.ELEMENT_NODE?p.children.push(e(c)):c.nodeType===Node.TEXT_NODE&&c.nodeValue.trim()&&(p.text=c.nodeValue.trim())})),p}let o=new DOMParser().parseFromString(t,"text/html");return Array.from(o.body.children).map(r=>e(r))};window.json2html=t=>{function e(s){let r=l=>{let n="";if(l.state&&!l.state.visible)return n;if(!l.tag)return n+=l.text||"",n;if(n+=`<${l.tag}`,l.props)for(let[d,p]of Object.entries(l.props))n+=` ${d}="${p}"`;if(n+=">",l.text&&(l.tag==="style"||l.tag==="script"?n+=l.text:n+=a(l.text)),l.children)for(let d of l.children)n+=r(d);return n+=``,n},i="";return Array.isArray(s)||(s=[s]),Array.isArray(s)&&s.forEach(l=>{i+=r(l)}),i}function a(s){let r={"&":"&","<":"<",">":">",'"':""","'":"'"};return s.replace(/[&<>"']/g,function(i){return r[i]})}function o(s){let r=e(s),i=" ",l="",n="";return r.split(/>\s*\r
+`,d.match(/^]*[^\/]$/)&&!d.startsWith("{if(typeof t!="string")throw new Error("Input must be a CSS string");let e={rootVariables:{},styles:{},animations:{},breakpoints:{}},a=/@import\s+url\(['"]([^'"]+)['"]\);/g,o;for(;(o=a.exec(t))!==null;){let u=o[1].trim();project.libraries&&!project.libraries.includes(u)&&project.libraries.push(u)}t=t.replace(a,"");function s(u){return u.replace(/\/\*[\s\S]*?\*\//g,"").replace(/\/\/[^\n]*/g,"")}t=s(t);let r=/([^{@]+)\{([^}]+)\}/g,i=/@media\s*([^{]+)\s*\{([\s\S]*?\{[\s\S]*?\})\s*}/g,l=/@keyframes\s+([^{\s]+)\s*\{([^}]*\{[^}]*\}[^}]*)\}/g;function n(u,k,w){if(u=u.trim(),u===":root"){k.split(";").forEach(S=>{let[L,P]=S.split(":").map(O=>O.trim());L&&P&&(e.rootVariables[L]=P)});return}let x=u.match(/^(.*?)(::?[a-zA-Z0-9-]+)$/),v=u,m=null;x&&(v=x[1].trim(),m=x[2]),w[v]||(w[v]={});let h=w[v];if(m){h.pseudos=h.pseudos||[];let S={selector:m,styles:{}};h.pseudos.push(S),h=S.styles}else h.base=h.base||{},h=h.base;k.split(";").forEach(S=>{let[L,P]=S.split(":").map(O=>O.trim());L&&P&&(h[L]=P)})}function d(u,k){let w;for(;(w=r.exec(u))!==null;){let x=w[1].trim(),v=w[2].trim();n(x,v,k)}}function p(u,k){let w={};k.split("}").forEach(x=>{if(x=x.trim(),!x)return;let[v,m]=x.split("{").map(h=>h.trim());v&&(v.includes("to")||v.includes("from")||v.includes("%"))&&m.split(";").forEach(h=>{let[S,L]=h.split(":").map(P=>P.trim());S&&L&&(w[v]=w[v]||{},w[v][S]=L)})}),e.animations[u]={keyframes:w}}let c;for(;(c=i.exec(t))!==null;){let u=c[1].trim().split(")")[0].split(":")[1].trim(),k=c[2].trim(),w={};d(k,w),e.breakpoints[u]=w}let f=t.replace(i,"");d(f,e.styles);let g;for(;(g=l.exec(t))!==null;){let u=g[1].trim(),k=g[2].trim();p(u,k)}return Object.keys(e.styles).forEach(u=>{Object.keys(e.styles[u]).length===0&&delete e.styles[u]}),e};window.json2css=t=>{let e="",a="",o=";",s="{",r="}";function i(p){return/var\(--/.test(p)}function l(p,c,f=0){let g=" ".repeat(f),u="",k=c.variables||{},w=c.base||{},x=c.pseudos||[],v=c.children||{};u+=`${g}${p} ${s}
+`;for(let[m,h]of Object.entries(k))u+=`${g} ${a}${m}: ${h}${o}
+`;for(let[m,h]of Object.entries(w))i(h)&&(h=h.replace(/var\(--([a-zA-Z0-9-_]+)\)/g,(S,L)=>`var(--${L})`)),u+=`${g} ${m}: ${h}${o}
+`;u+=`${g}${r}
+`,x.forEach(({selector:m,styles:h})=>{u+=`${g}${p}${m} ${s}
+`;for(let[S,L]of Object.entries(h))i(L)&&(L=L.replace(/var\(--([a-zA-Z0-9-_]+)\)/g,(P,O)=>`var(--${O})`)),u+=`${g} ${S}: ${L}${o}
+`;u+=`${g}${r}
+`});for(let[m,h]of Object.entries(v))u+=l(`${p} ${m}`,h,f+1);return u}function n(p,c=0){let f=" ".repeat(c),g="";for(let[u,k]of Object.entries(p)){g+=`${f}@keyframes ${u} ${s}
+`;for(let[w,x]of Object.entries(k.keyframes)){g+=`${f} ${w} ${s}
+`;for(let[v,m]of Object.entries(x))i(m)&&(m=m.replace(/var\(--([a-zA-Z0-9-_]+)\)/g,(h,S)=>`var(--${S})`)),g+=`${f} ${v}: ${m}${o}
+`;g+=`${f} ${r}
+`}g+=`${f}${r}
+`}return g}function d(p,c=0){let f=" ".repeat(c),g="";for(let[u,k]of Object.entries(p)){g+=`${f}@media (min-width: ${u}) ${s}
+`;for(let[w,x]of Object.entries(k))g+=l(w,x,c+1);g+=`${f}${r}
+`}return g}if(t.rootVariables&&Object.keys(t.rootVariables).length){e+=`:root {
`;for(let[p,c]of Object.entries(t.rootVariables))e+=` ${p}: ${c}${o}
`;e+=`}
-`}for(let[p,c]of Object.entries(t.styles)){if(!c||!Object.keys(c.variables||{}).length&&!Object.keys(c.base||{}).length&&!Object.keys(c.pseudos||{}).length&&!Object.keys(c.children||{}).length)continue;e+=i(p,c)}return Object.keys(t.animations||{}).length&&(e+=n(t.animations)),Object.keys(t.breakpoints||{}).length&&(e+=d(t.breakpoints)),e};window.json2preprocessor=t=>{let e="",a="",o=";",s="{",r="}";data.preprocessors.includes(project.convertTo)&&((project.convertTo==="sass"||project.convertTo==="scss")&&(a="$"),project.convertTo==="sass"&&(o="",s="",r=""),project.convertTo==="less"&&(a="@"));function l(c){return/var\(--/.test(c)}function i(c,g,h=0){let u=" ".repeat(h),$="",w=g.variables||{},x=g.base||{},v=g.pseudos||[],m=g.children||{};$+=`${u}${c} ${s}
-`;for(let[y,C]of Object.entries(w))$+=`${u} ${a}${y}: ${C}${o}
-`;for(let[y,C]of Object.entries(x))y.startsWith("--")&&(y=y.split("--").join(a)),l(C)&&(C=C.replace(/var\(--([a-zA-Z0-9-_]+)\)/g,(L,A)=>y.startsWith("--")?`${a}${A}`:`${a}${A}`)),$+=`${u} ${y}: ${C}${o}
-`;if(v.forEach(({selector:y,styles:C})=>{$+=`${u} &${y} ${s}
-`;for(let[L,A]of Object.entries(C))l(A)&&(A=A.replace(/var\(--([a-zA-Z0-9-_]+)\)/g,(q,U)=>`${a}${U}`)),$+=`${u} ${L}: ${A}${o}
-`;$+=`${u} ${r}
-`}),m)for(let[y,C]of Object.entries(m))$+=i(`${c} ${y}`,C,h+1);return $+=`${u}${r}
-`,$}function n(c,g=0){let h=" ".repeat(g),u="";for(let[$,w]of Object.entries(c)){u+=`${h}@keyframes ${$} ${s}
-`;for(let[x,v]of Object.entries(w.keyframes)){u+=`${h} ${x} ${s}
-`;for(let[m,y]of Object.entries(v))l(y)&&(y=y.replace(/var\(--([a-zA-Z0-9-_]+)\)/g,(C,L)=>`${a}${L}`)),u+=`${h} ${m}: ${y}${o}
-`;u+=`${h} ${r}
-`}u+=`${h}${r}
-`}return u}function d(c,g=0){let h=" ".repeat(g),u="";for(let[$,w]of Object.entries(c)){u+=`${h}@media (max-width: ${$}) ${s}
-`;for(let[x,v]of Object.entries(w.base||{}))u+=i(x,v,g+1);u+=`${h}${r}
-`}return u}let p=[];if(t.rootVariables&&Object.keys(t.rootVariables).length){for(let[c,g]of Object.entries(t.rootVariables))p.push(c),e+=`${a}${c.split("--").join("")}: ${g}${o}
+`}for(let[p,c]of Object.entries(t.styles)){if(!c||!Object.keys(c.variables||{}).length&&!Object.keys(c.base||{}).length&&!Object.keys(c.pseudos||{}).length&&!Object.keys(c.children||{}).length)continue;e+=l(p,c)}return Object.keys(t.animations||{}).length&&(e+=n(t.animations)),Object.keys(t.breakpoints||{}).length&&(e+=d(t.breakpoints)),e};window.json2preprocessor=t=>{let e="",a="",o=";",s="{",r="}";data.preprocessors.includes(project.convertTo)&&((project.convertTo==="sass"||project.convertTo==="scss")&&(a="$"),project.convertTo==="sass"&&(o="",s="",r=""),project.convertTo==="less"&&(a="@"));function i(c){return/var\(--/.test(c)}function l(c,f,g=0){let u=" ".repeat(g),k="",w=f.variables||{},x=f.base||{},v=f.pseudos||[],m=f.children||{};k+=`${u}${c} ${s}
+`;for(let[h,S]of Object.entries(w))k+=`${u} ${a}${h}: ${S}${o}
+`;for(let[h,S]of Object.entries(x))h.startsWith("--")&&(h=h.split("--").join(a)),i(S)&&(S=S.replace(/var\(--([a-zA-Z0-9-_]+)\)/g,(L,P)=>h.startsWith("--")?`${a}${P}`:`${a}${P}`)),k+=`${u} ${h}: ${S}${o}
+`;if(v.forEach(({selector:h,styles:S})=>{k+=`${u} &${h} ${s}
+`;for(let[L,P]of Object.entries(S))i(P)&&(P=P.replace(/var\(--([a-zA-Z0-9-_]+)\)/g,(O,U)=>`${a}${U}`)),k+=`${u} ${L}: ${P}${o}
+`;k+=`${u} ${r}
+`}),m)for(let[h,S]of Object.entries(m))k+=l(`${c} ${h}`,S,g+1);return k+=`${u}${r}
+`,k}function n(c,f=0){let g=" ".repeat(f),u="";for(let[k,w]of Object.entries(c)){u+=`${g}@keyframes ${k} ${s}
+`;for(let[x,v]of Object.entries(w.keyframes)){u+=`${g} ${x} ${s}
+`;for(let[m,h]of Object.entries(v))i(h)&&(h=h.replace(/var\(--([a-zA-Z0-9-_]+)\)/g,(S,L)=>`${a}${L}`)),u+=`${g} ${m}: ${h}${o}
+`;u+=`${g} ${r}
+`}u+=`${g}${r}
+`}return u}function d(c,f=0){let g=" ".repeat(f),u="";for(let[k,w]of Object.entries(c)){u+=`${g}@media (max-width: ${k}) ${s}
+`;for(let[x,v]of Object.entries(w.base||{}))u+=l(x,v,f+1);u+=`${g}${r}
+`}return u}let p=[];if(t.rootVariables&&Object.keys(t.rootVariables).length){for(let[c,f]of Object.entries(t.rootVariables))p.push(c),e+=`${a}${c.split("--").join("")}: ${f}${o}
`;e+=`
-`}for(let[c,g]of Object.entries(t.styles)){if(!g||!Object.keys(g.variables||{}).length&&!Object.keys(g.base||{}).length&&!Object.keys(g.pseudos||{}).length&&!Object.keys(g.children||{}).length)continue;e+=i(c,g)}return Object.keys(t.animations||{}).length&&(e+=n(t.animations)),Object.keys(t.breakpoints||{}).length&&(e+=d(t.breakpoints)),e};window.mergeCSSJSON=(t,e)=>{if(typeof t=="string")throw new Error("Input's must be JSON");return Object.assign(t.rootVariables,e.rootVariables),Object.keys(e.styles).forEach(a=>{t.styles[a]?(e.styles[a].base&&(t.styles[a].base={...t.styles[a].base,...e.styles[a].base}),e.styles[a].pseudos&&(t.styles[a].pseudos=[...t.styles[a].pseudos||[],...e.styles[a].pseudos])):t.styles[a]=e.styles[a]}),Object.keys(e.animations).forEach(a=>{t.animations[a]?(t.animations[a].keyframes={...t.animations[a].keyframes,...e.animations[a].keyframes},t.animations[a].properties={...t.animations[a].properties,...e.animations[a].properties}):t.animations[a]=e.animations[a]}),Object.keys(e.breakpoints).forEach(a=>{t.breakpoints[a]?Object.keys(e.breakpoints[a]).forEach(o=>{t.breakpoints[a][o]?t.breakpoints[a][o].base={...t.breakpoints[a][o].base,...e.breakpoints[a][o].base}:t.breakpoints[a][o]=e.breakpoints[a][o]}):t.breakpoints[a]=e.breakpoints[a]}),t};window.fetchCssFile=async t=>(await fetch(t)).text();window.generateCssQuickCommands=async t=>{let e=await fetchCssFile(t),a=new CSSStyleSheet;await a.replace(e);let o={};for(let s of a.cssRules)if(s.type===CSSRule.STYLE_RULE&&!s.selectorText.includes(":")&&!s.selectorText.includes("@keyframes")){let r=s.selectorText.replace(".","");if(r){let l=Array.from(s.style).filter(i=>!i.startsWith("animation")&&!i.startsWith("transition")).map(i=>`${i}: ${s.style[i]};`).join(" ");o[r]=l}}return o};window.saveState=()=>{let t={rootVariables:project.css.rootVariables,styles:project.css,html:project.html,selectedLayerIds:data.selectedLayerIds},e=JSON.stringify(t);(data.history.length===0||data.history[data.historyIndex]!==e)&&(data.history=data.history.slice(0,data.historyIndex+1),data.history.push(e),data.historyIndex++,localStorage.setItem("Polyrise",JSON.stringify(project)))};window.undo=()=>{if(data.historyIndex>0){data.editorNavState=!0,data.historyIndex--;let t=JSON.parse(data.history[data.historyIndex]);project.css.rootVariables=t.rootVariables,project.css=t.styles,project.html=t.html,data.selectedLayerIds=t.selectedLayerIds,data.editorNavState=null}};window.redo=()=>{if(data.historyIndex{Modal.render({title:"Paste Custom Code",content:`
+`}for(let[c,f]of Object.entries(t.styles)){if(!f||!Object.keys(f.variables||{}).length&&!Object.keys(f.base||{}).length&&!Object.keys(f.pseudos||{}).length&&!Object.keys(f.children||{}).length)continue;e+=l(c,f)}return Object.keys(t.animations||{}).length&&(e+=n(t.animations)),Object.keys(t.breakpoints||{}).length&&(e+=d(t.breakpoints)),e};window.mergeCSSJSON=(t,e)=>{if(typeof t=="string")throw new Error("Input's must be JSON");return Object.assign(t.rootVariables,e.rootVariables),Object.keys(e.styles).forEach(a=>{t.styles[a]?(e.styles[a].base&&(t.styles[a].base={...t.styles[a].base,...e.styles[a].base}),e.styles[a].pseudos&&(t.styles[a].pseudos=[...t.styles[a].pseudos||[],...e.styles[a].pseudos])):t.styles[a]=e.styles[a]}),Object.keys(e.animations).forEach(a=>{t.animations[a]?(t.animations[a].keyframes={...t.animations[a].keyframes,...e.animations[a].keyframes},t.animations[a].properties={...t.animations[a].properties,...e.animations[a].properties}):t.animations[a]=e.animations[a]}),Object.keys(e.breakpoints).forEach(a=>{t.breakpoints[a]?Object.keys(e.breakpoints[a]).forEach(o=>{t.breakpoints[a][o]?t.breakpoints[a][o].base={...t.breakpoints[a][o].base,...e.breakpoints[a][o].base}:t.breakpoints[a][o]=e.breakpoints[a][o]}):t.breakpoints[a]=e.breakpoints[a]}),t};window.fetchCssFile=async t=>(await fetch(t)).text();window.generateCssQuickCommands=async t=>{let e=await fetchCssFile(t),a=new CSSStyleSheet;await a.replace(e);let o={};for(let s of a.cssRules)if(s.type===CSSRule.STYLE_RULE&&!s.selectorText.includes(":")&&!s.selectorText.includes("@keyframes")){let r=s.selectorText.replace(".","");if(r){let i=Array.from(s.style).filter(l=>!l.startsWith("animation")&&!l.startsWith("transition")).map(l=>`${l}: ${s.style[l]};`).join(" ");o[r]=i}}return o};window.saveState=()=>{let t={rootVariables:project.css.rootVariables,styles:project.css,html:project.html,selectedLayerIds:data.selectedLayerIds},e=JSON.stringify(t);(data.history.length===0||data.history[data.historyIndex]!==e)&&(data.history=data.history.slice(0,data.historyIndex+1),data.history.push(e),data.historyIndex++,localStorage.setItem("Polyrise",JSON.stringify(project)))};window.undo=()=>{if(data.historyIndex>0){data.editorNavState=!0,data.historyIndex--;let t=JSON.parse(data.history[data.historyIndex]);project.css.rootVariables=t.rootVariables,project.css=t.styles,project.html=t.html,data.selectedLayerIds=t.selectedLayerIds,data.editorNavState=null}};window.redo=()=>{if(data.historyIndex{Modal.render({title:"Paste Custom Code",content:`
- `,onLoad(){document.getElementById("op95hyy3l").focus(),document.getElementById("op95hyy3l").select()},onConfirm:function(){let t=document.getElementById("bvk1c6j4o").value,e=document.getElementById("op95hyy3l").value;if(t==="html")addBlock(e);else{e=minifyCSS(e);let a=css2json(e);mergeCSSJSON(project.css,a),renderPreview()}}})};window.addLibrary=t=>{if(!t)return project.libraries.push(""),document.getElementById("librariesBox").innerHTML=renderLibraries(),!1;project.libraries.includes(t)?console.error(`Library already exists: ${t}`):project.libraries.push(t),document.getElementById("librariesBox")&&(document.getElementById("librariesBox").innerHTML=renderLibraries())};window.renderLibraries=()=>project.libraries.map((t,e)=>`
+ `,onLoad(){document.getElementById("op95hyy3l").focus(),document.getElementById("op95hyy3l").select()},onConfirm(){let t=document.getElementById("bvk1c6j4o").value,e=document.getElementById("op95hyy3l").value;if(t==="html")addBlock(e);else{e=minifyCSS(e);let a=css2json(e);mergeCSSJSON(project.css,a),renderPreview()}}})};window.addLibrary=t=>{if(!t)return project.libraries.push(""),document.getElementById("librariesBox").innerHTML=renderLibraries(),!1;project.libraries.includes(t)?console.error(`Library already exists: ${t}`):project.libraries.push(t),document.getElementById("librariesBox")&&(document.getElementById("librariesBox").innerHTML=renderLibraries())};window.renderLibraries=()=>project.libraries.map((t,e)=>`