@snowcone-app/canvas 0.1.9 → 0.1.12

package/dist/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const I=require("./compose-Bo108juW.cjs"),U=require("./HybridHistoryManager-BXD93pp8.cjs"),C=require("react/jsx-runtime"),o=require("react"),B=require("./ThemeContext-4mJ_y0Me.cjs"),le=require("./ElementFactory-B7UOaJSD.cjs"),de=require("./CanvasStateV1-D5GzvmnY.cjs"),ct=U.createLogger("ErrorBoundary");class ze extends o.Component{constructor(e){super(e),this.resetError=()=>{this.setState({hasError:!1,error:null})},this.state={hasError:!1,error:null}}static getDerivedStateFromError(e){return{hasError:!0,error:e}}componentDidCatch(e,r){if(ct.error("Caught error:",e,r),this.props.onError&&this.props.onError(e,r),this.props.onCanvasError){const a={category:"unknown",message:e.message,originalError:e,recoverable:!1};this.props.onCanvasError(a)}}render(){return this.state.hasError&&this.state.error?this.props.renderError?this.props.renderError(this.state.error,this.resetError):this.props.fallback?typeof this.props.fallback=="function"?this.props.fallback(this.state.error,this.resetError):this.props.fallback:C.jsxs("div",{style:{padding:"24px",border:"2px solid var(--danger)",borderRadius:"8px",backgroundColor:"color-mix(in oklch, var(--danger) 10%, var(--background))",color:"var(--danger)",fontFamily:"system-ui, sans-serif"},children:[C.jsx("h2",{style:{margin:"0 0 16px 0",fontSize:"18px",fontWeight:600},children:"Something went wrong"}),C.jsx("pre",{style:{margin:"0 0 16px 0",padding:"12px",backgroundColor:"color-mix(in oklch, var(--danger) 15%, var(--background))",borderRadius:"4px",fontSize:"14px",overflow:"auto",maxHeight:"200px"},children:this.state.error.message}),C.jsx("button",{onClick:this.resetError,style:{padding:"8px 16px",backgroundColor:"var(--danger)",color:"var(--danger-foreground)",border:"none",borderRadius:"4px",fontSize:"14px",fontWeight:500,cursor:"pointer"},children:"Try again"})]}):this.props.children}}const lt=U.createLogger("useAutoExport");function Oe(t){const{config:e,historyManager:r,artboards:a,elements:n,onExport:l,onExportScheduled:s,isCanvasReady:c=!1}=t,d=o.useRef(null),b=o.useRef(!1),S=o.useRef({totalExports:0,skippedExports:0,lastExportTime:null,avgExportInterval:0}),[L,k]=o.useState(S.current),y=o.useRef(l);y.current=l,o.useEffect(()=>{const h=new I.AutoExportManager({...I.DEFAULT_AUTO_EXPORT_CONFIG,...e});return h.onExport(async()=>{try{await y.current(),S.current=h.getStats()}catch(R){lt.error("[useAutoExport] Export failed:",R)}}),d.current=h,()=>{h.destroy()}},[]),o.useEffect(()=>{c&&b.current&&d.current&&(b.current=!1,d.current.forceExport())},[c]),o.useEffect(()=>{d.current&&e&&d.current.updateConfig(e)},[e==null?void 0:e.enabled,e==null?void 0:e.debounceMs,e==null?void 0:e.maxWaitMs]),o.useEffect(()=>{d.current&&s&&d.current.onExportScheduled(s)},[s]),o.useEffect(()=>{if(!r||!d.current)return;const h=r.onCommandExecuted(()=>{if(d.current){if(!c){b.current=!0;return}d.current.scheduleExport()}});return()=>{h()}},[r,c]),o.useEffect(()=>{if(d.current){if(!c){b.current=!0;return}d.current.scheduleExport()}},[n,a,c]),o.useEffect(()=>U.subscribeToImageLoads(R=>{if(!d.current||!c)return;n.some(N=>N.id===R)&&d.current.scheduleExport()}),[n,c]);const T=o.useCallback(h=>{d.current&&d.current.updateConfig(h)},[]),w=o.useCallback(async()=>{d.current&&(await d.current.forceExport(),S.current=d.current.getStats(),k(S.current))},[]),P=o.useCallback(()=>{d.current&&(d.current.resetStats(),S.current=d.current.getStats(),k(S.current))},[]),A=o.useCallback(()=>{d.current&&d.current.resetChangeDetection()},[]);return{stats:L,updateConfig:T,forceExport:w,resetStats:P,resetChangeDetection:A}}const Ye=U.createLogger("useContentReady");function dt(t){var r;const e=new Set;for(const a of t)if("fontFamily"in a&&typeof a.fontFamily=="string"&&a.fontFamily&&e.add(a.fontFamily),"getRichText"in a&&typeof a.getRichText=="function")try{const n=a.getRichText();if(n!=null&&n.spans)for(const l of n.spans)(r=l.style)!=null&&r.fontFamily&&e.add(l.style.fontFamily)}catch{}return Array.from(e)}async function ut(t){if(t.length===0||typeof document>"u"||!document.fonts)return;const e=[];for(const r of t){const a=`16px "${r}"`;e.push(document.fonts.load(a))}await Promise.all(e),document.fonts.ready&&await Promise.race([document.fonts.ready,new Promise(r=>setTimeout(r,250))]),Ye.debug(`Awaited ${e.length} font(s)`)}function ft(){return new Promise(t=>requestAnimationFrame(()=>t()))}function $e(t){const{isCanvasReady:e,elements:r,hasInitialElements:a,initialElementsLoaded:n}=t,[l,s]=o.useState(!1),c=o.useRef(!1);return o.useEffect(()=>{if(l||!e||a&&!n||a&&r.length===0||c.current)return;c.current=!0;let d=!1;return(async()=>{try{const b=dt(r);if(b.length>0&&(await ut(b),d)||(await ft(),d))return;s(!0)}catch(b){Ye.error("Error during content readiness check:",b),d||s(!0)}finally{c.current=!1}})(),()=>{d=!0,c.current=!1}},[e,r,a,n,l]),l}const mt={"far-top":"t",top:"t",center:"c",bottom:"b","far-bottom":"b","far-left":"l",left:"l",right:"r","far-right":"r",tl:"tl",t:"t",tr:"tr",l:"l",c:"c",r:"r",bl:"bl",b:"b",br:"br"};function ht(t){return t&&mt[t]||"c"}function gt(t,e){const r=e.scaleMode||"cover",a=(r==="contain"?e.marginTop:0)||0,n=(r==="contain"?e.marginRight:0)||0,l=(r==="contain"?e.marginBottom:0)||0,s=(r==="contain"?e.marginLeft:0)||0,c=e.width-s-n,d=e.height-a-l,b=c/t.width,S=d/t.height,L=r==="contain"?Math.min(b,S):Math.max(b,S),k=e.scale||1,y=L*k,T=t.width*y,w=t.height*y,P=e.align||"c";let A=0,h=0;const R=T-c,x=w-d;switch(P){case"tl":A=0,h=0;break;case"t":A=-R/2,h=0;break;case"tr":A=-R,h=0;break;case"l":A=0,h=-x/2;break;case"c":default:A=-R/2,h=-x/2;break;case"r":A=-R,h=-x/2;break;case"bl":A=0,h=-x;break;case"b":A=-R/2,h=-x;break;case"br":A=-R,h=-x;break}A+=s,h+=a;const N=e.offsetX||0,F=e.offsetY||0,Y=R,_=x;return A+=N*Y,h+=F*_,A=Math.round(A),h=Math.round(h),{scale:y,width:Math.round(T),height:Math.round(w),x:A,y:h,debug:{coverScale:L,userScale:k,overflow:{x:R,y:x},alignment:P,appliedOffset:{x:N*Y,y:F*_}}}}const pt={timeout:3e4,retries:1,retryDelay:1e3,validateUrl:!0};function bt(t){try{const e=new URL(t);return["http:","https:","data:","blob:"].includes(e.protocol)}catch{return!1}}async function Et(t,e={}){const r={...pt,...e};if(r.validateUrl&&!bt(t))return{success:!1,error:new Error(`Invalid image URL: ${t}`)};let a;for(let n=0;n<=r.retries;n++)try{return await xt(t,r.timeout)}catch(l){a=l instanceof Error?l:new Error(String(l)),n<r.retries&&await wt(r.retryDelay)}return{success:!1,error:a||new Error("Failed to load image after retries")}}function xt(t,e){return new Promise(r=>{const a=new Image;a.crossOrigin="anonymous";let n=null,l=!1;const s=()=>{n&&(clearTimeout(n),n=null)},c=()=>{if(l)return;l=!0,s();const b=a.naturalWidth||a.width,S=a.naturalHeight||a.height;r({success:!0,element:a,width:b,height:S,aspectRatio:S>0?b/S:1})},d=b=>{l||(l=!0,s(),r({success:!1,error:new Error(b)}))};a.onload=c,a.onerror=()=>{d(`Failed to load image: ${t}`)},n=setTimeout(()=>{d(`Image load timed out after ${e}ms: ${t}`)},e),a.src=t})}async function vt(t,e,r={},a={}){var k,y,T,w,P,A,h;const n=await Et(t,a);if(!n.success||!n.width||!n.height)return{success:!1,error:n.error||new Error("Failed to get image dimensions")};const l={width:e.artboard.width,height:e.artboard.height,scale:e.scale,align:ht(e.alignment),offsetX:e.offsetX,offsetY:e.offsetY,scaleMode:e.scaleMode,marginTop:e.marginTop,marginRight:e.marginRight,marginBottom:e.marginBottom,marginLeft:e.marginLeft},s=gt({width:n.width,height:n.height},l),c=e.artboard.x+s.x,d=e.artboard.y+s.y,b=c+s.width/2,S=d+s.height/2;return{success:!0,element:new U.ImageElement({...r,x:b,y:S,imageUrl:t,imageAspectRatio:n.aspectRatio,preserveDimensions:!0,transformData:{type:"image",width:s.width,height:s.height,cropX:((k=r.transformData)==null?void 0:k.cropX)??0,cropY:((y=r.transformData)==null?void 0:y.cropY)??0,cropWidth:((T=r.transformData)==null?void 0:T.cropWidth)??1,cropHeight:((w=r.transformData)==null?void 0:w.cropHeight)??1,flipHorizontal:((P=r.transformData)==null?void 0:P.flipHorizontal)??!1,flipVertical:((A=r.transformData)==null?void 0:A.flipVertical)??!1,borderRadius:((h=r.transformData)==null?void 0:h.borderRadius)??0}}),placement:{artworkSize:{width:n.width,height:n.height},finalSize:{width:s.width,height:s.height},position:{x:b,y:S},scale:s.scale}}}function wt(t){return new Promise(e=>setTimeout(e,t))}const K=U.createLogger("SnowconeCanvas");function xe(t,e,r,a){if(a<=0||!isFinite(a))return r;const n=t*r,l=e*r;if(Math.max(n,l)<=a)return r;const c=Math.max(t,e),d=a/c;return Math.min(d,r)}const Xe=o.forwardRef((t,e)=>{const{exportConfig:r,imageConfig:a,layoutConfig:n,kit:l,artboards:s,activeArtboard:c,onArtboardChange:d,initialElements:b,onChange:S,onSelectionChange:L,autoExportInterval:k,onExport:y,onExportScheduled:T,onExportStatus:w,onExportReady:P,onImageLoad:A,onImageError:h,onError:R,onReady:x,className:N,style:F,enableShortcuts:Y,overlay:_}=t,we=k,Z=t.autoExportConfig??(r==null?void 0:r.autoExportConfig),q=t.autoExportFormat??(r==null?void 0:r.format)??"dataUrl",ue=t.autoExportAll??(r==null?void 0:r.exportAll)??!1,X=t.exportScale??(r==null?void 0:r.scale)??2,j=t.maxExportSize??(r==null?void 0:r.maxSize)??4e3,ee=t.exportImageFormat??(r==null?void 0:r.imageFormat)??"png",te=t.exportImageQuality??(r==null?void 0:r.imageQuality)??.92,z=t.initialImage??(a==null?void 0:a.src),ye=t.initialImageAlignment??(a==null?void 0:a.alignment)??"center",Ae=t.initialImageScale??(a==null?void 0:a.scale)??1,Se=t.initialImageScaleMode??(a==null?void 0:a.scaleMode)??"cover",Ke=t.width??(n==null?void 0:n.width)??1200,qe=t.height??(n==null?void 0:n.height)??1200,Re=t.viewPadding??(n==null?void 0:n.viewPadding)??.9,Ce=t.artboardBorderRadius??(n==null?void 0:n.artboardBorderRadius)??0,Ie=t.fixedMargin??(n==null?void 0:n.fixedMargin),ke=t.maxHeight??(n==null?void 0:n.maxHeight),Me=t.showRotationHandle??(n==null?void 0:n.showRotationHandle)??!0,Ge=t.hideCanvas??(n==null?void 0:n.hideCanvas)??!1,Te=t.canvasWrapperClassName??(n==null?void 0:n.canvasWrapperClassName),Fe=t.canvasWrapperStyle??(n==null?void 0:n.canvasWrapperStyle),De=t.canvasCutouts??(n==null?void 0:n.canvasCutouts),fe=t.pieceGuides,Le=t.pieceFocus,Pe=Y??!0,re=o.useMemo(()=>I.resolveKit(l??"pro-studio"),[l]);o.useEffect(()=>{if(U.process$1.env.NODE_ENV==="development"&&re){const i=I.validateKit(re);i.valid||K.warn("Kit validation warnings:",i.errors),i.warnings.length>0&&K.warn("Kit validation warnings:",i.warnings)}},[re]);const ne=o.useRef(R);ne.current=R;const W=o.useCallback(i=>{var u;K.error(`[${i.category}] ${i.message}`,i.originalError),(u=ne.current)==null||u.call(ne,i)},[]);o.useEffect(()=>(le.CanvasRenderer.onRenderError=W,()=>{le.CanvasRenderer.onRenderError===W&&(le.CanvasRenderer.onRenderError=null)}),[W]);const{elements:V,setElements:ae,selectedId:He,artboardManager:M,refreshArtboards:Qe,historyManager:Ze,isCanvasReady:me,setCanvasReady:oe}=B.useEditor(),{createArtboard:Je,selectArtboard:_e,artboards:H}=I.useArtboards(),{exportArtboard:G,exportAllArtboards:se,exportArtboardAsBlob:Q,exportAllArtboardsAsBlobs:ie}=I.useExport();o.useImperativeHandle(e,()=>({exportArtboards:async(i={})=>{const u=i.format||q,g=i.scale||X,p=i.all??!1;let m=g;if(j>0&&isFinite(j))for(const v of H){const E=xe(v.width,v.height,g,j);m=Math.min(m,E)}const f={scale:m,format:ee,quality:te};if(p){const v=u==="blob"?await ie(f):await se(f),E={};for(const[D,O]of Object.entries(v)){const $=H.find(J=>J.id===D);$&&(E[$.name]=O)}return E}else{const v=M.getActiveArtboard();if(!v)throw new Error("[SnowconeCanvas] No active artboard found");if(u==="blob"){const E=await Q(v.id,f);return{[v.name]:E}}else{const E=await G(v.id,f);return{[v.name]:E}}}}}),[G,se,Q,ie,q,X,j,ee,te,M,H]),o.useEffect(()=>{P&&P(async()=>{const u=M.getActiveArtboard();if(!u)throw new Error("[SnowconeCanvas] No active artboard found");const g=xe(u.width,u.height,X,j),p=q==="blob"?await Q(u.id,{scale:g}):await G(u.id,{scale:g});return{[u.name]:p}})},[P,G,Q,M,q,X,j]);const[Be,ce]=o.useState("idle"),[Ne,he]=o.useState(null),ge=o.useRef(void 0),pe=o.useRef(!1),We=o.useRef(!1),[et,tt]=o.useState(!1),rt=o.useRef(0),nt=o.useRef(0),be=o.useRef(!1);o.useEffect(()=>{if(pe.current)return;pe.current=!0;const i=s||[{name:"Design",width:Ke,height:qe}],u=M.getAllArtboards();if(u.length>0){const g=i[0],p=u[0],m=fe?"transparent":void 0;p.name=g.name,p.width=g.width,p.height=g.height,p.clipShape=g.clipShape,g.backgroundColor?p.backgroundColor=g.backgroundColor:m&&(p.backgroundColor=m);for(let f=1;f<i.length;f++)Je(i[f].width,i[f].height,{name:i[f].name,backgroundColor:i[f].backgroundColor??m,clipShape:i[f].clipShape})}Qe()},[]),o.useEffect(()=>{if(!(!b||b.length===0)&&!We.current&&pe.current){We.current=!0,tt(!0);try{const i=le.ElementFactory.createManyFromJSON(b),u=M.getAllArtboards();if(u.length>0){const p=u[0];for(const m of i)M.addElementToArtboard(m.id,p.id)}ae(i);const g=new Set;for(const p of i){const m=p.fontFamily;typeof m=="string"&&m.trim().length>0&&g.add(m)}if(g.size>0&&typeof document<"u"){const p=document.fonts??null,m=Array.from(g).map(f=>{const v=`font-${f.replace(/\s+/g,"-").toLowerCase()}`;let E=document.getElementById(v);return E||(E=document.createElement("link"),E.id=v,E.rel="stylesheet",E.href=`https://fonts.googleapis.com/css2?family=${f.replace(/\s+/g,"+")}:wght@400;700&display=swap`,document.head.appendChild(E)),new Promise(D=>{if(E.sheet){D(f);return}const O=()=>D(f);E.addEventListener("load",O,{once:!0}),E.addEventListener("error",O,{once:!0}),setTimeout(O,4e3)})});Promise.all(m).then(f=>{if(p)return Promise.all(f.flatMap(v=>[p.load(`400 16px "${v}"`).catch(()=>{}),p.load(`700 16px "${v}"`).catch(()=>{})]))}).then(()=>{ae(f=>f.slice())})}}catch(i){K.error("Failed to load initial elements:",i);const u=i instanceof Error?i:new Error(String(i));W({category:"import",message:`Failed to load initial elements: ${u.message}`,originalError:u,recoverable:!0})}}},[b,M,ae,W]),o.useEffect(()=>{if(!c){be.current=!0;return}const i=H.find(u=>u.name===c);if(i){const u=M.getActiveArtboard();(u==null?void 0:u.name)!==c&&_e(i.id),be.current=!0}},[c,H]),o.useEffect(()=>{if(!z||ge.current===z)return;if(V.length>0){ge.current=z;return}ge.current=z,(async()=>{ce("loading"),he(null);try{const u=M.getAllArtboards();if(u.length===0)throw new Error("No artboards available");const g=[];for(const p of u){const m=s==null?void 0:s.find(E=>E.name===p.name),f=(m==null?void 0:m.scaleMode)||Se,v=await vt(z,{artboard:{width:p.width,height:p.height,x:p.x,y:p.y},alignment:(m==null?void 0:m.fitAlign)||ye,scale:Ae,scaleMode:f,marginTop:m==null?void 0:m.fitMarginTop,marginRight:m==null?void 0:m.fitMarginRight,marginBottom:m==null?void 0:m.fitMarginBottom,marginLeft:m==null?void 0:m.fitMarginLeft});v.success&&v.element?(M.addElementToArtboard(v.element.id,p.id),g.push(v.element)):K.error("Failed to load image for artboard:",p.name,v.error)}if(g.length>0)ae(p=>[...p,...g]),ce("success"),A==null||A(z);else{const p=new Error("Failed to load image into any artboard");ce("error"),he(p),h==null||h(z,p),W({category:"image",message:p.message,originalError:p,recoverable:!0})}}catch(u){const g=u instanceof Error?u:new Error(String(u));ce("error"),he(g),h==null||h(z,g),W({category:"image",message:g.message,originalError:g,recoverable:!0})}})()},[z,ye,Ae,Se]),o.useEffect(()=>{L==null||L(He)},[He,L]),o.useEffect(()=>{if(!S)return;const i=M.getActiveArtboard(),u={elements:V.map(g=>g.toJSON()),artboards:H.map(g=>({name:g.name,width:g.width,height:g.height,clipShape:g.clipShape,backgroundColor:g.backgroundColor})),activeArtboard:(i==null?void 0:i.name)||"Design"};S(u)},[V,H,S]),o.useEffect(()=>{if(!d||!be.current)return;const i=M.getActiveArtboard();i&&d(i.name)},[M.getActiveArtboardId()]);const at=o.useCallback(async()=>{if(!y&&!w)return;const i=++nt.current,u=Date.now();let g=X;if(j>0&&isFinite(j))for(const f of H){const v=xe(f.width,f.height,X,j);g=Math.min(g,v)}const p=M.getActiveArtboard(),m=(p==null?void 0:p.id)??"unknown";w==null||w({status:"rendering",artboardId:m}),rt.current=u;try{let f;const v={format:ee,scale:g,quality:te};if(q==="blob")if(ue){const E=await ie(v);f={};for(const[D,O]of Object.entries(E)){const $=H.find(J=>J.id===D);$&&(f[$.name]=O)}}else{const E=M.getActiveArtboard();if(!E)return;const D=await Q(E.id,v);f={[E.name]:D}}else if(ue){const E=await se(v);f={};for(const[D,O]of Object.entries(E)){const $=H.find(J=>J.id===D);$&&(f[$.name]=O)}}else{const E=M.getActiveArtboard();if(!E)return;const D=await G(E.id,v);f={[E.name]:D}}y==null||y(f),w==null||w({status:"complete",artboardId:m,result:f})}catch(f){const v=f instanceof Error?f.message:String(f);if(v.includes("Canvas ref not available"))return;const E=Date.now()-u;K.error("Export failed (export #"+i+"):",{duration:`${E}ms`,error:v});const D=f instanceof Error?f:new Error(v);w==null||w({status:"error",artboardId:m,error:D}),W({category:"export",message:D.message,originalError:D,artboardId:m,recoverable:!0})}},[y,w,ue,q,X,j,ee,te,G,se,Q,ie,H,M,V,Z,W]);o.useEffect(()=>{we!==void 0&&we>0&&K.warn("autoExportInterval is deprecated and ignored. Use autoExportConfig={{ enabled: true, debounceMs: 100, maxWaitMs: 1000 }} instead.")},[]),o.useEffect(()=>{},[V]);const ot=o.useCallback(()=>{if(T==null||T(),w){const i=M.getActiveArtboard();w({status:"scheduled",artboardId:(i==null?void 0:i.id)??"unknown"})}},[T,w,M]),st=!!b&&b.length>0,Ee=$e({isCanvasReady:me,elements:V,hasInitialElements:st,initialElementsLoaded:et}),je=o.useRef(!1);o.useEffect(()=>{Ee&&!je.current&&(je.current=!0,x==null||x())},[Ee,x]),Oe({config:Z?{enabled:Z.enabled??!0,debounceMs:Z.debounceMs??100,maxWaitMs:Z.maxWaitMs??1e3}:{enabled:!1},historyManager:Ze,artboards:H,elements:V,onExport:at,onExportScheduled:ot,isCanvasReady:Ee}),o.useEffect(()=>{if(H.length>0&&!me){const i=requestAnimationFrame(()=>{oe(!0)});return()=>cancelAnimationFrame(i)}},[H.length,me,oe]),o.useEffect(()=>()=>{oe(!1)},[oe]);const it=o.useCallback(i=>{W({category:"unknown",message:i.message,originalError:i,recoverable:!1})},[W]);return Be==="loading"?C.jsx("div",{className:N,style:{...F,display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"var(--surface, #f5f5f5)"},children:C.jsx(I.Spinner,{size:48})}):Be==="error"&&Ne?C.jsx("div",{className:N,style:{...F,display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"var(--surface, #f5f5f5)",color:"var(--danger, #dc2626)",padding:"1rem"},children:C.jsxs("div",{className:"text-center",children:[C.jsx("div",{className:"font-medium",children:"Failed to load image"}),C.jsx("div",{className:"text-sm mt-1 opacity-70",children:Ne.message})]})}):C.jsx(I.KitProvider,{kit:re,children:C.jsx("div",{className:`app-modern ${N||""}`,style:{...F,position:"relative"},children:C.jsxs(ze,{onError:it,fallback:(i,u)=>C.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",padding:"24px",minHeight:"200px",backgroundColor:"var(--surface, #f5f5f5)",color:"var(--foreground, #333)",fontFamily:"system-ui, sans-serif",textAlign:"center"},children:[C.jsx("div",{style:{fontSize:"18px",fontWeight:600,marginBottom:"8px"},children:"Something went wrong"}),C.jsx("div",{style:{fontSize:"14px",opacity:.7,marginBottom:"16px",maxWidth:"400px"},children:i.message}),C.jsx("button",{onClick:u,style:{padding:"8px 20px",backgroundColor:"var(--primary, #333)",color:"var(--primary-foreground, #fff)",border:"none",borderRadius:"6px",fontSize:"14px",fontWeight:500,cursor:"pointer"},children:"Try again"})]}),children:[!Ge&&(Te||Fe?C.jsx("div",{className:Te,style:Fe,children:C.jsx(I.Canvas,{style:{width:"100%"},fitPadding:Re,artboardBorderRadius:Ce,fixedMargin:Ie,maxHeight:ke,showRotationHandle:Me,enableShortcuts:Pe,canvasCutouts:De,pieceGuides:fe,pieceFocus:Le})}):C.jsx(I.Canvas,{style:{width:"100%"},fitPadding:Re,artboardBorderRadius:Ce,fixedMargin:Ie,maxHeight:ke,showRotationHandle:Me,enableShortcuts:Pe,canvasCutouts:De,pieceGuides:fe,pieceFocus:Le})),_]})})})});Xe.displayName="SnowconeCanvasInner";const ve=o.forwardRef((t,e)=>{var s;const{inheritTheme:r,externalProvider:a}=t,n=t.viewPadding??((s=t.layoutConfig)==null?void 0:s.viewPadding),l=C.jsx(Xe,{ref:e,...t});return a?C.jsx(B.ThemeProvider,{defaultTheme:"light",passive:r,children:l}):C.jsx(B.ThemeProvider,{defaultTheme:"light",passive:r,children:C.jsx(B.EditorProvider,{viewPadding:n,children:l})})});ve.displayName="SnowconeCanvas";const Ue=U.createLogger("useCommands");function yt(){const t=B.useEditor(),{undo:e,redo:r,canUndo:a,canRedo:n,executeElementUpdate:l,executeAddElement:s,executeRemoveElement:c,executeReorderElement:d,executeCommandBatch:b,executeCreateArtboard:S,executeDeleteArtboard:L,executeUpdateArtboard:k}=t,y=o.useCallback(()=>{Ue.warn("[useCommands] clearHistory is not yet implemented in EditorContext")},[]),T=o.useCallback(w=>{Ue.warn("[useCommands] clearArtboardHistory is not yet implemented in EditorContext")},[]);return{undo:e,redo:r,canUndo:a,canRedo:n,clearHistory:y,clearArtboardHistory:T,executeElementUpdate:l,executeAddElement:s,executeRemoveElement:c,executeReorderElement:d,executeCreateArtboard:S,executeDeleteArtboard:L,executeUpdateArtboard:k,executeCommandBatch:b}}function At(){const{selectedElement:t}=B.useEditor();return t??null}function St(){const{isCanvasReady:t}=B.useEditor();return t}const Rt=()=>{},Ct=[];function It(t){const{elementStore:e}=B.useElementsContext(),{executeElementUpdate:r}=B.useCommandContext(),a=o.useMemo(()=>e.getAllByName(t).filter(s=>s instanceof U.TextElement),[e,t]),n=o.useCallback(l=>{for(const s of a){const c=s.clone();c.setText(l),r(s,c)}},[a,r]);return a.length===0?{text:"",setText:Rt,element:null,elements:Ct,isConnected:!1}:{text:a[0].getText(),setText:n,element:a[0],elements:a,isConnected:!0}}const kt=()=>{},Mt=[];function Tt(t,e,r){const a=t/e;if(r>=a){const n=e,l=n*r,s=t/l;return{width:l,height:n,cropX:(1-s)/2,cropY:0,cropWidth:s,cropHeight:1}}else{const n=t,l=n/r,s=e/l;return{width:n,height:l,cropX:0,cropY:(1-s)/2,cropWidth:1,cropHeight:s}}}function Ft(t,e){const r=(e==null?void 0:e.fit)??"cover",{elementStore:a,setElements:n}=B.useElementsContext(),{executeElementUpdate:l}=B.useCommandContext(),s=o.useMemo(()=>a.getAllByName(t).filter(y=>y instanceof U.ImageElement),[a,t]),c=o.useRef(new Map);for(const k of s)if(!c.current.has(k.id)){const y=k.transformData;c.current.set(k.id,{width:y.width*y.cropWidth,height:y.height*y.cropHeight})}const d=o.useRef(s);d.current=s;const b=o.useRef(l);b.current=l;const S=o.useRef(n);S.current=n;const L=o.useCallback(k=>{const y=d.current,T=b.current;S.current;for(const w of y){const P=c.current.get(w.id);if(!P)continue;const{width:A,height:h}=P,R=w.clone();R.imageLoaded=!1,R.imageElement=null,R.isCropping=!1,R.imageUrl=k,r==="cover"?(R.preserveDimensions=!0,R.onLoadCallback=x=>{const N=x.imageAspectRatio||1,F=Tt(A,h,N);x.transformData.width=F.width,x.transformData.height=F.height,x.transformData.cropX=F.cropX,x.transformData.cropY=F.cropY,x.transformData.cropWidth=F.cropWidth,x.transformData.cropHeight=F.cropHeight,T(w,x)}):(R.preserveDimensions=!1,R.onLoadCallback=x=>{const N=x.transformData.width,F=x.transformData.height,Y=Math.min(A/N,h/F,1);Y<1&&(x.transformData.width=N*Y,x.transformData.height=F*Y),x.transformData.cropX=0,x.transformData.cropY=0,x.transformData.cropWidth=1,x.transformData.cropHeight=1,T(w,x)}),R.loadImage(k)}},[r]);return s.length===0?{imageUrl:"",setImageUrl:kt,element:null,elements:Mt,isConnected:!1}:{imageUrl:s[0].imageUrl,setImageUrl:L,element:s[0],elements:s,isConnected:!0}}function Dt(t){const{elementStore:e}=B.useElementsContext();return t?e.getByName(t)??null:null}function Lt(){const{zoom:t,panOffset:e,zoomIn:r,zoomOut:a,zoomToFit:n,resetView:l,setZoom:s,setPanOffset:c}=B.useViewportContext();return{zoom:t,panOffset:e,zoomIn:r,zoomOut:a,zoomToFit:n,resetView:l,setZoom:s,setPanOffset:c}}const Ve=1;function Pt(t){var a;const e=((a=t.artboards)==null?void 0:a[0])||{name:"Front",width:800,height:800},r=(t.elements||[]).map(Ht);return{schemaVersion:Ve,artboards:[{id:"artboard-1",name:e.name||"Front",x:0,y:0,width:e.width||800,height:e.height||800,backgroundColor:e.backgroundColor||"transparent",exportBackground:!1,elements:r,distressTexture:e.distressTexture,imageMask:e.imageMask}]}}function Ht(t){const e=t.type||t.transformType;return e==="image"?Bt(t):{...t,type:e}}function Bt(t){var b;const e=t.transformData||{},r=t.masks&&t.masks.length>0,a=e.width||0,n=e.height||0,l=r?a:a*(e.cropWidth??1),s=r?n:n*(e.cropHeight??1),c={id:t.id,type:"image",x:t.x||0,y:t.y||0,width:l,height:s,rotation:t.rotation||0,imageUrl:t.imageUrl,imageAspectRatio:t.imageAspectRatio};return!r&&(e.cropX!==0||e.cropY!==0||e.cropWidth!==1||e.cropHeight!==1)&&(c.cropX=e.cropX,c.cropY=e.cropY,c.cropWidth=e.cropWidth,c.cropHeight=e.cropHeight,c.needsCropPixelConversion=!0),e.flipHorizontal&&(c.flipHorizontal=e.flipHorizontal),e.flipVertical&&(c.flipVertical=e.flipVertical),e.borderRadius&&(c.borderRadius=e.borderRadius),t.opacity!==void 0&&(c.opacity=t.opacity),t.distressEffect&&(c.distressEffect=t.distressEffect),((b=t.masks)==null?void 0:b.length)>0&&(c.masks=t.masks),t.blendMode&&(c.blendMode=t.blendMode),t.knockoutParts&&(c.knockoutParts=t.knockoutParts),t.stroke&&(c.stroke=t.stroke),c}I.ensureIconsRegistered();exports.ALL_CAPABILITIES=I.ALL_CAPABILITIES;exports.COMPACT_CUSTOMIZER=I.COMPACT_CUSTOMIZER;exports.EMBED_ONLY=I.EMBED_ONLY;exports.MINIMAL_CAPABILITIES=I.MINIMAL_CAPABILITIES;exports.PRO_STUDIO=I.PRO_STUDIO;exports.createKit=I.createKit;exports.extendKit=I.extendKit;exports.resolveKit=I.resolveKit;exports.useArtboards=I.useArtboards;exports.useExport=I.useExport;exports.useLayers=I.useLayers;exports.validateKit=I.validateKit;exports.useEditor=B.useEditor;exports.deserializeState=de.deserializeState;exports.migrateState=de.migrateState;exports.serializeState=de.serializeState;exports.validateState=de.validateState;exports.CANVAS_STATE_SCHEMA_VERSION=Ve;exports.ErrorBoundary=ze;exports.SnowconeCanvas=ve;exports.default=ve;exports.serializeStateForServer=Pt;exports.useAutoExport=Oe;exports.useCanvasReady=St;exports.useCommands=yt;exports.useContentReady=$e;exports.useElementByName=Dt;exports.useImageBinding=Ft;exports.useSelectedElement=At;exports.useTextBinding=It;exports.useViewport=Lt;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("./compose-HDJp4Z_d.cjs"),H=require("./HybridHistoryManager-BXD93pp8.cjs"),f=require("react/jsx-runtime"),o=require("react"),N=require("./ThemeContext-BMNQKl1c.cjs"),de=require("./ImportManager-W1eWhfyM.cjs"),fe=require("./CanvasStateV1-C4hC1MCe.cjs"),je=H.createLogger("useCommands");function Ne(){const t=N.useEditor(),{undo:e,redo:r,canUndo:a,canRedo:n,executeElementUpdate:l,executeAddElement:s,executeRemoveElement:c,executeReorderElement:d,executeCommandBatch:p,executeCreateArtboard:R,executeDeleteArtboard:T,executeUpdateArtboard:S}=t,C=o.useCallback(()=>{je.warn("[useCommands] clearHistory is not yet implemented in EditorContext")},[]),P=o.useCallback(A=>{je.warn("[useCommands] clearArtboardHistory is not yet implemented in EditorContext")},[]);return{undo:e,redo:r,canUndo:a,canRedo:n,clearHistory:C,clearArtboardHistory:P,executeElementUpdate:l,executeAddElement:s,executeRemoveElement:c,executeReorderElement:d,executeCreateArtboard:R,executeDeleteArtboard:T,executeUpdateArtboard:S,executeCommandBatch:p}}const ft=()=>{const{undo:t,redo:e,canUndo:r,canRedo:a}=Ne();return f.jsxs("div",{className:"sc-undo-redo",style:{display:"inline-flex",gap:4},children:[f.jsx(h.ToolbarButton,{icon:h.icons.undo,onClick:t,disabled:!r,tooltip:"Undo","aria-label":"Undo"}),f.jsx(h.ToolbarButton,{icon:h.icons.redo,onClick:e,disabled:!a,tooltip:"Redo","aria-label":"Redo"})]})},mt=H.createLogger("KitLayout"),ee="canvas";let Fe=!1;function ht(){Fe||(Fe=!0,h.registerBuiltinSectionsSync({LayersPanel:h.LayersPanel,EffectsPanel:h.EffectsPanel,ExportPanel:h.ExportPanel,ImagePanel:h.ImagePanel,GlyphPanel:h.GlyphPanel,ArtboardTabs:h.ArtboardTabs,ContextualToolbars:h.ContextualToolbars,ZoomControls:h.ZoomControls,MenuButton:h.MenuButton,CropPanel:h.CropPanel}),h.registerSection("add-element-menu",{component:h.MenuButton,label:"Add Element",icon:"gravity-ui:plus",position:"topbar"}),h.registerSection("undo-redo-controls",{component:ft,label:"Undo / Redo",icon:"lucide:undo-2",position:"topbar"}))}function ue({ids:t}){return!t||t.length===0?null:f.jsx(f.Fragment,{children:t.map(e=>{if(e===ee)return null;const r=h.getSection(e);if(!r)return H.process$1.env.NODE_ENV==="development"&&mt.warn(`Kit layout references unknown section "${e}" — skipping. Register it with registerSection("${e}", { ... }).`),null;const a=r.component;return f.jsx(a,{},e)})})}function gt({kit:t,canvas:e}){var d,p,R,T;ht();const r=t.layout.slots,a=!!((d=r.topbar)!=null&&d.some(S=>S!==ee)),n=!!((p=r.left)!=null&&p.some(S=>S!==ee)),l=!!((R=r.right)!=null&&R.some(S=>S!==ee)),s=!!((T=r.bottombar)!=null&&T.some(S=>S!==ee));return o.useMemo(()=>!a&&!n&&!l&&!s,[a,n,l,s])?f.jsx(f.Fragment,{children:e}):f.jsxs("div",{className:"sc-kit-layout",style:{display:"flex",flexDirection:"column",height:"100%",minHeight:0},children:[a&&f.jsx("div",{className:"sc-kit-topbar toolbar",style:{display:"flex",alignItems:"center",gap:8,flexWrap:"wrap",flexShrink:0},children:f.jsx(ue,{ids:r.topbar})}),f.jsxs("div",{className:"sc-kit-body",style:{display:"flex",flex:1,minHeight:0},children:[n&&f.jsx("div",{className:"sc-kit-left",style:{flexShrink:0,overflow:"auto"},children:f.jsx(ue,{ids:r.left})}),f.jsx("div",{className:"sc-kit-canvas",style:{flex:1,minWidth:0,position:"relative"},children:e}),l&&f.jsx("div",{className:"sc-kit-right",style:{flexShrink:0,overflow:"auto"},children:f.jsx(ue,{ids:r.right})})]}),s&&f.jsx("div",{className:"sc-kit-bottombar toolbar",style:{display:"flex",alignItems:"center",gap:8,flexShrink:0},children:f.jsx(ue,{ids:r.bottombar})})]})}const pt=H.createLogger("ErrorBoundary");class Be extends o.Component{constructor(e){super(e),this.resetError=()=>{this.setState({hasError:!1,error:null})},this.state={hasError:!1,error:null}}static getDerivedStateFromError(e){return{hasError:!0,error:e}}componentDidCatch(e,r){if(pt.error("Caught error:",e,r),this.props.onError&&this.props.onError(e,r),this.props.onCanvasError){const a={category:"unknown",message:e.message,originalError:e,recoverable:!1};this.props.onCanvasError(a)}}render(){return this.state.hasError&&this.state.error?this.props.renderError?this.props.renderError(this.state.error,this.resetError):this.props.fallback?typeof this.props.fallback=="function"?this.props.fallback(this.state.error,this.resetError):this.props.fallback:f.jsxs("div",{style:{padding:"24px",border:"2px solid var(--danger)",borderRadius:"8px",backgroundColor:"color-mix(in oklch, var(--danger) 10%, var(--background))",color:"var(--danger)",fontFamily:"system-ui, sans-serif"},children:[f.jsx("h2",{style:{margin:"0 0 16px 0",fontSize:"18px",fontWeight:600},children:"Something went wrong"}),f.jsx("pre",{style:{margin:"0 0 16px 0",padding:"12px",backgroundColor:"color-mix(in oklch, var(--danger) 15%, var(--background))",borderRadius:"4px",fontSize:"14px",overflow:"auto",maxHeight:"200px"},children:this.state.error.message}),f.jsx("button",{onClick:this.resetError,style:{padding:"8px 16px",backgroundColor:"var(--danger)",color:"var(--danger-foreground)",border:"none",borderRadius:"4px",fontSize:"14px",fontWeight:500,cursor:"pointer"},children:"Try again"})]}):this.props.children}}const bt=H.createLogger("useAutoExport");function He(t){const{config:e,historyManager:r,artboards:a,elements:n,onExport:l,onExportScheduled:s,isCanvasReady:c=!1}=t,d=o.useRef(null),p=o.useRef(!1),R=o.useRef({totalExports:0,skippedExports:0,lastExportTime:null,avgExportInterval:0}),[T,S]=o.useState(R.current),C=o.useRef(l);C.current=l,o.useEffect(()=>{const b=new h.AutoExportManager({...h.DEFAULT_AUTO_EXPORT_CONFIG,...e});return b.onExport(async()=>{try{await C.current(),R.current=b.getStats()}catch(I){bt.error("[useAutoExport] Export failed:",I)}}),d.current=b,()=>{b.destroy()}},[]),o.useEffect(()=>{c&&p.current&&d.current&&(p.current=!1,d.current.forceExport())},[c]),o.useEffect(()=>{d.current&&e&&d.current.updateConfig(e)},[e==null?void 0:e.enabled,e==null?void 0:e.debounceMs,e==null?void 0:e.maxWaitMs]),o.useEffect(()=>{d.current&&s&&d.current.onExportScheduled(s)},[s]),o.useEffect(()=>{if(!r||!d.current)return;const b=r.onCommandExecuted(()=>{if(d.current){if(!c){p.current=!0;return}d.current.scheduleExport()}});return()=>{b()}},[r,c]),o.useEffect(()=>{if(d.current){if(!c){p.current=!0;return}d.current.scheduleExport()}},[n,a,c]),o.useEffect(()=>H.subscribeToImageLoads(I=>{if(!d.current||!c)return;n.some(B=>B.id===I)&&d.current.scheduleExport()}),[n,c]);const P=o.useCallback(b=>{d.current&&d.current.updateConfig(b)},[]),A=o.useCallback(async()=>{d.current&&(await d.current.forceExport(),R.current=d.current.getStats(),S(R.current))},[]),j=o.useCallback(()=>{d.current&&(d.current.resetStats(),R.current=d.current.getStats(),S(R.current))},[]),k=o.useCallback(()=>{d.current&&d.current.resetChangeDetection()},[]);return{stats:T,updateConfig:P,forceExport:A,resetStats:j,resetChangeDetection:k}}const We=H.createLogger("useContentReady");function xt(t){var r;const e=new Set;for(const a of t)if("fontFamily"in a&&typeof a.fontFamily=="string"&&a.fontFamily&&e.add(a.fontFamily),"getRichText"in a&&typeof a.getRichText=="function")try{const n=a.getRichText();if(n!=null&&n.spans)for(const l of n.spans)(r=l.style)!=null&&r.fontFamily&&e.add(l.style.fontFamily)}catch{}return Array.from(e)}async function Et(t){if(t.length===0||typeof document>"u"||!document.fonts)return;const e=[];for(const r of t){const a=`16px "${r}"`;e.push(document.fonts.load(a))}await Promise.all(e),document.fonts.ready&&await Promise.race([document.fonts.ready,new Promise(r=>setTimeout(r,250))]),We.debug(`Awaited ${e.length} font(s)`)}function vt(){return new Promise(t=>requestAnimationFrame(()=>t()))}function Ue(t){const{isCanvasReady:e,elements:r,hasInitialElements:a,initialElementsLoaded:n}=t,[l,s]=o.useState(!1),c=o.useRef(!1);return o.useEffect(()=>{if(l||!e||a&&!n||a&&r.length===0||c.current)return;c.current=!0;let d=!1;return(async()=>{try{const p=xt(r);if(p.length>0&&(await Et(p),d)||(await vt(),d))return;s(!0)}catch(p){We.error("Error during content readiness check:",p),d||s(!0)}finally{c.current=!1}})(),()=>{d=!0,c.current=!1}},[e,r,a,n,l]),l}const yt={"far-top":"t",top:"t",center:"c",bottom:"b","far-bottom":"b","far-left":"l",left:"l",right:"r","far-right":"r",tl:"tl",t:"t",tr:"tr",l:"l",c:"c",r:"r",bl:"bl",b:"b",br:"br"};function wt(t){return t&&yt[t]||"c"}function St(t,e){const r=e.scaleMode||"cover",a=(r==="contain"?e.marginTop:0)||0,n=(r==="contain"?e.marginRight:0)||0,l=(r==="contain"?e.marginBottom:0)||0,s=(r==="contain"?e.marginLeft:0)||0,c=e.width-s-n,d=e.height-a-l,p=c/t.width,R=d/t.height,T=r==="contain"?Math.min(p,R):Math.max(p,R),S=e.scale||1,C=T*S,P=t.width*C,A=t.height*C,j=e.align||"c";let k=0,b=0;const I=P-c,y=A-d;switch(j){case"tl":k=0,b=0;break;case"t":k=-I/2,b=0;break;case"tr":k=-I,b=0;break;case"l":k=0,b=-y/2;break;case"c":default:k=-I/2,b=-y/2;break;case"r":k=-I,b=-y/2;break;case"bl":k=0,b=-y;break;case"b":k=-I/2,b=-y;break;case"br":k=-I,b=-y;break}k+=s,b+=a;const B=e.offsetX||0,L=e.offsetY||0,$=I,te=y;return k+=B*$,b+=L*te,k=Math.round(k),b=Math.round(b),{scale:C,width:Math.round(P),height:Math.round(A),x:k,y:b,debug:{coverScale:T,userScale:S,overflow:{x:I,y},alignment:j,appliedOffset:{x:B*$,y:L*te}}}}const At={timeout:3e4,retries:1,retryDelay:1e3,validateUrl:!0};function Rt(t){try{const e=new URL(t);return["http:","https:","data:","blob:"].includes(e.protocol)}catch{return!1}}async function Ct(t,e={}){const r={...At,...e};if(r.validateUrl&&!Rt(t))return{success:!1,error:new Error(`Invalid image URL: ${t}`)};let a;for(let n=0;n<=r.retries;n++)try{return await kt(t,r.timeout)}catch(l){a=l instanceof Error?l:new Error(String(l)),n<r.retries&&await Mt(r.retryDelay)}return{success:!1,error:a||new Error("Failed to load image after retries")}}function kt(t,e){return new Promise(r=>{const a=new Image;a.crossOrigin="anonymous";let n=null,l=!1;const s=()=>{n&&(clearTimeout(n),n=null)},c=()=>{if(l)return;l=!0,s();const p=a.naturalWidth||a.width,R=a.naturalHeight||a.height;r({success:!0,element:a,width:p,height:R,aspectRatio:R>0?p/R:1})},d=p=>{l||(l=!0,s(),r({success:!1,error:new Error(p)}))};a.onload=c,a.onerror=()=>{d(`Failed to load image: ${t}`)},n=setTimeout(()=>{d(`Image load timed out after ${e}ms: ${t}`)},e),a.src=t})}async function It(t,e,r={},a={}){var S,C,P,A,j,k,b;const n=await Ct(t,a);if(!n.success||!n.width||!n.height)return{success:!1,error:n.error||new Error("Failed to get image dimensions")};const l={width:e.artboard.width,height:e.artboard.height,scale:e.scale,align:wt(e.alignment),offsetX:e.offsetX,offsetY:e.offsetY,scaleMode:e.scaleMode,marginTop:e.marginTop,marginRight:e.marginRight,marginBottom:e.marginBottom,marginLeft:e.marginLeft},s=St({width:n.width,height:n.height},l),c=e.artboard.x+s.x,d=e.artboard.y+s.y,p=c+s.width/2,R=d+s.height/2;return{success:!0,element:new H.ImageElement({...r,x:p,y:R,imageUrl:t,imageAspectRatio:n.aspectRatio,preserveDimensions:!0,transformData:{type:"image",width:s.width,height:s.height,cropX:((S=r.transformData)==null?void 0:S.cropX)??0,cropY:((C=r.transformData)==null?void 0:C.cropY)??0,cropWidth:((P=r.transformData)==null?void 0:P.cropWidth)??1,cropHeight:((A=r.transformData)==null?void 0:A.cropHeight)??1,flipHorizontal:((j=r.transformData)==null?void 0:j.flipHorizontal)??!1,flipVertical:((k=r.transformData)==null?void 0:k.flipVertical)??!1,borderRadius:((b=r.transformData)==null?void 0:b.borderRadius)??0}}),placement:{artworkSize:{width:n.width,height:n.height},finalSize:{width:s.width,height:s.height},position:{x:p,y:R},scale:s.scale}}}function Mt(t){return new Promise(e=>setTimeout(e,t))}const K=H.createLogger("SnowconeCanvas");function ve(t,e,r,a){if(a<=0||!isFinite(a))return r;const n=t*r,l=e*r;if(Math.max(n,l)<=a)return r;const c=Math.max(t,e),d=a/c;return Math.min(d,r)}const ze=o.forwardRef((t,e)=>{const{exportConfig:r,imageConfig:a,layoutConfig:n,kit:l,artboards:s,activeArtboard:c,onArtboardChange:d,initialElements:p,onChange:R,onSelectionChange:T,autoExportInterval:S,onExport:C,onExportScheduled:P,onExportStatus:A,onExportReady:j,onImageLoad:k,onImageError:b,onError:I,onReady:y,className:B,style:L,enableShortcuts:$,overlay:te}=t,we=S,Q=t.autoExportConfig??(r==null?void 0:r.autoExportConfig),q=t.autoExportFormat??(r==null?void 0:r.format)??"dataUrl",me=t.autoExportAll??(r==null?void 0:r.exportAll)??!1,V=t.exportScale??(r==null?void 0:r.scale)??2,U=t.maxExportSize??(r==null?void 0:r.maxSize)??4e3,re=t.exportImageFormat??(r==null?void 0:r.imageFormat)??"png",ne=t.exportImageQuality??(r==null?void 0:r.imageQuality)??.92,z=t.initialImage??(a==null?void 0:a.src),Se=t.initialImageAlignment??(a==null?void 0:a.alignment)??"center",Ae=t.initialImageScale??(a==null?void 0:a.scale)??1,Re=t.initialImageScaleMode??(a==null?void 0:a.scaleMode)??"cover",$e=t.width??(n==null?void 0:n.width)??1200,Ye=t.height??(n==null?void 0:n.height)??1200,Ve=t.viewPadding??(n==null?void 0:n.viewPadding)??.9,Xe=t.artboardBorderRadius??(n==null?void 0:n.artboardBorderRadius)??0,Ke=t.fixedMargin??(n==null?void 0:n.fixedMargin),qe=t.maxHeight??(n==null?void 0:n.maxHeight),Ge=t.showRotationHandle??(n==null?void 0:n.showRotationHandle)??!0,Ze=t.hideCanvas??(n==null?void 0:n.hideCanvas)??!1,Ce=t.canvasWrapperClassName??(n==null?void 0:n.canvasWrapperClassName),ke=t.canvasWrapperStyle??(n==null?void 0:n.canvasWrapperStyle),Qe=t.canvasCutouts??(n==null?void 0:n.canvasCutouts),Ie=t.pieceGuides,Je=t.pieceFocus,_e=$??!0,J=o.useMemo(()=>h.resolveKit(l??"pro-studio"),[l]);o.useEffect(()=>{if(H.process$1.env.NODE_ENV==="development"&&J){const i=h.validateKit(J);i.valid||K.warn("Kit validation warnings:",i.errors),i.warnings.length>0&&K.warn("Kit validation warnings:",i.warnings)}},[J]);const ae=o.useRef(I);ae.current=I;const W=o.useCallback(i=>{var u;K.error(`[${i.category}] ${i.message}`,i.originalError),(u=ae.current)==null||u.call(ae,i)},[]);o.useEffect(()=>(de.CanvasRenderer.onRenderError=W,()=>{de.CanvasRenderer.onRenderError===W&&(de.CanvasRenderer.onRenderError=null)}),[W]);const{elements:X,setElements:oe,selectedId:Me,artboardManager:M,refreshArtboards:et,historyManager:tt,isCanvasReady:he,setCanvasReady:se}=N.useEditor(),{createArtboard:rt,selectArtboard:nt,artboards:F}=h.useArtboards(),{exportArtboard:G,exportAllArtboards:ie,exportArtboardAsBlob:Z,exportAllArtboardsAsBlobs:ce}=h.useExport();o.useImperativeHandle(e,()=>({exportArtboards:async(i={})=>{const u=i.format||q,x=i.scale||V,E=i.all??!1;let g=x;if(U>0&&isFinite(U))for(const w of F){const v=ve(w.width,w.height,x,U);g=Math.min(g,v)}const m={scale:g,format:re,quality:ne};if(E){const w=u==="blob"?await ce(m):await ie(m),v={};for(const[D,O]of Object.entries(w)){const Y=F.find(_=>_.id===D);Y&&(v[Y.name]=O)}return v}else{const w=M.getActiveArtboard();if(!w)throw new Error("[SnowconeCanvas] No active artboard found");if(u==="blob"){const v=await Z(w.id,m);return{[w.name]:v}}else{const v=await G(w.id,m);return{[w.name]:v}}}}}),[G,ie,Z,ce,q,V,U,re,ne,M,F]),o.useEffect(()=>{j&&j(async()=>{const u=M.getActiveArtboard();if(!u)throw new Error("[SnowconeCanvas] No active artboard found");const x=ve(u.width,u.height,V,U),E=q==="blob"?await Z(u.id,{scale:x}):await G(u.id,{scale:x});return{[u.name]:E}})},[j,G,Z,M,q,V,U]);const[Te,le]=o.useState("idle"),[Pe,ge]=o.useState(null),pe=o.useRef(void 0),be=o.useRef(!1),Le=o.useRef(!1),[at,ot]=o.useState(!1),st=o.useRef(0),it=o.useRef(0),xe=o.useRef(!1);o.useEffect(()=>{if(be.current)return;be.current=!0;const i=s||[{name:"Design",width:$e,height:Ye}],u=M.getAllArtboards();if(u.length>0){const x=i[0],E=u[0],g=Ie?"transparent":void 0;E.name=x.name,E.width=x.width,E.height=x.height,E.clipShape=x.clipShape,x.backgroundColor?E.backgroundColor=x.backgroundColor:g&&(E.backgroundColor=g);for(let m=1;m<i.length;m++)rt(i[m].width,i[m].height,{name:i[m].name,backgroundColor:i[m].backgroundColor??g,clipShape:i[m].clipShape})}et()},[]),o.useEffect(()=>{if(!(!p||p.length===0)&&!Le.current&&be.current){Le.current=!0,ot(!0);try{const i=de.ElementFactory.createManyFromJSON(p),u=M.getAllArtboards();if(u.length>0){const E=u[0];for(const g of i)M.addElementToArtboard(g.id,E.id)}oe(i);const x=new Set;for(const E of i){const g=E.fontFamily;typeof g=="string"&&g.trim().length>0&&x.add(g)}if(x.size>0&&typeof document<"u"){const E=document.fonts??null,g=Array.from(x).map(m=>{const w=`font-${m.replace(/\s+/g,"-").toLowerCase()}`;let v=document.getElementById(w);return v||(v=document.createElement("link"),v.id=w,v.rel="stylesheet",v.href=`https://fonts.googleapis.com/css2?family=${m.replace(/\s+/g,"+")}:wght@400;700&display=swap`,document.head.appendChild(v)),new Promise(D=>{if(v.sheet){D(m);return}const O=()=>D(m);v.addEventListener("load",O,{once:!0}),v.addEventListener("error",O,{once:!0}),setTimeout(O,4e3)})});Promise.all(g).then(m=>{if(E)return Promise.all(m.flatMap(w=>[E.load(`400 16px "${w}"`).catch(()=>{}),E.load(`700 16px "${w}"`).catch(()=>{})]))}).then(()=>{oe(m=>m.slice())})}}catch(i){K.error("Failed to load initial elements:",i);const u=i instanceof Error?i:new Error(String(i));W({category:"import",message:`Failed to load initial elements: ${u.message}`,originalError:u,recoverable:!0})}}},[p,M,oe,W]),o.useEffect(()=>{if(!c){xe.current=!0;return}const i=F.find(u=>u.name===c);if(i){const u=M.getActiveArtboard();(u==null?void 0:u.name)!==c&&nt(i.id),xe.current=!0}},[c,F]),o.useEffect(()=>{if(!z||pe.current===z)return;if(X.length>0){pe.current=z;return}pe.current=z,(async()=>{le("loading"),ge(null);try{const u=M.getAllArtboards();if(u.length===0)throw new Error("No artboards available");const x=[];for(const E of u){const g=s==null?void 0:s.find(v=>v.name===E.name),m=(g==null?void 0:g.scaleMode)||Re,w=await It(z,{artboard:{width:E.width,height:E.height,x:E.x,y:E.y},alignment:(g==null?void 0:g.fitAlign)||Se,scale:Ae,scaleMode:m,marginTop:g==null?void 0:g.fitMarginTop,marginRight:g==null?void 0:g.fitMarginRight,marginBottom:g==null?void 0:g.fitMarginBottom,marginLeft:g==null?void 0:g.fitMarginLeft});w.success&&w.element?(M.addElementToArtboard(w.element.id,E.id),x.push(w.element)):K.error("Failed to load image for artboard:",E.name,w.error)}if(x.length>0)oe(E=>[...E,...x]),le("success"),k==null||k(z);else{const E=new Error("Failed to load image into any artboard");le("error"),ge(E),b==null||b(z,E),W({category:"image",message:E.message,originalError:E,recoverable:!0})}}catch(u){const x=u instanceof Error?u:new Error(String(u));le("error"),ge(x),b==null||b(z,x),W({category:"image",message:x.message,originalError:x,recoverable:!0})}})()},[z,Se,Ae,Re]),o.useEffect(()=>{T==null||T(Me)},[Me,T]),o.useEffect(()=>{if(!R)return;const i=M.getActiveArtboard(),u={elements:X.map(x=>x.toJSON()),artboards:F.map(x=>({name:x.name,width:x.width,height:x.height,clipShape:x.clipShape,backgroundColor:x.backgroundColor})),activeArtboard:(i==null?void 0:i.name)||"Design"};R(u)},[X,F,R]),o.useEffect(()=>{if(!d||!xe.current)return;const i=M.getActiveArtboard();i&&d(i.name)},[M.getActiveArtboardId()]);const ct=o.useCallback(async()=>{if(!C&&!A)return;const i=++it.current,u=Date.now();let x=V;if(U>0&&isFinite(U))for(const m of F){const w=ve(m.width,m.height,V,U);x=Math.min(x,w)}const E=M.getActiveArtboard(),g=(E==null?void 0:E.id)??"unknown";A==null||A({status:"rendering",artboardId:g}),st.current=u;try{let m;const w={format:re,scale:x,quality:ne};if(q==="blob")if(me){const v=await ce(w);m={};for(const[D,O]of Object.entries(v)){const Y=F.find(_=>_.id===D);Y&&(m[Y.name]=O)}}else{const v=M.getActiveArtboard();if(!v)return;const D=await Z(v.id,w);m={[v.name]:D}}else if(me){const v=await ie(w);m={};for(const[D,O]of Object.entries(v)){const Y=F.find(_=>_.id===D);Y&&(m[Y.name]=O)}}else{const v=M.getActiveArtboard();if(!v)return;const D=await G(v.id,w);m={[v.name]:D}}C==null||C(m),A==null||A({status:"complete",artboardId:g,result:m})}catch(m){const w=m instanceof Error?m.message:String(m);if(w.includes("Canvas ref not available"))return;const v=Date.now()-u;K.error("Export failed (export #"+i+"):",{duration:`${v}ms`,error:w});const D=m instanceof Error?m:new Error(w);A==null||A({status:"error",artboardId:g,error:D}),W({category:"export",message:D.message,originalError:D,artboardId:g,recoverable:!0})}},[C,A,me,q,V,U,re,ne,G,ie,Z,ce,F,M,X,Q,W]);o.useEffect(()=>{we!==void 0&&we>0&&K.warn("autoExportInterval is deprecated and ignored. Use autoExportConfig={{ enabled: true, debounceMs: 100, maxWaitMs: 1000 }} instead.")},[]),o.useEffect(()=>{},[X]);const lt=o.useCallback(()=>{if(P==null||P(),A){const i=M.getActiveArtboard();A({status:"scheduled",artboardId:(i==null?void 0:i.id)??"unknown"})}},[P,A,M]),dt=!!p&&p.length>0,Ee=Ue({isCanvasReady:he,elements:X,hasInitialElements:dt,initialElementsLoaded:at}),De=o.useRef(!1);o.useEffect(()=>{Ee&&!De.current&&(De.current=!0,y==null||y())},[Ee,y]),He({config:Q?{enabled:Q.enabled??!0,debounceMs:Q.debounceMs??100,maxWaitMs:Q.maxWaitMs??1e3}:{enabled:!1},historyManager:tt,artboards:F,elements:X,onExport:ct,onExportScheduled:lt,isCanvasReady:Ee}),o.useEffect(()=>{if(F.length>0&&!he){const i=requestAnimationFrame(()=>{se(!0)});return()=>cancelAnimationFrame(i)}},[F.length,he,se]),o.useEffect(()=>()=>{se(!1)},[se]);const ut=o.useCallback(i=>{W({category:"unknown",message:i.message,originalError:i,recoverable:!1})},[W]);return Te==="loading"?f.jsx("div",{className:B,style:{...L,display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"var(--surface, #f5f5f5)"},children:f.jsx(h.Spinner,{size:48})}):Te==="error"&&Pe?f.jsx("div",{className:B,style:{...L,display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"var(--surface, #f5f5f5)",color:"var(--danger, #dc2626)",padding:"1rem"},children:f.jsxs("div",{className:"text-center",children:[f.jsx("div",{className:"font-medium",children:"Failed to load image"}),f.jsx("div",{className:"text-sm mt-1 opacity-70",children:Pe.message})]})}):f.jsx(h.KitProvider,{kit:J,children:f.jsx("div",{className:`app-modern ${B||""}`,style:{...L,position:"relative"},children:f.jsxs(Be,{onError:ut,fallback:(i,u)=>f.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",padding:"24px",minHeight:"200px",backgroundColor:"var(--surface, #f5f5f5)",color:"var(--foreground, #333)",fontFamily:"system-ui, sans-serif",textAlign:"center"},children:[f.jsx("div",{style:{fontSize:"18px",fontWeight:600,marginBottom:"8px"},children:"Something went wrong"}),f.jsx("div",{style:{fontSize:"14px",opacity:.7,marginBottom:"16px",maxWidth:"400px"},children:i.message}),f.jsx("button",{onClick:u,style:{padding:"8px 20px",backgroundColor:"var(--primary, #333)",color:"var(--primary-foreground, #fff)",border:"none",borderRadius:"6px",fontSize:"14px",fontWeight:500,cursor:"pointer"},children:"Try again"})]}),children:[!Ze&&(()=>{const i=f.jsx(h.Canvas,{style:{width:"100%"},fitPadding:Ve,artboardBorderRadius:Xe,fixedMargin:Ke,maxHeight:qe,showRotationHandle:Ge,enableShortcuts:_e,canvasCutouts:Qe,pieceGuides:Ie,pieceFocus:Je}),u=Ce||ke?f.jsx("div",{className:Ce,style:ke,children:i}):i;return f.jsx(gt,{kit:J,canvas:u})})(),te]})})})});ze.displayName="SnowconeCanvasInner";const ye=o.forwardRef((t,e)=>{var s;const{inheritTheme:r,externalProvider:a}=t,n=t.viewPadding??((s=t.layoutConfig)==null?void 0:s.viewPadding),l=f.jsx(ze,{ref:e,...t});return a?f.jsx(N.ThemeProvider,{defaultTheme:"light",passive:r,children:l}):f.jsx(N.ThemeProvider,{defaultTheme:"light",passive:r,children:f.jsx(N.EditorProvider,{viewPadding:n,children:l})})});ye.displayName="SnowconeCanvas";function Tt(){const{selectedElement:t}=N.useEditor();return t??null}function Pt(){const{isCanvasReady:t}=N.useEditor();return t}const Lt=()=>{},Dt=[];function jt(t){const{elementStore:e}=N.useElementsContext(),{executeElementUpdate:r}=N.useCommandContext(),a=o.useMemo(()=>e.getAllByName(t).filter(s=>s instanceof H.TextElement),[e,t]),n=o.useCallback(l=>{for(const s of a){const c=s.clone();c.setText(l),r(s,c)}},[a,r]);return a.length===0?{text:"",setText:Lt,element:null,elements:Dt,isConnected:!1}:{text:a[0].getText(),setText:n,element:a[0],elements:a,isConnected:!0}}const Ft=()=>{},Nt=[];function Bt(t,e,r){const a=t/e;if(r>=a){const n=e,l=n*r,s=t/l;return{width:l,height:n,cropX:(1-s)/2,cropY:0,cropWidth:s,cropHeight:1}}else{const n=t,l=n/r,s=e/l;return{width:n,height:l,cropX:0,cropY:(1-s)/2,cropWidth:1,cropHeight:s}}}function Ht(t,e){const r=(e==null?void 0:e.fit)??"cover",{elementStore:a,setElements:n}=N.useElementsContext(),{executeElementUpdate:l}=N.useCommandContext(),s=o.useMemo(()=>a.getAllByName(t).filter(C=>C instanceof H.ImageElement),[a,t]),c=o.useRef(new Map);for(const S of s)if(!c.current.has(S.id)){const C=S.transformData;c.current.set(S.id,{width:C.width*C.cropWidth,height:C.height*C.cropHeight})}const d=o.useRef(s);d.current=s;const p=o.useRef(l);p.current=l;const R=o.useRef(n);R.current=n;const T=o.useCallback(S=>{const C=d.current,P=p.current;for(const A of C){const j=c.current.get(A.id);if(!j)continue;const{width:k,height:b}=j,I=A.clone();I.imageLoaded=!1,I.imageElement=null,I.isCropping=!1,I.imageUrl=S,r==="cover"?(I.preserveDimensions=!0,I.onLoadCallback=y=>{const B=y.imageAspectRatio||1,L=Bt(k,b,B);y.transformData.width=L.width,y.transformData.height=L.height,y.transformData.cropX=L.cropX,y.transformData.cropY=L.cropY,y.transformData.cropWidth=L.cropWidth,y.transformData.cropHeight=L.cropHeight,P(A,y)}):(I.preserveDimensions=!1,I.onLoadCallback=y=>{const B=y.transformData.width,L=y.transformData.height,$=Math.min(k/B,b/L,1);$<1&&(y.transformData.width=B*$,y.transformData.height=L*$),y.transformData.cropX=0,y.transformData.cropY=0,y.transformData.cropWidth=1,y.transformData.cropHeight=1,P(A,y)}),I.loadImage(S)}},[r]);return s.length===0?{imageUrl:"",setImageUrl:Ft,element:null,elements:Nt,isConnected:!1}:{imageUrl:s[0].imageUrl,setImageUrl:T,element:s[0],elements:s,isConnected:!0}}function Wt(t){const{elementStore:e}=N.useElementsContext();return t?e.getByName(t)??null:null}function Ut(){const{zoom:t,panOffset:e,zoomIn:r,zoomOut:a,zoomToFit:n,resetView:l,setZoom:s,setPanOffset:c}=N.useViewportContext();return{zoom:t,panOffset:e,zoomIn:r,zoomOut:a,zoomToFit:n,resetView:l,setZoom:s,setPanOffset:c}}const Oe=1;function zt(t){var a;const e=((a=t.artboards)==null?void 0:a[0])||{name:"Front",width:800,height:800},r=(t.elements||[]).map(Ot);return{schemaVersion:Oe,artboards:[{id:"artboard-1",name:e.name||"Front",x:0,y:0,width:e.width||800,height:e.height||800,backgroundColor:e.backgroundColor||"transparent",exportBackground:!1,elements:r,distressTexture:e.distressTexture,imageMask:e.imageMask}]}}function Ot(t){const e=t.type||t.transformType;return e==="image"?$t(t):{...t,type:e}}function $t(t){var p;const e=t.transformData||{},r=t.masks&&t.masks.length>0,a=e.width||0,n=e.height||0,l=r?a:a*(e.cropWidth??1),s=r?n:n*(e.cropHeight??1),c={id:t.id,type:"image",x:t.x||0,y:t.y||0,width:l,height:s,rotation:t.rotation||0,imageUrl:t.imageUrl,imageAspectRatio:t.imageAspectRatio};return!r&&(e.cropX!==0||e.cropY!==0||e.cropWidth!==1||e.cropHeight!==1)&&(c.cropX=e.cropX,c.cropY=e.cropY,c.cropWidth=e.cropWidth,c.cropHeight=e.cropHeight,c.needsCropPixelConversion=!0),e.flipHorizontal&&(c.flipHorizontal=e.flipHorizontal),e.flipVertical&&(c.flipVertical=e.flipVertical),e.borderRadius&&(c.borderRadius=e.borderRadius),t.opacity!==void 0&&(c.opacity=t.opacity),t.distressEffect&&(c.distressEffect=t.distressEffect),((p=t.masks)==null?void 0:p.length)>0&&(c.masks=t.masks),t.blendMode&&(c.blendMode=t.blendMode),t.knockoutParts&&(c.knockoutParts=t.knockoutParts),t.stroke&&(c.stroke=t.stroke),c}h.ensureIconsRegistered();exports.ALL_CAPABILITIES=h.ALL_CAPABILITIES;exports.COMPACT_CUSTOMIZER=h.COMPACT_CUSTOMIZER;exports.EMBED_ONLY=h.EMBED_ONLY;exports.MINIMAL_CAPABILITIES=h.MINIMAL_CAPABILITIES;exports.PRO_STUDIO=h.PRO_STUDIO;exports.createKit=h.createKit;exports.extendKit=h.extendKit;exports.resolveKit=h.resolveKit;exports.useArtboards=h.useArtboards;exports.useExport=h.useExport;exports.useLayers=h.useLayers;exports.validateKit=h.validateKit;exports.useEditor=N.useEditor;exports.deserializeState=fe.deserializeState;exports.migrateState=fe.migrateState;exports.serializeState=fe.serializeState;exports.validateState=fe.validateState;exports.CANVAS_STATE_SCHEMA_VERSION=Oe;exports.ErrorBoundary=Be;exports.SnowconeCanvas=ye;exports.default=ye;exports.serializeStateForServer=zt;exports.useAutoExport=He;exports.useCanvasReady=Pt;exports.useCommands=Ne;exports.useContentReady=Ue;exports.useElementByName=Wt;exports.useImageBinding=Ht;exports.useSelectedElement=Tt;exports.useTextBinding=jt;exports.useViewport=Ut;
 //# sourceMappingURL=index.js.map