Upload 41 files

assets/index-B-p8Ph51.js

@@ -0,0 +1,67 @@
+import{r as d,a as it,g as ot}from"./react-vendor-DzFEYc3-.js";import{T as st,R as ge,K as ue,I as _e,S as rt,L as at,a as lt}from"./konva-vendor-CFBUcegD.js";(function(){const o=document.createElement("link").relList;if(o&&o.supports&&o.supports("modulepreload"))return;for(const c of document.querySelectorAll('link[rel="modulepreload"]'))l(c);new MutationObserver(c=>{for(const i of c)if(i.type==="childList")for(const a of i.addedNodes)a.tagName==="LINK"&&a.rel==="modulepreload"&&l(a)}).observe(document,{childList:!0,subtree:!0});function n(c){const i={};return c.integrity&&(i.integrity=c.integrity),c.referrerPolicy&&(i.referrerPolicy=c.referrerPolicy),c.crossOrigin==="use-credentials"?i.credentials="include":c.crossOrigin==="anonymous"?i.credentials="omit":i.credentials="same-origin",i}function l(c){if(c.ep)return;c.ep=!0;const i=n(c);fetch(c.href,i)}})();var Xe={exports:{}},ze={};/**
+ * @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 ct=d,dt=Symbol.for("react.element"),gt=Symbol.for("react.fragment"),ut=Object.prototype.hasOwnProperty,ht=ct.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,pt={key:!0,ref:!0,__self:!0,__source:!0};function Ye(e,o,n){var l,c={},i=null,a=null;n!==void 0&&(i=""+n),o.key!==void 0&&(i=""+o.key),o.ref!==void 0&&(a=o.ref);for(l in o)ut.call(o,l)&&!pt.hasOwnProperty(l)&&(c[l]=o[l]);if(e&&e.defaultProps)for(l in o=e.defaultProps,o)c[l]===void 0&&(c[l]=o[l]);return{$$typeof:dt,type:e,key:i,ref:a,props:c,_owner:ht.current}}ze.Fragment=gt;ze.jsx=Ye;ze.jsxs=Ye;Xe.exports=ze;var t=Xe.exports,Ue,Oe=it;Ue=Oe.createRoot,Oe.hydrateRoot;function xt({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 ft(){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 mt({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 yt({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 Ge={seriousCollab:{id:"seriousCollab",name:"Serious Collab",thumbnail:"/assets/layouts/sCollab_thumbnail.png",objects:[{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"}]},funCollab:{id:"funCollab",name:"Fun Collab",thumbnail:"/assets/layouts/fCollab_thumbnail.png",objects:[{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"}]},sandwich:{id:"sandwich",name:"Sandwich",thumbnail:"/assets/layouts/sandwitch_thumbnail.png",objects:[{id:"title-text",type:"text",x:112.57,y:51.67,width:1050,height:190,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:92.5,y:503.48,width:1015,height:107,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:130,width:565,height:389,rotation:0,zIndex:3,src:"/assets/layouts/snadwithc_huggy_asset.png",name:"Singing Huggy"}]},docs:{id:"docs",name:"Docs",thumbnail:"/assets/layouts/docs_thumbnail.png",objects:[{id:"docs-huggy-logo",type:"image",x:466,y:145.67,width:268,height:268,rotation:0,zIndex:1,src:"/assets/layouts/docsHFLogo.png",name:"Docs HF Logo"},{id:"title-text",type:"text",x:237.9214782714844,y:329.67,width:724.1570434570312,height:115.93,rotation:0,zIndex:2,text:"Transformers",fontSize:105.93,fontFamily:"Source Sans 3",fill:"#121212",bold:!0,italic:!1,align:"center",fontWeight:"black"},{id:"subtitle-text",type:"text",x:379.6729888916016,y:441.535,width:440.6540222167969,height:63.93,rotation:0,zIndex:3,text:"Documentation",fontSize:53.93,fontFamily:"IBM Plex Mono",fill:"#747474",bold:!1,italic:!1,align:"center"}]},academiaHub:{id:"academiaHub",name:"Academia Hub",thumbnail:"/assets/layouts/academia_thumbnail.png",objects:[{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"}]}};function je(e){return Ge[e]}function wt(){return Object.values(Ge)}function bt({onSelectLayout:e}){const o=wt(),[n,l]=d.useState(new Set(o.map(i=>i.id))),c=i=>{l(a=>{const g=new Set(a);return g.delete(i),g})};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:i=>{i.preventDefault(),i.stopPropagation()},onDrag:i=>{i.preventDefault(),i.stopPropagation()},onDragOver:i=>{i.preventDefault(),i.stopPropagation()},children:t.jsxs("div",{className:"flex flex-col gap-0",children:[t.jsx("div",{className:"flex gap-0",children:o.slice(0,2).map(i=>t.jsxs("button",{onClick:()=>e(i.id),onDragStart:a=>a.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:a=>a.preventDefault(),children:[n.has(i.id)&&t.jsx("div",{className:"absolute inset-0 skeleton-shimmer"}),t.jsx("img",{src:i.thumbnail,alt:i.name,className:`w-full h-full object-cover transition-opacity duration-200 ${n.has(i.id)?"opacity-0":"opacity-100"}`,onLoad:()=>c(i.id),draggable:!1})]}),t.jsx("p",{className:"text-[14px] font-normal text-[#545865] text-center",children:i.name})]},i.id))}),t.jsx("div",{className:"flex gap-0",children:o.slice(2,4).map(i=>t.jsxs("button",{onClick:()=>e(i.id),onDragStart:a=>a.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:a=>a.preventDefault(),children:[n.has(i.id)&&t.jsx("div",{className:"absolute inset-0 skeleton-shimmer"}),t.jsx("img",{src:i.thumbnail,alt:i.name,className:`w-full h-full object-cover transition-opacity duration-200 ${n.has(i.id)?"opacity-0":"opacity-100"}`,onLoad:()=>c(i.id),draggable:!1})]}),t.jsx("p",{className:"text-[14px] font-normal text-[#545865] text-center",children:i.name})]},i.id))}),t.jsx("div",{className:"flex gap-0",children:o.slice(4,6).map(i=>t.jsxs("button",{onClick:()=>e(i.id),onDragStart:a=>a.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:a=>a.preventDefault(),children:[n.has(i.id)&&t.jsx("div",{className:"absolute inset-0 skeleton-shimmer"}),t.jsx("img",{src:i.thumbnail,alt:i.name,className:`w-full h-full object-cover transition-opacity duration-200 ${n.has(i.id)?"opacity-0":"opacity-100"}`,onLoad:()=>c(i.id),draggable:!1})]}),t.jsx("p",{className:"text-[14px] font-normal text-[#545865] text-center",children:i.name})]},i.id))})]})})}const N="https://huggingface.co/datasets/Chunte/Huggy/resolve/main",vt=[{id:"acedemic-huggy",name:"Acedemic Huggy",thumbnail:`${N}/modern%20Huggies/Acedemic%20Huggy.png`,category:"modern",tags:["acedemic","academic","education","modern"]},{id:"back-of-huggy",name:"Back of a Huggy",thumbnail:`${N}/modern%20Huggies/Back%20of%20a%20Huggy.png`,category:"modern",tags:["back","modern"]},{id:"d-huggy",name:"D Huggy",thumbnail:`${N}/modern%20Huggies/D%20Huggy.png`,category:"modern",tags:["d","letter","modern"]},{id:"dragon-huggy",name:"Dragon Huggy",thumbnail:`${N}/modern%20Huggies/Dragon%20Huggy.png`,category:"modern",tags:["dragon","fantasy","modern"]},{id:"game-jam-huggy",name:"Game Jam Huggy",thumbnail:`${N}/modern%20Huggies/Game%20Jam%20Huggy.png`,category:"modern",tags:["game","jam","gaming","modern"]},{id:"huggy-chef",name:"Huggy Chef",thumbnail:`${N}/modern%20Huggies/Huggy%20Chef.png`,category:"modern",tags:["chef","cooking","food","modern"]},{id:"huggy-hi",name:"Huggy Hi",thumbnail:`${N}/modern%20Huggies/Huggy%20Hi.png`,category:"modern",tags:["hi","hello","greeting","wave","modern"]},{id:"huggy-lab",name:"Huggy Lab",thumbnail:`${N}/modern%20Huggies/Huggy%20Lab.png`,category:"modern",tags:["lab","laboratory","science","modern"]},{id:"huggy-medic",name:"Huggy Medic",thumbnail:`${N}/modern%20Huggies/Huggy%20Medic.png`,category:"modern",tags:["medic","medical","doctor","health","modern"]},{id:"huggy-okay",name:"Huggy Okay",thumbnail:`${N}/modern%20Huggies/Huggy%20Okay.png`,category:"modern",tags:["okay","ok","thumbs up","modern"]},{id:"huggy-sunny-hello",name:"Huggy Sunny hello",thumbnail:`${N}/modern%20Huggies/Huggy%20Sunny%20hello.png`,category:"modern",tags:["sunny","hello","greeting","summer","modern"]},{id:"huggy-sunny",name:"Huggy Sunny",thumbnail:`${N}/modern%20Huggies/Huggy%20Sunny.png`,category:"modern",tags:["sunny","summer","sun","modern"]},{id:"huggy-yolk",name:"Huggy Yolk",thumbnail:`${N}/modern%20Huggies/Huggy%20Yolk.png`,category:"modern",tags:["yolk","egg","food","modern"]},{id:"huggy-blink-okay",name:"Huggy blink Okay",thumbnail:`${N}/modern%20Huggies/Huggy%20blink%20Okay.png`,category:"modern",tags:["blink","okay","wink","modern"]},{id:"huggy-the-pooh-meme",name:"Huggy the Pooh meme",thumbnail:`${N}/modern%20Huggies/Huggy%20the%20Pooh%20meme.png`,category:"modern",tags:["pooh","meme","funny","modern"]},{id:"idefics-huggy",name:"IDEFICS Huggy",thumbnail:`${N}/modern%20Huggies/IDEFICS%20Huggy.png`,category:"modern",tags:["idefics","vision","multimodal","ai","modern"]},{id:"karaoke-huggy",name:"Karaoke Huggy",thumbnail:`${N}/modern%20Huggies/Karaoke%20Huggy.png`,category:"modern",tags:["karaoke","singing","music","modern"]},{id:"lora-huggy",name:"Lora Huggy",thumbnail:`${N}/modern%20Huggies/Lora%20Huggy.png`,category:"modern",tags:["lora","ai","model","modern"]},{id:"robot-huggy",name:"Robot Huggy",thumbnail:`${N}/modern%20Huggies/Robot%20Huggy.png`,category:"modern",tags:["robot","automation","ai","modern"]},{id:"snake-huggy",name:"Snake Huggy",thumbnail:`${N}/modern%20Huggies/Snake%20Huggy.png`,category:"modern",tags:["snake","python","code","modern"]},{id:"super-huggy",name:"Super Huggy",thumbnail:`${N}/modern%20Huggies/Super%20Huggy.png`,category:"modern",tags:["super","hero","superhero","modern"]},{id:"text-generation-wizard-huggy",name:"Text Generation Wizard Huggy",thumbnail:`${N}/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:`${N}/modern%20Huggies/Transformer%20Agent%20Huggy.png`,category:"modern",tags:["transformer","agent","ai","nlp","modern"]},{id:"wine-huggy",name:"Wine Huggy",thumbnail:`${N}/modern%20Huggies/Wine%20Huggy.png`,category:"modern",tags:["wine","drink","celebration","modern"]},{id:"computer-vision-huggy",name:"computer vision Huggy",thumbnail:`${N}/modern%20Huggies/computer%20vision%20Huggy.png`,category:"modern",tags:["computer","vision","cv","ai","model","modern"]}],St=[{id:"catching-huggy",name:"Catching Huggy",thumbnail:`${N}/Outlined%20Huggies/Catching%20Huggy.png`,category:"outlined",tags:["catching","catch","outlined"]},{id:"comic-huggy",name:"Comic Huggy",thumbnail:`${N}/Outlined%20Huggies/Comic%20Huggy.png`,category:"outlined",tags:["comic","cartoon","outlined"]},{id:"curious-huggy",name:"Curious Huggy",thumbnail:`${N}/Outlined%20Huggies/Curious%20Huggy.png`,category:"outlined",tags:["curious","wondering","thinking","outlined"]},{id:"diffusor-guide-huggy",name:"Diffusor guide Huggy",thumbnail:`${N}/Outlined%20Huggies/Diffusor%20guide%20Huggy.png`,category:"outlined",tags:["diffusor","diffusion","guide","ai","outlined"]},{id:"fishing-huggy",name:"Fishing Huggy",thumbnail:`${N}/Outlined%20Huggies/Fishing%20Huggy.png`,category:"outlined",tags:["fishing","fish","outdoor","outlined"]},{id:"gpu-huggy",name:"GPU Huggy",thumbnail:`${N}/Outlined%20Huggies/GPU%20Huggy.png`,category:"outlined",tags:["gpu","graphics","computing","hardware","outlined"]},{id:"global-huggy",name:"Global Huggy",thumbnail:`${N}/Outlined%20Huggies/Global%20Huggy.png`,category:"outlined",tags:["global","world","international","outlined"]},{id:"greeting-huggy-left",name:"Greeting Huggy left",thumbnail:`${N}/Outlined%20Huggies/Greeting%20Huggy%20left.png`,category:"outlined",tags:["greeting","hello","wave","left","outlined"]},{id:"greeting-huggy-right",name:"Greeting Huggy right",thumbnail:`${N}/Outlined%20Huggies/Greeting%20Huggy%20right.png`,category:"outlined",tags:["greeting","hello","wave","right","outlined"]},{id:"growing-model-huggy",name:"Growing model Huggy",thumbnail:`${N}/Outlined%20Huggies/Growing%20model%20Huggy.png`,category:"outlined",tags:["growing","model","ai","growth","outlined"]},{id:"guide-huggy",name:"Guide Huggy",thumbnail:`${N}/Outlined%20Huggies/Guide%20Huggy.png`,category:"outlined",tags:["guide","help","tutorial","outlined"]},{id:"loving-modelndataset-huggy",name:"Loving modelndataset Huggy",thumbnail:`${N}/Outlined%20Huggies/Loving%20modelndataset%20Huggy.png`,category:"outlined",tags:["loving","model","dataset","heart","outlined"]},{id:"manager-huggy",name:"Manager Huggy",thumbnail:`${N}/Outlined%20Huggies/Manager%20Huggy.png`,category:"outlined",tags:["manager","management","business","outlined"]},{id:"paper-huggy",name:"Paper Huggy",thumbnail:`${N}/Outlined%20Huggies/Paper%20Huggy.png`,category:"outlined",tags:["paper","research","document","outlined"]},{id:"rocket-huggy",name:"Rocket Huggy",thumbnail:`${N}/Outlined%20Huggies/Rocket%20Huggy.png`,category:"outlined",tags:["rocket","space","launch","fast","outlined"]},{id:"scan-huggy",name:"Scan Huggy",thumbnail:`${N}/Outlined%20Huggies/Scan%20Huggy.png`,category:"outlined",tags:["scan","search","find","outlined"]},{id:"violinist-huggy",name:"Violinist Huggy",thumbnail:`${N}/Outlined%20Huggies/Violinist%20Huggy.png`,category:"outlined",tags:["violinist","violin","music","classical","outlined"]},{id:"xray-huggy",name:"X-ray Huggy",thumbnail:`${N}/Outlined%20Huggies/X-ray%20Huggy.png`,category:"outlined",tags:["xray","x-ray","medical","scan","outlined"]}],We=[...vt,...St];function kt(e){if(!e.trim())return We;const o=e.toLowerCase().trim();return We.filter(n=>!!(n.name.toLowerCase().replace("huggy","").trim().includes(o)||n.name.toLowerCase().includes(o)||n.category.toLowerCase().includes(o)||n.tags&&n.tags.some(c=>c.toLowerCase().includes(o))))}const Be=12,Ae=6;function Ht({onSelectHuggy:e,onClose:o}){const[n,l]=d.useState(""),[c,i]=d.useState(Be),[a,g]=d.useState(new Set),m=d.useRef(null),w=d.useMemo(()=>kt(n),[n]),x=w.slice(0,c),k=c<w.length;d.useEffect(()=>{const y=m.current;if(!y||!k)return;const E=setTimeout(()=>{const{scrollHeight:X,clientHeight:q}=y;X<=q&&k&&i(G=>Math.min(G+Ae,w.length))},100);return()=>clearTimeout(E)},[c,k,w.length]),d.useEffect(()=>{const y=m.current;if(!y)return;const _=()=>{const{scrollTop:E,scrollHeight:X,clientHeight:q}=y;(E+q)/X>.8&&k&&i(V=>Math.min(V+Ae,w.length))};return y.addEventListener("scroll",_),()=>y.removeEventListener("scroll",_)},[k,w.length]);const D=y=>{e(y),o()},C=y=>{g(_=>{const E=new Set(_);return E.delete(y),E})},$=y=>{g(_=>new Set(_).add(y))},B=y=>{l(y.target.value),i(Be)};return t.jsxs(t.Fragment,{children:[t.jsx("div",{className:"fixed inset-0 z-10",onClick:o}),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:y=>{y.preventDefault(),y.stopPropagation()},onDrag:y=>{y.preventDefault(),y.stopPropagation()},onDragOver:y=>{y.preventDefault(),y.stopPropagation()},children:[t.jsx("div",{className:"border-b border-[#ebebeb] p-[5px]",children:t.jsx("input",{type:"text",placeholder:"Search Huggy",value:n,onChange:B,className:"w-full bg-transparent border-none outline-none text-[14px] text-[#999999] font-['Inter'] placeholder-[#999999]",autoFocus:!0})}),t.jsx("div",{ref:m,className:"overflow-y-auto p-[5px]",style:{maxHeight:"430px"},children:w.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:x.map(y=>t.jsxs("button",{onClick:()=>D(y),onDragStart:_=>_.preventDefault(),className:"relative w-full aspect-square rounded-[5px] overflow-hidden hover:bg-[#e9ecef] transition-colors cursor-pointer border-none p-0",title:y.name,children:[a.has(y.id)&&t.jsx("div",{className:"absolute inset-0 skeleton-shimmer"}),t.jsx("img",{src:y.thumbnail,alt:y.name,className:`w-full h-full object-cover transition-opacity duration-200 ${a.has(y.id)?"opacity-0":"opacity-100"}`,loading:"lazy",onLoadStart:()=>$(y.id),onLoad:()=>C(y.id),onError:()=>C(y.id),draggable:!1})]},y.id))})}),t.jsx("div",{className:"border-t border-[#ebebeb] p-[5px] text-center",children:t.jsxs("p",{className:"text-[#999999] text-[12px]",children:["Showing ",x.length," of ",w.length," Huggys"]})})]})]})}function Ct({onLayoutClick:e,onHuggyClick:o,onImageClick:n,onTextClick:l,onSelectLayout:c,onSelectHuggy:i,activeButton:a}){return t.jsx("div",{className:"fixed left-5 top-1/2 -translate-y-1/2 z-50",onDragStart:g=>{g.preventDefault(),g.stopPropagation()},onDrag:g=>{g.preventDefault(),g.stopPropagation()},onDragOver:g=>{g.preventDefault(),g.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 ${a==="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(xt,{selected:a==="layout"})}),t.jsx("p",{className:`text-[14px] lg:text-[16px] font-normal ${a==="layout"?"text-white":"text-[#545865]"}`,children:"Layout"})]}),t.jsxs("button",{onClick:o,className:`flex flex-col items-center gap-[3px] px-[12px] lg:px-[13px] py-[5px] rounded-[7px] transition-colors ${a==="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(ft,{})}),t.jsx("p",{className:`text-[14px] lg:text-[16px] font-normal ${a==="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 ${a==="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(mt,{selected:a==="image"})}),t.jsx("p",{className:`text-[14px] lg:text-[16px] font-normal ${a==="image"?"text-white":"text-[#545865]"}`,children:"Image"})]}),t.jsxs("button",{onClick:l,className:`flex flex-col items-center gap-[3px] px-[12px] lg:px-[13px] py-[5px] rounded-[7px] transition-colors ${a==="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(yt,{selected:a==="text"})}),t.jsx("p",{className:`text-[14px] lg:text-[16px] font-normal ${a==="text"?"text-white":"text-[#545865]"}`,children:"Text"})]}),a==="layout"&&t.jsx(bt,{onSelectLayout:c}),a==="huggy"&&t.jsx(Ht,{onSelectHuggy:i,onClose:()=>o()}),a==="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 zt={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 It=e=>e.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase().trim(),he=(e,o)=>{const n=d.forwardRef(({color:l="currentColor",size:c=24,strokeWidth:i=2,absoluteStrokeWidth:a,className:g="",children:m,...w},x)=>d.createElement("svg",{ref:x,...zt,width:c,height:c,stroke:l,strokeWidth:a?Number(i)*24/Number(c):i,className:["lucide",`lucide-${It(e)}`,g].join(" "),...w},[...o.map(([k,D])=>d.createElement(k,D)),...Array.isArray(m)?m:[m]]));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 $t=he("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 Lt=he("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 Mt=he("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 Et=he("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 Dt=he("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 Rt=he("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 Nt=he("X",[["path",{d:"M18 6 6 18",key:"1bl5f8"}],["path",{d:"m6 6 12 12",key:"d8bk6v"}]]);function Ft({onExport:e,isExporting:o=!1,currentLayout:n,canvasSize:l}){const c=y=>{switch(y){case"1200x675":return"Twitter";case"linkedin":return"LinkedIn";case"hf":return"HF";default:return"Twitter"}},i=()=>{const y=c(l);return n?`${n}_${y}`:`thumbnail_${y}`},[a,g]=d.useState(i()),[m,w]=d.useState(!1),[x,k]=d.useState(0),[D,C]=d.useState(!1),$=d.useRef(null);d.useEffect(()=>{g(i())},[n,l]),d.useEffect(()=>{$.current&&k($.current.offsetWidth)},[a]);const B=()=>{o||e(a)};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:o?.5:1,transition:"all 0.2s ease-in-out",width:"fit-content"},children:[t.jsx("button",{onClick:B,disabled:o,onMouseEnter:()=>C(!0),onMouseLeave:()=>C(!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:D?"#0d6ecc":"#1888ff",cursor:o?"not-allowed":"pointer",transition:"all 0.2s ease-in-out",transform:D&&!o?"scale(1.05)":"scale(1)"},children:o?t.jsx(Dt,{className:"w-[14px] lg:w-4 h-[14px] lg:h-4",color:"white",style:{animation:"spin 1s linear infinite"}}):t.jsx(Mt,{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:$,className:"absolute invisible whitespace-pre text-[14px] lg:text-[16px] font-normal p-[4px] lg:p-[5px]",style:{fontFamily:"Inter, sans-serif"},children:a||"thumbnail_name"}),t.jsx("input",{type:"text",value:a,onChange:y=>g(y.target.value),onFocus:()=>w(!0),onBlur:()=>w(!1),disabled:o,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:`${x}px`,cursor:o?"not-allowed":"text",opacity:m?1:.5,transition:"all 0.2s ease-in-out",backgroundColor:m?"rgba(255, 255, 255, 0.1)":"rgba(255, 255, 255, 0.05)"},onClick:y=>y.stopPropagation()}),t.jsx("span",{className:"text-white text-[14px] lg:text-[16px] font-normal",style:{fontFamily:"Inter, sans-serif",opacity:m?1:.5,transition:"opacity 0.2s ease-in-out"},children:".png"})]})]})}function Pt({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 Tt={"1200x675":{width:1200,height:675,label:"1200×675"},linkedin:{width:1200,height:627,label:"LinkedIn"},hf:{width:1160,height:580,label:"HF Custom"}};function fe(e){return Tt[e]}function Ke(){return`${Date.now()}-${Math.random().toString(36).substr(2,9)}`}function Ne(e){return[...e].sort((o,n)=>o.zIndex-n.zIndex)}function Fe(e){return e.length===0?1:Math.max(...e.map(o=>o.zIndex))+1}function Ot(e,o,n){return`${n==="black"?"900":e?"bold":"normal"} ${o?"italic":""}`.trim()}function jt({object:e,isSelected:o,onSelect:n,onDragStart:l,onDragMove:c,onDragEnd:i,onTransformEnd:a,onEditingChange:g,onMouseEnter:m,onMouseLeave:w,shapeRef:x}){const k=d.useRef(null);d.useEffect(()=>{if(e.text===""&&o&&!e.isEditing){const $=setTimeout(()=>{g(e.id,!0)},100);return()=>clearTimeout($)}},[e.text,o,e.isEditing,e.id,g]);const D=$=>{if(!e.isEditing){const B=$.target.getStage(),y=B==null?void 0:B.getPointerPosition();if(y){const _=$.target.getLayer(),E=(_==null?void 0:_.x())||0,X=(_==null?void 0:_.y())||0,q=y.x-E-e.x,G=y.y-X-e.y;g(e.id,!0,q,G)}else g(e.id,!0)}},C=e.fontSize;return t.jsx(st,{id:e.id,ref:$=>{typeof x=="function"?x($):x&&(x.current=$),k.current=$},x:e.x,y:e.y,width:e.width,height:e.height,text:e.text,fontSize:C,fontFamily:e.fontFamily,fill:e.fill,fontStyle:Ot(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:D,onDblTap:D,onDragStart:l,onDragMove:c,onDragEnd:i,onTransformEnd:a,onMouseEnter:m,onMouseLeave:w,opacity:e.isEditing?0:1,listening:!e.isEditing})}function Wt({object:e,isSelected:o,onSelect:n,onDragStart:l,onDragMove:c,onDragEnd:i,onTransformEnd:a,onEditingChange:g,onMouseEnter:m,onMouseLeave:w,shapeRef:x}){switch(e.type){case"rect":return t.jsx(ge,{id:e.id,ref:k=>{typeof x=="function"?x(k):x&&(x.current=k)},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:k=>n(k),onTap:k=>n(k),onDragStart:l,onDragMove:c,onDragEnd:i,onTransformEnd:a,onMouseEnter:m,onMouseLeave:w});case"image":case"huggy":return t.jsx(Bt,{object:e,onSelect:n,onDragStart:l,onDragMove:c,onDragEnd:i,onTransformEnd:a,onMouseEnter:m,onMouseLeave:w,shapeRef:x});case"text":return t.jsx(jt,{object:e,isSelected:o,onSelect:n,onDragStart:l,onDragMove:c,onDragEnd:i,onTransformEnd:a,onEditingChange:g||(()=>{}),onMouseEnter:m,onMouseLeave:w,shapeRef:x});case"logoPlaceholder":return t.jsx(At,{object:e,onSelect:n,onDragStart:l,onDragMove:c,onDragEnd:i,onTransformEnd:a,onMouseEnter:m,onMouseLeave:w,shapeRef:x});default:return null}}function Bt({object:e,onSelect:o,onDragStart:n,onDragMove:l,onDragEnd:c,onTransformEnd:i,onMouseEnter:a,onMouseLeave:g,shapeRef:m}){const[w,x]=d.useState(null),k=d.useRef(null),D=d.useRef(null);return d.useEffect(()=>{const C=new window.Image;return C.src=e.type==="image"||e.type==="huggy"?e.src:"",C.crossOrigin="anonymous",C.onload=()=>{x(C),k.current=C,setTimeout(()=>{if(D.current){const $=D.current.getLayer();$&&$.batchDraw()}},10)},()=>{k.current=null}},[e]),t.jsx(t.Fragment,{children:w&&t.jsx(_e,{id:e.id,ref:C=>{D.current=C,typeof m=="function"?m(C):m&&(m.current=C)},x:e.x,y:e.y,width:e.width,height:e.height,image:w,rotation:e.rotation,draggable:!0,onClick:C=>o(C),onTap:C=>o(C),onDragStart:n,onDragMove:l,onDragEnd:c,onTransformEnd:i,onMouseEnter:a,onMouseLeave:g})})}function At({object:e,onSelect:o,onDragStart:n,onDragMove:l,onDragEnd:c,onTransformEnd:i,onMouseEnter:a,onMouseLeave:g,shapeRef:m}){const w=d.useRef(null);return d.useEffect(()=>{w.current&&e.type==="logoPlaceholder"&&(w.current.cache(),w.current.filters([ue.Filters.Blur]),w.current.blurRadius(e.blurRadius))},[e]),e.type!=="logoPlaceholder"?null:t.jsx(ge,{id:e.id,ref:x=>{w.current=x,typeof m=="function"?m(x):m&&(m.current=x)},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:x=>o(x),onTap:x=>o(x),onDragStart:n,onDragMove:l,onDragEnd:c,onTransformEnd:i,onMouseEnter:a,onMouseLeave:g})}var de=d,_t=function(o,n,l){const c=de.useRef("loading"),i=de.useRef(),[a,g]=de.useState(0),m=de.useRef(),w=de.useRef(),x=de.useRef();return(m.current!==o||w.current!==n||x.current!==l)&&(c.current="loading",i.current=void 0,m.current=o,w.current=n,x.current=l),de.useLayoutEffect(function(){if(!o)return;var k=document.createElement("img");function D(){k.decode().catch(()=>{}).finally(()=>{c.current="loaded",i.current=k,g(Math.random())})}function C(){c.current="failed",i.current=void 0,g(Math.random())}return k.addEventListener("load",D),k.addEventListener("error",C),n&&(k.crossOrigin=n),l&&(k.referrerPolicy=l),k.src=o,function(){k.removeEventListener("load",D),k.removeEventListener("error",C)}},[o,n,l]),[i.current,c.current]};const Xt=ot(_t);function qe(e,o,n){return`${n==="black"?"900":e?"bold":"normal"} ${o?"italic":""}`.trim()}function Yt(e,o,n,l,c,i,a){if(!e||o<=0)return 0;try{const g=new ue.Text({text:e,fontSize:n,fontFamily:l,fontStyle:qe(c,i,a)});let m=0,w=1/0;for(let x=0;x<=e.length;x++){const k=e.substring(0,x);g.text(k);const D=g.width(),C=Math.abs(D-o);C<w&&(w=C,m=x)}return g.destroy(),m}catch(g){return console.error("Error calculating cursor position:",g),e.length}}function Ut({canvasSize:e,bgColor:o,objects:n,selectedIds:l,onSelect:c,onObjectsChange:i,textCreationMode:a=!1,onTextCreate:g,stageRef:m,transformerRef:w}){const x=d.useRef(null),k=m||x,D=d.useRef(null),C=w||D,$=d.useRef(new Map),B=d.useRef(null),y=d.useRef(null),[_,E]=d.useState(!1),[X,q]=d.useState(null),G=d.useRef(null),V=d.useRef(null),F=d.useRef(null),P=d.useRef(new Map),[I,K]=d.useState(null),[T,Z]=d.useState(!1),[U,te]=d.useState({vertical:!1,horizontal:!1}),[ne,ee]=d.useState({width:window.innerWidth,height:window.innerHeight}),v=fe(e),L={x:(ne.width-v.width)/2,y:(ne.height-v.height)/2},Y=e==="1200x675"?"twitter":e==="linkedin"?"LinkedIn":"HF",be=o==="seriousLight"?`/assets/backgrounds/bg_sLight_${Y}.png`:o==="light"?`/assets/backgrounds/bg_Light_${Y}.png`:`/assets/backgrounds/bg_dark_${Y}.png`,[ve]=Xt(be,"anonymous");d.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)),E(!0),k.current){const s=k.current.getLayers()[0];s&&s.batchDraw()}}catch(s){console.error("Font loading error:",s),E(!0)}else E(!0)})()},[]),d.useEffect(()=>{const r=()=>{ee({width:window.innerWidth,height:window.innerHeight})};return window.addEventListener("resize",r),()=>window.removeEventListener("resize",r)},[]),d.useEffect(()=>{if(_&&k.current){const r=k.current.getLayers()[0];r&&r.batchDraw()}},[n,_]);const W=n.find(r=>r.type==="text"&&r.isEditing),Ie=Ne(n);d.useEffect(()=>{if(!C.current)return;const r=(s=0)=>{if(l.length>0){const u=l.map(b=>$.current.get(b)).filter(b=>b!==void 0);if(u.length>0){C.current.nodes(u),C.current.show(),C.current.forceUpdate();const b=C.current.getLayer();b&&b.batchDraw()}else if(s<10){const b=Math.min(50*(s+1),100);setTimeout(()=>r(s+1),b)}}else C.current.nodes([])};r(0)},[l,n]);const $e=(r,s=!1)=>{s?l.includes(r)?c(l.filter(u=>u!==r)):c([...l,r]):c([r])},re=d.useRef(null),Le=r=>{const s=r.target;re.current={x:s.x(),y:s.y()},l.length>1&&(P.current.clear(),l.forEach(b=>{const p=$.current.get(b);p&&P.current.set(b,{x:p.x(),y:p.y()})}))},Me=r=>{const s=r.target,u=r.evt.shiftKey,b=l.length>1;if(u&&!b&&re.current){const p=re.current,h=s.x(),z=s.y(),R=Math.abs(h-p.x),O=Math.abs(z-p.y);R>O?s.y(p.y):s.x(p.x)}{const h=v.width/2,z=v.height/2;if(l.length>1){const O=l.map(A=>$.current.get(A)).filter(A=>A!==void 0);if(O.length===l.length&&O.length>1){let A=1/0,J=1/0,Q=-1/0,ie=-1/0;O.forEach(ae=>{const Ze=ae.width(),Ve=ae.height(),Qe=ae.x(),et=ae.y(),Pe=Qe,Te=et,tt=Pe+Ze,nt=Te+Ve;A=Math.min(A,Pe),J=Math.min(J,Te),Q=Math.max(Q,tt),ie=Math.max(ie,nt)});const oe=Q-A,Ce=ie-J,me=A+oe/2,xe=J+Ce/2;let le=0,ce=0,ye=!1,we=!1;u||(Math.abs(me-h)<10&&(le=h-me,ye=!0),Math.abs(xe-z)<10&&(ce=z-xe,we=!0)),ye||we?(O.forEach(ae=>{le!==0&&ae.x(ae.x()+le),ce!==0&&ae.y(ae.y()+ce)}),te({vertical:ye,horizontal:we})):te({vertical:!1,horizontal:!1})}}else{const O=s.width(),A=s.height(),J=s.x(),Q=s.y(),ie=J+O/2,oe=Q+A/2;let Ce=J,me=Q,xe=!1,le=!1,ce=!1;if(u&&re.current){const ye=Math.abs(J-re.current.x),we=Math.abs(Q-re.current.y);ce=ye>we}Math.abs(ie-h)<10&&(!u||ce)&&(Ce=h-O/2,xe=!0),Math.abs(oe-z)<10&&(!u||!ce)&&(me=z-A/2,le=!0),xe||le?(s.x(Ce),s.y(me),te({vertical:xe,horizontal:le})):te({vertical:!1,horizontal:!1})}}},pe=r=>s=>{const u=s.target;if(re.current=null,P.current.clear(),te({vertical:!1,horizontal:!1}),l.length>1&&l.includes(r))F.current&&clearTimeout(F.current),F.current=setTimeout(()=>{const p=n.map(h=>{if(l.includes(h.id)){const z=$.current.get(h.id);if(z)return{...h,x:z.x(),y:z.y()}}return h});i(p),F.current=null},10);else{const p=n.map(h=>h.id===r?{...h,x:u.x(),y:u.y()}:h);i(p)}},Ee=r=>s=>{const u=s.target,b=u.scaleX(),p=u.scaleY();if(l.length>1)V.current&&clearTimeout(V.current),V.current=setTimeout(()=>{const z=n.map(R=>{if(l.includes(R.id)){const O=$.current.get(R.id);if(O){const A=O.scaleX(),J=O.scaleY();O.scaleX(1),O.scaleY(1);const Q={...R,x:O.x(),y:O.y(),width:Math.max(5,O.width()*A),height:Math.max(5,O.height()*J),rotation:O.rotation()};if(R.type==="text"){const ie=Math.min(A,J),oe=Math.max(10,R.fontSize*ie);return{...Q,fontSize:oe}}return Q}}return R});i(z),V.current=null},10);else{u.scaleX(1),u.scaleY(1);const z=n.map(R=>{if(R.id===r){const O={...R,x:u.x(),y:u.y(),width:Math.max(5,u.width()*b),height:Math.max(5,u.height()*p),rotation:u.rotation()};if(R.type==="text"){const A=Math.min(b,p),J=Math.max(10,R.fontSize*A);return{...O,fontSize:J}}return O}return R});i(z)}},Se=(r,s,u,b)=>{const p=n.map(h=>h.id===r&&h.type==="text"?{...h,text:s,width:u,height:b}:h);i(p)},ke=(r,s,u,b)=>{if(!s){const h=n.find(z=>z.id===r&&z.type==="text");if(h&&h.text.trim()===""){const z=n.filter(R=>R.id!==r);i(z);return}}const p=n.map(h=>h.id===r&&h.type==="text"?{...h,isEditing:s}:h);if(i(p),s&&u!==void 0&&b!==void 0){const h=n.find(z=>z.id===r&&z.type==="text");if(h){const z=Yt(h.text,u,h.fontSize,h.fontFamily,h.bold,h.italic,h.fontWeight);y.current=z}}else s&&(y.current=null)};d.useEffect(()=>{if(W&&B.current)if(B.current.focus(),y.current!==null){const r=y.current;B.current.setSelectionRange(r,r),y.current=null}else{const r=B.current.value.length;B.current.setSelectionRange(r,r)}},[W==null?void 0:W.id]);const De=r=>{if(!W)return;const s=r.target.value;try{const u=new ue.Text({text:s||"M",fontSize:W.fontSize,fontFamily:W.fontFamily,fontStyle:qe(W.bold,W.italic,W.fontWeight)}),b=Math.max(100,u.width()+20),p=Math.max(40,u.height()+10);u.destroy(),Se(W.id,s,b,p)}catch(u){console.error("Error in textarea change:",u),Se(W.id,s,W.width,W.height)}},He=()=>{W&&ke(W.id,!1)},f=W?(()=>{if(!W||!k.current)return{top:0,left:0};const u=k.current.container().getBoundingClientRect(),b=W.fontSize*.05;return{top:u.top+W.y+L.y-b,left:u.left+W.x+L.x}})():{top:0,left:0},H=r=>{if(r.target!==r.target.getStage()||a)return;const s=r.target.getStage(),u=s==null?void 0:s.getPointerPosition();if(u){const b={x:u.x-L.x,y:u.y-L.y};G.current=b,q({x:b.x,y:b.y,width:0,height:0})}},M=r=>{if(!G.current)return;const s=r.target.getStage(),u=s==null?void 0:s.getPointerPosition();if(u){const b={x:u.x-L.x,y:u.y-L.y},p=G.current;q({x:Math.min(p.x,b.x),y:Math.min(p.y,b.y),width:Math.abs(b.x-p.x),height:Math.abs(b.y-p.y)})}},j=r=>{if(!G.current)return;if(X&&(X.width>5||X.height>5)){const u=[];n.forEach(b=>{const p={x:b.x,y:b.y,width:b.width,height:b.height};!(X.x>p.x+p.width||X.x+X.width<p.x||X.y>p.y+p.height||X.y+X.height<p.y)&&u.push(b.id)}),u.length>0?c(u):c([])}else r.target===r.target.getStage()&&c([]);G.current=null,q(null)};return t.jsxs("div",{style:{position:"fixed",top:0,left:0,width:"100vw",height:"100vh",pointerEvents:"none"},children:[t.jsx("div",{onMouseEnter:()=>Z(!0),onMouseLeave:()=>Z(!1),style:{position:"absolute",left:L.x,top:L.y,width:v.width,height:v.height,border:"1px solid #EBEBEB",borderRadius:T?"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(rt,{ref:k,width:ne.width,height:ne.height,onMouseDown:H,onMouseMove:M,onMouseUp:j,onClick:r=>{if(r.target===r.target.getStage()&&a&&g){const s=r.target.getStage(),u=s==null?void 0:s.getPointerPosition();u&&g(u.x-L.x,u.y-L.y)}},style:{cursor:a?"text":"default",pointerEvents:"auto"},children:t.jsxs(at,{x:L.x,y:L.y,children:[ve?t.jsx(_e,{x:0,y:0,width:v.width,height:v.height,image:ve,listening:!1}):t.jsx(ge,{x:0,y:0,width:v.width,height:v.height,fill:"#ffffff",listening:!1}),Ie.map(r=>t.jsx(Wt,{object:r,isSelected:l.includes(r.id),onSelect:s=>{var b;const u=((b=s==null?void 0:s.evt)==null?void 0:b.shiftKey)||!1;$e(r.id,u)},onDragStart:Le,onDragMove:Me,onDragEnd:pe(r.id),onTransformEnd:Ee(r.id),onEditingChange:ke,onMouseEnter:()=>K(r.id),onMouseLeave:()=>K(null),shapeRef:s=>{s?$.current.set(r.id,s):$.current.delete(r.id)}},r.id)),X&&t.jsx(ge,{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}),U.vertical&&t.jsx(ge,{x:v.width/2,y:0,width:1,height:v.height,fill:"#FF6B6B",listening:!1,opacity:.8}),U.horizontal&&t.jsx(ge,{x:0,y:v.height/2,width:v.width,height:1,fill:"#FF6B6B",listening:!1,opacity:.8}),I&&!l.includes(I)&&(()=>{const r=$.current.get(I);if(r){const s=r.getClientRect();return t.jsx(ge,{x:s.x-L.x,y:s.y-L.y,width:s.width,height:s.height,stroke:"#3faee6",strokeWidth:1,dash:[4,4],listening:!1,opacity:.5})}return null})(),t.jsx(lt,{ref:C,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:(r,s)=>s.width<5||s.height<5?r:s})]})}),W&&t.jsx("textarea",{ref:B,value:W.text,onChange:De,onBlur:He,onKeyDown:r=>{r.key==="Escape"&&He()},style:{position:"fixed",top:`${f.top}px`,left:`${f.left}px`,width:`${W.width}px`,height:`${W.height}px`,fontSize:`${W.fontSize}px`,fontFamily:W.fontFamily,fontWeight:W.bold?"bold":"normal",fontStyle:W.italic?"italic":"normal",textAlign:W.align||"left",color:W.fill,background:"transparent",border:"none",borderRadius:"0",padding:"0",margin:"0",resize:"none",outline:"none",overflow:"hidden",lineHeight:"1",zIndex:999,pointerEvents:"auto",boxSizing:"border-box"}})]})}function Gt(){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 Kt(){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 qt(){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 Jt({bgColor:e,onChange:o}){const[n,l]=d.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:()=>o("seriousLight"),onMouseEnter:()=>l("seriousLight"),onMouseLeave:()=>l(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(Gt,{})}),t.jsx("button",{onClick:()=>o("light"),onMouseEnter:()=>l("light"),onMouseLeave:()=>l(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(Kt,{})}),t.jsx("button",{onClick:()=>o("dark"),onMouseEnter:()=>l("dark"),onMouseLeave:()=>l(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(qt,{})})]})]})}function Zt({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 Vt({selected:e=!1}){const o=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:o})})}function Qt({selected:e=!1}){const o=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:o})})}const en={"1200x675":"1200x675",linkedin:"1200x627",hf:"1160x580"};function tn({canvasSize:e,onChange:o}){const[n,l]=d.useState(null),[c,i]=d.useState(window.innerWidth>=1024);d.useEffect(()=>{const g=()=>{i(window.innerWidth>=1024)};return window.addEventListener("resize",g),()=>window.removeEventListener("resize",g)},[]);const a=(g,m,w)=>{const x=e===g,k=n===g;return t.jsxs("button",{onClick:()=>o(g),onMouseEnter:()=>l(g),onMouseLeave:()=>l(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:x?"flex-start":"center",gap:"4.5px",height:c?"32px":"29px",minWidth:c?"38px":"34px",paddingLeft:x?c?"10px":"9px":c?"9px":"8px",paddingRight:x?c?"10px":"9px":c?"9px":"8px",background:x?"#DEE2E7":k?"#f0f2f4":"transparent"},title:w,children:[t.jsx(m,{selected:x}),t.jsx("span",{className:"whitespace-nowrap overflow-hidden transition-[opacity,transform] duration-150 ease-in-out",style:{color:"#32343d",fontSize:c?"16px":"14px",fontWeight:"normal",fontFamily:"Inter, sans-serif",opacity:x?.6:0,transform:x?"translateX(0)":"translateX(-10px)",width:x?"auto":"0"},children:en[g]})]})};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:[a("1200x675",Zt,"1200×675 (Default)"),a("linkedin",Vt,"LinkedIn size (1200x627)"),a("hf",Qt,"HF custom size (1160x580)")]})]})}function nn({canvasSize:e,bgColor:o,onCanvasSizeChange:n,onBgColorChange:l}){const[c,i]=d.useState({width:window.innerWidth,height:window.innerHeight});d.useEffect(()=>{const x=()=>{i({width:window.innerWidth,height:window.innerHeight})};return window.addEventListener("resize",x),()=>window.removeEventListener("resize",x)},[]);const a=fe(e),g={x:(c.width-a.width)/2,y:(c.height-a.height)/2},w=g.y-40-20;return t.jsxs("div",{style:{position:"fixed",top:`${w}px`,left:`${g.x}px`,width:`${a.width}px`,display:"flex",alignItems:"center",justifyContent:"space-between",transition:"all 0.15s ease-in-out",zIndex:1e3,pointerEvents:"auto"},children:[t.jsx(Jt,{bgColor:o,onChange:l}),t.jsx(tn,{canvasSize:e,onChange:n})]})}function on({onKeep:e,onReplace:o,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:l=>l.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(Nt,{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:o,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 Re(e){const o=parseInt(e.slice(1,3),16)/255,n=parseInt(e.slice(3,5),16)/255,l=parseInt(e.slice(5,7),16)/255,c=Math.max(o,n,l),i=Math.min(o,n,l),a=c-i;let g=0;a!==0&&(c===o?g=((n-l)/a+(n<l?6:0))/6:c===n?g=((l-o)/a+2)/6:g=((o-n)/a+4)/6);const m=c===0?0:a/c,w=c;return{h:g*360,s:m*100,v:w*100}}function sn(e,o,n){e=e/360,o=o/100,n=n/100;const l=Math.floor(e*6),c=e*6-l,i=n*(1-o),a=n*(1-c*o),g=n*(1-(1-c)*o);let m=0,w=0,x=0;switch(l%6){case 0:m=n,w=g,x=i;break;case 1:m=a,w=n,x=i;break;case 2:m=i,w=n,x=g;break;case 3:m=i,w=a,x=n;break;case 4:m=g,w=i,x=n;break;case 5:m=n,w=i,x=a;break}const k=D=>{const C=Math.round(D*255).toString(16);return C.length===1?"0"+C:C};return`#${k(m)}${k(w)}${k(x)}`}function rn({color:e,onChange:o}){const n=Re(e),[l,c]=d.useState(n.h),[i,a]=d.useState(n.s),[g,m]=d.useState(n.v),[w,x]=d.useState(e.toUpperCase()),k=d.useRef(null),D=d.useRef(null),C=d.useRef(null),[$,B]=d.useState(!1),[y,_]=d.useState(!1),[E,X]=d.useState(!1),[q,G]=d.useState(!1);d.useEffect(()=>{if(!q){const v=sn(l,i,g);x(v.toUpperCase()),o(v)}},[l,i,g,o,q]);const V=v=>{B(!0),F(v)},F=v=>{if(!k.current)return;const L=k.current.getBoundingClientRect(),Y=Math.max(0,Math.min(v.clientX-L.left,L.width)),se=Math.max(0,Math.min(v.clientY-L.top,L.height));a(Y/L.width*100),m(100-se/L.height*100)},P=v=>{_(!0),I(v)},I=v=>{if(!D.current)return;const L=D.current.getBoundingClientRect(),Y=Math.max(0,Math.min(v.clientX-L.left,L.width));c(Y/L.width*360)},K=v=>{X(!0),T(v)},T=v=>{if(!C.current)return;const L=C.current.getBoundingClientRect(),Y=Math.max(0,Math.min(v.clientX-L.left,L.width));a(Y/L.width*100)};d.useEffect(()=>{const v=Y=>{$&&F(Y),y&&I(Y),E&&T(Y)},L=()=>{B(!1),_(!1),X(!1)};if($||y||E)return document.addEventListener("mousemove",v),document.addEventListener("mouseup",L),()=>{document.removeEventListener("mousemove",v),document.removeEventListener("mouseup",L)}},[$,y,E]);const Z=v=>{G(!0);let L=v.target.value.toUpperCase();if(L.startsWith("#")||(L="#"+L),x(L),/^#[0-9A-F]{6}$/i.test(L)){const Y=Re(L);c(Y.h),a(Y.s),m(Y.v),o(L),G(!1)}},U=async()=>{if(!window.EyeDropper){alert("EyeDropper API is not supported in your browser. Please use Chrome or Edge.");return}try{const Y=(await new window.EyeDropper().open()).sRGBHex,se=Re(Y);c(se.h),a(se.s),m(se.v),x(Y.toUpperCase()),o(Y)}catch{}},te=i/100*100,ne=(1-g/100)*100,ee=l/360*100;return t.jsxs("div",{onMouseDown:v=>v.stopPropagation(),onClick:v=>v.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:k,onMouseDown:V,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(${l}, 100%, 50%)
+          `},children:t.jsx("div",{style:{position:"absolute",left:`${te}%`,top:`${ne}%`,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:U,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(Rt,{size:14,color:"white"})}),t.jsxs("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:"8px"},children:[t.jsx("div",{ref:D,onMouseDown:P,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:C,onMouseDown:K,style:{position:"relative",width:"100%",height:"12px",borderRadius:"100px",background:`linear-gradient(to right, white, hsl(${l}, 100%, 50%))`,cursor:"pointer"},children:t.jsx("div",{style:{position:"absolute",left:`${i}%`,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:w,onChange:Z,onBlur:()=>G(!1),onKeyDown:v=>v.stopPropagation(),onKeyUp:v=>v.stopPropagation(),onKeyPress:v=>v.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:v=>v.stopPropagation(),onMouseDown:v=>v.stopPropagation()})]})]})}function an({fontFamily:e,fill:o,bold:n,italic:l,canvasWidth:c,canvasHeight:i,scale:a=1,onFontFamilyChange:g,onFillChange:m,onBoldToggle:w,onItalicToggle:x,fontWeight:k="normal"}){const[D,C]=d.useState(!1),[$,B]=d.useState(!1),[y,_]=d.useState("down"),[E,X]=d.useState(window.innerWidth>=1024),q=d.useRef(null),G=["Inter","IBM Plex Mono","Bison","Source Sans 3"],V={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}},F=V[e].bold,P=V[e].italic,I=V[e].black;d.useEffect(()=>{const v=()=>{X(window.innerWidth>=1024)};return window.addEventListener("resize",v),()=>window.removeEventListener("resize",v)},[]),d.useEffect(()=>{if(D&&q.current){const v=q.current.getBoundingClientRect(),L=G.length*40+8,Y=window.innerHeight-v.bottom,se=v.top;Y<L&&se>Y?_("up"):_("down")}},[D,G.length]);const K=c*a,T=i*a,Z=80*a,U=`calc((100vw - ${K}px) / 2)`,te=`calc((100vh - ${T}px - ${Z}px) / 2 - 10px - 44px)`,ne=E?"4px":"3.6px",ee=E?"4px":"3.6px";return t.jsx("div",{className:"text-toolbar",onMouseDown:v=>{v.stopPropagation()},onClick:v=>{v.stopPropagation()},style:{position:"fixed",right:U,bottom:te,zIndex:100,backgroundColor:"#27272A",borderRadius:E?"8px":"7px",padding:ne,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:q,onClick:()=>{C(!D),B(!1)},style:{display:"flex",alignItems:"center",gap:E?"20px":"18px",padding:E?"8px":"7px",backgroundColor:"rgba(255, 255, 255, 0.05)",border:"none",borderRadius:"4px",color:"white",fontSize:E?"16px":"14px",fontFamily:"Source Sans Pro, sans-serif",cursor:"pointer",whiteSpace:"nowrap"},children:[e,t.jsx(Lt,{size:E?14:13,style:{transform:D&&y==="up"?"rotate(180deg)":"none",transition:"transform 0.15s ease-in-out"}})]}),D&&t.jsx("div",{style:{position:"absolute",...y==="down"?{top:E?"calc(100% + 4px)":"calc(100% + 3.6px)"}:{bottom:E?"calc(100% + 4px)":"calc(100% + 3.6px)"},left:0,backgroundColor:"#27272A",border:"1px solid #09090B",borderRadius:E?"8px":"7px",padding:E?"4px":"3.6px",minWidth:E?"160px":"144px",zIndex:1e3},children:G.map(v=>t.jsx("button",{onClick:()=>{g(v),C(!1)},style:{display:"block",width:"100%",padding:E?"8px 12px":"7px 11px",backgroundColor:e===v?"rgba(255, 255, 255, 0.1)":"transparent",border:"none",borderRadius:"4px",color:"white",fontSize:E?"14px":"13px",fontFamily:v,textAlign:"left",cursor:"pointer"},onMouseEnter:L=>{e!==v&&(L.currentTarget.style.backgroundColor="rgba(255, 255, 255, 0.05)")},onMouseLeave:L=>{e!==v&&(L.currentTarget.style.backgroundColor="transparent")},children:v},v))})]}),t.jsx("div",{style:{width:"1px",height:E?"18px":"16px",backgroundColor:"rgba(255, 255, 255, 0.2)"}}),t.jsxs("div",{style:{position:"relative"},children:[t.jsx("button",{onClick:()=>{B(!$),C(!1)},style:{display:"flex",alignItems:"center",justifyContent:"center",padding:E?"10px":"9px",backgroundColor:"transparent",border:"none",borderRadius:"99px",cursor:"pointer"},children:t.jsx("div",{style:{width:E?"16px":"14px",height:E?"16px":"14px",borderRadius:"999px",backgroundColor:o,border:"1px solid #e5e9ed"}})}),$&&t.jsx(rn,{color:o,onChange:m})]}),t.jsxs("button",{onClick:F?()=>{w(),C(!1),B(!1)}:void 0,disabled:!F,style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",padding:E?"8px":"7px",backgroundColor:n||k==="black"?"rgba(255, 255, 255, 0.1)":"transparent",border:"none",borderRadius:"4px",cursor:F?"pointer":"not-allowed",color:"white",opacity:F?1:.3},children:[t.jsx($t,{size:E?20:18}),I&&k==="black"&&t.jsx("div",{style:{position:"absolute",bottom:"2px",right:"2px",width:E?"6px":"5px",height:E?"6px":"5px",borderRadius:"50%",backgroundColor:"#3faee6"}})]}),t.jsx("button",{onClick:P?()=>{x(),C(!1),B(!1)}:void 0,disabled:!P,style:{display:"flex",alignItems:"center",justifyContent:"center",padding:E?"8px":"7px",backgroundColor:l?"rgba(255, 255, 255, 0.1)":"transparent",border:"none",borderRadius:"4px",cursor:P?"pointer":"not-allowed",color:"white",opacity:P?1:.3},children:t.jsx(Et,{size:E?20:18})})]})})}const ln=50;function cn(){const[e,o]=d.useState([]),[n,l]=d.useState([]),[c,i]=d.useState("1200x675"),[a,g]=d.useState("seriousLight"),m=d.useRef([[]]),w=d.useRef(0),x=d.useRef(!1),k=d.useRef(!1),D=d.useCallback(F=>{o(F),!x.current&&setTimeout(()=>{if(k.current)return;w.current<m.current.length-1&&(m.current=m.current.slice(0,w.current+1));const P=Z=>Z.map(U=>{if(U.type==="text"){const{isEditing:te,...ne}=U;return ne}return U}),I=P(F),K=m.current[w.current]?P(m.current[w.current]):[];if(JSON.stringify(K)!==JSON.stringify(I)){const Z=JSON.parse(JSON.stringify(I));console.log("Recording history:",{textObjects:Z.filter(U=>U.type==="text").map(U=>({text:U.text,width:U.width,height:U.height,fontSize:U.fontSize}))}),m.current.push(Z),w.current++,m.current.length>ln&&(m.current.shift(),w.current--)}},0)},[]),C=d.useCallback(()=>{if(w.current>0){x.current=!0,w.current--;const P=JSON.parse(JSON.stringify(m.current[w.current])).map(I=>{if(I.type==="text"&&I.text)try{const K=require("konva").default,T=new K.Text({text:I.text,fontSize:I.fontSize,fontFamily:I.fontFamily,fontStyle:`${I.bold?"bold":"normal"} ${I.italic?"italic":""}`}),Z=Math.max(100,T.width()+20),U=Math.max(40,T.height()+10);return console.log("UNDO - Recalculating text:",{text:I.text,oldWidth:I.width,oldHeight:I.height,newWidth:Z,newHeight:U,fontSize:I.fontSize,fontFamily:I.fontFamily}),T.destroy(),{...I,width:Z,height:U,isEditing:!1}}catch(K){return console.error("Error recalculating text dimensions:",K),I}return I});o(P),l([]),setTimeout(()=>{x.current=!1},0)}},[]),$=d.useCallback(()=>{if(w.current<m.current.length-1){x.current=!0,w.current++;const P=JSON.parse(JSON.stringify(m.current[w.current])).map(I=>{if(I.type==="text"&&I.text)try{const K=require("konva").default,T=new K.Text({text:I.text,fontSize:I.fontSize,fontFamily:I.fontFamily,fontStyle:`${I.bold?"bold":"normal"} ${I.italic?"italic":""}`}),Z=Math.max(100,T.width()+20),U=Math.max(40,T.height()+10);return T.destroy(),{...I,width:Z,height:U,isEditing:!1}}catch(K){return console.error("Error recalculating text dimensions:",K),I}return I});o(P),l([]),setTimeout(()=>{x.current=!1},0)}},[]),B=F=>{const P={...F,id:Ke(),zIndex:Fe(e)};D([...e,P]),l([P.id])},y=()=>{n.length>0&&(D(e.filter(F=>!n.includes(F.id))),l([]))},_=F=>{n.length>0&&D(e.map(P=>n.includes(P.id)?{...P,...F}:P))},E=F=>{const P=Fe(e);D(e.map(I=>I.id===F?{...I,zIndex:P}:I))},X=F=>{const P=Math.min(...e.map(I=>I.zIndex));D(e.map(I=>I.id===F?{...I,zIndex:P-1}:I))},q=F=>{const P=e.find(T=>T.id===F);if(!P)return;const I=e.filter(T=>T.zIndex>P.zIndex);if(I.length===0)return;const K=Math.min(...I.map(T=>T.zIndex));D(e.map(T=>T.id===F?{...T,zIndex:K+.5}:T))},G=F=>{const P=e.find(T=>T.id===F);if(!P)return;const I=e.filter(T=>T.zIndex<P.zIndex);if(I.length===0)return;const K=Math.max(...I.map(T=>T.zIndex));D(e.map(T=>T.id===F?{...T,zIndex:K-.5}:T))},V=d.useCallback(F=>{k.current=F},[]);return{objects:e,selectedIds:n,canvasSize:c,bgColor:a,setObjects:D,setSelectedIds:l,setCanvasSize:i,setBgColor:g,addObject:B,deleteSelected:y,updateSelected:_,bringToFront:E,sendToBack:X,moveForward:q,moveBackward:G,undo:C,redo:$,setSkipHistoryRecording:V}}function dn(e,o){const[n,l]=d.useState(1),[c,i]=d.useState(!0);return d.useEffect(()=>{const a=()=>{const g=window.innerWidth,m=window.innerHeight,w=187,x=200,k=g-w,D=m-x,C=k/e,$=D/o,B=Math.min(C,$,1),y=B>=1;l(B),i(y)};return a(),window.addEventListener("resize",a),()=>{window.removeEventListener("resize",a)}},[e,o]),{scale:n,canFit:c}}function Je(e,o,n,l){const c=e.map(i=>{const a="      ";let g=[`${a}{`,`${a}  id: '${i.id}',`,`${a}  type: '${i.type}',`,`${a}  x: ${i.x},`,`${a}  y: ${i.y},`,`${a}  width: ${i.width},`,`${a}  height: ${i.height},`,`${a}  rotation: ${i.rotation},`,`${a}  zIndex: ${i.zIndex},`];return i.type==="text"?(g.push(`${a}  text: '${i.text}',`),g.push(`${a}  fontSize: ${i.fontSize},`),g.push(`${a}  fontFamily: '${i.fontFamily}',`),g.push(`${a}  fill: '${i.fill}',`),g.push(`${a}  bold: ${i.bold},`),g.push(`${a}  italic: ${i.italic},`),i.align&&g.push(`${a}  align: '${i.align}',`),i.fontWeight&&i.fontWeight!=="normal"&&g.push(`${a}  fontWeight: '${i.fontWeight}',`)):i.type==="image"||i.type==="huggy"?(g.push(`${a}  src: '${i.src}',`),g.push(`${a}  name: '${i.name||"Untitled"}',`)):i.type==="rect"&&(g.push(`${a}  fill: '${i.fill}',`),i.stroke&&g.push(`${a}  stroke: '${i.stroke}',`),i.strokeWidth!==void 0&&g.push(`${a}  strokeWidth: ${i.strokeWidth},`)),g.push(`${a}},`),g.join(`
+`)}).join(`
+`);return`  ${o}: {
+    id: '${o}',
+    name: '${n}',
+    thumbnail: '${l}',
+    objects: [
+${c}
+    ],
+  },`}function gn(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,l)=>{console.group(`${l+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.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 o=Je(e,"myNewLayout","My New Layout","/assets/layouts/myNewLayout_thumbnail.png");console.log(o),console.groupEnd(),console.groupEnd()}function un(e){return JSON.stringify(e,null,2)}function hn(){const{objects:e,selectedIds:o,canvasSize:n,bgColor:l,setObjects:c,setSelectedIds:i,setCanvasSize:a,setBgColor:g,addObject:m,deleteSelected:w,undo:x,redo:k,setSkipHistoryRecording:D}=cn(),[C,$]=d.useState(!1),[B,y]=d.useState(null),[_,E]=d.useState(!1),[X,q]=d.useState(!1),[G,V]=d.useState(!1),[F,P]=d.useState(null),[I,K]=d.useState(null),T=d.useRef(null),Z=d.useRef(null),U=d.useRef(null),te=S=>{const f=S.some(H=>H.type==="text"&&H.isEditing);D(f),c(S)},ne=S=>{a(S)},ee=fe(n),{scale:v}=dn(ee.width,ee.height),L=()=>{console.log("Layout clicked"),y(B==="layout"?null:"layout"),$(!1)},Y=()=>{console.log("Huggy clicked"),y(B==="huggy"?null:"huggy"),$(!1)},se=()=>{var S;console.log("Image clicked"),(S=T.current)==null||S.click()},be=()=>{B==="text"?($(!1),y(null)):($(!0),y("text"))},ve=S=>{if(!je(S))return;e.some(M=>!M.isFromLayout)?(P(S),V(!0)):W(S,!1)},W=(S,f)=>{const H=je(S);if(!H)return;const M=e.length>0?Math.max(...e.map(r=>r.zIndex)):0,j=H.objects.map(r=>{const s={...r,id:`${r.id}-${Date.now()}`,isFromLayout:!0,zIndex:f?r.zIndex-M-100:r.zIndex};if(r.type==="text"&&r.text)try{const u=new ue.Text({text:r.text,fontSize:r.fontSize,fontFamily:r.fontFamily,fontStyle:`${r.bold?"bold":"normal"} ${r.italic?"italic":""}`}),b=Math.max(100,u.width()+20),p=Math.max(40,u.height()+10);return u.destroy(),{...s,width:Math.max(r.width,b),height:Math.max(r.height,p)}}catch(u){return console.error("Error recalculating layout text dimensions:",u),s}return s});c(f?[...j,...e]:j),K(S),i([]),y(null)},Ie=()=>{F&&W(F,!0),V(!1),P(null)},$e=()=>{F&&W(F,!1),V(!1),P(null)},re=()=>{V(!1),P(null)},Le=S=>{const f=fe(n),H=200,M=Math.floor(Math.random()*200)-100,j=Math.floor(Math.random()*200)-100,r=f.width/2-H/2,s=f.height/2-H/2;m({type:"image",x:r+M,y:s+j,width:H,height:H,src:S.thumbnail,rotation:0,isFromLayout:!1}),y(null)},Me=(S,f)=>{m({type:"text",x:S,y:f,width:100,height:80,rotation:0,text:"",fontSize:68,fontFamily:"Inter",fill:"#000000",bold:!1,italic:!1,isEditing:!1}),$(!1),y(null)},pe=(S,f,H)=>{if(!["image/png","image/jpeg","image/jpg","image/webp"].includes(S.type)){alert("Please upload a valid image file (PNG, JPG, or WebP)");return}const j=10*1024*1024;if(S.size>j){alert("File size must be less than 10MB");return}const r=new FileReader;r.onload=s=>{var p;const u=(p=s.target)==null?void 0:p.result,b=new Image;b.onload=()=>{const h=fe(n);let z=b.width,R=b.height;const O=Math.max(h.width,h.height),A=Math.max(z,R);if(A>O){const oe=O*.5/A;z=z*oe,R=R*oe}let J,Q;if(f!==void 0&&H!==void 0)J=f-z/2,Q=H-R/2;else{const ie=Math.floor(Math.random()*200)-100,oe=Math.floor(Math.random()*200)-100;J=h.width/2-z/2+ie,Q=h.height/2-R/2+oe}m({type:"image",x:J,y:Q,width:z,height:R,src:u,rotation:0,isFromLayout:!1})},b.src=u},r.readAsDataURL(S)},Ee=S=>{var H;const f=(H=S.target.files)==null?void 0:H[0];f&&pe(f),S.target.value=""},Se=S=>{const f=S.target;f.closest(".sidebar-container")||f.closest(".layout-selector")||f.closest(".huggy-menu")||S.dataTransfer.types.includes("Files")&&(S.preventDefault(),E(!0))},ke=S=>{S.preventDefault(),E(!1)},De=S=>{var M;S.preventDefault(),E(!1);const f=S.target;if(f.closest(".sidebar-container")||f.closest(".layout-selector")||f.closest(".huggy-menu"))return;const H=(M=S.dataTransfer.files)==null?void 0:M[0];if(H){const j=document.querySelector(".canvas-container");if(j){const r=j.querySelector(".konvajs-content");if(r){const s=r.getBoundingClientRect(),u=S.clientX-s.left,b=S.clientY-s.top;if(u>=0&&u<=s.width&&b>=0&&b<=s.height){pe(H,u,b);return}}}pe(H)}},He=async S=>{if(!Z.current){console.error("Stage ref not available");return}q(!0);try{const f=o;i([]),await new Promise(h=>setTimeout(h,50));const H=Z.current,M=window.devicePixelRatio||1,j=H.width(),r=H.height(),s=(j-ee.width)/2,u=(r-ee.height)/2,b=H.toDataURL({mimeType:"image/png",quality:1,pixelRatio:M,x:s,y:u,width:ee.width,height:ee.height}),p=document.createElement("a");p.download=`${S}.png`,p.href=b,document.body.appendChild(p),p.click(),document.body.removeChild(p),i(f)}catch(f){console.error("Error exporting canvas:",f),alert("Failed to export canvas. Please try again.")}finally{q(!1)}};return d.useEffect(()=>{const S=f=>{const H=document.querySelector(".canvas-container"),M=document.querySelector(".text-toolbar"),j=H&&H.contains(f.target),r=M&&M.contains(f.target);!j&&!r&&o.length>0&&i([])};return document.addEventListener("mousedown",S),()=>document.removeEventListener("mousedown",S)},[o,i]),d.useEffect(()=>{const S=f=>{if(!B)return;const H=document.querySelector(".sidebar-container"),M=document.querySelector(".layout-selector"),j=document.querySelector(".huggy-menu"),r=document.querySelector(".text-hint"),s=document.querySelector(".canvas-container");if(s&&s.contains(f.target)&&C)return;const b=H&&!H.contains(f.target),p=!M||!M.contains(f.target),h=!j||!j.contains(f.target),z=!r||!r.contains(f.target);b&&p&&h&&z&&(y(null),$(!1))};return document.addEventListener("mousedown",S),()=>document.removeEventListener("mousedown",S)},[B,C]),d.useEffect(()=>(window.exportCanvas={log:()=>gn(e),asLayout:(S,f,H)=>{const M=Je(e,S,f,H);return console.log("📋 Copy this to layouts.ts:"),console.log(M),M},asJSON:()=>{const S=un(e);return console.log("📋 JSON Export:"),console.log(S),S},objects:()=>e,info:()=>({objectCount:e.length,canvasSize:n,dimensions:ee,bgColor:l,selectedIds:o})},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) - Export as layout definition"),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,ee,l,o]),d.useEffect(()=>{const S=f=>{const H=e.some(M=>M.type==="text"&&M.isEditing);if((f.ctrlKey||f.metaKey)&&f.key.toLowerCase()==="z"&&!f.shiftKey&&!H){f.preventDefault(),x();return}if((f.ctrlKey||f.metaKey)&&(f.key.toLowerCase()==="z"&&f.shiftKey||f.key.toLowerCase()==="y")&&!H){f.preventDefault(),k();return}if(!H&&o.length>0&&["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(f.key)){f.preventDefault();const M=f.shiftKey?10:1,j=e.map(r=>{if(o.includes(r.id)){let s=r.x,u=r.y;switch(f.key){case"ArrowUp":u-=M;break;case"ArrowDown":u+=M;break;case"ArrowLeft":s-=M;break;case"ArrowRight":s+=M;break}return{...r,x:s,y:u}}return r});c(j);return}if((f.key==="Delete"||f.key==="Backspace")&&o.length>0&&!H&&(f.preventDefault(),w()),(f.ctrlKey||f.metaKey)&&f.key.toLowerCase()==="d"&&o.length>0&&!H){f.preventDefault();const M=e.filter(s=>o.includes(s.id)),j=20,r=M.map(s=>({...s,id:Ke(),x:s.x+j,y:s.y+j,zIndex:Fe(e),isFromLayout:!1}));c([...e,...r]),i(r.map(s=>s.id))}if(o.length>0&&!H){if(f.key==="]"){f.preventDefault();const M=Ne(e),j=M.map((s,u)=>o.includes(s.id)?u:-1).filter(s=>s!==-1);if(Math.max(...j)<M.length-1){const s=[...M];for(let b=j.length-1;b>=0;b--){const p=j[b];p<M.length-1&&([s[p],s[p+1]]=[s[p+1],s[p]])}const u=s.map((b,p)=>({...b,zIndex:p}));c(u)}return}if(f.key==="["){f.preventDefault();const M=Ne(e),j=M.map((s,u)=>o.includes(s.id)?u:-1).filter(s=>s!==-1);if(Math.min(...j)>0){const s=[...M];for(let b=0;b<j.length;b++){const p=j[b];p>0&&([s[p],s[p-1]]=[s[p-1],s[p]])}const u=s.map((b,p)=>({...b,zIndex:p}));c(u)}return}}if(f.key==="t"||f.key==="T"){const M=f.target;M.tagName!=="INPUT"&&M.tagName!=="TEXTAREA"&&be()}};return window.addEventListener("keydown",S),()=>window.removeEventListener("keydown",S)},[o,w,e,c,x,k]),d.useEffect(()=>{const S=async f=>{var j;if(e.some(r=>r.type==="text"&&r.isEditing))return;const M=(j=f.clipboardData)==null?void 0:j.items;if(M)for(let r=0;r<M.length;r++){const s=M[r];if(s.type.indexOf("image")!==-1){f.preventDefault();const u=s.getAsFile();u&&pe(u);break}}};return window.addEventListener("paste",S),()=>window.removeEventListener("paste",S)},[e,n,m]),t.jsxs("div",{className:"w-full h-full bg-[#F8F9FB] relative dotted-background",style:{overflow:"visible"},onDragOver:Se,onDragLeave:ke,onDrop:De,children:[t.jsx("input",{ref:T,type:"file",accept:"image/png,image/jpeg,image/jpg,image/webp",onChange:Ee,style:{display:"none"}}),_&&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(Ct,{onLayoutClick:L,onHuggyClick:Y,onImageClick:se,onTextClick:be,onSelectLayout:ve,onSelectHuggy:Le,activeButton:B}),t.jsx(Ft,{onExport:He,isExporting:X,currentLayout:I,canvasSize:n}),t.jsxs(Pt,{children:[t.jsx(nn,{canvasSize:n,bgColor:l,onCanvasSizeChange:ne,onBgColorChange:g}),t.jsx(Ut,{canvasSize:n,bgColor:l,objects:e,selectedIds:o,onSelect:i,onObjectsChange:te,textCreationMode:C,onTextCreate:Me,stageRef:Z,transformerRef:U})]}),G&&t.jsx(on,{onKeep:Ie,onReplace:$e,onCancel:re}),(()=>{const S=e.filter(p=>p.type==="text"&&(o.includes(p.id)||p.isEditing===!0));if(!(C||S.length>0))return null;const H=S[0],M=(H==null?void 0:H.fontFamily)||"Inter",j=(H==null?void 0:H.fill)||"#000000",r=(H==null?void 0:H.bold)??!1,s=(H==null?void 0:H.italic)??!1,u=(H==null?void 0:H.fontWeight)||"normal",b=fe(n);return t.jsx(an,{fontFamily:M,fontSize:(H==null?void 0:H.fontSize)||68,fill:j,bold:r,italic:s,fontWeight:u,canvasWidth:b.width,canvasHeight:b.height,scale:v,onFontFamilyChange:p=>{const h=e.map(z=>{if(z.type==="text"&&S.some(R=>R.id===z.id))try{const R=new ue.Text({text:z.text||"M",fontSize:z.fontSize,fontFamily:p,fontStyle:`${z.bold?"bold":"normal"} ${z.italic?"italic":""}`}),O=Math.max(100,R.width()+20),A=Math.max(40,R.height()+10);return R.destroy(),{...z,fontFamily:p,width:O,height:A}}catch(R){return console.error("Error recalculating text size:",R),{...z,fontFamily:p}}return z});c(h)},onFillChange:p=>{const h=e.map(z=>z.type==="text"&&S.some(R=>R.id===z.id)?{...z,fill:p}:z);c(h)},onBoldToggle:()=>{const p=e.map(h=>{if(h.type==="text"&&S.some(z=>z.id===h.id)){const z=h.fontFamily==="Source Sans 3",R=h.fontWeight||"normal";let O=h.bold,A="normal";z?R==="normal"&&!h.bold?(O=!0,A="bold"):R==="bold"||h.bold&&R==="normal"?(O=!0,A="black"):(O=!1,A="normal"):(O=!h.bold,A=O?"bold":"normal");try{const J=A==="black"?"900":A==="bold"?"bold":"normal",Q=new ue.Text({text:h.text||"M",fontSize:h.fontSize,fontFamily:h.fontFamily,fontStyle:`${h.italic?"italic":"normal"}`,fontVariant:J}),ie=Math.max(100,Q.width()+20),oe=Math.max(40,Q.height()+10);return Q.destroy(),{...h,bold:O,fontWeight:A,width:ie,height:oe}}catch(J){return console.error("Error recalculating text size:",J),{...h,bold:O,fontWeight:A}}}return h});c(p)},onItalicToggle:()=>{const p=e.map(h=>{if(h.type==="text"&&S.some(z=>z.id===h.id)){const z=!h.italic;try{const R=new ue.Text({text:h.text||"M",fontSize:h.fontSize,fontFamily:h.fontFamily,fontStyle:`${h.bold?"bold":"normal"} ${z?"italic":""}`}),O=Math.max(100,R.width()+20),A=Math.max(40,R.height()+10);return R.destroy(),{...h,italic:z,width:O,height:A}}catch(R){return console.error("Error recalculating text size:",R),{...h,italic:z}}}return h});c(p)}})})()]})}Ue(document.getElementById("root")).render(t.jsx(d.StrictMode,{children:t.jsx(hn,{})}));

assets/index-V8h22z1a.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))}.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-\[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-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-\[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,10 +17,10 @@
     <!-- 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-BVQTbTP4.js"></script>
+    <script type="module" crossorigin src="/assets/index-B-p8Ph51.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/react-vendor-DzFEYc3-.js">
     <link rel="modulepreload" crossorigin href="/assets/konva-vendor-CFBUcegD.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-Boksxc3h.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-V8h22z1a.css">
   </head>
   <body>
     <div id="root"></div>