${t}
`};G(r);let Xe=()=>{let t=F.getLanguage();return{title:k.querySelector("#code-to-img-title").textContent||"",activeEditor:i,[i]:{language:t,content:F.getValue()}}},H,f,O=()=>(f=Array.from(new FormData(b)).reduce((e,[a,l])=>({...e,[a.replace("code-to-img-","")]:l==="true"?!0:l==="false"?!1:l===""?void 0:isNaN(Number(l))?l:Number(l)}),{}),["lineNumbers","wordWrap","shadow","watermark"].forEach(e=>{e in f||(f[e]=!1)}),f),K=(t,e)=>{if(x.style.padding=t.padding+"px",x.style.margin=64-t.padding+"px",e)setTimeout(()=>{t.width=x.offsetWidth/x.parentElement.offsetWidth*100,b["code-to-img-width"].value=t.width},150);else{let a=t.bg1||"#f5f5dc",l=t.bg2||a,m=t.bgDirection||"to bottom";x.style.backgroundImage=`linear-gradient(${m}, ${a}, ${l})`,x.style.width=t.width+"%",w.style.width=x.offsetWidth-t.padding*2+"px"}},$=async(t=!1)=>{let e=O();F.changeSettings(e),K(e,t);let a=e.bg1||"#f5f5dc",l=e.bg2||a,m=e.bgDirection||"to bottom";x.style.backgroundImage=`linear-gradient(${m}, ${a}, ${l})`,w.style.borderRadius=e.borderRadius+"px",w.querySelector("pre").style.borderRadius=e.borderRadius+"px",w.querySelector("code").style.borderRadius=e.borderRadius+"px";let y=w.querySelector("pre"),M=w.querySelector("code"),E=()=>{if(y.style.background="",M.style.background="",e.opacity===1)return;let{r:Y,g:Q,b:X}=_e(getComputedStyle(y).backgroundColor);y.style.background=`rgba(${Y}, ${Q}, ${X}, ${e.opacity})`,M.style.background=`rgba(${Y}, ${Q}, ${X}, 0)`};setTimeout(E,50),setTimeout(E,200),setTimeout(E,500),setTimeout(E,1e3),setTimeout(E,2e3),w.classList.toggle("shadow",!!e.shadow),A.hidden=!e.watermark,A.classList.toggle("shadow",!!e.shadow),k.style.display=e.windowStyle==="none"?"none":"flex",k.querySelector("#code-to-img-windows").style.visibility=e.windowStyle==="windows"?"visible":"hidden",k.querySelector("#code-to-img-mac").style.visibility=e.windowStyle==="mac"?"visible":"hidden",e.watermark&&!H&&Z()},Z=async()=>{let t=Xe();if(f.watermark&&JSON.stringify(H)!==JSON.stringify(t)){H=t;let e=await h.getShareUrl(t);G(e)}},et=Ae($,500);d.addEventListener(b,"input",t=>{t?.target?.id==="code-to-img-editorTheme"&&(b["code-to-img-opacity"].value="1"),t?.target?.id==="code-to-img-opacity"?et():$(),["fileName","width"].map(e=>"code-to-img-"+e).includes(t?.target?.name)||(J("custom"),_("custom"))}),$(!0),d.addEventListener(window,"resize",()=>K(O(),!0));let tt=ze(Re,"htmlToImage"),W=async()=>{let t=await tt;await Z();let e=x,a=e.offsetWidth,l=e.offsetHeight,m=f.scale||1;return t[{png:"toPng",jpg:"toJpeg",svg:"toSvg"}[f.format]||"toPng"](e,{quality:1,width:a*m,height:l*m,style:{transform:`scale(${m})`,transformOrigin:"top left",margin:"0",width:`${a}px`,height:`${l}px`}})},v=g.querySelector("#code-to-img-save-btn");d.addEventListener(v,"click",async()=>{v.disabled=!0,v.classList.add("disabled");let t=v.innerText;v.innerText=window.deps.translateString("core.generating","Generating..."),W().then(e=>{We(f.fileName,f.format||"png",e)}).catch(()=>{u.error(window.deps.translateString("core.error.failedToSaveImage","Failed to save image"))}).finally(()=>{v.disabled=!1,v.classList.remove("disabled"),v.innerText=t})});let R=g.querySelector("#code-to-img-share-menu"),D=g.querySelector("#code-to-img-menu-btn");d.addEventListener(D,"click",()=>{let t=R.style.display;R.style.display=t==="block"?"none":"block"}),d.addEventListener(document,"click",t=>{!R||!D||t.target!==D&&!D.contains(t.target)&&(R.style.display="none")});let B=g.querySelector("#code-to-img-share-btn");d.addEventListener(B,"click",()=>{let t=B.innerText;B.innerText=window.deps.translateString("core.generating","Generating..."),W().then(async e=>{let a=await fetch(e).then(m=>m.blob()),l={files:[new File([a],`${f.fileName}.${f.format||"png"}`,{type:a.type})],title:"LiveCodes Code to Image"};await navigator.share(l)}).catch(()=>{u.error(window.deps.translateString("core.error.failedToShareImage","Failed to share image"))}).finally(()=>{B.innerText=t})});let N=g.querySelector("#code-to-img-copy-img-btn");d.addEventListener(N,"click",()=>{let t=N.innerText;N.innerText=window.deps.translateString("core.generating","Generating..."),W().then(async e=>{let a=await fetch(e).then(m=>m.blob());if(await Oe(a,f.format||"png")){u.success(window.deps.translateString("core.copy.copiedImage","Image copied to clipboard."));return}}).catch(()=>{u.error(window.deps.translateString("core.error.failedToCopyImage","Failed to copy image"))}).finally(()=>{N.innerText=t})});let ot=g.querySelector("#code-to-img-copy-code-btn");d.addEventListener(ot,"click",t=>{t.preventDefault();let e=F.getValue();He(e)?u.success(window.deps.translateString("core.copy.copied","Code copied to clipboard")):u.error(window.deps.translateString("core.error.failedToCopyCode","Failed to copy code"))});let q=h.getSavedPreset();q?q.id==="custom"?P(q):P(I.find(t=>t.id===q.id)||I[0]):P(I[0])},I=[{id:"preset_1",bg1:"#4a90e2",bg2:"#c162f5",bgDirection:"to bottom left",editorTheme:"one-dark",shadow:!0,windowStyle:"mac"},{id:"preset_2",bg1:"#48cae4",bg2:"#f562f5",bgDirection:"to bottom right",editorTheme:"laserwave",shadow:!0},{id:"preset_3",bg1:"#823bb9",bg2:"#f4a261",bgDirection:"to bottom right",editorTheme:"duotone-dark",windowStyle:"mac",shadow:!0},{id:"preset_4",bg1:"#c3ac75",bg2:"#ff8e38",borderRadius:15,shadow:!0,editorTheme:"darcula",opacity:.95,fontFamily:"fira-code"},{id:"preset_5",bg1:"#f5f5dc",bg2:"",bgDirection:"to bottom right",editorTheme:"dracula",shadow:!0},{id:"preset_6",bg1:"#deecdd",bg2:"#c1dfc4",bgDirection:"to bottom",shadow:!0,editorTheme:"tomorrow",opacity:1,windowStyle:"none",fontFamily:"nova-mono"},{id:"preset_7",bg1:"#fd978b",bg2:"#f9748f",windowStyle:"mac",shadow:!0,editorTheme:"holi-theme",opacity:.85},{id:"preset_8",bg1:"#e94057",bg2:"#a52c78",bgDirection:"to bottom left",shadow:!0,editorTheme:"funky",opacity:.95},{id:"preset_9",bg1:"#4cb88e",bg2:"#1e6267",bgDirection:"to bottom",shadow:!0,editorTheme:"holi-theme",fontFamily:"cascadia-code"},{id:"preset_10",bg1:"#07a2a2",bg2:"",editorTheme:"a11y-dark",shadow:!0},{id:"preset_11",bg1:"#4a90e2",bg2:"",editorTheme:"dracula",fontFamily:"monaspace-radon",shadow:!1},{id:"preset_12",bg1:"#48cae4",bg2:"#0096c7",shadow:!0,editorTheme:"shades-of-purple",windowStyle:"mac",fontFamily:"monofur",fontSize:16},{id:"preset_13",bg1:"#111c28",bg2:"#111c28",padding:10,borderRadius:0,shadow:!1,editorTheme:"coldark-dark",windowStyle:"none",fontFamily:"monaspace-krypton"},{id:"preset_14",bg1:"#f2daa1",bg2:"#998149",shadow:!0,editorTheme:"gruvbox-light",fontFamily:"jetbrains-mono"},{id:"preset_15",bg1:"#494949",bg2:"#494949",editorTheme:"coldark-cold",opacity:1,shadow:!0,windowStyle:"windows"},{id:"preset_16",bg1:"#243b55",bg2:"#141e30",bgDirection:"to right",shadow:!0,editorTheme:"vs",opacity:.95,windowStyle:"none",fontFamily:"sf-mono"},{id:"preset_17",bg1:"#ffffff",bg2:"#e2efff",shadow:!0,editorTheme:"coy-without-shadows",opacity:1,fontFamily:"hack"},{id:"custom"}],mt=`
import { useState } from "react";
export default function Counter() {
const [count, setCount] = useState(0);
const handleClick = () => setCount(count + 1);
return (
You clicked {count} times.