npm - @fraczled/sdk - Versions diffs - 1.0.5 → 1.0.6 - Mend

@fraczled/sdk 1.0.5 → 1.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/fraczled-sdk.es.js +1 -1
package/dist/fraczled-sdk.umd.js +1 -1
package/dist/{index-CEY4Vg36.js → index-50qKvYLx.js} +2 -2
package/dist/{index.es-BHRAhVWf.js → index.es-V2ksX0Gv.js} +1 -1
package/package.json +1 -1

package/dist/fraczled-sdk.es.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import "react";
 import "react-dom/client";
-import { S as o, b as p, a as c, d } from "./index-CEY4Vg36.js";
+import { S as o, b as p, a as c, d } from "./index-50qKvYLx.js";
 export {
   o as Store,
   p as createFraczledEditor,

package/dist/fraczled-sdk.umd.js CHANGED Viewed

@@ -868,7 +868,7 @@ end`};e.events.push(["putFont",function(A){(function(o){var l=o.font,u=o.out,h=o
       `,b.style.width=`${h}px`,b.style.height=`${g}px`,b.style.backgroundImage=`url(${u.toDataURL("image/png")})`,b.style.backgroundSize="100% 100%",document.body.appendChild(b);const p={elementId:e,canvas:u,originalElement:t,overlay:b,bounds:l,scale:i};return this._cache.set(e,p),p}catch(l){return console.warn("Failed to create raster cache:",l),null}}async _renderElementToCanvas(e,t,n,i){const A=e.cloneNode(!0),o=window.getComputedStyle(e);A.style.position="absolute",A.style.left="0",A.style.top="0",A.style.width=`${i.width}px`,A.style.height=`${i.height}px`,A.style.margin="0",A.style.transform="none",["fontFamily","fontSize","fontWeight","fontStyle","color","backgroundColor","backgroundImage","textShadow","boxShadow","filter","borderRadius","border","WebkitTextStroke","textStroke","opacity","letterSpacing","lineHeight"].forEach(x=>{A.style[x]=o.getPropertyValue(x.replace(/([A-Z])/g,"-$1").toLowerCase())});const u="http://www.w3.org/2000/svg",h=document.createElementNS(u,"svg");h.setAttribute("width",String(i.width+n*2)),h.setAttribute("height",String(i.height+n*2)),h.setAttribute("xmlns",u);const g=document.createElementNS(u,"foreignObject");g.setAttribute("width","100%"),g.setAttribute("height","100%"),g.setAttribute("x",String(n)),g.setAttribute("y",String(n));const m=document.createElement("div");m.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),m.style.width=`${i.width}px`,m.style.height=`${i.height}px`,m.appendChild(A),g.appendChild(m),h.appendChild(g);const b=new XMLSerializer().serializeToString(h),p=new Blob([b],{type:"image/svg+xml;charset=utf-8"}),E=URL.createObjectURL(p);return new Promise((x,N)=>{const U=new Image;U.onload=()=>{t.drawImage(U,0,0),URL.revokeObjectURL(E),x()},U.onerror=()=>{URL.revokeObjectURL(E),t.fillStyle="#ddd",t.fillRect(n,n,i.width,i.height),x()},U.src=E})}activateCache(e,t,n){const i=this._cache.get(e);if(!i)return!1;const A=20;return i.overlay.style.left=`${t-A}px`,i.overlay.style.top=`${n-A}px`,i.overlay.style.display="block",i.originalElement.style.visibility="hidden",this._activeOverlays.add(e),!0}moveCache(e,t,n){const i=this._cache.get(e);if(!i||!this._activeOverlays.has(e))return;const A=20;i.overlay.style.left=`${t-A}px`,i.overlay.style.top=`${n-A}px`}deactivateCache(e){const t=this._cache.get(e);t&&(t.overlay.style.display="none",t.originalElement.style.visibility="visible",this._activeOverlays.delete(e))}invalidateCache(e){const t=this._cache.get(e);t&&(t.overlay.remove(),this._cache.delete(e),this._activeOverlays.delete(e))}clearAll(){for(const[e]of this._cache)this.invalidateCache(e)}hasCache(e){return this._cache.has(e)}isCacheActive(e){return this._activeOverlays.has(e)}}const io=new JL;function ZL(r){var g;const e=window.getComputedStyle(r),t=e.getPropertyValue("-webkit-text-stroke-width")!=="0px"||e.getPropertyValue("text-stroke-width")!=="0px",n=e.textShadow!=="none",i=e.boxShadow!=="none",A=e.filter!=="none",o=e.getPropertyValue("backdrop-filter")!=="none"||e.getPropertyValue("-webkit-backdrop-filter")!=="none",l=(g=e.filter)==null?void 0:g.includes("url("),u=e.getPropertyValue("mask")!=="none"||e.getPropertyValue("-webkit-mask")!=="none",h=e.clipPath!=="none";return t||n||i||A||o||l||u||h}function eI(r={}){const{enabled:e=typeof window<"u"&&"ontouchstart"in window,threshold:t=5,padding:n=30}=r,i=fe.useRef({activeIds:new Set,isCaching:!1}),A=fe.useRef(null),o=fe.useRef(!1),l=fe.useRef(new Map),u=fe.useCallback(async(E,x)=>{if(!e)return;i.current.activeIds=new Set(E),i.current.isCaching=!1,A.current={x:x.clientX,y:x.clientY},o.current=!1,l.current.clear();const N=E.map(async U=>{const L=document.querySelector(`[data-element-id="${U}"]`);if(!L||!ZL(L))return;await io.createCache(U,L,{padding:n});const M=L.getBoundingClientRect();l.current.set(U,{offsetX:M.left,offsetY:M.top})});await Promise.all(N)},[e,n]),h=fe.useCallback((E,x,N,U)=>{if(!e||!A.current)return;const{activeIds:L}=i.current;if(L.size===0)return;if(!o.current){const Ae=x-A.current.x,le=N-A.current.y;if(Math.sqrt(Ae*Ae+le*le)<t)return;o.current=!0}const M=x-A.current.x,R=N-A.current.y;for(const Ae of L){const le=l.current.get(Ae);le&&(!io.isCacheActive(Ae)&&io.hasCache(Ae)&&(io.activateCache(Ae,le.offsetX,le.offsetY),i.current.isCaching=!0),io.isCacheActive(Ae)&&io.moveCache(Ae,le.offsetX+M,le.offsetY+R))}},[e,t]),g=fe.useCallback(()=>{if(!e)return;const{activeIds:E}=i.current;for(const x of E)io.deactivateCache(x);i.current.activeIds.clear(),i.current.isCaching=!1,A.current=null,o.current=!1,l.current.clear()},[e]),m=fe.useCallback(E=>{e&&io.invalidateCache(E)},[e]),b=fe.useCallback(()=>{e&&io.clearAll()},[e]),p=fe.useCallback(()=>i.current.isCaching,[]);return fe.useEffect(()=>()=>{io.clearAll()},[]),{onDragStart:u,onDragMove:h,onDragEnd:g,invalidate:m,invalidateAll:b,isActive:p,enabled:e}}const zd=(r,e)=>{if(e.length<=1)return null;const t=r.filter(l=>e.includes(l.id));if(t.length===0)return null;let n=1/0,i=1/0,A=-1/0,o=-1/0;return t.forEach(l=>{const u=l.rotation*Math.PI/180,h=Math.cos(u),g=Math.sin(u),m=l.x+l.width/2,b=l.y+l.height/2;[{x:l.x,y:l.y},{x:l.x+l.width,y:l.y},{x:l.x+l.width,y:l.y+l.height},{x:l.x,y:l.y+l.height}].forEach(E=>{const x=E.x-m,N=E.y-b,U=x*h-N*g+m,L=x*g+N*h+b;U<n&&(n=U),U>A&&(A=U),L<i&&(i=L),L>o&&(o=L)})}),{x:n,y:i,width:A-n,height:o-i}},VB=r=>{const e=r==null?void 0:r.trim().toLowerCase();return e?e==="ellipse"?"circle":e:null},tI=({pages:r,activePageId:e,zoom:t,setZoom:n,settings:i,selection:A,setSelection:o,activeGroupId:l,onSetActiveGroupId:u,updateElement:h,onDuplicate:g,onDelete:m,onBringToFront:b,onSendToBack:p,onResetZoom:E,onSetActivePage:x,onAddPage:N,onDuplicatePage:U,onDeletePage:L,onRenamePage:M,interactionMode:R,onAddText:Ae,showCredit:le,showWatermark:te})=>{const re=fe.useRef(null),J=r.find(de=>de.id===e),ye=(J==null?void 0:J.width)??i.width,X=(J==null?void 0:J.height)??i.height,{hitTestTopmost:W,invalidate:G,updateElements:z,updateConfig:Y}=XL({width:ye,height:X,scale:t/100,offsetX:0,offsetY:0});WL({onUpdate:fe.useCallback(de=>{de.forEach((ze,ct)=>{h(ct,ze,!1)})},[h])});const{onDragStart:j,onDragMove:O,onDragEnd:$}=eI({padding:30}),ce=fe.useRef(r),V=fe.useRef(e),I=fe.useRef(i),F=fe.useRef(null),k=fe.useRef(null),C=fe.useRef(()=>{});fe.useLayoutEffect(()=>{ce.current=r,V.current=e,I.current=i}),fe.useEffect(()=>{J&&z(J.elements)},[J==null?void 0:J.elements,z]),fe.useEffect(()=>{Y({width:ye,height:X,scale:t/100,offsetX:0,offsetY:0})},[ye,X,t,Y]),fe.useEffect(()=>()=>{F.current!==null&&(cancelAnimationFrame(F.current),F.current=null),Ir.current!==null&&(cancelAnimationFrame(Ir.current),Ir.current=null)},[]);const[Q,T]=fe.useState(!1),[H,Z]=fe.useState(!1),[ae,me]=fe.useState(!1),[q,ie]=fe.useState(null),[se,be]=fe.useState({x:0,y:0}),[K,Fe]=fe.useState(null),[nt,_e]=fe.useState({}),[Ie,Je]=fe.useState(null),[et,mt]=fe.useState(.15);fe.useEffect(()=>{te&&fetch("/api/settings/public").then(de=>de.json()).then(de=>{de.watermarkUrl&&Je(de.watermarkUrl),de.watermarkOpacity&&mt(parseFloat(de.watermarkOpacity))}).catch(()=>{})},[te]);const[Ye,Le]=fe.useState(null),[De,Ce]=fe.useState(null),[pe,Be]=fe.useState(null),[Qe,qe]=fe.useState([]),[Re,rt]=fe.useState([]),[Ve,At]=fe.useState(null),[ht,It]=fe.useState(null),[yt,Rt]=fe.useState([]),[Lt,Ht]=fe.useState(!1),[Mt,Pt]=fe.useState(!1),[Dt,or]=fe.useState({x:0,y:0,scrollLeft:0,scrollTop:0}),Nn=fe.useRef(new Map),fr=fe.useRef(null),br=fe.useRef(!1),Kr=fe.useRef(null),Gt=fe.useRef(null),On=fe.useRef(null),[Qr,lt]=fe.useState(null),[Vt,Tt]=fe.useState(!1),[Ot,Xe]=fe.useState(null),[tr,qt]=fe.useState(null),[pr,Nr]=fe.useState(null),$r=fe.useRef(null),Ir=fe.useRef(null),Mn=fe.useRef(null),ti=fe.useRef(!1);fe.useEffect(()=>{if(!tr)return;const de=A.length===1?A[0]:null;(R!=="direct-select"||!de||de!==tr.elementId)&&qt(null)},[R,A,tr]);const[Ha,Kt]=fe.useState(!1);fe.useEffect(()=>{setTimeout(()=>Ue(),100)},[]),fe.useEffect(()=>{const de=document.getElementById(`page-wrapper-${e}`);if(de&&re.current&&!Mt){const ze=de.getBoundingClientRect(),ct=re.current.getBoundingClientRect();if(!(ze.top>=ct.top&&ze.bottom<=ct.bottom)){const We=de.offsetTop,ut=de.clientHeight,He=re.current.clientHeight,bt=Math.max(0,We-(He-ut)/2);re.current.scrollTo({top:bt,behavior:"smooth"})}}},[e]);const Ue=()=>{const de=ce.current,ze=V.current,ct=I.current;setTimeout(()=>{if(!re.current)return;const it=de.find(S=>S.id===ze);if(!it)return;const We=it.width??ct.width,ut=it.height??ct.height,{clientWidth:He,clientHeight:bt}=re.current,Et=document.querySelector('[data-mobile-toolbar="true"]'),_t=Et?Et.getBoundingClientRect().height:0,kt=64,Er=80+_t,wr=Math.max(100,He-kt),Or=Math.max(100,bt-Er),Mr=We+(ct.showBleed?ct.bleed*2:0),Gr=ut+(ct.showBleed?ct.bleed*2:0),vt=wr/Mr,er=Or/Gr,Cr=Math.min(vt,er),mr=Math.floor(Cr*100),Xr=Math.max(5,Math.min(200,mr));n(Xr),Kt(!0)},0)};fe.useEffect(()=>{if(Ha&&re.current){const de=setTimeout(()=>{const ze=document.getElementById(`page-wrapper-${e}`);if(ze&&re.current){const ct=ze.offsetTop,it=ze.offsetHeight,We=re.current.clientHeight;let ut=ct-(We-it)/2;ut=Math.max(0,ut),re.current.scrollTo({top:ut,left:0,behavior:"auto"})}Kt(!1)},50);return()=>clearTimeout(de)}},[Ha,t,e]),fe.useEffect(()=>{const de=()=>Ue(),ze=ut=>{var bt;const He=(bt=ut.detail)==null?void 0:bt.id;He&&It(Et=>Et===He?null:He)},ct=()=>{re.current&&re.current.scrollTo({top:0,left:0,behavior:"auto"})};window.addEventListener("canvas-fit-to-screen",de),window.addEventListener("toggle-crop-mode",ze),window.addEventListener("canvas-scroll-to-top",ct);const it=ut=>{const He=ut.target,bt=He.tagName==="INPUT"||He.tagName==="TEXTAREA"||He.isContentEditable;ut.code==="Space"&&!bt&&(ut.preventDefault(),Ht(!0))},We=ut=>{ut.code==="Space"&&(Ht(!1),Pt(!1))};return window.addEventListener("keydown",it),window.addEventListener("keyup",We),()=>{window.removeEventListener("canvas-fit-to-screen",de),window.removeEventListener("toggle-crop-mode",ze),window.removeEventListener("canvas-scroll-to-top",ct),window.removeEventListener("keydown",it),window.removeEventListener("keyup",We)}},[]);const Nt=(de,ze)=>{const ct=document.getElementById(`page-canvas-${e}`);if(!ct)return{x:0,y:0};const it=ct.getBoundingClientRect(),We=t/100;return{x:(de-it.left)/We,y:(ze-it.top)/We}},jt=de=>{let ze=0,ct=0,it=0;return de.forEach(We=>{ze+=We.x,ct+=We.y,it+=1}),{x:ze/it,y:ct/it}},qr=de=>{if(de.pointerType!=="touch"||!re.current)return!1;const ze=Nn.current;if(ze.set(de.pointerId,{x:de.clientX,y:de.clientY}),ze.size<2)return!1;const ct=jt(ze);fr.current={x:ct.x,y:ct.y,scrollLeft:re.current.scrollLeft,scrollTop:re.current.scrollTop};const it=Array.from(ze.values()),We=Math.hypot(it[1].x-it[0].x,it[1].y-it[0].y);return Kr.current={distance:We,zoom:t},br.current=!0,Pt(!0),Tt(!1),Xe(null),!0},on=de=>{qr(de)},Ur=(de,ze)=>{if(de.pointerType==="touch"&&br.current)return;de.stopPropagation(),de.preventDefault(),de.target.setPointerCapture(de.pointerId);const it=r.find(He=>He.id===e);if(!it)return;const We=zd(it.elements,A);if(!We)return;const ut={};A.forEach(He=>{const bt=it.elements.find(Et=>Et.id===He);bt&&(ut[He]=JSON.parse(JSON.stringify(bt)))}),ie({type:"resize",handle:ze,startBounds:We,startMouse:{x:de.clientX,y:de.clientY},elementSnapshots:ut})},qn=de=>{if(de.pointerType==="touch"&&br.current)return;de.stopPropagation(),de.preventDefault(),de.target.setPointerCapture(de.pointerId);const ct=r.find(ut=>ut.id===e);if(!ct)return;const it=zd(ct.elements,A);if(!it)return;const We={};A.forEach(ut=>{const He=ct.elements.find(bt=>bt.id===ut);He&&(We[ut]=JSON.parse(JSON.stringify(He)))}),ie({type:"rotate",startBounds:it,startMouse:{x:de.clientX,y:de.clientY},elementSnapshots:We,rotation:0})},Un=de=>{if(de.pointerType==="touch"&&br.current)return;de.stopPropagation(),de.preventDefault(),de.target.setPointerCapture(de.pointerId);const ct=r.find(ut=>ut.id===e);if(!ct)return;const it=zd(ct.elements,A);if(!it)return;const We={};A.forEach(ut=>{const He=ct.elements.find(bt=>bt.id===ut);He&&(We[ut]=JSON.parse(JSON.stringify(He)))}),ie({type:"move",startBounds:it,startMouse:{x:de.clientX,y:de.clientY},elementSnapshots:We})},Zn=(de,ze,ct)=>{Sa(),On.current={x:de,y:ze,elementId:ct},Gt.current=setTimeout(()=>{if(On.current){const{x:it,y:We,elementId:ut}=On.current;ut?(A.includes(ut)||o([ut]),lt({x:it,y:We,type:"object",targetId:ut})):lt({x:it,y:We,type:"canvas"}),T(!1),Le(null)}On.current=null},500)},Sa=()=>{Gt.current&&(clearTimeout(Gt.current),Gt.current=null),On.current=null},Fn=de=>{if(de.preventDefault(),Mt)return;const{x:ze,y:ct}=Nt(de.clientX,de.clientY),it=W(ze,ct);if(it.elementId)A.includes(it.elementId)||o([it.elementId]),lt({x:de.clientX,y:de.clientY,type:"object",targetId:it.elementId});else{const ut=de.target.closest("[data-element-id]");if(ut){const He=ut.getAttribute("data-element-id");if(He){A.includes(He)||o([He]),lt({x:de.clientX,y:de.clientY,type:"object",targetId:He});return}}lt({x:de.clientX,y:de.clientY,type:"canvas"})}},rA=de=>{if(de.pointerType==="touch"&&br.current)return;if(Lt||R==="hand"){de.preventDefault(),Pt(!0),re.current&&or({x:de.clientX,y:de.clientY,scrollLeft:re.current.scrollLeft,scrollTop:re.current.scrollTop});return}if(R==="pen")return;if(R==="direct-select"){de.button===0&&!de.shiftKey&&(o([]),qt(null),u(null),lt(null));return}if(ht){de.target.closest(".crop-controls")||It(null);return}const ze=de.target;if(!(ze.closest("button")||ze.tagName==="INPUT"||ze.tagName==="TEXTAREA"||ze.closest(".handle-control"))&&(de.target===re.current||de.target.closest(".group\\/page"))&&de.button===0){de.shiftKey||(o([]),u(null),lt(null));const{x:ct,y:it}=Nt(de.clientX,de.clientY);Tt(!0),Xe({startX:ct,startY:it,currentX:ct,currentY:it}),de.currentTarget.setPointerCapture(de.pointerId),de.preventDefault()}},nA=(de,ze)=>{if(de.stopPropagation(),de.pointerType==="touch"&&br.current||Lt||Mt||R==="hand"||R==="pen")return;if(R==="direct-select"){de.button===0&&!de.shiftKey&&(o([]),qt(null),u(null));return}if(de.button!==0)return;if(e!==ze&&x(ze),R==="text"){const ut=de.currentTarget.getBoundingClientRect(),He=t/100,bt=(de.clientX-ut.left)/He,Et=(de.clientY-ut.top)/He;Ae("Type here","body",bt,Et);return}de.shiftKey||(o([]),u(null)),Tt(!0);const{x:ct,y:it}=Nt(de.clientX,de.clientY);Xe({startX:ct,startY:it,currentX:ct,currentY:it}),de.currentTarget.setPointerCapture(de.pointerId)},Qs=de=>{l&&(u(null),o([]))},Xa=(de,ze)=>{if(de.stopPropagation(),!ze.locked){if(ze.groupId&&l!==ze.groupId){u(ze.groupId),o([ze.id],!1);return}ze.type==="text"?At(ze.id):ze.type==="image"&&It(ze.id)}},gt=(de,ze,ct)=>{var Mr,Gr;if(de.pointerType==="touch"&&br.current||Lt||R==="hand"||R==="pen")return;e!==ct&&x(ct);const it=r.find(vt=>vt.id===ct),We=it==null?void 0:it.elements.find(vt=>vt.id===ze);if(We!=null&&We.locked||Ve===ze)return;if(de.stopPropagation(),Qr&&lt(null),de.pointerType==="touch"&&Zn(de.clientX,de.clientY,ze),ht===ze){const vt=de.target;if(de.target.closest(".crop-controls"))return;vt.setPointerCapture(de.pointerId),T(!0),Le(ze),be({x:de.clientX,y:de.clientY});const er=document.querySelector(`[data-element-id="${ze}"] img`),Cr=(er==null?void 0:er.naturalWidth)??0,mr=(er==null?void 0:er.naturalHeight)??0;_e({[ze]:{x:We.x,y:We.y,width:We.width,height:We.height,rotation:We.rotation,cropX:((Mr=We.crop)==null?void 0:Mr.x)??50,cropY:((Gr=We.crop)==null?void 0:Gr.y)??50,naturalWidth:Cr,naturalHeight:mr}});return}It(null),de.target.setPointerCapture(de.pointerId);let He=[...A];const bt=l&&(We==null?void 0:We.groupId)===l;l&&(We==null?void 0:We.groupId)!==l&&!de.shiftKey&&u(null);const Et=vt=>{const er=it==null?void 0:it.elements.find(Cr=>Cr.id===vt);return er!=null&&er.groupId?(it==null?void 0:it.elements.filter(Cr=>Cr.groupId===er.groupId).map(Cr=>Cr.id))||[vt]:[vt]};if(de.shiftKey){const vt=bt?[ze]:Et(ze);if(vt.every(Cr=>A.includes(Cr)))He=A.filter(Cr=>!vt.includes(Cr));else{const Cr=vt.filter(mr=>!A.includes(mr));He=[...A,...Cr]}o(He)}else if(bt)o([ze],!1);else if(We!=null&&We.groupId){const vt=Et(ze);o(vt,!0)}else A.includes(ze)||o([ze],!0);if(R==="direct-select"){(We==null?void 0:We.type)==="path"?qt(vt=>(vt==null?void 0:vt.elementId)===ze?vt:{elementId:ze,selection:{anchors:[],handle:null}}):qt(null);return}let _t=He;de.shiftKey?_t=He:bt?_t=[ze]:We!=null&&We.groupId?_t=Et(ze):A.includes(ze)?_t=A:_t=[ze];let kt=ze;if(de.altKey&&_t.length>0){o(_t,!1);const vt=Oe.duplicateSelectionInPlace();vt.length>0&&(_t=vt,kt=vt[0])}const wr=Oe.getSnapshot().pages.find(vt=>vt.id===ct)||it,Or={};wr==null||wr.elements.forEach(vt=>{_t.includes(vt.id)&&(Or[vt.id]={x:vt.x,y:vt.y,width:vt.width,height:vt.height,rotation:vt.rotation})}),_e(Or),T(!0),Le(kt),be({x:de.clientX,y:de.clientY}),Ce(null),j(_t,{clientX:de.clientX,clientY:de.clientY})},Ar=(de,ze,ct,it)=>{if(de.pointerType==="touch"&&br.current||Lt)return;const We=r.find(bt=>bt.id===it),ut=We==null?void 0:We.elements.find(bt=>bt.id===ze);if(ut!=null&&ut.locked)return;de.stopPropagation(),de.target.setPointerCapture(de.pointerId),T(!0),Le(ze),Ce(ct),be({x:de.clientX,y:de.clientY}),(ut==null?void 0:ut.type)==="text"&&(ct.includes("l")||ct.includes("r"))&&h(ze,{autoWidth:!1},!1),ut&&_e({[ze]:{x:ut.x,y:ut.y,width:ut.width,height:ut.height,rotation:ut.rotation,fontSize:ut.fontSize,path:ut.type==="path"&&ut.path?JSON.parse(JSON.stringify(ut.path)):void 0}})},lr=(de,ze,ct)=>{if(de.pointerType==="touch"&&br.current||Lt)return;const it=r.find(He=>He.id===ct),We=it==null?void 0:it.elements.find(He=>He.id===ze);if(We!=null&&We.locked)return;if(de.stopPropagation(),de.target.setPointerCapture(de.pointerId),Z(!0),Le(ze),We){_e({[ze]:{x:We.x,y:We.y,width:We.width,height:We.height,rotation:We.rotation}});const He=document.querySelector(`[data-element-id="${ze}"]`);if(He){const bt=He.getBoundingClientRect(),Et=bt.left+bt.width/2,_t=bt.top+bt.height/2,kt=Math.atan2(de.clientY-_t,de.clientX-Et)*(180/Math.PI);Fe({startAngle:kt,initialRotation:We.rotation})}}},fn=(de,ze,ct,it,We,ut)=>{if(de.pointerType==="touch"&&br.current||Lt)return;const He=r.find(_t=>_t.id===it),bt=He==null?void 0:He.elements.find(_t=>_t.id===ze);if(bt!=null&&bt.locked)return;if(de.stopPropagation(),de.target.setPointerCapture(de.pointerId),me(!0),Le(ze),Be(ct),qe(We),rt(ut),be({x:de.clientX,y:de.clientY}),bt){const _t=bt.cornerRadius?typeof bt.cornerRadius=="object"?{...bt.cornerRadius}:bt.cornerRadius:0;_e({[ze]:{x:bt.x,y:bt.y,width:bt.width,height:bt.height,rotation:bt.rotation,cornerRadius:_t}})}},bn=(de,ze,ct,it,We)=>{const He=[{value:0,type:"page-edge"},{value:ct/2,type:"page-center"},{value:ct,type:"page-edge"}],bt=[{value:0,type:"page-edge"},{value:it/2,type:"page-center"},{value:it,type:"page-edge"}];if(i.showBleed){const vt=i.bleed;He.push({value:-vt,type:"bleed"},{value:ct+vt,type:"bleed"}),bt.push({value:-vt,type:"bleed"},{value:it+vt,type:"bleed"})}if(i.showSafeArea){const vt=i.safeArea;He.push({value:vt,type:"safe"},{value:ct-vt,type:"safe"},{value:ct/2,type:"safe"}),bt.push({value:vt,type:"safe"},{value:it-vt,type:"safe"},{value:it/2,type:"safe"})}ze.forEach(vt=>{vt.visible&&(He.push({value:vt.x,type:"element-edge"},{value:vt.x+vt.width/2,type:"element-center"},{value:vt.x+vt.width,type:"element-edge"}),bt.push({value:vt.y,type:"element-edge"},{value:vt.y+vt.height/2,type:"element-center"},{value:vt.y+vt.height,type:"element-edge"}))});const Et=[{value:de.x,anchor:"left"},{value:de.x+de.width/2,anchor:"center"},{value:de.x+de.width,anchor:"right"}];let _t=null,kt=5,Er=[];He.forEach(vt=>{Et.forEach(er=>{if(We&&!We.includes(er.anchor))return;const Cr=vt.value-er.value;Math.abs(Cr)<=kt&&(Math.abs(Cr)<kt-.01&&(Er=[],kt=Math.abs(Cr),_t=Cr),Math.abs(Cr-(_t||0))<.01&&Er.push({orientation:"vertical",position:vt.value,start:i.showBleed?-i.bleed:0,end:i.showBleed?it+i.bleed:it,type:vt.type}))})});const wr=[{value:de.y,anchor:"top"},{value:de.y+de.height/2,anchor:"middle"},{value:de.y+de.height,anchor:"bottom"}];let Or=null,Mr=5,Gr=[];return bt.forEach(vt=>{wr.forEach(er=>{if(We&&!We.includes(er.anchor))return;const Cr=vt.value-er.value;Math.abs(Cr)<=Mr&&(Math.abs(Cr)<Mr-.01&&(Gr=[],Mr=Math.abs(Cr),Or=Cr),Math.abs(Cr-(Or||0))<.01&&Gr.push({orientation:"horizontal",position:vt.value,start:i.showBleed?-i.bleed:0,end:i.showBleed?ct+i.bleed:ct,type:vt.type}))})}),{snapX:_t||0,snapY:Or||0,lines:[...Er,...Gr]}},Dn=(de,ze=!1)=>{const ct=Object.keys(de);ct.length!==0&&(typeof Oe.updateElementsById=="function"?Oe.updateElementsById(de,ze):ct.forEach(it=>h(it,de[it],ze)),G())},ca=fe.useCallback(de=>{for(const ze of ce.current){const ct=ze.elements.find(it=>it.id===de);if(ct)return ct}return null},[]),wn=fe.useCallback(de=>{if(!de||!de.visible||de.locked)return!1;if(de.type==="image")return!0;if(de.type==="shape"){const ze=VB(de.content);return!!ze&&ze!=="line"}return de.type==="path"?!!de.path:!1},[]),pn=fe.useCallback((de,ze)=>{if(de.type==="image")return{content:ze.content};if(de.type==="shape"){const ct=VB(de.content);if(!ct||ct==="line")return null;const it=ct==="rect"||ct==="rectangle"||ct==="square";return{type:"image",content:ze.content,clipShape:it?void 0:ct,backgroundColor:void 0,crop:de.crop??{x:50,y:50,scale:1}}}return de.type==="path"&&de.path?{type:"image",content:ze.content,clipShape:"path",backgroundColor:void 0,crop:de.crop??{x:50,y:50,scale:1}}:null},[]),mn=fe.useCallback(de=>{let ze=de.width,ct=de.height;const it=300;return ze>ct?ze>it&&(ct=ct*(it/ze),ze=it):ct>it&&(ze=ze*(it/ct),ct=it),{width:ze,height:ct}},[]),Ki=fe.useCallback(de=>Oe.getSnapshot().uploads.find(ct=>ct.id===de)??null,[]),Ei=fe.useCallback(de=>{$r.current!==de&&($r.current=de,Nr(de))},[]),ea=fe.useCallback(()=>{Mn.current=null,Ei(null),Ir.current!==null&&(cancelAnimationFrame(Ir.current),Ir.current=null)},[Ei]);fe.useEffect(()=>{const de=()=>{ti.current=!0,ea()},ze=()=>{ti.current=!1,ea()};return window.addEventListener(f1,de),window.addEventListener(h1,ze),()=>{window.removeEventListener(f1,de),window.removeEventListener(h1,ze)}},[ea]);const Wn=fe.useCallback(de=>ti.current?!0:de?Array.from(de.types||[]).includes(u1):!1,[]),qi=fe.useCallback((de,ze)=>{const ct=document.getElementById(`page-canvas-${e}`);if(!ct)return null;const it=ct.getBoundingClientRect();if(de<it.left||de>it.right||ze<it.top||ze>it.bottom)return null;const We=t/100;return{x:(de-it.left)/We,y:(ze-it.top)/We}},[e,t]),hi=fe.useCallback(()=>{const de=Mn.current;if(!de)return;const ze=qi(de.clientX,de.clientY);if(!ze){Ei(null);return}const ct=W(ze.x,ze.y);if(!ct.elementId){Ei(null);return}const it=ce.current.find(ut=>ut.id===e),We=(it==null?void 0:it.elements.find(ut=>ut.id===ct.elementId))??null;Ei(wn(We)?ct.elementId:null)},[e,qi,W,wn,Ei]),Pa=fe.useCallback((de,ze,ct=!1)=>{const it=ca(de);if(!it)return;const We=iL(it,ze);h(de,{x:We.x,y:We.y,width:We.width,height:We.height,path:We.path,strokeColor:We.path.strokeColor,strokeWidth:We.path.strokeWidth,backgroundColor:We.path.fillColor??void 0},ct)},[ca,h]),LA=fe.useCallback((de,ze,ct)=>{o([de],!1),qt(it=>{const We=(it==null?void 0:it.elementId)===de?it.selection:{anchors:[]},ut=ct?We.anchors.includes(ze)?We.anchors.filter(He=>He!==ze):[...We.anchors,ze]:[ze];return{elementId:de,selection:{anchors:ut,handle:null}}})},[o]),Il=fe.useCallback((de,ze,ct,it)=>{o([de],!1),qt(We=>{var _t,kt;const ut=(We==null?void 0:We.elementId)===de?We.selection:{anchors:[],handle:null},He=((_t=ut.handle)==null?void 0:_t.anchorId)===ze&&((kt=ut.handle)==null?void 0:kt.type)===ct,bt=it&&He?null:{anchorId:ze,type:ct},Et=it?ut.anchors:[];return{elementId:de,selection:{anchors:Et,handle:bt}}})},[o]),Ol=fe.useCallback(de=>{const ze=TB(de);Oe.addElement({type:"path",name:"Path",content:"",x:ze.x,y:ze.y,width:ze.width,height:ze.height,rotation:0,opacity:1,visible:!0,strokeColor:ze.path.strokeColor,strokeWidth:ze.path.strokeWidth,backgroundColor:ze.path.fillColor??void 0,path:ze.path})},[]),Go=fe.useCallback((de,ze,ct=!1)=>{const it=TB(ze);h(de,{x:it.x,y:it.y,width:it.width,height:it.height,path:it.path,strokeColor:it.path.strokeColor,strokeWidth:it.path.strokeWidth,backgroundColor:it.path.fillColor??void 0},ct)},[h]),Vo=fe.useCallback(de=>{o([de],!1),qt(null)},[o]),Ml=fe.useCallback(de=>{Wn(de.dataTransfer)&&(de.preventDefault(),de.dataTransfer.dropEffect="copy",Mn.current={clientX:de.clientX,clientY:de.clientY},Ir.current===null&&(Ir.current=requestAnimationFrame(()=>{Ir.current=null,hi()})))},[Wn,hi]),di=fe.useCallback(de=>{if(!Wn(de.dataTransfer))return;const ze=de.relatedTarget;ze&&de.currentTarget instanceof Node&&de.currentTarget.contains(ze)||ea()},[ea,Wn]),aA=fe.useCallback(de=>{if(!Wn(de.dataTransfer))return;de.preventDefault();const ze=de.dataTransfer.getData(u1)||de.dataTransfer.getData("text/plain");if(!ze){ea();return}const ct=Ki(ze);if(!ct){ea();return}const it=qi(de.clientX,de.clientY);if(!it){ea();return}const We=ce.current.find(Er=>Er.id===e);if(!We){ea();return}let ut=$r.current,He=ut?We.elements.find(Er=>Er.id===ut):null;if(He||(ut=W(it.x,it.y).elementId,He=ut?We.elements.find(wr=>wr.id===ut):null),He&&wn(He)){const Er=pn(He,ct);if(Er){h(He.id,Er,!0),ea();return}ea();return}const{width:bt,height:Et}=mn(ct),_t=it.x-bt/2,kt=it.y-Et/2;Oe.addElement({type:"image",name:ct.name,content:ct.content,x:_t,y:kt,width:bt,height:Et,rotation:0,opacity:1,visible:!0,zIndex:We.elements.length+1,locked:!1,crop:{x:50,y:50,scale:1},effect:{style:{type:"none",params:{}},shape:{type:"none",params:{curve:0}}}}),ea()},[e,ea,qi,Ki,mn,pn,wn,Wn,h]),IA=de=>{var ct,it;if(de.pointerType==="touch"){Sa();const We=Nn.current;if(We.has(de.pointerId)&&We.set(de.pointerId,{x:de.clientX,y:de.clientY}),We.size===2){const ut=Array.from(We.values()),He=Math.hypot(ut[1].x-ut[0].x,ut[1].y-ut[0].y);if(Kr.current){const bt=He/Kr.current.distance,Et=Math.max(10,Math.min(200,Kr.current.zoom*bt));n(Math.round(Et))}}if(br.current&&fr.current&&re.current&&We.size>=2){const ut=jt(We),He=ut.x-fr.current.x,bt=ut.y-fr.current.y;re.current.scrollLeft=fr.current.scrollLeft-He,re.current.scrollTop=fr.current.scrollTop-bt;return}}if(Mt&&re.current){const We=de.clientX-Dt.x,ut=de.clientY-Dt.y;re.current.scrollLeft=Dt.scrollLeft-We,re.current.scrollTop=Dt.scrollTop-ut;return}const ze=t/100;if(Vt&&Ot){const{x:We,y:ut}=Nt(de.clientX,de.clientY);Xe({...Ot,currentX:We,currentY:ut})}if(q){const We=(de.clientX-q.startMouse.x)/ze,ut=(de.clientY-q.startMouse.y)/ze,{startBounds:He,elementSnapshots:bt}=q;if(q.type==="move"){const Et={};A.forEach(_t=>{const kt=bt[_t];kt&&(Et[_t]={x:kt.x+We,y:kt.y+ut})}),Dn(Et,!1)}else if(q.type==="rotate"){const Et=document.getElementById(`page-canvas-${e}`);if(!Et)return;const _t=Et.getBoundingClientRect(),kt=He.x+He.width/2,Er=He.y+He.height/2,wr=i.showBleed?i.bleed*ze:0,Or=_t.left+wr+kt*ze,Mr=_t.top+wr+Er*ze,Gr=Math.atan2(q.startMouse.y-Mr,q.startMouse.x-Or);let er=(Math.atan2(de.clientY-Mr,de.clientX-Or)-Gr)*(180/Math.PI);de.shiftKey&&(er=Math.round(er/15)*15),ie(mr=>mr?{...mr,rotation:er}:null);const Cr={};A.forEach(mr=>{const Xr=bt[mr];if(!Xr)return;const S=er*Math.PI/180,ee=Math.cos(S),we=Math.sin(S),Ne=Xr.x+Xr.width/2-kt,Pe=Xr.y+Xr.height/2-Er,st=Ne*ee-Pe*we,wt=Ne*we+Pe*ee;Cr[mr]={rotation:Xr.rotation+er,x:kt+st-Xr.width/2,y:Er+wt-Xr.height/2}}),Dn(Cr,!1)}else if(q.type==="resize"&&q.handle){let Et={...He};const _t=q.handle,kt=He.x+He.width/2,Er=He.y+He.height/2;if(de.shiftKey&&de.altKey){const Gr=He.width/He.height;let vt=0;if(_t.includes("r")?vt=We:_t.includes("l")?vt=-We:_t.includes("b")?vt=ut:_t.includes("t")&&(vt=-ut),_t.length===2){const Cr=_t.includes("r")?We:-We,mr=_t.includes("b")?ut:-ut;vt=Math.abs(Cr)>Math.abs(mr)?Cr:mr}const er=vt*2;Et.width=He.width+er,Et.height=Et.width/Gr,Et.x=kt-Et.width/2,Et.y=Er-Et.height/2}else if(de.altKey)_t.includes("r")&&(Et.width+=We*2,Et.x=kt-Et.width/2),_t.includes("l")&&(Et.width-=We*2,Et.x=kt-Et.width/2),_t.includes("b")&&(Et.height+=ut*2,Et.y=Er-Et.height/2),_t.includes("t")&&(Et.height-=ut*2,Et.y=Er-Et.height/2);else if(de.shiftKey){_t.includes("r")&&(Et.width+=We),_t.includes("l")&&(Et.x+=We,Et.width-=We),_t.includes("b")&&(Et.height+=ut),_t.includes("t")&&(Et.y+=ut,Et.height-=ut);const Gr=He.width/He.height;(_t==="br"||_t==="tl"||_t==="bl"||_t==="tr")&&(Et.height=Et.width/Gr),_t.includes("t")&&(Et.y=He.y+He.height-Et.height),_t.includes("l")&&(Et.x=He.x+He.width-Et.width)}else _t.includes("r")&&(Et.width+=We),_t.includes("l")&&(Et.x+=We,Et.width-=We),_t.includes("b")&&(Et.height+=ut),_t.includes("t")&&(Et.y+=ut,Et.height-=ut);const wr=Et.width/He.width,Or=Et.height/He.height;if(wr<=.1||Or<=.1)return;const Mr={};A.forEach(Gr=>{const vt=bt[Gr];if(!vt)return;const er=(vt.x-He.x)/He.width,Cr=(vt.y-He.y)/He.height,mr=vt.width/He.width,Xr=vt.height/He.height,S=Et.width*mr,ee=Et.height*Xr,we=Et.x+er*Et.width,Ne=Et.y+Cr*Et.height,Pe={x:we,y:Ne,width:S,height:ee,fontSize:vt.fontSize?vt.fontSize*Math.min(wr,Or):void 0};if(vt.type==="path"&&vt.path){const st=vt.width?S/vt.width:1,wt=vt.height?ee/vt.height:1;Pe.path=fB(vt.path,st,wt)}Mr[Gr]=Pe}),Dn(Mr,!1)}return}if(H&&Ye&&K){const We=document.querySelector(`[data-element-id="${Ye}"]`);if(We){const ut=We.getBoundingClientRect(),He=ut.left+ut.width/2,bt=ut.top+ut.height/2;let _t=Math.atan2(de.clientY-bt,de.clientX-He)*(180/Math.PI)-K.startAngle,kt=K.initialRotation+_t;de.shiftKey&&(kt=Math.round(kt/15)*15),h(Ye,{rotation:kt},!1)}return}if(ae&&Ye&&pe){const We=nt[Ye];if(!We)return;const ut=(de.clientX-se.x)/ze,He=(de.clientY-se.y)/ze,bt=We.rotation*Math.PI/180,Et=ut*Math.cos(bt)+He*Math.sin(bt),_t=-ut*Math.sin(bt)+He*Math.cos(bt),kt=(Et*pe.x+_t*pe.y)/1.5;let Er={};const wr=Re.length>0?Re:["tl","tr","bl","br"];if(typeof We.cornerRadius=="number"){const vt=We.cornerRadius||0;wr.forEach(er=>Er[er]=vt)}else Er={...We.cornerRadius},wr.forEach(vt=>{Er[vt]===void 0&&(Er[vt]=0)});const Or=Math.min(We.width,We.height)/2,Mr={...Er};(Qe.length>0?Qe:wr).forEach(vt=>{let er=(Er[vt]||0)+kt;er=Math.max(0,Math.min(Or,er)),Mr[vt]=er}),h(Ye,{cornerRadius:Mr},!1);return}if(Q&&Ye){O(Ye,de.clientX,de.clientY,t);const We=(de.clientX-se.x)/ze,ut=(de.clientY-se.y)/ze,He=nt[Ye];if(!He)return;if(ht===Ye){const wr=((it=(ct=r.flatMap(mr=>mr.elements).find(mr=>mr.id===Ye))==null?void 0:ct.crop)==null?void 0:it.scale)??1;let Or=He.width,Mr=He.height;if(He.naturalWidth&&He.naturalHeight){const mr=Math.max(He.width/He.naturalWidth,He.height/He.naturalHeight),Xr=He.naturalWidth*mr,S=He.naturalHeight*mr;Or=Xr*wr,Mr=S*wr}else Or=He.width*wr,Mr=He.height*wr;const Gr=Or-He.width,vt=Mr-He.height;let er=He.cropX??50,Cr=He.cropY??50;if(Gr>1){const mr=We*100/-Gr;er=Math.max(0,Math.min(100,(He.cropX??50)+mr))}if(vt>1){const mr=ut*100/-vt;Cr=Math.max(0,Math.min(100,(He.cropY??50)+mr))}h(Ye,{crop:{x:er,y:Cr,scale:wr}},!1);return}let bt={x:He.x,y:He.y,width:He.width,height:He.height,fontSize:He.fontSize},Et,_t=i.width,kt=i.height,Er=[];if(r.forEach(wr=>{const Or=wr.elements.find(Mr=>Mr.id===Ye);Or&&(Et=Or,_t=wr.width??i.width,kt=wr.height??i.height,Er=wr.elements.filter(Mr=>!A.includes(Mr.id)))}),De){const wr=(He.rotation||0)*(Math.PI/180),Or=Math.cos(wr),Mr=Math.sin(wr),Gr=We*Or+ut*Mr,vt=-We*Mr+ut*Or,er=de.altKey,Cr=de.shiftKey;let mr=He.width,Xr=He.height;if(er?(De.includes("l")&&(mr=He.width-Gr*2),De.includes("r")&&(mr=He.width+Gr*2),De.includes("t")&&(Xr=He.height-vt*2),De.includes("b")&&(Xr=He.height+vt*2)):(De.includes("l")&&(mr=He.width-Gr),De.includes("r")&&(mr=He.width+Gr),De.includes("t")&&(Xr=He.height-vt),De.includes("b")&&(Xr=He.height+vt)),mr=Math.max(10,mr),Xr=Math.max(10,Xr),(Cr||((Et==null?void 0:Et.type)==="image"||(Et==null?void 0:Et.type)==="text")&&!er)&&["tl","tr","bl","br"].includes(De)){const st=He.width/He.height;De.includes("l")||De.includes("r")?Xr=mr/st:mr=Xr*st}if(er){const st=He.x+He.width/2,wt=He.y+He.height/2;bt.x=st-mr/2,bt.y=wt-Xr/2,bt.width=mr,bt.height=Xr}else{const st=mr-He.width,wt=Xr-He.height;let $t=0,rr=0;De.includes("l")?$t=-st/2:De.includes("r")&&($t=st/2),De.includes("t")?rr=-wt/2:De.includes("b")&&(rr=wt/2);const xr=$t*Or-rr*Mr,Tr=$t*Mr+rr*Or,Wr=He.x+He.width/2,Gn=He.y+He.height/2,ra=Wr+xr,_n=Gn+Tr;bt.x=ra-mr/2,bt.y=_n-Xr/2,bt.width=mr,bt.height=Xr}let S=[];De.includes("l")&&S.push("left"),De.includes("r")&&S.push("right"),De.includes("t")&&S.push("top"),De.includes("b")&&S.push("bottom");const{snapX:ee,snapY:we,lines:Ne}=bn(bt,Er,_t,kt,S);if(Rt(Ne),ee!==0&&(er?De.includes("r")?(bt.width+=ee*2,bt.x-=ee):De.includes("l")&&(bt.width-=ee*2,bt.x+=ee):De.includes("r")?bt.width+=ee:De.includes("l")&&(bt.x+=ee,bt.width-=ee)),we!==0&&(er?De.includes("b")?(bt.height+=we*2,bt.y-=we):De.includes("t")&&(bt.height-=we*2,bt.y+=we):De.includes("b")?bt.height+=we:De.includes("t")&&(bt.y+=we,bt.height-=we)),(Et==null?void 0:Et.type)==="text"){if(["tl","tr","bl","br"].includes(De)){const st=bt.width/He.width,wt=(He.fontSize||16)*st;bt.fontSize=wt}else if(["t","b"].includes(De)){const st=bt.height/He.height,wt=(He.fontSize||16)*st;bt.fontSize=wt,bt.width=He.width*st}}const Pe={x:bt.x,y:bt.y,width:bt.width,height:bt.height,fontSize:bt.fontSize};if((Et==null?void 0:Et.type)==="path"&&He.path){const st=He.width?bt.width/He.width:1,wt=He.height?bt.height/He.height:1;Pe.path=fB(He.path,st,wt)}h(Ye,Pe,!1)}else{const wr=He.x+We,Or=He.y+ut,Mr={x:wr,y:Or,width:He.width,height:He.height},{snapX:Gr,snapY:vt,lines:er}=bn(Mr,Er,_t,kt);Rt(er);const Cr=We+Gr,mr=ut+vt,Xr={};Object.keys(nt).forEach(S=>{const ee=nt[S];Xr[S]={x:ee.x+Cr,y:ee.y+mr}}),Dn(Xr,!1)}}};fe.useLayoutEffect(()=>{C.current=IA});const Ts=()=>{F.current!==null&&(cancelAnimationFrame(F.current),F.current=null);const de=k.current;de&&(k.current=null,C.current(de))},ts=de=>{k.current={clientX:de.clientX,clientY:de.clientY,pointerId:de.pointerId,pointerType:de.pointerType,shiftKey:de.shiftKey,altKey:de.altKey},F.current===null&&(F.current=requestAnimationFrame(()=>{F.current=null;const ze=k.current;ze&&(k.current=null,C.current(ze))}))},dr=de=>{if(Ts(),Sa(),de.pointerType==="touch"){const ze=Nn.current;ze.delete(de.pointerId),ze.size<2&&br.current&&(br.current=!1,fr.current=null,Kr.current=null,Pt(!1))}if(Vt&&Ot){de.target.releasePointerCapture(de.pointerId);const ze=Math.min(Ot.startX,Ot.currentX),ct=Math.min(Ot.startY,Ot.currentY),it=Math.abs(Ot.currentX-Ot.startX),We=Math.abs(Ot.currentY-Ot.startY),ut=ze+it,He=ct+We,bt=r.find(_t=>_t.id===e),Et=[];if(bt==null||bt.elements.forEach(_t=>{if(!_t.visible||_t.locked)return;const kt=_t.x+_t.width,Er=_t.y+_t.height;!(_t.x>ut||kt<ze||_t.y>He||Er<ct)&&Et.push(_t.id)}),de.shiftKey){const _t=Array.from(new Set([...A,...Et]));o(_t)}else o(Et);Tt(!1),Xe(null)}if(Ye||q){const ze=q?Object.keys(q.elementSnapshots):[Ye];if(ze.length>0){if(Ye){const ct=r.flatMap(it=>it.elements).find(it=>it.id===Ye);ct&&h(ct.id,{},!0)}if(q){const ct=ze[0];ct&&h(ct,{},!0)}}}$(),T(!1),Z(!1),me(!1),Pt(!1),Le(null),Ce(null),Be(null),qe([]),rt([]),Rt([]),ie(null),Ht(!1),Fe(null)},OA=Qr!=null&&Qr.targetId?r.flatMap(de=>de.elements).find(de=>de.id===Qr.targetId):null,Xo=(J==null?void 0:J.elements.filter(de=>A.includes(de.id)))||[],Dl=A.length>=2,Ci=Xo.some(de=>de.groupId),ua=i.safeArea,ta=100/t,rs=Math.max(1,ta),Si=["tl","tr","bl","br","t","b","l","r"];return f.createElement("div",{ref:re,className:`flex-1 bg-[#f0f1f5] overflow-auto relative flex flex-col items-center select-none touch-none pt-6 md:pt-12 ${Mt||Lt||R==="hand"?"cursor-grab active:cursor-grabbing":""}`,onPointerDownCapture:on,onPointerDown:rA,onPointerMove:ts,onPointerUp:dr,onPointerLeave:dr,onPointerCancel:dr,onDragOver:Ml,onDragLeave:di,onDrop:aA,onWheel:de=>{de.ctrlKey&&(de.preventDefault(),n(Math.max(10,Math.min(200,t-de.deltaY*.5))))},onContextMenu:Fn},Qr&&f.createElement(AL,{x:Qr.x,y:Qr.y,type:Qr.type,onClose:()=>lt(null),actions:{onCopy:()=>Oe.copy(),onCopyStyle:()=>Oe.copyStyle(),onPaste:()=>Oe.paste(),onDuplicate:()=>Qr.targetId&&g(Qr.targetId),onDelete:()=>Qr.targetId&&m(Qr.targetId),onBringToFront:()=>Qr.targetId&&b(Qr.targetId),onBringForward:()=>Qr.targetId&&Oe.reorderElement(Qr.targetId,"forward"),onSendToBack:()=>Qr.targetId&&p(Qr.targetId),onSendBackward:()=>Qr.targetId&&Oe.reorderElement(Qr.targetId,"backward"),onLock:()=>Qr.targetId&&h(Qr.targetId,{locked:!(OA!=null&&OA.locked)}),isLocked:OA==null?void 0:OA.locked,onResetZoom:E,onFitToScreen:Ue,onAlign:de=>Oe.alignSelection(de),onGroup:()=>Oe.groupSelection(),onUngroup:()=>Oe.ungroupSelection(),canGroup:Dl,canUngroup:Ci}}),le&&f.createElement("div",{className:"fixed bottom-12 right-4 z-[100] bg-white/80 backdrop-blur-[2px] px-2 py-1 rounded text-[10px] font-bold text-slate-400 shadow-sm pointer-events-none select-none"},"Powered by Fraczled SDK"),r.map((de,ze)=>{const ct=de.width??i.width,it=de.height??i.height;de.unit??i.unit;const ut=Math.max(50,i.bleed),He=(ct+ut*2)*(t/100),bt=(it+ut*2)*(t/100),Et=ut*(t/100),_t=e===de.id?zd(de.elements,A):null;return f.createElement("div",{key:de.id,id:`page-wrapper-${de.id}`,className:"relative z-10 group/page my-10"},f.createElement("div",{"data-no-export":"true",className:"absolute -top-10 flex items-center gap-1 transition-opacity z-[60]",style:{right:`${Et}px`}},f.createElement("input",{type:"text",value:de.name,onChange:kt=>M(de.id,kt.target.value),className:"text-xs text-slate-500 font-medium mr-2 bg-transparent border border-transparent hover:border-gray-200 focus:border-blue-400 focus:bg-white rounded px-1.5 py-0.5 outline-none w-32 text-right transition-all",placeholder:`Page ${ze+1}`}),f.createElement("button",{onClick:()=>U(de.id),className:"p-1.5 bg-white border border-gray-200 rounded-md text-slate-600 hover:text-blue-600 hover:border-blue-300 shadow-sm transition-colors group/btn relative"},f.createElement(Uf,{size:14})," ",f.createElement("div",{className:"absolute -top-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-slate-800 text-white text-[10px] rounded opacity-0 group-hover/btn:opacity-100 transition-opacity pointer-events-none whitespace-nowrap z-[70]"},"Duplicate Page")),f.createElement("button",{onClick:()=>N(de.id),className:"p-1.5 bg-white border border-gray-200 rounded-md text-slate-600 hover:text-blue-600 hover:border-blue-300 shadow-sm transition-colors group/btn relative"},f.createElement(p7,{size:14})," ",f.createElement("div",{className:"absolute -top-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-slate-800 text-white text-[10px] rounded opacity-0 group-hover/btn:opacity-100 transition-opacity pointer-events-none whitespace-nowrap z-[70]"},"Add Page")),r.length>1&&f.createElement("button",{onClick:()=>L(de.id),className:"p-1.5 bg-white border border-gray-200 rounded-md text-slate-600 hover:text-red-600 hover:border-red-300 shadow-sm transition-colors group/btn relative"}," ",f.createElement(XA,{size:14})," ",f.createElement("div",{className:"absolute -top-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-slate-800 text-white text-[10px] rounded opacity-0 group-hover/btn:opacity-100 transition-opacity pointer-events-none whitespace-nowrap z-[70]"},"Delete Page")," ")),f.createElement("div",{className:"relative shrink-0 box-content transition-all duration-200 ease-out",style:{width:`${He}px`,height:`${bt}px`,overflow:"visible"}},f.createElement("div",{id:`page-canvas-${de.id}`,className:"shadow-xl origin-top-left hover:ring-4 hover:ring-[#8a38ff] transition-shadow relative",style:{width:`${ct}px`,height:`${it}px`,transform:`scale(${t/100})`,boxSizing:"content-box",backgroundColor:i.backgroundColor==="transparent"?"transparent":i.backgroundColor||"#ffffff",border:"none",margin:`${Et}px`,overflow:"visible"},onPointerDown:kt=>nA(kt,de.id),onDoubleClick:Qs},i.backgroundColor==="transparent"&&f.createElement("div",{"data-no-export":"true",className:"absolute inset-0 pointer-events-none",style:{backgroundImage:"linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%)",backgroundSize:"20px 20px",backgroundPosition:"0 0, 0 10px, 10px -10px, -10px 0px",zIndex:0}}),Vt&&Ot&&e===de.id&&f.createElement("div",{"data-no-export":"true",className:"absolute border border-purple-500 bg-purple-500/20 z-[70] pointer-events-none",style:{left:Math.min(Ot.startX,Ot.currentX),top:Math.min(Ot.startY,Ot.currentY),width:Math.abs(Ot.currentX-Ot.startX),height:Math.abs(Ot.currentY-Ot.startY)}}),f.createElement("div",{"data-no-export":"true",className:"absolute inset-0 pointer-events-none z-[100]",style:{boxShadow:"inset 0 0 0 1px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(255,255,255,0.6)"}}),i.showBleed&&f.createElement(f.Fragment,null,f.createElement("div",{"data-no-export":"true",className:"absolute border border-solid border-red-500/30 pointer-events-none z-50",style:{inset:`-${i.bleed}px`,borderWidth:`${i.bleed}px`}}),f.createElement("div",{"data-no-export":"true",className:"absolute inset-0 border border-dashed border-gray-400 pointer-events-none z-50 opacity-50",style:{borderWidth:`${1*Math.max(1,ta)}px`}}),f.createElement("div",{"data-no-export":"true",className:"absolute w-full flex justify-center pointer-events-none select-none z-50",style:{top:`-${i.bleed}px`,height:`${i.bleed}px`,alignItems:"center"}},f.createElement("span",{className:"font-bold text-red-600 tracking-wider uppercase bg-white/70 px-2 rounded-sm backdrop-blur-[1px] border border-red-200 shadow-sm",style:{fontSize:`${10*Math.max(1,ta)}px`}},"Bleed Area"))),i.showSafeArea&&f.createElement("div",{"data-no-export":"true",className:"absolute border-cyan-400 pointer-events-none z-50 opacity-80",style:{top:ua,left:ua,right:ua,bottom:ua,borderWidth:`${1.5*Math.max(1,ta)}px`,borderStyle:"solid"}},f.createElement("span",{className:"absolute left-0 text-cyan-700 uppercase tracking-wider font-bold bg-white/80 px-1 rounded-sm shadow-sm",style:{top:`-${20*Math.max(1,ta)}px`,fontSize:`${10*Math.max(1,ta)}px`}},"Safe Area")),f.createElement("div",{className:"absolute",style:{inset:0,overflow:"visible"}},_t&&e===de.id&&A.length>1&&f.createElement("div",{"data-no-export":"true",className:"absolute border-purple-600 z-[60]",style:{left:(q==null?void 0:q.type)==="rotate"||(q==null?void 0:q.type)==="move"?q.startBounds.x:_t.x,top:(q==null?void 0:q.type)==="rotate"||(q==null?void 0:q.type)==="move"?q.startBounds.y:_t.y,width:(q==null?void 0:q.type)==="rotate"||(q==null?void 0:q.type)==="move"?q.startBounds.width:_t.width,height:(q==null?void 0:q.type)==="rotate"||(q==null?void 0:q.type)==="move"?q.startBounds.height:_t.height,transform:(q==null?void 0:q.type)==="rotate"?`rotate(${q.rotation||0}deg)`:"none",pointerEvents:"none",borderWidth:`${3*Math.max(1,ta)}px`},"data-group-center":!0},f.createElement("span",{className:"absolute left-0 bg-indigo-600 text-white px-1.5 py-0.5 rounded-t-sm font-medium",style:{top:`-${24*Math.max(1,ta)}px`,fontSize:`${10*Math.max(1,ta)}px`,transform:(q==null?void 0:q.type)==="rotate"?`rotate(-${q.rotation||0}deg)`:"none",transformOrigin:"bottom left"}},"Group"),f.createElement("div",{className:"absolute inset-0 pointer-events-none"},Si.map(kt=>{const Er=kt.length===2,wr=kt==="l"||kt==="r",Or=Er?12:wr?8:24,Mr=Er?12:wr?24:8,Gr=Er?"50%":"4px";let vt="cursor-move";(kt==="t"||kt==="b")&&(vt="cursor-ns-resize"),(kt==="l"||kt==="r")&&(vt="cursor-ew-resize"),(kt==="tl"||kt==="br")&&(vt="cursor-nwse-resize"),(kt==="tr"||kt==="bl")&&(vt="cursor-nesw-resize");const er={position:"absolute",width:`${Or*rs}px`,height:`${Mr*rs}px`,borderRadius:Gr,backgroundColor:"white",border:`${2*Math.max(1,ta)}px solid #a855f7`,boxShadow:"0 2px 4px rgba(0,0,0,0.2)",transform:"translate(-50%, -50%)",pointerEvents:"auto",cursor:vt};return kt.includes("t")&&(er.top="0%"),kt.includes("b")&&(er.top="100%"),(kt==="l"||kt==="r")&&(er.top="50%"),kt.includes("l")&&(er.left="0%"),kt.includes("r")&&(er.left="100%"),(kt==="t"||kt==="b")&&(er.left="50%"),f.createElement("div",{key:kt,onPointerDown:Cr=>Ur(Cr,kt),style:er})}),f.createElement("div",{className:"absolute left-1/2 -translate-x-1/2 flex items-center gap-4 pointer-events-auto",style:{top:`calc(100% + ${24*Math.max(1,ta)}px)`,transform:"translate(-50%, 0)",transformOrigin:"top center"}},f.createElement("div",{className:"bg-white border border-gray-200 text-slate-700 rounded-full flex items-center justify-center cursor-grab active:cursor-grabbing hover:bg-gray-50 shadow-md",style:{width:`${40*Math.max(1,ta)}px`,height:`${40*Math.max(1,ta)}px`},onPointerDown:qn}," ",f.createElement(r1,{size:18*Math.max(1,ta)})," "),f.createElement("div",{className:"bg-white border border-gray-200 text-slate-700 rounded-full flex items-center justify-center cursor-grab active:cursor-grabbing hover:bg-gray-50 shadow-md",style:{width:`${40*Math.max(1,ta)}px`,height:`${40*Math.max(1,ta)}px`},onPointerDown:Un}," ",f.createElement(oB,{size:18*Math.max(1,ta)})," ")))),e===de.id&&yt.map((kt,Er)=>{const wr=kt.type==="safe"||kt.type.includes("element")?"bg-cyan-500":"bg-[#ff00ff]";return f.createElement("div",{"data-no-export":"true",key:Er,className:`absolute z-[60] pointer-events-none ${wr}`,style:{left:kt.orientation==="vertical"?kt.position:kt.start,top:kt.orientation==="horizontal"?kt.position:kt.start,width:kt.orientation==="vertical"?"1px":kt.end-kt.start+"px",height:kt.orientation==="horizontal"?"1px":kt.end-kt.start+"px"}})}),de.elements.map(kt=>kt.visible?f.createElement(KL,{key:kt.id,element:kt,isSelected:A.includes(kt.id),isMultiSelect:A.length>1,isEditing:Ve===kt.id,isCropping:ht===kt.id,isReplaceTarget:pr===kt.id,isInteracting:Q||H||ae||!!q,isDirectSelecting:R==="direct-select",pathSelection:(tr==null?void 0:tr.elementId)===kt.id?tr.selection:null,activeGroupId:l,pageId:de.id,zoom:t,unit:i.unit,onPointerDown:gt,onDoubleClick:Xa,onResizePointerDown:Ar,onRotatePointerDown:lr,onCornerRadiusPointerDown:fn,updateElement:h,onPathUpdate:Pa,onPathAnchorSelect:LA,onPathHandleSelect:Il,onDuplicate:g,onDelete:m,setEditingId:At,setCropModeId:It}):null),te&&Ie&&f.createElement("div",{className:"absolute inset-0 flex items-center justify-center pointer-events-none z-[55]",style:{opacity:et}},f.createElement("img",{src:Ie,alt:"",className:"max-w-[60%] max-h-[60%] object-contain select-none",draggable:!1}))),R==="pen"&&e===de.id&&f.createElement(GL,{zoom:t,pageWidth:ct,pageHeight:it,elements:de.elements,settings:i,onCreatePath:Ol,onUpdatePathElement:Go,onSelectElement:Vo}))))}),f.createElement("div",{className:"h-96 w-full flex-shrink-0"}))},rI=({zoom:r,setZoom:e,pageCount:t,activePage:n,showThumbnails:i,onToggleThumbnails:A,pageSize:o})=>{const l=ws(bs(o.width,o.unit)),u=ws(bs(o.height,o.unit));return f.createElement("div",{className:"h-10 bg-white border-t border-gray-200 flex items-center justify-between px-4 text-slate-600 flex-shrink-0 z-20 text-xs"},f.createElement("div",{className:"flex items-center gap-4"},f.createElement("button",{onClick:A,className:`flex items-center gap-2 px-2 py-1 rounded transition-colors ${i?"bg-indigo-50 text-indigo-600":"hover:bg-gray-100 text-slate-700"}`,title:i?"Hide page thumbnails":"Show page thumbnails"},f.createElement(a7,{size:16}),f.createElement("span",{className:"font-medium"},"Pages ",n," / ",t))),f.createElement("div",{className:"flex items-center gap-4"},f.createElement("div",{className:"hidden lg:flex items-center text-slate-400 font-medium mr-2"},l," x ",u," ",o.unit," @ ",o.dpi," DPI"),f.createElement("div",{className:"h-4 w-px bg-gray-300 mx-1 hidden lg:block"}),f.createElement("div",{className:"flex items-center gap-2 bg-slate-100 rounded-full px-3 py-1"},f.createElement("button",{onClick:()=>e(Math.max(10,r-10)),className:"p-0.5 hover:text-blue-600"},f.createElement(Zp,{size:12})),f.createElement("input",{type:"range",min:"10",max:"200",value:r,onChange:h=>e(Number(h.target.value)),className:"w-24 h-1 bg-slate-300 rounded-lg appearance-none cursor-pointer accent-slate-800"}),f.createElement("span",{className:"w-9 text-right font-medium"},r,"%"),f.createElement("button",{onClick:()=>e(Math.min(200,r+10)),className:"p-0.5 hover:text-blue-600"},f.createElement(no,{size:12}))),f.createElement("div",{className:"h-4 w-px bg-gray-300 mx-1"}),f.createElement("button",{className:"hover:text-blue-600 transition-colors",title:"Presentation Mode"},f.createElement(sB,{size:16}))))},nI=[{name:"None",adjustments:{hue:0,saturation:0,brightness:0,contrast:0},stroke:{width:0,color:"#000000",style:"none"}},{name:"Epic",adjustments:{hue:0,saturation:20,brightness:10,contrast:20},stroke:{width:3,color:"#1a1a2e",style:"solid"}},{name:"Retro",adjustments:{hue:-10,saturation:-20,brightness:0,contrast:10},stroke:{width:4,color:"#d4a574",style:"solid"}},{name:"Street",adjustments:{hue:0,saturation:-50,brightness:0,contrast:40},stroke:{width:2,color:"#2d2d2d",style:"solid"}},{name:"Grayscale",adjustments:{hue:0,saturation:-100,brightness:0,contrast:0},stroke:{width:2,color:"#555555",style:"solid"}},{name:"Nordic",adjustments:{hue:0,saturation:-40,brightness:20,contrast:-10},stroke:{width:3,color:"#a8c5d9",style:"solid"}},{name:"Drama",adjustments:{hue:0,saturation:0,brightness:-20,contrast:40},stroke:{width:4,color:"#0d0d0d",style:"solid"}},{name:"Pop",adjustments:{hue:0,saturation:40,brightness:10,contrast:10},stroke:{width:3,color:"#ff6b6b",style:"solid"}},{name:"Golden",adjustments:{hue:-5,saturation:30,brightness:10,contrast:10},stroke:{width:3,color:"#c9a227",style:"solid"}},{name:"Warm",adjustments:{hue:-15,saturation:10,brightness:5,contrast:0},stroke:{width:2,color:"#e07b53",style:"solid"}},{name:"Cool",adjustments:{hue:15,saturation:0,brightness:5,contrast:0},stroke:{width:2,color:"#5b8fb9",style:"solid"}},{name:"Afterglow",adjustments:{hue:-10,saturation:20,brightness:-10,contrast:20},stroke:{width:3,color:"#9b59b6",style:"solid"}}],aI=({effect:r,onChange:e,onElementUpdate:t,onClose:n,position:i})=>{const A=r.adjustments||{hue:0,saturation:0,brightness:0,contrast:0},o=u=>A.hue===u.hue&&A.saturation===u.saturation&&A.brightness===u.brightness&&A.contrast===u.contrast,l=u=>{e({...r,adjustments:{...u.adjustments}}),t&&u.stroke&&t({strokeWidth:u.stroke.width,strokeColor:u.stroke.color,strokeStyle:u.stroke.style})};return f.createElement("div",{className:`${i?"fixed":"absolute top-12 left-0"} w-80 bg-white rounded-xl shadow-xl border border-gray-200 z-[9999] flex flex-col overflow-hidden animate-in fade-in zoom-in-95 duration-100 max-h-[500px]`,style:i?{top:i.top,left:i.left}:void 0},f.createElement("div",{className:"flex items-center justify-between px-4 py-3 border-b border-gray-100 bg-white sticky top-0 z-10"},f.createElement("h3",{className:"font-bold text-slate-800 text-sm"},"Filters"),f.createElement("button",{onClick:n,className:"text-slate-400 hover:bg-gray-100 rounded-full p-1 transition-colors"},f.createElement(Ri,{size:18}))),f.createElement("div",{className:"flex-1 overflow-y-auto p-4 custom-scrollbar"},f.createElement("div",{className:"grid grid-cols-3 gap-3"},nI.map(u=>{const h=o(u.adjustments),{hue:g,saturation:m,brightness:b,contrast:p}=u.adjustments,E=`hue-rotate(${g}deg) saturate(${100+m}%) brightness(${100+b}%) contrast(${100+p}%)`;return f.createElement("button",{key:u.name,onClick:()=>l(u),className:"flex flex-col items-center gap-2 group"},f.createElement("div",{className:`
                               w-full aspect-square rounded-lg overflow-hidden border transition-all relative
                               ${h?"border-2 border-indigo-600 ring-1 ring-indigo-100":"border-gray-200 hover:border-gray-300"}
-                          `},f.createElement("div",{className:"w-full h-full bg-cover bg-center",style:{backgroundImage:"url(https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=150&q=80)",filter:E}}),h&&f.createElement("div",{className:"absolute inset-0 flex items-center justify-center bg-indigo-600/10"},f.createElement("div",{className:"bg-white rounded-full p-0.5 shadow-sm"},f.createElement(ko,{size:12,className:"text-indigo-600"})))),f.createElement("span",{className:`text-[10px] font-medium ${h?"text-indigo-600":"text-slate-500"}`},u.name))}))))},XB=({element:r,onChange:e,onClose:t,position:n})=>{const i=r.strokeStyle||"solid",A=r.strokeWidth||0;let o=0;typeof r.cornerRadius=="number"?o=r.cornerRadius:r.cornerRadius&&(o=r.cornerRadius.tl||0);const l=u=>{let h="0";return u==="dashed"&&(h="6,4"),u==="dotted"&&(h="2,2"),f.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",className:"text-slate-700"},f.createElement("line",{x1:"2",y1:"12",x2:"22",y2:"12",stroke:"currentColor",strokeWidth:"2",strokeDasharray:h,strokeLinecap:"round"}))};return f.createElement("div",{className:`${n?"fixed":"absolute top-12 left-0"} w-72 bg-white rounded-xl shadow-xl border border-gray-200 z-[9999] flex flex-col overflow-hidden animate-in fade-in zoom-in-95 duration-100 font-sans`,style:n?{top:n.top,left:n.left}:void 0},f.createElement("div",{className:"flex items-center justify-between px-4 py-3 border-b border-gray-100 bg-white sticky top-0 z-10"},f.createElement("h3",{className:"font-bold text-slate-800 text-sm"},"Border"),f.createElement("button",{onClick:t,className:"text-slate-400 hover:bg-gray-100 rounded-full p-1 transition-colors"},f.createElement(Ri,{size:18}))),f.createElement("div",{className:"p-4 space-y-5"},f.createElement("div",{className:"space-y-2"},f.createElement("label",{className:"text-[10px] font-bold text-slate-500 uppercase tracking-wider"},"Style"),f.createElement("div",{className:"grid grid-cols-4 gap-2"},f.createElement("button",{onClick:()=>e({strokeWidth:0,strokeStyle:"none"}),className:`h-10 rounded-lg border flex items-center justify-center transition-all ${A===0||i==="none"?"border-indigo-600 ring-1 ring-indigo-100 bg-indigo-50":"border-gray-200 hover:border-gray-300"}`,title:"No Border"},f.createElement(ro,{size:18,className:"text-slate-600"})),f.createElement("button",{onClick:()=>e({strokeWidth:Math.max(1,A),strokeStyle:"solid"}),className:`h-10 rounded-lg border flex items-center justify-center transition-all ${A>0&&i==="solid"?"border-indigo-600 ring-1 ring-indigo-100 bg-indigo-50":"border-gray-200 hover:border-gray-300"}`,title:"Solid"},l("solid")),f.createElement("button",{onClick:()=>e({strokeWidth:Math.max(1,A),strokeStyle:"dashed"}),className:`h-10 rounded-lg border flex items-center justify-center transition-all ${A>0&&i==="dashed"?"border-indigo-600 ring-1 ring-indigo-100 bg-indigo-50":"border-gray-200 hover:border-gray-300"}`,title:"Dashed"},l("dashed")),f.createElement("button",{onClick:()=>e({strokeWidth:Math.max(1,A),strokeStyle:"dotted"}),className:`h-10 rounded-lg border flex items-center justify-center transition-all ${A>0&&i==="dotted"?"border-indigo-600 ring-1 ring-indigo-100 bg-indigo-50":"border-gray-200 hover:border-gray-300"}`,title:"Dotted"},l("dotted")))),f.createElement("div",{className:"space-y-2"},f.createElement("div",{className:"flex justify-between items-center"},f.createElement("label",{className:"text-[10px] font-bold text-slate-500 uppercase tracking-wider"},"Weight"),f.createElement("div",{className:"w-8 h-6 flex items-center justify-center bg-gray-100 rounded text-xs font-mono text-slate-600"},A)),f.createElement("input",{type:"range",min:"0",max:"50",value:A,onChange:u=>{const h=parseInt(u.target.value);e({strokeWidth:h,strokeStyle:h===0?"none":i==="none"?"solid":i})},className:"w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-indigo-600"})),f.createElement("div",{className:"space-y-2 pt-2 border-t border-gray-100"},f.createElement("div",{className:"flex justify-between items-center"},f.createElement("label",{className:"text-[10px] font-bold text-slate-500 uppercase tracking-wider"},"Corner Rounding"),f.createElement("div",{className:"w-8 h-6 flex items-center justify-center bg-gray-100 rounded text-xs font-mono text-slate-600"},Math.round(o))),f.createElement("input",{type:"range",min:"0",max:"100",value:o,onChange:u=>e({cornerRadius:parseInt(u.target.value)}),className:"w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-indigo-600"}))))},iI=({element:r,onChange:e,onClose:t,position:n})=>{const i=r.textStrokeWidth||0,A=r.textStrokePosition||"behind",o=r.textStrokeStyle||"round";return f.createElement("div",{className:`${n?"fixed":"absolute top-12 left-0"} w-72 bg-white rounded-xl shadow-xl border border-gray-200 z-[9999] flex flex-col overflow-hidden animate-in fade-in zoom-in-95 duration-100 font-sans`,style:n?{top:n.top,left:n.left}:void 0},f.createElement("div",{className:"flex items-center justify-between px-4 py-3 border-b border-gray-100 bg-white sticky top-0 z-10"},f.createElement("h3",{className:"font-bold text-slate-800 text-sm"},"Text Stroke"),f.createElement("button",{onClick:t,className:"text-slate-400 hover:bg-gray-100 rounded-full p-1 transition-colors"},f.createElement(Ri,{size:18}))),f.createElement("div",{className:"p-4 space-y-5"},f.createElement("div",{className:"space-y-2"},f.createElement("div",{className:"flex items-center justify-between"},f.createElement("label",{className:"text-[10px] font-bold text-slate-500 uppercase tracking-wider"},"Stroke"),f.createElement("button",{onClick:()=>e({textStrokeWidth:0}),className:"h-7 w-7 rounded-md border border-gray-200 flex items-center justify-center hover:border-gray-300 transition-all",title:"Disable Stroke"},f.createElement(ro,{size:14,className:"text-slate-500"}))),f.createElement("div",{className:"flex items-center gap-3"},f.createElement("input",{type:"range",min:"0",max:"20",value:i,onChange:l=>e({textStrokeWidth:parseInt(l.target.value,10)}),className:"w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-indigo-600"}),f.createElement("div",{className:"w-8 h-6 flex items-center justify-center bg-gray-100 rounded text-xs font-mono text-slate-600"},i))),f.createElement("div",{className:"space-y-2"},f.createElement("label",{className:"text-[10px] font-bold text-slate-500 uppercase tracking-wider"},"Position"),f.createElement("div",{className:"grid grid-cols-2 gap-2"},f.createElement("button",{onClick:()=>e({textStrokePosition:"behind"}),className:`h-9 rounded-lg border flex items-center justify-center text-xs font-medium transition-all ${A==="behind"?"border-indigo-600 ring-1 ring-indigo-100 bg-indigo-50 text-indigo-700":"border-gray-200 hover:border-gray-300 text-slate-600"}`},"Behind"),f.createElement("button",{onClick:()=>e({textStrokePosition:"front"}),className:`h-9 rounded-lg border flex items-center justify-center text-xs font-medium transition-all ${A==="front"?"border-indigo-600 ring-1 ring-indigo-100 bg-indigo-50 text-indigo-700":"border-gray-200 hover:border-gray-300 text-slate-600"}`},"On top"))),f.createElement("div",{className:"space-y-2"},f.createElement("label",{className:"text-[10px] font-bold text-slate-500 uppercase tracking-wider"},"Edges"),f.createElement("div",{className:"grid grid-cols-2 gap-2"},f.createElement("button",{onClick:()=>e({textStrokeStyle:"round"}),className:`h-9 rounded-lg border flex items-center justify-center text-xs font-medium transition-all ${o==="round"?"border-indigo-600 ring-1 ring-indigo-100 bg-indigo-50 text-indigo-700":"border-gray-200 hover:border-gray-300 text-slate-600"}`},"Round"),f.createElement("button",{onClick:()=>e({textStrokeStyle:"flat"}),className:`h-9 rounded-lg border flex items-center justify-center text-xs font-medium transition-all ${o==="flat"?"border-indigo-600 ring-1 ring-indigo-100 bg-indigo-50 text-indigo-700":"border-gray-200 hover:border-gray-300 text-slate-600"}`},"Flat")))))},AI=({selection:r,elements:e,updateElement:t,updateElements:n,deleteElement:i,reorderElement:A,settings:o,onDuplicate:l,activeBrandKit:u,setActiveTool:h,onOpenColorPanel:g,activeTool:m,activeColorMode:b})=>{var Ht,Mt,Pt,Dt,or,Nn,fr,br,Kr,Gt,On,Qr;const[p,E]=fe.useState(!1),[x,N]=fe.useState(!1),[U,L]=fe.useState(!1),[M,R]=fe.useState(!1),[Ae,le]=fe.useState(!1),[te,re]=fe.useState(!1),[J,ye]=fe.useState(null),[X,W]=fe.useState(null),[G,z]=fe.useState(null),[Y,j]=fe.useState(null),[O,$]=fe.useState(null),[ce,V]=fe.useState(null),I=fe.useRef(null),F=fe.useRef(null),k=fe.useRef(null),C=fe.useRef(null),Q=fe.useRef(null),T=fe.useRef(null),H=fe.useRef(null),Z=fe.useRef(null),ae=[6,8,10,12,14,16,18,21,24,28,32,36,42,48,56,64,72,80,96,128];if(fe.useEffect(()=>{E(!1),N(!1),L(!1),R(!1),le(!1),re(!1)},[r]),fe.useEffect(()=>{if(!te)return;const lt=Vt=>{var tr;const Tt=Vt.target,Ot=H.current&&H.current.contains(Tt),Xe=(tr=Tt.closest)==null?void 0:tr.call(Tt,"[data-font-size-dropdown]");!Ot&&!Xe&&re(!1)};return document.addEventListener("mousedown",lt),()=>document.removeEventListener("mousedown",lt)},[te]),fe.useEffect(()=>{if(!Ae)return;const lt=Vt=>{var tr;const Tt=Vt.target,Ot=F.current&&F.current.contains(Tt),Xe=(tr=Tt.closest)==null?void 0:tr.call(Tt,"[data-flip-menu]");!Ot&&!Xe&&le(!1)};return document.addEventListener("mousedown",lt),()=>document.removeEventListener("mousedown",lt)},[Ae]),r.length===2){const lt=e.filter(Ot=>r.includes(Ot.id)),Vt=lt.find(Ot=>Ot.type==="image"),Tt=lt.find(Ot=>Ot.type==="shape");if(Vt&&Tt){const Ot=()=>{t(Vt.id,{x:Tt.x,y:Tt.y,width:Tt.width,height:Tt.height,rotation:Tt.rotation,clipShape:Tt.content,cornerRadius:Tt.cornerRadius,strokeColor:Tt.strokeColor,strokeWidth:Tt.strokeWidth,strokeStyle:Tt.strokeStyle,crop:{x:50,y:50,scale:1}}),i(Tt.id)};return f.createElement("div",{className:"flex items-center gap-2 px-2 h-full animate-in fade-in zoom-in-95 duration-200 whitespace-nowrap"},f.createElement("span",{className:"text-sm font-semibold text-slate-500 mr-2"},"2 selected"),f.createElement("div",{className:"h-4 w-px bg-gray-300 mx-2"}),f.createElement("button",{onClick:Ot,className:"flex items-center gap-2 bg-indigo-50 text-indigo-700 px-3 py-1.5 rounded-lg text-sm font-medium hover:bg-indigo-100 transition-colors flex-shrink-0"},f.createElement(c7,{size:16}),"Mask"),f.createElement("div",{className:"h-4 w-px bg-gray-300 mx-2"}),f.createElement("button",{onClick:()=>i(Tt.id),className:"p-1.5 hover:bg-red-50 text-red-500 rounded flex-shrink-0"},f.createElement(XA,{size:16})))}}if(r.length===0)return null;const me=r[0],q=e.find(lt=>lt.id===me);if(!q)return null;const ie=lt=>{n?n(r,lt):t(me,lt)},se=lt=>{const Vt=Math.max(1,lt);if(r.length===1&&q&&q.fontSize){const Tt=Vt/q.fontSize;t(me,{fontSize:Vt,width:q.width*Tt,height:q.height*Tt})}else ie({fontSize:Vt})},be=q.type==="text",K=q.type==="path",Fe=q.type==="shape"||K,nt=q.type==="image",_e=q.type==="qrcode",Ie=q.textStrokeWidth||0,Je=q.textStrokeColor||"#000000",et=Fe?q.backgroundColor??(K?((Ht=q.path)==null?void 0:Ht.fillColor)??null:null):q.backgroundColor,mt=K?q.strokeColor??((Mt=q.path)==null?void 0:Mt.strokeColor)??"#000000":q.strokeColor||"#000000",Ye=K?q.strokeWidth??((Pt=q.path)==null?void 0:Pt.strokeWidth)??0:q.strokeWidth||0,Le=!!et&&et!=="transparent",De=Ye>0&&mt!=="transparent",Ce=lt=>{ie({effect:lt})},pe=()=>{window.dispatchEvent(new CustomEvent("toggle-crop-mode",{detail:{id:me}}))},Be=()=>{ie({clipShape:void 0,cornerRadius:0,strokeWidth:0})},Qe=()=>{h(Xt.FONT)},qe=lt=>{g?g(lt):h(Xt.COLOR)},Re=()=>{h(Xt.EFFECTS)},rt=q.type==="path"&&!!q.path&&r.length===1,Ve=mt==="transparent"?"#000000":mt,At=et&&et!=="transparent"?et:Ve,ht=Ye>0?Ye:2,It=()=>{if(rt&&q.path){ie({backgroundColor:"transparent",path:{...q.path,fillColor:null}});return}ie({backgroundColor:"transparent"})},yt=()=>{const lt={strokeWidth:0,strokeColor:"transparent"};if(rt&&q.path){ie({...lt,path:{...q.path,strokeWidth:0,strokeColor:"transparent"}});return}ie(lt)},Rt=()=>{if(rt&&q.path){ie({backgroundColor:At,path:{...q.path,fillColor:At}});return}ie({backgroundColor:At})},Lt=()=>{const lt={strokeWidth:ht,strokeColor:Ve};if(rt&&q.path){ie({...lt,path:{...q.path,strokeWidth:ht,strokeColor:Ve}});return}ie(lt)};return f.createElement("div",{ref:I,className:"flex items-center gap-3 md:gap-4 px-1 md:px-2 animate-in fade-in zoom-in-95 duration-200 h-full whitespace-nowrap"},be&&f.createElement(f.Fragment,null,f.createElement("div",{className:"flex items-center gap-2 border-r border-gray-200 pr-4 flex-shrink-0"},f.createElement("div",{className:"relative group"},f.createElement("button",{onClick:Qe,className:`flex items-center gap-2 px-2 py-1.5 rounded-lg text-sm font-medium transition-colors w-32 justify-between border ${m===Xt.FONT?"bg-indigo-50 border-indigo-200 text-indigo-700":"hover:bg-gray-100 border-transparent text-slate-700"}`},f.createElement("span",{className:"truncate",style:{fontFamily:q.fontFamily}},q.fontFamily||"Inter"),f.createElement(hu,{size:14,className:"text-slate-400"}))),f.createElement("div",{ref:H,className:"flex items-center bg-gray-50 rounded border border-gray-200 h-8 flex-shrink-0 relative"},f.createElement("button",{onClick:()=>se((q.fontSize||16)-1),className:"px-2 hover:bg-gray-200 h-full flex items-center text-slate-600"},"-"),f.createElement("button",{onClick:lt=>{const Vt=lt.currentTarget.getBoundingClientRect();ye({top:Vt.bottom+4,left:Vt.left}),re(!te)},className:"w-12 text-center text-sm text-slate-700 font-medium hover:bg-gray-100 h-full flex items-center justify-center"},Math.round(q.fontSize||16)),f.createElement("button",{onClick:()=>se((q.fontSize||16)+1),className:"px-2 hover:bg-gray-200 h-full flex items-center text-slate-600"},"+"),te&&J&&Td.createPortal(f.createElement("div",{"data-font-size-dropdown":!0,className:"fixed bg-white border border-gray-200 rounded-lg shadow-xl z-[9999] py-1 w-20 max-h-64 overflow-y-auto",style:{top:J.top,left:J.left}},ae.map(lt=>f.createElement("button",{key:lt,onClick:()=>{se(lt),re(!1)},className:`w-full px-3 py-1.5 text-left text-sm hover:bg-indigo-50 hover:text-indigo-600 ${Math.round(q.fontSize||16)===lt?"bg-indigo-50 text-indigo-600 font-medium":"text-slate-700"}`},lt))),document.body))),f.createElement("div",{className:"flex items-center gap-1 border-r border-gray-200 pr-4 text-slate-600 relative flex-shrink-0"},f.createElement("div",{className:"relative"},f.createElement("button",{onClick:()=>qe("text"),className:`w-6 h-6 rounded-md border border-gray-300 flex items-center justify-center relative overflow-hidden hover:ring-2 hover:ring-indigo-100 transition-all ${m===Xt.COLOR&&b==="text"?"ring-2 ring-indigo-500":""}`,style:{background:q.color}},f.createElement("span",{className:"sr-only"},"Color"))),f.createElement("div",{className:"w-px h-4 bg-gray-300 mx-1 hidden sm:block"}),f.createElement("button",{onClick:()=>ie({fontWeight:q.fontWeight==="bold"?"normal":"bold"}),className:`p-1.5 hover:bg-gray-100 rounded transition-colors ${q.fontWeight==="bold"?"bg-indigo-50 text-indigo-600":""}`,title:"Bold"},f.createElement(Lk,{size:16})),f.createElement("div",{className:"flex items-center bg-gray-50 rounded-lg p-0.5 border border-gray-200 ml-1 flex-shrink-0"},f.createElement("button",{onClick:()=>ie({textAlign:"left"}),className:`p-1 rounded hover:bg-white transition-all ${q.textAlign==="left"||!q.textAlign?"bg-white shadow-sm text-indigo-600":"text-slate-500"}`},f.createElement(b7,{size:14})),f.createElement("button",{onClick:()=>ie({textAlign:"center"}),className:`p-1 rounded hover:bg-white transition-all ${q.textAlign==="center"?"bg-white shadow-sm text-indigo-600":"text-slate-500"}`},f.createElement(v7,{size:14})),f.createElement("button",{onClick:()=>ie({textAlign:"right"}),className:`p-1 rounded hover:bg-white transition-all ${q.textAlign==="right"?"bg-white shadow-sm text-indigo-600":"text-slate-500"}`},f.createElement(y7,{size:14}))),f.createElement("div",{className:"relative ml-1 flex items-center gap-1 flex-shrink-0"},f.createElement("button",{ref:k,onClick:()=>{if(!p&&k.current){const lt=k.current.getBoundingClientRect();z({top:lt.bottom+8,left:lt.left-100})}E(!p)},className:`p-1.5 hover:bg-gray-100 rounded transition-colors ${p?"bg-indigo-50 text-indigo-600":"text-slate-500"}`,title:"Spacing"},f.createElement(r7,{size:16})),f.createElement("button",{onClick:()=>ie({textTransform:q.textTransform==="uppercase"?"none":"uppercase"}),className:`p-1.5 hover:bg-gray-100 rounded transition-colors ${q.textTransform==="uppercase"?"bg-indigo-50 text-indigo-600":"text-slate-500"}`,title:"Uppercase"},f.createElement(wk,{size:16})),p&&G&&f.createElement("div",{className:"fixed w-64 bg-white rounded-xl shadow-xl border border-gray-200 p-4 z-[9999] animate-in fade-in zoom-in-95 duration-100",style:{top:G.top,left:G.left}},f.createElement("div",{className:"space-y-4"},f.createElement("div",null,f.createElement("div",{className:"flex justify-between items-center mb-1"},f.createElement("span",{className:"text-xs font-semibold text-slate-500 uppercase tracking-wider"},"Letter Spacing"),f.createElement("span",{className:"text-xs text-slate-700 font-mono"},Math.round((q.letterSpacing||0)*1e3))),f.createElement("input",{type:"range",min:"-0.1",max:"0.8",step:"0.01",value:q.letterSpacing||0,onChange:lt=>ie({letterSpacing:parseFloat(lt.target.value)}),className:"w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-indigo-600"})),f.createElement("div",null,f.createElement("div",{className:"flex justify-between items-center mb-1"},f.createElement("span",{className:"text-xs font-semibold text-slate-500 uppercase tracking-wider"},"Line Spacing"),f.createElement("span",{className:"text-xs text-slate-700 font-mono"},((Dt=q.lineHeight)==null?void 0:Dt.toFixed(2))||1.4)),f.createElement("input",{type:"range",min:"0.5",max:"2.5",step:"0.05",value:q.lineHeight||1.4,onChange:lt=>ie({lineHeight:parseFloat(lt.target.value)}),className:"w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-indigo-600"}))))),f.createElement("div",{className:"relative ml-1 flex items-center gap-1 flex-shrink-0"},f.createElement("button",{ref:Z,onClick:()=>{if(!M&&Z.current){const lt=Z.current.getBoundingClientRect();V({top:lt.bottom+8,left:lt.left})}R(!M)},className:`p-1.5 hover:bg-gray-100 rounded transition-colors ${M||Ie>0?"bg-indigo-50 text-indigo-600":"text-slate-500"}`,title:"Text Stroke"},f.createElement(a1,{size:16,className:"rotate-90"})),M&&ce&&f.createElement(iI,{element:q,onChange:ie,onClose:()=>R(!1),position:ce}),Ie>0&&f.createElement("button",{onClick:()=>qe("stroke"),className:`w-6 h-6 rounded-full border-2 hover:ring-2 hover:ring-indigo-100 transition-all flex items-center justify-center ${m===Xt.COLOR&&b==="stroke"?"ring-2 ring-indigo-500":"border-gray-300"}`,style:{borderColor:Je},title:"Stroke Color"},f.createElement("div",{className:"w-3 h-3 rounded-full",style:{backgroundColor:Je}}))),f.createElement("div",{className:"w-px h-4 bg-gray-300 mx-1 hidden sm:block"}),f.createElement("div",{className:"relative flex-shrink-0"},f.createElement("button",{onClick:Re,className:`flex items-center gap-1.5 px-2 py-1.5 rounded text-xs font-medium transition-colors ${m===Xt.EFFECTS||((Nn=(or=q.effect)==null?void 0:or.style)==null?void 0:Nn.type)!=="none"||((br=(fr=q.effect)==null?void 0:fr.shape)==null?void 0:br.type)!=="none"?"bg-indigo-50 text-indigo-700":"hover:bg-gray-100 text-slate-600"}`},f.createElement(bl,{size:14}),f.createElement("span",null,"Effects"))))),Fe&&f.createElement("div",{className:"flex items-center gap-2 border-r border-gray-200 pr-4 flex-shrink-0"},f.createElement("div",{className:"flex items-center gap-2 relative"},f.createElement("span",{className:"text-xs font-semibold text-slate-500 hidden sm:inline"},"Color"),f.createElement("div",{className:"relative flex items-center gap-1"},f.createElement("button",{onClick:()=>{Le||Rt(),qe("fill")},className:`w-6 h-6 rounded-md border border-gray-300 hover:ring-2 hover:ring-indigo-100 transition-all flex items-center justify-center ${m===Xt.COLOR&&b==="fill"?"ring-2 ring-indigo-500":""}`,style:{background:et??"transparent"},title:"Fill Color"},!Le&&f.createElement(ro,{size:12,className:"text-slate-400"})),f.createElement("button",{onClick:It,className:`w-6 h-6 rounded-full border border-gray-200 flex items-center justify-center transition-colors ${Le?"text-slate-500 hover:text-red-500 hover:bg-slate-100":"bg-slate-100 text-slate-400"}`,title:"No Fill"},f.createElement(ro,{size:12})))),f.createElement("div",{className:"flex items-center gap-2 relative ml-2"},f.createElement("div",{className:"relative flex items-center gap-1"},f.createElement("button",{ref:Q,onClick:()=>{if(!U&&Q.current){const lt=Q.current.getBoundingClientRect();$({top:lt.bottom+8,left:lt.left})}L(!U)},className:`p-1.5 hover:bg-gray-100 rounded transition-colors border border-transparent ${U?"bg-indigo-50 text-indigo-600 border-indigo-100":"text-slate-600"}`,title:"Border Style"},f.createElement(a1,{size:18,className:"rotate-90"})),f.createElement("button",{onClick:yt,className:`w-7 h-7 rounded-full border border-gray-200 flex items-center justify-center transition-colors ${De?"text-slate-500 hover:text-red-500 hover:bg-slate-100":"bg-slate-100 text-slate-400"}`,title:"No Stroke"},f.createElement(ro,{size:12})),U&&O&&f.createElement(XB,{element:q,onChange:ie,onClose:()=>L(!1),position:O})),f.createElement("div",{className:"relative animate-in fade-in zoom-in-95 duration-200"},f.createElement("button",{onClick:()=>{De||Lt(),qe("stroke")},className:`w-6 h-6 rounded-full border-2 hover:ring-2 hover:ring-indigo-100 transition-all flex items-center justify-center ${m===Xt.COLOR&&b==="stroke"?"ring-2 ring-indigo-500":"border-gray-300"}`,style:{borderColor:De?mt:"#cbd5f5"},title:"Stroke Color"},De?f.createElement("div",{className:"w-3 h-3 rounded-full",style:{backgroundColor:mt}}):f.createElement(ro,{size:12,className:"text-slate-400"})))),f.createElement("div",{className:"relative ml-2 flex-shrink-0"},f.createElement("button",{onClick:Re,className:`flex items-center gap-1.5 px-2 py-1.5 rounded text-xs font-medium transition-colors ${m===Xt.EFFECTS||((Gt=(Kr=q.effect)==null?void 0:Kr.style)==null?void 0:Gt.type)!=="none"?"bg-indigo-50 text-indigo-700":"hover:bg-gray-100 text-slate-600"}`},f.createElement(bl,{size:14}),f.createElement("span",{className:"hidden sm:inline"},"Effects")))),nt&&f.createElement("div",{className:"flex items-center gap-2 border-r border-gray-200 pr-4 flex-shrink-0"},f.createElement("button",{onClick:pe,className:"flex items-center gap-2 hover:bg-gray-100 px-3 py-1.5 rounded-lg text-sm font-medium text-slate-700 transition-colors flex-shrink-0",title:"Crop Image (Double Click)"},f.createElement(Pk,{size:16}),f.createElement("span",{className:"hidden sm:inline"},"Crop")),q.clipShape&&f.createElement("button",{onClick:Be,className:"flex items-center gap-2 hover:bg-gray-100 px-3 py-1.5 rounded-lg text-sm font-medium text-slate-700 transition-colors flex-shrink-0",title:"Detach Mask"},f.createElement(l7,{size:16}),f.createElement("span",{className:"hidden sm:inline"},"Detach Image")),f.createElement("div",{className:"relative flex-shrink-0"},f.createElement("button",{onClick:Re,className:`flex items-center gap-1.5 px-2 py-1.5 rounded text-xs font-medium transition-colors ${m===Xt.EFFECTS||((Qr=(On=q.effect)==null?void 0:On.style)==null?void 0:Qr.type)!=="none"?"bg-indigo-50 text-indigo-700":"hover:bg-gray-100 text-slate-600"}`},f.createElement(bl,{size:14}),f.createElement("span",{className:"hidden sm:inline"},"Effects"))),f.createElement("div",{className:"relative flex-shrink-0"},f.createElement("button",{ref:C,onClick:()=>{if(!x&&C.current){const lt=C.current.getBoundingClientRect();j({top:lt.bottom+8,left:lt.left})}N(!x)},className:`flex items-center gap-1.5 px-2 py-1.5 rounded text-xs font-medium transition-colors ${x?"bg-indigo-50 text-indigo-700":"hover:bg-gray-100 text-slate-600"}`},f.createElement(E7,{size:14}),f.createElement("span",{className:"hidden sm:inline"},"Filters")),x&&Y&&f.createElement(aI,{effect:q.effect,onChange:Ce,onElementUpdate:ie,onClose:()=>N(!1),position:Y})),q.clipShape&&f.createElement("div",{className:"flex items-center gap-2 relative ml-2"},f.createElement("div",{className:"relative"},f.createElement("button",{ref:T,onClick:()=>{if(!U&&T.current){const lt=T.current.getBoundingClientRect();$({top:lt.bottom+8,left:lt.left})}L(!U)},className:`p-1.5 hover:bg-gray-100 rounded transition-colors border border-transparent ${U?"bg-indigo-50 text-indigo-600 border-indigo-100":"text-slate-600"}`,title:"Border Style"},f.createElement(a1,{size:18,className:"rotate-90"})),U&&O&&f.createElement(XB,{element:q,onChange:ie,onClose:()=>L(!1),position:O})),(q.strokeWidth||0)>0&&f.createElement("div",{className:"relative animate-in fade-in zoom-in-95 duration-200"},f.createElement("button",{onClick:()=>qe("stroke"),className:`w-6 h-6 rounded-full border-2 hover:ring-2 hover:ring-indigo-100 transition-all flex items-center justify-center ${m===Xt.COLOR&&b==="stroke"?"ring-2 ring-indigo-500":"border-gray-300"}`,style:{borderColor:q.strokeColor||"#000000"}},f.createElement("div",{className:"w-3 h-3 rounded-full",style:{backgroundColor:q.strokeColor||"#000000"}}))))),_e&&f.createElement("div",{className:"flex items-center gap-2 border-r border-gray-200 pr-4 flex-shrink-0"},f.createElement("div",{className:"relative"},f.createElement("button",{onClick:()=>h(Xt.QR_CODE),className:"flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors hover:bg-gray-100 text-slate-700"},f.createElement(_f,{size:16}),f.createElement("span",{className:"hidden sm:inline"},"Edit QR Code"))),f.createElement("div",{className:"flex items-center gap-2 relative"},f.createElement("span",{className:"text-xs font-semibold text-slate-500 hidden sm:inline"},"Color"),f.createElement("div",{className:"relative"},f.createElement("button",{onClick:()=>qe("text"),className:`w-6 h-6 rounded-md border border-gray-300 hover:ring-2 hover:ring-indigo-100 transition-all ${m===Xt.COLOR&&b==="text"?"ring-2 ring-indigo-500":""}`,style:{background:q.color}}))),f.createElement("div",{className:"flex items-center gap-2 relative"},f.createElement("span",{className:"text-xs font-semibold text-slate-500 hidden sm:inline"},"BG"),f.createElement("div",{className:"relative"},f.createElement("button",{onClick:()=>qe("fill"),className:`w-6 h-6 rounded-md border border-gray-300 hover:ring-2 hover:ring-indigo-100 transition-all ${m===Xt.COLOR&&b==="fill"?"ring-2 ring-indigo-500":""}`,style:{background:q.backgroundColor}})))),f.createElement("div",{className:"flex items-center gap-2 text-slate-600 flex-shrink-0"},f.createElement("div",{className:"relative"},f.createElement("button",{ref:F,onClick:()=>{if(!Ae&&F.current){const lt=F.current.getBoundingClientRect();W({top:lt.bottom+8,left:lt.left})}le(!Ae)},className:`flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${Ae?"bg-indigo-50 text-indigo-700":"hover:bg-gray-100 text-slate-700"}`},f.createElement("span",null,"Flip")),Ae&&X&&f.createElement("div",{"data-flip-menu":!0,className:"fixed w-48 bg-white rounded-xl shadow-xl border border-gray-100 p-1 z-[9999] animate-in fade-in zoom-in-95 duration-100 flex flex-col",style:{top:X.top,left:X.left},onMouseDown:lt=>lt.stopPropagation()},f.createElement("button",{onClick:()=>{ie({flipX:!q.flipX}),le(!1)},className:"flex items-center gap-3 px-3 py-2 text-sm text-slate-700 hover:bg-slate-50 rounded-lg text-left"},f.createElement(qk,{size:16}),f.createElement("span",null,"Flip horizontal")),f.createElement("button",{onClick:()=>{ie({flipY:!q.flipY}),le(!1)},className:"flex items-center gap-3 px-3 py-2 text-sm text-slate-700 hover:bg-slate-50 rounded-lg text-left"},f.createElement(Gk,{size:16}),f.createElement("span",null,"Flip vertical")))),f.createElement("div",{className:"h-4 w-px bg-gray-300 mx-2 hidden sm:block"}),f.createElement("div",{className:"flex items-center gap-2 hidden sm:flex"},f.createElement("span",{className:"text-xs font-medium text-slate-400"},"Opacity"),f.createElement("input",{type:"range",min:"0",max:"1",step:"0.1",value:q.opacity,onChange:lt=>ie({opacity:parseFloat(lt.target.value)}),className:"w-16 h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-slate-800"})),f.createElement("div",{className:"h-4 w-px bg-gray-300 mx-2 hidden sm:block"}),f.createElement("div",{className:"relative"},f.createElement("button",{onClick:()=>h(Xt.POSITION),className:"flex items-center gap-1.5 px-2 py-1.5 rounded text-xs font-medium transition-colors hover:bg-gray-100"},f.createElement(Jp,{size:14}),f.createElement("span",{className:"hidden sm:inline"},"Position"))),f.createElement("button",{onClick:()=>ie({locked:!q.locked}),className:`p-1.5 hover:bg-gray-100 rounded transition-colors ${q.locked?"text-red-500 bg-red-50":""}`,title:q.locked?"Unlock":"Lock"},q.locked?f.createElement(pu,{size:16}):f.createElement(gu,{size:16})),f.createElement("button",{onClick:()=>l(me),className:"p-1.5 hover:bg-gray-100 rounded transition-colors",title:"Duplicate"},f.createElement(Uf,{size:16})),f.createElement("button",{onClick:()=>i(me),className:"p-1.5 hover:bg-red-50 text-red-500 rounded transition-colors"},f.createElement(XA,{size:16}))))},U1=80,sI=({pages:r,activePageId:e,setActivePage:t,addPage:n,duplicatePage:i,deletePage:A,settings:o,onClose:l})=>{fe.useRef(null);const u=U1/o.height,h=o.width*u;return f.createElement("div",{className:"h-32 bg-white border-t border-gray-200 flex flex-col shadow-[-4px_0_15px_rgba(0,0,0,0.05)] animate-in slide-in-from-bottom-10 duration-200 z-10 relative"},f.createElement("div",{className:"h-8 flex items-center justify-between px-4 bg-gray-50 border-b border-gray-100"},f.createElement("span",{className:"text-xs font-semibold text-slate-500 uppercase tracking-wide"},"Pages (",r.length,")"),f.createElement("button",{onClick:l,className:"p-1 hover:bg-gray-200 rounded text-slate-400 hover:text-slate-600"},f.createElement(Ok,{size:16,className:"rotate-180"}))),f.createElement("div",{className:"flex-1 flex items-center overflow-x-auto px-4 gap-4 py-2 custom-scrollbar"},r.map((g,m)=>{const b=g.id===e;return f.createElement("div",{key:g.id,className:"group relative flex flex-col gap-1 items-center"},f.createElement("div",{onClick:()=>t(g.id),className:`relative border-2 rounded-md overflow-hidden cursor-pointer transition-all ${b?"border-indigo-600 ring-2 ring-indigo-100":"border-gray-200 hover:border-gray-300"}`,style:{width:h,height:U1}},f.createElement("div",{className:"bg-white origin-top-left pointer-events-none select-none",style:{width:o.width,height:o.height,transform:`scale(${u})`}},g.elements.map(p=>f.createElement("div",{key:p.id,style:{position:"absolute",left:p.x,top:p.y,width:p.width,height:p.height,transform:`rotate(${p.rotation}deg)`,backgroundColor:p.type==="shape"?p.backgroundColor||"#ccc":void 0,opacity:p.opacity,color:p.color,fontSize:p.fontSize,display:"flex",alignItems:"center",overflow:"hidden"}},p.type==="image"&&f.createElement("img",{src:p.content,className:"w-full h-full object-cover"}),p.type==="shape"&&f.createElement("div",{className:"w-full h-full",style:{borderRadius:p.content==="circle"?"50%":0,clipPath:p.content==="triangle"?"polygon(50% 0%, 0% 100%, 100% 100%)":void 0,background:p.backgroundColor}}),p.type==="text"&&f.createElement("span",{className:"whitespace-nowrap"},p.content)))),f.createElement("div",{className:"absolute inset-0 bg-black/5 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2"},f.createElement("button",{onClick:p=>{p.stopPropagation(),i(g.id)},className:"p-1.5 bg-white rounded-full text-slate-600 shadow-sm hover:text-blue-600 hover:scale-110 transition-all",title:"Duplicate"},f.createElement(Uf,{size:12})),r.length>1&&f.createElement("button",{onClick:p=>{p.stopPropagation(),A(g.id)},className:"p-1.5 bg-white rounded-full text-slate-600 shadow-sm hover:text-red-600 hover:scale-110 transition-all",title:"Delete"},f.createElement(XA,{size:12})))),f.createElement("div",{className:"text-[10px] text-slate-500 font-medium truncate max-w-[80px]"},m+1,". ",g.name))}),f.createElement("button",{onClick:n,className:"flex-shrink-0 flex flex-col items-center justify-center gap-2 text-slate-400 hover:text-indigo-600 group",style:{width:h,height:U1}},f.createElement("div",{className:"w-10 h-10 rounded-full border border-gray-300 group-hover:border-indigo-300 flex items-center justify-center transition-colors"},f.createElement(no,{size:20})),f.createElement("span",{className:"text-[10px] font-medium"},"Add Page"))))},oI=({open:r,title:e,description:t,upgradeUrl:n,onClose:i})=>r?f.createElement("div",{className:"fixed inset-0 z-[200] flex items-center justify-center bg-black/40 px-4","data-no-export":!0},f.createElement("div",{className:"w-full max-w-md rounded-2xl bg-white shadow-2xl border border-slate-200 overflow-hidden"},f.createElement("div",{className:"flex items-center justify-between px-5 py-4 border-b border-slate-100"},f.createElement("div",{className:"flex items-center gap-3"},f.createElement("div",{className:"h-9 w-9 rounded-full bg-amber-50 text-amber-600 flex items-center justify-center"},f.createElement(Lo,{size:18})),f.createElement("div",null,f.createElement("div",{className:"text-sm font-semibold text-slate-900"},e),f.createElement("div",{className:"text-xs text-slate-500"},"Fraczled Pro"))),f.createElement("button",{onClick:i,className:"p-1.5 rounded-full text-slate-400 hover:text-slate-600 hover:bg-slate-100"},f.createElement(Ri,{size:18}))),f.createElement("div",{className:"px-5 py-4 text-sm text-slate-600"},t),f.createElement("div",{className:"px-5 pb-5 flex items-center justify-end gap-2"},f.createElement("button",{onClick:i,className:"px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-800"},"Not now"),n?f.createElement("a",{href:n,target:"_blank",rel:"noreferrer",className:"px-4 py-2 rounded-lg bg-slate-900 text-white text-sm font-semibold hover:bg-slate-800"},"Upgrade"):f.createElement("button",{disabled:!0,className:"px-4 py-2 rounded-lg bg-slate-300 text-white text-sm font-semibold cursor-not-allowed"},"Upgrade")))):null,lI=[{name:"Instagram Post",width:1080,height:1080,unit:"px",dpi:72,icon:f.createElement(AB,{size:20})},{name:"Instagram Story",width:1080,height:1920,unit:"px",dpi:72,icon:f.createElement(d7,{size:20})},{name:"Facebook Post",width:1200,height:630,unit:"px",dpi:72,icon:f.createElement(Kk,{size:20})},{name:"Twitter Post",width:1200,height:675,unit:"px",dpi:72,icon:f.createElement(x7,{size:20})},{name:"LinkedIn Banner",width:1584,height:396,unit:"px",dpi:72,icon:f.createElement(sB,{size:20})},{name:"YouTube Thumbnail",width:1280,height:720,unit:"px",dpi:72,icon:f.createElement(mu,{size:20})}],cI=[{name:"Business Card",width:3.5,height:2,unit:"in",dpi:300,bleed:.25,icon:f.createElement(Hk,{size:20})},{name:"Postcard (4x6)",width:6,height:4,unit:"in",dpi:300,bleed:.25,icon:f.createElement(Ff,{size:20})},{name:"Flyer (Letter)",width:8.5,height:11,unit:"in",dpi:300,bleed:.25,icon:f.createElement(Ff,{size:20})},{name:"Poster (11x17)",width:11,height:17,unit:"in",dpi:300,bleed:.25,icon:f.createElement(t1,{size:20})},{name:"A4 Document",width:210,height:297,unit:"mm",dpi:300,bleed:6,icon:f.createElement(Ff,{size:20})},{name:"A5 Flyer",width:148,height:210,unit:"mm",dpi:300,bleed:6,icon:f.createElement(Ff,{size:20})}],uI=({open:r,onClose:e,onSkipFuture:t})=>{const[n,i]=fe.useState("templates"),[A,o]=fe.useState(800),[l,u]=fe.useState(600),[h,g]=fe.useState("px"),[m,b]=fe.useState(72),[p,E]=fe.useState(!1),[x,N]=fe.useState(!1),[U,L]=fe.useState(""),[M,R]=fe.useState("all"),[Ae,le]=fe.useState([]),[te,re]=fe.useState(!1);fe.useEffect(()=>{r&&n==="templates"&&(re(!0),FB().then(le).finally(()=>re(!1)))},[r,n]);const J=fe.useMemo(()=>{const Y=Ae,j=U.toLowerCase().trim();let O=M==="all"?Y:Y.filter($=>$.category===M);return j&&(O=O.filter($=>$.name.toLowerCase().includes(j)||$.tags.some(ce=>ce.toLowerCase().includes(j)))),O},[U,M,Ae]),ye=Ae.length>0;if(!r)return null;const X=Y=>{Oe.loadTemplate(Y),x&&Oe.updateSettings({backgroundColor:"transparent"}),p&&t(),e()},W=Y=>{const j=Za(Y.width,Y.unit),O=Za(Y.height,Y.unit),$=Y.bleed?Za(Y.bleed,Y.unit):0,ce=Y.dpi===300,V=ce?Za(.25,"in"):0;Oe.updateSettings({width:j,height:O,unit:Y.unit,dpi:Y.dpi,bleed:$,showBleed:ce,safeArea:V,showSafeArea:ce,backgroundColor:x?"transparent":"#ffffff"});const I=Oe.getSnapshot();I.activePageId&&Oe.updatePageDimensions(I.activePageId,{width:j,height:O,unit:Y.unit}),p&&t(),e()},G=()=>{const Y=Za(A,h),j=Za(l,h);Oe.updateSettings({width:Y,height:j,unit:h,dpi:m,bleed:0,showBleed:!1,safeArea:0,showSafeArea:!1,backgroundColor:x?"transparent":"#ffffff"});const O=Oe.getSnapshot();O.activePageId&&Oe.updatePageDimensions(O.activePageId,{width:Y,height:j,unit:h}),p&&t(),e()},z=n==="social"?lI:cI;return f.createElement("div",{className:"fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm animate-in fade-in duration-200"},f.createElement("div",{className:"bg-white rounded-2xl shadow-2xl w-full max-w-3xl max-h-[85vh] overflow-hidden flex flex-col animate-in zoom-in-95 duration-200"},f.createElement("div",{className:"flex items-center justify-between px-6 py-4 border-b border-gray-100"},f.createElement("h2",{className:"text-xl font-bold text-slate-800"},"Create New Design"),f.createElement("button",{onClick:e,className:"p-2 hover:bg-gray-100 rounded-full transition-colors text-slate-400 hover:text-slate-600"},f.createElement(Ri,{size:20}))),f.createElement("div",{className:"flex gap-2 px-6 py-3 border-b border-gray-100 bg-gray-50/50"},f.createElement("button",{onClick:()=>i("templates"),className:`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${n==="templates"?"bg-indigo-600 text-white":"bg-white text-slate-600 hover:bg-gray-100 border border-gray-200"}`},"Templates"),f.createElement("button",{onClick:()=>i("social"),className:`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${n==="social"?"bg-indigo-600 text-white":"bg-white text-slate-600 hover:bg-gray-100 border border-gray-200"}`},"Social Media"),f.createElement("button",{onClick:()=>i("print"),className:`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${n==="print"?"bg-indigo-600 text-white":"bg-white text-slate-600 hover:bg-gray-100 border border-gray-200"}`},"Print"),f.createElement("button",{onClick:()=>i("custom"),className:`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${n==="custom"?"bg-indigo-600 text-white":"bg-white text-slate-600 hover:bg-gray-100 border border-gray-200"}`},"Custom Size")),f.createElement("div",{className:"flex-1 overflow-y-auto p-6"},n==="templates"?f.createElement("div",{className:"space-y-4"},f.createElement("div",{className:"relative"},f.createElement(VA,{className:"absolute left-3 top-2.5 text-slate-400",size:16}),f.createElement("input",{type:"text",placeholder:"Search templates...",className:"w-full pl-9 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all placeholder:text-slate-400",value:U,onChange:Y=>L(Y.target.value)})),f.createElement("div",{className:"flex gap-1 flex-wrap"},f.createElement("button",{onClick:()=>R("all"),className:`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors ${M==="all"?"bg-slate-900 text-white":"bg-slate-100 text-slate-600 hover:bg-slate-200"}`},"All"),m1.map(Y=>f.createElement("button",{key:Y.id,onClick:()=>R(Y.id),className:`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors ${M===Y.id?"bg-slate-900 text-white":"bg-slate-100 text-slate-600 hover:bg-slate-200"}`},Y.name))),te?f.createElement("div",{className:"flex flex-col items-center justify-center py-12 text-center"},f.createElement(du,{size:32,className:"text-indigo-500 mb-4 animate-spin"}),f.createElement("p",{className:"text-sm text-slate-500"},"Loading templates...")):ye?J.length===0?f.createElement("div",{className:"flex flex-col items-center justify-center py-8 text-center"},f.createElement(VA,{size:32,className:"text-slate-300 mb-3"}),f.createElement("p",{className:"text-sm text-slate-500"},"No templates found"),f.createElement("p",{className:"text-xs text-slate-400 mt-1"},"Try a different search term")):f.createElement("div",{className:"grid grid-cols-2 sm:grid-cols-3 gap-3"},J.map(Y=>f.createElement("button",{key:Y.id,onClick:()=>X(Y),className:"group relative flex flex-col rounded-xl border border-slate-200 hover:border-indigo-400 hover:shadow-lg transition-all bg-white overflow-hidden"},f.createElement("div",{className:"aspect-square bg-slate-50 flex items-center justify-center overflow-hidden"},Y.thumbnail?f.createElement("img",{src:Y.thumbnail,alt:Y.name,className:"w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"}):f.createElement(xc,{size:32,className:"text-slate-300"})),f.createElement("div",{className:"p-2 border-t border-slate-100"},f.createElement("span",{className:"text-xs font-medium text-slate-700 group-hover:text-slate-900 line-clamp-1"},Y.name),f.createElement("span",{className:"text-[10px] text-slate-400 capitalize block"},Y.category.replace("-"," ")))))):f.createElement("div",{className:"flex flex-col items-center justify-center py-12 text-center"},f.createElement(xc,{size:48,className:"text-slate-300 mb-4"}),f.createElement("h3",{className:"text-sm font-semibold text-slate-700 mb-2"},"No Templates Yet"),f.createElement("p",{className:"text-xs text-slate-500 max-w-[200px]"},"Choose a blank canvas size from Social Media or Print tabs."))):n!=="custom"?f.createElement("div",{className:"grid grid-cols-2 sm:grid-cols-3 gap-4"},z.map(Y=>f.createElement("button",{key:Y.name,onClick:()=>W(Y),className:"group flex flex-col items-center p-4 rounded-xl border border-gray-200 hover:border-indigo-300 hover:bg-indigo-50/50 transition-all text-left"},f.createElement("div",{className:"w-16 h-16 rounded-xl bg-gradient-to-br from-indigo-100 to-purple-100 flex items-center justify-center text-indigo-600 mb-3 group-hover:from-indigo-200 group-hover:to-purple-200 transition-colors"},Y.icon),f.createElement("span",{className:"font-semibold text-slate-800 text-sm"},Y.name),f.createElement("span",{className:"text-xs text-slate-400 mt-1"},Y.width," x ",Y.height," ",Y.unit),Y.dpi===300&&f.createElement("span",{className:"text-[10px] bg-amber-100 text-amber-700 px-2 py-0.5 rounded-full mt-2 font-medium"},"300 DPI")))):f.createElement("div",{className:"max-w-md mx-auto space-y-6"},f.createElement("div",{className:"grid grid-cols-2 gap-4"},f.createElement("div",null,f.createElement("label",{className:"block text-xs font-bold text-slate-500 uppercase mb-2"},"Width"),f.createElement("input",{type:"number",value:A,onChange:Y=>o(Number(Y.target.value)),className:"w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"})),f.createElement("div",null,f.createElement("label",{className:"block text-xs font-bold text-slate-500 uppercase mb-2"},"Height"),f.createElement("input",{type:"number",value:l,onChange:Y=>u(Number(Y.target.value)),className:"w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"}))),f.createElement("div",{className:"grid grid-cols-2 gap-4"},f.createElement("div",null,f.createElement("label",{className:"block text-xs font-bold text-slate-500 uppercase mb-2"},"Unit"),f.createElement("select",{value:h,onChange:Y=>g(Y.target.value),className:"w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent bg-white"},f.createElement("option",{value:"px"},"Pixels (px)"),f.createElement("option",{value:"in"},"Inches (in)"),f.createElement("option",{value:"mm"},"Millimeters (mm)"),f.createElement("option",{value:"pt"},"Points (pt)"))),f.createElement("div",null,f.createElement("label",{className:"block text-xs font-bold text-slate-500 uppercase mb-2"},"DPI"),f.createElement("select",{value:m,onChange:Y=>b(Number(Y.target.value)),className:"w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent bg-white"},f.createElement("option",{value:72},"72 (Web)"),f.createElement("option",{value:150},"150 (Medium)"),f.createElement("option",{value:300},"300 (Print)")))),f.createElement("button",{onClick:G,className:"w-full py-3 bg-indigo-600 text-white font-semibold rounded-lg hover:bg-indigo-700 transition-colors"},"Create Custom Document"))),f.createElement("div",{className:"flex items-center justify-between px-6 py-4 border-t border-gray-100 bg-gray-50/50"},f.createElement("div",{className:"flex items-center gap-4"},f.createElement("label",{className:"flex items-center gap-2 text-sm text-slate-600 cursor-pointer select-none"},f.createElement("input",{type:"checkbox",checked:x,onChange:Y=>N(Y.target.checked),className:"w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"}),"Transparent background"),f.createElement("label",{className:"flex items-center gap-2 text-sm text-slate-400 cursor-pointer select-none"},f.createElement("input",{type:"checkbox",checked:p,onChange:Y=>E(Y.target.checked),className:"w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"}),"Don't show this again")),f.createElement("button",{onClick:e,className:"px-4 py-2 text-sm text-slate-600 hover:bg-gray-100 rounded-lg transition-colors"},"Skip for now"))))};function fI(r,e,t,n=8192,i=67108864){const A=r*t,o=e*t,l=A*o;return A>n||o>n||l>i}function hI(r,e,t){const n=r*e*t*t*4;return{bytes:n,mb:n/(1024*1024)}}const dI={format:"png",quality:1,includeBleed:!1,progressive:!1,tileSize:2048};class YB{constructor(e,t){this.abortController=null,this.cache=e??DB(),this.config={...dI,...t}}shouldUseTiling(e,t,n){const i=kd()?4096:8192,A=kd()?16777216:67108864;return fI(e,t,n,i,A)}getSafePixelRatio(e,t,n){return wB({kind:this.config.format==="png"||this.config.format==="jpeg"?"web":"print",width:e,height:t,dpi:n??this.config.dpi,pixelRatio:this.config.pixelRatio})}estimateMemory(e,t,n){return hI(e,t,n)}async warmCache(e,t,n){var A;const i=e.filter(o=>this.cache.shouldCache(o));if(i.length===0){n==null||n({stage:"caching",percent:100,message:"No elements to cache"});return}for(let o=0;o<i.length;o++){const l=i[o];if(!this.cache.get(l,t)&&(n==null||n({stage:"caching",percent:(o+1)/i.length*100,message:`Caching element ${o+1} of ${i.length}`}),(A=this.abortController)!=null&&A.signal.aborted))throw new Error("Export aborted")}}async exportWithFallback(e,t,n,i,A){this.abortController=new AbortController;try{A==null||A({stage:"preparing",percent:0,message:"Preparing export..."});const o=this.estimateMemory(t,n,i);if(this.shouldUseTiling(t,n,i)&&this.config.progressive){const h=c1(i,t,n,{maxCanvasSize:kd()?4096:8192,clampForIOS:!0});A==null||A({stage:"preparing",percent:10,message:`Adjusted pixel ratio to ${h.toFixed(2)} for memory constraints`})}A==null||A({stage:"rendering",percent:20,message:"Capturing design..."});const u=await e();if(this.abortController.signal.aborted)throw new Error("Export aborted");return A==null||A({stage:"encoding",percent:90,message:"Encoding output..."}),A==null||A({stage:"complete",percent:100,message:"Export complete"}),u}finally{this.abortController=null}}async exportPages(e,t,n,i){this.abortController=new AbortController;const A=[];try{for(let o=0;o<e.length;o++){const l=e[o];if(i==null||i({stage:"rendering",percent:o/e.length*100,currentPage:o+1,totalPages:e.length,message:`Exporting page ${o+1} of ${e.length}`}),this.abortController.signal.aborted)throw new Error("Export aborted");const u=await n(l.id);A.push(u)}return i==null||i({stage:"complete",percent:100,totalPages:e.length,message:"All pages exported"}),A}finally{this.abortController=null}}abort(){var e;(e=this.abortController)==null||e.abort()}isExporting(){return this.abortController!==null}}let F1=null;function gI(){return F1||(F1=new YB),F1}function pI(r={}){const{useGlobal:e=!0,...t}=r,n=fe.useRef(e?gI():new YB(void 0,t));RB();const[i,A]=fe.useState(null),[o,l]=fe.useState(!1),u=fe.useCallback(async(p,E,x,N)=>{l(!0),A({stage:"preparing",percent:0});try{return await n.current.exportWithFallback(p,E,x,N,A)}finally{l(!1),setTimeout(()=>A(null),500)}},[]),h=fe.useCallback(()=>{n.current.abort(),l(!1),A(null)},[]),g=fe.useCallback((p,E,x)=>n.current.shouldUseTiling(p,E,x),[]),m=fe.useCallback((p,E,x)=>n.current.getSafePixelRatio(p,E,x),[]),b=fe.useCallback((p,E,x)=>n.current.estimateMemory(p,E,x),[]);return{exportWithProgress:u,progress:i,isExporting:o,cancel:h,shouldUseTiling:g,getSafePixelRatio:m,estimateMemory:b,pipeline:n.current}}const _1=()=>Math.random().toString(36).substring(2,9),mI=({apiKey:r,className:e,showCredit:t,customPanels:n})=>{const i=fe.useSyncExternalStore(pe=>Oe.subscribe(pe),()=>Oe.getSnapshot()),[A,o]=fe.useState(()=>Oe.getLicenseStatus());fe.useEffect(()=>(o(Oe.getLicenseStatus()),Oe.subscribeLicense(()=>{o(Oe.getLicenseStatus())})),[]);const l=Od();pI();const u=A.entitlements.ai,h=A.entitlements.export.web,g=A.entitlements.export.print,m=A.showWatermark||t!==!1,b=A.showWatermark,p=A.upgradeUrl,E=A.entitlements.features||{},[x,N]=fe.useState(null),U={[Xt.TEMPLATES]:"Templates",[Xt.DESIGN]:"Design",[Xt.ELEMENTS]:"Elements",[Xt.TEXT]:"Text",[Xt.IMAGES]:"Images",[Xt.BRAND]:"Brand",[Xt.UPLOADS]:"Uploads",[Xt.QR_CODE]:"QR Codes",[Xt.LAYERS]:"Layers",[Xt.COLOR]:"Color",[Xt.FONT]:"Fonts",[Xt.EFFECTS]:"Effects",[Xt.POSITION]:"Position",[Xt.PROJECTS]:"Projects",[Xt.DRAW]:"Draw"},L={[Xt.TEMPLATES]:"templates",[Xt.DESIGN]:"design",[Xt.ELEMENTS]:"elements",[Xt.TEXT]:"text",[Xt.IMAGES]:"images",[Xt.BRAND]:"brand",[Xt.UPLOADS]:"uploads",[Xt.QR_CODE]:"qrcode",[Xt.LAYERS]:"layers"},M=fe.useMemo(()=>{const pe=new Map;return(n||[]).forEach(Be=>{Be!=null&&Be.id&&pe.set(Be.id,Be)}),pe},[n]);fe.useEffect(()=>{n!=null&&n.length&&n.forEach(pe=>{pe!=null&&pe.id&&Object.values(Xt).includes(pe.id)&&console.warn(`[Editor] Custom panel id "${pe.id}" conflicts with a built-in tool id.`)})},[n]);const R=fe.useCallback(pe=>{if(!pe)return"";const Be=M.get(pe);return Be!=null&&Be.label?Be.label:U[pe]||String(pe)},[M,U]),Ae=pe=>{if(!A.isValid)return!1;if(!pe)return!0;const Be=M.get(pe);if(Be!=null&&Be.feature)return E[Be.feature]!==!1;const Qe=L[pe];return Qe?E[Qe]!==!1:!0},le=(pe,Be)=>{switch(pe){case"ai":N({title:"Unlock Magic Write",description:"Upgrade to generate headlines, rewrites, and AI-assisted copy inside the editor."});break;case"export-web":N({title:"Unlock Web Exports",description:"Upgrade to export assets for web usage without restrictions."});break;case"export-print":default:N({title:"Unlock Print Exports",description:"Upgrade to export print-ready PDFs and high-resolution PNGs."});break;case"feature":N({title:`Unlock ${Be||"this feature"}`,description:"Upgrade to access this feature for your workspace."});break}},[te,re]=fe.useState(null),[J,ye]=fe.useState(null),[X,W]=fe.useState("select"),[G,z]=fe.useState(!1),[Y,j]=fe.useState(!1),[O,$]=fe.useState(()=>typeof window<"u"?localStorage.getItem("fraczled_skip_new_doc_modal")!=="true":!0),[ce,V]=fe.useState(!1),[I,F]=fe.useState(""),[k,C]=fe.useState(!1),[Q,T]=fe.useState(!1),[H,Z]=fe.useState(!1),ae=()=>{i.pages.some(Be=>Be.elements&&Be.elements.length>0)?T(!0):$(!0)},me=()=>{T(!1),Z(!0),F(i.title||"My Design"),V(!0)},q=()=>{T(!1),Oe.reset({transparent:!1}),$(!0)},ie=()=>{localStorage.setItem("fraczled_skip_new_doc_modal","true")},se=fe.useMemo(()=>{const pe=i.brandKits.find(Be=>Be.id===i.activeBrandKitId);return pe?pe.colors:[]},[i.brandKits,i.activeBrandKitId]),be=fe.useMemo(()=>i.brandKits.find(pe=>pe.id===i.activeBrandKitId),[i.brandKits,i.activeBrandKitId]),K=i.pages.find(pe=>pe.id===i.activePageId),Fe=fe.useMemo(()=>K?K.elements:[],[K]),nt=fe.useMemo(()=>i.pages.findIndex(pe=>pe.id===i.activePageId)+1,[i.pages,i.activePageId]),_e=fe.useMemo(()=>K?{...i.settings,width:K.width??i.settings.width,height:K.height??i.settings.height,unit:K.unit??i.settings.unit}:i.settings,[i.settings,K]);fe.useEffect(()=>{i.pages.forEach(pe=>{pe.elements.forEach(Be=>{Be.fontFamily&&tu(Be.fontFamily)})})},[]),fe.useEffect(()=>{be!=null&&be.customFonts&&be.customFonts.forEach(pe=>{Fw(pe.name,pe.url)})},[be]);const Ie=pe=>{if(pe&&!Ae(pe)){le("feature",R(pe)||"this feature");return}if(pe===Xt.QR_CODE&&te!==Xt.QR_CODE){const Be=(K==null?void 0:K.width)??i.settings.width,Qe=(K==null?void 0:K.height)??i.settings.height,qe={id:_1(),type:"qrcode",name:"QR Code",visible:!0,content:"https://example.com",x:Be/2-75,y:Qe/2-75,width:150,height:150,rotation:0,opacity:1,zIndex:Fe.length+1,locked:!1,color:"#000000",backgroundColor:"#ffffff",effect:{style:{type:"none",params:{}},shape:{type:"none",params:{curve:0}}}};Oe.addElement(qe),W("select")}pe===Xt.DRAW?W("pen"):(X==="pen"||X==="direct-select")&&W("select"),re(pe)},Je=pe=>{ye(pe),re(Xt.COLOR)};fe.useEffect(()=>{const pe=Be=>{if(Be.target.tagName==="INPUT"||Be.target.tagName==="TEXTAREA")return;const Qe=Be.metaKey||Be.ctrlKey,qe=Be.shiftKey,Re=Be.key.toLowerCase();if(!Qe&&!Be.altKey)switch(Re){case"v":W("select");return;case"t":W("text");return;case"r":W("rotate");return;case"s":W("scale");return;case"z":W("zoom");return;case"h":W("hand");return;case"p":W("pen");return;case"a":W("direct-select");return}if(Qe&&Re==="n"&&(Be.preventDefault(),confirm("Create new design? Unsaved changes will be lost.")&&Oe.loadJSON(JSON.stringify({...i,pages:[{...i.pages[0],elements:[]}],selection:[]}))),Qe&&Re==="z"&&(Be.preventDefault(),qe?Oe.redo():Oe.undo()),Qe&&Re==="y"&&(Be.preventDefault(),Oe.redo()),Qe&&Re==="a"&&(Be.preventDefault(),Oe.selectAll()),Be.key==="Escape"&&(Oe.deselectAll(),re(null),z(!1),W("select")),(Be.key==="Delete"||Be.key==="Backspace")&&Oe.deleteSelection(),Qe&&Re==="g"&&(Be.preventDefault(),qe?Oe.ungroupSelection():Oe.groupSelection()),i.selection.length>0){const rt=qe?10:1;Be.key==="ArrowUp"&&(Be.preventDefault(),Oe.nudgeSelection(0,-rt)),Be.key==="ArrowDown"&&(Be.preventDefault(),Oe.nudgeSelection(0,rt)),Be.key==="ArrowLeft"&&(Be.preventDefault(),Oe.nudgeSelection(-rt,0)),Be.key==="ArrowRight"&&(Be.preventDefault(),Oe.nudgeSelection(rt,0))}if(Qe&&(Be.key==="="||Be.key==="+")&&(Be.preventDefault(),Oe.setZoom(Math.min(200,i.zoom+10))),Qe&&Be.key==="-"&&(Be.preventDefault(),Oe.setZoom(Math.max(10,i.zoom-10))),Qe&&Be.key==="0"&&(Be.preventDefault(),window.dispatchEvent(new CustomEvent("canvas-fit-to-screen"))),Qe&&Re==="c"&&(Be.preventDefault(),Oe.copy()),Qe&&Re==="x"&&(Be.preventDefault(),Oe.cut()),Qe&&Re==="v"&&(Be.preventDefault(),Oe.paste()),Qe&&Re==="d"&&(Be.preventDefault(),Oe.duplicateSelection()),Qe&&Be.key==="]"&&(Be.preventDefault(),i.selection.forEach(rt=>Oe.reorderElement(rt,qe?"front":"forward"))),Qe&&Be.key==="["&&(Be.preventDefault(),i.selection.forEach(rt=>Oe.reorderElement(rt,qe?"back":"backward"))),Qe&&Re==="l"&&(Be.preventDefault(),i.selection.forEach(rt=>{const Ve=Fe.find(At=>At.id===rt);Ve&&Oe.updateElement(rt,{locked:!Ve.locked})})),Qe&&qe)switch(Re){case"l":Be.preventDefault(),Oe.alignSelection("left");break;case"c":Be.preventDefault(),Oe.alignSelection("center");break;case"r":Be.preventDefault(),Oe.alignSelection("right");break;case"t":Be.preventDefault(),Oe.alignSelection("top");break;case"m":Be.preventDefault(),Oe.alignSelection("middle");break;case"b":Be.preventDefault(),Oe.alignSelection("bottom");break}};return window.addEventListener("keydown",pe),()=>window.removeEventListener("keydown",pe)},[i.selection,i.zoom,i.pages]);const et=(pe,Be,Qe,qe,Re)=>{const rt=Be==="heading"?32:Be==="subheading"?24:14,Ve=Be==="heading"?"bold":Be==="subheading"?"semibold":"normal",At=(K==null?void 0:K.width)??i.settings.width;(K==null?void 0:K.height)??i.settings.height;const It=At-40*2;let yt=200,Rt=rt*1.5,Lt=yt;try{const Dt=document.createElement("canvas").getContext("2d");if(Dt){Dt.font=`${Ve==="bold"?"bold":Ve==="semibold"?"600":"normal"} ${rt}px ${(Re==null?void 0:Re.fontFamily)||"Inter"}, sans-serif`;const or=Dt.measureText(pe);Lt=Math.ceil(or.width)+10,yt=Lt}}catch(Pt){console.warn("Could not measure text width automatically",Pt)}const Ht=Lt>It;if(Ht){yt=It;const Pt=Math.ceil(Lt/It);Rt=rt*1.5*Pt}const Mt={id:_1(),type:"text",name:pe.substring(0,20),visible:!0,content:pe,x:Qe!==void 0?Qe:-1,y:qe!==void 0?qe:-1,width:yt,height:Rt,fontSize:rt,fontWeight:Ve,fontFamily:(Re==null?void 0:Re.fontFamily)||"Inter",color:(Re==null?void 0:Re.color)||"#1e293b",rotation:0,opacity:1,zIndex:Fe.length+1,locked:!1,autoWidth:!Ht,textStrokeWidth:0,textStrokeColor:"#000000",textStrokePosition:"behind",textStrokeStyle:"round",effect:{style:{type:"none",params:{}},shape:{type:"none",params:{curve:0}}}};Oe.addElement(Mt)},mt=pe=>{const Be=pe==="line"?200:100,Qe=pe==="line"?4:100,qe={id:_1(),type:"shape",name:pe.charAt(0).toUpperCase()+pe.slice(1),visible:!0,content:pe,x:-1,y:-1,width:Be,height:Qe,backgroundColor:pe==="line"?"transparent":"#cbd5e1",strokeColor:pe==="line"?"#000000":void 0,strokeWidth:pe==="line"?4:0,rotation:0,opacity:1,zIndex:Fe.length+1,locked:!1,effect:{style:{type:"none",params:{}},shape:{type:"none",params:{curve:0}}}};Oe.addElement(qe)},Ye=async pe=>{var Qe;if(typeof document<"u"&&"fonts"in document&&((Qe=document.fonts)!=null&&Qe.ready))try{await document.fonts.ready}catch(qe){console.warn("Font readiness check failed",qe)}const Be=Array.from(pe.querySelectorAll("img"));await Promise.all(Be.map(qe=>qe.complete&&qe.naturalWidth!==0?Promise.resolve():new Promise(Re=>{const rt=()=>Re();qe.addEventListener("load",rt,{once:!0}),qe.addEventListener("error",rt,{once:!0})}))),await Promise.all(Be.map(qe=>typeof qe.decode!="function"?Promise.resolve():qe.decode().catch(()=>{}))),await new Promise(requestAnimationFrame),await new Promise(requestAnimationFrame)},Le=async pe=>{if(pe==="json"){const rt=Oe.exportJSON(),Ve=new Blob([rt],{type:"application/json"}),At=URL.createObjectURL(Ve),ht=document.createElement("a");ht.href=At,ht.download=`${i.title||"design"}.json`,document.body.appendChild(ht),ht.click(),document.body.removeChild(ht),URL.revokeObjectURL(At);return}const Be=pe.startsWith("print");if(pe==="web"&&!h||Be&&!g){le(pe==="web"?"export-web":"export-print");return}Oe.deselectAll(),await new Promise(rt=>setTimeout(rt,100));const Qe=pe.startsWith("print"),qe=pe.includes("pdf"),Re=async(rt,Ve,At,ht,It)=>{const yt=document.getElementById(`page-canvas-${rt}`);if(!yt)throw new Error(`Page ${rt} not found`);await Ye(yt);const Rt=Ve+ht*2,Lt=At+ht*2,Ht=wB({kind:Qe?"print":"web",width:Rt,height:Lt});return await bf(yt,{quality:1,pixelRatio:Ht,width:Rt,height:Lt,backgroundColor:It,cacheBust:!0,style:{transform:`translate(${ht}px, ${ht}px) scale(1)`,transformOrigin:"top left",boxShadow:"none",margin:"0",border:"none"},filter:Mt=>!(Mt.tagName&&Mt.hasAttribute("data-no-export"))})};try{const rt=i.pages,Ve=Qe&&_e.showBleed?_e.bleed:0;if(qe){const At=rt[0],ht=At.width??i.settings.width,It=At.height??i.settings.height,yt=ht>It?"landscape":"portrait",Rt=new ur({orientation:yt,unit:"px",format:[ht,It],hotfixes:["px_scaling"]});for(let Lt=0;Lt<rt.length;Lt++){const Ht=rt[Lt],Mt=Ht.width??i.settings.width,Pt=Ht.height??i.settings.height;i.activePageId!==Ht.id&&(Oe.setActivePage(Ht.id),await new Promise(or=>setTimeout(or,50)));const Dt=await Re(Ht.id,Mt,Pt,Ve,_e.backgroundColor||"#ffffff");Lt>0&&Rt.addPage([Mt,Pt],Mt>Pt?"landscape":"portrait"),Rt.addImage(Dt,"PNG",0,0,Mt,Pt)}Rt.save(`${i.title.replace(/\s+/g,"-")}.pdf`)}else for(let At=0;At<rt.length;At++){const ht=rt[At];i.activePageId!==ht.id&&(Oe.setActivePage(ht.id),await new Promise(Mt=>setTimeout(Mt,50)));const It=ht.width??i.settings.width,yt=ht.height??i.settings.height,Rt=await Re(ht.id,It,yt,Ve,_e.backgroundColor||"#ffffff"),Lt=document.createElement("a"),Ht=rt.length>1?`-Page${At+1}`:"";Lt.download=`${i.title.replace(/\s+/g,"-").toLowerCase()}${Ht}.png`,Lt.href=Rt,Lt.click(),rt.length>1&&await new Promise(Mt=>setTimeout(Mt,500))}}catch(rt){console.error("Export failed",rt),alert("Failed to export. Please try again.")}},De=()=>{if(!A.isValid){le("design");return}F(i.title||"My Design"),V(!0)},Ce=async()=>{if(!I.trim())return;C(!0);let pe="";try{const Be=i.activePageId,Qe=document.getElementById(`page-canvas-${Be}`),qe=i.pages.find(Re=>Re.id===Be);if(Qe&&qe){const Re=Ld({targetSize:200,width:qe.width??i.settings.width,height:qe.height??i.settings.height});pe=await bf(Qe,{quality:.9,pixelRatio:Re,style:{margin:"0",overflow:"hidden",transform:"scale(1)",transformOrigin:"top left"},filter:rt=>{var Ve;return!((Ve=rt.hasAttribute)!=null&&Ve.call(rt,"data-no-export"))}})}}catch(Be){console.error("Failed to capture thumbnail:",Be)}Oe.saveDesign(I.trim(),pe),F(""),V(!1),C(!1),H&&(Z(!1),Oe.reset({transparent:!1}),$(!0))};return l?f.createElement("div",{className:"fixed inset-0 bg-gradient-to-br from-slate-900 to-slate-800 flex items-center justify-center p-6"},f.createElement("div",{className:"max-w-md text-center"},f.createElement("div",{className:"w-16 h-16 mx-auto mb-6 rounded-2xl bg-indigo-500/20 flex items-center justify-center"},f.createElement("svg",{className:"w-8 h-8 text-indigo-400",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"},f.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5,d:"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"}))),f.createElement("h1",{className:"text-2xl font-bold text-white mb-3"},"Desktop Required"),f.createElement("p",{className:"text-slate-400 leading-relaxed"},"This design editor is optimized for desktop use. Please open it on a computer for the best experience."))):f.createElement("div",{className:`flex flex-col h-screen h-[100dvh] w-screen overflow-hidden bg-slate-50/50 text-slate-900 font-sans ${e||""}`},isLicenseRevoked&&f.createElement("div",{className:"w-full bg-red-600 text-white text-center font-semibold tracking-[0.2em] uppercase py-3"},"This editor needs to be upgraded."),ce&&f.createElement("div",{className:"fixed inset-0 bg-black/50 flex items-center justify-center z-[200]",onClick:()=>V(!1)},f.createElement("div",{className:"bg-white rounded-xl shadow-2xl p-6 w-[90%] max-w-md",onClick:pe=>pe.stopPropagation()},f.createElement("h2",{className:"text-lg font-bold text-slate-800 mb-4"},"Save Design"),f.createElement("input",{type:"text",value:I,onChange:pe=>F(pe.target.value),placeholder:"Enter design name...",className:"w-full px-3 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 mb-4",autoFocus:!0,onKeyDown:pe=>{pe.key==="Enter"&&Ce()}}),f.createElement("div",{className:"flex gap-2"},f.createElement("button",{onClick:Ce,disabled:!I.trim()||k,className:"flex-1 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium text-sm disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2"},k?"Saving...":"Save"),f.createElement("button",{onClick:()=>{V(!1),F(""),Z(!1)},className:"px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-600 rounded-lg font-medium text-sm transition-colors"},"Cancel")))),f.createElement(S7,{title:i.title,onTitleChange:pe=>Oe.setTitle(pe),onExport:Le,onUndo:()=>Oe.undo(),onRedo:()=>Oe.redo(),canUndo:Oe.canUndo(),canRedo:Oe.canRedo(),onToggleSettings:()=>z(!G),zoom:i.zoom,setZoom:pe=>Oe.setZoom(pe),showToolbar:i.selection.length>0,exportAccess:{web:h,print:g},canSaveLoadJson:E.saveLoad!==!1,upgradeUrl:p,onRequestUpgrade:le,onSaveDesign:De,onNewDesign:ae},f.createElement(AI,{selection:i.selection,elements:Fe,updateElement:(pe,Be)=>Oe.updateElement(pe,Be),updateElements:(pe,Be)=>Oe.updateElements(pe,Be),deleteElement:pe=>Oe.deleteElement(pe),reorderElement:(pe,Be)=>Oe.reorderElement(pe,Be),settings:_e,savedColors:i.savedColors,savedGradients:i.savedGradients,onSaveColor:pe=>Oe.addSavedColor(pe),onSaveGradient:pe=>Oe.addSavedGradient(pe),onDuplicate:pe=>Oe.duplicateElement(pe),brandColors:se,activeBrandKit:be,setActiveTool:Ie,onOpenColorPanel:Je,activeTool:te,activeColorMode:J})),f.createElement("div",{className:"flex flex-1 overflow-hidden relative flex-col md:flex-row"},f.createElement(N7,{activeTool:te,setActiveTool:Ie,featureAccess:E,onRequestUpgrade:pe=>le("feature",pe),isLicenseValid:A.isValid,customPanels:n}),te&&(l?f.createElement(d1,{isOpen:!0,onClose:()=>re(null),title:R(te)||"Tools",height:"full"},f.createElement(QB,{activeTool:te,onClose:()=>re(null),onSetActivePanel:Ie,onAddText:et,onAddShape:mt,activeColorMode:J,interactionMode:X,onSetInteractionMode:W,canUseAI:u,isLicenseValid:A.isValid,onRequestUpgrade:le,customPanels:n,title:R(te)})):f.createElement("div",{className:"absolute left-0 right-0 bottom-16 md:bottom-0 md:left-[72px] md:right-auto top-0 z-20 shadow-2xl animate-in slide-in-from-left-4 duration-200"},f.createElement(QB,{activeTool:te,onClose:()=>re(null),onSetActivePanel:Ie,onAddText:et,onAddShape:mt,activeColorMode:J,interactionMode:X,onSetInteractionMode:W,canUseAI:u,isLicenseValid:A.isValid,onRequestUpgrade:le,customPanels:n,title:R(te)}))),f.createElement("div",{className:"flex-1 flex flex-col h-full overflow-hidden relative z-0"},f.createElement(tI,{pages:i.pages,activePageId:i.activePageId,interactionMode:X,zoom:i.zoom,setZoom:pe=>Oe.setZoom(pe),settings:i.settings,selection:i.selection,setSelection:(pe,Be)=>Oe.setSelection(pe,Be),activeGroupId:i.activeGroupId,onSetActiveGroupId:pe=>Oe.setActiveGroupId(pe),updateElement:(pe,Be,Qe)=>Oe.updateElement(pe,Be,Qe),onDuplicate:pe=>Oe.duplicateElement(pe),onDelete:pe=>Oe.deleteElement(pe),onBringToFront:pe=>Oe.reorderElement(pe,"front"),onSendToBack:pe=>Oe.reorderElement(pe,"back"),onResetZoom:()=>Oe.setZoom(65),onSetActivePage:pe=>Oe.setActivePage(pe),onAddPage:pe=>Oe.addPage(pe),onDuplicatePage:pe=>Oe.duplicatePage(pe),onDeletePage:pe=>Oe.deletePage(pe),onRenamePage:(pe,Be)=>Oe.renamePage(pe,Be),onAddText:et,showCredit:m,showWatermark:b}),Y&&f.createElement(sI,{pages:i.pages,activePageId:i.activePageId,setActivePage:pe=>Oe.setActivePage(pe),addPage:()=>Oe.addPage(),duplicatePage:pe=>Oe.duplicatePage(pe),deletePage:pe=>Oe.deletePage(pe),settings:i.settings,onClose:()=>j(!1)}),f.createElement("div",{className:"hidden md:block"},f.createElement(rI,{zoom:i.zoom,setZoom:pe=>Oe.setZoom(pe),pageCount:i.pages.length,activePage:nt,showThumbnails:Y,onToggleThumbnails:()=>j(!Y),pageSize:_e}))),f.createElement(aL,{settings:i.settings,updateSettings:pe=>Oe.updateSettings(pe),isOpen:G,onClose:()=>z(!1),canLoadJson:E.saveLoad!==!1,onLoadJson:pe=>Oe.loadJSON(pe)}),f.createElement(oI,{open:!!x,title:(x==null?void 0:x.title)||"",description:(x==null?void 0:x.description)||"",upgradeUrl:p,onClose:()=>N(null)}),f.createElement(uI,{open:O,onClose:()=>$(!1),onSkipFuture:ie}),Q&&f.createElement("div",{className:"fixed inset-0 bg-black/50 flex items-center justify-center z-[200]",onClick:()=>T(!1)},f.createElement("div",{className:"bg-white rounded-xl shadow-2xl w-full max-w-sm mx-4 overflow-hidden",onClick:pe=>pe.stopPropagation()},f.createElement("div",{className:"p-6"},f.createElement("h3",{className:"text-lg font-semibold text-slate-800 mb-2"},"Unsaved Changes"),f.createElement("p",{className:"text-sm text-slate-600 mb-6"},"You have unsaved changes. Would you like to save your current design before creating a new one?"),f.createElement("div",{className:"flex flex-col gap-2"},f.createElement("button",{onClick:me,className:"w-full py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium text-sm transition-colors"},"Save First"),f.createElement("button",{onClick:q,className:"w-full py-2.5 bg-red-50 hover:bg-red-100 text-red-600 rounded-lg font-medium text-sm transition-colors"},"Discard Changes"),f.createElement("button",{onClick:()=>T(!1),className:"w-full py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg font-medium text-sm transition-colors"},"Cancel")))))))},vI=({store:r,className:e,apiKey:t,showCredit:n,customPanels:i})=>{const A=fe.useSyncExternalStore(u=>r.subscribeLicense(u),()=>r.getLicenseStatus()),o=A.showWatermark||n!==!1,l=A.isValid===!1;return f.useEffect(()=>{if(r===Oe)return;Oe.services=r.services;const u=Object.getPrototypeOf(r),h=Object.getOwnPropertyNames(u),g=[];h.forEach(p=>{if(p==="constructor"||p==="subscribe"||p==="getSnapshot"||p==="notify"||p.startsWith("_"))return;if(typeof r[p]=="function"){const x=Oe[p];Oe[p]=(...N)=>r[p](...N),g.push(()=>{x?Oe[p]=x:delete Oe[p]})}});const m=()=>{Oe.state=r.state,Oe.services=r.services,Oe.notify&&Oe.notify()};Oe.state=r.state;const b=r.subscribe(m);return()=>{b(),g.forEach(p=>p())}},[r]),l?f.createElement("div",{className:"fixed inset-0 bg-gradient-to-br from-slate-950 to-slate-900 flex items-center justify-center p-6"},f.createElement("div",{className:"max-w-md text-center"},f.createElement("div",{className:"w-16 h-16 mx-auto mb-6 rounded-2xl bg-red-500/20 flex items-center justify-center"},f.createElement("svg",{className:"w-8 h-8 text-red-300",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"},f.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5,d:"M12 9v4m0 4h.01M10.29 3.86L1.82 18a1 1 0 00.86 1.5h18.64a1 1 0 00.86-1.5L13.71 3.86a1 1 0 00-1.72 0z"}))),f.createElement("h1",{className:"text-2xl font-bold text-white mb-3"},"License Required"),f.createElement("p",{className:"text-slate-300 leading-relaxed mb-6"},A.message||"This editor is unavailable because the license is invalid or revoked."),A.upgradeUrl&&f.createElement("a",{href:A.upgradeUrl,className:"inline-flex items-center justify-center rounded-lg bg-white/10 px-4 py-2 text-sm font-semibold text-white hover:bg-white/20 transition-colors"},"Manage License"))):f.createElement(jF,{store:r},f.createElement("div",{className:`our-editor-sdk ${e||""}`},f.createElement(mI,{apiKey:t,showCredit:o,customPanels:i})))},yI="https://cdn.tailwindcss.com",bI="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",wI=".our-editor-sdk { font-family: 'Inter', sans-serif; }",xI="fraczled-sdk-loader-styles",BI=3500,EI=220,CI='<svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 118.1846 24.1172"><defs><linearGradient id="linear-gradient" x1="109.7684" y1="15.3657" x2="116.6286" y2="22.226" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#99d1a7"/><stop offset="1" stop-color="#8fd4f0"/></linearGradient></defs><g id="Layer_1-2"><path d="M86.0219,13.5526c-.0564-.5503-.1717-1.0508-.3545-1.494-.2642-.6402-.6581-1.1357-1.1813-1.4864-.5236-.3506-1.1715-.5259-1.9438-.5259s-1.4254.1779-1.9588.5335c-.5336.3559-.9428.8385-1.2273,1.4482-.2133.4568-.3465.965-.3999,1.5245h7.0657Z" fill="none"/><path d="M29.4248,16.3577c-.315.0609-.6302.1143-.9452.16-.315.0458-.5997.0892-.8536.1296-.5591.0815-1.0468.211-1.4636.3888-.4168.1779-.7392.4168-.9679.7164-.2287.3-.3431.6735-.3431,1.1206,0,.6402.2337,1.1281.7013,1.4635.4674.3354,1.0671.5031,1.7988.5031.691,0,1.3036-.1396,1.837-.4193.5336-.2794.9502-.6555,1.2502-1.1281.2995-.4726.4497-1.0035.4497-1.5931v-1.8141c-.1426.0914-.3431.1779-.6023.2591-.259.0815-.5463.1525-.8613.2135Z" fill="none"/><path d="M100.9591,10.8924c-.5389-.4116-1.1891-.6173-1.9514-.6173-.7723,0-1.4228.2134-1.9512.6402-.5286.4268-.9299,1.0138-1.2044,1.7608-.2744.7469-.4116,1.6136-.4116,2.5992s.1371,1.8575.4116,2.6144c.2744.7573.6784,1.3492,1.212,1.7761s1.1815.6402,1.9436.6402,1.4102-.2108,1.9438-.6326c.5336-.4216.94-1.0085,1.2196-1.7608.2792-.752.4192-1.6312.4192-2.6373,0-1.0162-.1373-1.8979-.4116-2.645-.2744-.7469-.681-1.3262-1.2196-1.7379Z" fill="none"/><path d="M7.104,5.6101c0-.5793.1371-1.029.4116-1.3491s.7571-.4802,1.4483-.4802c.2947,0,.574.0255.8384.0762.2642.051.4929.1018.686.1525l.8233-3.5368c-.2847-.0812-.7294-.1803-1.3341-.2972-.6047-.1167-1.2728-.1754-2.0046-.1754-1.0671,0-2.0199.2034-2.8583.6098-.8386.4065-1.4993,1.0164-1.982,1.8294-.4828.8132-.7242,1.8346-.7242,3.0642v1.2348H0v3.5673h2.4086v13.4764h4.6955v-13.4764h3.3995v-3.5673h-3.3995v-1.1281Z" fill="#0f1925"/><path d="M33.3808,7.8891c-.676-.4624-1.4459-.8054-2.3096-1.029-.8639-.2234-1.7683-.3354-2.7135-.3354-1.362,0-2.5588.2058-3.5903.6175-1.0315.4116-1.8725.9961-2.523,1.7532-.3151.3668-.579.767-.7939,1.1993v-3.4175c-.2134-.061-.4549-.1041-.7242-.1296-.2692-.0253-.5258-.0381-.7697-.0381-.9452,0-1.7836.2721-2.5154.8156-.7318.5439-1.2554,1.3442-1.5702,2.401h-.1831v-2.988h-4.5581v17.0437h4.7107v-9.6347c0-.691.1548-1.3035.465-1.837.3098-.5335.7392-.9502,1.2881-1.2501.5489-.2996,1.1636-.4497,1.8446-.4497.3355,0,.6987.0228,1.0899.0686.2454.0287.4538.063.6332.1017-.091.2586-.1679.5265-.228.8054l4.3753.3506c.1624-.5691.4955-1.039.9986-1.4102.5031-.3708,1.1763-.5564,2.0199-.5564.8026,0,1.4254.1932,1.8675.5793.4421.3864.6631.9299.6631,1.6312v.0762c0,.3559-.1397.6277-.4192.8156-.2797.1882-.7191.3277-1.3188.4193-.5997.0914-1.3925.1829-2.378.2743-.8536.0815-1.6617.2237-2.424.4268-.7621.2035-1.4431.5031-2.0428.8995-.5997.3963-1.0723.9123-1.4178,1.5473-.3455.6353-.5182,1.4307-.5182,2.3858,0,1.1182.2439,2.0531.7318,2.8051.4876.7523,1.1608,1.3187,2.0199,1.6998.8587.3812,1.8267.5717,2.904.5717.8434,0,1.5854-.1143,2.2257-.343.6405-.2287,1.1891-.5436,1.6465-.9452.4573-.4013.8233-.8713,1.0976-1.4101h.1221v2.3781h4.4971v-11.4945c0-1.0061-.1982-1.8751-.5945-2.6068-.3963-.7318-.9326-1.3288-1.6083-1.7913ZM30.8884,17.6992c0,.5896-.1502,1.1205-.4497,1.5931-.3.4726-.7165.8487-1.2502,1.1281-.5334.2797-1.146.4193-1.837.4193-.7318,0-1.3315-.1677-1.7988-.5031-.4676-.3354-.7013-.8232-.7013-1.4635,0-.4471.1144-.8206.3431-1.1206.2287-.2996.5511-.5385.9679-.7164.4168-.1778.9044-.3073,1.4636-.3888.254-.0404.5387-.0838.8536-.1296.315-.0457.6302-.0991.9452-.16.315-.061.6023-.132.8613-.2135.2592-.0812.4597-.1676.6023-.2591v1.8141Z" fill="#0f1925"/><path d="M42.91,10.8009c.5434-.3911,1.1815-.5869,1.9133-.5869.5792,0,1.0873.117,1.5244.3506.4368.2339.7874.564,1.0518.9909.2642.4269.4368.9249.5184,1.494h4.4515c-.061-1.321-.417-2.4696-1.0673-3.4453-.6505-.9756-1.532-1.7326-2.6449-2.2714-1.1128-.5385-2.4114-.808-3.895-.808-1.728,0-3.2166.3711-4.4668,1.1129-1.2499.7419-2.213,1.7736-2.8888,3.0947-.676,1.3212-1.0139,2.856-1.0139,4.6039,0,1.7279.3355,3.2497,1.0062,4.5658.6708,1.3162,1.6312,2.3476,2.8812,3.0947,1.2502.7469,2.744,1.1205,4.4821,1.1205,1.5244,0,2.8404-.2771,3.9484-.8309,1.1076-.5538,1.9765-1.3262,2.6067-2.3172.6302-.9909.9807-2.1366,1.052-3.4377h-4.4515c-.1321.9048-.4778,1.6136-1.0365,2.1267-.5591.5134-1.2452.7698-2.058.7698-.7318,0-1.3698-.2032-1.9133-.6097-.5439-.4064-.9657-.996-1.2654-1.7684-.2997-.7722-.4497-1.6972-.4497-2.7746s.15-1.9945.4497-2.7517c.2997-.757.7215-1.3313,1.2654-1.7227Z" fill="#0f1925"/><polygon points="59.2611 19.8792 67.0815 9.8328 67.0815 6.7381 53.3462 6.7381 53.3462 10.5188 61.4107 10.5188 61.4107 10.6408 53.0718 20.9616 53.0718 23.7818 67.3714 23.7818 67.3714 20.0011 59.2611 20.0011 59.2611 19.8792" fill="#0f1925"/><rect x="68.7445" y="1.0672" width="4.7105" height="22.7147" fill="#0f1925"/><path d="M88.2286,8.6818c-.7318-.7164-1.5854-1.2551-2.5612-1.6158-.9755-.3607-2.0275-.5413-3.1556-.5413-1.667,0-3.1175.3711-4.3524,1.1129-1.2349.7419-2.1901,1.7736-2.8659,3.0947-.6762,1.3212-1.0139,2.856-1.0139,4.6039,0,1.7988.3377,3.3564,1.0139,4.6725.6758,1.3163,1.6486,2.3301,2.9193,3.0413,1.2702.7115,2.7796,1.0672,4.5276,1.0672,1.4025,0,2.6374-.216,3.7045-.6479s1.9386-1.0366,2.6146-1.8141c.6758-.7776,1.1205-1.6896,1.3339-2.7365l-4.36-.2896c-.1524.4168-.3839.7724-.6936,1.0672-.3102.2948-.6784.5183-1.1052.6708-.4268.1524-.9047.2287-1.4331.2287-.7623,0-1.4357-.1754-2.0199-.526-.5846-.3506-1.0394-.8536-1.3644-1.5092-.2927-.5895-.4523-1.2887-.4817-2.0961h11.6103v-1.2806c0-1.4532-.2034-2.7212-.6097-3.8036-.4065-1.0824-.9757-1.9818-1.7075-2.6984ZM80.5835,10.5799c.5334-.3556,1.1863-.5335,1.9588-.5335s1.4202.1753,1.9438.5259c.5232.3506.9171.8461,1.1813,1.4864.1829.4431.2982.9437.3545,1.494h-7.0657c.0534-.5595.1867-1.0677.3999-1.5245.2845-.6097.6936-1.0923,1.2273-1.4482Z" fill="#0f1925"/><path d="M102.4835,1.0672v8.5522h-.1371c-.2034-.4673-.5031-.9399-.8994-1.4177-.3963-.4776-.9147-.8766-1.5549-1.1968-.6405-.3201-1.4383-.4802-2.3935-.4802-1.2401,0-2.3835.3228-3.4301.9681-1.047.6455-1.8854,1.6186-2.5154,2.9193-.6302,1.3011-.9452,2.927-.9452,4.8784,0,1.8903.305,3.4887.9147,4.7944.6097,1.3061,1.4381,2.2943,2.4849,2.9651,1.0468.6709,2.2204,1.0062,3.5216,1.0062.9147,0,1.6894-.1525,2.3249-.4573.635-.305,1.156-.6884,1.5625-1.151.4063-.4624.7165-.9273.9299-1.3949h.2134v2.7288h4.6497V1.0672h-4.726ZM102.1711,17.9126c-.2797.7523-.686,1.3392-1.2196,1.7608-.5336.4218-1.1815.6326-1.9438.6326s-1.41-.2134-1.9436-.6402-.9376-1.0188-1.212-1.7761c-.2744-.757-.4116-1.6285-.4116-2.6144s.1371-1.8523.4116-2.5992c.2744-.747.6758-1.334,1.2044-1.7608.5284-.4268,1.1789-.6402,1.9512-.6402.7623,0,1.4126.2058,1.9514.6173.5387.4117.9452.991,1.2196,1.7379.2742.747.4116,1.6288.4116,2.645,0,1.0061-.1399,1.8854-.4192,2.6373Z" fill="#0f1925"/><circle cx="113.1907" cy="18.7881" r="4.9939" fill="url(#linear-gradient)"/></g></svg>',SI=`
+                          `},f.createElement("div",{className:"w-full h-full bg-cover bg-center",style:{backgroundImage:"url(https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=150&q=80)",filter:E}}),h&&f.createElement("div",{className:"absolute inset-0 flex items-center justify-center bg-indigo-600/10"},f.createElement("div",{className:"bg-white rounded-full p-0.5 shadow-sm"},f.createElement(ko,{size:12,className:"text-indigo-600"})))),f.createElement("span",{className:`text-[10px] font-medium ${h?"text-indigo-600":"text-slate-500"}`},u.name))}))))},XB=({element:r,onChange:e,onClose:t,position:n})=>{const i=r.strokeStyle||"solid",A=r.strokeWidth||0;let o=0;typeof r.cornerRadius=="number"?o=r.cornerRadius:r.cornerRadius&&(o=r.cornerRadius.tl||0);const l=u=>{let h="0";return u==="dashed"&&(h="6,4"),u==="dotted"&&(h="2,2"),f.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",className:"text-slate-700"},f.createElement("line",{x1:"2",y1:"12",x2:"22",y2:"12",stroke:"currentColor",strokeWidth:"2",strokeDasharray:h,strokeLinecap:"round"}))};return f.createElement("div",{className:`${n?"fixed":"absolute top-12 left-0"} w-72 bg-white rounded-xl shadow-xl border border-gray-200 z-[9999] flex flex-col overflow-hidden animate-in fade-in zoom-in-95 duration-100 font-sans`,style:n?{top:n.top,left:n.left}:void 0},f.createElement("div",{className:"flex items-center justify-between px-4 py-3 border-b border-gray-100 bg-white sticky top-0 z-10"},f.createElement("h3",{className:"font-bold text-slate-800 text-sm"},"Border"),f.createElement("button",{onClick:t,className:"text-slate-400 hover:bg-gray-100 rounded-full p-1 transition-colors"},f.createElement(Ri,{size:18}))),f.createElement("div",{className:"p-4 space-y-5"},f.createElement("div",{className:"space-y-2"},f.createElement("label",{className:"text-[10px] font-bold text-slate-500 uppercase tracking-wider"},"Style"),f.createElement("div",{className:"grid grid-cols-4 gap-2"},f.createElement("button",{onClick:()=>e({strokeWidth:0,strokeStyle:"none"}),className:`h-10 rounded-lg border flex items-center justify-center transition-all ${A===0||i==="none"?"border-indigo-600 ring-1 ring-indigo-100 bg-indigo-50":"border-gray-200 hover:border-gray-300"}`,title:"No Border"},f.createElement(ro,{size:18,className:"text-slate-600"})),f.createElement("button",{onClick:()=>e({strokeWidth:Math.max(1,A),strokeStyle:"solid"}),className:`h-10 rounded-lg border flex items-center justify-center transition-all ${A>0&&i==="solid"?"border-indigo-600 ring-1 ring-indigo-100 bg-indigo-50":"border-gray-200 hover:border-gray-300"}`,title:"Solid"},l("solid")),f.createElement("button",{onClick:()=>e({strokeWidth:Math.max(1,A),strokeStyle:"dashed"}),className:`h-10 rounded-lg border flex items-center justify-center transition-all ${A>0&&i==="dashed"?"border-indigo-600 ring-1 ring-indigo-100 bg-indigo-50":"border-gray-200 hover:border-gray-300"}`,title:"Dashed"},l("dashed")),f.createElement("button",{onClick:()=>e({strokeWidth:Math.max(1,A),strokeStyle:"dotted"}),className:`h-10 rounded-lg border flex items-center justify-center transition-all ${A>0&&i==="dotted"?"border-indigo-600 ring-1 ring-indigo-100 bg-indigo-50":"border-gray-200 hover:border-gray-300"}`,title:"Dotted"},l("dotted")))),f.createElement("div",{className:"space-y-2"},f.createElement("div",{className:"flex justify-between items-center"},f.createElement("label",{className:"text-[10px] font-bold text-slate-500 uppercase tracking-wider"},"Weight"),f.createElement("div",{className:"w-8 h-6 flex items-center justify-center bg-gray-100 rounded text-xs font-mono text-slate-600"},A)),f.createElement("input",{type:"range",min:"0",max:"50",value:A,onChange:u=>{const h=parseInt(u.target.value);e({strokeWidth:h,strokeStyle:h===0?"none":i==="none"?"solid":i})},className:"w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-indigo-600"})),f.createElement("div",{className:"space-y-2 pt-2 border-t border-gray-100"},f.createElement("div",{className:"flex justify-between items-center"},f.createElement("label",{className:"text-[10px] font-bold text-slate-500 uppercase tracking-wider"},"Corner Rounding"),f.createElement("div",{className:"w-8 h-6 flex items-center justify-center bg-gray-100 rounded text-xs font-mono text-slate-600"},Math.round(o))),f.createElement("input",{type:"range",min:"0",max:"100",value:o,onChange:u=>e({cornerRadius:parseInt(u.target.value)}),className:"w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-indigo-600"}))))},iI=({element:r,onChange:e,onClose:t,position:n})=>{const i=r.textStrokeWidth||0,A=r.textStrokePosition||"behind",o=r.textStrokeStyle||"round";return f.createElement("div",{className:`${n?"fixed":"absolute top-12 left-0"} w-72 bg-white rounded-xl shadow-xl border border-gray-200 z-[9999] flex flex-col overflow-hidden animate-in fade-in zoom-in-95 duration-100 font-sans`,style:n?{top:n.top,left:n.left}:void 0},f.createElement("div",{className:"flex items-center justify-between px-4 py-3 border-b border-gray-100 bg-white sticky top-0 z-10"},f.createElement("h3",{className:"font-bold text-slate-800 text-sm"},"Text Stroke"),f.createElement("button",{onClick:t,className:"text-slate-400 hover:bg-gray-100 rounded-full p-1 transition-colors"},f.createElement(Ri,{size:18}))),f.createElement("div",{className:"p-4 space-y-5"},f.createElement("div",{className:"space-y-2"},f.createElement("div",{className:"flex items-center justify-between"},f.createElement("label",{className:"text-[10px] font-bold text-slate-500 uppercase tracking-wider"},"Stroke"),f.createElement("button",{onClick:()=>e({textStrokeWidth:0}),className:"h-7 w-7 rounded-md border border-gray-200 flex items-center justify-center hover:border-gray-300 transition-all",title:"Disable Stroke"},f.createElement(ro,{size:14,className:"text-slate-500"}))),f.createElement("div",{className:"flex items-center gap-3"},f.createElement("input",{type:"range",min:"0",max:"20",value:i,onChange:l=>e({textStrokeWidth:parseInt(l.target.value,10)}),className:"w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-indigo-600"}),f.createElement("div",{className:"w-8 h-6 flex items-center justify-center bg-gray-100 rounded text-xs font-mono text-slate-600"},i))),f.createElement("div",{className:"space-y-2"},f.createElement("label",{className:"text-[10px] font-bold text-slate-500 uppercase tracking-wider"},"Position"),f.createElement("div",{className:"grid grid-cols-2 gap-2"},f.createElement("button",{onClick:()=>e({textStrokePosition:"behind"}),className:`h-9 rounded-lg border flex items-center justify-center text-xs font-medium transition-all ${A==="behind"?"border-indigo-600 ring-1 ring-indigo-100 bg-indigo-50 text-indigo-700":"border-gray-200 hover:border-gray-300 text-slate-600"}`},"Behind"),f.createElement("button",{onClick:()=>e({textStrokePosition:"front"}),className:`h-9 rounded-lg border flex items-center justify-center text-xs font-medium transition-all ${A==="front"?"border-indigo-600 ring-1 ring-indigo-100 bg-indigo-50 text-indigo-700":"border-gray-200 hover:border-gray-300 text-slate-600"}`},"On top"))),f.createElement("div",{className:"space-y-2"},f.createElement("label",{className:"text-[10px] font-bold text-slate-500 uppercase tracking-wider"},"Edges"),f.createElement("div",{className:"grid grid-cols-2 gap-2"},f.createElement("button",{onClick:()=>e({textStrokeStyle:"round"}),className:`h-9 rounded-lg border flex items-center justify-center text-xs font-medium transition-all ${o==="round"?"border-indigo-600 ring-1 ring-indigo-100 bg-indigo-50 text-indigo-700":"border-gray-200 hover:border-gray-300 text-slate-600"}`},"Round"),f.createElement("button",{onClick:()=>e({textStrokeStyle:"flat"}),className:`h-9 rounded-lg border flex items-center justify-center text-xs font-medium transition-all ${o==="flat"?"border-indigo-600 ring-1 ring-indigo-100 bg-indigo-50 text-indigo-700":"border-gray-200 hover:border-gray-300 text-slate-600"}`},"Flat")))))},AI=({selection:r,elements:e,updateElement:t,updateElements:n,deleteElement:i,reorderElement:A,settings:o,onDuplicate:l,activeBrandKit:u,setActiveTool:h,onOpenColorPanel:g,activeTool:m,activeColorMode:b})=>{var Ht,Mt,Pt,Dt,or,Nn,fr,br,Kr,Gt,On,Qr;const[p,E]=fe.useState(!1),[x,N]=fe.useState(!1),[U,L]=fe.useState(!1),[M,R]=fe.useState(!1),[Ae,le]=fe.useState(!1),[te,re]=fe.useState(!1),[J,ye]=fe.useState(null),[X,W]=fe.useState(null),[G,z]=fe.useState(null),[Y,j]=fe.useState(null),[O,$]=fe.useState(null),[ce,V]=fe.useState(null),I=fe.useRef(null),F=fe.useRef(null),k=fe.useRef(null),C=fe.useRef(null),Q=fe.useRef(null),T=fe.useRef(null),H=fe.useRef(null),Z=fe.useRef(null),ae=[6,8,10,12,14,16,18,21,24,28,32,36,42,48,56,64,72,80,96,128];if(fe.useEffect(()=>{E(!1),N(!1),L(!1),R(!1),le(!1),re(!1)},[r]),fe.useEffect(()=>{if(!te)return;const lt=Vt=>{var tr;const Tt=Vt.target,Ot=H.current&&H.current.contains(Tt),Xe=(tr=Tt.closest)==null?void 0:tr.call(Tt,"[data-font-size-dropdown]");!Ot&&!Xe&&re(!1)};return document.addEventListener("mousedown",lt),()=>document.removeEventListener("mousedown",lt)},[te]),fe.useEffect(()=>{if(!Ae)return;const lt=Vt=>{var tr;const Tt=Vt.target,Ot=F.current&&F.current.contains(Tt),Xe=(tr=Tt.closest)==null?void 0:tr.call(Tt,"[data-flip-menu]");!Ot&&!Xe&&le(!1)};return document.addEventListener("mousedown",lt),()=>document.removeEventListener("mousedown",lt)},[Ae]),r.length===2){const lt=e.filter(Ot=>r.includes(Ot.id)),Vt=lt.find(Ot=>Ot.type==="image"),Tt=lt.find(Ot=>Ot.type==="shape");if(Vt&&Tt){const Ot=()=>{t(Vt.id,{x:Tt.x,y:Tt.y,width:Tt.width,height:Tt.height,rotation:Tt.rotation,clipShape:Tt.content,cornerRadius:Tt.cornerRadius,strokeColor:Tt.strokeColor,strokeWidth:Tt.strokeWidth,strokeStyle:Tt.strokeStyle,crop:{x:50,y:50,scale:1}}),i(Tt.id)};return f.createElement("div",{className:"flex items-center gap-2 px-2 h-full animate-in fade-in zoom-in-95 duration-200 whitespace-nowrap"},f.createElement("span",{className:"text-sm font-semibold text-slate-500 mr-2"},"2 selected"),f.createElement("div",{className:"h-4 w-px bg-gray-300 mx-2"}),f.createElement("button",{onClick:Ot,className:"flex items-center gap-2 bg-indigo-50 text-indigo-700 px-3 py-1.5 rounded-lg text-sm font-medium hover:bg-indigo-100 transition-colors flex-shrink-0"},f.createElement(c7,{size:16}),"Mask"),f.createElement("div",{className:"h-4 w-px bg-gray-300 mx-2"}),f.createElement("button",{onClick:()=>i(Tt.id),className:"p-1.5 hover:bg-red-50 text-red-500 rounded flex-shrink-0"},f.createElement(XA,{size:16})))}}if(r.length===0)return null;const me=r[0],q=e.find(lt=>lt.id===me);if(!q)return null;const ie=lt=>{n?n(r,lt):t(me,lt)},se=lt=>{const Vt=Math.max(1,lt);if(r.length===1&&q&&q.fontSize){const Tt=Vt/q.fontSize;t(me,{fontSize:Vt,width:q.width*Tt,height:q.height*Tt})}else ie({fontSize:Vt})},be=q.type==="text",K=q.type==="path",Fe=q.type==="shape"||K,nt=q.type==="image",_e=q.type==="qrcode",Ie=q.textStrokeWidth||0,Je=q.textStrokeColor||"#000000",et=Fe?q.backgroundColor??(K?((Ht=q.path)==null?void 0:Ht.fillColor)??null:null):q.backgroundColor,mt=K?q.strokeColor??((Mt=q.path)==null?void 0:Mt.strokeColor)??"#000000":q.strokeColor||"#000000",Ye=K?q.strokeWidth??((Pt=q.path)==null?void 0:Pt.strokeWidth)??0:q.strokeWidth||0,Le=!!et&&et!=="transparent",De=Ye>0&&mt!=="transparent",Ce=lt=>{ie({effect:lt})},pe=()=>{window.dispatchEvent(new CustomEvent("toggle-crop-mode",{detail:{id:me}}))},Be=()=>{ie({clipShape:void 0,cornerRadius:0,strokeWidth:0})},Qe=()=>{h(Xt.FONT)},qe=lt=>{g?g(lt):h(Xt.COLOR)},Re=()=>{h(Xt.EFFECTS)},rt=q.type==="path"&&!!q.path&&r.length===1,Ve=mt==="transparent"?"#000000":mt,At=et&&et!=="transparent"?et:Ve,ht=Ye>0?Ye:2,It=()=>{if(rt&&q.path){ie({backgroundColor:"transparent",path:{...q.path,fillColor:null}});return}ie({backgroundColor:"transparent"})},yt=()=>{const lt={strokeWidth:0,strokeColor:"transparent"};if(rt&&q.path){ie({...lt,path:{...q.path,strokeWidth:0,strokeColor:"transparent"}});return}ie(lt)},Rt=()=>{if(rt&&q.path){ie({backgroundColor:At,path:{...q.path,fillColor:At}});return}ie({backgroundColor:At})},Lt=()=>{const lt={strokeWidth:ht,strokeColor:Ve};if(rt&&q.path){ie({...lt,path:{...q.path,strokeWidth:ht,strokeColor:Ve}});return}ie(lt)};return f.createElement("div",{ref:I,className:"flex items-center gap-3 md:gap-4 px-1 md:px-2 animate-in fade-in zoom-in-95 duration-200 h-full whitespace-nowrap"},be&&f.createElement(f.Fragment,null,f.createElement("div",{className:"flex items-center gap-2 border-r border-gray-200 pr-4 flex-shrink-0"},f.createElement("div",{className:"relative group"},f.createElement("button",{onClick:Qe,className:`flex items-center gap-2 px-2 py-1.5 rounded-lg text-sm font-medium transition-colors w-32 justify-between border ${m===Xt.FONT?"bg-indigo-50 border-indigo-200 text-indigo-700":"hover:bg-gray-100 border-transparent text-slate-700"}`},f.createElement("span",{className:"truncate",style:{fontFamily:q.fontFamily}},q.fontFamily||"Inter"),f.createElement(hu,{size:14,className:"text-slate-400"}))),f.createElement("div",{ref:H,className:"flex items-center bg-gray-50 rounded border border-gray-200 h-8 flex-shrink-0 relative"},f.createElement("button",{onClick:()=>se((q.fontSize||16)-1),className:"px-2 hover:bg-gray-200 h-full flex items-center text-slate-600"},"-"),f.createElement("button",{onClick:lt=>{const Vt=lt.currentTarget.getBoundingClientRect();ye({top:Vt.bottom+4,left:Vt.left}),re(!te)},className:"w-12 text-center text-sm text-slate-700 font-medium hover:bg-gray-100 h-full flex items-center justify-center"},Math.round(q.fontSize||16)),f.createElement("button",{onClick:()=>se((q.fontSize||16)+1),className:"px-2 hover:bg-gray-200 h-full flex items-center text-slate-600"},"+"),te&&J&&Td.createPortal(f.createElement("div",{"data-font-size-dropdown":!0,className:"fixed bg-white border border-gray-200 rounded-lg shadow-xl z-[9999] py-1 w-20 max-h-64 overflow-y-auto",style:{top:J.top,left:J.left}},ae.map(lt=>f.createElement("button",{key:lt,onClick:()=>{se(lt),re(!1)},className:`w-full px-3 py-1.5 text-left text-sm hover:bg-indigo-50 hover:text-indigo-600 ${Math.round(q.fontSize||16)===lt?"bg-indigo-50 text-indigo-600 font-medium":"text-slate-700"}`},lt))),document.body))),f.createElement("div",{className:"flex items-center gap-1 border-r border-gray-200 pr-4 text-slate-600 relative flex-shrink-0"},f.createElement("div",{className:"relative"},f.createElement("button",{onClick:()=>qe("text"),className:`w-6 h-6 rounded-md border border-gray-300 flex items-center justify-center relative overflow-hidden hover:ring-2 hover:ring-indigo-100 transition-all ${m===Xt.COLOR&&b==="text"?"ring-2 ring-indigo-500":""}`,style:{background:q.color}},f.createElement("span",{className:"sr-only"},"Color"))),f.createElement("div",{className:"w-px h-4 bg-gray-300 mx-1 hidden sm:block"}),f.createElement("button",{onClick:()=>ie({fontWeight:q.fontWeight==="bold"?"normal":"bold"}),className:`p-1.5 hover:bg-gray-100 rounded transition-colors ${q.fontWeight==="bold"?"bg-indigo-50 text-indigo-600":""}`,title:"Bold"},f.createElement(Lk,{size:16})),f.createElement("div",{className:"flex items-center bg-gray-50 rounded-lg p-0.5 border border-gray-200 ml-1 flex-shrink-0"},f.createElement("button",{onClick:()=>ie({textAlign:"left"}),className:`p-1 rounded hover:bg-white transition-all ${q.textAlign==="left"||!q.textAlign?"bg-white shadow-sm text-indigo-600":"text-slate-500"}`},f.createElement(b7,{size:14})),f.createElement("button",{onClick:()=>ie({textAlign:"center"}),className:`p-1 rounded hover:bg-white transition-all ${q.textAlign==="center"?"bg-white shadow-sm text-indigo-600":"text-slate-500"}`},f.createElement(v7,{size:14})),f.createElement("button",{onClick:()=>ie({textAlign:"right"}),className:`p-1 rounded hover:bg-white transition-all ${q.textAlign==="right"?"bg-white shadow-sm text-indigo-600":"text-slate-500"}`},f.createElement(y7,{size:14}))),f.createElement("div",{className:"relative ml-1 flex items-center gap-1 flex-shrink-0"},f.createElement("button",{ref:k,onClick:()=>{if(!p&&k.current){const lt=k.current.getBoundingClientRect();z({top:lt.bottom+8,left:lt.left-100})}E(!p)},className:`p-1.5 hover:bg-gray-100 rounded transition-colors ${p?"bg-indigo-50 text-indigo-600":"text-slate-500"}`,title:"Spacing"},f.createElement(r7,{size:16})),f.createElement("button",{onClick:()=>ie({textTransform:q.textTransform==="uppercase"?"none":"uppercase"}),className:`p-1.5 hover:bg-gray-100 rounded transition-colors ${q.textTransform==="uppercase"?"bg-indigo-50 text-indigo-600":"text-slate-500"}`,title:"Uppercase"},f.createElement(wk,{size:16})),p&&G&&f.createElement("div",{className:"fixed w-64 bg-white rounded-xl shadow-xl border border-gray-200 p-4 z-[9999] animate-in fade-in zoom-in-95 duration-100",style:{top:G.top,left:G.left}},f.createElement("div",{className:"space-y-4"},f.createElement("div",null,f.createElement("div",{className:"flex justify-between items-center mb-1"},f.createElement("span",{className:"text-xs font-semibold text-slate-500 uppercase tracking-wider"},"Letter Spacing"),f.createElement("span",{className:"text-xs text-slate-700 font-mono"},Math.round((q.letterSpacing||0)*1e3))),f.createElement("input",{type:"range",min:"-0.1",max:"0.8",step:"0.01",value:q.letterSpacing||0,onChange:lt=>ie({letterSpacing:parseFloat(lt.target.value)}),className:"w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-indigo-600"})),f.createElement("div",null,f.createElement("div",{className:"flex justify-between items-center mb-1"},f.createElement("span",{className:"text-xs font-semibold text-slate-500 uppercase tracking-wider"},"Line Spacing"),f.createElement("span",{className:"text-xs text-slate-700 font-mono"},((Dt=q.lineHeight)==null?void 0:Dt.toFixed(2))||1.4)),f.createElement("input",{type:"range",min:"0.5",max:"2.5",step:"0.05",value:q.lineHeight||1.4,onChange:lt=>ie({lineHeight:parseFloat(lt.target.value)}),className:"w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-indigo-600"}))))),f.createElement("div",{className:"relative ml-1 flex items-center gap-1 flex-shrink-0"},f.createElement("button",{ref:Z,onClick:()=>{if(!M&&Z.current){const lt=Z.current.getBoundingClientRect();V({top:lt.bottom+8,left:lt.left})}R(!M)},className:`p-1.5 hover:bg-gray-100 rounded transition-colors ${M||Ie>0?"bg-indigo-50 text-indigo-600":"text-slate-500"}`,title:"Text Stroke"},f.createElement(a1,{size:16,className:"rotate-90"})),M&&ce&&f.createElement(iI,{element:q,onChange:ie,onClose:()=>R(!1),position:ce}),Ie>0&&f.createElement("button",{onClick:()=>qe("stroke"),className:`w-6 h-6 rounded-full border-2 hover:ring-2 hover:ring-indigo-100 transition-all flex items-center justify-center ${m===Xt.COLOR&&b==="stroke"?"ring-2 ring-indigo-500":"border-gray-300"}`,style:{borderColor:Je},title:"Stroke Color"},f.createElement("div",{className:"w-3 h-3 rounded-full",style:{backgroundColor:Je}}))),f.createElement("div",{className:"w-px h-4 bg-gray-300 mx-1 hidden sm:block"}),f.createElement("div",{className:"relative flex-shrink-0"},f.createElement("button",{onClick:Re,className:`flex items-center gap-1.5 px-2 py-1.5 rounded text-xs font-medium transition-colors ${m===Xt.EFFECTS||((Nn=(or=q.effect)==null?void 0:or.style)==null?void 0:Nn.type)!=="none"||((br=(fr=q.effect)==null?void 0:fr.shape)==null?void 0:br.type)!=="none"?"bg-indigo-50 text-indigo-700":"hover:bg-gray-100 text-slate-600"}`},f.createElement(bl,{size:14}),f.createElement("span",null,"Effects"))))),Fe&&f.createElement("div",{className:"flex items-center gap-2 border-r border-gray-200 pr-4 flex-shrink-0"},f.createElement("div",{className:"flex items-center gap-2 relative"},f.createElement("span",{className:"text-xs font-semibold text-slate-500 hidden sm:inline"},"Color"),f.createElement("div",{className:"relative flex items-center gap-1"},f.createElement("button",{onClick:()=>{Le||Rt(),qe("fill")},className:`w-6 h-6 rounded-md border border-gray-300 hover:ring-2 hover:ring-indigo-100 transition-all flex items-center justify-center ${m===Xt.COLOR&&b==="fill"?"ring-2 ring-indigo-500":""}`,style:{background:et??"transparent"},title:"Fill Color"},!Le&&f.createElement(ro,{size:12,className:"text-slate-400"})),f.createElement("button",{onClick:It,className:`w-6 h-6 rounded-full border border-gray-200 flex items-center justify-center transition-colors ${Le?"text-slate-500 hover:text-red-500 hover:bg-slate-100":"bg-slate-100 text-slate-400"}`,title:"No Fill"},f.createElement(ro,{size:12})))),f.createElement("div",{className:"flex items-center gap-2 relative ml-2"},f.createElement("div",{className:"relative flex items-center gap-1"},f.createElement("button",{ref:Q,onClick:()=>{if(!U&&Q.current){const lt=Q.current.getBoundingClientRect();$({top:lt.bottom+8,left:lt.left})}L(!U)},className:`p-1.5 hover:bg-gray-100 rounded transition-colors border border-transparent ${U?"bg-indigo-50 text-indigo-600 border-indigo-100":"text-slate-600"}`,title:"Border Style"},f.createElement(a1,{size:18,className:"rotate-90"})),f.createElement("button",{onClick:yt,className:`w-7 h-7 rounded-full border border-gray-200 flex items-center justify-center transition-colors ${De?"text-slate-500 hover:text-red-500 hover:bg-slate-100":"bg-slate-100 text-slate-400"}`,title:"No Stroke"},f.createElement(ro,{size:12})),U&&O&&f.createElement(XB,{element:q,onChange:ie,onClose:()=>L(!1),position:O})),f.createElement("div",{className:"relative animate-in fade-in zoom-in-95 duration-200"},f.createElement("button",{onClick:()=>{De||Lt(),qe("stroke")},className:`w-6 h-6 rounded-full border-2 hover:ring-2 hover:ring-indigo-100 transition-all flex items-center justify-center ${m===Xt.COLOR&&b==="stroke"?"ring-2 ring-indigo-500":"border-gray-300"}`,style:{borderColor:De?mt:"#cbd5f5"},title:"Stroke Color"},De?f.createElement("div",{className:"w-3 h-3 rounded-full",style:{backgroundColor:mt}}):f.createElement(ro,{size:12,className:"text-slate-400"})))),f.createElement("div",{className:"relative ml-2 flex-shrink-0"},f.createElement("button",{onClick:Re,className:`flex items-center gap-1.5 px-2 py-1.5 rounded text-xs font-medium transition-colors ${m===Xt.EFFECTS||((Gt=(Kr=q.effect)==null?void 0:Kr.style)==null?void 0:Gt.type)!=="none"?"bg-indigo-50 text-indigo-700":"hover:bg-gray-100 text-slate-600"}`},f.createElement(bl,{size:14}),f.createElement("span",{className:"hidden sm:inline"},"Effects")))),nt&&f.createElement("div",{className:"flex items-center gap-2 border-r border-gray-200 pr-4 flex-shrink-0"},f.createElement("button",{onClick:pe,className:"flex items-center gap-2 hover:bg-gray-100 px-3 py-1.5 rounded-lg text-sm font-medium text-slate-700 transition-colors flex-shrink-0",title:"Crop Image (Double Click)"},f.createElement(Pk,{size:16}),f.createElement("span",{className:"hidden sm:inline"},"Crop")),q.clipShape&&f.createElement("button",{onClick:Be,className:"flex items-center gap-2 hover:bg-gray-100 px-3 py-1.5 rounded-lg text-sm font-medium text-slate-700 transition-colors flex-shrink-0",title:"Detach Mask"},f.createElement(l7,{size:16}),f.createElement("span",{className:"hidden sm:inline"},"Detach Image")),f.createElement("div",{className:"relative flex-shrink-0"},f.createElement("button",{onClick:Re,className:`flex items-center gap-1.5 px-2 py-1.5 rounded text-xs font-medium transition-colors ${m===Xt.EFFECTS||((Qr=(On=q.effect)==null?void 0:On.style)==null?void 0:Qr.type)!=="none"?"bg-indigo-50 text-indigo-700":"hover:bg-gray-100 text-slate-600"}`},f.createElement(bl,{size:14}),f.createElement("span",{className:"hidden sm:inline"},"Effects"))),f.createElement("div",{className:"relative flex-shrink-0"},f.createElement("button",{ref:C,onClick:()=>{if(!x&&C.current){const lt=C.current.getBoundingClientRect();j({top:lt.bottom+8,left:lt.left})}N(!x)},className:`flex items-center gap-1.5 px-2 py-1.5 rounded text-xs font-medium transition-colors ${x?"bg-indigo-50 text-indigo-700":"hover:bg-gray-100 text-slate-600"}`},f.createElement(E7,{size:14}),f.createElement("span",{className:"hidden sm:inline"},"Filters")),x&&Y&&f.createElement(aI,{effect:q.effect,onChange:Ce,onElementUpdate:ie,onClose:()=>N(!1),position:Y})),q.clipShape&&f.createElement("div",{className:"flex items-center gap-2 relative ml-2"},f.createElement("div",{className:"relative"},f.createElement("button",{ref:T,onClick:()=>{if(!U&&T.current){const lt=T.current.getBoundingClientRect();$({top:lt.bottom+8,left:lt.left})}L(!U)},className:`p-1.5 hover:bg-gray-100 rounded transition-colors border border-transparent ${U?"bg-indigo-50 text-indigo-600 border-indigo-100":"text-slate-600"}`,title:"Border Style"},f.createElement(a1,{size:18,className:"rotate-90"})),U&&O&&f.createElement(XB,{element:q,onChange:ie,onClose:()=>L(!1),position:O})),(q.strokeWidth||0)>0&&f.createElement("div",{className:"relative animate-in fade-in zoom-in-95 duration-200"},f.createElement("button",{onClick:()=>qe("stroke"),className:`w-6 h-6 rounded-full border-2 hover:ring-2 hover:ring-indigo-100 transition-all flex items-center justify-center ${m===Xt.COLOR&&b==="stroke"?"ring-2 ring-indigo-500":"border-gray-300"}`,style:{borderColor:q.strokeColor||"#000000"}},f.createElement("div",{className:"w-3 h-3 rounded-full",style:{backgroundColor:q.strokeColor||"#000000"}}))))),_e&&f.createElement("div",{className:"flex items-center gap-2 border-r border-gray-200 pr-4 flex-shrink-0"},f.createElement("div",{className:"relative"},f.createElement("button",{onClick:()=>h(Xt.QR_CODE),className:"flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors hover:bg-gray-100 text-slate-700"},f.createElement(_f,{size:16}),f.createElement("span",{className:"hidden sm:inline"},"Edit QR Code"))),f.createElement("div",{className:"flex items-center gap-2 relative"},f.createElement("span",{className:"text-xs font-semibold text-slate-500 hidden sm:inline"},"Color"),f.createElement("div",{className:"relative"},f.createElement("button",{onClick:()=>qe("text"),className:`w-6 h-6 rounded-md border border-gray-300 hover:ring-2 hover:ring-indigo-100 transition-all ${m===Xt.COLOR&&b==="text"?"ring-2 ring-indigo-500":""}`,style:{background:q.color}}))),f.createElement("div",{className:"flex items-center gap-2 relative"},f.createElement("span",{className:"text-xs font-semibold text-slate-500 hidden sm:inline"},"BG"),f.createElement("div",{className:"relative"},f.createElement("button",{onClick:()=>qe("fill"),className:`w-6 h-6 rounded-md border border-gray-300 hover:ring-2 hover:ring-indigo-100 transition-all ${m===Xt.COLOR&&b==="fill"?"ring-2 ring-indigo-500":""}`,style:{background:q.backgroundColor}})))),f.createElement("div",{className:"flex items-center gap-2 text-slate-600 flex-shrink-0"},f.createElement("div",{className:"relative"},f.createElement("button",{ref:F,onClick:()=>{if(!Ae&&F.current){const lt=F.current.getBoundingClientRect();W({top:lt.bottom+8,left:lt.left})}le(!Ae)},className:`flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${Ae?"bg-indigo-50 text-indigo-700":"hover:bg-gray-100 text-slate-700"}`},f.createElement("span",null,"Flip")),Ae&&X&&f.createElement("div",{"data-flip-menu":!0,className:"fixed w-48 bg-white rounded-xl shadow-xl border border-gray-100 p-1 z-[9999] animate-in fade-in zoom-in-95 duration-100 flex flex-col",style:{top:X.top,left:X.left},onMouseDown:lt=>lt.stopPropagation()},f.createElement("button",{onClick:()=>{ie({flipX:!q.flipX}),le(!1)},className:"flex items-center gap-3 px-3 py-2 text-sm text-slate-700 hover:bg-slate-50 rounded-lg text-left"},f.createElement(qk,{size:16}),f.createElement("span",null,"Flip horizontal")),f.createElement("button",{onClick:()=>{ie({flipY:!q.flipY}),le(!1)},className:"flex items-center gap-3 px-3 py-2 text-sm text-slate-700 hover:bg-slate-50 rounded-lg text-left"},f.createElement(Gk,{size:16}),f.createElement("span",null,"Flip vertical")))),f.createElement("div",{className:"h-4 w-px bg-gray-300 mx-2 hidden sm:block"}),f.createElement("div",{className:"flex items-center gap-2 hidden sm:flex"},f.createElement("span",{className:"text-xs font-medium text-slate-400"},"Opacity"),f.createElement("input",{type:"range",min:"0",max:"1",step:"0.1",value:q.opacity,onChange:lt=>ie({opacity:parseFloat(lt.target.value)}),className:"w-16 h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-slate-800"})),f.createElement("div",{className:"h-4 w-px bg-gray-300 mx-2 hidden sm:block"}),f.createElement("div",{className:"relative"},f.createElement("button",{onClick:()=>h(Xt.POSITION),className:"flex items-center gap-1.5 px-2 py-1.5 rounded text-xs font-medium transition-colors hover:bg-gray-100"},f.createElement(Jp,{size:14}),f.createElement("span",{className:"hidden sm:inline"},"Position"))),f.createElement("button",{onClick:()=>ie({locked:!q.locked}),className:`p-1.5 hover:bg-gray-100 rounded transition-colors ${q.locked?"text-red-500 bg-red-50":""}`,title:q.locked?"Unlock":"Lock"},q.locked?f.createElement(pu,{size:16}):f.createElement(gu,{size:16})),f.createElement("button",{onClick:()=>l(me),className:"p-1.5 hover:bg-gray-100 rounded transition-colors",title:"Duplicate"},f.createElement(Uf,{size:16})),f.createElement("button",{onClick:()=>i(me),className:"p-1.5 hover:bg-red-50 text-red-500 rounded transition-colors"},f.createElement(XA,{size:16}))))},U1=80,sI=({pages:r,activePageId:e,setActivePage:t,addPage:n,duplicatePage:i,deletePage:A,settings:o,onClose:l})=>{fe.useRef(null);const u=U1/o.height,h=o.width*u;return f.createElement("div",{className:"h-32 bg-white border-t border-gray-200 flex flex-col shadow-[-4px_0_15px_rgba(0,0,0,0.05)] animate-in slide-in-from-bottom-10 duration-200 z-10 relative"},f.createElement("div",{className:"h-8 flex items-center justify-between px-4 bg-gray-50 border-b border-gray-100"},f.createElement("span",{className:"text-xs font-semibold text-slate-500 uppercase tracking-wide"},"Pages (",r.length,")"),f.createElement("button",{onClick:l,className:"p-1 hover:bg-gray-200 rounded text-slate-400 hover:text-slate-600"},f.createElement(Ok,{size:16,className:"rotate-180"}))),f.createElement("div",{className:"flex-1 flex items-center overflow-x-auto px-4 gap-4 py-2 custom-scrollbar"},r.map((g,m)=>{const b=g.id===e;return f.createElement("div",{key:g.id,className:"group relative flex flex-col gap-1 items-center"},f.createElement("div",{onClick:()=>t(g.id),className:`relative border-2 rounded-md overflow-hidden cursor-pointer transition-all ${b?"border-indigo-600 ring-2 ring-indigo-100":"border-gray-200 hover:border-gray-300"}`,style:{width:h,height:U1}},f.createElement("div",{className:"bg-white origin-top-left pointer-events-none select-none",style:{width:o.width,height:o.height,transform:`scale(${u})`}},g.elements.map(p=>f.createElement("div",{key:p.id,style:{position:"absolute",left:p.x,top:p.y,width:p.width,height:p.height,transform:`rotate(${p.rotation}deg)`,backgroundColor:p.type==="shape"?p.backgroundColor||"#ccc":void 0,opacity:p.opacity,color:p.color,fontSize:p.fontSize,display:"flex",alignItems:"center",overflow:"hidden"}},p.type==="image"&&f.createElement("img",{src:p.content,className:"w-full h-full object-cover"}),p.type==="shape"&&f.createElement("div",{className:"w-full h-full",style:{borderRadius:p.content==="circle"?"50%":0,clipPath:p.content==="triangle"?"polygon(50% 0%, 0% 100%, 100% 100%)":void 0,background:p.backgroundColor}}),p.type==="text"&&f.createElement("span",{className:"whitespace-nowrap"},p.content)))),f.createElement("div",{className:"absolute inset-0 bg-black/5 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2"},f.createElement("button",{onClick:p=>{p.stopPropagation(),i(g.id)},className:"p-1.5 bg-white rounded-full text-slate-600 shadow-sm hover:text-blue-600 hover:scale-110 transition-all",title:"Duplicate"},f.createElement(Uf,{size:12})),r.length>1&&f.createElement("button",{onClick:p=>{p.stopPropagation(),A(g.id)},className:"p-1.5 bg-white rounded-full text-slate-600 shadow-sm hover:text-red-600 hover:scale-110 transition-all",title:"Delete"},f.createElement(XA,{size:12})))),f.createElement("div",{className:"text-[10px] text-slate-500 font-medium truncate max-w-[80px]"},m+1,". ",g.name))}),f.createElement("button",{onClick:n,className:"flex-shrink-0 flex flex-col items-center justify-center gap-2 text-slate-400 hover:text-indigo-600 group",style:{width:h,height:U1}},f.createElement("div",{className:"w-10 h-10 rounded-full border border-gray-300 group-hover:border-indigo-300 flex items-center justify-center transition-colors"},f.createElement(no,{size:20})),f.createElement("span",{className:"text-[10px] font-medium"},"Add Page"))))},oI=({open:r,title:e,description:t,upgradeUrl:n,onClose:i})=>r?f.createElement("div",{className:"fixed inset-0 z-[200] flex items-center justify-center bg-black/40 px-4","data-no-export":!0},f.createElement("div",{className:"w-full max-w-md rounded-2xl bg-white shadow-2xl border border-slate-200 overflow-hidden"},f.createElement("div",{className:"flex items-center justify-between px-5 py-4 border-b border-slate-100"},f.createElement("div",{className:"flex items-center gap-3"},f.createElement("div",{className:"h-9 w-9 rounded-full bg-amber-50 text-amber-600 flex items-center justify-center"},f.createElement(Lo,{size:18})),f.createElement("div",null,f.createElement("div",{className:"text-sm font-semibold text-slate-900"},e),f.createElement("div",{className:"text-xs text-slate-500"},"Fraczled Pro"))),f.createElement("button",{onClick:i,className:"p-1.5 rounded-full text-slate-400 hover:text-slate-600 hover:bg-slate-100"},f.createElement(Ri,{size:18}))),f.createElement("div",{className:"px-5 py-4 text-sm text-slate-600"},t),f.createElement("div",{className:"px-5 pb-5 flex items-center justify-end gap-2"},f.createElement("button",{onClick:i,className:"px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-800"},"Not now"),n?f.createElement("a",{href:n,target:"_blank",rel:"noreferrer",className:"px-4 py-2 rounded-lg bg-slate-900 text-white text-sm font-semibold hover:bg-slate-800"},"Upgrade"):f.createElement("button",{disabled:!0,className:"px-4 py-2 rounded-lg bg-slate-300 text-white text-sm font-semibold cursor-not-allowed"},"Upgrade")))):null,lI=[{name:"Instagram Post",width:1080,height:1080,unit:"px",dpi:72,icon:f.createElement(AB,{size:20})},{name:"Instagram Story",width:1080,height:1920,unit:"px",dpi:72,icon:f.createElement(d7,{size:20})},{name:"Facebook Post",width:1200,height:630,unit:"px",dpi:72,icon:f.createElement(Kk,{size:20})},{name:"Twitter Post",width:1200,height:675,unit:"px",dpi:72,icon:f.createElement(x7,{size:20})},{name:"LinkedIn Banner",width:1584,height:396,unit:"px",dpi:72,icon:f.createElement(sB,{size:20})},{name:"YouTube Thumbnail",width:1280,height:720,unit:"px",dpi:72,icon:f.createElement(mu,{size:20})}],cI=[{name:"Business Card",width:3.5,height:2,unit:"in",dpi:300,bleed:.25,icon:f.createElement(Hk,{size:20})},{name:"Postcard (4x6)",width:6,height:4,unit:"in",dpi:300,bleed:.25,icon:f.createElement(Ff,{size:20})},{name:"Flyer (Letter)",width:8.5,height:11,unit:"in",dpi:300,bleed:.25,icon:f.createElement(Ff,{size:20})},{name:"Poster (11x17)",width:11,height:17,unit:"in",dpi:300,bleed:.25,icon:f.createElement(t1,{size:20})},{name:"A4 Document",width:210,height:297,unit:"mm",dpi:300,bleed:6,icon:f.createElement(Ff,{size:20})},{name:"A5 Flyer",width:148,height:210,unit:"mm",dpi:300,bleed:6,icon:f.createElement(Ff,{size:20})}],uI=({open:r,onClose:e,onSkipFuture:t})=>{const[n,i]=fe.useState("templates"),[A,o]=fe.useState(800),[l,u]=fe.useState(600),[h,g]=fe.useState("px"),[m,b]=fe.useState(72),[p,E]=fe.useState(!1),[x,N]=fe.useState(!1),[U,L]=fe.useState(""),[M,R]=fe.useState("all"),[Ae,le]=fe.useState([]),[te,re]=fe.useState(!1);fe.useEffect(()=>{r&&n==="templates"&&(re(!0),FB().then(le).finally(()=>re(!1)))},[r,n]);const J=fe.useMemo(()=>{const Y=Ae,j=U.toLowerCase().trim();let O=M==="all"?Y:Y.filter($=>$.category===M);return j&&(O=O.filter($=>$.name.toLowerCase().includes(j)||$.tags.some(ce=>ce.toLowerCase().includes(j)))),O},[U,M,Ae]),ye=Ae.length>0;if(!r)return null;const X=Y=>{Oe.loadTemplate(Y),x&&Oe.updateSettings({backgroundColor:"transparent"}),p&&t(),e()},W=Y=>{const j=Za(Y.width,Y.unit),O=Za(Y.height,Y.unit),$=Y.bleed?Za(Y.bleed,Y.unit):0,ce=Y.dpi===300,V=ce?Za(.25,"in"):0;Oe.updateSettings({width:j,height:O,unit:Y.unit,dpi:Y.dpi,bleed:$,showBleed:ce,safeArea:V,showSafeArea:ce,backgroundColor:x?"transparent":"#ffffff"});const I=Oe.getSnapshot();I.activePageId&&Oe.updatePageDimensions(I.activePageId,{width:j,height:O,unit:Y.unit}),p&&t(),e()},G=()=>{const Y=Za(A,h),j=Za(l,h);Oe.updateSettings({width:Y,height:j,unit:h,dpi:m,bleed:0,showBleed:!1,safeArea:0,showSafeArea:!1,backgroundColor:x?"transparent":"#ffffff"});const O=Oe.getSnapshot();O.activePageId&&Oe.updatePageDimensions(O.activePageId,{width:Y,height:j,unit:h}),p&&t(),e()},z=n==="social"?lI:cI;return f.createElement("div",{className:"fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm animate-in fade-in duration-200"},f.createElement("div",{className:"bg-white rounded-2xl shadow-2xl w-full max-w-3xl max-h-[85vh] overflow-hidden flex flex-col animate-in zoom-in-95 duration-200"},f.createElement("div",{className:"flex items-center justify-between px-6 py-4 border-b border-gray-100"},f.createElement("h2",{className:"text-xl font-bold text-slate-800"},"Create New Design"),f.createElement("button",{onClick:e,className:"p-2 hover:bg-gray-100 rounded-full transition-colors text-slate-400 hover:text-slate-600"},f.createElement(Ri,{size:20}))),f.createElement("div",{className:"flex gap-2 px-6 py-3 border-b border-gray-100 bg-gray-50/50"},f.createElement("button",{onClick:()=>i("templates"),className:`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${n==="templates"?"bg-indigo-600 text-white":"bg-white text-slate-600 hover:bg-gray-100 border border-gray-200"}`},"Templates"),f.createElement("button",{onClick:()=>i("social"),className:`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${n==="social"?"bg-indigo-600 text-white":"bg-white text-slate-600 hover:bg-gray-100 border border-gray-200"}`},"Social Media"),f.createElement("button",{onClick:()=>i("print"),className:`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${n==="print"?"bg-indigo-600 text-white":"bg-white text-slate-600 hover:bg-gray-100 border border-gray-200"}`},"Print"),f.createElement("button",{onClick:()=>i("custom"),className:`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${n==="custom"?"bg-indigo-600 text-white":"bg-white text-slate-600 hover:bg-gray-100 border border-gray-200"}`},"Custom Size")),f.createElement("div",{className:"flex-1 overflow-y-auto p-6"},n==="templates"?f.createElement("div",{className:"space-y-4"},f.createElement("div",{className:"relative"},f.createElement(VA,{className:"absolute left-3 top-2.5 text-slate-400",size:16}),f.createElement("input",{type:"text",placeholder:"Search templates...",className:"w-full pl-9 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all placeholder:text-slate-400",value:U,onChange:Y=>L(Y.target.value)})),f.createElement("div",{className:"flex gap-1 flex-wrap"},f.createElement("button",{onClick:()=>R("all"),className:`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors ${M==="all"?"bg-slate-900 text-white":"bg-slate-100 text-slate-600 hover:bg-slate-200"}`},"All"),m1.map(Y=>f.createElement("button",{key:Y.id,onClick:()=>R(Y.id),className:`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors ${M===Y.id?"bg-slate-900 text-white":"bg-slate-100 text-slate-600 hover:bg-slate-200"}`},Y.name))),te?f.createElement("div",{className:"flex flex-col items-center justify-center py-12 text-center"},f.createElement(du,{size:32,className:"text-indigo-500 mb-4 animate-spin"}),f.createElement("p",{className:"text-sm text-slate-500"},"Loading templates...")):ye?J.length===0?f.createElement("div",{className:"flex flex-col items-center justify-center py-8 text-center"},f.createElement(VA,{size:32,className:"text-slate-300 mb-3"}),f.createElement("p",{className:"text-sm text-slate-500"},"No templates found"),f.createElement("p",{className:"text-xs text-slate-400 mt-1"},"Try a different search term")):f.createElement("div",{className:"grid grid-cols-2 sm:grid-cols-3 gap-3"},J.map(Y=>f.createElement("button",{key:Y.id,onClick:()=>X(Y),className:"group relative flex flex-col rounded-xl border border-slate-200 hover:border-indigo-400 hover:shadow-lg transition-all bg-white overflow-hidden"},f.createElement("div",{className:"aspect-square bg-slate-50 flex items-center justify-center overflow-hidden"},Y.thumbnail?f.createElement("img",{src:Y.thumbnail,alt:Y.name,className:"w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"}):f.createElement(xc,{size:32,className:"text-slate-300"})),f.createElement("div",{className:"p-2 border-t border-slate-100"},f.createElement("span",{className:"text-xs font-medium text-slate-700 group-hover:text-slate-900 line-clamp-1"},Y.name),f.createElement("span",{className:"text-[10px] text-slate-400 capitalize block"},Y.category.replace("-"," ")))))):f.createElement("div",{className:"flex flex-col items-center justify-center py-12 text-center"},f.createElement(xc,{size:48,className:"text-slate-300 mb-4"}),f.createElement("h3",{className:"text-sm font-semibold text-slate-700 mb-2"},"No Templates Yet"),f.createElement("p",{className:"text-xs text-slate-500 max-w-[200px]"},"Choose a blank canvas size from Social Media or Print tabs."))):n!=="custom"?f.createElement("div",{className:"grid grid-cols-2 sm:grid-cols-3 gap-4"},z.map(Y=>f.createElement("button",{key:Y.name,onClick:()=>W(Y),className:"group flex flex-col items-center p-4 rounded-xl border border-gray-200 hover:border-indigo-300 hover:bg-indigo-50/50 transition-all text-left"},f.createElement("div",{className:"w-16 h-16 rounded-xl bg-gradient-to-br from-indigo-100 to-purple-100 flex items-center justify-center text-indigo-600 mb-3 group-hover:from-indigo-200 group-hover:to-purple-200 transition-colors"},Y.icon),f.createElement("span",{className:"font-semibold text-slate-800 text-sm"},Y.name),f.createElement("span",{className:"text-xs text-slate-400 mt-1"},Y.width," x ",Y.height," ",Y.unit),Y.dpi===300&&f.createElement("span",{className:"text-[10px] bg-amber-100 text-amber-700 px-2 py-0.5 rounded-full mt-2 font-medium"},"300 DPI")))):f.createElement("div",{className:"max-w-md mx-auto space-y-6"},f.createElement("div",{className:"grid grid-cols-2 gap-4"},f.createElement("div",null,f.createElement("label",{className:"block text-xs font-bold text-slate-500 uppercase mb-2"},"Width"),f.createElement("input",{type:"number",value:A,onChange:Y=>o(Number(Y.target.value)),className:"w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"})),f.createElement("div",null,f.createElement("label",{className:"block text-xs font-bold text-slate-500 uppercase mb-2"},"Height"),f.createElement("input",{type:"number",value:l,onChange:Y=>u(Number(Y.target.value)),className:"w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"}))),f.createElement("div",{className:"grid grid-cols-2 gap-4"},f.createElement("div",null,f.createElement("label",{className:"block text-xs font-bold text-slate-500 uppercase mb-2"},"Unit"),f.createElement("select",{value:h,onChange:Y=>g(Y.target.value),className:"w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent bg-white"},f.createElement("option",{value:"px"},"Pixels (px)"),f.createElement("option",{value:"in"},"Inches (in)"),f.createElement("option",{value:"mm"},"Millimeters (mm)"),f.createElement("option",{value:"pt"},"Points (pt)"))),f.createElement("div",null,f.createElement("label",{className:"block text-xs font-bold text-slate-500 uppercase mb-2"},"DPI"),f.createElement("select",{value:m,onChange:Y=>b(Number(Y.target.value)),className:"w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent bg-white"},f.createElement("option",{value:72},"72 (Web)"),f.createElement("option",{value:150},"150 (Medium)"),f.createElement("option",{value:300},"300 (Print)")))),f.createElement("button",{onClick:G,className:"w-full py-3 bg-indigo-600 text-white font-semibold rounded-lg hover:bg-indigo-700 transition-colors"},"Create Custom Document"))),f.createElement("div",{className:"flex items-center justify-between px-6 py-4 border-t border-gray-100 bg-gray-50/50"},f.createElement("div",{className:"flex items-center gap-4"},f.createElement("label",{className:"flex items-center gap-2 text-sm text-slate-600 cursor-pointer select-none"},f.createElement("input",{type:"checkbox",checked:x,onChange:Y=>N(Y.target.checked),className:"w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"}),"Transparent background"),f.createElement("label",{className:"flex items-center gap-2 text-sm text-slate-400 cursor-pointer select-none"},f.createElement("input",{type:"checkbox",checked:p,onChange:Y=>E(Y.target.checked),className:"w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"}),"Don't show this again")),f.createElement("button",{onClick:e,className:"px-4 py-2 text-sm text-slate-600 hover:bg-gray-100 rounded-lg transition-colors"},"Skip for now"))))};function fI(r,e,t,n=8192,i=67108864){const A=r*t,o=e*t,l=A*o;return A>n||o>n||l>i}function hI(r,e,t){const n=r*e*t*t*4;return{bytes:n,mb:n/(1024*1024)}}const dI={format:"png",quality:1,includeBleed:!1,progressive:!1,tileSize:2048};class YB{constructor(e,t){this.abortController=null,this.cache=e??DB(),this.config={...dI,...t}}shouldUseTiling(e,t,n){const i=kd()?4096:8192,A=kd()?16777216:67108864;return fI(e,t,n,i,A)}getSafePixelRatio(e,t,n){return wB({kind:this.config.format==="png"||this.config.format==="jpeg"?"web":"print",width:e,height:t,dpi:n??this.config.dpi,pixelRatio:this.config.pixelRatio})}estimateMemory(e,t,n){return hI(e,t,n)}async warmCache(e,t,n){var A;const i=e.filter(o=>this.cache.shouldCache(o));if(i.length===0){n==null||n({stage:"caching",percent:100,message:"No elements to cache"});return}for(let o=0;o<i.length;o++){const l=i[o];if(!this.cache.get(l,t)&&(n==null||n({stage:"caching",percent:(o+1)/i.length*100,message:`Caching element ${o+1} of ${i.length}`}),(A=this.abortController)!=null&&A.signal.aborted))throw new Error("Export aborted")}}async exportWithFallback(e,t,n,i,A){this.abortController=new AbortController;try{A==null||A({stage:"preparing",percent:0,message:"Preparing export..."});const o=this.estimateMemory(t,n,i);if(this.shouldUseTiling(t,n,i)&&this.config.progressive){const h=c1(i,t,n,{maxCanvasSize:kd()?4096:8192,clampForIOS:!0});A==null||A({stage:"preparing",percent:10,message:`Adjusted pixel ratio to ${h.toFixed(2)} for memory constraints`})}A==null||A({stage:"rendering",percent:20,message:"Capturing design..."});const u=await e();if(this.abortController.signal.aborted)throw new Error("Export aborted");return A==null||A({stage:"encoding",percent:90,message:"Encoding output..."}),A==null||A({stage:"complete",percent:100,message:"Export complete"}),u}finally{this.abortController=null}}async exportPages(e,t,n,i){this.abortController=new AbortController;const A=[];try{for(let o=0;o<e.length;o++){const l=e[o];if(i==null||i({stage:"rendering",percent:o/e.length*100,currentPage:o+1,totalPages:e.length,message:`Exporting page ${o+1} of ${e.length}`}),this.abortController.signal.aborted)throw new Error("Export aborted");const u=await n(l.id);A.push(u)}return i==null||i({stage:"complete",percent:100,totalPages:e.length,message:"All pages exported"}),A}finally{this.abortController=null}}abort(){var e;(e=this.abortController)==null||e.abort()}isExporting(){return this.abortController!==null}}let F1=null;function gI(){return F1||(F1=new YB),F1}function pI(r={}){const{useGlobal:e=!0,...t}=r,n=fe.useRef(e?gI():new YB(void 0,t));RB();const[i,A]=fe.useState(null),[o,l]=fe.useState(!1),u=fe.useCallback(async(p,E,x,N)=>{l(!0),A({stage:"preparing",percent:0});try{return await n.current.exportWithFallback(p,E,x,N,A)}finally{l(!1),setTimeout(()=>A(null),500)}},[]),h=fe.useCallback(()=>{n.current.abort(),l(!1),A(null)},[]),g=fe.useCallback((p,E,x)=>n.current.shouldUseTiling(p,E,x),[]),m=fe.useCallback((p,E,x)=>n.current.getSafePixelRatio(p,E,x),[]),b=fe.useCallback((p,E,x)=>n.current.estimateMemory(p,E,x),[]);return{exportWithProgress:u,progress:i,isExporting:o,cancel:h,shouldUseTiling:g,getSafePixelRatio:m,estimateMemory:b,pipeline:n.current}}const _1=()=>Math.random().toString(36).substring(2,9),mI=({apiKey:r,className:e,showCredit:t,customPanels:n})=>{const i=fe.useSyncExternalStore(pe=>Oe.subscribe(pe),()=>Oe.getSnapshot()),[A,o]=fe.useState(()=>Oe.getLicenseStatus());fe.useEffect(()=>(o(Oe.getLicenseStatus()),Oe.subscribeLicense(()=>{o(Oe.getLicenseStatus())})),[]);const l=Od();pI();const u=A.entitlements.ai,h=A.entitlements.export.web,g=A.entitlements.export.print,m=A.showWatermark||t!==!1,b=A.showWatermark,p=A.upgradeUrl,E=A.entitlements.features||{},[x,N]=fe.useState(null),U={[Xt.TEMPLATES]:"Templates",[Xt.DESIGN]:"Design",[Xt.ELEMENTS]:"Elements",[Xt.TEXT]:"Text",[Xt.IMAGES]:"Images",[Xt.BRAND]:"Brand",[Xt.UPLOADS]:"Uploads",[Xt.QR_CODE]:"QR Codes",[Xt.LAYERS]:"Layers",[Xt.COLOR]:"Color",[Xt.FONT]:"Fonts",[Xt.EFFECTS]:"Effects",[Xt.POSITION]:"Position",[Xt.PROJECTS]:"Projects",[Xt.DRAW]:"Draw"},L={[Xt.TEMPLATES]:"templates",[Xt.DESIGN]:"design",[Xt.ELEMENTS]:"elements",[Xt.TEXT]:"text",[Xt.IMAGES]:"images",[Xt.BRAND]:"brand",[Xt.UPLOADS]:"uploads",[Xt.QR_CODE]:"qrcode",[Xt.LAYERS]:"layers"},M=fe.useMemo(()=>{const pe=new Map;return(n||[]).forEach(Be=>{Be!=null&&Be.id&&pe.set(Be.id,Be)}),pe},[n]);fe.useEffect(()=>{n!=null&&n.length&&n.forEach(pe=>{pe!=null&&pe.id&&Object.values(Xt).includes(pe.id)&&console.warn(`[Editor] Custom panel id "${pe.id}" conflicts with a built-in tool id.`)})},[n]);const R=fe.useCallback(pe=>{if(!pe)return"";const Be=M.get(pe);return Be!=null&&Be.label?Be.label:U[pe]||String(pe)},[M,U]),Ae=pe=>{if(!A.isValid)return!1;if(!pe)return!0;const Be=M.get(pe);if(Be!=null&&Be.feature)return E[Be.feature]!==!1;const Qe=L[pe];return Qe?E[Qe]!==!1:!0},le=(pe,Be)=>{switch(pe){case"ai":N({title:"Unlock Magic Write",description:"Upgrade to generate headlines, rewrites, and AI-assisted copy inside the editor."});break;case"export-web":N({title:"Unlock Web Exports",description:"Upgrade to export assets for web usage without restrictions."});break;case"export-print":default:N({title:"Unlock Print Exports",description:"Upgrade to export print-ready PDFs and high-resolution PNGs."});break;case"feature":N({title:`Unlock ${Be||"this feature"}`,description:"Upgrade to access this feature for your workspace."});break}},[te,re]=fe.useState(null),[J,ye]=fe.useState(null),[X,W]=fe.useState("select"),[G,z]=fe.useState(!1),[Y,j]=fe.useState(!1),[O,$]=fe.useState(()=>typeof window<"u"?localStorage.getItem("fraczled_skip_new_doc_modal")!=="true":!0),[ce,V]=fe.useState(!1),[I,F]=fe.useState(""),[k,C]=fe.useState(!1),[Q,T]=fe.useState(!1),[H,Z]=fe.useState(!1),ae=()=>{i.pages.some(Be=>Be.elements&&Be.elements.length>0)?T(!0):$(!0)},me=()=>{T(!1),Z(!0),F(i.title||"My Design"),V(!0)},q=()=>{T(!1),Oe.reset({transparent:!1}),$(!0)},ie=()=>{localStorage.setItem("fraczled_skip_new_doc_modal","true")},se=fe.useMemo(()=>{const pe=i.brandKits.find(Be=>Be.id===i.activeBrandKitId);return pe?pe.colors:[]},[i.brandKits,i.activeBrandKitId]),be=fe.useMemo(()=>i.brandKits.find(pe=>pe.id===i.activeBrandKitId),[i.brandKits,i.activeBrandKitId]),K=i.pages.find(pe=>pe.id===i.activePageId),Fe=fe.useMemo(()=>K?K.elements:[],[K]),nt=fe.useMemo(()=>i.pages.findIndex(pe=>pe.id===i.activePageId)+1,[i.pages,i.activePageId]),_e=fe.useMemo(()=>K?{...i.settings,width:K.width??i.settings.width,height:K.height??i.settings.height,unit:K.unit??i.settings.unit}:i.settings,[i.settings,K]);fe.useEffect(()=>{i.pages.forEach(pe=>{pe.elements.forEach(Be=>{Be.fontFamily&&tu(Be.fontFamily)})})},[]),fe.useEffect(()=>{be!=null&&be.customFonts&&be.customFonts.forEach(pe=>{Fw(pe.name,pe.url)})},[be]);const Ie=pe=>{if(pe&&!Ae(pe)){le("feature",R(pe)||"this feature");return}if(pe===Xt.QR_CODE&&te!==Xt.QR_CODE){const Be=(K==null?void 0:K.width)??i.settings.width,Qe=(K==null?void 0:K.height)??i.settings.height,qe={id:_1(),type:"qrcode",name:"QR Code",visible:!0,content:"https://example.com",x:Be/2-75,y:Qe/2-75,width:150,height:150,rotation:0,opacity:1,zIndex:Fe.length+1,locked:!1,color:"#000000",backgroundColor:"#ffffff",effect:{style:{type:"none",params:{}},shape:{type:"none",params:{curve:0}}}};Oe.addElement(qe),W("select")}pe===Xt.DRAW?W("pen"):(X==="pen"||X==="direct-select")&&W("select"),re(pe)},Je=pe=>{ye(pe),re(Xt.COLOR)};fe.useEffect(()=>{const pe=Be=>{if(Be.target.tagName==="INPUT"||Be.target.tagName==="TEXTAREA")return;const Qe=Be.metaKey||Be.ctrlKey,qe=Be.shiftKey,Re=Be.key.toLowerCase();if(!Qe&&!Be.altKey)switch(Re){case"v":W("select");return;case"t":W("text");return;case"r":W("rotate");return;case"s":W("scale");return;case"z":W("zoom");return;case"h":W("hand");return;case"p":W("pen");return;case"a":W("direct-select");return}if(Qe&&Re==="n"&&(Be.preventDefault(),confirm("Create new design? Unsaved changes will be lost.")&&Oe.loadJSON(JSON.stringify({...i,pages:[{...i.pages[0],elements:[]}],selection:[]}))),Qe&&Re==="z"&&(Be.preventDefault(),qe?Oe.redo():Oe.undo()),Qe&&Re==="y"&&(Be.preventDefault(),Oe.redo()),Qe&&Re==="a"&&(Be.preventDefault(),Oe.selectAll()),Be.key==="Escape"&&(Oe.deselectAll(),re(null),z(!1),W("select")),(Be.key==="Delete"||Be.key==="Backspace")&&Oe.deleteSelection(),Qe&&Re==="g"&&(Be.preventDefault(),qe?Oe.ungroupSelection():Oe.groupSelection()),i.selection.length>0){const rt=qe?10:1;Be.key==="ArrowUp"&&(Be.preventDefault(),Oe.nudgeSelection(0,-rt)),Be.key==="ArrowDown"&&(Be.preventDefault(),Oe.nudgeSelection(0,rt)),Be.key==="ArrowLeft"&&(Be.preventDefault(),Oe.nudgeSelection(-rt,0)),Be.key==="ArrowRight"&&(Be.preventDefault(),Oe.nudgeSelection(rt,0))}if(Qe&&(Be.key==="="||Be.key==="+")&&(Be.preventDefault(),Oe.setZoom(Math.min(200,i.zoom+10))),Qe&&Be.key==="-"&&(Be.preventDefault(),Oe.setZoom(Math.max(10,i.zoom-10))),Qe&&Be.key==="0"&&(Be.preventDefault(),window.dispatchEvent(new CustomEvent("canvas-fit-to-screen"))),Qe&&Re==="c"&&(Be.preventDefault(),Oe.copy()),Qe&&Re==="x"&&(Be.preventDefault(),Oe.cut()),Qe&&Re==="v"&&(Be.preventDefault(),Oe.paste()),Qe&&Re==="d"&&(Be.preventDefault(),Oe.duplicateSelection()),Qe&&Be.key==="]"&&(Be.preventDefault(),i.selection.forEach(rt=>Oe.reorderElement(rt,qe?"front":"forward"))),Qe&&Be.key==="["&&(Be.preventDefault(),i.selection.forEach(rt=>Oe.reorderElement(rt,qe?"back":"backward"))),Qe&&Re==="l"&&(Be.preventDefault(),i.selection.forEach(rt=>{const Ve=Fe.find(At=>At.id===rt);Ve&&Oe.updateElement(rt,{locked:!Ve.locked})})),Qe&&qe)switch(Re){case"l":Be.preventDefault(),Oe.alignSelection("left");break;case"c":Be.preventDefault(),Oe.alignSelection("center");break;case"r":Be.preventDefault(),Oe.alignSelection("right");break;case"t":Be.preventDefault(),Oe.alignSelection("top");break;case"m":Be.preventDefault(),Oe.alignSelection("middle");break;case"b":Be.preventDefault(),Oe.alignSelection("bottom");break}};return window.addEventListener("keydown",pe),()=>window.removeEventListener("keydown",pe)},[i.selection,i.zoom,i.pages]);const et=(pe,Be,Qe,qe,Re)=>{const rt=Be==="heading"?32:Be==="subheading"?24:14,Ve=Be==="heading"?"bold":Be==="subheading"?"semibold":"normal",At=(K==null?void 0:K.width)??i.settings.width;(K==null?void 0:K.height)??i.settings.height;const It=At-40*2;let yt=200,Rt=rt*1.5,Lt=yt;try{const Dt=document.createElement("canvas").getContext("2d");if(Dt){Dt.font=`${Ve==="bold"?"bold":Ve==="semibold"?"600":"normal"} ${rt}px ${(Re==null?void 0:Re.fontFamily)||"Inter"}, sans-serif`;const or=Dt.measureText(pe);Lt=Math.ceil(or.width)+10,yt=Lt}}catch(Pt){console.warn("Could not measure text width automatically",Pt)}const Ht=Lt>It;if(Ht){yt=It;const Pt=Math.ceil(Lt/It);Rt=rt*1.5*Pt}const Mt={id:_1(),type:"text",name:pe.substring(0,20),visible:!0,content:pe,x:Qe!==void 0?Qe:-1,y:qe!==void 0?qe:-1,width:yt,height:Rt,fontSize:rt,fontWeight:Ve,fontFamily:(Re==null?void 0:Re.fontFamily)||"Inter",color:(Re==null?void 0:Re.color)||"#1e293b",rotation:0,opacity:1,zIndex:Fe.length+1,locked:!1,autoWidth:!Ht,textStrokeWidth:0,textStrokeColor:"#000000",textStrokePosition:"behind",textStrokeStyle:"round",effect:{style:{type:"none",params:{}},shape:{type:"none",params:{curve:0}}}};Oe.addElement(Mt)},mt=pe=>{const Be=pe==="line"?200:100,Qe=pe==="line"?4:100,qe={id:_1(),type:"shape",name:pe.charAt(0).toUpperCase()+pe.slice(1),visible:!0,content:pe,x:-1,y:-1,width:Be,height:Qe,backgroundColor:pe==="line"?"transparent":"#cbd5e1",strokeColor:pe==="line"?"#000000":void 0,strokeWidth:pe==="line"?4:0,rotation:0,opacity:1,zIndex:Fe.length+1,locked:!1,effect:{style:{type:"none",params:{}},shape:{type:"none",params:{curve:0}}}};Oe.addElement(qe)},Ye=async pe=>{var Qe;if(typeof document<"u"&&"fonts"in document&&((Qe=document.fonts)!=null&&Qe.ready))try{await document.fonts.ready}catch(qe){console.warn("Font readiness check failed",qe)}const Be=Array.from(pe.querySelectorAll("img"));await Promise.all(Be.map(qe=>qe.complete&&qe.naturalWidth!==0?Promise.resolve():new Promise(Re=>{const rt=()=>Re();qe.addEventListener("load",rt,{once:!0}),qe.addEventListener("error",rt,{once:!0})}))),await Promise.all(Be.map(qe=>typeof qe.decode!="function"?Promise.resolve():qe.decode().catch(()=>{}))),await new Promise(requestAnimationFrame),await new Promise(requestAnimationFrame)},Le=async pe=>{if(pe==="json"){const rt=Oe.exportJSON(),Ve=new Blob([rt],{type:"application/json"}),At=URL.createObjectURL(Ve),ht=document.createElement("a");ht.href=At,ht.download=`${i.title||"design"}.json`,document.body.appendChild(ht),ht.click(),document.body.removeChild(ht),URL.revokeObjectURL(At);return}const Be=pe.startsWith("print");if(pe==="web"&&!h||Be&&!g){le(pe==="web"?"export-web":"export-print");return}Oe.deselectAll(),await new Promise(rt=>setTimeout(rt,100));const Qe=pe.startsWith("print"),qe=pe.includes("pdf"),Re=async(rt,Ve,At,ht,It)=>{const yt=document.getElementById(`page-canvas-${rt}`);if(!yt)throw new Error(`Page ${rt} not found`);await Ye(yt);const Rt=Ve+ht*2,Lt=At+ht*2,Ht=wB({kind:Qe?"print":"web",width:Rt,height:Lt});return await bf(yt,{quality:1,pixelRatio:Ht,width:Rt,height:Lt,backgroundColor:It,cacheBust:!0,style:{transform:`translate(${ht}px, ${ht}px) scale(1)`,transformOrigin:"top left",boxShadow:"none",margin:"0",border:"none"},filter:Mt=>!(Mt.tagName&&Mt.hasAttribute("data-no-export"))})};try{const rt=i.pages,Ve=Qe&&_e.showBleed?_e.bleed:0;if(qe){const At=rt[0],ht=At.width??i.settings.width,It=At.height??i.settings.height,yt=ht>It?"landscape":"portrait",Rt=new ur({orientation:yt,unit:"px",format:[ht,It],hotfixes:["px_scaling"]});for(let Lt=0;Lt<rt.length;Lt++){const Ht=rt[Lt],Mt=Ht.width??i.settings.width,Pt=Ht.height??i.settings.height;i.activePageId!==Ht.id&&(Oe.setActivePage(Ht.id),await new Promise(or=>setTimeout(or,50)));const Dt=await Re(Ht.id,Mt,Pt,Ve,_e.backgroundColor||"#ffffff");Lt>0&&Rt.addPage([Mt,Pt],Mt>Pt?"landscape":"portrait"),Rt.addImage(Dt,"PNG",0,0,Mt,Pt)}Rt.save(`${i.title.replace(/\s+/g,"-")}.pdf`)}else for(let At=0;At<rt.length;At++){const ht=rt[At];i.activePageId!==ht.id&&(Oe.setActivePage(ht.id),await new Promise(Mt=>setTimeout(Mt,50)));const It=ht.width??i.settings.width,yt=ht.height??i.settings.height,Rt=await Re(ht.id,It,yt,Ve,_e.backgroundColor||"#ffffff"),Lt=document.createElement("a"),Ht=rt.length>1?`-Page${At+1}`:"";Lt.download=`${i.title.replace(/\s+/g,"-").toLowerCase()}${Ht}.png`,Lt.href=Rt,Lt.click(),rt.length>1&&await new Promise(Mt=>setTimeout(Mt,500))}}catch(rt){console.error("Export failed",rt),alert("Failed to export. Please try again.")}},De=()=>{if(!A.isValid){le("design");return}F(i.title||"My Design"),V(!0)},Ce=async()=>{if(!I.trim())return;C(!0);let pe="";try{const Be=i.activePageId,Qe=document.getElementById(`page-canvas-${Be}`),qe=i.pages.find(Re=>Re.id===Be);if(Qe&&qe){const Re=Ld({targetSize:200,width:qe.width??i.settings.width,height:qe.height??i.settings.height});pe=await bf(Qe,{quality:.9,pixelRatio:Re,style:{margin:"0",overflow:"hidden",transform:"scale(1)",transformOrigin:"top left"},filter:rt=>{var Ve;return!((Ve=rt.hasAttribute)!=null&&Ve.call(rt,"data-no-export"))}})}}catch(Be){console.error("Failed to capture thumbnail:",Be)}Oe.saveDesign(I.trim(),pe),F(""),V(!1),C(!1),H&&(Z(!1),Oe.reset({transparent:!1}),$(!0))};return l?f.createElement("div",{className:"fixed inset-0 bg-gradient-to-br from-slate-900 to-slate-800 flex items-center justify-center p-6"},f.createElement("div",{className:"max-w-md text-center"},f.createElement("div",{className:"w-16 h-16 mx-auto mb-6 rounded-2xl bg-indigo-500/20 flex items-center justify-center"},f.createElement("svg",{className:"w-8 h-8 text-indigo-400",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"},f.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5,d:"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"}))),f.createElement("h1",{className:"text-2xl font-bold text-white mb-3"},"Desktop Required"),f.createElement("p",{className:"text-slate-400 leading-relaxed"},"This design editor is optimized for desktop use. Please open it on a computer for the best experience."))):f.createElement("div",{className:`flex flex-col h-screen h-[100dvh] w-screen overflow-hidden bg-slate-50/50 text-slate-900 font-sans ${e||""}`},ce&&f.createElement("div",{className:"fixed inset-0 bg-black/50 flex items-center justify-center z-[200]",onClick:()=>V(!1)},f.createElement("div",{className:"bg-white rounded-xl shadow-2xl p-6 w-[90%] max-w-md",onClick:pe=>pe.stopPropagation()},f.createElement("h2",{className:"text-lg font-bold text-slate-800 mb-4"},"Save Design"),f.createElement("input",{type:"text",value:I,onChange:pe=>F(pe.target.value),placeholder:"Enter design name...",className:"w-full px-3 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 mb-4",autoFocus:!0,onKeyDown:pe=>{pe.key==="Enter"&&Ce()}}),f.createElement("div",{className:"flex gap-2"},f.createElement("button",{onClick:Ce,disabled:!I.trim()||k,className:"flex-1 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium text-sm disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2"},k?"Saving...":"Save"),f.createElement("button",{onClick:()=>{V(!1),F(""),Z(!1)},className:"px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-600 rounded-lg font-medium text-sm transition-colors"},"Cancel")))),f.createElement(S7,{title:i.title,onTitleChange:pe=>Oe.setTitle(pe),onExport:Le,onUndo:()=>Oe.undo(),onRedo:()=>Oe.redo(),canUndo:Oe.canUndo(),canRedo:Oe.canRedo(),onToggleSettings:()=>z(!G),zoom:i.zoom,setZoom:pe=>Oe.setZoom(pe),showToolbar:i.selection.length>0,exportAccess:{web:h,print:g},canSaveLoadJson:E.saveLoad!==!1,upgradeUrl:p,onRequestUpgrade:le,onSaveDesign:De,onNewDesign:ae},f.createElement(AI,{selection:i.selection,elements:Fe,updateElement:(pe,Be)=>Oe.updateElement(pe,Be),updateElements:(pe,Be)=>Oe.updateElements(pe,Be),deleteElement:pe=>Oe.deleteElement(pe),reorderElement:(pe,Be)=>Oe.reorderElement(pe,Be),settings:_e,savedColors:i.savedColors,savedGradients:i.savedGradients,onSaveColor:pe=>Oe.addSavedColor(pe),onSaveGradient:pe=>Oe.addSavedGradient(pe),onDuplicate:pe=>Oe.duplicateElement(pe),brandColors:se,activeBrandKit:be,setActiveTool:Ie,onOpenColorPanel:Je,activeTool:te,activeColorMode:J})),f.createElement("div",{className:"flex flex-1 overflow-hidden relative flex-col md:flex-row"},f.createElement(N7,{activeTool:te,setActiveTool:Ie,featureAccess:E,onRequestUpgrade:pe=>le("feature",pe),isLicenseValid:A.isValid,customPanels:n}),te&&(l?f.createElement(d1,{isOpen:!0,onClose:()=>re(null),title:R(te)||"Tools",height:"full"},f.createElement(QB,{activeTool:te,onClose:()=>re(null),onSetActivePanel:Ie,onAddText:et,onAddShape:mt,activeColorMode:J,interactionMode:X,onSetInteractionMode:W,canUseAI:u,isLicenseValid:A.isValid,onRequestUpgrade:le,customPanels:n,title:R(te)})):f.createElement("div",{className:"absolute left-0 right-0 bottom-16 md:bottom-0 md:left-[72px] md:right-auto top-0 z-20 shadow-2xl animate-in slide-in-from-left-4 duration-200"},f.createElement(QB,{activeTool:te,onClose:()=>re(null),onSetActivePanel:Ie,onAddText:et,onAddShape:mt,activeColorMode:J,interactionMode:X,onSetInteractionMode:W,canUseAI:u,isLicenseValid:A.isValid,onRequestUpgrade:le,customPanels:n,title:R(te)}))),f.createElement("div",{className:"flex-1 flex flex-col h-full overflow-hidden relative z-0"},f.createElement(tI,{pages:i.pages,activePageId:i.activePageId,interactionMode:X,zoom:i.zoom,setZoom:pe=>Oe.setZoom(pe),settings:i.settings,selection:i.selection,setSelection:(pe,Be)=>Oe.setSelection(pe,Be),activeGroupId:i.activeGroupId,onSetActiveGroupId:pe=>Oe.setActiveGroupId(pe),updateElement:(pe,Be,Qe)=>Oe.updateElement(pe,Be,Qe),onDuplicate:pe=>Oe.duplicateElement(pe),onDelete:pe=>Oe.deleteElement(pe),onBringToFront:pe=>Oe.reorderElement(pe,"front"),onSendToBack:pe=>Oe.reorderElement(pe,"back"),onResetZoom:()=>Oe.setZoom(65),onSetActivePage:pe=>Oe.setActivePage(pe),onAddPage:pe=>Oe.addPage(pe),onDuplicatePage:pe=>Oe.duplicatePage(pe),onDeletePage:pe=>Oe.deletePage(pe),onRenamePage:(pe,Be)=>Oe.renamePage(pe,Be),onAddText:et,showCredit:m,showWatermark:b}),Y&&f.createElement(sI,{pages:i.pages,activePageId:i.activePageId,setActivePage:pe=>Oe.setActivePage(pe),addPage:()=>Oe.addPage(),duplicatePage:pe=>Oe.duplicatePage(pe),deletePage:pe=>Oe.deletePage(pe),settings:i.settings,onClose:()=>j(!1)}),f.createElement("div",{className:"hidden md:block"},f.createElement(rI,{zoom:i.zoom,setZoom:pe=>Oe.setZoom(pe),pageCount:i.pages.length,activePage:nt,showThumbnails:Y,onToggleThumbnails:()=>j(!Y),pageSize:_e}))),f.createElement(aL,{settings:i.settings,updateSettings:pe=>Oe.updateSettings(pe),isOpen:G,onClose:()=>z(!1),canLoadJson:E.saveLoad!==!1,onLoadJson:pe=>Oe.loadJSON(pe)}),f.createElement(oI,{open:!!x,title:(x==null?void 0:x.title)||"",description:(x==null?void 0:x.description)||"",upgradeUrl:p,onClose:()=>N(null)}),f.createElement(uI,{open:O,onClose:()=>$(!1),onSkipFuture:ie}),Q&&f.createElement("div",{className:"fixed inset-0 bg-black/50 flex items-center justify-center z-[200]",onClick:()=>T(!1)},f.createElement("div",{className:"bg-white rounded-xl shadow-2xl w-full max-w-sm mx-4 overflow-hidden",onClick:pe=>pe.stopPropagation()},f.createElement("div",{className:"p-6"},f.createElement("h3",{className:"text-lg font-semibold text-slate-800 mb-2"},"Unsaved Changes"),f.createElement("p",{className:"text-sm text-slate-600 mb-6"},"You have unsaved changes. Would you like to save your current design before creating a new one?"),f.createElement("div",{className:"flex flex-col gap-2"},f.createElement("button",{onClick:me,className:"w-full py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium text-sm transition-colors"},"Save First"),f.createElement("button",{onClick:q,className:"w-full py-2.5 bg-red-50 hover:bg-red-100 text-red-600 rounded-lg font-medium text-sm transition-colors"},"Discard Changes"),f.createElement("button",{onClick:()=>T(!1),className:"w-full py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg font-medium text-sm transition-colors"},"Cancel")))))))},vI=({store:r,className:e,apiKey:t,showCredit:n,customPanels:i})=>{const A=fe.useSyncExternalStore(u=>r.subscribeLicense(u),()=>r.getLicenseStatus()),o=A.showWatermark||n!==!1,l=A.isValid===!1;return f.useEffect(()=>{if(r===Oe)return;Oe.services=r.services;const u=Object.getPrototypeOf(r),h=Object.getOwnPropertyNames(u),g=[];h.forEach(p=>{if(p==="constructor"||p==="subscribe"||p==="getSnapshot"||p==="notify"||p.startsWith("_"))return;if(typeof r[p]=="function"){const x=Oe[p];Oe[p]=(...N)=>r[p](...N),g.push(()=>{x?Oe[p]=x:delete Oe[p]})}});const m=()=>{Oe.state=r.state,Oe.services=r.services,Oe.notify&&Oe.notify()};Oe.state=r.state;const b=r.subscribe(m);return()=>{b(),g.forEach(p=>p())}},[r]),l?f.createElement("div",{className:"fixed inset-0 bg-gradient-to-br from-slate-950 to-slate-900 flex items-center justify-center p-6"},f.createElement("div",{className:"max-w-md text-center"},f.createElement("div",{className:"w-16 h-16 mx-auto mb-6 rounded-2xl bg-red-500/20 flex items-center justify-center"},f.createElement("svg",{className:"w-8 h-8 text-red-300",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"},f.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5,d:"M12 9v4m0 4h.01M10.29 3.86L1.82 18a1 1 0 00.86 1.5h18.64a1 1 0 00.86-1.5L13.71 3.86a1 1 0 00-1.72 0z"}))),f.createElement("h1",{className:"text-2xl font-bold text-white mb-3"},"License Required"),f.createElement("p",{className:"text-slate-300 leading-relaxed mb-6"},A.message||"This editor is unavailable because the license is invalid or revoked."),A.upgradeUrl&&f.createElement("a",{href:A.upgradeUrl,className:"inline-flex items-center justify-center rounded-lg bg-white/10 px-4 py-2 text-sm font-semibold text-white hover:bg-white/20 transition-colors"},"Manage License"))):f.createElement(jF,{store:r},f.createElement("div",{className:`our-editor-sdk ${e||""}`},f.createElement(mI,{apiKey:t,showCredit:o,customPanels:i})))},yI="https://cdn.tailwindcss.com",bI="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",wI=".our-editor-sdk { font-family: 'Inter', sans-serif; }",xI="fraczled-sdk-loader-styles",BI=3500,EI=220,CI='<svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 118.1846 24.1172"><defs><linearGradient id="linear-gradient" x1="109.7684" y1="15.3657" x2="116.6286" y2="22.226" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#99d1a7"/><stop offset="1" stop-color="#8fd4f0"/></linearGradient></defs><g id="Layer_1-2"><path d="M86.0219,13.5526c-.0564-.5503-.1717-1.0508-.3545-1.494-.2642-.6402-.6581-1.1357-1.1813-1.4864-.5236-.3506-1.1715-.5259-1.9438-.5259s-1.4254.1779-1.9588.5335c-.5336.3559-.9428.8385-1.2273,1.4482-.2133.4568-.3465.965-.3999,1.5245h7.0657Z" fill="none"/><path d="M29.4248,16.3577c-.315.0609-.6302.1143-.9452.16-.315.0458-.5997.0892-.8536.1296-.5591.0815-1.0468.211-1.4636.3888-.4168.1779-.7392.4168-.9679.7164-.2287.3-.3431.6735-.3431,1.1206,0,.6402.2337,1.1281.7013,1.4635.4674.3354,1.0671.5031,1.7988.5031.691,0,1.3036-.1396,1.837-.4193.5336-.2794.9502-.6555,1.2502-1.1281.2995-.4726.4497-1.0035.4497-1.5931v-1.8141c-.1426.0914-.3431.1779-.6023.2591-.259.0815-.5463.1525-.8613.2135Z" fill="none"/><path d="M100.9591,10.8924c-.5389-.4116-1.1891-.6173-1.9514-.6173-.7723,0-1.4228.2134-1.9512.6402-.5286.4268-.9299,1.0138-1.2044,1.7608-.2744.7469-.4116,1.6136-.4116,2.5992s.1371,1.8575.4116,2.6144c.2744.7573.6784,1.3492,1.212,1.7761s1.1815.6402,1.9436.6402,1.4102-.2108,1.9438-.6326c.5336-.4216.94-1.0085,1.2196-1.7608.2792-.752.4192-1.6312.4192-2.6373,0-1.0162-.1373-1.8979-.4116-2.645-.2744-.7469-.681-1.3262-1.2196-1.7379Z" fill="none"/><path d="M7.104,5.6101c0-.5793.1371-1.029.4116-1.3491s.7571-.4802,1.4483-.4802c.2947,0,.574.0255.8384.0762.2642.051.4929.1018.686.1525l.8233-3.5368c-.2847-.0812-.7294-.1803-1.3341-.2972-.6047-.1167-1.2728-.1754-2.0046-.1754-1.0671,0-2.0199.2034-2.8583.6098-.8386.4065-1.4993,1.0164-1.982,1.8294-.4828.8132-.7242,1.8346-.7242,3.0642v1.2348H0v3.5673h2.4086v13.4764h4.6955v-13.4764h3.3995v-3.5673h-3.3995v-1.1281Z" fill="#0f1925"/><path d="M33.3808,7.8891c-.676-.4624-1.4459-.8054-2.3096-1.029-.8639-.2234-1.7683-.3354-2.7135-.3354-1.362,0-2.5588.2058-3.5903.6175-1.0315.4116-1.8725.9961-2.523,1.7532-.3151.3668-.579.767-.7939,1.1993v-3.4175c-.2134-.061-.4549-.1041-.7242-.1296-.2692-.0253-.5258-.0381-.7697-.0381-.9452,0-1.7836.2721-2.5154.8156-.7318.5439-1.2554,1.3442-1.5702,2.401h-.1831v-2.988h-4.5581v17.0437h4.7107v-9.6347c0-.691.1548-1.3035.465-1.837.3098-.5335.7392-.9502,1.2881-1.2501.5489-.2996,1.1636-.4497,1.8446-.4497.3355,0,.6987.0228,1.0899.0686.2454.0287.4538.063.6332.1017-.091.2586-.1679.5265-.228.8054l4.3753.3506c.1624-.5691.4955-1.039.9986-1.4102.5031-.3708,1.1763-.5564,2.0199-.5564.8026,0,1.4254.1932,1.8675.5793.4421.3864.6631.9299.6631,1.6312v.0762c0,.3559-.1397.6277-.4192.8156-.2797.1882-.7191.3277-1.3188.4193-.5997.0914-1.3925.1829-2.378.2743-.8536.0815-1.6617.2237-2.424.4268-.7621.2035-1.4431.5031-2.0428.8995-.5997.3963-1.0723.9123-1.4178,1.5473-.3455.6353-.5182,1.4307-.5182,2.3858,0,1.1182.2439,2.0531.7318,2.8051.4876.7523,1.1608,1.3187,2.0199,1.6998.8587.3812,1.8267.5717,2.904.5717.8434,0,1.5854-.1143,2.2257-.343.6405-.2287,1.1891-.5436,1.6465-.9452.4573-.4013.8233-.8713,1.0976-1.4101h.1221v2.3781h4.4971v-11.4945c0-1.0061-.1982-1.8751-.5945-2.6068-.3963-.7318-.9326-1.3288-1.6083-1.7913ZM30.8884,17.6992c0,.5896-.1502,1.1205-.4497,1.5931-.3.4726-.7165.8487-1.2502,1.1281-.5334.2797-1.146.4193-1.837.4193-.7318,0-1.3315-.1677-1.7988-.5031-.4676-.3354-.7013-.8232-.7013-1.4635,0-.4471.1144-.8206.3431-1.1206.2287-.2996.5511-.5385.9679-.7164.4168-.1778.9044-.3073,1.4636-.3888.254-.0404.5387-.0838.8536-.1296.315-.0457.6302-.0991.9452-.16.315-.061.6023-.132.8613-.2135.2592-.0812.4597-.1676.6023-.2591v1.8141Z" fill="#0f1925"/><path d="M42.91,10.8009c.5434-.3911,1.1815-.5869,1.9133-.5869.5792,0,1.0873.117,1.5244.3506.4368.2339.7874.564,1.0518.9909.2642.4269.4368.9249.5184,1.494h4.4515c-.061-1.321-.417-2.4696-1.0673-3.4453-.6505-.9756-1.532-1.7326-2.6449-2.2714-1.1128-.5385-2.4114-.808-3.895-.808-1.728,0-3.2166.3711-4.4668,1.1129-1.2499.7419-2.213,1.7736-2.8888,3.0947-.676,1.3212-1.0139,2.856-1.0139,4.6039,0,1.7279.3355,3.2497,1.0062,4.5658.6708,1.3162,1.6312,2.3476,2.8812,3.0947,1.2502.7469,2.744,1.1205,4.4821,1.1205,1.5244,0,2.8404-.2771,3.9484-.8309,1.1076-.5538,1.9765-1.3262,2.6067-2.3172.6302-.9909.9807-2.1366,1.052-3.4377h-4.4515c-.1321.9048-.4778,1.6136-1.0365,2.1267-.5591.5134-1.2452.7698-2.058.7698-.7318,0-1.3698-.2032-1.9133-.6097-.5439-.4064-.9657-.996-1.2654-1.7684-.2997-.7722-.4497-1.6972-.4497-2.7746s.15-1.9945.4497-2.7517c.2997-.757.7215-1.3313,1.2654-1.7227Z" fill="#0f1925"/><polygon points="59.2611 19.8792 67.0815 9.8328 67.0815 6.7381 53.3462 6.7381 53.3462 10.5188 61.4107 10.5188 61.4107 10.6408 53.0718 20.9616 53.0718 23.7818 67.3714 23.7818 67.3714 20.0011 59.2611 20.0011 59.2611 19.8792" fill="#0f1925"/><rect x="68.7445" y="1.0672" width="4.7105" height="22.7147" fill="#0f1925"/><path d="M88.2286,8.6818c-.7318-.7164-1.5854-1.2551-2.5612-1.6158-.9755-.3607-2.0275-.5413-3.1556-.5413-1.667,0-3.1175.3711-4.3524,1.1129-1.2349.7419-2.1901,1.7736-2.8659,3.0947-.6762,1.3212-1.0139,2.856-1.0139,4.6039,0,1.7988.3377,3.3564,1.0139,4.6725.6758,1.3163,1.6486,2.3301,2.9193,3.0413,1.2702.7115,2.7796,1.0672,4.5276,1.0672,1.4025,0,2.6374-.216,3.7045-.6479s1.9386-1.0366,2.6146-1.8141c.6758-.7776,1.1205-1.6896,1.3339-2.7365l-4.36-.2896c-.1524.4168-.3839.7724-.6936,1.0672-.3102.2948-.6784.5183-1.1052.6708-.4268.1524-.9047.2287-1.4331.2287-.7623,0-1.4357-.1754-2.0199-.526-.5846-.3506-1.0394-.8536-1.3644-1.5092-.2927-.5895-.4523-1.2887-.4817-2.0961h11.6103v-1.2806c0-1.4532-.2034-2.7212-.6097-3.8036-.4065-1.0824-.9757-1.9818-1.7075-2.6984ZM80.5835,10.5799c.5334-.3556,1.1863-.5335,1.9588-.5335s1.4202.1753,1.9438.5259c.5232.3506.9171.8461,1.1813,1.4864.1829.4431.2982.9437.3545,1.494h-7.0657c.0534-.5595.1867-1.0677.3999-1.5245.2845-.6097.6936-1.0923,1.2273-1.4482Z" fill="#0f1925"/><path d="M102.4835,1.0672v8.5522h-.1371c-.2034-.4673-.5031-.9399-.8994-1.4177-.3963-.4776-.9147-.8766-1.5549-1.1968-.6405-.3201-1.4383-.4802-2.3935-.4802-1.2401,0-2.3835.3228-3.4301.9681-1.047.6455-1.8854,1.6186-2.5154,2.9193-.6302,1.3011-.9452,2.927-.9452,4.8784,0,1.8903.305,3.4887.9147,4.7944.6097,1.3061,1.4381,2.2943,2.4849,2.9651,1.0468.6709,2.2204,1.0062,3.5216,1.0062.9147,0,1.6894-.1525,2.3249-.4573.635-.305,1.156-.6884,1.5625-1.151.4063-.4624.7165-.9273.9299-1.3949h.2134v2.7288h4.6497V1.0672h-4.726ZM102.1711,17.9126c-.2797.7523-.686,1.3392-1.2196,1.7608-.5336.4218-1.1815.6326-1.9438.6326s-1.41-.2134-1.9436-.6402-.9376-1.0188-1.212-1.7761c-.2744-.757-.4116-1.6285-.4116-2.6144s.1371-1.8523.4116-2.5992c.2744-.747.6758-1.334,1.2044-1.7608.5284-.4268,1.1789-.6402,1.9512-.6402.7623,0,1.4126.2058,1.9514.6173.5387.4117.9452.991,1.2196,1.7379.2742.747.4116,1.6288.4116,2.645,0,1.0061-.1399,1.8854-.4192,2.6373Z" fill="#0f1925"/><circle cx="113.1907" cy="18.7881" r="4.9939" fill="url(#linear-gradient)"/></g></svg>',SI=`
 .fraczled-sdk-root {
   width: 100%;
   height: 100%;

package/dist/{index-CEY4Vg36.js → index-50qKvYLx.js} RENAMED Viewed

@@ -10594,7 +10594,7 @@ endobj\r
   var u = d.getContext("2d");
   u.fillStyle = "#fff", u.fillRect(0, 0, d.width, d.height);
   var p = { ignoreMouse: !0, ignoreAnimation: !0, ignoreDimensions: !0 }, y = this;
-  return (Vt.canvg ? Promise.resolve(Vt.canvg) : import("./index.es-BHRAhVWf.js")).catch(function(N) {
+  return (Vt.canvg ? Promise.resolve(Vt.canvg) : import("./index.es-V2ksX0Gv.js")).catch(function(N) {
     return Promise.reject(new Error("Could not load canvg: " + N));
   }).then(function(N) {
     return N.default ? N.default : N;
@@ -23365,7 +23365,7 @@ const vc = () => Math.random().toString(36).substring(2, 9), Vv = ({ apiKey: t,
     }
     xe.saveDesign(ee.trim(), se), k(""), z(!1), g(!1), A && (F(!1), xe.reset({ transparent: !1 }), V(!0));
   };
-  return o ? /* @__PURE__ */ i.createElement("div", { className: "fixed inset-0 bg-gradient-to-br from-slate-900 to-slate-800 flex items-center justify-center p-6" }, /* @__PURE__ */ i.createElement("div", { className: "max-w-md text-center" }, /* @__PURE__ */ i.createElement("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-indigo-500/20 flex items-center justify-center" }, /* @__PURE__ */ i.createElement("svg", { className: "w-8 h-8 text-indigo-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ i.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }))), /* @__PURE__ */ i.createElement("h1", { className: "text-2xl font-bold text-white mb-3" }, "Desktop Required"), /* @__PURE__ */ i.createElement("p", { className: "text-slate-400 leading-relaxed" }, "This design editor is optimized for desktop use. Please open it on a computer for the best experience."))) : /* @__PURE__ */ i.createElement("div", { className: `flex flex-col h-screen h-[100dvh] w-screen overflow-hidden bg-slate-50/50 text-slate-900 font-sans ${e || ""}` }, isLicenseRevoked && /* @__PURE__ */ i.createElement("div", { className: "w-full bg-red-600 text-white text-center font-semibold tracking-[0.2em] uppercase py-3" }, "This editor needs to be upgraded."), de && /* @__PURE__ */ i.createElement("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-[200]", onClick: () => z(!1) }, /* @__PURE__ */ i.createElement("div", { className: "bg-white rounded-xl shadow-2xl p-6 w-[90%] max-w-md", onClick: (se) => se.stopPropagation() }, /* @__PURE__ */ i.createElement("h2", { className: "text-lg font-bold text-slate-800 mb-4" }, "Save Design"), /* @__PURE__ */ i.createElement(
+  return o ? /* @__PURE__ */ i.createElement("div", { className: "fixed inset-0 bg-gradient-to-br from-slate-900 to-slate-800 flex items-center justify-center p-6" }, /* @__PURE__ */ i.createElement("div", { className: "max-w-md text-center" }, /* @__PURE__ */ i.createElement("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-indigo-500/20 flex items-center justify-center" }, /* @__PURE__ */ i.createElement("svg", { className: "w-8 h-8 text-indigo-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ i.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }))), /* @__PURE__ */ i.createElement("h1", { className: "text-2xl font-bold text-white mb-3" }, "Desktop Required"), /* @__PURE__ */ i.createElement("p", { className: "text-slate-400 leading-relaxed" }, "This design editor is optimized for desktop use. Please open it on a computer for the best experience."))) : /* @__PURE__ */ i.createElement("div", { className: `flex flex-col h-screen h-[100dvh] w-screen overflow-hidden bg-slate-50/50 text-slate-900 font-sans ${e || ""}` }, de && /* @__PURE__ */ i.createElement("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-[200]", onClick: () => z(!1) }, /* @__PURE__ */ i.createElement("div", { className: "bg-white rounded-xl shadow-2xl p-6 w-[90%] max-w-md", onClick: (se) => se.stopPropagation() }, /* @__PURE__ */ i.createElement("h2", { className: "text-lg font-bold text-slate-800 mb-4" }, "Save Design"), /* @__PURE__ */ i.createElement(
     "input",
     {
       type: "text",

package/dist/{index.es-BHRAhVWf.js → index.es-V2ksX0Gv.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { c as Da, _ as Va, g as il } from "./index-CEY4Vg36.js";
+import { c as Da, _ as Va, g as il } from "./index-50qKvYLx.js";
 var fn = {}, cn = {}, cr, vn;
 function Q() {
   if (vn) return cr;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fraczled/sdk",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Fraczled Design Studio SDK - Embed a powerful design editor in your application",
   "scripts": {
     "build": "vite build --config ../vite.sdk.config.ts && vite build --config ../vite.sdk.umd.config.ts",