Upload 41 files

assets/index-BJMvp6Kq.js

@@ -0,0 +1,70 @@
+import{r as g,a as ot,g as st}from"./react-vendor-DzFEYc3-.js";import{T as rt,R as ge,K as ue,I as Xe,S as at,L as lt,a as ct}from"./konva-vendor-CFBUcegD.js";(function(){const i=document.createElement("link").relList;if(i&&i.supports&&i.supports("modulepreload"))return;for(const a of document.querySelectorAll('link[rel="modulepreload"]'))c(a);new MutationObserver(a=>{for(const r of a)if(r.type==="childList")for(const o of r.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&c(o)}).observe(document,{childList:!0,subtree:!0});function n(a){const r={};return a.integrity&&(r.integrity=a.integrity),a.referrerPolicy&&(r.referrerPolicy=a.referrerPolicy),a.crossOrigin==="use-credentials"?r.credentials="include":a.crossOrigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function c(a){if(a.ep)return;a.ep=!0;const r=n(a);fetch(a.href,r)}})();var Ye={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 dt=g,gt=Symbol.for("react.element"),ut=Symbol.for("react.fragment"),ht=Object.prototype.hasOwnProperty,pt=dt.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,ft={key:!0,ref:!0,__self:!0,__source:!0};function Ke(e,i,n){var c,a={},r=null,o=null;n!==void 0&&(r=""+n),i.key!==void 0&&(r=""+i.key),i.ref!==void 0&&(o=i.ref);for(c in i)ht.call(i,c)&&!ft.hasOwnProperty(c)&&(a[c]=i[c]);if(e&&e.defaultProps)for(c in i=e.defaultProps,i)a[c]===void 0&&(a[c]=i[c]);return{$$typeof:gt,type:e,key:r,ref:o,props:a,_owner:pt.current}}ze.Fragment=ut;ze.jsx=Ke;ze.jsxs=Ke;Ye.exports=ze;var t=Ye.exports,Ue,We=ot;Ue=We.createRoot,We.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 mt(){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 yt({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 wt({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",variants:{default:[{id:"hf-logo",type:"image",x:716.18,y:235.81,width:220.16,height:204.39,rotation:0,zIndex:1,src:"/assets/layouts/HF logo.png",name:"HF Logo"},{id:"logo-placeholder",type:"image",x:241.94,y:210.44,width:262.31,height:255.13,rotation:0,zIndex:2,src:"/assets/layouts/logo_placehoder.png",name:"Logo Placeholder"},{id:"x-icon",type:"image",x:619.01,y:329.12,width:16.76,height:16.76,rotation:0,zIndex:3,src:"/assets/layouts/collabX.svg",name:"X Icon"}],hf:[{id:"hf-logo",type:"image",x:707.04,y:187.805,width:220.16,height:204.39,rotation:0,zIndex:1,src:"/assets/layouts/HF logo.png",name:"HF Logo"},{id:"logo-placeholder",type:"image",x:232.8,y:162.435,width:262.31,height:255.13,rotation:0,zIndex:2,src:"/assets/layouts/logo_placehoder.png",name:"Logo Placeholder"},{id:"x-icon",type:"image",x:609.87,y:281.115,width:16.76,height:16.76,rotation:0,zIndex:3,src:"/assets/layouts/collabX.svg",name:"X Icon"}]}},funCollab:{id:"funCollab",name:"Fun Collab",thumbnail:"/assets/layouts/fCollab_thumbnail.png",variants:{default:[{id:"title-text",type:"text",x:124,y:81.58,width:945.2583618164062,height:140,rotation:0,zIndex:1,text:"Pretty Short Title",fontSize:111.43,fontFamily:"Inter",fill:"#8a97ba",bold:!0,italic:!1,align:"center"},{id:"logo-placeholder",type:"image",x:278.6,y:232.76,width:311.73,height:306.01,rotation:351.366,zIndex:3,src:"/assets/layouts/logo_placehoder.png",name:"Logo Placeholder"},{id:"huggy-hand",type:"image",x:444.31341928814203,y:195.24545949041132,width:249.0715804458829,height:249.0715804458829,rotation:0,zIndex:2,src:"/assets/layouts/fCollab_huggy_hand_asset.png",name:"Huggy Hand"},{id:"huggy-group",type:"image",x:540.8452299149437,y:66.99999999999994,width:536.0247700850559,height:524.6602873270689,rotation:0,zIndex:4,src:"/assets/layouts/fCollab_huggy_asset.png",name:"Huggy Group"}],hf:[{id:"title-text",type:"text",x:107.37081909179688,y:72.58,width:945.2583618164062,height:140,rotation:0,zIndex:1,text:"Pretty Short Title",fontSize:111.43,fontFamily:"Inter",fill:"#8a97ba",bold:!0,italic:!1,align:"center"},{id:"logo-placeholder",type:"image",x:220.6,y:219.76,width:311.73,height:306.01,rotation:351.366,zIndex:3,src:"/assets/layouts/logo_placehoder.png",name:"Logo Placeholder"},{id:"huggy-hand",type:"image",x:386.31341928814203,y:182.24545949041132,width:249.0715804458829,height:249.0715804458829,rotation:0,zIndex:2,src:"/assets/layouts/fCollab_huggy_hand_asset.png",name:"Huggy Hand"},{id:"huggy-group",type:"image",x:482.84522991494373,y:53.99999999999994,width:536.0247700850559,height:524.6602873270689,rotation:0,zIndex:4,src:"/assets/layouts/fCollab_huggy_asset.png",name:"Huggy Group"}]}},sandwich:{id:"sandwich",name:"Sandwich",thumbnail:"/assets/layouts/sandwitch_thumbnail.png",variants:{default:[{id:"title-text",type:"text",x:105.220703125,y:66.07,width:989.55859375,height:163.62,rotation:0,zIndex:1,text:"Pretty short title",fontSize:161.62,fontFamily:"Bison",fill:"#8a97ba",bold:!0,italic:!1,align:"left"},{id:"description-text",type:"text",x:125.74807739257812,y:517.88,width:948.5038452148438,height:91.05,rotation:0,zIndex:2,text:"supportive description",fontSize:89.05,fontFamily:"Inter",fill:"#8a97ba",bold:!1,italic:!1,align:"center"},{id:"singing-huggy",type:"image",x:336.34,y:144.4,width:565,height:389,rotation:0,zIndex:3,src:"/assets/layouts/snadwithc_huggy_asset.png",name:"Singing Huggy"}],hf:[{id:"title-text",type:"text",x:120.09410109409966,y:37.701128708369104,width:919.8117978118034,height:152.0876149310558,rotation:0,zIndex:1,text:"Pretty short title",fontSize:150.22858040066754,fontFamily:"Bison",fill:"#8a97ba",bold:!0,italic:!1,align:"left"},{id:"description-text",type:"text",x:139.17464988491434,y:457.66632429570814,width:881.6507002301743,height:84.63254699592123,rotation:0,zIndex:2,text:"supportive description",fontSize:82.77351246553299,fontFamily:"Inter",fill:"#8a97ba",bold:!1,italic:!1,align:"center"},{id:"singing-huggy",type:"image",x:334.9234778589283,y:110.51021609102176,width:525.1772548346574,height:361.5822161604982,rotation:0,zIndex:3,src:"/assets/layouts/snadwithc_huggy_asset.png",name:"Singing Huggy"}]}},academiaHub:{id:"academiaHub",name:"Academia Hub",thumbnail:"/assets/layouts/academia_thumbnail.png",variants:{default:[{id:"welcome-academia-hub",type:"image",x:342.0207815174148,y:96.80554723334625,width:515.9584369651704,height:68.45097665871741,rotation:0,zIndex:0,src:"/assets/layouts/welcome_academia_hub.png",name:"Welcome Academia Hub"},{id:"hf-logo",type:"image",x:750.0004969914753,y:259.12208128610206,width:259.950483451221,height:241.33030211026127,rotation:0,zIndex:1,src:"/assets/layouts/HF logo.png",name:"HF Logo"},{id:"logo-placeholder",type:"image",x:190.04901955730372,y:226.16684979465253,width:309.718438018213,height:301.24076509315995,rotation:0,zIndex:2,src:"/assets/layouts/logo_placehoder.png",name:"Logo Placeholder"},{id:"x-icon",type:"image",x:635.2685362494915,y:369.29640728007695,width:19.789108387729218,height:19.78910838772924,rotation:0,zIndex:3,src:"/assets/layouts/collabX.svg",name:"X Icon"}],hf:[{id:"welcome-academia-hub",type:"image",x:351.2901407285004,y:67.12621785091982,width:457.4197185429997,height:60.68478434307993,rotation:0,zIndex:0,src:"/assets/layouts/welcome_academia_hub.png",name:"Welcome Academia Hub"},{id:"hf-logo",type:"image",x:712.982000485792,y:211.02692380312976,width:230.45747187462104,height:213.94986680802086,rotation:0,zIndex:1,src:"/assets/layouts/HF logo.png",name:"HF Logo"},{id:"logo-placeholder",type:"image",x:216.56052763958712,y:181.8106698699552,width:274.5789400773612,height:267.063112279125,rotation:0,zIndex:2,src:"/assets/layouts/logo_placehoder.png",name:"Logo Placeholder"},{id:"x-icon",type:"image",x:611.2670997678724,y:308.70128199999107,width:17.543910013711162,height:17.543910013711187,rotation:0,zIndex:3,src:"/assets/layouts/collabX.svg",name:"X Icon"}]}}};function Re(e){return Ge[e]}function vt(){return Object.values(Ge)}function _e(e,i){return e.variants?e.variants[i]||e.variants.default:e.objects||[]}function bt({onSelectLayout:e}){const i=vt(),[n,c]=g.useState(new Set(i.map(r=>r.id))),a=r=>{c(o=>{const u=new Set(o);return u.delete(r),u})};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:r=>{r.preventDefault(),r.stopPropagation()},onDrag:r=>{r.preventDefault(),r.stopPropagation()},onDragOver:r=>{r.preventDefault(),r.stopPropagation()},children:t.jsxs("div",{className:"flex flex-col gap-0",children:[t.jsx("div",{className:"flex gap-0",children:i.slice(0,2).map(r=>t.jsxs("button",{onClick:()=>e(r.id),onDragStart:o=>o.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:o=>o.preventDefault(),children:[n.has(r.id)&&t.jsx("div",{className:"absolute inset-0 skeleton-shimmer"}),t.jsx("img",{src:r.thumbnail,alt:r.name,className:`w-full h-full object-cover transition-opacity duration-200 ${n.has(r.id)?"opacity-0":"opacity-100"}`,onLoad:()=>a(r.id),draggable:!1})]}),t.jsx("p",{className:"text-[14px] font-normal text-[#545865] text-center",children:r.name})]},r.id))}),t.jsx("div",{className:"flex gap-0",children:i.slice(2,4).map(r=>t.jsxs("button",{onClick:()=>e(r.id),onDragStart:o=>o.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:o=>o.preventDefault(),children:[n.has(r.id)&&t.jsx("div",{className:"absolute inset-0 skeleton-shimmer"}),t.jsx("img",{src:r.thumbnail,alt:r.name,className:`w-full h-full object-cover transition-opacity duration-200 ${n.has(r.id)?"opacity-0":"opacity-100"}`,onLoad:()=>a(r.id),draggable:!1})]}),t.jsx("p",{className:"text-[14px] font-normal text-[#545865] text-center",children:r.name})]},r.id))}),t.jsx("div",{className:"flex gap-0",children:i.slice(4,6).map(r=>t.jsxs("button",{onClick:()=>e(r.id),onDragStart:o=>o.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:o=>o.preventDefault(),children:[n.has(r.id)&&t.jsx("div",{className:"absolute inset-0 skeleton-shimmer"}),t.jsx("img",{src:r.thumbnail,alt:r.name,className:`w-full h-full object-cover transition-opacity duration-200 ${n.has(r.id)?"opacity-0":"opacity-100"}`,onLoad:()=>a(r.id),draggable:!1})]}),t.jsx("p",{className:"text-[14px] font-normal text-[#545865] text-center",children:r.name})]},r.id))})]})})}const F="https://huggingface.co/datasets/Chunte/Huggy/resolve/main",St=[{id:"acedemic-huggy",name:"Acedemic Huggy",thumbnail:`${F}/modern%20Huggies/Acedemic%20Huggy.png`,category:"modern",tags:["acedemic","academic","education","modern"]},{id:"back-of-huggy",name:"Back of a Huggy",thumbnail:`${F}/modern%20Huggies/Back%20of%20a%20Huggy.png`,category:"modern",tags:["back","modern"]},{id:"d-huggy",name:"D Huggy",thumbnail:`${F}/modern%20Huggies/D%20Huggy.png`,category:"modern",tags:["d","letter","modern"]},{id:"dragon-huggy",name:"Dragon Huggy",thumbnail:`${F}/modern%20Huggies/Dragon%20Huggy.png`,category:"modern",tags:["dragon","fantasy","modern"]},{id:"game-jam-huggy",name:"Game Jam Huggy",thumbnail:`${F}/modern%20Huggies/Game%20Jam%20Huggy.png`,category:"modern",tags:["game","jam","gaming","modern"]},{id:"huggy-chef",name:"Huggy Chef",thumbnail:`${F}/modern%20Huggies/Huggy%20Chef.png`,category:"modern",tags:["chef","cooking","food","modern"]},{id:"huggy-hi",name:"Huggy Hi",thumbnail:`${F}/modern%20Huggies/Huggy%20Hi.png`,category:"modern",tags:["hi","hello","greeting","wave","modern"]},{id:"huggy-lab",name:"Huggy Lab",thumbnail:`${F}/modern%20Huggies/Huggy%20Lab.png`,category:"modern",tags:["lab","laboratory","science","modern"]},{id:"huggy-medic",name:"Huggy Medic",thumbnail:`${F}/modern%20Huggies/Huggy%20Medic.png`,category:"modern",tags:["medic","medical","doctor","health","modern"]},{id:"huggy-okay",name:"Huggy Okay",thumbnail:`${F}/modern%20Huggies/Huggy%20Okay.png`,category:"modern",tags:["okay","ok","thumbs up","modern"]},{id:"huggy-sunny-hello",name:"Huggy Sunny hello",thumbnail:`${F}/modern%20Huggies/Huggy%20Sunny%20hello.png`,category:"modern",tags:["sunny","hello","greeting","summer","modern"]},{id:"huggy-sunny",name:"Huggy Sunny",thumbnail:`${F}/modern%20Huggies/Huggy%20Sunny.png`,category:"modern",tags:["sunny","summer","sun","modern"]},{id:"huggy-yolk",name:"Huggy Yolk",thumbnail:`${F}/modern%20Huggies/Huggy%20Yolk.png`,category:"modern",tags:["yolk","egg","food","modern"]},{id:"huggy-blink-okay",name:"Huggy blink Okay",thumbnail:`${F}/modern%20Huggies/Huggy%20blink%20Okay.png`,category:"modern",tags:["blink","okay","wink","modern"]},{id:"huggy-the-pooh-meme",name:"Huggy the Pooh meme",thumbnail:`${F}/modern%20Huggies/Huggy%20the%20Pooh%20meme.png`,category:"modern",tags:["pooh","meme","funny","modern"]},{id:"idefics-huggy",name:"IDEFICS Huggy",thumbnail:`${F}/modern%20Huggies/IDEFICS%20Huggy.png`,category:"modern",tags:["idefics","vision","multimodal","ai","modern"]},{id:"karaoke-huggy",name:"Karaoke Huggy",thumbnail:`${F}/modern%20Huggies/Karaoke%20Huggy.png`,category:"modern",tags:["karaoke","singing","music","modern"]},{id:"lora-huggy",name:"Lora Huggy",thumbnail:`${F}/modern%20Huggies/Lora%20Huggy.png`,category:"modern",tags:["lora","ai","model","modern"]},{id:"robot-huggy",name:"Robot Huggy",thumbnail:`${F}/modern%20Huggies/Robot%20Huggy.png`,category:"modern",tags:["robot","automation","ai","modern"]},{id:"snake-huggy",name:"Snake Huggy",thumbnail:`${F}/modern%20Huggies/Snake%20Huggy.png`,category:"modern",tags:["snake","python","code","modern"]},{id:"super-huggy",name:"Super Huggy",thumbnail:`${F}/modern%20Huggies/Super%20Huggy.png`,category:"modern",tags:["super","hero","superhero","modern"]},{id:"text-generation-wizard-huggy",name:"Text Generation Wizard Huggy",thumbnail:`${F}/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:`${F}/modern%20Huggies/Transformer%20Agent%20Huggy.png`,category:"modern",tags:["transformer","agent","ai","nlp","modern"]},{id:"wine-huggy",name:"Wine Huggy",thumbnail:`${F}/modern%20Huggies/Wine%20Huggy.png`,category:"modern",tags:["wine","drink","celebration","modern"]},{id:"computer-vision-huggy",name:"computer vision Huggy",thumbnail:`${F}/modern%20Huggies/computer%20vision%20Huggy.png`,category:"modern",tags:["computer","vision","cv","ai","model","modern"]}],kt=[{id:"catching-huggy",name:"Catching Huggy",thumbnail:`${F}/Outlined%20Huggies/Catching%20Huggy.png`,category:"outlined",tags:["catching","catch","outlined"]},{id:"comic-huggy",name:"Comic Huggy",thumbnail:`${F}/Outlined%20Huggies/Comic%20Huggy.png`,category:"outlined",tags:["comic","cartoon","outlined"]},{id:"curious-huggy",name:"Curious Huggy",thumbnail:`${F}/Outlined%20Huggies/Curious%20Huggy.png`,category:"outlined",tags:["curious","wondering","thinking","outlined"]},{id:"diffusor-guide-huggy",name:"Diffusor guide Huggy",thumbnail:`${F}/Outlined%20Huggies/Diffusor%20guide%20Huggy.png`,category:"outlined",tags:["diffusor","diffusion","guide","ai","outlined"]},{id:"fishing-huggy",name:"Fishing Huggy",thumbnail:`${F}/Outlined%20Huggies/Fishing%20Huggy.png`,category:"outlined",tags:["fishing","fish","outdoor","outlined"]},{id:"gpu-huggy",name:"GPU Huggy",thumbnail:`${F}/Outlined%20Huggies/GPU%20Huggy.png`,category:"outlined",tags:["gpu","graphics","computing","hardware","outlined"]},{id:"global-huggy",name:"Global Huggy",thumbnail:`${F}/Outlined%20Huggies/Global%20Huggy.png`,category:"outlined",tags:["global","world","international","outlined"]},{id:"greeting-huggy-left",name:"Greeting Huggy left",thumbnail:`${F}/Outlined%20Huggies/Greeting%20Huggy%20left.png`,category:"outlined",tags:["greeting","hello","wave","left","outlined"]},{id:"greeting-huggy-right",name:"Greeting Huggy right",thumbnail:`${F}/Outlined%20Huggies/Greeting%20Huggy%20right.png`,category:"outlined",tags:["greeting","hello","wave","right","outlined"]},{id:"growing-model-huggy",name:"Growing model Huggy",thumbnail:`${F}/Outlined%20Huggies/Growing%20model%20Huggy.png`,category:"outlined",tags:["growing","model","ai","growth","outlined"]},{id:"guide-huggy",name:"Guide Huggy",thumbnail:`${F}/Outlined%20Huggies/Guide%20Huggy.png`,category:"outlined",tags:["guide","help","tutorial","outlined"]},{id:"loving-modelndataset-huggy",name:"Loving modelndataset Huggy",thumbnail:`${F}/Outlined%20Huggies/Loving%20modelndataset%20Huggy.png`,category:"outlined",tags:["loving","model","dataset","heart","outlined"]},{id:"manager-huggy",name:"Manager Huggy",thumbnail:`${F}/Outlined%20Huggies/Manager%20Huggy.png`,category:"outlined",tags:["manager","management","business","outlined"]},{id:"paper-huggy",name:"Paper Huggy",thumbnail:`${F}/Outlined%20Huggies/Paper%20Huggy.png`,category:"outlined",tags:["paper","research","document","outlined"]},{id:"rocket-huggy",name:"Rocket Huggy",thumbnail:`${F}/Outlined%20Huggies/Rocket%20Huggy.png`,category:"outlined",tags:["rocket","space","launch","fast","outlined"]},{id:"scan-huggy",name:"Scan Huggy",thumbnail:`${F}/Outlined%20Huggies/Scan%20Huggy.png`,category:"outlined",tags:["scan","search","find","outlined"]},{id:"violinist-huggy",name:"Violinist Huggy",thumbnail:`${F}/Outlined%20Huggies/Violinist%20Huggy.png`,category:"outlined",tags:["violinist","violin","music","classical","outlined"]},{id:"xray-huggy",name:"X-ray Huggy",thumbnail:`${F}/Outlined%20Huggies/X-ray%20Huggy.png`,category:"outlined",tags:["xray","x-ray","medical","scan","outlined"]}],Be=[...St,...kt];function Ht(e){if(!e.trim())return Be;const i=e.toLowerCase().trim();return Be.filter(n=>!!(n.name.toLowerCase().replace("huggy","").trim().includes(i)||n.name.toLowerCase().includes(i)||n.category.toLowerCase().includes(i)||n.tags&&n.tags.some(a=>a.toLowerCase().includes(i))))}const Ae=12,je=6;function Ct({onSelectHuggy:e,onClose:i}){const[n,c]=g.useState(""),[a,r]=g.useState(Ae),[o,u]=g.useState(new Set),h=g.useRef(null),v=g.useMemo(()=>Ht(n),[n]),y=v.slice(0,a),H=a<v.length;g.useEffect(()=>{const w=h.current;if(!w||!H)return;const R=setTimeout(()=>{const{scrollHeight:X,clientHeight:J}=w;X<=J&&H&&r(U=>Math.min(U+je,v.length))},100);return()=>clearTimeout(R)},[a,H,v.length]),g.useEffect(()=>{const w=h.current;if(!w)return;const j=()=>{const{scrollTop:R,scrollHeight:X,clientHeight:J}=w;(R+J)/X>.8&&H&&r(Z=>Math.min(Z+je,v.length))};return w.addEventListener("scroll",j),()=>w.removeEventListener("scroll",j)},[H,v.length]);const N=w=>{e(w),i()},I=w=>{u(j=>{const R=new Set(j);return R.delete(w),R})},M=w=>{u(j=>new Set(j).add(w))},B=w=>{c(w.target.value),r(Ae)};return t.jsxs(t.Fragment,{children:[t.jsx("div",{className:"fixed inset-0 z-10",onClick:i}),t.jsxs("div",{className:"huggy-menu fixed left-[107px] top-[20px] z-20 w-[340px] bg-[#f8f9fa] border border-[#3faee6] rounded-[10px] flex flex-col overflow-hidden shadow-lg",onDragStart:w=>{w.preventDefault(),w.stopPropagation()},onDrag:w=>{w.preventDefault(),w.stopPropagation()},onDragOver:w=>{w.preventDefault(),w.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:h,className:"overflow-y-auto p-[5px]",style:{maxHeight:"430px"},children:v.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:y.map(w=>t.jsxs("button",{onClick:()=>N(w),onDragStart:j=>j.preventDefault(),className:"relative w-full aspect-square rounded-[5px] overflow-hidden hover:bg-[#e9ecef] transition-colors cursor-pointer border-none p-0",title:w.name,children:[o.has(w.id)&&t.jsx("div",{className:"absolute inset-0 skeleton-shimmer"}),t.jsx("img",{src:w.thumbnail,alt:w.name,className:`w-full h-full object-cover transition-opacity duration-200 ${o.has(w.id)?"opacity-0":"opacity-100"}`,loading:"lazy",onLoadStart:()=>M(w.id),onLoad:()=>I(w.id),onError:()=>I(w.id),draggable:!1})]},w.id))})}),t.jsx("div",{className:"border-t border-[#ebebeb] p-[5px] text-center",children:t.jsxs("p",{className:"text-[#999999] text-[12px]",children:["Showing ",y.length," of ",v.length," Huggys"]})})]})]})}function zt({onLayoutClick:e,onHuggyClick:i,onImageClick:n,onTextClick:c,onSelectLayout:a,onSelectHuggy:r,activeButton:o}){return t.jsx("div",{className:"fixed left-5 top-1/2 -translate-y-1/2 z-50",onDragStart:u=>{u.preventDefault(),u.stopPropagation()},onDrag:u=>{u.preventDefault(),u.stopPropagation()},onDragOver:u=>{u.preventDefault(),u.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 ${o==="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:o==="layout"})}),t.jsx("p",{className:`text-[14px] lg:text-[16px] font-normal ${o==="layout"?"text-white":"text-[#545865]"}`,children:"Layout"})]}),t.jsxs("button",{onClick:i,className:`flex flex-col items-center gap-[3px] px-[12px] lg:px-[13px] py-[5px] rounded-[7px] transition-colors ${o==="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(mt,{})}),t.jsx("p",{className:`text-[14px] lg:text-[16px] font-normal ${o==="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 ${o==="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(yt,{selected:o==="image"})}),t.jsx("p",{className:`text-[14px] lg:text-[16px] font-normal ${o==="image"?"text-white":"text-[#545865]"}`,children:"Image"})]}),t.jsxs("button",{onClick:c,className:`flex flex-col items-center gap-[3px] px-[12px] lg:px-[13px] py-[5px] rounded-[7px] transition-colors ${o==="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(wt,{selected:o==="text"})}),t.jsx("p",{className:`text-[14px] lg:text-[16px] font-normal ${o==="text"?"text-white":"text-[#545865]"}`,children:"Text"})]}),o==="layout"&&t.jsx(bt,{onSelectLayout:a}),o==="huggy"&&t.jsx(Ct,{onSelectHuggy:r,onClose:()=>i()}),o==="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 It={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 $t=e=>e.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase().trim(),he=(e,i)=>{const n=g.forwardRef(({color:c="currentColor",size:a=24,strokeWidth:r=2,absoluteStrokeWidth:o,className:u="",children:h,...v},y)=>g.createElement("svg",{ref:y,...It,width:a,height:a,stroke:c,strokeWidth:o?Number(r)*24/Number(a):r,className:["lucide",`lucide-${$t(e)}`,u].join(" "),...v},[...i.map(([H,N])=>g.createElement(H,N)),...Array.isArray(h)?h:[h]]));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 Lt=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 Et=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 Dt=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 Rt=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 Nt=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 Ft=he("X",[["path",{d:"M18 6 6 18",key:"1bl5f8"}],["path",{d:"m6 6 12 12",key:"d8bk6v"}]]);function Pt({onExport:e,isExporting:i=!1,currentLayout:n,canvasSize:c}){const a=w=>{switch(w){case"1200x675":return"Twitter";case"linkedin":return"LinkedIn";case"hf":return"HF";default:return"Twitter"}},r=()=>{const w=a(c);return n?`${n}_${w}`:`thumbnail_${w}`},[o,u]=g.useState(r()),[h,v]=g.useState(!1),[y,H]=g.useState(0),[N,I]=g.useState(!1),M=g.useRef(null);g.useEffect(()=>{u(r())},[n,c]),g.useEffect(()=>{M.current&&H(M.current.offsetWidth)},[o]);const B=()=>{i||e(o)};return t.jsxs("div",{className:"fixed top-[7px] lg:top-[10px] right-[20px] lg:right-[22px] z-50 p-[4px] lg:p-[5px] inline-flex items-stretch gap-[4px] lg:gap-[5px]",style:{backgroundColor:"#262933",borderRadius:"10px",boxShadow:"0px 0px 0px 0px rgba(0,0,0,0), 0px 0px 0px 0px rgba(0,0,0,0.03), 0px 0px 6.417px 0px rgba(0,0,0,0.09), 0px 0px 4.583px 0px rgba(0,0,0,0.15), 0px 0px 2.75px 0px rgba(0,0,0,0.17), 0px 16.847px 21.059px -4.212px rgba(14,13,13,0.1), 0px 8.423px 8.423px -4.212px rgba(0,0,0,0.04)",opacity:i?.5:1,transition:"all 0.2s ease-in-out",width:"fit-content"},children:[t.jsx("button",{onClick:B,disabled:i,onMouseEnter:()=>I(!0),onMouseLeave:()=>I(!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:N?"#0d6ecc":"#1888ff",cursor:i?"not-allowed":"pointer",transition:"all 0.2s ease-in-out",transform:N&&!i?"scale(1.05)":"scale(1)"},children:i?t.jsx(Rt,{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:M,className:"absolute invisible whitespace-pre text-[14px] lg:text-[16px] font-normal p-[4px] lg:p-[5px]",style:{fontFamily:"Inter, sans-serif"},children:o||"thumbnail_name"}),t.jsx("input",{type:"text",value:o,onChange:w=>u(w.target.value),onFocus:()=>v(!0),onBlur:()=>v(!1),disabled:i,placeholder:"thumbnail_name",className:"bg-white/5 text-white text-[14px] lg:text-[16px] font-normal outline-none border-none p-[4px] lg:p-[5px] rounded",style:{fontFamily:"Inter, sans-serif",width:`${y}px`,cursor:i?"not-allowed":"text",opacity:h?1:.5,transition:"all 0.2s ease-in-out",backgroundColor:h?"rgba(255, 255, 255, 0.1)":"rgba(255, 255, 255, 0.05)"},onClick:w=>w.stopPropagation()}),t.jsx("span",{className:"text-white text-[14px] lg:text-[16px] font-normal",style:{fontFamily:"Inter, sans-serif",opacity:h?1:.5,transition:"opacity 0.2s ease-in-out"},children:".png"})]})]})}function Tt({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 Ot={"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 Ot[e]}function Je(){return`${Date.now()}-${Math.random().toString(36).substr(2,9)}`}function Fe(e){return[...e].sort((i,n)=>i.zIndex-n.zIndex)}function Pe(e){return e.length===0?1:Math.max(...e.map(i=>i.zIndex))+1}function Wt(e,i,n){return`${n==="black"?"900":e?"bold":"normal"} ${i?"italic":""}`.trim()}function _t({object:e,isSelected:i,onSelect:n,onDragStart:c,onDragMove:a,onDragEnd:r,onTransformEnd:o,onEditingChange:u,onMouseEnter:h,onMouseLeave:v,shapeRef:y}){const H=g.useRef(null);g.useEffect(()=>{if(e.text===""&&i&&!e.isEditing){const M=setTimeout(()=>{u(e.id,!0)},100);return()=>clearTimeout(M)}},[e.text,i,e.isEditing,e.id,u]);const N=M=>{if(!e.isEditing){const B=M.target.getStage(),w=B==null?void 0:B.getPointerPosition();if(w){const j=M.target.getLayer(),R=(j==null?void 0:j.x())||0,X=(j==null?void 0:j.y())||0,J=w.x-R-e.x,U=w.y-X-e.y;u(e.id,!0,J,U)}else u(e.id,!0)}},I=e.fontSize;return t.jsx(rt,{id:e.id,ref:M=>{typeof y=="function"?y(M):y&&(y.current=M),H.current=M},x:e.x,y:e.y,width:e.width,height:e.height,text:e.text,fontSize:I,fontFamily:e.fontFamily,fill:e.fill,fontStyle:Wt(e.bold,e.italic,e.fontWeight),align:e.align||"left",verticalAlign:"top",rotation:e.rotation,padding:0,lineHeight:1,draggable:!0,onClick:M=>n(M),onTap:M=>n(M),onDblClick:N,onDblTap:N,onDragStart:c,onDragMove:a,onDragEnd:r,onTransformEnd:o,onMouseEnter:h,onMouseLeave:v,opacity:e.isEditing?0:1,listening:!e.isEditing})}function Bt({object:e,isSelected:i,onSelect:n,onDragStart:c,onDragMove:a,onDragEnd:r,onTransformEnd:o,onEditingChange:u,onMouseEnter:h,onMouseLeave:v,shapeRef:y}){switch(e.type){case"rect":return t.jsx(ge,{id:e.id,ref:H=>{typeof y=="function"?y(H):y&&(y.current=H)},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:H=>n(H),onTap:H=>n(H),onDragStart:c,onDragMove:a,onDragEnd:r,onTransformEnd:o,onMouseEnter:h,onMouseLeave:v});case"image":case"huggy":return t.jsx(At,{object:e,onSelect:n,onDragStart:c,onDragMove:a,onDragEnd:r,onTransformEnd:o,onMouseEnter:h,onMouseLeave:v,shapeRef:y});case"text":return t.jsx(_t,{object:e,isSelected:i,onSelect:n,onDragStart:c,onDragMove:a,onDragEnd:r,onTransformEnd:o,onEditingChange:u||(()=>{}),onMouseEnter:h,onMouseLeave:v,shapeRef:y});case"logoPlaceholder":return t.jsx(jt,{object:e,onSelect:n,onDragStart:c,onDragMove:a,onDragEnd:r,onTransformEnd:o,onMouseEnter:h,onMouseLeave:v,shapeRef:y});default:return null}}function At({object:e,onSelect:i,onDragStart:n,onDragMove:c,onDragEnd:a,onTransformEnd:r,onMouseEnter:o,onMouseLeave:u,shapeRef:h}){const[v,y]=g.useState(null),H=g.useRef(null),N=g.useRef(null);return g.useEffect(()=>{const I=new window.Image;return I.src=e.type==="image"||e.type==="huggy"?e.src:"",I.crossOrigin="anonymous",I.onload=()=>{y(I),H.current=I,setTimeout(()=>{if(N.current){const M=N.current.getLayer();M&&M.batchDraw()}},10)},()=>{H.current=null}},[e]),t.jsx(t.Fragment,{children:v&&t.jsx(Xe,{id:e.id,ref:I=>{N.current=I,typeof h=="function"?h(I):h&&(h.current=I)},x:e.x,y:e.y,width:e.width,height:e.height,image:v,rotation:e.rotation,draggable:!0,onClick:I=>i(I),onTap:I=>i(I),onDragStart:n,onDragMove:c,onDragEnd:a,onTransformEnd:r,onMouseEnter:o,onMouseLeave:u})})}function jt({object:e,onSelect:i,onDragStart:n,onDragMove:c,onDragEnd:a,onTransformEnd:r,onMouseEnter:o,onMouseLeave:u,shapeRef:h}){const v=g.useRef(null);return g.useEffect(()=>{v.current&&e.type==="logoPlaceholder"&&(v.current.cache(),v.current.filters([ue.Filters.Blur]),v.current.blurRadius(e.blurRadius))},[e]),e.type!=="logoPlaceholder"?null:t.jsx(ge,{id:e.id,ref:y=>{v.current=y,typeof h=="function"?h(y):h&&(h.current=y)},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:y=>i(y),onTap:y=>i(y),onDragStart:n,onDragMove:c,onDragEnd:a,onTransformEnd:r,onMouseEnter:o,onMouseLeave:u})}var de=g,Xt=function(i,n,c){const a=de.useRef("loading"),r=de.useRef(),[o,u]=de.useState(0),h=de.useRef(),v=de.useRef(),y=de.useRef();return(h.current!==i||v.current!==n||y.current!==c)&&(a.current="loading",r.current=void 0,h.current=i,v.current=n,y.current=c),de.useLayoutEffect(function(){if(!i)return;var H=document.createElement("img");function N(){H.decode().catch(()=>{}).finally(()=>{a.current="loaded",r.current=H,u(Math.random())})}function I(){a.current="failed",r.current=void 0,u(Math.random())}return H.addEventListener("load",N),H.addEventListener("error",I),n&&(H.crossOrigin=n),c&&(H.referrerPolicy=c),H.src=i,function(){H.removeEventListener("load",N),H.removeEventListener("error",I)}},[i,n,c]),[r.current,a.current]};const Yt=st(Xt);function qe(e,i,n){return`${n==="black"?"900":e?"bold":"normal"} ${i?"italic":""}`.trim()}function Kt(e,i,n,c,a,r,o){if(!e||i<=0)return 0;try{const u=new ue.Text({text:e,fontSize:n,fontFamily:c,fontStyle:qe(a,r,o)});let h=0,v=1/0;for(let y=0;y<=e.length;y++){const H=e.substring(0,y);u.text(H);const N=u.width(),I=Math.abs(N-i);I<v&&(v=I,h=y)}return u.destroy(),h}catch(u){return console.error("Error calculating cursor position:",u),e.length}}function Ut({canvasSize:e,bgColor:i,objects:n,selectedIds:c,onSelect:a,onObjectsChange:r,textCreationMode:o=!1,onTextCreate:u,stageRef:h,transformerRef:v}){const y=g.useRef(null),H=h||y,N=g.useRef(null),I=v||N,M=g.useRef(new Map),B=g.useRef(null),w=g.useRef(null),[j,R]=g.useState(!1),[X,J]=g.useState(null),U=g.useRef(null),Z=g.useRef(null),P=g.useRef(null),T=g.useRef(new Map),[C,G]=g.useState(null),[O,V]=g.useState(!1),[K,ne]=g.useState({vertical:!1,horizontal:!1}),[ie,ee]=g.useState({width:window.innerWidth,height:window.innerHeight}),b=me(e),D={x:(ie.width-b.width)/2,y:(ie.height-b.height)/2},Y=e==="1200x675"?"twitter":e==="linkedin"?"LinkedIn":"HF",be=i==="seriousLight"?`/assets/backgrounds/bg_sLight_${Y}.png`:i==="light"?`/assets/backgrounds/bg_Light_${Y}.png`:`/assets/backgrounds/bg_dark_${Y}.png`,[Se]=Yt(be,"anonymous");g.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)),R(!0),H.current){const s=H.current.getLayers()[0];s&&s.batchDraw()}}catch(s){console.error("Font loading error:",s),R(!0)}else R(!0)})()},[]),g.useEffect(()=>{const l=()=>{ee({width:window.innerWidth,height:window.innerHeight})};return window.addEventListener("resize",l),()=>window.removeEventListener("resize",l)},[]),g.useEffect(()=>{if(j&&H.current){const l=H.current.getLayers()[0];l&&l.batchDraw()}},[n,j]);const _=n.find(l=>l.type==="text"&&l.isEditing),Ie=Fe(n);g.useEffect(()=>{if(!I.current)return;const l=(s=0)=>{if(c.length>0){const d=c.map(m=>M.current.get(m)).filter(m=>m!==void 0);if(d.length>0){I.current.nodes(d),I.current.show(),I.current.forceUpdate();const m=I.current.getLayer();m&&m.batchDraw()}else if(s<10){const m=Math.min(50*(s+1),100);setTimeout(()=>l(s+1),m)}}else I.current.nodes([])};l(0)},[c,n]);const $e=(l,s=!1)=>{s?c.includes(l)?a(c.filter(d=>d!==l)):a([...c,l]):a([l])},re=g.useRef(null),Le=l=>{const s=l.target;re.current={x:s.x(),y:s.y()},c.length>1&&(T.current.clear(),c.forEach(m=>{const f=M.current.get(m);f&&T.current.set(m,{x:f.x(),y:f.y()})}))},Ee=l=>{const s=l.target,d=l.evt.shiftKey,m=c.length>1;if(d&&!m&&re.current){const f=re.current,p=s.x(),z=s.y(),E=Math.abs(p-f.x),W=Math.abs(z-f.y);E>W?s.y(f.y):s.x(f.x)}{const p=b.width/2,z=b.height/2;if(c.length>1){const W=c.map(A=>M.current.get(A)).filter(A=>A!==void 0);if(W.length===c.length&&W.length>1){let A=1/0,q=1/0,Q=-1/0,te=-1/0;W.forEach(ae=>{const Ze=ae.width(),Qe=ae.height(),et=ae.x(),tt=ae.y(),Te=et,Oe=tt,nt=Te+Ze,it=Oe+Qe;A=Math.min(A,Te),q=Math.min(q,Oe),Q=Math.max(Q,nt),te=Math.max(te,it)});const oe=Q-A,fe=te-q,ye=A+oe/2,xe=q+fe/2;let le=0,ce=0,we=!1,ve=!1;d||(Math.abs(ye-p)<10&&(le=p-ye,we=!0),Math.abs(xe-z)<10&&(ce=z-xe,ve=!0)),we||ve?(W.forEach(ae=>{le!==0&&ae.x(ae.x()+le),ce!==0&&ae.y(ae.y()+ce)}),ne({vertical:we,horizontal:ve})):ne({vertical:!1,horizontal:!1})}}else{const W=s.width(),A=s.height(),q=s.x(),Q=s.y(),te=q+W/2,oe=Q+A/2;let fe=q,ye=Q,xe=!1,le=!1,ce=!1;if(d&&re.current){const we=Math.abs(q-re.current.x),ve=Math.abs(Q-re.current.y);ce=we>ve}Math.abs(te-p)<10&&(!d||ce)&&(fe=p-W/2,xe=!0),Math.abs(oe-z)<10&&(!d||!ce)&&(ye=z-A/2,le=!0),xe||le?(s.x(fe),s.y(ye),ne({vertical:xe,horizontal:le})):ne({vertical:!1,horizontal:!1})}}},pe=l=>s=>{const d=s.target;if(re.current=null,T.current.clear(),ne({vertical:!1,horizontal:!1}),c.length>1&&c.includes(l))P.current&&clearTimeout(P.current),P.current=setTimeout(()=>{const f=n.map(p=>{if(c.includes(p.id)){const z=M.current.get(p.id);if(z){const E=p.isFromLayout?!0:p.isModified;return{...p,x:z.x(),y:z.y(),isModified:E}}}return p});r(f),P.current=null},10);else{const f=n.map(p=>{if(p.id===l){const z=p.isFromLayout?!0:p.isModified;return{...p,x:d.x(),y:d.y(),isModified:z}}return p});r(f)}},Me=l=>s=>{const d=s.target,m=d.scaleX(),f=d.scaleY();if(c.length>1)Z.current&&clearTimeout(Z.current),Z.current=setTimeout(()=>{const z=n.map(E=>{if(c.includes(E.id)){const W=M.current.get(E.id);if(W){const A=W.scaleX(),q=W.scaleY();W.scaleX(1),W.scaleY(1);const Q=E.isFromLayout?!0:E.isModified,te={...E,x:W.x(),y:W.y(),width:Math.max(5,W.width()*A),height:Math.max(5,W.height()*q),rotation:W.rotation(),isModified:Q};if(E.type==="text"){const oe=Math.min(A,q),fe=Math.max(10,E.fontSize*oe);return{...te,fontSize:fe}}return te}}return E});r(z),Z.current=null},10);else{d.scaleX(1),d.scaleY(1);const z=n.map(E=>{if(E.id===l){const W=E.isFromLayout?!0:E.isModified,A={...E,x:d.x(),y:d.y(),width:Math.max(5,d.width()*m),height:Math.max(5,d.height()*f),rotation:d.rotation(),isModified:W};if(E.type==="text"){const q=Math.min(m,f),Q=Math.max(10,E.fontSize*q);return{...A,fontSize:Q}}return A}return E});r(z)}},ke=(l,s,d,m)=>{const f=n.map(p=>{if(p.id===l&&p.type==="text"){const E=(p.width!==d||p.height!==m)&&p.isFromLayout?!0:p.isModified;return{...p,text:s,width:d,height:m,isModified:E}}return p});r(f)},He=(l,s,d,m)=>{if(!s){const p=n.find(z=>z.id===l&&z.type==="text");if(p&&p.text.trim()===""){const z=n.filter(E=>E.id!==l);r(z);return}}const f=n.map(p=>p.id===l&&p.type==="text"?{...p,isEditing:s}:p);if(r(f),s&&d!==void 0&&m!==void 0){const p=n.find(z=>z.id===l&&z.type==="text");if(p){const z=Kt(p.text,d,p.fontSize,p.fontFamily,p.bold,p.italic,p.fontWeight);w.current=z}}else s&&(w.current=null)};g.useEffect(()=>{if(_&&B.current)if(B.current.focus(),w.current!==null){const l=w.current;B.current.setSelectionRange(l,l),w.current=null}else{const l=B.current.value.length;B.current.setSelectionRange(l,l)}},[_==null?void 0:_.id]);const De=l=>{if(!_)return;const s=l.target.value;try{const d=new ue.Text({text:s||"M",fontSize:_.fontSize,fontFamily:_.fontFamily,fontStyle:qe(_.bold,_.italic,_.fontWeight)}),m=Math.max(100,d.width()+4),f=Math.max(40,d.height()+2);d.destroy(),ke(_.id,s,m,f)}catch(d){console.error("Error in textarea change:",d),ke(_.id,s,_.width,_.height)}},Ce=()=>{_&&He(_.id,!1)},x=_?(()=>{if(!_||!H.current)return{top:0,left:0};const d=H.current.container().getBoundingClientRect(),m=_.fontSize*.05;return{top:d.top+_.y+D.y-m,left:d.left+_.x+D.x}})():{top:0,left:0},k=l=>{if(l.target!==l.target.getStage()||o)return;const s=l.target.getStage(),d=s==null?void 0:s.getPointerPosition();if(d){const m={x:d.x-D.x,y:d.y-D.y};U.current=m,J({x:m.x,y:m.y,width:0,height:0})}},L=l=>{if(!U.current)return;const s=l.target.getStage(),d=s==null?void 0:s.getPointerPosition();if(d){const m={x:d.x-D.x,y:d.y-D.y},f=U.current;J({x:Math.min(f.x,m.x),y:Math.min(f.y,m.y),width:Math.abs(m.x-f.x),height:Math.abs(m.y-f.y)})}},$=l=>{if(!U.current)return;if(X&&(X.width>5||X.height>5)){const d=[];n.forEach(m=>{const f={x:m.x,y:m.y,width:m.width,height:m.height};!(X.x>f.x+f.width||X.x+X.width<f.x||X.y>f.y+f.height||X.y+X.height<f.y)&&d.push(m.id)}),d.length>0?a(d):a([])}else l.target===l.target.getStage()&&a([]);U.current=null,J(null)};return t.jsxs("div",{style:{position:"fixed",top:0,left:0,width:"100vw",height:"100vh",pointerEvents:"none"},children:[t.jsx("div",{onMouseEnter:()=>V(!0),onMouseLeave:()=>V(!1),style:{position:"absolute",left:D.x,top:D.y,width:b.width,height:b.height,border:"1px solid #EBEBEB",borderRadius:O?"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(at,{ref:H,width:ie.width,height:ie.height,onMouseDown:k,onMouseMove:L,onMouseUp:$,onClick:l=>{if(l.target===l.target.getStage()&&o&&u){const s=l.target.getStage(),d=s==null?void 0:s.getPointerPosition();d&&u(d.x-D.x,d.y-D.y)}},style:{cursor:o?"text":"default",pointerEvents:"auto"},children:t.jsxs(lt,{x:D.x,y:D.y,children:[Se?t.jsx(Xe,{x:0,y:0,width:b.width,height:b.height,image:Se,listening:!1}):t.jsx(ge,{x:0,y:0,width:b.width,height:b.height,fill:"#ffffff",listening:!1}),Ie.map(l=>t.jsx(Bt,{object:l,isSelected:c.includes(l.id),onSelect:s=>{var m;const d=((m=s==null?void 0:s.evt)==null?void 0:m.shiftKey)||!1;$e(l.id,d)},onDragStart:Le,onDragMove:Ee,onDragEnd:pe(l.id),onTransformEnd:Me(l.id),onEditingChange:He,onMouseEnter:()=>G(l.id),onMouseLeave:()=>G(null),shapeRef:s=>{s?M.current.set(l.id,s):M.current.delete(l.id)}},l.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}),K.vertical&&t.jsx(ge,{x:b.width/2,y:0,width:1,height:b.height,fill:"#FF6B6B",listening:!1,opacity:.8}),K.horizontal&&t.jsx(ge,{x:0,y:b.height/2,width:b.width,height:1,fill:"#FF6B6B",listening:!1,opacity:.8}),C&&!c.includes(C)&&(()=>{const l=M.current.get(C);if(l){const s=l.getClientRect();return t.jsx(ge,{x:s.x-D.x,y:s.y-D.y,width:s.width,height:s.height,stroke:"#3faee6",strokeWidth:1,dash:[4,4],listening:!1,opacity:.5})}return null})(),t.jsx(ct,{ref:I,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:(l,s)=>s.width<5||s.height<5?l:s})]})}),_&&t.jsx("textarea",{ref:B,value:_.text,onChange:De,onBlur:Ce,onKeyDown:l=>{l.key==="Escape"&&Ce()},style:{position:"fixed",top:`${x.top}px`,left:`${x.left}px`,width:`${_.width}px`,height:`${_.height}px`,fontSize:`${_.fontSize}px`,fontFamily:_.fontFamily,fontWeight:_.fontWeight==="black"?900:_.bold?700:400,fontStyle:_.italic?"italic":"normal",textAlign:_.align||"left",color:_.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 Jt(){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 Vt({bgColor:e,onChange:i}){const[n,c]=g.useState(null);return t.jsxs("div",{className:"flex items-center gap-[9px] lg:gap-[10px]",children:[t.jsx("span",{className:"text-[#999999] text-[14px] lg:text-[16px] font-normal",style:{fontFamily:"Inter, sans-serif"},children:"Background color:"}),t.jsxs("div",{className:"flex items-center gap-[4.5px] lg:gap-[5px] h-[36px] lg:h-[40px] p-[3.6px] lg:p-[4px] bg-[#EDF0F2] border border-[#F8F9FA] rounded-[99px]",children:[t.jsx("button",{onClick:()=>i("seriousLight"),onMouseEnter:()=>c("seriousLight"),onMouseLeave:()=>c(null),className:"flex items-center justify-center w-[34px] lg:w-[38px] h-[29px] lg:h-[32px] p-[9px] lg:p-[10px] border-none rounded-[99px] cursor-pointer transition-[background] duration-150 ease-in-out",style:{background:e==="seriousLight"?"#DEE2E7":n==="seriousLight"?"#f0f2f4":"transparent"},title:"Serious Light background",children:t.jsx(Gt,{})}),t.jsx("button",{onClick:()=>i("light"),onMouseEnter:()=>c("light"),onMouseLeave:()=>c(null),className:"flex items-center justify-center w-[34px] lg:w-[38px] h-[29px] lg:h-[32px] p-[9px] lg:p-[10px] border-none rounded-[99px] cursor-pointer transition-[background] duration-150 ease-in-out",style:{background:e==="light"?"#DEE2E7":n==="light"?"#f0f2f4":"transparent"},title:"Light background with gradients",children:t.jsx(Jt,{})}),t.jsx("button",{onClick:()=>i("dark"),onMouseEnter:()=>c("dark"),onMouseLeave:()=>c(null),className:"flex items-center justify-center w-[34px] lg:w-[38px] h-[29px] lg:h-[32px] p-[9px] lg:p-[10px] border-none rounded-[99px] cursor-pointer transition-[background] duration-150 ease-in-out",style:{background:e==="dark"?"#DEE2E7":n==="dark"?"#f0f2f4":"transparent"},title:"Dark background",children:t.jsx(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 Qt({selected:e=!1}){const i=e?"/assets/sizes/Property 1=selected-1.svg":"/assets/sizes/Property 1=Default-1.svg";return t.jsx("div",{style:{position:"relative",width:"16px",height:"16px"},children:t.jsx("img",{alt:"LinkedIn",style:{display:"block",width:"100%",height:"100%"},src:i})})}function en({selected:e=!1}){const i=e?"/assets/sizes/Property 1=selected-2.svg":"/assets/sizes/Property 1=Default-2.svg";return t.jsx("div",{style:{position:"relative",width:"16px",height:"16px"},children:t.jsx("img",{alt:"HF",style:{display:"block",width:"100%",height:"100%"},src:i})})}const tn={"1200x675":"1200x675",linkedin:"1200x627",hf:"1160x580"};function nn({canvasSize:e,onChange:i}){const[n,c]=g.useState(null),[a,r]=g.useState(window.innerWidth>=1024);g.useEffect(()=>{const u=()=>{r(window.innerWidth>=1024)};return window.addEventListener("resize",u),()=>window.removeEventListener("resize",u)},[]);const o=(u,h,v)=>{const y=e===u,H=n===u;return t.jsxs("button",{onClick:()=>i(u),onMouseEnter:()=>c(u),onMouseLeave:()=>c(null),className:"flex items-center border-none rounded-[99px] cursor-pointer overflow-hidden transition-[background,padding,min-width] duration-150 ease-in-out",style:{justifyContent:y?"flex-start":"center",gap:"4.5px",height:a?"32px":"29px",minWidth:a?"38px":"34px",paddingLeft:y?a?"10px":"9px":a?"9px":"8px",paddingRight:y?a?"10px":"9px":a?"9px":"8px",background:y?"#DEE2E7":H?"#f0f2f4":"transparent"},title:v,children:[t.jsx(h,{selected:y}),t.jsx("span",{className:"whitespace-nowrap overflow-hidden transition-[opacity,transform] duration-150 ease-in-out",style:{color:"#32343d",fontSize:a?"16px":"14px",fontWeight:"normal",fontFamily:"Inter, sans-serif",opacity:y?.6:0,transform:y?"translateX(0)":"translateX(-10px)",width:y?"auto":"0"},children:tn[u]})]})};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:[o("1200x675",Zt,"1200×675 (Default)"),o("linkedin",Qt,"LinkedIn size (1200x627)"),o("hf",en,"HF custom size (1160x580)")]})]})}function on({canvasSize:e,bgColor:i,onCanvasSizeChange:n,onBgColorChange:c}){const[a,r]=g.useState({width:window.innerWidth,height:window.innerHeight});g.useEffect(()=>{const y=()=>{r({width:window.innerWidth,height:window.innerHeight})};return window.addEventListener("resize",y),()=>window.removeEventListener("resize",y)},[]);const o=me(e),u={x:(a.width-o.width)/2,y:(a.height-o.height)/2},v=u.y-40-20;return t.jsxs("div",{style:{position:"fixed",top:`${v}px`,left:`${u.x}px`,width:`${o.width}px`,display:"flex",alignItems:"center",justifyContent:"space-between",transition:"all 0.15s ease-in-out",zIndex:1e3,pointerEvents:"auto"},children:[t.jsx(Vt,{bgColor:i,onChange:c}),t.jsx(nn,{canvasSize:e,onChange:n})]})}function sn({onKeep:e,onReplace:i,onCancel:n}){return t.jsx("div",{className:"fixed inset-0 z-[100] flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm",onClick:n,children:t.jsxs("div",{className:"bg-[#2b2d31] rounded-[12px] shadow-2xl max-w-[480px] w-full mx-4 overflow-hidden",onClick:c=>c.stopPropagation(),children:[t.jsxs("div",{className:"flex items-center justify-between px-6 py-4 border-b border-[#3e4044]",children:[t.jsx("h2",{className:"text-white text-[18px] font-semibold",children:"Switch Layout"}),t.jsx("button",{onClick:n,className:"text-gray-400 hover:text-white transition-colors p-1 hover:bg-[#3e4044] rounded",children:t.jsx(Ft,{size:20})})]}),t.jsxs("div",{className:"px-6 py-5",children:[t.jsx("p",{className:"text-gray-300 text-[15px] leading-relaxed mb-4",children:"You have custom objects on the canvas. What would you like to do?"}),t.jsxs("div",{className:"space-y-3",children:[t.jsx("div",{className:"bg-[#1e1f22] rounded-[8px] p-4 border border-[#3e4044]",children:t.jsxs("div",{className:"flex items-start gap-3",children:[t.jsx("div",{className:"w-5 h-5 rounded-full border-2 border-[#5865f2] flex-shrink-0 mt-0.5"}),t.jsxs("div",{children:[t.jsx("p",{className:"text-white font-medium text-[14px] mb-1",children:"Keep my objects"}),t.jsx("p",{className:"text-gray-400 text-[13px]",children:"Add the new layout objects alongside your existing work"})]})]})}),t.jsx("div",{className:"bg-[#1e1f22] rounded-[8px] p-4 border border-[#3e4044]",children:t.jsxs("div",{className:"flex items-start gap-3",children:[t.jsx("div",{className:"w-5 h-5 rounded-full border-2 border-[#ed4245] flex-shrink-0 mt-0.5"}),t.jsxs("div",{children:[t.jsx("p",{className:"text-white font-medium text-[14px] mb-1",children:"Replace everything"}),t.jsx("p",{className:"text-gray-400 text-[13px]",children:"Remove all objects and load a fresh layout"})]})]})})]})]}),t.jsxs("div",{className:"px-6 py-4 bg-[#1e1f22] flex items-center justify-end gap-3",children:[t.jsx("button",{onClick:n,className:"px-4 py-2 rounded-[6px] text-white text-[14px] font-medium hover:bg-[#3e4044] transition-colors",children:"Cancel"}),t.jsx("button",{onClick:i,className:"px-4 py-2 rounded-[6px] bg-[#ed4245] text-white text-[14px] font-medium hover:bg-[#d13438] transition-colors",children:"Replace"}),t.jsx("button",{onClick:e,className:"px-4 py-2 rounded-[6px] bg-[#5865f2] text-white text-[14px] font-medium hover:bg-[#4752c4] transition-colors",children:"Keep"})]})]})})}function Ne(e){const i=parseInt(e.slice(1,3),16)/255,n=parseInt(e.slice(3,5),16)/255,c=parseInt(e.slice(5,7),16)/255,a=Math.max(i,n,c),r=Math.min(i,n,c),o=a-r;let u=0;o!==0&&(a===i?u=((n-c)/o+(n<c?6:0))/6:a===n?u=((c-i)/o+2)/6:u=((i-n)/o+4)/6);const h=a===0?0:o/a,v=a;return{h:u*360,s:h*100,v:v*100}}function rn(e,i,n){e=e/360,i=i/100,n=n/100;const c=Math.floor(e*6),a=e*6-c,r=n*(1-i),o=n*(1-a*i),u=n*(1-(1-a)*i);let h=0,v=0,y=0;switch(c%6){case 0:h=n,v=u,y=r;break;case 1:h=o,v=n,y=r;break;case 2:h=r,v=n,y=u;break;case 3:h=r,v=o,y=n;break;case 4:h=u,v=r,y=n;break;case 5:h=n,v=r,y=o;break}const H=N=>{const I=Math.round(N*255).toString(16);return I.length===1?"0"+I:I};return`#${H(h)}${H(v)}${H(y)}`}function an({color:e,onChange:i}){const n=Ne(e),[c,a]=g.useState(n.h),[r,o]=g.useState(n.s),[u,h]=g.useState(n.v),[v,y]=g.useState(e.toUpperCase()),H=g.useRef(null),N=g.useRef(null),I=g.useRef(null),[M,B]=g.useState(!1),[w,j]=g.useState(!1),[R,X]=g.useState(!1),[J,U]=g.useState(!1);g.useEffect(()=>{if(!J){const b=rn(c,r,u);y(b.toUpperCase()),i(b)}},[c,r,u,i,J]);const Z=b=>{B(!0),P(b)},P=b=>{if(!H.current)return;const D=H.current.getBoundingClientRect(),Y=Math.max(0,Math.min(b.clientX-D.left,D.width)),se=Math.max(0,Math.min(b.clientY-D.top,D.height));o(Y/D.width*100),h(100-se/D.height*100)},T=b=>{j(!0),C(b)},C=b=>{if(!N.current)return;const D=N.current.getBoundingClientRect(),Y=Math.max(0,Math.min(b.clientX-D.left,D.width));a(Y/D.width*360)},G=b=>{X(!0),O(b)},O=b=>{if(!I.current)return;const D=I.current.getBoundingClientRect(),Y=Math.max(0,Math.min(b.clientX-D.left,D.width));o(Y/D.width*100)};g.useEffect(()=>{const b=Y=>{M&&P(Y),w&&C(Y),R&&O(Y)},D=()=>{B(!1),j(!1),X(!1)};if(M||w||R)return document.addEventListener("mousemove",b),document.addEventListener("mouseup",D),()=>{document.removeEventListener("mousemove",b),document.removeEventListener("mouseup",D)}},[M,w,R]);const V=b=>{U(!0);let D=b.target.value.toUpperCase();if(D.startsWith("#")||(D="#"+D),y(D),/^#[0-9A-F]{6}$/i.test(D)){const Y=Ne(D);a(Y.h),o(Y.s),h(Y.v),i(D),U(!1)}},K=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=Ne(Y);a(se.h),o(se.s),h(se.v),y(Y.toUpperCase()),i(Y)}catch{}},ne=r/100*100,ie=(1-u/100)*100,ee=c/360*100;return t.jsxs("div",{onMouseDown:b=>b.stopPropagation(),onClick:b=>b.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:H,onMouseDown:Z,style:{position:"relative",width:"100%",height:"112px",borderRadius:"8px",marginBottom:"16px",cursor:"crosshair",background:`
+            linear-gradient(to bottom, transparent, black),
+            linear-gradient(to right, white, transparent),
+            hsl(${c}, 100%, 50%)
+          `},children:t.jsx("div",{style:{position:"absolute",left:`${ne}%`,top:`${ie}%`,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:K,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(Nt,{size:14,color:"white"})}),t.jsxs("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:"8px"},children:[t.jsx("div",{ref:N,onMouseDown:T,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:I,onMouseDown:G,style:{position:"relative",width:"100%",height:"12px",borderRadius:"100px",background:`linear-gradient(to right, white, hsl(${c}, 100%, 50%))`,cursor:"pointer"},children:t.jsx("div",{style:{position:"absolute",left:`${r}%`,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:v,onChange:V,onBlur:()=>U(!1),onKeyDown:b=>b.stopPropagation(),onKeyUp:b=>b.stopPropagation(),onKeyPress:b=>b.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:b=>b.stopPropagation(),onMouseDown:b=>b.stopPropagation()})]})]})}function ln({fontFamily:e,fill:i,bold:n,italic:c,canvasWidth:a,canvasHeight:r,scale:o=1,onFontFamilyChange:u,onFillChange:h,onBoldToggle:v,onItalicToggle:y,fontWeight:H="normal"}){const[N,I]=g.useState(!1),[M,B]=g.useState(!1),[w,j]=g.useState("down"),[R,X]=g.useState(window.innerWidth>=1024),J=g.useRef(null),U=["Inter","IBM Plex Mono","Bison","Source Sans 3"],Z={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}},P=Z[e].bold,T=Z[e].italic,C=Z[e].black;g.useEffect(()=>{const b=()=>{X(window.innerWidth>=1024)};return window.addEventListener("resize",b),()=>window.removeEventListener("resize",b)},[]),g.useEffect(()=>{if(N&&J.current){const b=J.current.getBoundingClientRect(),D=U.length*40+8,Y=window.innerHeight-b.bottom,se=b.top;Y<D&&se>Y?j("up"):j("down")}},[N,U.length]);const G=a*o,O=r*o,V=80*o,K=`calc((100vw - ${G}px) / 2)`,ne=`calc((100vh - ${O}px - ${V}px) / 2 - 10px - 44px)`,ie=R?"4px":"3.6px",ee=R?"4px":"3.6px";return t.jsx("div",{className:"text-toolbar",onMouseDown:b=>{b.stopPropagation()},onClick:b=>{b.stopPropagation()},style:{position:"fixed",right:K,bottom:ne,zIndex:100,backgroundColor:"#27272A",borderRadius:R?"8px":"7px",padding:ie,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:J,onClick:()=>{I(!N),B(!1)},style:{display:"flex",alignItems:"center",gap:R?"20px":"18px",padding:R?"8px":"7px",backgroundColor:"rgba(255, 255, 255, 0.05)",border:"none",borderRadius:"4px",color:"white",fontSize:R?"16px":"14px",fontFamily:"Source Sans Pro, sans-serif",cursor:"pointer",whiteSpace:"nowrap"},children:[e,t.jsx(Et,{size:R?14:13,style:{transform:N&&w==="up"?"rotate(180deg)":"none",transition:"transform 0.15s ease-in-out"}})]}),N&&t.jsx("div",{style:{position:"absolute",...w==="down"?{top:R?"calc(100% + 4px)":"calc(100% + 3.6px)"}:{bottom:R?"calc(100% + 4px)":"calc(100% + 3.6px)"},left:0,backgroundColor:"#27272A",border:"1px solid #09090B",borderRadius:R?"8px":"7px",padding:R?"4px":"3.6px",minWidth:R?"160px":"144px",zIndex:1e3},children:U.map(b=>t.jsx("button",{onClick:()=>{u(b),I(!1)},style:{display:"block",width:"100%",padding:R?"8px 12px":"7px 11px",backgroundColor:e===b?"rgba(255, 255, 255, 0.1)":"transparent",border:"none",borderRadius:"4px",color:"white",fontSize:R?"14px":"13px",fontFamily:b,textAlign:"left",cursor:"pointer"},onMouseEnter:D=>{e!==b&&(D.currentTarget.style.backgroundColor="rgba(255, 255, 255, 0.05)")},onMouseLeave:D=>{e!==b&&(D.currentTarget.style.backgroundColor="transparent")},children:b},b))})]}),t.jsx("div",{style:{width:"1px",height:R?"18px":"16px",backgroundColor:"rgba(255, 255, 255, 0.2)"}}),t.jsxs("div",{style:{position:"relative"},children:[t.jsx("button",{onClick:()=>{B(!M),I(!1)},style:{display:"flex",alignItems:"center",justifyContent:"center",padding:R?"10px":"9px",backgroundColor:"transparent",border:"none",borderRadius:"99px",cursor:"pointer"},children:t.jsx("div",{style:{width:R?"16px":"14px",height:R?"16px":"14px",borderRadius:"999px",backgroundColor:i,border:"1px solid #e5e9ed"}})}),M&&t.jsx(an,{color:i,onChange:h})]}),t.jsxs("button",{onClick:P?()=>{v(),I(!1),B(!1)}:void 0,disabled:!P,style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",padding:R?"8px":"7px",backgroundColor:n||H==="black"?"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:R?20:18}),C&&H==="black"&&t.jsx("div",{style:{position:"absolute",bottom:"2px",right:"2px",width:R?"6px":"5px",height:R?"6px":"5px",borderRadius:"50%",backgroundColor:"#3faee6"}})]}),t.jsx("button",{onClick:T?()=>{y(),I(!1),B(!1)}:void 0,disabled:!T,style:{display:"flex",alignItems:"center",justifyContent:"center",padding:R?"8px":"7px",backgroundColor:c?"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(Dt,{size:R?20:18})})]})})}const cn=50;function dn(){const[e,i]=g.useState([]),[n,c]=g.useState([]),[a,r]=g.useState("1200x675"),[o,u]=g.useState("seriousLight"),h=g.useRef([[]]),v=g.useRef(0),y=g.useRef(!1),H=g.useRef(!1),N=g.useCallback(P=>{i(P),!y.current&&setTimeout(()=>{if(H.current)return;v.current<h.current.length-1&&(h.current=h.current.slice(0,v.current+1));const T=V=>V.map(K=>{if(K.type==="text"){const{isEditing:ne,...ie}=K;return ie}return K}),C=T(P),G=h.current[v.current]?T(h.current[v.current]):[];if(JSON.stringify(G)!==JSON.stringify(C)){const V=JSON.parse(JSON.stringify(C));console.log("Recording history:",{textObjects:V.filter(K=>K.type==="text").map(K=>({text:K.text,width:K.width,height:K.height,fontSize:K.fontSize}))}),h.current.push(V),v.current++,h.current.length>cn&&(h.current.shift(),v.current--)}},0)},[]),I=g.useCallback(()=>{if(v.current>0){y.current=!0,v.current--;const T=JSON.parse(JSON.stringify(h.current[v.current])).map(C=>{if(C.type==="text"&&C.text)try{const G=require("konva").default,O=new G.Text({text:C.text,fontSize:C.fontSize,fontFamily:C.fontFamily,fontStyle:`${C.bold?"bold":"normal"} ${C.italic?"italic":""}`}),V=Math.max(100,O.width()+20),K=Math.max(40,O.height()+10);return console.log("UNDO - Recalculating text:",{text:C.text,oldWidth:C.width,oldHeight:C.height,newWidth:V,newHeight:K,fontSize:C.fontSize,fontFamily:C.fontFamily}),O.destroy(),{...C,width:V,height:K,isEditing:!1}}catch(G){return console.error("Error recalculating text dimensions:",G),C}return C});i(T),c([]),setTimeout(()=>{y.current=!1},0)}},[]),M=g.useCallback(()=>{if(v.current<h.current.length-1){y.current=!0,v.current++;const T=JSON.parse(JSON.stringify(h.current[v.current])).map(C=>{if(C.type==="text"&&C.text)try{const G=require("konva").default,O=new G.Text({text:C.text,fontSize:C.fontSize,fontFamily:C.fontFamily,fontStyle:`${C.bold?"bold":"normal"} ${C.italic?"italic":""}`}),V=Math.max(100,O.width()+20),K=Math.max(40,O.height()+10);return O.destroy(),{...C,width:V,height:K,isEditing:!1}}catch(G){return console.error("Error recalculating text dimensions:",G),C}return C});i(T),c([]),setTimeout(()=>{y.current=!1},0)}},[]),B=P=>{const T={...P,id:Je(),zIndex:Pe(e)};N([...e,T]),c([T.id])},w=()=>{n.length>0&&(N(e.filter(P=>!n.includes(P.id))),c([]))},j=P=>{n.length>0&&N(e.map(T=>n.includes(T.id)?{...T,...P}:T))},R=P=>{const T=Pe(e);N(e.map(C=>C.id===P?{...C,zIndex:T}:C))},X=P=>{const T=Math.min(...e.map(C=>C.zIndex));N(e.map(C=>C.id===P?{...C,zIndex:T-1}:C))},J=P=>{const T=e.find(O=>O.id===P);if(!T)return;const C=e.filter(O=>O.zIndex>T.zIndex);if(C.length===0)return;const G=Math.min(...C.map(O=>O.zIndex));N(e.map(O=>O.id===P?{...O,zIndex:G+.5}:O))},U=P=>{const T=e.find(O=>O.id===P);if(!T)return;const C=e.filter(O=>O.zIndex<T.zIndex);if(C.length===0)return;const G=Math.max(...C.map(O=>O.zIndex));N(e.map(O=>O.id===P?{...O,zIndex:G-.5}:O))},Z=g.useCallback(P=>{H.current=P},[]);return{objects:e,selectedIds:n,canvasSize:a,bgColor:o,setObjects:N,setSelectedIds:c,setCanvasSize:r,setBgColor:u,addObject:B,deleteSelected:w,updateSelected:j,bringToFront:R,sendToBack:X,moveForward:J,moveBackward:U,undo:I,redo:M,setSkipHistoryRecording:Z}}function gn(e,i){const[n,c]=g.useState(1),[a,r]=g.useState(!0);return g.useEffect(()=>{const o=()=>{const u=window.innerWidth,h=window.innerHeight,v=187,y=200,H=u-v,N=h-y,I=H/e,M=N/i,B=Math.min(I,M,1),w=B>=1;c(B),r(w)};return o(),window.addEventListener("resize",o),()=>{window.removeEventListener("resize",o)}},[e,i]),{scale:n,canFit:a}}function Ve(e,i,n,c,a){const r=e.map(o=>{const u=a?"        ":"      ";let h=[`${u}{`,`${u}  id: '${o.id}',`,`${u}  type: '${o.type}',`,`${u}  x: ${o.x},`,`${u}  y: ${o.y},`,`${u}  width: ${o.width},`,`${u}  height: ${o.height},`,`${u}  rotation: ${o.rotation},`,`${u}  zIndex: ${o.zIndex},`];return o.type==="text"?(h.push(`${u}  text: '${o.text}',`),h.push(`${u}  fontSize: ${o.fontSize},`),h.push(`${u}  fontFamily: '${o.fontFamily}',`),h.push(`${u}  fill: '${o.fill}',`),h.push(`${u}  bold: ${o.bold},`),h.push(`${u}  italic: ${o.italic},`),o.align&&h.push(`${u}  align: '${o.align}',`),o.fontWeight&&o.fontWeight!=="normal"&&h.push(`${u}  fontWeight: '${o.fontWeight}',`)):o.type==="image"||o.type==="huggy"?(h.push(`${u}  src: '${o.src}',`),h.push(`${u}  name: '${o.name||"Untitled"}',`)):o.type==="rect"&&(h.push(`${u}  fill: '${o.fill}',`),o.stroke&&h.push(`${u}  stroke: '${o.stroke}',`),o.strokeWidth!==void 0&&h.push(`${u}  strokeWidth: ${o.strokeWidth},`)),h.push(`${u}},`),h.join(`
+`)}).join(`
+`);return a?`      ${a}: [
+${r}
+      ],`:`  ${i}: {
+    id: '${i}',
+    name: '${n}',
+    thumbnail: '${c}',
+    objects: [
+${r}
+    ],
+  },`}function un(e){console.group("📐 Canvas Objects Export"),console.log(`Total objects: ${e.length}`),console.log("Object types:",e.map(n=>n.type).join(", ")),console.group("🔍 Individual Objects"),e.forEach((n,c)=>{console.group(`${c+1}. ${n.type.toUpperCase()}: ${n.id}`),console.log("Position:",{x:n.x,y:n.y}),console.log("Size:",{width:n.width,height:n.height}),console.log("Rotation:",n.rotation),console.log("Z-Index:",n.zIndex),n.type==="text"?(console.log("Text:",n.text),console.log("Font:",`${n.fontSize}px ${n.fontFamily}`),console.log("Color:",n.fill),console.log("Styles:",{bold:n.bold,italic:n.italic,fontWeight:n.fontWeight})):n.type==="image"||n.type==="huggy"?(console.log("Source:",n.src),console.log("Name:",n.name)):n.type==="rect"&&(console.log("Fill:",n.fill),n.stroke&&console.log("Stroke:",n.stroke)),console.log("Full object:",n),console.groupEnd()}),console.groupEnd(),console.group("📋 Ready for layouts.ts"),console.log("Use the following format:");const i=Ve(e,"myNewLayout","My New Layout","/assets/layouts/myNewLayout_thumbnail.png");console.log(i),console.groupEnd(),console.groupEnd()}function hn(e){return JSON.stringify(e,null,2)}function pn(){const{objects:e,selectedIds:i,canvasSize:n,bgColor:c,setObjects:a,setSelectedIds:r,setCanvasSize:o,setBgColor:u,addObject:h,deleteSelected:v,undo:y,redo:H,setSkipHistoryRecording:N}=dn(),[I,M]=g.useState(!1),[B,w]=g.useState(null),[j,R]=g.useState(!1),[X,J]=g.useState(!1),[U,Z]=g.useState(!1),[P,T]=g.useState(null),[C,G]=g.useState(null),O=g.useRef(null),V=g.useRef(null),K=g.useRef(null),ne=S=>{const x=S.some(k=>k.type==="text"&&k.isEditing);N(x),a(S)},ie=S=>{o(S)},ee=me(n),{scale:b}=gn(ee.width,ee.height),D=()=>{console.log("Layout clicked"),w(B==="layout"?null:"layout"),M(!1)},Y=()=>{console.log("Huggy clicked"),w(B==="huggy"?null:"huggy"),M(!1)},se=()=>{var S;console.log("Image clicked"),(S=O.current)==null||S.click()},be=()=>{B==="text"?(M(!1),w(null)):(M(!0),w("text"))},Se=S=>{if(!Re(S))return;e.some(L=>!L.isFromLayout)?(T(S),Z(!0)):_(S,!1)},_=(S,x)=>{const k=Re(S);if(!k)return;const L=n==="hf"?"hf":"default",$=e.length>0?Math.max(...e.map(d=>d.zIndex)):0,s=_e(k,L).map(d=>({...d,id:`${d.id}-${Date.now()}`,isFromLayout:!0,layoutId:S,isModified:!1,zIndex:x?d.zIndex-$-100:d.zIndex}));a(x?[...s,...e]:s),G(S),r([]),w(null)},Ie=()=>{P&&_(P,!0),Z(!1),T(null)},$e=()=>{P&&_(P,!1),Z(!1),T(null)},re=()=>{Z(!1),T(null)},Le=S=>{const x=me(n),k=200,L=Math.floor(Math.random()*200)-100,$=Math.floor(Math.random()*200)-100,l=x.width/2-k/2,s=x.height/2-k/2;h({type:"image",x:l+L,y:s+$,width:k,height:k,src:S.thumbnail,rotation:0,isFromLayout:!1}),w(null)},Ee=(S,x)=>{h({type:"text",x:S,y:x,width:100,height:80,rotation:0,text:"",fontSize:68,fontFamily:"Inter",fill:"#000000",bold:!1,italic:!1,isEditing:!1}),M(!1),w(null)},pe=(S,x,k)=>{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 $=10*1024*1024;if(S.size>$){alert("File size must be less than 10MB");return}const l=new FileReader;l.onload=s=>{var f;const d=(f=s.target)==null?void 0:f.result,m=new Image;m.onload=()=>{const p=me(n);let z=m.width,E=m.height;const W=Math.max(p.width,p.height),A=Math.max(z,E);if(A>W){const oe=W*.5/A;z=z*oe,E=E*oe}let q,Q;if(x!==void 0&&k!==void 0)q=x-z/2,Q=k-E/2;else{const te=Math.floor(Math.random()*200)-100,oe=Math.floor(Math.random()*200)-100;q=p.width/2-z/2+te,Q=p.height/2-E/2+oe}h({type:"image",x:q,y:Q,width:z,height:E,src:d,rotation:0,isFromLayout:!1})},m.src=d},l.readAsDataURL(S)},Me=S=>{var k;const x=(k=S.target.files)==null?void 0:k[0];x&&pe(x),S.target.value=""},ke=S=>{const x=S.target;x.closest(".sidebar-container")||x.closest(".layout-selector")||x.closest(".huggy-menu")||S.dataTransfer.types.includes("Files")&&(S.preventDefault(),R(!0))},He=S=>{S.preventDefault(),R(!1)},De=S=>{var L;S.preventDefault(),R(!1);const x=S.target;if(x.closest(".sidebar-container")||x.closest(".layout-selector")||x.closest(".huggy-menu"))return;const k=(L=S.dataTransfer.files)==null?void 0:L[0];if(k){const $=document.querySelector(".canvas-container");if($){const l=$.querySelector(".konvajs-content");if(l){const s=l.getBoundingClientRect(),d=S.clientX-s.left,m=S.clientY-s.top;if(d>=0&&d<=s.width&&m>=0&&m<=s.height){pe(k,d,m);return}}}pe(k)}},Ce=async S=>{if(!V.current){console.error("Stage ref not available");return}J(!0);try{const x=i;r([]),await new Promise(p=>setTimeout(p,50));const k=V.current,L=window.devicePixelRatio||1,$=k.width(),l=k.height(),s=($-ee.width)/2,d=(l-ee.height)/2,m=k.toDataURL({mimeType:"image/png",quality:1,pixelRatio:L,x:s,y:d,width:ee.width,height:ee.height}),f=document.createElement("a");f.download=`${S}.png`,f.href=m,document.body.appendChild(f),f.click(),document.body.removeChild(f),r(x)}catch(x){console.error("Error exporting canvas:",x),alert("Failed to export canvas. Please try again.")}finally{J(!1)}};return g.useEffect(()=>{if(!C)return;const S=Re(C);if(!S||!S.variants)return;const k=_e(S,n==="hf"?"hf":"default");if(e.some(d=>d.type==="text"&&d.isEditing))return;const $=e.map(d=>{if(d.layoutId===C&&d.isFromLayout&&!d.isModified){const m=d.id.split("-").slice(0,-1).join("-"),f=k.find(p=>p.id===m);if(f)return{...f,id:d.id,isFromLayout:!0,layoutId:C,isModified:!1,zIndex:d.zIndex}}return d}),l=e.map(d=>{if(d.type==="text"){const{isEditing:m,...f}=d;return f}return d}),s=$.map(d=>{if(d.type==="text"){const{isEditing:m,...f}=d;return f}return d});JSON.stringify(s)!==JSON.stringify(l)&&a($)},[n,C,e,a]),g.useEffect(()=>{const S=x=>{const k=document.querySelector(".canvas-container"),L=document.querySelector(".text-toolbar"),$=k&&k.contains(x.target),l=L&&L.contains(x.target);!$&&!l&&i.length>0&&r([])};return document.addEventListener("mousedown",S),()=>document.removeEventListener("mousedown",S)},[i,r]),g.useEffect(()=>{const S=x=>{if(!B)return;const k=document.querySelector(".sidebar-container"),L=document.querySelector(".layout-selector"),$=document.querySelector(".huggy-menu"),l=document.querySelector(".text-hint"),s=document.querySelector(".canvas-container");if(s&&s.contains(x.target)&&I)return;const m=k&&!k.contains(x.target),f=!L||!L.contains(x.target),p=!$||!$.contains(x.target),z=!l||!l.contains(x.target);m&&f&&p&&z&&(w(null),M(!1))};return document.addEventListener("mousedown",S),()=>document.removeEventListener("mousedown",S)},[B,I]),g.useEffect(()=>(window.exportCanvas={log:()=>un(e),asLayout:(S,x,k,L)=>{const $=Ve(e,S,x,k,L);return console.log("📋 Copy this to layouts.ts:"),console.log($),L&&(console.log(`
+💡 Tip: Export both "default" and "hf" variants, then combine them like:`),console.log(`  ${S}: {`),console.log(`    id: '${S}',`),console.log(`    name: '${x}',`),console.log(`    thumbnail: '${k}',`),console.log("    variants: {"),console.log("      default: [...],  // Export with variant='default'"),console.log("      hf: [...],       // Export with variant='hf'"),console.log("    },"),console.log("  },")),$},asJSON:()=>{const S=hn(e);return console.log("📋 JSON Export:"),console.log(S),S},objects:()=>e,info:()=>({objectCount:e.length,canvasSize:n,dimensions:ee,bgColor:c,selectedIds:i})},e.length===0&&(console.log("🎨 Canvas Export Utilities loaded! Use these commands:"),console.log("  • exportCanvas.log() - View all objects in detail"),console.log("  • exportCanvas.asLayout(id, name, thumbnail, variant?) - Export as layout definition"),console.log('    - Old format: asLayout("id", "Name", "/path/thumb.png")'),console.log('    - Variant format: asLayout("id", "Name", "/path/thumb.png", "default")'),console.log("  • exportCanvas.asJSON() - Export as JSON"),console.log("  • exportCanvas.objects() - Get raw objects array"),console.log("  • exportCanvas.info() - Get canvas info")),()=>{delete window.exportCanvas}),[e,n,ee,c,i]),g.useEffect(()=>{const S=x=>{const k=e.some(L=>L.type==="text"&&L.isEditing);if((x.ctrlKey||x.metaKey)&&x.key.toLowerCase()==="z"&&!x.shiftKey&&!k){x.preventDefault(),y();return}if((x.ctrlKey||x.metaKey)&&(x.key.toLowerCase()==="z"&&x.shiftKey||x.key.toLowerCase()==="y")&&!k){x.preventDefault(),H();return}if(!k&&i.length>0&&["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(x.key)){x.preventDefault();const L=x.shiftKey?10:1,$=e.map(l=>{if(i.includes(l.id)){let s=l.x,d=l.y;switch(x.key){case"ArrowUp":d-=L;break;case"ArrowDown":d+=L;break;case"ArrowLeft":s-=L;break;case"ArrowRight":s+=L;break}return{...l,x:s,y:d}}return l});a($);return}if((x.key==="Delete"||x.key==="Backspace")&&i.length>0&&!k&&(x.preventDefault(),v()),(x.ctrlKey||x.metaKey)&&x.key.toLowerCase()==="d"&&i.length>0&&!k){x.preventDefault();const L=e.filter(s=>i.includes(s.id)),$=20,l=L.map(s=>({...s,id:Je(),x:s.x+$,y:s.y+$,zIndex:Pe(e),isFromLayout:!1}));a([...e,...l]),r(l.map(s=>s.id))}if((x.ctrlKey||x.metaKey)&&x.shiftKey&&x.key.toLowerCase()==="f"&&i.length>0&&!k){x.preventDefault();const L=e.map($=>{if(i.includes($.id)&&$.type==="text")try{const l=$.fontWeight==="black"?"900":$.bold?"bold":"normal",s=$.italic?"italic":"",d=`${l} ${s}`.trim(),m=new ue.Text({text:$.text||"M",fontSize:$.fontSize,fontFamily:$.fontFamily,fontStyle:d}),f=Math.max(100,m.width()+4),p=Math.max(40,m.height()+2);return m.destroy(),{...$,width:f,height:p}}catch(l){return console.error("Error fitting text to content:",l),$}return $});a(L)}if(i.length>0&&!k){if(x.key==="]"){x.preventDefault();const L=Fe(e),$=L.map((s,d)=>i.includes(s.id)?d:-1).filter(s=>s!==-1);if(Math.max(...$)<L.length-1){const s=[...L];for(let m=$.length-1;m>=0;m--){const f=$[m];f<L.length-1&&([s[f],s[f+1]]=[s[f+1],s[f]])}const d=s.map((m,f)=>({...m,zIndex:f}));a(d)}return}if(x.key==="["){x.preventDefault();const L=Fe(e),$=L.map((s,d)=>i.includes(s.id)?d:-1).filter(s=>s!==-1);if(Math.min(...$)>0){const s=[...L];for(let m=0;m<$.length;m++){const f=$[m];f>0&&([s[f],s[f-1]]=[s[f-1],s[f]])}const d=s.map((m,f)=>({...m,zIndex:f}));a(d)}return}}if(x.key==="t"||x.key==="T"){const L=x.target;L.tagName!=="INPUT"&&L.tagName!=="TEXTAREA"&&be()}};return window.addEventListener("keydown",S),()=>window.removeEventListener("keydown",S)},[i,v,e,a,y,H]),g.useEffect(()=>{const S=async x=>{var $;if(e.some(l=>l.type==="text"&&l.isEditing))return;const L=($=x.clipboardData)==null?void 0:$.items;if(L)for(let l=0;l<L.length;l++){const s=L[l];if(s.type.indexOf("image")!==-1){x.preventDefault();const d=s.getAsFile();d&&pe(d);break}}};return window.addEventListener("paste",S),()=>window.removeEventListener("paste",S)},[e,n,h]),t.jsxs("div",{className:"w-full h-full bg-[#F8F9FB] relative dotted-background",style:{overflow:"visible"},onDragOver:ke,onDragLeave:He,onDrop:De,children:[t.jsx("input",{ref:O,type:"file",accept:"image/png,image/jpeg,image/jpg,image/webp",onChange:Me,style:{display:"none"}}),j&&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(zt,{onLayoutClick:D,onHuggyClick:Y,onImageClick:se,onTextClick:be,onSelectLayout:Se,onSelectHuggy:Le,activeButton:B}),t.jsx(Pt,{onExport:Ce,isExporting:X,currentLayout:C,canvasSize:n}),t.jsxs(Tt,{children:[t.jsx(on,{canvasSize:n,bgColor:c,onCanvasSizeChange:ie,onBgColorChange:u}),t.jsx(Ut,{canvasSize:n,bgColor:c,objects:e,selectedIds:i,onSelect:r,onObjectsChange:ne,textCreationMode:I,onTextCreate:Ee,stageRef:V,transformerRef:K})]}),U&&t.jsx(sn,{onKeep:Ie,onReplace:$e,onCancel:re}),(()=>{const S=e.filter(f=>f.type==="text"&&(i.includes(f.id)||f.isEditing===!0));if(!(I||S.length>0))return null;const k=S[0],L=(k==null?void 0:k.fontFamily)||"Inter",$=(k==null?void 0:k.fill)||"#000000",l=(k==null?void 0:k.bold)??!1,s=(k==null?void 0:k.italic)??!1,d=(k==null?void 0:k.fontWeight)||"normal",m=me(n);return t.jsx(ln,{fontFamily:L,fontSize:(k==null?void 0:k.fontSize)||68,fill:$,bold:l,italic:s,fontWeight:d,canvasWidth:m.width,canvasHeight:m.height,scale:b,onFontFamilyChange:f=>{const p=e.map(z=>{if(z.type==="text"&&S.some(E=>E.id===z.id))try{const E=new ue.Text({text:z.text||"M",fontSize:z.fontSize,fontFamily:f,fontStyle:`${z.bold?"bold":"normal"} ${z.italic?"italic":""}`}),W=Math.max(100,E.width()+20),A=Math.max(40,E.height()+10);return E.destroy(),{...z,fontFamily:f,width:W,height:A}}catch(E){return console.error("Error recalculating text size:",E),{...z,fontFamily:f}}return z});a(p)},onFillChange:f=>{const p=e.map(z=>z.type==="text"&&S.some(E=>E.id===z.id)?{...z,fill:f}:z);a(p)},onBoldToggle:()=>{const f=e.map(p=>{if(p.type==="text"&&S.some(z=>z.id===p.id)){const z=p.fontFamily==="Source Sans 3",E=p.fontWeight||"normal";let W=p.bold,A="normal";z?E==="normal"&&!p.bold?(W=!0,A="bold"):E==="bold"||p.bold&&E==="normal"?(W=!0,A="black"):(W=!1,A="normal"):(W=!p.bold,A=W?"bold":"normal");try{const q=A==="black"?"900":A==="bold"?"bold":"normal",Q=new ue.Text({text:p.text||"M",fontSize:p.fontSize,fontFamily:p.fontFamily,fontStyle:`${p.italic?"italic":"normal"}`,fontVariant:q}),te=Math.max(100,Q.width()+20),oe=Math.max(40,Q.height()+10);return Q.destroy(),{...p,bold:W,fontWeight:A,width:te,height:oe}}catch(q){return console.error("Error recalculating text size:",q),{...p,bold:W,fontWeight:A}}}return p});a(f)},onItalicToggle:()=>{const f=e.map(p=>{if(p.type==="text"&&S.some(z=>z.id===p.id)){const z=!p.italic;try{const E=new ue.Text({text:p.text||"M",fontSize:p.fontSize,fontFamily:p.fontFamily,fontStyle:`${p.bold?"bold":"normal"} ${z?"italic":""}`}),W=Math.max(100,E.width()+20),A=Math.max(40,E.height()+10);return E.destroy(),{...p,italic:z,width:W,height:A}}catch(E){return console.error("Error recalculating text size:",E),{...p,italic:z}}}return p});a(f)}})})()]})}Ue(document.getElementById("root")).render(t.jsx(g.StrictMode,{children:t.jsx(pn,{})}));

index.html

@@ -17,7 +17,7 @@
     <!-- Preconnect to Hugging Face CDN for faster Huggy image loading -->
     <link rel="preconnect" href="https://datasets-server.huggingface.co" crossorigin>
     <link rel="dns-prefetch" href="https://datasets-server.huggingface.co">
-    <script type="module" crossorigin src="/assets/index-B-p8Ph51.js"></script>
+    <script type="module" crossorigin src="/assets/index-BJMvp6Kq.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-V8h22z1a.css">