assets/index-BVQTbTP4.js

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