Upload 55 files

assets/index--s2Am3jC.js

@@ -0,0 +1,70 @@
+import{r as u,a as rt,g as lt}from"./react-vendor-DzFEYc3-.js";import{G as ct,R as he,T as Ae,K as we,I as Ke,S as dt,L as gt,a as ut}from"./konva-vendor-D3j_lOcf.js";(function(){const i=document.createElement("link").relList;if(i&&i.supports&&i.supports("modulepreload"))return;for(const r of document.querySelectorAll('link[rel="modulepreload"]'))c(r);new MutationObserver(r=>{for(const a of r)if(a.type==="childList")for(const d of a.addedNodes)d.tagName==="LINK"&&d.rel==="modulepreload"&&c(d)}).observe(document,{childList:!0,subtree:!0});function n(r){const a={};return r.integrity&&(a.integrity=r.integrity),r.referrerPolicy&&(a.referrerPolicy=r.referrerPolicy),r.crossOrigin==="use-credentials"?a.credentials="include":r.crossOrigin==="anonymous"?a.credentials="omit":a.credentials="same-origin",a}function c(r){if(r.ep)return;r.ep=!0;const a=n(r);fetch(r.href,a)}})();var qe={exports:{}},Le={};/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var ht=u,pt=Symbol.for("react.element"),ft=Symbol.for("react.fragment"),xt=Object.prototype.hasOwnProperty,mt=ht.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,yt={key:!0,ref:!0,__self:!0,__source:!0};function Je(e,i,n){var c,r={},a=null,d=null;n!==void 0&&(a=""+n),i.key!==void 0&&(a=""+i.key),i.ref!==void 0&&(d=i.ref);for(c in i)xt.call(i,c)&&!yt.hasOwnProperty(c)&&(r[c]=i[c]);if(e&&e.defaultProps)for(c in i=e.defaultProps,i)r[c]===void 0&&(r[c]=i[c]);return{$$typeof:pt,type:e,key:a,ref:d,props:r,_owner:mt.current}}Le.Fragment=ft;Le.jsx=Je;Le.jsxs=Je;qe.exports=Le;var t=qe.exports,Ve,_e=rt;Ve=_e.createRoot,_e.hydrateRoot;function wt({selected:e=!1}){return t.jsx("div",{style:{position:"relative",width:"32px",height:"32px"},children:t.jsx("img",{alt:"Layout",style:{display:"block",width:"100%",height:"100%"},src:e?"/assets/sidebar icons/icon-Layout-selected.svg":"/assets/sidebar icons/icon-Layout-default.svg"})})}function bt(){return t.jsx("div",{style:{width:"32px",height:"32px",position:"relative"},children:t.jsx("img",{alt:"Huggy",style:{display:"block",width:"100%",height:"100%"},src:"/assets/sidebar icons/icon-addHuggy.svg"})})}function vt({selected:e=!1}){return t.jsx("div",{style:{position:"relative",width:"32px",height:"32px"},children:t.jsx("img",{alt:"Hub Icons",style:{display:"block",width:"100%",height:"100%"},src:e?"/assets/sidebar icons/icon-addIcons-selected.svg":"/assets/sidebar icons/icon-addIcons-default.svg"})})}function St({selected:e=!1}){return t.jsx("div",{style:{position:"relative",width:"32px",height:"32px"},children:t.jsx("img",{alt:"Image",style:{display:"block",width:"100%",height:"100%"},src:e?"/assets/sidebar icons/icon-addImage-selected.svg":"/assets/sidebar icons/icon-addImage-default.svg"})})}function kt({selected:e=!1}){return t.jsx("div",{style:{position:"relative",width:"32px",height:"32px"},children:t.jsx("img",{alt:"Text",style:{display:"block",width:"100%",height:"100%"},src:e?"/assets/sidebar icons/icon-addText-selected.svg":"/assets/sidebar icons/icon-addText-default.svg"})})}const Ze={seriousCollab:{id:"seriousCollab",name:"Serious Collab",thumbnail:"/assets/layouts/sCollab_thumbnail.png",variants:{default:[{id:"hf-logo",type:"image",x:716.18,y:235.81,width:220.16,height:204.39,rotation:0,zIndex:1,src:"/assets/layouts/HF logo.png",name:"HF Logo"},{id:"logo-placeholder",type:"image",x:241.94,y:210.44,width:262.31,height:255.13,rotation:0,zIndex:2,src:"/assets/layouts/logo_placehoder.png",name:"Logo Placeholder"},{id:"x-icon",type:"image",x:619.01,y:329.12,width:16.76,height:16.76,rotation:0,zIndex:3,src:"/assets/layouts/collabX.svg",name:"X Icon"}],hf:[{id:"hf-logo",type:"image",x:707.04,y:187.805,width:220.16,height:204.39,rotation:0,zIndex:1,src:"/assets/layouts/HF logo.png",name:"HF Logo"},{id:"logo-placeholder",type:"image",x:232.8,y:162.435,width:262.31,height:255.13,rotation:0,zIndex:2,src:"/assets/layouts/logo_placehoder.png",name:"Logo Placeholder"},{id:"x-icon",type:"image",x:609.87,y:281.115,width:16.76,height:16.76,rotation:0,zIndex:3,src:"/assets/layouts/collabX.svg",name:"X Icon"}]}},funCollab:{id:"funCollab",name:"Fun Collab",thumbnail:"/assets/layouts/fCollab_thumbnail.png",variants:{default:[{id:"title-text",type:"text",x:124,y:81.58,width:945.2583618164062,height:140,rotation:0,zIndex:1,text:"Pretty Short Title",fontSize:111.43,fontFamily:"Inter",fill:"#8a97ba",bold:!0,italic:!1,align:"center"},{id:"logo-placeholder",type:"image",x:278.6,y:232.76,width:311.73,height:306.01,rotation:351.366,zIndex:3,src:"/assets/layouts/logo_placehoder.png",name:"Logo Placeholder"},{id:"huggy-hand",type:"image",x:444.31341928814203,y:195.24545949041132,width:249.0715804458829,height:249.0715804458829,rotation:0,zIndex:2,src:"/assets/layouts/fCollab_huggy_hand_asset.png",name:"Huggy Hand"},{id:"huggy-group",type:"image",x:540.8452299149437,y:66.99999999999994,width:536.0247700850559,height:524.6602873270689,rotation:0,zIndex:4,src:"/assets/layouts/fCollab_huggy_asset.png",name:"Huggy Group"}],hf:[{id:"title-text",type:"text",x:107.37081909179688,y:72.58,width:945.2583618164062,height:140,rotation:0,zIndex:1,text:"Pretty Short Title",fontSize:111.43,fontFamily:"Inter",fill:"#8a97ba",bold:!0,italic:!1,align:"center"},{id:"logo-placeholder",type:"image",x:220.6,y:219.76,width:311.73,height:306.01,rotation:351.366,zIndex:3,src:"/assets/layouts/logo_placehoder.png",name:"Logo Placeholder"},{id:"huggy-hand",type:"image",x:386.31341928814203,y:182.24545949041132,width:249.0715804458829,height:249.0715804458829,rotation:0,zIndex:2,src:"/assets/layouts/fCollab_huggy_hand_asset.png",name:"Huggy Hand"},{id:"huggy-group",type:"image",x:482.84522991494373,y:53.99999999999994,width:536.0247700850559,height:524.6602873270689,rotation:0,zIndex:4,src:"/assets/layouts/fCollab_huggy_asset.png",name:"Huggy Group"}]}},sandwich:{id:"sandwich",name:"Sandwich",thumbnail:"/assets/layouts/sandwitch_thumbnail.png",variants:{default:[{id:"title-text",type:"text",x:105.220703125,y:66.07,width:989.55859375,height:163.62,rotation:0,zIndex:1,text:"Pretty short title",fontSize:161.62,fontFamily:"Bison",fill:"#8a97ba",bold:!0,italic:!1,align:"left"},{id:"description-text",type:"text",x:125.74807739257812,y:517.88,width:948.5038452148438,height:91.05,rotation:0,zIndex:2,text:"supportive description",fontSize:89.05,fontFamily:"Inter",fill:"#8a97ba",bold:!1,italic:!1,align:"center"},{id:"singing-huggy",type:"image",x:336.34,y:144.4,width:565,height:389,rotation:0,zIndex:3,src:"/assets/layouts/snadwithc_huggy_asset.png",name:"Singing Huggy"}],hf:[{id:"title-text",type:"text",x:120.09410109409966,y:37.701128708369104,width:919.8117978118034,height:152.0876149310558,rotation:0,zIndex:1,text:"Pretty short title",fontSize:150.22858040066754,fontFamily:"Bison",fill:"#8a97ba",bold:!0,italic:!1,align:"left"},{id:"description-text",type:"text",x:139.17464988491434,y:457.66632429570814,width:881.6507002301743,height:84.63254699592123,rotation:0,zIndex:2,text:"supportive description",fontSize:82.77351246553299,fontFamily:"Inter",fill:"#8a97ba",bold:!1,italic:!1,align:"center"},{id:"singing-huggy",type:"image",x:334.9234778589283,y:110.51021609102176,width:525.1772548346574,height:361.5822161604982,rotation:0,zIndex:3,src:"/assets/layouts/snadwithc_huggy_asset.png",name:"Singing Huggy"}]}},academiaHub:{id:"academiaHub",name:"Academia Hub",thumbnail:"/assets/layouts/academia_thumbnail.png",variants:{default:[{id:"welcome-academia-hub",type:"image",x:342.0207815174148,y:96.80554723334625,width:515.9584369651704,height:68.45097665871741,rotation:0,zIndex:0,src:"/assets/layouts/welcome_academia_hub.png",name:"Welcome Academia Hub"},{id:"hf-logo",type:"image",x:750.0004969914753,y:259.12208128610206,width:259.950483451221,height:241.33030211026127,rotation:0,zIndex:1,src:"/assets/layouts/HF logo.png",name:"HF Logo"},{id:"logo-placeholder",type:"image",x:190.04901955730372,y:226.16684979465253,width:309.718438018213,height:301.24076509315995,rotation:0,zIndex:2,src:"/assets/layouts/logo_placehoder.png",name:"Logo Placeholder"},{id:"x-icon",type:"image",x:635.2685362494915,y:369.29640728007695,width:19.789108387729218,height:19.78910838772924,rotation:0,zIndex:3,src:"/assets/layouts/collabX.svg",name:"X Icon"}],hf:[{id:"welcome-academia-hub",type:"image",x:351.2901407285004,y:67.12621785091982,width:457.4197185429997,height:60.68478434307993,rotation:0,zIndex:0,src:"/assets/layouts/welcome_academia_hub.png",name:"Welcome Academia Hub"},{id:"hf-logo",type:"image",x:712.982000485792,y:211.02692380312976,width:230.45747187462104,height:213.94986680802086,rotation:0,zIndex:1,src:"/assets/layouts/HF logo.png",name:"HF Logo"},{id:"logo-placeholder",type:"image",x:216.56052763958712,y:181.8106698699552,width:274.5789400773612,height:267.063112279125,rotation:0,zIndex:2,src:"/assets/layouts/logo_placehoder.png",name:"Logo Placeholder"},{id:"x-icon",type:"image",x:611.2670997678724,y:308.70128199999107,width:17.543910013711162,height:17.543910013711187,rotation:0,zIndex:3,src:"/assets/layouts/collabX.svg",name:"X Icon"}]}},impactTitle:{id:"impactTitle",name:"Impact Title",thumbnail:"/assets/layouts/impactTtitle_thumbnail.png",variants:{default:[{id:"title-text-1-1765869489001",type:"text",x:72.99999999999991,y:65.49999999999963,width:370.83427741267855,height:196.31178550811498,rotation:0,zIndex:1,text:"The",fontSize:190.7028773507402,fontFamily:"Inter",fill:"#000000",bold:!0,italic:!1,fontWeight:"bold"},{id:"title-text-2-1765869489001",type:"text",x:72.99999999999991,y:235.35005288972667,width:713.2765311688165,height:192.6172055339101,rotation:0,zIndex:2,text:"Tutorial",fontSize:190.7028773507402,fontFamily:"Inter",fill:"#000000",bold:!0,italic:!1,fontWeight:"bold"},{id:"hf-logo-1765869489001",type:"image",x:1043.38,y:518.38,width:156.62,height:156.62,rotation:0,zIndex:3,src:"/assets/layouts/hfLogo_impactTitle.png",name:"HF Logo"},{id:"1765869496070-fpomyzaar",type:"text",x:84,y:428,width:246.548828125,height:70,rotation:0,zIndex:4,text:"Subtitle",fontSize:68,fontFamily:"Inter",fill:"#FFFFFF",bold:!1,italic:!1,hasBackground:!0,backgroundColor:"#000000"}],hf:[{id:"title-text-1-1765869489001-1765871050159",type:"text",x:48.999999999999915,y:57.49999999999963,width:370.83427741267855,height:196.31178550811498,rotation:0,zIndex:1,text:"The",fontSize:190.7028773507402,fontFamily:"Inter",fill:"#ffffff",bold:!0,italic:!1,fontWeight:"bold"},{id:"title-text-2-1765869489001-1765871050159",type:"text",x:48.999999999999915,y:227.35005288972667,width:713.2765311688165,height:192.6172055339101,rotation:0,zIndex:2,text:"Tutorial",fontSize:190.7028773507402,fontFamily:"Inter",fill:"#ffffff",bold:!0,italic:!1,fontWeight:"bold"},{id:"hf-logo-1765869489001-1765871050159",type:"image",x:1003.3800000000001,y:422.38,width:156.62,height:156.62,rotation:0,zIndex:3,src:"/assets/layouts/hfLogo_impactTitle.png",name:"HF Logo"},{id:"1765869496070-fpomyzaar-1765871050159",type:"text",x:60,y:420,width:246.548828125,height:70,rotation:0,zIndex:4,text:"Subtitle",fontSize:68,fontFamily:"Inter",fill:"#000000",bold:!1,italic:!1,hasBackground:!0,backgroundColor:"#ffffff"}]}}};function Ce(e){return Ze[e]}function Ht(){return Object.values(Ze)}function Re(e,i){return e.variants?e.variants[i]||e.variants.default:e.objects||[]}function Ct({onSelectLayout:e}){const i=Ht(),[n,c]=u.useState(new Set(i.map(a=>a.id))),r=a=>{c(d=>{const l=new Set(d);return l.delete(a),l})};return t.jsx("div",{className:"layout-selector absolute left-[calc(100%+4px)] top-[5px] bg-[#f8f9fa] border border-[#3faee6] rounded-[10px] p-[5px] shadow-lg inline-block",onDragStart:a=>{a.preventDefault(),a.stopPropagation()},onDrag:a=>{a.preventDefault(),a.stopPropagation()},onDragOver:a=>{a.preventDefault(),a.stopPropagation()},children:t.jsxs("div",{className:"flex flex-col gap-0",children:[t.jsx("div",{className:"flex gap-0",children:i.slice(0,2).map(a=>t.jsxs("button",{onClick:()=>e(a.id),onDragStart:d=>d.preventDefault(),className:"flex flex-col items-center gap-[5px] p-[10px] rounded-[5px] hover:bg-[#e9ecef] transition-colors flex-1",children:[t.jsxs("div",{className:"w-[96.5px] h-[47.291px] rounded-[5px] flex items-center justify-center overflow-hidden relative",onDragStart:d=>d.preventDefault(),children:[n.has(a.id)&&t.jsx("div",{className:"absolute inset-0 skeleton-shimmer"}),t.jsx("img",{src:a.thumbnail,alt:a.name,className:`w-full h-full object-cover transition-opacity duration-200 ${n.has(a.id)?"opacity-0":"opacity-100"}`,onLoad:()=>r(a.id),draggable:!1})]}),t.jsx("p",{className:"text-[14px] font-normal text-[#545865] text-center",children:a.name})]},a.id))}),t.jsx("div",{className:"flex gap-0",children:i.slice(2,4).map(a=>t.jsxs("button",{onClick:()=>e(a.id),onDragStart:d=>d.preventDefault(),className:"flex flex-col items-center gap-[5px] p-[10px] rounded-[5px] hover:bg-[#e9ecef] transition-colors flex-1",children:[t.jsxs("div",{className:"w-[96.5px] h-[47.291px] rounded-[5px] flex items-center justify-center overflow-hidden relative",onDragStart:d=>d.preventDefault(),children:[n.has(a.id)&&t.jsx("div",{className:"absolute inset-0 skeleton-shimmer"}),t.jsx("img",{src:a.thumbnail,alt:a.name,className:`w-full h-full object-cover transition-opacity duration-200 ${n.has(a.id)?"opacity-0":"opacity-100"}`,onLoad:()=>r(a.id),draggable:!1})]}),t.jsx("p",{className:"text-[14px] font-normal text-[#545865] text-center",children:a.name})]},a.id))}),t.jsx("div",{className:"flex gap-0",children:i.slice(4,6).map(a=>t.jsxs("button",{onClick:()=>e(a.id),onDragStart:d=>d.preventDefault(),className:"flex flex-col items-center gap-[5px] p-[10px] rounded-[5px] hover:bg-[#e9ecef] transition-colors flex-1",children:[t.jsxs("div",{className:"w-[96.5px] h-[47.291px] rounded-[5px] flex items-center justify-center overflow-hidden relative",onDragStart:d=>d.preventDefault(),children:[n.has(a.id)&&t.jsx("div",{className:"absolute inset-0 skeleton-shimmer"}),t.jsx("img",{src:a.thumbnail,alt:a.name,className:`w-full h-full object-cover transition-opacity duration-200 ${n.has(a.id)?"opacity-0":"opacity-100"}`,onLoad:()=>r(a.id),draggable:!1})]}),t.jsx("p",{className:"text-[14px] font-normal text-[#545865] text-center",children:a.name})]},a.id))})]})})}const P="https://huggingface.co/datasets/Chunte/Huggy/resolve/main",It=[{id:"acedemic-huggy",name:"Acedemic Huggy",thumbnail:`${P}/modern%20Huggies/Acedemic%20Huggy.png`,category:"modern",tags:["acedemic","academic","education","modern"]},{id:"back-of-huggy",name:"Back of a Huggy",thumbnail:`${P}/modern%20Huggies/Back%20of%20a%20Huggy.png`,category:"modern",tags:["back","modern"]},{id:"d-huggy",name:"D Huggy",thumbnail:`${P}/modern%20Huggies/D%20Huggy.png`,category:"modern",tags:["d","letter","modern"]},{id:"dragon-huggy",name:"Dragon Huggy",thumbnail:`${P}/modern%20Huggies/Dragon%20Huggy.png`,category:"modern",tags:["dragon","fantasy","modern"]},{id:"game-jam-huggy",name:"Game Jam Huggy",thumbnail:`${P}/modern%20Huggies/Game%20Jam%20Huggy.png`,category:"modern",tags:["game","jam","gaming","modern"]},{id:"huggy-chef",name:"Huggy Chef",thumbnail:`${P}/modern%20Huggies/Huggy%20Chef.png`,category:"modern",tags:["chef","cooking","food","modern"]},{id:"huggy-hi",name:"Huggy Hi",thumbnail:`${P}/modern%20Huggies/Huggy%20Hi.png`,category:"modern",tags:["hi","hello","greeting","wave","modern"]},{id:"huggy-lab",name:"Huggy Lab",thumbnail:`${P}/modern%20Huggies/Huggy%20Lab.png`,category:"modern",tags:["lab","laboratory","science","modern"]},{id:"huggy-medic",name:"Huggy Medic",thumbnail:`${P}/modern%20Huggies/Huggy%20Medic.png`,category:"modern",tags:["medic","medical","doctor","health","modern"]},{id:"huggy-okay",name:"Huggy Okay",thumbnail:`${P}/modern%20Huggies/Huggy%20Okay.png`,category:"modern",tags:["okay","ok","thumbs up","modern"]},{id:"huggy-sunny-hello",name:"Huggy Sunny hello",thumbnail:`${P}/modern%20Huggies/Huggy%20Sunny%20hello.png`,category:"modern",tags:["sunny","hello","greeting","summer","modern"]},{id:"huggy-sunny",name:"Huggy Sunny",thumbnail:`${P}/modern%20Huggies/Huggy%20Sunny.png`,category:"modern",tags:["sunny","summer","sun","modern"]},{id:"huggy-yolk",name:"Huggy Yolk",thumbnail:`${P}/modern%20Huggies/Huggy%20Yolk.png`,category:"modern",tags:["yolk","egg","food","modern"]},{id:"huggy-blink-okay",name:"Huggy blink Okay",thumbnail:`${P}/modern%20Huggies/Huggy%20blink%20Okay.png`,category:"modern",tags:["blink","okay","wink","modern"]},{id:"huggy-the-pooh-meme",name:"Huggy the Pooh meme",thumbnail:`${P}/modern%20Huggies/Huggy%20the%20Pooh%20meme.png`,category:"modern",tags:["pooh","meme","funny","modern"]},{id:"idefics-huggy",name:"IDEFICS Huggy",thumbnail:`${P}/modern%20Huggies/IDEFICS%20Huggy.png`,category:"modern",tags:["idefics","vision","multimodal","ai","modern"]},{id:"karaoke-huggy",name:"Karaoke Huggy",thumbnail:`${P}/modern%20Huggies/Karaoke%20Huggy.png`,category:"modern",tags:["karaoke","singing","music","modern"]},{id:"lora-huggy",name:"Lora Huggy",thumbnail:`${P}/modern%20Huggies/Lora%20Huggy.png`,category:"modern",tags:["lora","ai","model","modern"]},{id:"robot-huggy",name:"Robot Huggy",thumbnail:`${P}/modern%20Huggies/Robot%20Huggy.png`,category:"modern",tags:["robot","automation","ai","modern"]},{id:"snake-huggy",name:"Snake Huggy",thumbnail:`${P}/modern%20Huggies/Snake%20Huggy.png`,category:"modern",tags:["snake","python","code","modern"]},{id:"super-huggy",name:"Super Huggy",thumbnail:`${P}/modern%20Huggies/Super%20Huggy.png`,category:"modern",tags:["super","hero","superhero","modern"]},{id:"text-generation-wizard-huggy",name:"Text Generation Wizard Huggy",thumbnail:`${P}/modern%20Huggies/Text%20Generation%20Wizard%20Huggy.png`,category:"modern",tags:["text","generation","wizard","nlp","ai","modern"]},{id:"transformer-agent-huggy",name:"Transformer Agent Huggy",thumbnail:`${P}/modern%20Huggies/Transformer%20Agent%20Huggy.png`,category:"modern",tags:["transformer","agent","ai","nlp","modern"]},{id:"wine-huggy",name:"Wine Huggy",thumbnail:`${P}/modern%20Huggies/Wine%20Huggy.png`,category:"modern",tags:["wine","drink","celebration","modern"]},{id:"computer-vision-huggy",name:"computer vision Huggy",thumbnail:`${P}/modern%20Huggies/computer%20vision%20Huggy.png`,category:"modern",tags:["computer","vision","cv","ai","model","modern"]}],zt=[{id:"catching-huggy",name:"Catching Huggy",thumbnail:`${P}/Outlined%20Huggies/Catching%20Huggy.png`,category:"outlined",tags:["catching","catch","outlined"]},{id:"comic-huggy",name:"Comic Huggy",thumbnail:`${P}/Outlined%20Huggies/Comic%20Huggy.png`,category:"outlined",tags:["comic","cartoon","outlined"]},{id:"curious-huggy",name:"Curious Huggy",thumbnail:`${P}/Outlined%20Huggies/Curious%20Huggy.png`,category:"outlined",tags:["curious","wondering","thinking","outlined"]},{id:"diffusor-guide-huggy",name:"Diffusor guide Huggy",thumbnail:`${P}/Outlined%20Huggies/Diffusor%20guide%20Huggy.png`,category:"outlined",tags:["diffusor","diffusion","guide","ai","outlined"]},{id:"fishing-huggy",name:"Fishing Huggy",thumbnail:`${P}/Outlined%20Huggies/Fishing%20Huggy.png`,category:"outlined",tags:["fishing","fish","outdoor","outlined"]},{id:"gpu-huggy",name:"GPU Huggy",thumbnail:`${P}/Outlined%20Huggies/GPU%20Huggy.png`,category:"outlined",tags:["gpu","graphics","computing","hardware","outlined"]},{id:"global-huggy",name:"Global Huggy",thumbnail:`${P}/Outlined%20Huggies/Global%20Huggy.png`,category:"outlined",tags:["global","world","international","outlined"]},{id:"greeting-huggy-left",name:"Greeting Huggy left",thumbnail:`${P}/Outlined%20Huggies/Greeting%20Huggy%20left.png`,category:"outlined",tags:["greeting","hello","wave","left","outlined"]},{id:"greeting-huggy-right",name:"Greeting Huggy right",thumbnail:`${P}/Outlined%20Huggies/Greeting%20Huggy%20right.png`,category:"outlined",tags:["greeting","hello","wave","right","outlined"]},{id:"growing-model-huggy",name:"Growing model Huggy",thumbnail:`${P}/Outlined%20Huggies/Growing%20model%20Huggy.png`,category:"outlined",tags:["growing","model","ai","growth","outlined"]},{id:"guide-huggy",name:"Guide Huggy",thumbnail:`${P}/Outlined%20Huggies/Guide%20Huggy.png`,category:"outlined",tags:["guide","help","tutorial","outlined"]},{id:"loving-modelndataset-huggy",name:"Loving modelndataset Huggy",thumbnail:`${P}/Outlined%20Huggies/Loving%20modelndataset%20Huggy.png`,category:"outlined",tags:["loving","model","dataset","heart","outlined"]},{id:"manager-huggy",name:"Manager Huggy",thumbnail:`${P}/Outlined%20Huggies/Manager%20Huggy.png`,category:"outlined",tags:["manager","management","business","outlined"]},{id:"paper-huggy",name:"Paper Huggy",thumbnail:`${P}/Outlined%20Huggies/Paper%20Huggy.png`,category:"outlined",tags:["paper","research","document","outlined"]},{id:"rocket-huggy",name:"Rocket Huggy",thumbnail:`${P}/Outlined%20Huggies/Rocket%20Huggy.png`,category:"outlined",tags:["rocket","space","launch","fast","outlined"]},{id:"scan-huggy",name:"Scan Huggy",thumbnail:`${P}/Outlined%20Huggies/Scan%20Huggy.png`,category:"outlined",tags:["scan","search","find","outlined"]},{id:"violinist-huggy",name:"Violinist Huggy",thumbnail:`${P}/Outlined%20Huggies/Violinist%20Huggy.png`,category:"outlined",tags:["violinist","violin","music","classical","outlined"]},{id:"xray-huggy",name:"X-ray Huggy",thumbnail:`${P}/Outlined%20Huggies/X-ray%20Huggy.png`,category:"outlined",tags:["xray","x-ray","medical","scan","outlined"]}],Xe=[...It,...zt];function Lt(e){if(!e.trim())return Xe;const i=e.toLowerCase().trim();return Xe.filter(n=>!!(n.name.toLowerCase().replace("huggy","").trim().includes(i)||n.name.toLowerCase().includes(i)||n.category.toLowerCase().includes(i)||n.tags&&n.tags.some(r=>r.toLowerCase().includes(i))))}const je=12,Ye=6;function $t({onSelectHuggy:e,onClose:i}){const[n,c]=u.useState(""),[r,a]=u.useState(je),[d,l]=u.useState(new Set),g=u.useRef(null),b=u.useMemo(()=>Lt(n),[n]),v=b.slice(0,r),L=r<b.length;u.useEffect(()=>{const S=g.current;if(!S||!L)return;const Y=setTimeout(()=>{const{scrollHeight:X,clientHeight:$}=S;X<=$&&L&&a(q=>Math.min(q+Ye,b.length))},100);return()=>clearTimeout(Y)},[r,L,b.length]),u.useEffect(()=>{const S=g.current;if(!S)return;const G=()=>{const{scrollTop:Y,scrollHeight:X,clientHeight:$}=S;(Y+$)/X>.8&&L&&a(_=>Math.min(_+Ye,b.length))};return S.addEventListener("scroll",G),()=>S.removeEventListener("scroll",G)},[L,b.length]);const O=S=>{e(S),i()},M=S=>{l(G=>{const Y=new Set(G);return Y.delete(S),Y})},N=S=>{l(G=>new Set(G).add(S))},A=S=>{c(S.target.value),a(je)};return t.jsxs(t.Fragment,{children:[t.jsx("div",{className:"fixed inset-0 z-10",onClick:i}),t.jsxs("div",{className:"huggy-menu fixed left-[107px] top-[20px] z-20 w-[340px] bg-[#f8f9fa] border border-[#3faee6] rounded-[10px] flex flex-col overflow-hidden shadow-lg",onDragStart:S=>{S.preventDefault(),S.stopPropagation()},onDrag:S=>{S.preventDefault(),S.stopPropagation()},onDragOver:S=>{S.preventDefault(),S.stopPropagation()},children:[t.jsx("div",{className:"border-b border-[#ebebeb] p-[5px]",children:t.jsx("input",{type:"text",placeholder:"Search Huggy",value:n,onChange:A,className:"w-full bg-transparent border-none outline-none text-[14px] text-[#999999] font-['Inter'] placeholder-[#999999]",autoFocus:!0})}),t.jsx("div",{ref:g,className:"overflow-y-auto p-[5px]",style:{maxHeight:"430px"},children:b.length===0?t.jsx("div",{className:"text-center text-[#999999] text-[14px] py-8",children:"No Huggys found"}):t.jsx("div",{className:"grid grid-cols-2 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-[5px] p-[5px]",children:v.map(S=>t.jsxs("button",{onClick:()=>O(S),onDragStart:G=>G.preventDefault(),className:"relative w-full aspect-square rounded-[5px] overflow-hidden hover:bg-[#e9ecef] transition-colors cursor-pointer border-none p-0",title:S.name,children:[d.has(S.id)&&t.jsx("div",{className:"absolute inset-0 skeleton-shimmer"}),t.jsx("img",{src:S.thumbnail,alt:S.name,className:`w-full h-full object-cover transition-opacity duration-200 ${d.has(S.id)?"opacity-0":"opacity-100"}`,loading:"lazy",onLoadStart:()=>N(S.id),onLoad:()=>M(S.id),onError:()=>M(S.id),draggable:!1})]},S.id))})}),t.jsx("div",{className:"border-t border-[#ebebeb] p-[5px] text-center",children:t.jsxs("p",{className:"text-[#999999] text-[12px]",children:["Showing ",v.length," of ",b.length," Huggys"]})})]})]})}const Ue=[{id:"hf-icon",name:"HuggingFace Icon",thumbnail:"/assets/iconSelector/hfIcon.png"},{id:"huggy-hand",name:"Huggy Hand",thumbnail:"/assets/iconSelector/huggyHand.png"},{id:"collection",name:"Collection",thumbnail:"/assets/iconSelector/collection.png"},{id:"dataset",name:"Dataset",thumbnail:"/assets/iconSelector/dataset.png"},{id:"like",name:"Like",thumbnail:"/assets/iconSelector/like.png"},{id:"like-1",name:"Like Alt",thumbnail:"/assets/iconSelector/like-1.png"},{id:"daily-paper",name:"Daily Paper",thumbnail:"/assets/iconSelector/dailyPaper.png"},{id:"upvote",name:"Upvote",thumbnail:"/assets/iconSelector/upvote.png"},{id:"pr",name:"Pull Request",thumbnail:"/assets/iconSelector/PR.png"},{id:"spaces",name:"Spaces",thumbnail:"/assets/iconSelector/spaces.png"}];function Mt({onSelectIcon:e,onClose:i}){const[n,c]=u.useState(new Set),r=l=>{e(l),i()},a=l=>{c(g=>{const b=new Set(g);return b.delete(l),b})},d=l=>{c(g=>new Set(g).add(l))};return t.jsxs(t.Fragment,{children:[t.jsx("div",{className:"fixed inset-0 z-10",onClick:i}),t.jsxs("div",{className:"hub-icons-menu fixed left-[107px] top-[20px] z-20 w-[340px] bg-[#f8f9fa] border border-[#3faee6] rounded-[10px] flex flex-col overflow-hidden shadow-lg",onDragStart:l=>{l.preventDefault(),l.stopPropagation()},onDrag:l=>{l.preventDefault(),l.stopPropagation()},onDragOver:l=>{l.preventDefault(),l.stopPropagation()},children:[t.jsx("div",{className:"border-b border-[#ebebeb] p-[10px]",children:t.jsx("p",{className:"text-[16px] text-[#545865] font-['Inter'] font-medium",children:"Hub Icons"})}),t.jsx("div",{className:"overflow-y-auto p-[10px]",style:{maxHeight:"430px"},children:t.jsx("div",{className:"grid grid-cols-3 gap-[10px]",children:Ue.map(l=>t.jsxs("button",{onClick:()=>r(l),onDragStart:g=>g.preventDefault(),className:"relative w-full aspect-square rounded-[5px] overflow-hidden hover:bg-[#e9ecef] transition-colors cursor-pointer border-none p-[5px]",title:l.name,children:[n.has(l.id)&&t.jsx("div",{className:"absolute inset-0 skeleton-shimmer"}),t.jsx("img",{src:l.thumbnail,alt:l.name,className:`w-full h-full object-contain transition-opacity duration-200 ${n.has(l.id)?"opacity-0":"opacity-100"}`,loading:"lazy",onLoadStart:()=>d(l.id),onLoad:()=>a(l.id),onError:()=>a(l.id),draggable:!1})]},l.id))})}),t.jsx("div",{className:"border-t border-[#ebebeb] p-[5px] text-center",children:t.jsxs("p",{className:"text-[#999999] text-[12px]",children:[Ue.length," Hub Icons"]})})]})]})}function Et({onLayoutClick:e,onHuggyClick:i,onHubIconsClick:n,onImageClick:c,onTextClick:r,onSelectLayout:a,onSelectHuggy:d,onSelectHubIcon:l,activeButton:g}){return t.jsx("div",{className:"fixed left-5 top-1/2 -translate-y-1/2 z-50",onDragStart:b=>{b.preventDefault(),b.stopPropagation()},onDrag:b=>{b.preventDefault(),b.stopPropagation()},onDragOver:b=>{b.preventDefault(),b.stopPropagation()},children:t.jsxs("div",{className:"sidebar-container bg-[#f8f9fa] border border-[#D7DCE2] rounded-[12px] p-[5px] flex flex-col gap-[14px] lg:gap-[15px] w-[78px] lg:w-[87px] relative",children:[t.jsxs("button",{onClick:e,className:`flex flex-col items-center gap-[3px] px-[12px] lg:px-[13px] py-[5px] rounded-[7px] transition-colors ${g==="layout"?"bg-[#3faee6]":"hover:bg-[#e9ecef]"}`,children:[t.jsx("div",{className:"w-[29px] lg:w-[32px] h-[29px] lg:h-[32px] flex items-center justify-center",children:t.jsx(wt,{selected:g==="layout"})}),t.jsx("p",{className:`text-[14px] lg:text-[16px] font-normal ${g==="layout"?"text-white":"text-[#545865]"}`,children:"Layout"})]}),t.jsxs("button",{onClick:i,className:`flex flex-col items-center gap-[3px] px-[12px] lg:px-[13px] py-[5px] rounded-[7px] transition-colors ${g==="huggy"?"bg-[#3faee6]":"hover:bg-[#e9ecef]"}`,children:[t.jsx("div",{className:"w-[29px] lg:w-[32px] h-[29px] lg:h-[32px] flex items-center justify-center",children:t.jsx(bt,{})}),t.jsx("p",{className:`text-[14px] lg:text-[16px] font-normal ${g==="huggy"?"text-white":"text-[#545865]"}`,children:"Huggy"})]}),t.jsxs("button",{onClick:n,className:`flex flex-col items-center gap-[3px] px-[12px] lg:px-[13px] py-[5px] rounded-[7px] transition-colors ${g==="hubicons"?"bg-[#3faee6]":"hover:bg-[#e9ecef]"}`,children:[t.jsx("div",{className:"w-[29px] lg:w-[32px] h-[29px] lg:h-[32px] flex items-center justify-center",children:t.jsx(vt,{selected:g==="hubicons"})}),t.jsx("p",{className:`text-[14px] lg:text-[16px] font-normal ${g==="hubicons"?"text-white":"text-[#545865]"}`,children:"Icons"})]}),t.jsxs("button",{onClick:c,className:`flex flex-col items-center gap-[3px] px-[12px] lg:px-[13px] py-[5px] rounded-[7px] transition-colors ${g==="image"?"bg-[#3faee6]":"hover:bg-[#e9ecef]"}`,children:[t.jsx("div",{className:"w-[29px] lg:w-[32px] h-[29px] lg:h-[32px] flex items-center justify-center",children:t.jsx(St,{selected:g==="image"})}),t.jsx("p",{className:`text-[14px] lg:text-[16px] font-normal ${g==="image"?"text-white":"text-[#545865]"}`,children:"Image"})]}),t.jsxs("button",{onClick:r,className:`flex flex-col items-center gap-[3px] px-[12px] lg:px-[13px] py-[5px] rounded-[7px] transition-colors ${g==="text"?"bg-[#3faee6]":"hover:bg-[#e9ecef]"}`,children:[t.jsx("div",{className:"w-[29px] lg:w-[32px] h-[29px] lg:h-[32px] flex items-center justify-center",children:t.jsx(kt,{selected:g==="text"})}),t.jsx("p",{className:`text-[14px] lg:text-[16px] font-normal ${g==="text"?"text-white":"text-[#545865]"}`,children:"Text"})]}),g==="layout"&&t.jsx(Ct,{onSelectLayout:a}),g==="huggy"&&t.jsx($t,{onSelectHuggy:d,onClose:()=>i()}),g==="hubicons"&&t.jsx(Mt,{onSelectIcon:l,onClose:()=>n()}),g==="text"&&t.jsx("div",{className:"text-hint absolute left-[calc(100%+4px)] bottom-[5px] bg-[#3faee6] rounded-[10px] p-[9px] lg:p-[10px] w-max",children:t.jsxs("p",{className:"text-white text-[14px] lg:text-[16px] font-normal leading-normal",children:["Click anywhere on the",t.jsx("br",{}),"canvas to add texts"]})})]})})}/**
+ * @license lucide-react v0.344.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */var Ft={xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"};/**
+ * @license lucide-react v0.344.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Dt=e=>e.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase().trim(),be=(e,i)=>{const n=u.forwardRef(({color:c="currentColor",size:r=24,strokeWidth:a=2,absoluteStrokeWidth:d,className:l="",children:g,...b},v)=>u.createElement("svg",{ref:v,...Ft,width:r,height:r,stroke:c,strokeWidth:d?Number(a)*24/Number(r):a,className:["lucide",`lucide-${Dt(e)}`,l].join(" "),...b},[...i.map(([L,O])=>u.createElement(L,O)),...Array.isArray(g)?g:[g]]));return n.displayName=`${e}`,n};/**
+ * @license lucide-react v0.344.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Nt=be("Bold",[["path",{d:"M14 12a4 4 0 0 0 0-8H6v8",key:"v2sylx"}],["path",{d:"M15 20a4 4 0 0 0 0-8H6v8Z",key:"1ef5ya"}]]);/**
+ * @license lucide-react v0.344.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Rt=be("ChevronDown",[["path",{d:"m6 9 6 6 6-6",key:"qrunsl"}]]);/**
+ * @license lucide-react v0.344.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Pt=be("Download",[["path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4",key:"ih7n3h"}],["polyline",{points:"7 10 12 15 17 10",key:"2ggqvy"}],["line",{x1:"12",x2:"12",y1:"15",y2:"3",key:"1vk2je"}]]);/**
+ * @license lucide-react v0.344.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Tt=be("Italic",[["line",{x1:"19",x2:"10",y1:"4",y2:"4",key:"15jd3p"}],["line",{x1:"14",x2:"5",y1:"20",y2:"20",key:"bu0au3"}],["line",{x1:"15",x2:"9",y1:"4",y2:"20",key:"uljnxc"}]]);/**
+ * @license lucide-react v0.344.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ot=be("Loader2",[["path",{d:"M21 12a9 9 0 1 1-6.219-8.56",key:"13zald"}]]);/**
+ * @license lucide-react v0.344.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Bt=be("Pipette",[["path",{d:"m2 22 1-1h3l9-9",key:"1sre89"}],["path",{d:"M3 21v-3l9-9",key:"hpe2y6"}],["path",{d:"m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8a2.1 2.1 0 1 1 3-3l.4.4Z",key:"196du1"}]]);/**
+ * @license lucide-react v0.344.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Wt=be("X",[["path",{d:"M18 6 6 18",key:"1bl5f8"}],["path",{d:"m6 6 12 12",key:"d8bk6v"}]]);function At({onExport:e,isExporting:i=!1,currentLayout:n,canvasSize:c}){const r=S=>{switch(S){case"1200x675":return"Twitter";case"linkedin":return"LinkedIn";case"hf":return"HF";default:return"Twitter"}},a=()=>{const S=r(c);return n?`${n}_${S}`:`thumbnail_${S}`},[d,l]=u.useState(a()),[g,b]=u.useState(!1),[v,L]=u.useState(0),[O,M]=u.useState(!1),N=u.useRef(null);u.useEffect(()=>{l(a())},[n,c]),u.useEffect(()=>{N.current&&L(N.current.offsetWidth)},[d]);const A=()=>{i||e(d)};return t.jsxs("div",{className:"fixed top-[7px] lg:top-[10px] right-[20px] lg:right-[22px] z-50 p-[4px] lg:p-[5px] inline-flex items-stretch gap-[4px] lg:gap-[5px]",style:{backgroundColor:"#262933",borderRadius:"10px",boxShadow:"0px 0px 0px 0px rgba(0,0,0,0), 0px 0px 0px 0px rgba(0,0,0,0.03), 0px 0px 6.417px 0px rgba(0,0,0,0.09), 0px 0px 4.583px 0px rgba(0,0,0,0.15), 0px 0px 2.75px 0px rgba(0,0,0,0.17), 0px 16.847px 21.059px -4.212px rgba(14,13,13,0.1), 0px 8.423px 8.423px -4.212px rgba(0,0,0,0.04)",opacity:i?.5:1,transition:"all 0.2s ease-in-out",width:"fit-content"},children:[t.jsx("button",{onClick:A,disabled:i,onMouseEnter:()=>M(!0),onMouseLeave:()=>M(!1),className:"flex items-center justify-center rounded-[5px] w-[29px] lg:w-[32px] aspect-square flex-shrink-0 border-none p-0",style:{backgroundColor:O?"#0d6ecc":"#1888ff",cursor:i?"not-allowed":"pointer",transition:"all 0.2s ease-in-out",transform:O&&!i?"scale(1.05)":"scale(1)"},children:i?t.jsx(Ot,{className:"w-[14px] lg:w-4 h-[14px] lg:h-4",color:"white",style:{animation:"spin 1s linear infinite"}}):t.jsx(Pt,{className:"w-[14px] lg:w-4 h-[14px] lg:h-4",color:"white"})}),t.jsxs("div",{className:"flex items-center gap-[2px] pr-[4px] lg:pr-[5px] min-h-[29px] lg:min-h-[32px]",children:[t.jsx("span",{ref:N,className:"absolute invisible whitespace-pre text-[14px] lg:text-[16px] font-normal p-[4px] lg:p-[5px]",style:{fontFamily:"Inter, sans-serif"},children:d||"thumbnail_name"}),t.jsx("input",{type:"text",value:d,onChange:S=>l(S.target.value),onFocus:()=>b(!0),onBlur:()=>b(!1),disabled:i,placeholder:"thumbnail_name",className:"bg-white/5 text-white text-[14px] lg:text-[16px] font-normal outline-none border-none p-[4px] lg:p-[5px] rounded",style:{fontFamily:"Inter, sans-serif",width:`${v}px`,cursor:i?"not-allowed":"text",opacity:g?1:.5,transition:"all 0.2s ease-in-out",backgroundColor:g?"rgba(255, 255, 255, 0.1)":"rgba(255, 255, 255, 0.05)"},onClick:S=>S.stopPropagation()}),t.jsx("span",{className:"text-white text-[14px] lg:text-[16px] font-normal",style:{fontFamily:"Inter, sans-serif",opacity:g?1:.5,transition:"opacity 0.2s ease-in-out"},children:".png"})]})]})}function _t({children:e}){return t.jsx("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",width:"100%",height:"100%"},children:t.jsx("div",{className:"canvas-container",style:{display:"flex",flexDirection:"column",gap:"10px"},children:e})})}const Xt={"1200x675":{width:1200,height:675,label:"1200×675"},linkedin:{width:1200,height:627,label:"LinkedIn"},hf:{width:1160,height:580,label:"HF Custom"}};function ye(e){return Xt[e]}function Pe(){return`${Date.now()}-${Math.random().toString(36).substr(2,9)}`}function Te(e){return[...e].sort((i,n)=>i.zIndex-n.zIndex)}function ze(e){return e.length===0?1:Math.max(...e.map(i=>i.zIndex))+1}function Ge(e,i,n){return`${n==="black"?"900":e?"bold":"normal"} ${i?"italic":""}`.trim()}function jt(e){const i=e.replace("#",""),n=parseInt(i.substring(0,2),16),c=parseInt(i.substring(2,4),16),r=parseInt(i.substring(4,6),16);return .299*n+.587*c+.114*r}function Yt(e){return jt(e)>128?"#000000":"#FFFFFF"}function Ut({object:e,isSelected:i,onSelect:n,onDragStart:c,onDragMove:r,onDragEnd:a,onTransformEnd:d,onEditingChange:l,onMouseEnter:g,onMouseLeave:b,shapeRef:v}){const L=u.useRef(null),O=u.useRef(null);u.useEffect(()=>{if(e.text===""&&i&&!e.isEditing){const $=setTimeout(()=>{l(e.id,!0)},100);return()=>clearTimeout($)}},[e.text,i,e.isEditing,e.id,l]);const M=$=>{if(!e.isEditing){const q=$.target.getStage(),_=q==null?void 0:q.getPointerPosition();if(_){const D=$.target.getLayer(),B=(D==null?void 0:D.x())||0,z=(D==null?void 0:D.y())||0,U=_.x-B-e.x,W=_.y-z-e.y;l(e.id,!0,U,W)}else l(e.id,!0)}},N=e.fontSize,A=8,S=8,G=5,Y=8,X=8;if(e.hasBackground){const $=e.backgroundColor||e.fill,q=Yt($);return t.jsxs(ct,{ref:_=>{O.current=_,typeof v=="function"?v(_):v&&(v.current=_)},x:e.x+Y,y:e.y+A,rotation:e.rotation,draggable:!0,onClick:_=>n(_),onTap:_=>n(_),onDblClick:M,onDblTap:M,onDragStart:c,onDragMove:r,onDragEnd:a,onTransformEnd:d,onMouseEnter:g,onMouseLeave:b,opacity:e.isEditing?0:1,listening:!e.isEditing,children:[t.jsx(he,{x:-Y,y:-A,width:e.width+Y+S,height:e.height+A+G,fill:$,cornerRadius:X}),t.jsx(Ae,{id:e.id,ref:_=>{L.current=_},x:0,y:0,width:e.width,height:e.height,text:e.text,fontSize:N,fontFamily:e.fontFamily,fill:q,fontStyle:Ge(e.bold,e.italic,e.fontWeight),align:e.align||"left",verticalAlign:"top",padding:0,lineHeight:1,draggable:!1})]})}return t.jsx(Ae,{id:e.id,ref:$=>{typeof v=="function"?v($):v&&(v.current=$),L.current=$},x:e.x,y:e.y,width:e.width,height:e.height,text:e.text,fontSize:N,fontFamily:e.fontFamily,fill:e.fill,fontStyle:Ge(e.bold,e.italic,e.fontWeight),align:e.align||"left",verticalAlign:"top",rotation:e.rotation,padding:0,lineHeight:1,draggable:!0,onClick:$=>n($),onTap:$=>n($),onDblClick:M,onDblTap:M,onDragStart:c,onDragMove:r,onDragEnd:a,onTransformEnd:d,onMouseEnter:g,onMouseLeave:b,opacity:e.isEditing?0:1,listening:!e.isEditing})}function Gt({object:e,isSelected:i,onSelect:n,onDragStart:c,onDragMove:r,onDragEnd:a,onTransformEnd:d,onEditingChange:l,onMouseEnter:g,onMouseLeave:b,shapeRef:v}){switch(e.type){case"rect":return t.jsx(he,{id:e.id,ref:L=>{typeof v=="function"?v(L):v&&(v.current=L)},x:e.x,y:e.y,width:e.width,height:e.height,fill:e.fill,stroke:e.stroke,strokeWidth:e.strokeWidth,rotation:e.rotation,draggable:!0,onClick:L=>n(L),onTap:L=>n(L),onDragStart:c,onDragMove:r,onDragEnd:a,onTransformEnd:d,onMouseEnter:g,onMouseLeave:b});case"image":case"huggy":return t.jsx(Kt,{object:e,onSelect:n,onDragStart:c,onDragMove:r,onDragEnd:a,onTransformEnd:d,onMouseEnter:g,onMouseLeave:b,shapeRef:v});case"text":return t.jsx(Ut,{object:e,isSelected:i,onSelect:n,onDragStart:c,onDragMove:r,onDragEnd:a,onTransformEnd:d,onEditingChange:l||(()=>{}),onMouseEnter:g,onMouseLeave:b,shapeRef:v});case"logoPlaceholder":return t.jsx(qt,{object:e,onSelect:n,onDragStart:c,onDragMove:r,onDragEnd:a,onTransformEnd:d,onMouseEnter:g,onMouseLeave:b,shapeRef:v});default:return null}}function Kt({object:e,onSelect:i,onDragStart:n,onDragMove:c,onDragEnd:r,onTransformEnd:a,onMouseEnter:d,onMouseLeave:l,shapeRef:g}){const[b,v]=u.useState(null),L=u.useRef(null),O=u.useRef(null);return u.useEffect(()=>{const M=new window.Image;return M.src=e.type==="image"||e.type==="huggy"?e.src:"",M.crossOrigin="anonymous",M.onload=()=>{v(M),L.current=M,setTimeout(()=>{if(O.current){const N=O.current.getLayer();N&&N.batchDraw()}},10)},()=>{L.current=null}},[e]),t.jsx(t.Fragment,{children:b&&t.jsx(Ke,{id:e.id,ref:M=>{O.current=M,typeof g=="function"?g(M):g&&(g.current=M)},x:e.x,y:e.y,width:e.width,height:e.height,image:b,rotation:e.rotation,draggable:!0,onClick:M=>i(M),onTap:M=>i(M),onDragStart:n,onDragMove:c,onDragEnd:r,onTransformEnd:a,onMouseEnter:d,onMouseLeave:l})})}function qt({object:e,onSelect:i,onDragStart:n,onDragMove:c,onDragEnd:r,onTransformEnd:a,onMouseEnter:d,onMouseLeave:l,shapeRef:g}){const b=u.useRef(null);return u.useEffect(()=>{b.current&&e.type==="logoPlaceholder"&&(b.current.cache(),b.current.filters([we.Filters.Blur]),b.current.blurRadius(e.blurRadius))},[e]),e.type!=="logoPlaceholder"?null:t.jsx(he,{id:e.id,ref:v=>{b.current=v,typeof g=="function"?g(v):g&&(g.current=v)},x:e.x,y:e.y,width:e.width,height:e.height,fill:"rgba(255, 255, 255, 0.3)",stroke:"rgba(200, 200, 200, 0.5)",strokeWidth:2,rotation:e.rotation,draggable:!0,onClick:v=>i(v),onTap:v=>i(v),onDragStart:n,onDragMove:c,onDragEnd:r,onTransformEnd:a,onMouseEnter:d,onMouseLeave:l})}var me=u,Jt=function(i,n,c){const r=me.useRef("loading"),a=me.useRef(),[d,l]=me.useState(0),g=me.useRef(),b=me.useRef(),v=me.useRef();return(g.current!==i||b.current!==n||v.current!==c)&&(r.current="loading",a.current=void 0,g.current=i,b.current=n,v.current=c),me.useLayoutEffect(function(){if(!i)return;var L=document.createElement("img");function O(){L.decode().catch(()=>{}).finally(()=>{r.current="loaded",a.current=L,l(Math.random())})}function M(){r.current="failed",a.current=void 0,l(Math.random())}return L.addEventListener("load",O),L.addEventListener("error",M),n&&(L.crossOrigin=n),c&&(L.referrerPolicy=c),L.src=i,function(){L.removeEventListener("load",O),L.removeEventListener("error",M)}},[i,n,c]),[a.current,r.current]};const Vt=lt(Jt);function Qe(e,i,n){return`${n==="black"?"900":e?"bold":"normal"} ${i?"italic":""}`.trim()}function Zt(e){const i=e.replace("#",""),n=parseInt(i.substring(0,2),16),c=parseInt(i.substring(2,4),16),r=parseInt(i.substring(4,6),16);return .299*n+.587*c+.114*r}function Qt(e){return Zt(e)>128?"#000000":"#FFFFFF"}function en(e,i,n,c,r,a,d){if(!e||i<=0)return 0;try{const l=new we.Text({text:e,fontSize:n,fontFamily:c,fontStyle:Qe(r,a,d)});let g=0,b=1/0;for(let v=0;v<=e.length;v++){const L=e.substring(0,v);l.text(L);const O=l.width(),M=Math.abs(O-i);M<b&&(b=M,g=v)}return l.destroy(),g}catch(l){return console.error("Error calculating cursor position:",l),e.length}}function tn({canvasSize:e,bgColor:i,objects:n,selectedIds:c,onSelect:r,onObjectsChange:a,textCreationMode:d=!1,onTextCreate:l,stageRef:g,transformerRef:b}){const v=u.useRef(null),L=g||v,O=u.useRef(null),M=b||O,N=u.useRef(new Map),A=u.useRef(null),S=u.useRef(null),[G,Y]=u.useState(!1),[X,$]=u.useState(null),q=u.useRef(null),_=u.useRef(null),D=u.useRef(null),B=u.useRef(new Map),[z,U]=u.useState(null),[W,V]=u.useState(!1),[ie,re]=u.useState({vertical:!1,horizontal:!1}),[se,Z]=u.useState({width:window.innerWidth,height:window.innerHeight}),Q=ye(e),ee={x:(se.width-Q.width)/2,y:(se.height-Q.height)/2},I=e==="1200x675"?"twitter":e==="linkedin"?"LinkedIn":"HF",J=i==="seriousLight"?`/assets/backgrounds/bg_sLight_${I}.png`:i==="light"?`/assets/backgrounds/bg_Light_${I}.png`:`/assets/backgrounds/bg_dark_${I}.png`,[le]=Vt(J,"anonymous");u.useEffect(()=>{(async()=>{if(document.fonts)try{if(await Promise.all([document.fonts.load("bold 100px Bison"),document.fonts.load("bold 100px Inter"),document.fonts.load('400 50px "IBM Plex Mono"')]),await document.fonts.ready,await new Promise(s=>setTimeout(s,50)),Y(!0),L.current){const s=L.current.getLayers()[0];s&&s.batchDraw()}}catch(s){console.error("Font loading error:",s),Y(!0)}else Y(!0)})()},[]),u.useEffect(()=>{const o=()=>{Z({width:window.innerWidth,height:window.innerHeight})};return window.addEventListener("resize",o),()=>window.removeEventListener("resize",o)},[]),u.useEffect(()=>{if(G&&L.current){const o=L.current.getLayers()[0];o&&o.batchDraw()}},[n,G]);const T=n.find(o=>o.type==="text"&&o.isEditing),ve=Te(n);u.useEffect(()=>{if(!M.current)return;const o=(s=0)=>{if(c.length>0){const h=c.map(p=>N.current.get(p)).filter(p=>p!==void 0);if(h.length>0){M.current.nodes(h),M.current.show(),M.current.forceUpdate();const p=M.current.getLayer();p&&p.batchDraw()}else if(s<10){const p=Math.min(50*(s+1),100);setTimeout(()=>o(s+1),p)}}else M.current.nodes([])};o(0)},[c,n]);const $e=(o,s=!1)=>{s?c.includes(o)?r(c.filter(h=>h!==o)):r([...c,o]):r([o])},ge=u.useRef(null),Me=o=>{const s=o.target;ge.current={x:s.x(),y:s.y()},c.length>1&&(B.current.clear(),c.forEach(p=>{const m=N.current.get(p);m&&B.current.set(p,{x:m.x(),y:m.y()})}))},Ee=o=>{const s=o.target,h=o.evt.shiftKey,p=c.length>1;if(h&&!p&&ge.current){const m=ge.current,k=s.x(),C=s.y(),E=Math.abs(k-m.x),H=Math.abs(C-m.y);E>H?s.y(m.y):s.x(m.x)}{const k=Q.width/2,C=Q.height/2;if(c.length>1){const H=c.map(w=>N.current.get(w)).filter(w=>w!==void 0);if(H.length===c.length&&H.length>1){let w=1/0,F=1/0,j=-1/0,K=-1/0;H.forEach(ue=>{const tt=ue.width(),nt=ue.height(),it=ue.x(),ot=ue.y(),Be=it,We=ot,st=Be+tt,at=We+nt;w=Math.min(w,Be),F=Math.min(F,We),j=Math.max(j,st),K=Math.max(K,at)});const te=j-w,ne=K-F,oe=w+te/2,ae=F+ne/2;let ce=0,de=0,fe=!1,xe=!1;h||(Math.abs(oe-k)<10&&(ce=k-oe,fe=!0),Math.abs(ae-C)<10&&(de=C-ae,xe=!0)),fe||xe?(H.forEach(ue=>{ce!==0&&ue.x(ue.x()+ce),de!==0&&ue.y(ue.y()+de)}),re({vertical:fe,horizontal:xe})):re({vertical:!1,horizontal:!1})}}else{const H=s.width(),w=s.height(),F=s.x(),j=s.y(),K=F+H/2,te=j+w/2;let ne=F,oe=j,ae=!1,ce=!1,de=!1;if(h&&ge.current){const fe=Math.abs(F-ge.current.x),xe=Math.abs(j-ge.current.y);de=fe>xe}Math.abs(K-k)<10&&(!h||de)&&(ne=k-H/2,ae=!0),Math.abs(te-C)<10&&(!h||!de)&&(oe=C-w/2,ce=!0),ae||ce?(s.x(ne),s.y(oe),re({vertical:ae,horizontal:ce})):re({vertical:!1,horizontal:!1})}}},Fe=o=>s=>{const h=s.target;ge.current=null,B.current.clear(),re({vertical:!1,horizontal:!1});const p=c.length>1&&c.includes(o),m=8,k=8;if(p)D.current&&clearTimeout(D.current),D.current=setTimeout(()=>{const C=n.map(E=>{if(c.includes(E.id)){const H=N.current.get(E.id);if(H){let w=H.x(),F=H.y();E.type==="text"&&E.hasBackground&&(w-=m,F-=k);const j=E.isFromLayout?!0:E.isModified;return{...E,x:w,y:F,isModified:j}}}return E});a(C),D.current=null},10);else{const C=n.map(E=>{if(E.id===o){let H=h.x(),w=h.y();E.type==="text"&&E.hasBackground&&(H-=m,w-=k);const F=E.isFromLayout?!0:E.isModified;return{...E,x:H,y:w,isModified:F}}return E});a(C)}},De=o=>s=>{const h=s.target,p=h.scaleX(),m=h.scaleY(),k=8,C=8;if(c.length>1)_.current&&clearTimeout(_.current),_.current=setTimeout(()=>{const H=n.map(w=>{if(c.includes(w.id)){const F=N.current.get(w.id);if(F){const j=F.scaleX(),K=F.scaleY();F.scaleX(1),F.scaleY(1);let te=F.x(),ne=F.y();w.type==="text"&&w.hasBackground&&(te-=k,ne-=C);const oe=w.isFromLayout?!0:w.isModified;let ae,ce;w.type==="text"&&w.hasBackground?(ae=w.width,ce=w.height):(ae=F.width(),ce=F.height());const de={...w,x:te,y:ne,width:Math.max(5,ae*j),height:Math.max(5,ce*K),rotation:F.rotation(),isModified:oe};if(w.type==="text"){const fe=Math.min(j,K),xe=Math.max(10,w.fontSize*fe);return{...de,fontSize:xe}}return de}}return w});a(H),_.current=null},10);else{h.scaleX(1),h.scaleY(1);const H=n.map(w=>{if(w.id===o){let F=h.x(),j=h.y();w.type==="text"&&w.hasBackground&&(F-=k,j-=C);const K=w.isFromLayout?!0:w.isModified;let te,ne;w.type==="text"&&w.hasBackground?(te=w.width,ne=w.height):(te=h.width(),ne=h.height());const oe={...w,x:F,y:j,width:Math.max(5,te*p),height:Math.max(5,ne*m),rotation:h.rotation(),isModified:K};if(w.type==="text"){const ae=Math.min(p,m),ce=Math.max(10,w.fontSize*ae);return{...oe,fontSize:ce}}return oe}return w});a(H)}},pe=(o,s,h,p)=>{const m=n.map(k=>{if(k.id===o&&k.type==="text"){const E=(k.width!==h||k.height!==p)&&k.isFromLayout?!0:k.isModified;return{...k,text:s,width:h,height:p,isModified:E}}return k});a(m)},Se=(o,s,h,p)=>{if(!s){const k=n.find(C=>C.id===o&&C.type==="text");if(k&&k.text.trim()===""){const C=n.filter(E=>E.id!==o);a(C);return}}const m=n.map(k=>k.id===o&&k.type==="text"?{...k,isEditing:s}:k);if(a(m),s&&h!==void 0&&p!==void 0){const k=n.find(C=>C.id===o&&C.type==="text");if(k){const C=en(k.text,h,k.fontSize,k.fontFamily,k.bold,k.italic,k.fontWeight);S.current=C}}else s&&(S.current=null)};u.useEffect(()=>{if(T&&A.current)if(A.current.focus(),S.current!==null){const o=S.current;A.current.setSelectionRange(o,o),S.current=null}else{const o=A.current.value.length;A.current.setSelectionRange(o,o)}},[T==null?void 0:T.id]);const Ne=o=>{if(!T)return;const s=o.target.value;try{const h=new we.Text({text:s||"M",fontSize:T.fontSize,fontFamily:T.fontFamily,fontStyle:Qe(T.bold,T.italic,T.fontWeight)}),p=Math.max(100,h.width()+4),m=Math.max(40,h.height()+2);h.destroy(),pe(T.id,s,p,m)}catch(h){console.error("Error in textarea change:",h),pe(T.id,s,T.width,T.height)}},ke=()=>{T&&Se(T.id,!1)},He=T?(()=>{if(!T||!L.current)return{top:0,left:0};const h=L.current.container().getBoundingClientRect(),p=T.fontSize*.05,m=T.hasBackground?0:-p;return{top:h.top+T.y+ee.y+m,left:h.left+T.x+ee.x}})():{top:0,left:0},f=o=>{if(o.target!==o.target.getStage()||d)return;const s=o.target.getStage(),h=s==null?void 0:s.getPointerPosition();if(h){const p={x:h.x-ee.x,y:h.y-ee.y};q.current=p,$({x:p.x,y:p.y,width:0,height:0})}},x=o=>{if(!q.current)return;const s=o.target.getStage(),h=s==null?void 0:s.getPointerPosition();if(h){const p={x:h.x-ee.x,y:h.y-ee.y},m=q.current;$({x:Math.min(m.x,p.x),y:Math.min(m.y,p.y),width:Math.abs(p.x-m.x),height:Math.abs(p.y-m.y)})}},y=o=>{if(!q.current)return;if(X&&(X.width>5||X.height>5)){const h=[];n.forEach(p=>{const m={x:p.x,y:p.y,width:p.width,height:p.height};!(X.x>m.x+m.width||X.x+X.width<m.x||X.y>m.y+m.height||X.y+X.height<m.y)&&h.push(p.id)}),h.length>0?r(h):r([])}else o.target===o.target.getStage()&&r([]);q.current=null,$(null)};return t.jsxs("div",{style:{position:"fixed",top:0,left:0,width:"100vw",height:"100vh",pointerEvents:"none"},children:[t.jsx("div",{onMouseEnter:()=>V(!0),onMouseLeave:()=>V(!1),style:{position:"absolute",left:ee.x,top:ee.y,width:Q.width,height:Q.height,border:"1px solid #EBEBEB",borderRadius:W?"0px":"10px",boxShadow:"0 4px 6px -2px rgba(5, 32, 81, 0.04), 0 12px 16px -4px rgba(5, 32, 81, 0.09)",transition:"border-radius 0.15s ease-in-out",pointerEvents:"none"}}),t.jsx(dt,{ref:L,width:se.width,height:se.height,onMouseDown:f,onMouseMove:x,onMouseUp:y,onClick:o=>{if(o.target===o.target.getStage()&&d&&l){const s=o.target.getStage(),h=s==null?void 0:s.getPointerPosition();h&&l(h.x-ee.x,h.y-ee.y)}},style:{cursor:d?"text":"default",pointerEvents:"auto"},children:t.jsxs(gt,{x:ee.x,y:ee.y,children:[le?t.jsx(Ke,{x:0,y:0,width:Q.width,height:Q.height,image:le,listening:!1}):t.jsx(he,{x:0,y:0,width:Q.width,height:Q.height,fill:"#ffffff",listening:!1}),ve.map(o=>t.jsx(Gt,{object:o,isSelected:c.includes(o.id),onSelect:s=>{var p;const h=((p=s==null?void 0:s.evt)==null?void 0:p.shiftKey)||!1;$e(o.id,h)},onDragStart:Me,onDragMove:Ee,onDragEnd:Fe(o.id),onTransformEnd:De(o.id),onEditingChange:Se,onMouseEnter:()=>U(o.id),onMouseLeave:()=>U(null),shapeRef:s=>{s?N.current.set(o.id,s):N.current.delete(o.id)}},o.id)),X&&t.jsx(he,{x:X.x,y:X.y,width:X.width,height:X.height,fill:"rgba(63, 174, 230, 0.1)",stroke:"#3faee6",strokeWidth:1,dash:[5,5],listening:!1}),ie.vertical&&t.jsx(he,{x:Q.width/2,y:0,width:1,height:Q.height,fill:"#FF6B6B",listening:!1,opacity:.8}),ie.horizontal&&t.jsx(he,{x:0,y:Q.height/2,width:Q.width,height:1,fill:"#FF6B6B",listening:!1,opacity:.8}),z&&!c.includes(z)&&(()=>{const o=N.current.get(z);if(o){const s=o.getClientRect();return t.jsx(he,{x:s.x-ee.x,y:s.y-ee.y,width:s.width,height:s.height,stroke:"#3faee6",strokeWidth:1,dash:[4,4],listening:!1,opacity:.5})}return null})(),t.jsx(ut,{ref:M,keepRatio:!0,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],rotateEnabled:!0,anchorSize:8,anchorCornerRadius:2,borderStroke:"#3faee6",borderStrokeWidth:2,anchorStroke:"#3faee6",anchorFill:"#ffffff",anchorStrokeWidth:2,boundBoxFunc:(o,s)=>s.width<5||s.height<5?o:s})]})}),T&&(()=>{const k=T.hasBackground?T.backgroundColor||T.fill:"transparent",C=T.hasBackground?Qt(k):T.fill;return t.jsx("textarea",{ref:A,value:T.text,onChange:Ne,onBlur:ke,onKeyDown:E=>{E.key==="Escape"&&ke()},style:{position:"fixed",top:`${He.top}px`,left:`${He.left}px`,width:`${T.width}px`,height:`${T.height}px`,fontSize:`${T.fontSize}px`,fontFamily:T.fontFamily,fontWeight:T.fontWeight==="black"?900:T.bold?700:400,fontStyle:T.italic?"italic":"normal",textAlign:T.align||"left",color:C,background:k,border:"none",borderRadius:T.hasBackground?"8px":"0",padding:T.hasBackground?"8px 8px 5px 8px":"0",margin:"0",resize:"none",outline:"none",overflow:"hidden",lineHeight:"1",zIndex:999,pointerEvents:"auto",boxSizing:"border-box"}})})()]})}function nn(){return t.jsx("div",{style:{width:"18px",height:"18px",borderRadius:"999px",border:"1px solid #e5e9ed",background:"linear-gradient(180deg, #ffffff 27.928%, #e7e9f5 100%)",overflow:"hidden"}})}function on(){return t.jsx("div",{style:{width:"18px",height:"18px",borderRadius:"999px",border:"1px solid #e5e9ed",background:"linear-gradient(135deg, rgba(232, 199, 255, 0.8) 0%, rgba(173, 216, 255, 0.8) 100%)",overflow:"hidden"}})}function sn(){return t.jsx("div",{style:{width:"18px",height:"18px",borderRadius:"999px",border:"1px solid #e5e9ed",background:"linear-gradient(130.786deg, rgba(147, 28, 186, 1) 15.907%, rgba(26, 26, 48, 1) 52.739%, rgba(4, 107, 226, 1) 90.547%)",overflow:"hidden"}})}function an({bgColor:e,onChange:i}){const[n,c]=u.useState(null);return t.jsxs("div",{className:"flex items-center gap-[9px] lg:gap-[10px]",children:[t.jsx("span",{className:"text-[#999999] text-[14px] lg:text-[16px] font-normal",style:{fontFamily:"Inter, sans-serif"},children:"Background color:"}),t.jsxs("div",{className:"flex items-center gap-[4.5px] lg:gap-[5px] h-[36px] lg:h-[40px] p-[3.6px] lg:p-[4px] bg-[#EDF0F2] border border-[#F8F9FA] rounded-[99px]",children:[t.jsx("button",{onClick:()=>i("seriousLight"),onMouseEnter:()=>c("seriousLight"),onMouseLeave:()=>c(null),className:"flex items-center justify-center w-[34px] lg:w-[38px] h-[29px] lg:h-[32px] p-[9px] lg:p-[10px] border-none rounded-[99px] cursor-pointer transition-[background] duration-150 ease-in-out",style:{background:e==="seriousLight"?"#DEE2E7":n==="seriousLight"?"#f0f2f4":"transparent"},title:"Serious Light background",children:t.jsx(nn,{})}),t.jsx("button",{onClick:()=>i("light"),onMouseEnter:()=>c("light"),onMouseLeave:()=>c(null),className:"flex items-center justify-center w-[34px] lg:w-[38px] h-[29px] lg:h-[32px] p-[9px] lg:p-[10px] border-none rounded-[99px] cursor-pointer transition-[background] duration-150 ease-in-out",style:{background:e==="light"?"#DEE2E7":n==="light"?"#f0f2f4":"transparent"},title:"Light background with gradients",children:t.jsx(on,{})}),t.jsx("button",{onClick:()=>i("dark"),onMouseEnter:()=>c("dark"),onMouseLeave:()=>c(null),className:"flex items-center justify-center w-[34px] lg:w-[38px] h-[29px] lg:h-[32px] p-[9px] lg:p-[10px] border-none rounded-[99px] cursor-pointer transition-[background] duration-150 ease-in-out",style:{background:e==="dark"?"#DEE2E7":n==="dark"?"#f0f2f4":"transparent"},title:"Dark background",children:t.jsx(sn,{})})]})]})}function rn({selected:e=!1}){return t.jsx("div",{style:{position:"relative",width:"16px",height:"16px"},children:t.jsx("div",{style:{position:"absolute",inset:"4.17%",width:"calc(100% - 8.34%)",height:"calc(100% - 8.34%)"},children:t.jsx("img",{alt:"X",style:{display:"block",maxWidth:"none",width:"100%",height:"100%"},src:e?"/assets/sizes/Property 1=selected.svg":"/assets/sizes/Property 1=Default.svg"})})})}function ln({selected:e=!1}){const i=e?"/assets/sizes/Property 1=selected-1.svg":"/assets/sizes/Property 1=Default-1.svg";return t.jsx("div",{style:{position:"relative",width:"16px",height:"16px"},children:t.jsx("img",{alt:"LinkedIn",style:{display:"block",width:"100%",height:"100%"},src:i})})}function cn({selected:e=!1}){const i=e?"/assets/sizes/Property 1=selected-2.svg":"/assets/sizes/Property 1=Default-2.svg";return t.jsx("div",{style:{position:"relative",width:"16px",height:"16px"},children:t.jsx("img",{alt:"HF",style:{display:"block",width:"100%",height:"100%"},src:i})})}const dn={"1200x675":"1200x675",linkedin:"1200x627",hf:"1160x580"};function gn({canvasSize:e,onChange:i}){const[n,c]=u.useState(null),[r,a]=u.useState(window.innerWidth>=1024);u.useEffect(()=>{const l=()=>{a(window.innerWidth>=1024)};return window.addEventListener("resize",l),()=>window.removeEventListener("resize",l)},[]);const d=(l,g,b)=>{const v=e===l,L=n===l;return t.jsxs("button",{onClick:()=>i(l),onMouseEnter:()=>c(l),onMouseLeave:()=>c(null),className:"flex items-center border-none rounded-[99px] cursor-pointer overflow-hidden transition-[background,padding,min-width] duration-150 ease-in-out",style:{justifyContent:v?"flex-start":"center",gap:"4.5px",height:r?"32px":"29px",minWidth:r?"38px":"34px",paddingLeft:v?r?"10px":"9px":r?"9px":"8px",paddingRight:v?r?"10px":"9px":r?"9px":"8px",background:v?"#DEE2E7":L?"#f0f2f4":"transparent"},title:b,children:[t.jsx(g,{selected:v}),t.jsx("span",{className:"whitespace-nowrap overflow-hidden transition-[opacity,transform] duration-150 ease-in-out",style:{color:"#32343d",fontSize:r?"16px":"14px",fontWeight:"normal",fontFamily:"Inter, sans-serif",opacity:v?.6:0,transform:v?"translateX(0)":"translateX(-10px)",width:v?"auto":"0"},children:dn[l]})]})};return t.jsxs("div",{className:"flex items-center gap-[9px] lg:gap-[10px]",children:[t.jsx("span",{className:"text-[#999999] text-[14px] lg:text-[16px] font-normal",style:{fontFamily:"Inter, sans-serif"},children:"Size:"}),t.jsxs("div",{className:"flex items-center gap-[4.5px] lg:gap-[5px] h-[36px] lg:h-[40px] p-[3.6px] lg:p-[4px] bg-[#EDF0F2] border border-[#F8F9FA] rounded-[99px]",children:[d("1200x675",rn,"1200×675 (Default)"),d("linkedin",ln,"LinkedIn size (1200x627)"),d("hf",cn,"HF custom size (1160x580)")]})]})}function un({canvasSize:e,bgColor:i,onCanvasSizeChange:n,onBgColorChange:c}){const[r,a]=u.useState({width:window.innerWidth,height:window.innerHeight});u.useEffect(()=>{const v=()=>{a({width:window.innerWidth,height:window.innerHeight})};return window.addEventListener("resize",v),()=>window.removeEventListener("resize",v)},[]);const d=ye(e),l={x:(r.width-d.width)/2,y:(r.height-d.height)/2},b=l.y-40-20;return t.jsxs("div",{style:{position:"fixed",top:`${b}px`,left:`${l.x}px`,width:`${d.width}px`,display:"flex",alignItems:"center",justifyContent:"space-between",transition:"all 0.15s ease-in-out",zIndex:1e3,pointerEvents:"auto"},children:[t.jsx(an,{bgColor:i,onChange:c}),t.jsx(gn,{canvasSize:e,onChange:n})]})}function hn({onKeep:e,onReplace:i,onCancel:n}){return t.jsx("div",{className:"fixed inset-0 z-[100] flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm",onClick:n,children:t.jsxs("div",{className:"bg-[#2b2d31] rounded-[12px] shadow-2xl max-w-[480px] w-full mx-4 overflow-hidden",onClick:c=>c.stopPropagation(),children:[t.jsxs("div",{className:"flex items-center justify-between px-6 py-4 border-b border-[#3e4044]",children:[t.jsx("h2",{className:"text-white text-[18px] font-semibold",children:"Switch Layout"}),t.jsx("button",{onClick:n,className:"text-gray-400 hover:text-white transition-colors p-1 hover:bg-[#3e4044] rounded",children:t.jsx(Wt,{size:20})})]}),t.jsxs("div",{className:"px-6 py-5",children:[t.jsx("p",{className:"text-gray-300 text-[15px] leading-relaxed mb-4",children:"You have custom objects on the canvas. What would you like to do?"}),t.jsxs("div",{className:"space-y-3",children:[t.jsx("div",{className:"bg-[#1e1f22] rounded-[8px] p-4 border border-[#3e4044]",children:t.jsxs("div",{className:"flex items-start gap-3",children:[t.jsx("div",{className:"w-5 h-5 rounded-full border-2 border-[#5865f2] flex-shrink-0 mt-0.5"}),t.jsxs("div",{children:[t.jsx("p",{className:"text-white font-medium text-[14px] mb-1",children:"Keep my objects"}),t.jsx("p",{className:"text-gray-400 text-[13px]",children:"Add the new layout objects alongside your existing work"})]})]})}),t.jsx("div",{className:"bg-[#1e1f22] rounded-[8px] p-4 border border-[#3e4044]",children:t.jsxs("div",{className:"flex items-start gap-3",children:[t.jsx("div",{className:"w-5 h-5 rounded-full border-2 border-[#ed4245] flex-shrink-0 mt-0.5"}),t.jsxs("div",{children:[t.jsx("p",{className:"text-white font-medium text-[14px] mb-1",children:"Replace everything"}),t.jsx("p",{className:"text-gray-400 text-[13px]",children:"Remove all objects and load a fresh layout"})]})]})})]})]}),t.jsxs("div",{className:"px-6 py-4 bg-[#1e1f22] flex items-center justify-end gap-3",children:[t.jsx("button",{onClick:n,className:"px-4 py-2 rounded-[6px] text-white text-[14px] font-medium hover:bg-[#3e4044] transition-colors",children:"Cancel"}),t.jsx("button",{onClick:i,className:"px-4 py-2 rounded-[6px] bg-[#ed4245] text-white text-[14px] font-medium hover:bg-[#d13438] transition-colors",children:"Replace"}),t.jsx("button",{onClick:e,className:"px-4 py-2 rounded-[6px] bg-[#5865f2] text-white text-[14px] font-medium hover:bg-[#4752c4] transition-colors",children:"Keep"})]})]})})}function Ie(e){const i=parseInt(e.slice(1,3),16)/255,n=parseInt(e.slice(3,5),16)/255,c=parseInt(e.slice(5,7),16)/255,r=Math.max(i,n,c),a=Math.min(i,n,c),d=r-a;let l=0;d!==0&&(r===i?l=((n-c)/d+(n<c?6:0))/6:r===n?l=((c-i)/d+2)/6:l=((i-n)/d+4)/6);const g=r===0?0:d/r,b=r;return{h:l*360,s:g*100,v:b*100}}function pn(e,i,n){e=e/360,i=i/100,n=n/100;const c=Math.floor(e*6),r=e*6-c,a=n*(1-i),d=n*(1-r*i),l=n*(1-(1-r)*i);let g=0,b=0,v=0;switch(c%6){case 0:g=n,b=l,v=a;break;case 1:g=d,b=n,v=a;break;case 2:g=a,b=n,v=l;break;case 3:g=a,b=d,v=n;break;case 4:g=l,b=a,v=n;break;case 5:g=n,b=a,v=d;break}const L=O=>{const M=Math.round(O*255).toString(16);return M.length===1?"0"+M:M};return`#${L(g)}${L(b)}${L(v)}`}function fn({color:e,onChange:i}){const n=Ie(e),[c,r]=u.useState(n.h),[a,d]=u.useState(n.s),[l,g]=u.useState(n.v),[b,v]=u.useState(e.toUpperCase()),L=u.useRef(null),O=u.useRef(null),M=u.useRef(null),[N,A]=u.useState(!1),[S,G]=u.useState(!1),[Y,X]=u.useState(!1),[$,q]=u.useState(!1),_=u.useRef(e.toUpperCase()),D=u.useRef(!1);u.useEffect(()=>{if(!$){const I=pn(c,a,l),R=I.toUpperCase();v(R),R!==_.current&&(i(I),_.current=R,D.current=!0,setTimeout(()=>{D.current=!1},300))}},[c,a,l,i,$]),u.useEffect(()=>{const I=e.toUpperCase();if(!$&&!N&&!S&&!Y&&!D.current&&I!==_.current){const R=Ie(e);r(R.h),d(R.s),g(R.v),v(I),_.current=I}},[e,$,N,S,Y]);const B=I=>{A(!0),z(I)},z=I=>{if(!L.current)return;const R=L.current.getBoundingClientRect(),J=Math.max(0,Math.min(I.clientX-R.left,R.width)),le=Math.max(0,Math.min(I.clientY-R.top,R.height));d(J/R.width*100),g(100-le/R.height*100)},U=I=>{G(!0),W(I)},W=I=>{if(!O.current)return;const R=O.current.getBoundingClientRect(),J=Math.max(0,Math.min(I.clientX-R.left,R.width));r(J/R.width*360)},V=I=>{X(!0),ie(I)},ie=I=>{if(!M.current)return;const R=M.current.getBoundingClientRect(),J=Math.max(0,Math.min(I.clientX-R.left,R.width));d(J/R.width*100)};u.useEffect(()=>{const I=J=>{N&&z(J),S&&W(J),Y&&ie(J)},R=()=>{A(!1),G(!1),X(!1)};if(N||S||Y)return document.addEventListener("mousemove",I),document.addEventListener("mouseup",R),()=>{document.removeEventListener("mousemove",I),document.removeEventListener("mouseup",R)}},[N,S,Y]);const re=I=>{q(!0);let R=I.target.value.toUpperCase();if(R.startsWith("#")||(R="#"+R),v(R),/^#[0-9A-F]{6}$/i.test(R)){const J=Ie(R);r(J.h),d(J.s),g(J.v),i(R),q(!1)}},se=async()=>{if(!window.EyeDropper){alert("EyeDropper API is not supported in your browser. Please use Chrome or Edge.");return}try{const J=(await new window.EyeDropper().open()).sRGBHex,le=Ie(J);r(le.h),d(le.s),g(le.v),v(J.toUpperCase()),i(J)}catch{}},Z=a/100*100,Q=(1-l/100)*100,ee=c/360*100;return t.jsxs("div",{onMouseDown:I=>I.stopPropagation(),onClick:I=>I.stopPropagation(),style:{position:"absolute",bottom:"calc(100% + 8px)",right:0,width:"280px",backgroundColor:"#252525",border:"1px solid #1b1b1b",borderRadius:"8px",padding:"16px",boxShadow:"0 4px 6px -2px rgba(0, 0, 0, 0.1), 0 12px 16px -4px rgba(0, 0, 0, 0.17)",zIndex:1e3},children:[t.jsx("div",{ref:L,onMouseDown:B,style:{position:"relative",width:"100%",height:"112px",borderRadius:"8px",marginBottom:"16px",cursor:"crosshair",background:`
+            linear-gradient(to bottom, transparent, black),
+            linear-gradient(to right, white, transparent),
+            hsl(${c}, 100%, 50%)
+          `},children:t.jsx("div",{style:{position:"absolute",left:`${Z}%`,top:`${Q}%`,width:"12px",height:"12px",border:"2px solid white",borderRadius:"50%",transform:"translate(-50%, -50%)",boxShadow:"0 0 0 1px rgba(0, 0, 0, 0.3)",pointerEvents:"none"}})}),t.jsxs("div",{style:{display:"flex",gap:"10px",marginBottom:"16px"},children:[t.jsx("button",{onClick:se,title:"Pick color from screen",style:{width:"24px",height:"24px",borderRadius:"4px",backgroundColor:"rgba(255, 255, 255, 0.05)",border:"1px solid rgba(255, 255, 255, 0.1)",flexShrink:0,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",padding:0},children:t.jsx(Bt,{size:14,color:"white"})}),t.jsxs("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:"8px"},children:[t.jsx("div",{ref:O,onMouseDown:U,style:{position:"relative",width:"100%",height:"12px",borderRadius:"100px",background:"linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)",cursor:"pointer"},children:t.jsx("div",{style:{position:"absolute",left:`${ee}%`,top:"50%",width:"12px",height:"12px",border:"2px solid white",borderRadius:"50%",transform:"translate(-50%, -50%)",boxShadow:"0 0 0 1px rgba(0, 0, 0, 0.3)",pointerEvents:"none"}})}),t.jsx("div",{ref:M,onMouseDown:V,style:{position:"relative",width:"100%",height:"12px",borderRadius:"100px",background:`linear-gradient(to right, white, hsl(${c}, 100%, 50%))`,cursor:"pointer"},children:t.jsx("div",{style:{position:"absolute",left:`${a}%`,top:"50%",width:"12px",height:"12px",border:"2px solid white",borderRadius:"50%",transform:"translate(-50%, -50%)",boxShadow:"0 0 0 1px rgba(0, 0, 0, 0.3)",pointerEvents:"none"}})})]})]}),t.jsxs("div",{style:{display:"flex",gap:"4px"},children:[t.jsx("div",{style:{padding:"8px",borderRadius:"8px",color:"#eeeeee",fontSize:"14px",fontFamily:"Inter, sans-serif",opacity:.8,width:"72px",textAlign:"center",display:"flex",alignItems:"center",justifyContent:"center"},children:"Hex"}),t.jsx("input",{type:"text",value:b,onChange:re,onBlur:()=>q(!1),onKeyDown:I=>I.stopPropagation(),onKeyUp:I=>I.stopPropagation(),onKeyPress:I=>I.stopPropagation(),maxLength:7,style:{flex:1,padding:"8px 4px",backgroundColor:"#1b1b1b",border:"none",borderRadius:"6px",color:"#eeeeee",fontSize:"12px",fontFamily:"Inter, sans-serif",fontWeight:500,textAlign:"center",outline:"none"},onClick:I=>I.stopPropagation(),onMouseDown:I=>I.stopPropagation()})]})]})}function xn({fontFamily:e,fill:i,bold:n,italic:c,hasBackground:r=!1,canvasWidth:a,canvasHeight:d,scale:l=1,onFontFamilyChange:g,onFillChange:b,onBoldToggle:v,onItalicToggle:L,onBackgroundToggle:O,fontWeight:M="normal"}){const[N,A]=u.useState(!1),[S,G]=u.useState(!1),[Y,X]=u.useState("down"),[$,q]=u.useState(window.innerWidth>=1024),_=u.useRef(null),D=["Inter","IBM Plex Mono","Bison","Source Sans 3"],B={Inter:{bold:!0,italic:!0,black:!1},"IBM Plex Mono":{bold:!0,italic:!0,black:!1},Bison:{bold:!1,italic:!1,black:!1},"Source Sans 3":{bold:!0,italic:!0,black:!0}},z=B[e].bold,U=B[e].italic,W=B[e].black;u.useEffect(()=>{const I=()=>{q(window.innerWidth>=1024)};return window.addEventListener("resize",I),()=>window.removeEventListener("resize",I)},[]),u.useEffect(()=>{if(N&&_.current){const I=_.current.getBoundingClientRect(),R=D.length*40+8,J=window.innerHeight-I.bottom,le=I.top;J<R&&le>J?X("up"):X("down")}},[N,D.length]);const V=a*l,ie=d*l,re=80*l,se=`calc((100vw - ${V}px) / 2)`,Z=`calc((100vh - ${ie}px - ${re}px) / 2 - 10px - 44px)`,Q=$?"4px":"3.6px",ee=$?"4px":"3.6px";return t.jsx("div",{className:"text-toolbar",onMouseDown:I=>{I.stopPropagation()},onClick:I=>{I.stopPropagation()},style:{position:"fixed",right:se,bottom:Z,zIndex:100,backgroundColor:"#27272A",borderRadius:$?"8px":"7px",padding:Q,boxShadow:"0 4px 6px -2px rgba(0, 0, 0, 0.1), 0 12px 16px -4px rgba(0, 0, 0, 0.17)",transition:"right 0.15s ease-in-out, bottom 0.15s ease-in-out"},children:t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:ee},children:[t.jsxs("div",{style:{position:"relative"},children:[t.jsxs("button",{ref:_,onClick:()=>{A(!N),G(!1)},style:{display:"flex",alignItems:"center",gap:$?"20px":"18px",padding:$?"8px":"7px",backgroundColor:"rgba(255, 255, 255, 0.05)",border:"none",borderRadius:"4px",color:"white",fontSize:$?"16px":"14px",fontFamily:"Source Sans Pro, sans-serif",cursor:"pointer",whiteSpace:"nowrap"},children:[e,t.jsx(Rt,{size:$?14:13,style:{transform:N&&Y==="up"?"rotate(180deg)":"none",transition:"transform 0.15s ease-in-out"}})]}),N&&t.jsx("div",{style:{position:"absolute",...Y==="down"?{top:$?"calc(100% + 4px)":"calc(100% + 3.6px)"}:{bottom:$?"calc(100% + 4px)":"calc(100% + 3.6px)"},left:0,backgroundColor:"#27272A",border:"1px solid #09090B",borderRadius:$?"8px":"7px",padding:$?"4px":"3.6px",minWidth:$?"160px":"144px",zIndex:1e3},children:D.map(I=>t.jsx("button",{onClick:()=>{g(I),A(!1)},style:{display:"block",width:"100%",padding:$?"8px 12px":"7px 11px",backgroundColor:e===I?"rgba(255, 255, 255, 0.1)":"transparent",border:"none",borderRadius:"4px",color:"white",fontSize:$?"14px":"13px",fontFamily:I,textAlign:"left",cursor:"pointer"},onMouseEnter:R=>{e!==I&&(R.currentTarget.style.backgroundColor="rgba(255, 255, 255, 0.05)")},onMouseLeave:R=>{e!==I&&(R.currentTarget.style.backgroundColor="transparent")},children:I},I))})]}),t.jsx("div",{style:{width:"1px",height:$?"18px":"16px",backgroundColor:"rgba(255, 255, 255, 0.2)"}}),t.jsxs("div",{style:{position:"relative"},children:[t.jsx("button",{onClick:()=>{G(!S),A(!1)},style:{display:"flex",alignItems:"center",justifyContent:"center",padding:$?"10px":"9px",backgroundColor:"transparent",border:"none",borderRadius:"99px",cursor:"pointer"},children:t.jsx("div",{style:{width:$?"16px":"14px",height:$?"16px":"14px",borderRadius:"999px",backgroundColor:i,border:"1px solid #e5e9ed"}})}),S&&t.jsx(fn,{color:i,onChange:b})]}),t.jsxs("button",{onClick:z?()=>{v(),A(!1),G(!1)}:void 0,disabled:!z,style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",padding:$?"8px":"7px",backgroundColor:n||M==="black"?"rgba(255, 255, 255, 0.1)":"transparent",border:"none",borderRadius:"4px",cursor:z?"pointer":"not-allowed",color:"white",opacity:z?1:.3},children:[t.jsx(Nt,{size:$?20:18}),W&&M==="black"&&t.jsx("div",{style:{position:"absolute",bottom:"2px",right:"2px",width:$?"6px":"5px",height:$?"6px":"5px",borderRadius:"50%",backgroundColor:"#3faee6"}})]}),t.jsx("button",{onClick:U?()=>{L(),A(!1),G(!1)}:void 0,disabled:!U,style:{display:"flex",alignItems:"center",justifyContent:"center",padding:$?"8px":"7px",backgroundColor:c?"rgba(255, 255, 255, 0.1)":"transparent",border:"none",borderRadius:"4px",cursor:U?"pointer":"not-allowed",color:"white",opacity:U?1:.3},children:t.jsx(Tt,{size:$?20:18})}),t.jsx("button",{onClick:()=>{O(),A(!1),G(!1)},style:{display:"flex",alignItems:"center",justifyContent:"center",padding:$?"8px":"7px",backgroundColor:r?"rgba(255, 255, 255, 0.1)":"transparent",border:"none",borderRadius:"4px",cursor:"pointer",color:"white"},title:"Text background",children:t.jsxs("svg",{width:$?20:18,height:$?20:18,viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[t.jsx("rect",{x:"2",y:"2",width:"16",height:"16",rx:"4",fill:"currentColor",opacity:"0.9"}),t.jsx("text",{x:"10",y:"14",fontSize:"12",fontWeight:"bold",fontFamily:"Arial, sans-serif",fill:"#27272A",textAnchor:"middle",children:"A"})]})})]})})}const mn=50;function yn(){const[e,i]=u.useState([]),[n,c]=u.useState([]),[r,a]=u.useState("1200x675"),[d,l]=u.useState("seriousLight"),g=u.useRef([[]]),b=u.useRef(0),v=u.useRef(!1),L=u.useRef(!1),O=u.useCallback(D=>{i(D),!v.current&&setTimeout(()=>{if(L.current)return;b.current<g.current.length-1&&(g.current=g.current.slice(0,b.current+1));const B=V=>V.map(ie=>{if(ie.type==="text"){const{isEditing:re,...se}=ie;return se}return ie}),z=B(D),U=g.current[b.current]?B(g.current[b.current]):[];if(JSON.stringify(U)!==JSON.stringify(z)){const V=JSON.parse(JSON.stringify(z));g.current.push(V),b.current++,g.current.length>mn&&(g.current.shift(),b.current--)}},0)},[]),M=u.useCallback(()=>{if(b.current>0){v.current=!0,b.current--;const B=JSON.parse(JSON.stringify(g.current[b.current])).map(z=>{if(z.type==="text"&&z.text)try{const U=require("konva").default,W=new U.Text({text:z.text,fontSize:z.fontSize,fontFamily:z.fontFamily,fontStyle:`${z.bold?"bold":"normal"} ${z.italic?"italic":""}`}),V=Math.max(100,W.width()+20),ie=Math.max(40,W.height()+10);return W.destroy(),{...z,width:V,height:ie,isEditing:!1}}catch(U){return console.error("Error recalculating text dimensions:",U),z}return z});i(B),c([]),setTimeout(()=>{v.current=!1},0)}},[]),N=u.useCallback(()=>{if(b.current<g.current.length-1){v.current=!0,b.current++;const B=JSON.parse(JSON.stringify(g.current[b.current])).map(z=>{if(z.type==="text"&&z.text)try{const U=require("konva").default,W=new U.Text({text:z.text,fontSize:z.fontSize,fontFamily:z.fontFamily,fontStyle:`${z.bold?"bold":"normal"} ${z.italic?"italic":""}`}),V=Math.max(100,W.width()+20),ie=Math.max(40,W.height()+10);return W.destroy(),{...z,width:V,height:ie,isEditing:!1}}catch(U){return console.error("Error recalculating text dimensions:",U),z}return z});i(B),c([]),setTimeout(()=>{v.current=!1},0)}},[]),A=D=>{const B={...D,id:Pe(),zIndex:ze(e)};O([...e,B]),c([B.id])},S=()=>{n.length>0&&(O(e.filter(D=>!n.includes(D.id))),c([]))},G=D=>{n.length>0&&O(e.map(B=>n.includes(B.id)?{...B,...D}:B))},Y=D=>{const B=ze(e);O(e.map(z=>z.id===D?{...z,zIndex:B}:z))},X=D=>{const B=Math.min(...e.map(z=>z.zIndex));O(e.map(z=>z.id===D?{...z,zIndex:B-1}:z))},$=D=>{const B=e.find(W=>W.id===D);if(!B)return;const z=e.filter(W=>W.zIndex>B.zIndex);if(z.length===0)return;const U=Math.min(...z.map(W=>W.zIndex));O(e.map(W=>W.id===D?{...W,zIndex:U+.5}:W))},q=D=>{const B=e.find(W=>W.id===D);if(!B)return;const z=e.filter(W=>W.zIndex<B.zIndex);if(z.length===0)return;const U=Math.max(...z.map(W=>W.zIndex));O(e.map(W=>W.id===D?{...W,zIndex:U-.5}:W))},_=u.useCallback(D=>{L.current=D},[]);return{objects:e,selectedIds:n,canvasSize:r,bgColor:d,setObjects:O,setSelectedIds:c,setCanvasSize:a,setBgColor:l,addObject:A,deleteSelected:S,updateSelected:G,bringToFront:Y,sendToBack:X,moveForward:$,moveBackward:q,undo:M,redo:N,setSkipHistoryRecording:_}}function wn(e,i){const[n,c]=u.useState(1),[r,a]=u.useState(!0);return u.useEffect(()=>{const d=()=>{const l=window.innerWidth,g=window.innerHeight,b=187,v=200,L=l-b,O=g-v,M=L/e,N=O/i,A=Math.min(M,N,1),S=A>=1;c(A),a(S)};return d(),window.addEventListener("resize",d),()=>{window.removeEventListener("resize",d)}},[e,i]),{scale:n,canFit:r}}function et(e,i,n,c,r){const a=e.map(d=>{const l=r?"        ":"      ";let g=[`${l}{`,`${l}  id: '${d.id}',`,`${l}  type: '${d.type}',`,`${l}  x: ${d.x},`,`${l}  y: ${d.y},`,`${l}  width: ${d.width},`,`${l}  height: ${d.height},`,`${l}  rotation: ${d.rotation},`,`${l}  zIndex: ${d.zIndex},`];return d.type==="text"?(g.push(`${l}  text: '${d.text}',`),g.push(`${l}  fontSize: ${d.fontSize},`),g.push(`${l}  fontFamily: '${d.fontFamily}',`),g.push(`${l}  fill: '${d.fill}',`),g.push(`${l}  bold: ${d.bold},`),g.push(`${l}  italic: ${d.italic},`),d.align&&g.push(`${l}  align: '${d.align}',`),d.fontWeight&&d.fontWeight!=="normal"&&g.push(`${l}  fontWeight: '${d.fontWeight}',`),d.hasBackground&&(g.push(`${l}  hasBackground: ${d.hasBackground},`),d.backgroundColor&&g.push(`${l}  backgroundColor: '${d.backgroundColor}',`))):d.type==="image"||d.type==="huggy"?(g.push(`${l}  src: '${d.src}',`),g.push(`${l}  name: '${d.name||"Untitled"}',`)):d.type==="rect"&&(g.push(`${l}  fill: '${d.fill}',`),d.stroke&&g.push(`${l}  stroke: '${d.stroke}',`),d.strokeWidth!==void 0&&g.push(`${l}  strokeWidth: ${d.strokeWidth},`)),g.push(`${l}},`),g.join(`
+`)}).join(`
+`);return r?`      ${r}: [
+${a}
+      ],`:`  ${i}: {
+    id: '${i}',
+    name: '${n}',
+    thumbnail: '${c}',
+    objects: [
+${a}
+    ],
+  },`}function bn(e){console.group("📐 Canvas Objects Export"),console.log(`Total objects: ${e.length}`),console.log("Object types:",e.map(n=>n.type).join(", ")),console.group("🔍 Individual Objects"),e.forEach((n,c)=>{console.group(`${c+1}. ${n.type.toUpperCase()}: ${n.id}`),console.log("Position:",{x:n.x,y:n.y}),console.log("Size:",{width:n.width,height:n.height}),console.log("Rotation:",n.rotation),console.log("Z-Index:",n.zIndex),n.type==="text"?(console.log("Text:",n.text),console.log("Font:",`${n.fontSize}px ${n.fontFamily}`),console.log("Color:",n.fill),console.log("Styles:",{bold:n.bold,italic:n.italic,fontWeight:n.fontWeight}),n.hasBackground&&console.log("Background:",{enabled:n.hasBackground,color:n.backgroundColor})):n.type==="image"||n.type==="huggy"?(console.log("Source:",n.src),console.log("Name:",n.name)):n.type==="rect"&&(console.log("Fill:",n.fill),n.stroke&&console.log("Stroke:",n.stroke)),console.log("Full object:",n),console.groupEnd()}),console.groupEnd(),console.group("📋 Ready for layouts.ts"),console.log("Use the following format:");const i=et(e,"myNewLayout","My New Layout","/assets/layouts/myNewLayout_thumbnail.png");console.log(i),console.groupEnd(),console.groupEnd()}function vn(e){return JSON.stringify(e,null,2)}function Sn(){const{objects:e,selectedIds:i,canvasSize:n,bgColor:c,setObjects:r,setSelectedIds:a,setCanvasSize:d,setBgColor:l,addObject:g,deleteSelected:b,undo:v,redo:L,setSkipHistoryRecording:O}=yn(),[M,N]=u.useState(!1),[A,S]=u.useState(null),[G,Y]=u.useState(!1),[X,$]=u.useState(!1),[q,_]=u.useState(!1),[D,B]=u.useState(null),[z,U]=u.useState(null),W=u.useRef(null),V=u.useRef(null),ie=u.useRef(null),re=f=>{const x=f.some(y=>y.type==="text"&&y.isEditing);O(x),r(f)},se=f=>{d(f)},Z=ye(n),{scale:Q}=wn(Z.width,Z.height),ee=()=>{S(A==="layout"?null:"layout"),N(!1)},I=()=>{S(A==="huggy"?null:"huggy"),N(!1)},R=()=>{S(A==="hubicons"?null:"hubicons"),N(!1)},J=()=>{var f;(f=W.current)==null||f.click()},le=()=>{A==="text"?(N(!1),S(null)):(N(!0),S("text"))},T=f=>{if(!Ce(f))return;e.some(o=>!o.isFromLayout)?(B(f),_(!0)):ve(f,!1)},ve=(f,x)=>{const y=Ce(f);if(!y)return;const o=n==="hf"?"hf":"default",s=e.length>0?Math.max(...e.map(m=>m.zIndex)):0,p=Re(y,o).map(m=>({...m,id:`${m.id}-${Date.now()}`,isFromLayout:!0,layoutId:f,isModified:!1,zIndex:x?m.zIndex-s-100:m.zIndex}));r(x?[...p,...e]:p),U(f),a([]),S(null)},$e=()=>{D&&ve(D,!0),_(!1),B(null)},ge=()=>{D&&ve(D,!1),_(!1),B(null)},Me=()=>{_(!1),B(null)},Ee=f=>{const x=ye(n),y=200,o=Math.floor(Math.random()*200)-100,s=Math.floor(Math.random()*200)-100,h=x.width/2-y/2,p=x.height/2-y/2;g({type:"image",x:h+o,y:p+s,width:y,height:y,src:f.thumbnail,rotation:0,isFromLayout:!1}),S(null)},Fe=f=>{const x=ye(n),y=150,o=Math.floor(Math.random()*200)-100,s=Math.floor(Math.random()*200)-100,h=x.width/2-y/2,p=x.height/2-y/2;g({type:"image",x:h+o,y:p+s,width:y,height:y,src:f.thumbnail,rotation:0,isFromLayout:!1}),S(null)},De=(f,x)=>{g({type:"text",x:f,y:x,width:100,height:80,rotation:0,text:"",fontSize:68,fontFamily:"Inter",fill:"#000000",bold:!1,italic:!1,isEditing:!1}),N(!1),S(null)},pe=(f,x,y)=>{if(!["image/png","image/jpeg","image/jpg","image/webp"].includes(f.type)){alert("Please upload a valid image file (PNG, JPG, or WebP)");return}const s=10*1024*1024;if(f.size>s){alert("File size must be less than 10MB");return}const h=new FileReader;h.onload=p=>{var C;const m=(C=p.target)==null?void 0:C.result,k=new Image;k.onload=()=>{const E=ye(n);let H=k.width,w=k.height;const F=Math.max(E.width,E.height),j=Math.max(H,w);if(j>F){const oe=F*.5/j;H=H*oe,w=w*oe}let K,te;if(x!==void 0&&y!==void 0)K=x-H/2,te=y-w/2;else{const ne=Math.floor(Math.random()*200)-100,oe=Math.floor(Math.random()*200)-100;K=E.width/2-H/2+ne,te=E.height/2-w/2+oe}g({type:"image",x:K,y:te,width:H,height:w,src:m,rotation:0,isFromLayout:!1})},k.src=m},h.readAsDataURL(f)},Se=f=>{var y;const x=(y=f.target.files)==null?void 0:y[0];x&&pe(x),f.target.value=""},Ne=f=>{const x=f.target;x.closest(".sidebar-container")||x.closest(".layout-selector")||x.closest(".huggy-menu")||x.closest(".hub-icons-menu")||f.dataTransfer.types.includes("Files")&&(f.preventDefault(),Y(!0))},ke=f=>{f.preventDefault(),Y(!1)},Oe=f=>{var o;f.preventDefault(),Y(!1);const x=f.target;if(x.closest(".sidebar-container")||x.closest(".layout-selector")||x.closest(".huggy-menu")||x.closest(".hub-icons-menu"))return;const y=(o=f.dataTransfer.files)==null?void 0:o[0];if(y){const s=document.querySelector(".canvas-container");if(s){const h=s.querySelector(".konvajs-content");if(h){const p=h.getBoundingClientRect(),m=f.clientX-p.left,k=f.clientY-p.top;if(m>=0&&m<=p.width&&k>=0&&k<=p.height){pe(y,m,k);return}}}pe(y)}},He=async f=>{if(!V.current){console.error("Stage ref not available");return}$(!0);try{const x=i;a([]),await new Promise(E=>setTimeout(E,50));const y=V.current,o=window.devicePixelRatio||1,s=y.width(),h=y.height(),p=(s-Z.width)/2,m=(h-Z.height)/2,k=y.toDataURL({mimeType:"image/png",quality:1,pixelRatio:o,x:p,y:m,width:Z.width,height:Z.height}),C=document.createElement("a");C.download=`${f}.png`,C.href=k,document.body.appendChild(C),C.click(),document.body.removeChild(C),a(x)}catch(x){console.error("Error exporting canvas:",x),alert("Failed to export canvas. Please try again.")}finally{$(!1)}};return u.useEffect(()=>{if(!z)return;const f=Ce(z);if(!f||!f.variants)return;const y=Re(f,n==="hf"?"hf":"default");if(e.some(m=>m.type==="text"&&m.isEditing))return;const s=e.map(m=>{if(m.layoutId===z&&m.isFromLayout&&!m.isModified){const k=m.id.split("-").slice(0,-1).join("-"),C=y.find(E=>E.id===k);if(C)return{...C,id:m.id,isFromLayout:!0,layoutId:z,isModified:!1,zIndex:m.zIndex}}return m}),h=e.map(m=>{if(m.type==="text"){const{isEditing:k,...C}=m;return C}return m}),p=s.map(m=>{if(m.type==="text"){const{isEditing:k,...C}=m;return C}return m});JSON.stringify(p)!==JSON.stringify(h)&&r(s)},[n,z,e,r]),u.useEffect(()=>{const f=x=>{const y=document.querySelector(".canvas-container"),o=document.querySelector(".text-toolbar"),s=y&&y.contains(x.target),h=o&&o.contains(x.target);!s&&!h&&i.length>0&&a([])};return document.addEventListener("mousedown",f),()=>document.removeEventListener("mousedown",f)},[i,a]),u.useEffect(()=>{const f=x=>{if(!A)return;const y=document.querySelector(".sidebar-container"),o=document.querySelector(".layout-selector"),s=document.querySelector(".huggy-menu"),h=document.querySelector(".hub-icons-menu"),p=document.querySelector(".text-hint"),m=document.querySelector(".canvas-container");if(m&&m.contains(x.target)&&M)return;const C=y&&!y.contains(x.target),E=!o||!o.contains(x.target),H=!s||!s.contains(x.target),w=!h||!h.contains(x.target),F=!p||!p.contains(x.target);C&&E&&H&&w&&F&&(S(null),N(!1))};return document.addEventListener("mousedown",f),()=>document.removeEventListener("mousedown",f)},[A,M]),u.useEffect(()=>(window.exportCanvas={log:()=>bn(e),asLayout:(f,x,y,o)=>{const s=et(e,f,x,y,o);return console.log("📋 Copy this to layouts.ts:"),console.log(s),o&&(console.log(`
+💡 Tip: Export both "default" and "hf" variants, then combine them like:`),console.log(`  ${f}: {`),console.log(`    id: '${f}',`),console.log(`    name: '${x}',`),console.log(`    thumbnail: '${y}',`),console.log("    variants: {"),console.log("      default: [...],  // Export with variant='default'"),console.log("      hf: [...],       // Export with variant='hf'"),console.log("    },"),console.log("  },")),s},asJSON:()=>{const f=vn(e);return console.log("📋 JSON Export:"),console.log(f),f},objects:()=>e,info:()=>({objectCount:e.length,canvasSize:n,dimensions:Z,bgColor:c,selectedIds:i})},e.length===0&&(console.log("🎨 Canvas Export Utilities loaded! Use these commands:"),console.log("  • exportCanvas.log() - View all objects in detail"),console.log("  • exportCanvas.asLayout(id, name, thumbnail, variant?) - Export as layout definition"),console.log('    - Old format: asLayout("id", "Name", "/path/thumb.png")'),console.log('    - Variant format: asLayout("id", "Name", "/path/thumb.png", "default")'),console.log("  • exportCanvas.asJSON() - Export as JSON"),console.log("  • exportCanvas.objects() - Get raw objects array"),console.log("  • exportCanvas.info() - Get canvas info")),()=>{delete window.exportCanvas}),[e,n,Z,c,i]),u.useEffect(()=>(window.thumbnailAPI={loadLayout:f=>{const x=Ce(f);if(!x)return console.error(`Layout not found: ${f}`),!1;const y=Re(x,n==="hf"?"hf":"default"),o=Date.now(),s=y.map(h=>({...h,id:`${h.id}-${o}`,isFromLayout:!0,layoutId:f,isModified:!1}));return r(s),U(f),S(null),console.log(`✓ Loaded layout: ${x.name}`),!0},setBgColor:f=>(l(f),console.log(`✓ Set background color: ${f}`),!0),replaceLogoPlaceholder:f=>{const x=e.find(o=>o.name==="Logo Placeholder"||o.id.includes("logo-placeholder"));if(!x)return console.error("Logo placeholder not found"),!1;const y=e.map(o=>o.id===x.id?{...o,src:f,name:"Partner Logo",isModified:!0}:o);return r(y),console.log("✓ Replaced logo placeholder"),!0},addImage:(f,x,y,o,s)=>{const h={id:Pe(),type:"image",x,y,width:o||200,height:s||200,rotation:0,zIndex:ze(e),src:f,name:"Added Image",isFromLayout:!1};return r([...e,h]),console.log("✓ Added image to canvas"),!0},updateText:(f,x)=>{let y=!1;const o=e.map(s=>s.type==="text"&&(s.id.includes(f)||s.text===f)?(y=!0,{...s,text:x,isModified:!0}):s);return y?(r(o),console.log(`✓ Updated text: "${x}"`),!0):(console.error(`Text object not found: ${f}`),!1)},setCanvasSize:f=>(se(f),console.log(`✓ Set canvas size: ${f}`),!0),exportCanvas:async()=>{if(!V.current)return console.error("Stage ref not available"),null;a([]),await new Promise(m=>setTimeout(m,50));const f=V.current,x=2,y=f.width(),o=f.height(),s=(y-Z.width)/2,h=(o-Z.height)/2,p=f.toDataURL({mimeType:"image/png",quality:1,pixelRatio:x,x:s,y:h,width:Z.width,height:Z.height});return console.log("✓ Exported canvas"),p},getInfo:()=>({objectCount:e.length,canvasSize:n,dimensions:Z,bgColor:c,currentLayout:z,objects:e.map(f=>({id:f.id,type:f.type,name:f.name,...f.type==="text"&&{text:f.text}}))})},console.log("🤖 Thumbnail API loaded for MCP automation"),console.log("Available methods:",Object.keys(window.thumbnailAPI)),()=>{delete window.thumbnailAPI}),[e,n,Z,c,z,i,V,r,l,se,a,g]),u.useEffect(()=>{const f=x=>{const y=e.some(o=>o.type==="text"&&o.isEditing);if((x.ctrlKey||x.metaKey)&&x.key.toLowerCase()==="z"&&!x.shiftKey&&!y){x.preventDefault(),v();return}if((x.ctrlKey||x.metaKey)&&(x.key.toLowerCase()==="z"&&x.shiftKey||x.key.toLowerCase()==="y")&&!y){x.preventDefault(),L();return}if(!y&&i.length>0&&["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(x.key)){x.preventDefault();const o=x.shiftKey?10:1,s=e.map(h=>{if(i.includes(h.id)){let p=h.x,m=h.y;switch(x.key){case"ArrowUp":m-=o;break;case"ArrowDown":m+=o;break;case"ArrowLeft":p-=o;break;case"ArrowRight":p+=o;break}return{...h,x:p,y:m}}return h});r(s);return}if((x.key==="Delete"||x.key==="Backspace")&&i.length>0&&!y&&(x.preventDefault(),b()),(x.ctrlKey||x.metaKey)&&x.key.toLowerCase()==="d"&&i.length>0&&!y){x.preventDefault();const o=e.filter(p=>i.includes(p.id)),s=20,h=o.map(p=>({...p,id:Pe(),x:p.x+s,y:p.y+s,zIndex:ze(e),isFromLayout:!1}));r([...e,...h]),a(h.map(p=>p.id))}if((x.ctrlKey||x.metaKey)&&x.shiftKey&&x.key.toLowerCase()==="f"&&i.length>0&&!y){x.preventDefault();const o=e.map(s=>{if(i.includes(s.id)&&s.type==="text")try{const h=s.fontWeight==="black"?"900":s.bold?"bold":"normal",p=s.italic?"italic":"",m=`${h} ${p}`.trim(),k=new we.Text({text:s.text||"M",fontSize:s.fontSize,fontFamily:s.fontFamily,fontStyle:m}),C=Math.max(100,k.width()+4),E=Math.max(40,k.height()+2);return k.destroy(),{...s,width:C,height:E}}catch(h){return console.error("Error fitting text to content:",h),s}return s});r(o)}if(i.length>0&&!y){if(x.key==="]"){x.preventDefault();const o=Te(e),s=o.map((p,m)=>i.includes(p.id)?m:-1).filter(p=>p!==-1);if(Math.max(...s)<o.length-1){const p=[...o];for(let k=s.length-1;k>=0;k--){const C=s[k];C<o.length-1&&([p[C],p[C+1]]=[p[C+1],p[C]])}const m=p.map((k,C)=>({...k,zIndex:C}));r(m)}return}if(x.key==="["){x.preventDefault();const o=Te(e),s=o.map((p,m)=>i.includes(p.id)?m:-1).filter(p=>p!==-1);if(Math.min(...s)>0){const p=[...o];for(let k=0;k<s.length;k++){const C=s[k];C>0&&([p[C],p[C-1]]=[p[C-1],p[C]])}const m=p.map((k,C)=>({...k,zIndex:C}));r(m)}return}}if(x.key==="t"||x.key==="T"){const o=x.target;o.tagName!=="INPUT"&&o.tagName!=="TEXTAREA"&&le()}};return window.addEventListener("keydown",f),()=>window.removeEventListener("keydown",f)},[i,b,e,r,v,L]),u.useEffect(()=>{const f=async x=>{var s;if(e.some(h=>h.type==="text"&&h.isEditing))return;const o=(s=x.clipboardData)==null?void 0:s.items;if(o)for(let h=0;h<o.length;h++){const p=o[h];if(p.type.indexOf("image")!==-1){x.preventDefault();const m=p.getAsFile();m&&pe(m);break}}};return window.addEventListener("paste",f),()=>window.removeEventListener("paste",f)},[e,n,g]),t.jsxs("div",{className:"w-full h-full bg-[#F8F9FB] relative dotted-background",style:{overflow:"visible"},onDragOver:Ne,onDragLeave:ke,onDrop:Oe,children:[t.jsx("input",{ref:W,type:"file",accept:"image/png,image/jpeg,image/jpg,image/webp",onChange:Se,style:{display:"none"}}),G&&t.jsx("div",{className:"absolute inset-0 z-50 bg-blue-500 bg-opacity-10 border-4 border-dashed border-blue-500 flex items-center justify-center pointer-events-none",children:t.jsx("div",{className:"bg-white rounded-lg shadow-lg px-8 py-6",children:t.jsx("p",{className:"text-xl font-semibold text-gray-800",children:"Drop your image anywhere to upload"})})}),t.jsx(Et,{onLayoutClick:ee,onHuggyClick:I,onHubIconsClick:R,onImageClick:J,onTextClick:le,onSelectLayout:T,onSelectHuggy:Ee,onSelectHubIcon:Fe,activeButton:A}),t.jsx(At,{onExport:He,isExporting:X,currentLayout:z,canvasSize:n}),t.jsxs(_t,{children:[t.jsx(un,{canvasSize:n,bgColor:c,onCanvasSizeChange:se,onBgColorChange:l}),t.jsx(tn,{canvasSize:n,bgColor:c,objects:e,selectedIds:i,onSelect:a,onObjectsChange:re,textCreationMode:M,onTextCreate:De,stageRef:V,transformerRef:ie})]}),q&&t.jsx(hn,{onKeep:$e,onReplace:ge,onCancel:Me}),(()=>{const f=e.filter(E=>E.type==="text"&&(i.includes(E.id)||E.isEditing===!0));if(!(M||f.length>0))return null;const y=f[0],o=(y==null?void 0:y.fontFamily)||"Inter",s=(y==null?void 0:y.hasBackground)??!1,h=s&&(y!=null&&y.backgroundColor)?y.backgroundColor:(y==null?void 0:y.fill)||"#000000",p=(y==null?void 0:y.bold)??!1,m=(y==null?void 0:y.italic)??!1,k=(y==null?void 0:y.fontWeight)||"normal",C=ye(n);return t.jsx(xn,{fontFamily:o,fontSize:(y==null?void 0:y.fontSize)||68,fill:h,bold:p,italic:m,hasBackground:s,fontWeight:k,canvasWidth:C.width,canvasHeight:C.height,scale:Q,onFontFamilyChange:E=>{const H=e.map(w=>{if(w.type==="text"&&f.some(F=>F.id===w.id))try{const F=new we.Text({text:w.text||"M",fontSize:w.fontSize,fontFamily:E,fontStyle:`${w.bold?"bold":"normal"} ${w.italic?"italic":""}`}),j=Math.max(100,F.width()+20),K=Math.max(40,F.height()+10);return F.destroy(),{...w,fontFamily:E,width:j,height:K}}catch(F){return console.error("Error recalculating text size:",F),{...w,fontFamily:E}}return w});r(H)},onFillChange:E=>{const H=e.map(w=>{if(w.type==="text"&&f.some(F=>F.id===w.id)){const F=w.isFromLayout?!0:w.isModified;return w.hasBackground?{...w,backgroundColor:E,isModified:F}:{...w,fill:E,isModified:F}}return w});re(H)},onBoldToggle:()=>{const E=e.map(H=>{if(H.type==="text"&&f.some(w=>w.id===H.id)){const w=H.fontFamily==="Source Sans 3",F=H.fontWeight||"normal";let j=H.bold,K="normal";w?F==="normal"&&!H.bold?(j=!0,K="bold"):F==="bold"||H.bold&&F==="normal"?(j=!0,K="black"):(j=!1,K="normal"):(j=!H.bold,K=j?"bold":"normal");try{const te=K==="black"?"900":K==="bold"?"bold":"normal",ne=new we.Text({text:H.text||"M",fontSize:H.fontSize,fontFamily:H.fontFamily,fontStyle:`${H.italic?"italic":"normal"}`,fontVariant:te}),oe=Math.max(100,ne.width()+20),ae=Math.max(40,ne.height()+10);return ne.destroy(),{...H,bold:j,fontWeight:K,width:oe,height:ae}}catch(te){return console.error("Error recalculating text size:",te),{...H,bold:j,fontWeight:K}}}return H});r(E)},onItalicToggle:()=>{const E=e.map(H=>{if(H.type==="text"&&f.some(w=>w.id===H.id)){const w=!H.italic;try{const F=new we.Text({text:H.text||"M",fontSize:H.fontSize,fontFamily:H.fontFamily,fontStyle:`${H.bold?"bold":"normal"} ${w?"italic":""}`}),j=Math.max(100,F.width()+20),K=Math.max(40,F.height()+10);return F.destroy(),{...H,italic:w,width:j,height:K}}catch(F){return console.error("Error recalculating text size:",F),{...H,italic:w}}}return H});r(E)},onBackgroundToggle:()=>{const E=e.map(H=>H.type==="text"&&f.some(w=>w.id===H.id)?H.hasBackground?{...H,hasBackground:!1,fill:H.backgroundColor||H.fill,backgroundColor:void 0}:{...H,hasBackground:!0,backgroundColor:H.fill}:H);r(E)}})})()]})}Ve(document.getElementById("root")).render(t.jsx(u.StrictMode,{children:t.jsx(Sn,{})}));

assets/index-BVF-rOFs.css

@@ -0,0 +1 @@
+*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.bottom-\[5px\]{bottom:5px}.left-5{left:1.25rem}.left-\[107px\]{left:107px}.left-\[calc\(100\%\+4px\)\]{left:calc(100% + 4px)}.right-\[20px\]{right:20px}.top-1\/2{top:50%}.top-\[20px\]{top:20px}.top-\[5px\]{top:5px}.top-\[7px\]{top:7px}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-\[100\]{z-index:100}.mx-4{margin-left:1rem;margin-right:1rem}.mb-1{margin-bottom:.25rem}.mb-4{margin-bottom:1rem}.mt-0\.5{margin-top:.125rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.aspect-square{aspect-ratio:1 / 1}.h-5{height:1.25rem}.h-\[14px\]{height:14px}.h-\[29px\]{height:29px}.h-\[36px\]{height:36px}.h-\[47\.291px\]{height:47.291px}.h-full{height:100%}.min-h-\[29px\]{min-height:29px}.w-5{width:1.25rem}.w-\[14px\]{width:14px}.w-\[29px\]{width:29px}.w-\[340px\]{width:340px}.w-\[34px\]{width:34px}.w-\[78px\]{width:78px}.w-\[96\.5px\]{width:96.5px}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.max-w-\[480px\]{max-width:480px}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.grow{flex-grow:1}.-translate-y-1\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0px}.gap-3{gap:.75rem}.gap-\[10px\]{gap:10px}.gap-\[14px\]{gap:14px}.gap-\[2px\]{gap:2px}.gap-\[3px\]{gap:3px}.gap-\[4\.5px\]{gap:4.5px}.gap-\[4px\]{gap:4px}.gap-\[5px\]{gap:5px}.gap-\[9px\]{gap:9px}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.whitespace-pre{white-space:pre}.rounded{border-radius:.25rem}.rounded-\[10px\]{border-radius:10px}.rounded-\[12px\]{border-radius:12px}.rounded-\[5px\]{border-radius:5px}.rounded-\[6px\]{border-radius:6px}.rounded-\[7px\]{border-radius:7px}.rounded-\[8px\]{border-radius:8px}.rounded-\[99px\]{border-radius:99px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-none{border-style:none}.border-\[\#3e4044\]{--tw-border-opacity: 1;border-color:rgb(62 64 68 / var(--tw-border-opacity, 1))}.border-\[\#3faee6\]{--tw-border-opacity: 1;border-color:rgb(63 174 230 / var(--tw-border-opacity, 1))}.border-\[\#5865f2\]{--tw-border-opacity: 1;border-color:rgb(88 101 242 / var(--tw-border-opacity, 1))}.border-\[\#D7DCE2\]{--tw-border-opacity: 1;border-color:rgb(215 220 226 / var(--tw-border-opacity, 1))}.border-\[\#F8F9FA\]{--tw-border-opacity: 1;border-color:rgb(248 249 250 / var(--tw-border-opacity, 1))}.border-\[\#ebebeb\]{--tw-border-opacity: 1;border-color:rgb(235 235 235 / var(--tw-border-opacity, 1))}.border-\[\#ed4245\]{--tw-border-opacity: 1;border-color:rgb(237 66 69 / var(--tw-border-opacity, 1))}.border-blue-500{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.bg-\[\#1e1f22\]{--tw-bg-opacity: 1;background-color:rgb(30 31 34 / var(--tw-bg-opacity, 1))}.bg-\[\#2b2d31\]{--tw-bg-opacity: 1;background-color:rgb(43 45 49 / var(--tw-bg-opacity, 1))}.bg-\[\#3faee6\]{--tw-bg-opacity: 1;background-color:rgb(63 174 230 / var(--tw-bg-opacity, 1))}.bg-\[\#5865f2\]{--tw-bg-opacity: 1;background-color:rgb(88 101 242 / var(--tw-bg-opacity, 1))}.bg-\[\#EDF0F2\]{--tw-bg-opacity: 1;background-color:rgb(237 240 242 / var(--tw-bg-opacity, 1))}.bg-\[\#F8F9FB\]{--tw-bg-opacity: 1;background-color:rgb(248 249 251 / var(--tw-bg-opacity, 1))}.bg-\[\#ed4245\]{--tw-bg-opacity: 1;background-color:rgb(237 66 69 / var(--tw-bg-opacity, 1))}.bg-\[\#f8f9fa\]{--tw-bg-opacity: 1;background-color:rgb(248 249 250 / var(--tw-bg-opacity, 1))}.bg-black{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.bg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-white\/5{background-color:#ffffff0d}.bg-opacity-10{--tw-bg-opacity: .1}.bg-opacity-50{--tw-bg-opacity: .5}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-1{padding:.25rem}.p-4{padding:1rem}.p-\[10px\]{padding:10px}.p-\[3\.6px\]{padding:3.6px}.p-\[4px\]{padding:4px}.p-\[5px\]{padding:5px}.p-\[9px\]{padding:9px}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.px-\[12px\]{padding-left:12px;padding-right:12px}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.py-\[5px\]{padding-top:5px;padding-bottom:5px}.pr-\[4px\]{padding-right:4px}.text-center{text-align:center}.font-\[\'Inter\'\]{font-family:Inter}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.text-\[16px\]{font-size:16px}.text-\[18px\]{font-size:18px}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.italic{font-style:italic}.leading-normal{line-height:1.5}.leading-relaxed{line-height:1.625}.text-\[\#545865\]{--tw-text-opacity: 1;color:rgb(84 88 101 / var(--tw-text-opacity, 1))}.text-\[\#999999\]{--tw-text-opacity: 1;color:rgb(153 153 153 / var(--tw-text-opacity, 1))}.text-gray-300{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.placeholder-\[\#999999\]::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(153 153 153 / var(--tw-placeholder-opacity, 1))}.placeholder-\[\#999999\]::placeholder{--tw-placeholder-opacity: 1;color:rgb(153 153 153 / var(--tw-placeholder-opacity, 1))}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow-2xl{--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-sm{--tw-backdrop-blur: blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[background\,padding\,min-width\]{transition-property:background,padding,min-width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[background\]{transition-property:background;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[opacity\,transform\]{transition-property:opacity,transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@font-face{font-family:Bison;src:url(/fonts/Bison-Bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}body{margin:0;font-family:Inter,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100vw;height:100vh;overflow:visible}.dotted-background{background-image:radial-gradient(circle,#d1d5db 1.25px,transparent 1.25px);background-size:28.75px 28.75px;background-position:0 0}.sidebar-container img,.sidebar-container svg,.layout-selector img,.layout-selector svg,.huggy-menu img,.huggy-menu svg{-webkit-user-drag:none;user-drag:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:auto}.huggy-menu *::-webkit-scrollbar{width:6px}.huggy-menu *::-webkit-scrollbar-track{background:transparent}.huggy-menu *::-webkit-scrollbar-thumb{background:#b8b8b8;border-radius:3px}.huggy-menu *::-webkit-scrollbar-thumb:hover{background:#999}.huggy-menu *{scrollbar-width:thin;scrollbar-color:#b8b8b8 transparent}@keyframes layerFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes layerPulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.skeleton-shimmer{background:linear-gradient(90deg,#f0f0f0,#e0e0e0,#f0f0f0 40%,#f0f0f0);background-size:1000px 100%;animation:shimmer 2s infinite linear;border-radius:4px}.skeleton-shimmer-dark{background:linear-gradient(90deg,#2a2a2a,#3a3a3a,#2a2a2a 40%,#2a2a2a);background-size:1000px 100%;animation:shimmer 2s infinite linear;border-radius:4px}.hover\:bg-\[\#3e4044\]:hover{--tw-bg-opacity: 1;background-color:rgb(62 64 68 / var(--tw-bg-opacity, 1))}.hover\:bg-\[\#4752c4\]:hover{--tw-bg-opacity: 1;background-color:rgb(71 82 196 / var(--tw-bg-opacity, 1))}.hover\:bg-\[\#d13438\]:hover{--tw-bg-opacity: 1;background-color:rgb(209 52 56 / var(--tw-bg-opacity, 1))}.hover\:bg-\[\#e9ecef\]:hover{--tw-bg-opacity: 1;background-color:rgb(233 236 239 / var(--tw-bg-opacity, 1))}.hover\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}@media (min-width: 640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 1024px){.lg\:right-\[22px\]{right:22px}.lg\:top-\[10px\]{top:10px}.lg\:h-4{height:1rem}.lg\:h-\[32px\]{height:32px}.lg\:h-\[40px\]{height:40px}.lg\:min-h-\[32px\]{min-height:32px}.lg\:w-4{width:1rem}.lg\:w-\[32px\]{width:32px}.lg\:w-\[38px\]{width:38px}.lg\:w-\[87px\]{width:87px}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:gap-\[10px\]{gap:10px}.lg\:gap-\[15px\]{gap:15px}.lg\:gap-\[5px\]{gap:5px}.lg\:p-\[10px\]{padding:10px}.lg\:p-\[4px\]{padding:4px}.lg\:p-\[5px\]{padding:5px}.lg\:px-\[13px\]{padding-left:13px;padding-right:13px}.lg\:pr-\[5px\]{padding-right:5px}.lg\:text-\[16px\]{font-size:16px}}

index.html

@@ -17,7 +17,7 @@
     <!-- Preconnect to Hugging Face CDN for faster Huggy image loading -->
     <link rel="preconnect" href="https://datasets-server.huggingface.co" crossorigin>
     <link rel="dns-prefetch" href="https://datasets-server.huggingface.co">
-    <script type="module" crossorigin src="/assets/index-xGMR_kZV.js"></script>
+    <script type="module" crossorigin src="/assets/index--s2Am3jC.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/react-vendor-DzFEYc3-.js">
     <link rel="modulepreload" crossorigin href="/assets/konva-vendor-D3j_lOcf.js">
     <link rel="stylesheet" crossorigin href="/assets/index-BVF-rOFs.css">