@snowcone-app/canvas 0.1.12 → 0.1.14
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.
- package/dist/advanced.js +1 -1
- package/dist/advanced.mjs +2 -2
- package/dist/{compose-Dqh2f8tS.js → compose-DCYerzAx.js} +3135 -3121
- package/dist/compose-DCYerzAx.js.map +1 -0
- package/dist/{compose-HDJp4Z_d.cjs → compose-qXEnDNMp.cjs} +15 -15
- package/dist/compose-qXEnDNMp.cjs.map +1 -0
- package/dist/icons/registry.d.ts +28 -5
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +82 -80
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
- package/dist/compose-Dqh2f8tS.js.map +0 -1
- package/dist/compose-HDJp4Z_d.cjs.map +0 -1
package/dist/icons/registry.d.ts
CHANGED
|
@@ -11,18 +11,41 @@
|
|
|
11
11
|
* To regenerate after adding new icons:
|
|
12
12
|
* pnpm generate:icons
|
|
13
13
|
*
|
|
14
|
+
* ## SSR safety (load-bearing)
|
|
15
|
+
*
|
|
16
|
+
* `@iconify/react` is a *browser* dependency: importing it can evaluate
|
|
17
|
+
* browser-only globals (e.g. `window`) at module-evaluation time. Because the
|
|
18
|
+
* package barrels (`api/stable.ts`, `api/advanced.ts`, `components/embed`) call
|
|
19
|
+
* {@link ensureIconsRegistered} as a top-level side effect, a *static*
|
|
20
|
+
* `import '@iconify/react'` in this file would run iconify the instant any
|
|
21
|
+
* consumer `import`s `@snowcone-app/canvas` — crashing Next.js App Router /
|
|
22
|
+
* any SSR/RSC context with `ReferenceError: window is not defined` even for a
|
|
23
|
+
* pure server-only import of `serializeStateForServer`.
|
|
24
|
+
*
|
|
25
|
+
* To keep the barrel side-effect-free w.r.t. browser globals, iconify is loaded
|
|
26
|
+
* via a *dynamic* `import()` that only runs in a browser. On the server
|
|
27
|
+
* {@link ensureIconsRegistered} is a no-op; in the browser it registers icons
|
|
28
|
+
* asynchronously on first call. The `Icon` component reads icon data lazily, so
|
|
29
|
+
* registration completing on the first client microtask is fine.
|
|
30
|
+
*
|
|
14
31
|
* @see https://iconify.design/docs/icons/json.html
|
|
15
32
|
*/
|
|
16
33
|
/**
|
|
17
34
|
* Registers all icons used in the canvas package.
|
|
18
|
-
* Call this function once when the application loads.
|
|
19
35
|
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
36
|
+
* Loads `@iconify/react` via dynamic `import()` so the module is never touched
|
|
37
|
+
* during server-side module evaluation. No-op (resolves immediately) outside a
|
|
38
|
+
* browser.
|
|
39
|
+
*
|
|
40
|
+
* This registers only the ~100-150 icons actually used, rather than ~20,000+
|
|
41
|
+
* icons from the full icon sets.
|
|
22
42
|
*/
|
|
23
|
-
export declare function registerCanvasIcons(): void
|
|
43
|
+
export declare function registerCanvasIcons(): Promise<void>;
|
|
24
44
|
/**
|
|
25
45
|
* Ensures icons are registered exactly once.
|
|
26
|
-
*
|
|
46
|
+
*
|
|
47
|
+
* Safe to call at module-evaluation time and on the server: on the server it
|
|
48
|
+
* does nothing; in the browser it kicks off async registration on the first
|
|
49
|
+
* call. Subsequent calls are no-ops.
|
|
27
50
|
*/
|
|
28
51
|
export declare function ensureIconsRegistered(): void;
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"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;
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("./compose-qXEnDNMp.cjs"),B=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=B.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=B.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=>{var n;if(e===ee)return null;const r=h.getSection(e);if(!r)return typeof B.process$1<"u"&&((n=B.process$1.env)==null?void 0:n.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=B.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=B.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(()=>B.subscribeToImageLoads(I=>{if(!d.current||!c)return;n.some(H=>H.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=B.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 H=e.offsetX||0,L=e.offsetY||0,$=I,te=y;return k+=H*$,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:H*$,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 B.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=B.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:H,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(()=>{var i;if(typeof B.process$1<"u"&&((i=B.process$1.env)==null?void 0:i.NODE_ENV)==="development"&&J){const u=h.validateKit(J);u.valid||K.warn("Kit validation warnings:",u.errors),u.warnings.length>0&&K.warn("Kit validation warnings:",u.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:H,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:H,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 ${H||""}`,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 B.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 B.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 H=y.imageAspectRatio||1,L=Bt(k,b,H);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 H=y.transformData.width,L=y.transformData.height,$=Math.min(k/H,b/L,1);$<1&&(y.transformData.width=H*$,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;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|