exodeui 6.0.32 → 6.0.33
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/index.d.ts +1 -6
- package/dist/index.js +1 -1
- package/dist/index.mjs +8 -6
- package/dist/src/index.d.ts +6 -0
- package/package.json +1 -1
- /package/dist/{ExodeSEO.d.ts → src/ExodeSEO.d.ts} +0 -0
- /package/dist/{ExodeUICanvas.d.ts → src/ExodeUICanvas.d.ts} +0 -0
- /package/dist/{__tests__ → src/__tests__}/comprehensiveArtboard.d.ts +0 -0
- /package/dist/{__tests__ → src/__tests__}/engine.test.d.ts +0 -0
- /package/dist/{__tests__ → src/__tests__}/frame_parity.test.d.ts +0 -0
- /package/dist/{__tests__ → src/__tests__}/integration.test.d.ts +0 -0
- /package/dist/{__tests__ → src/__tests__}/seo.test.d.ts +0 -0
- /package/dist/{__tests__ → src/__tests__}/spring.test.d.ts +0 -0
- /package/dist/{__tests__ → src/__tests__}/text-wrapping.test.d.ts +0 -0
- /package/dist/{easing.d.ts → src/easing.d.ts} +0 -0
- /package/dist/{engine.d.ts → src/engine.d.ts} +0 -0
- /package/dist/{layout.d.ts → src/layout.d.ts} +0 -0
- /package/dist/{physics → src/physics}/PhysicsEngine.d.ts +0 -0
- /package/dist/{physics → src/physics}/RapierPhysics.d.ts +0 -0
- /package/dist/{physics → src/physics}/index.d.ts +0 -0
- /package/dist/{renderer.d.ts → src/renderer.d.ts} +0 -0
- /package/dist/{types.d.ts → src/types.d.ts} +0 -0
- /package/dist/{useExodeUI.d.ts → src/useExodeUI.d.ts} +0 -0
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -19,4 +19,4 @@
|
|
|
19
19
|
0 ${BA} 0 0 ${1-BA}
|
|
20
20
|
0 0 ${BA} 0 ${1-BA}
|
|
21
21
|
0 0 0 1 0"/>`,MA="invert"}if(U!==0||x!==0||z!==0||KA!==0){const BA=1+z+KA,N=BA*(1+U-x/2),H=BA*(1+x),d=BA*(1-U-x/2),DA=e.shadows*.1/255,cA=[N,0,0,0,DA,0,H,0,0,DA,0,0,d,0,DA,0,0,0,1,0].join(" ");kA+=`<feColorMatrix in="${MA}" type="matrix" values="${cA}" result="advanced"/>`,MA="advanced"}if(e.blur&&(kA+=`<feGaussianBlur in="${MA}" stdDeviation="${e.blur}" result="blur"/>`,MA="blur"),kA){const BA=`<svg xmlns="http://www.w3.org/2000/svg"><filter id="f" color-interpolation-filters="sRGB">${kA}</filter></svg>`,N=btoa(BA);K.push(`url('data:image/svg+xml;base64,${N}#f')`)}}K.length>0?A.filter=K.join(" "):A.filter="none",A.imageSmoothingEnabled=!0,A.imageSmoothingQuality="high";const R=A.globalAlpha,T=this.normalizeOpacity(g.opacity!==void 0?g.opacity:100);A.globalAlpha=R*T;const b=g.compositeOperation||g.blendMode;if(b&&b!=="Normal"){const m=b.toLowerCase();["multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity","source-over","source-in","source-out","source-atop","destination-over","destination-in","destination-out","destination-atop","lighter","copy","xor","multiply","screen"].includes(m)&&(A.globalCompositeOperation=m)}const Y=A,P=g.masks||(I.maskedBy?[{maskId:I.maskedBy,inverted:I.maskInverted===!0,type:I.maskType||"alpha",opacity:I.maskOpacity!==void 0?I.maskOpacity/100:1,feather:I.maskFeather||0,isVisible:!0}]:[]);let l=!1;const r=P.filter(m=>m.isVisible!==!1&&C.has(m.maskId));if(r.length>0){const m=r[0],V=C.get(m.maskId),p=this.objectStates.get(V.id);p&&p.visible!==!1&&(l=!0,(!this.maskBuffer||this.maskBuffer.width!==this.canvasWidth||this.maskBuffer.height!==this.canvasHeight)&&(this.maskBuffer=document.createElement("canvas"),this.maskBuffer.width=this.canvasWidth,this.maskBuffer.height=this.canvasHeight,this.maskCtx=this.maskBuffer.getContext("2d",{willReadFrequently:!0}),this.maskCtx&&(this.maskCtx.imageSmoothingEnabled=!0,this.maskCtx.imageSmoothingQuality="high")),this.maskCtx.setTransform(1,0,0,1,0,0),this.maskCtx.globalCompositeOperation="source-over",this.maskCtx.globalAlpha=1,this.maskCtx.filter="none",this.maskCtx.clearRect(0,0,this.maskBuffer.width,this.maskBuffer.height),this.rootTransform&&this.maskCtx.setTransform(this.rootTransform),I.parentId&&this.applyAbsoluteTransform(this.maskCtx,I.parentId,C),this.maskCtx.save(),this.maskCtx.globalAlpha=1,A=this.maskCtx,A.filter=Y.filter)}A.translate(Math.round(a),Math.round(G)),A.rotate(g.rotation*Math.PI/180);const u=g.skew_x||0,gA=g.skew_y||0;(u!==0||gA!==0)&&A.transform(1,Math.tan(gA*Math.PI/180),Math.tan(u*Math.PI/180),1,0,0),A.scale((g.scale_x??1)*(g.flip_x===!0?-1:1),(g.scale_y??1)*(g.flip_y===!0?-1:1));const $=E.shadow;if($&&$.isEnabled!==!1){let m=$.color||"#000000";(L=(j=this.artboard)==null?void 0:j.tokens)!=null&&L.colors&&this.artboard.tokens.colors[m]&&(m=this.artboard.tokens.colors[m]);const V=this.normalizeOpacity($.opacity??100),p=$.spread||0,x=($.blur||0)+p*1.5;let z=m;if(m.startsWith("#")){const MA=m.replace("#",""),nA=parseInt(MA.substring(0,2),16),BA=parseInt(MA.substring(2,4),16),N=parseInt(MA.substring(4,6),16);z=`rgba(${nA}, ${BA}, ${N}, ${V})`}else if(m.startsWith("rgba")){const MA=m.match(/[\d.]+/g);if(MA&&MA.length>=4){const nA=MA[0],BA=MA[1],N=MA[2],H=MA[3];z=`rgba(${nA}, ${BA}, ${N}, ${parseFloat(H)*V})`}}const KA=A.getTransform(),kA=Math.sqrt(KA.a*KA.a+KA.b*KA.b)||1;A.shadowColor=z,A.shadowBlur=x*kA,A.shadowOffsetX=($.offsetX||0)*kA,A.shadowOffsetY=($.offsetY||0)*kA}const f=I.liquidFill||((v=I.style)==null?void 0:v.liquidFill),_=I.artEffect||((CA=I.style)==null?void 0:CA.artEffect);if(f&&f.enabled){A.save();const m=f.fillLevel??.5;A.beginPath();const V=D/2-D*m;A.rect(-i/2,V,i,D*m),A.clip(),A.fillStyle=f.color||"#3b82f6",A.globalAlpha=A.globalAlpha*(f.opacity??1)}const IA=_&&_.enabled&&_.type==="glitch";if(IA){A.save();const V=(_.intensity??.5)*10,p=A.getTransform(),U=Math.sqrt(p.a*p.a+p.b*p.b)||1;A.shadowColor="rgba(255, 0, 0, 0.5)",A.shadowBlur=V*U,A.translate(V/2,0)}if(Q.type==="Text")this._renderText(A,I,h,E,g,i,D);else if(Q.type==="Image"){const m=Q.src;if(m){let V=this.imageCache.get(m);V||(V=new Image,V.onload=()=>{},V.onerror=()=>{console.error(`[ExodeUI] Image load failed: ${m.substring(0,100)}${m.length>100?"...":""}`)},V.src=m,this.imageCache.set(m,V));const p=E.stroke&&E.stroke.width>0&&E.stroke.isEnabled!==!1,U=(((oA=E.stroke)==null?void 0:oA.alignment)||"center").toLowerCase();if(p&&(U==="outside"||U==="center")&&this.applyStrokeAlignment(A,E,h,i,D,s),E.fill&&E.fill.type!=="None"){A.save();const x=A.globalAlpha,z=this.createCanvasFill(A,E.fill,i,D);A.fillStyle=z||E.fill.color||"transparent",A.globalAlpha=x*this.normalizeOpacity(E.fill.opacity??100),s!==0?(this.drawRoundRect(A,-i/2,-D/2,i,D,s),A.fill()):A.fillRect(-i/2,-D/2,i,D),A.globalAlpha=x,A.restore()}V.complete&&V.naturalWidth>0?(s!==0?(A.save(),this.drawRoundRect(A,-i/2,-D/2,i,D,s),A.clip(),A.drawImage(V,-i/2,-D/2,i,D),A.restore()):A.drawImage(V,-i/2,-D/2,i,D),p&&U==="inside"&&this.applyStrokeAlignment(A,E,h,i,D,s)):p&&U==="inside"&&this.applyStrokeAlignment(A,E,h,i,D,s)}}else if(Q.type==="SVG"){const m=Q.svgContent;if(m){const V=E.palette||[],p=E.fill,U=E.stroke,x=p?this.normalizeOpacity(p.opacity??100):1,z=(p==null?void 0:p.type)==="Solid"&&(!U||U.isEnabled===!1||U.type==="Solid"&&U.color===p.color),KA=p&&p.type!=="None"?z?"monochrome":p.type==="Solid"?(p.color||"")+"|opacity:"+x:JSON.stringify(p.stops||[])+"|opacity:"+x:"",kA=U&&U.isEnabled!==!1&&(U.width||0)>0?z?["monochrome",U.width||0,U.trimStart??0,U.trimEnd??1,U.trimOffset??0,U.dashOffset??0].join("|"):[U.width||0,U.fill?U.fill.type==="Solid"?U.fill.color||"":JSON.stringify(U.fill.stops||[]):U.color||"",U.opacity??1,U.lineCap||"",U.lineJoin||"",(U.dashArray||[]).join(","),U.trimStart??0,U.trimEnd??1,U.trimOffset??0,U.dashOffset??0].join("|"):"nostroke",MA=[I.id,V.join("_"),KA,kA,g.opacity??100,g.visible!==!1?"v":"h"].join("_");let nA=this.imageCache.get(MA);if(!nA){nA=new Image,nA.crossOrigin="anonymous";let N=m;if(Q.colors&&Q.colors.length>0&&V.length>0&&Q.colors.forEach((QA,wA)=>{if(V[wA]){const rA=QA.replace(/[-\/\\^$*+?.()|[\]{}]/g,"\\$&"),HA=new RegExp(rA,"gi");N=N.replace(HA,V[wA])}}),p&&p.type&&p.type!=="None"){if(p.type==="Solid"&&p.color){const QA=z?"#FFFFFF":p.color,wA=z?1:this.normalizeOpacity(p.opacity??100);N=N.replace(/\bfill\s*=\s*["'][^"']*["']/gi,rA=>/fill\s*=\s*["']\s*(none|transparent)\s*["']/i.test(rA)?rA:`fill="${QA}"`),N=N.replace(/fill\s*:\s*[^;"')]+/gi,rA=>/fill\s*:\s*(none|transparent)/i.test(rA)?rA:`fill:${QA}`),wA<1&&(N=N.replace(/\bfill-opacity\s*=\s*["'][^"']*["']/gi,`fill-opacity="${wA}"`),N=N.replace(/fill-opacity\s*:\s*[^;"')]+/gi,`fill-opacity:${wA}`),N.match(/\bfill-opacity\s*=/i)||(N=N.replace(/(<svg[^>]*>)/i,`$1<g fill-opacity="${wA}">`),N=N.replace(/<\/svg>/i,"</g></svg>")))}else if(p.type==="LinearGradient"||p.type==="RadialGradient"||p.type==="Linear"||p.type==="Radial"){const QA="exode-fill",wA=this.normalizeOpacity(p.opacity??100),rA=(p.stops||[]).map(NA=>{const GA=NA.offset!==void 0?NA.offset:NA.pos??0,EA=this.normalizeOpacity(NA.opacity??100)*wA;return`<stop offset="${GA*100}%" stop-color="${NA.color||"#000"}" stop-opacity="${EA}"/>`}).join("");let HA="";if(p.type==="LinearGradient"||p.type==="Linear"){const NA=(W,AA)=>Array.isArray(W)?W[AA]??(AA===0?0:1):W&&typeof W=="object"?W[AA===0?"x":"y"]??(AA===0?0:1):AA===0?0:1,GA=NA(p.start,0)*100,EA=NA(p.start,1)*100,FA=NA(p.end,0)*100,aA=NA(p.end,1)*100;HA=`<linearGradient id="${QA}" x1="${GA}%" y1="${EA}%" x2="${FA}%" y2="${aA}%" gradientUnits="objectBoundingBox">${rA}</linearGradient>`}else{const NA=(aA,W)=>Array.isArray(aA)?aA[W]??.5:aA&&typeof aA=="object"?aA[W===0?"x":"y"]??.5:.5,GA=NA(p.center,0)*100,EA=NA(p.center,1)*100,FA=(p.radius??.5)*100;HA=`<radialGradient id="${QA}" cx="${GA}%" cy="${EA}%" r="${FA}%" gradientUnits="objectBoundingBox">${rA}</radialGradient>`}/<defs>/i.test(N)?N=N.replace(/<defs>/i,`<defs>${HA}`):N=N.replace(/<svg([^>]*)>/i,`<svg$1><defs>${HA}</defs>`),N=N.replace(/\bfill\s*=\s*["'][^"']*["']/gi,NA=>/fill\s*=\s*["']\s*(none|transparent)\s*["']/i.test(NA)?NA:`fill="url(#${QA})"`),N=N.replace(/fill\s*:\s*[^;"')]+/gi,NA=>/fill\s*:\s*(none|transparent)/i.test(NA)?NA:`fill:url(#${QA})`)}}const H=(QA,wA,rA=1)=>{const HA=(QA.stops||[]).map(aA=>{const W=aA.offset!==void 0?aA.offset:aA.pos??0,AA=this.normalizeOpacity(aA.opacity??100)*rA;return`<stop offset="${W*100}%" stop-color="${aA.color||"#000"}" stop-opacity="${AA}"/>`}).join(""),NA=(aA,W,AA=.5)=>Array.isArray(aA)?aA[W]??AA:aA&&typeof aA=="object"?aA[W===0?"x":"y"]??AA:AA;if(QA.type==="LinearGradient"||QA.type==="Linear"){const aA=NA(QA.start,0,0)*100,W=NA(QA.start,1,0)*100,AA=NA(QA.end,0,1)*100,hA=NA(QA.end,1,1)*100;return`<linearGradient id="${wA}" x1="${aA}%" y1="${W}%" x2="${AA}%" y2="${hA}%" gradientUnits="objectBoundingBox">${HA}</linearGradient>`}const GA=NA(QA.center,0,.5)*100,EA=NA(QA.center,1,.5)*100,FA=(QA.radius??.5)*100;return`<radialGradient id="${wA}" cx="${GA}%" cy="${EA}%" r="${FA}%" gradientUnits="objectBoundingBox">${HA}</radialGradient>`},d=(QA,wA)=>/<defs>/i.test(QA)?QA.replace(/<defs>/i,`<defs>${wA}`):QA.replace(/(<svg[^>]*>)/i,`$1<defs>${wA}</defs>`);if(U&&U.isEnabled!==!1&&(U.width||0)>0){const QA=U.width||1,wA=z?1:this.normalizeOpacity(U.opacity??100),rA=z?"#FFFFFF":U.color||(p==null?void 0:p.color)||"#000000";let HA="";const NA=U.fill;if(NA&&NA.type){if(NA.type==="Solid")HA=NA.color||U.color||"#000000";else if(NA.type==="LinearGradient"||NA.type==="RadialGradient"||NA.type==="Linear"||NA.type==="Radial"){const AA="exode-stroke";N=d(N,H(NA,AA,wA)),HA=`url(#${AA})`}}HA||(HA=rA),N.match(/\bstroke\s*=/i)?N=N.replace(/\bstroke\s*=\s*["'][^"']*["']/gi,AA=>/stroke\s*=\s*["']\s*(none|transparent)\s*["']/i.test(AA)?AA:`stroke="${HA}"`):N=N.replace(/<(path|circle|rect|ellipse|polygon|polyline)/gi,`<$1 stroke="${HA}"`),N=N.replace(new RegExp(`(?<![a-z-])stroke\\s*:\\s*(?!none|transparent)[^;"')]+`,"gi"),`stroke:${HA}`),N.match(/\bstroke-width\s*=/i)?N=N.replace(/\bstroke-width\s*=\s*["'][^"']*["']/gi,`stroke-width="${QA}"`):N=N.replace(/<(path|circle|rect|ellipse|polygon|polyline)/gi,`<$1 stroke-width="${QA}"`),N=N.replace(/stroke-width\s*:\s*[^;"')]+/gi,`stroke-width:${QA}`),N.match(/\bstroke-opacity\s*=/i)?N=N.replace(/\bstroke-opacity\s*=\s*["'][^"']*["']/gi,`stroke-opacity="${wA}"`):N=N.replace(/<(path|circle|rect|ellipse|polygon|polyline)/gi,`<$1 stroke-opacity="${wA}"`),N=N.replace(/stroke-opacity\s*:\s*[^;"')]+/gi,`stroke-opacity:${wA}`),U.lineCap&&(N=N.replace(/\bstroke-linecap\s*=\s*["'][^"']*["']/gi,`stroke-linecap="${U.lineCap}"`),N=N.replace(/stroke-linecap\s*:\s*[^;"')]+/gi,`stroke-linecap:${U.lineCap}`)),U.lineJoin&&(N=N.replace(/\bstroke-linejoin\s*=\s*["'][^"']*["']/gi,`stroke-linejoin="${U.lineJoin}"`),N=N.replace(/stroke-linejoin\s*:\s*[^;"')]+/gi,`stroke-linejoin:${U.lineJoin}`));const GA=U.trimStart??0,EA=U.trimEnd??1,FA=U.trimOffset??0,aA=U.dashOffset??0,W=GA!==0||EA!==1||FA!==0||aA!==0;if(W){const AA=Math.max(0,Math.min(1,GA)),hA=Math.max(0,Math.min(1,EA));this.frameCount%600===0&&this.debugLog(`SVG Trim - Object: ${I.name||I.id}, Start: ${AA}, End: ${hA}`);let QI=Q.width||i||100,rI=Q.height||D||100;const WI=m.match(/viewBox=["']\s*0\s+0\s+([\d.]+)\s+([\d.]+)\s*["']/i);if(WI){const NI=parseFloat(WI[1]),nI=parseFloat(WI[2]);!isNaN(NI)&&!isNaN(nI)&&(QI=NI,rI=nI)}const kI=(QI+rI)*2,ZI=(FA%1+1)%1,DI=(aA%1+1)%1;let BI="",wI=0;if(AA>=hA)BI=`0 ${kI}`,wI=0;else{const NI=kI*(hA-AA),nI=kI-NI;wI=-(kI*(AA+ZI+DI)),BI=`${NI} ${nI}`}N.match(/\bstroke-dasharray\s*=/i)?N=N.replace(/\bstroke-dasharray\s*=\s*["'][^"']*["']/gi,`stroke-dasharray="${BI}"`):N=N.replace(/<(path|circle|rect|ellipse|polygon|polyline)/gi,`<$1 stroke-dasharray="${BI}"`),N=N.replace(/stroke-dasharray\s*:\s*[^;"')]+/gi,`stroke-dasharray:${BI}`),N.match(/\bstroke-dashoffset\s*=/i)?N=N.replace(/\bstroke-dashoffset\s*=\s*["'][^"']*["']/gi,`stroke-dashoffset="${wI}"`):N=N.replace(/<(path|circle|rect|ellipse|polygon|polyline)/gi,`<$1 stroke-dashoffset="${wI}"`),N=N.replace(/stroke-dashoffset\s*:\s*[^;"')]+/gi,`stroke-dashoffset:${wI}`)}else if(U.dashArray&&U.dashArray.length>0){const AA=U.dashArray.join(" ");N=N.replace(/\bstroke-dasharray\s*=\s*["'][^"']*["']/gi,`stroke-dasharray="${AA}"`),N=N.replace(/stroke-dasharray\s*:\s*[^;"')]+/gi,`stroke-dasharray:${AA}`),U.dashOffset&&(N=N.replace(/\bstroke-dashoffset\s*=\s*["'][^"']*["']/gi,`stroke-dashoffset="${U.dashOffset}"`),N=N.replace(/stroke-dashoffset\s*:\s*[^;"')]+/gi,`stroke-dashoffset:${U.dashOffset}`))}if(!/\bstroke\s*=\s*["']/i.test(m)&&!new RegExp("(?<![a-z-])stroke\\s*:","i").test(m)){let AA="",hA="";if(W){const kI=Q.width||i||100,ZI=Q.height||D||100,DI=(kI+ZI)*2,BI=Math.max(0,Math.min(1,GA)),wI=Math.max(0,Math.min(1,EA)),NI=(FA%1+1)%1,nI=(aA%1+1)%1;if(BI>=wI)AA=` stroke-dasharray="0 ${DI}"`,hA=' stroke-dashoffset="0"';else{const WQ=DI*(wI-BI),Ci=DI-WQ,Qi=-(DI*(BI+NI+nI));AA=` stroke-dasharray="${WQ} ${Ci}"`,hA=` stroke-dashoffset="${Qi}"`}}else(tA=U.dashArray)!=null&&tA.length&&(AA=` stroke-dasharray="${U.dashArray.join(" ")}"`,U.dashOffset&&(hA=` stroke-dashoffset="${U.dashOffset}"`));const QI=U.lineCap?` stroke-linecap="${U.lineCap}"`:"",rI=U.lineJoin?` stroke-linejoin="${U.lineJoin}"`:"",WI=`stroke="${HA}" stroke-width="${QA}" stroke-opacity="${wA}"${QI}${rI}${AA}${hA}`;N=N.replace(/(<svg[^>]*>)(\s*(?:<defs>[\s\S]*?<\/defs>)?)/i,(kI,ZI,DI)=>`${ZI}${DI}<g ${WI}>`),N=N.replace(/<\/svg>/i,"</g></svg>")}}else U&&U.isEnabled===!1&&(N=N.replace(/\bstroke\s*=\s*["'][^"']*["']/gi,'stroke="none"'),N=N.replace(new RegExp(`(?<![a-z-])stroke\\s*:\\s*(?!none|transparent)[^;"')]+`,"gi"),"stroke:none"));const DA=new Blob([N],{type:"image/svg+xml"}),cA=URL.createObjectURL(DA);nA.onload=()=>{if(URL.revokeObjectURL(cA),this.frameCount%900===0){const QA=this.imageCache.get(MA);QA&&this.debugLog(`SVG Payload Ready: ${I.name||I.id} (${QA.naturalWidth}x${QA.naturalHeight})`)}},nA.onerror=()=>{URL.revokeObjectURL(cA),this.debugLog(`SVG Error: Failed to load payload for ${I.name||I.id}`)},nA.src=cA,this.imageCache.set(MA,nA)}let BA=null;if(nA.complete&&nA.naturalWidth>0?(BA=nA,this.lastValidSvgImgMap.set(I.id,nA)):BA=this.lastValidSvgImgMap.get(I.id)||null,BA&&BA.complete&&BA.naturalWidth>0){const N=Math.max(1,i),H=Math.max(1,D);if(z&&(p==null?void 0:p.type)==="Solid"){this.maskBuffer||(this.maskBuffer=document.createElement("canvas"),this.maskCtx=this.maskBuffer.getContext("2d")),this.maskBuffer.width=N,this.maskBuffer.height=H,this.maskCtx.setTransform(1,0,0,1,0,0),this.maskCtx.globalCompositeOperation="source-over",this.maskCtx.globalAlpha=1,this.maskCtx.filter="none",this.maskCtx.clearRect(0,0,N,H),this.maskCtx.drawImage(BA,0,0,N,H),this.maskCtx.globalCompositeOperation="source-in";const d=p.color||"#000000",DA=this.normalizeOpacity(p.opacity??100);this.maskCtx.fillStyle=d,this.maskCtx.globalAlpha=DA,this.maskCtx.fillRect(0,0,N,H),A.drawImage(this.maskBuffer,-N/2,-H/2,N,H)}else s!==0?(A.save(),this.drawRoundRect(A,-N/2,-H/2,N,H,s),A.clip(),A.drawImage(BA,-N/2,-H/2,N,H),A.restore()):A.drawImage(BA,-N/2,-H/2,N,H)}}}else if(h.type==="LineGraph")this.renderLineGraph(A,h,i,D);else if(I.type==="Shape"){if(this.applyPath(A,h,i,D,s),A.save(),E.blur&&E.blur.amount>0&&(A.filter=`blur(${E.blur.amount}px)`),E.fill){const m=A.globalAlpha,V=this.createCanvasFill(A,E.fill,i,D);V?A.fillStyle=V:A.fillStyle=typeof E.fill=="string"?E.fill:E.fill.color||"transparent",A.globalAlpha=m*this.normalizeOpacity(E.fill.opacity??100),this.applyPath(A,h,i,D,s),A.fill(),A.globalAlpha=m}A.restore(),E.stroke&&E.stroke.width>0&&this.applyStrokeAlignment(A,E,h,i,D,s)}else if(I.type==="Frame"||I.type==="Group"&&!I.isStructuralGroup){const m=g.width??Q.width??I.width??i,V=g.height??Q.height??I.height??D,p=s;if(A.save(),A.beginPath(),this.drawRoundRect(A,-m/2,-V/2,m,V,p),E.fill&&E.fill.type!=="None"){const U=A.globalAlpha,x=this.createCanvasFill(A,E.fill,m,V);A.fillStyle=x||E.fill.color||"transparent",A.globalAlpha=U*this.normalizeOpacity(E.fill.opacity??100),A.fill(),A.globalAlpha=U}if(A.restore(),E.stroke&&E.stroke.width>0&&E.stroke.isEnabled!==!1){const U={type:"Rectangle"};this.applyStrokeAlignment(A,E,U,m,V,p)}}else I.type==="Group"&&I.isStructuralGroup||(I.type==="Component"&&I.variant==="inputbox"?this.renderInputBox(A,I):I.type==="Component"&&I.variant==="button"?this.renderButton(A,I):I.type==="Component"&&I.variant==="toggle_button"?this.renderToggleButton(A,I):I.type==="Toggle"||I.type==="Component"&&I.variant==="toggle"?this.renderToggle(A,I):I.type==="Slider"||I.type==="Component"&&I.variant==="slider"?this.renderSlider(A,I):I.type==="Dropdown"||I.type==="Component"&&I.variant==="dropdown"?this.renderDropdown(A,I):(I.type==="ListView"||I.type==="Component"&&I.variant==="listview")&&this.renderListView(A,I));if(IA&&A.restore(),f&&f.enabled&&A.restore(),I.children&&I.children.length>0){const V=I.type==="Frame",p=I.clipsContent!==void 0?I.clipsContent:I.clipContent!==void 0?I.clipContent:V;if(A.save(),p){A.beginPath();const x=g.width??(Q==null?void 0:Q.width)??I.width??0,z=g.height??(Q==null?void 0:Q.height)??I.height??0,KA=g.cornerRadius??(Q==null?void 0:Q.corner_radius)??I.cornerRadius??0;this.drawRoundRect(A,-x/2,-z/2,x,z,KA),A.clip()}let U=0;for(I.children.forEach(x=>{const z=C.get(x);if(!z)return;const KA=this.objectStates.get(x),kA=(KA==null?void 0:KA.geometry)||z.geometry;if(kA&&kA.isMask&&(KA==null?void 0:KA.visible)!==!1){const MA=kA.width||0,nA=kA.height||0;this.applyObjectTransform(A,x);const BA=(KA==null?void 0:KA.corner_radius)??(kA==null?void 0:kA.corner_radius)??0;this.applyPath(A,kA,MA,nA,BA),A.clip(),U++}else this.renderObject(A,z,C)});U>0;)A.restore(),U--;A.restore()}if(l){this.maskCtx.restore(),(g.masks||(I.maskedBy?[{maskId:I.maskedBy,inverted:I.maskInverted===!0,type:I.maskType||"alpha",opacity:I.maskOpacity!==void 0?I.maskOpacity/100:1,feather:I.maskFeather||0,isVisible:!0}]:[])).filter(U=>U.isVisible!==!1&&C.has(U.maskId)).forEach(U=>{const x=C.get(U.maskId),z=this.objectStates.get(x.id),KA=U.feather||0,kA=U.inverted===!0,MA=U.opacity!==void 0?typeof U.opacity=="number"?U.opacity:U.opacity/100:1;if((U.type||"alpha")==="luma"){(!this.lumaBuffer||this.lumaBuffer.width!==this.maskBuffer.width||this.lumaBuffer.height!==this.maskBuffer.height)&&(this.lumaBuffer=document.createElement("canvas"),this.lumaBuffer.width=this.maskBuffer.width,this.lumaBuffer.height=this.maskBuffer.height,this.lumaCtx=this.lumaBuffer.getContext("2d",{willReadFrequently:!0}),this.lumaCtx&&(this.lumaCtx.imageSmoothingEnabled=!0,this.lumaCtx.imageSmoothingQuality="high")),this.lumaCtx.setTransform(1,0,0,1,0,0),this.lumaCtx.globalCompositeOperation="source-over",this.lumaCtx.globalAlpha=1,this.lumaCtx.filter="none",this.lumaCtx.clearRect(0,0,this.lumaBuffer.width,this.lumaBuffer.height),this.lumaCtx.save(),this.rootTransform&&this.lumaCtx.setTransform(this.rootTransform),this.applyAbsoluteTransform(this.lumaCtx,x.id,C),KA>0&&(this.lumaCtx.filter=`blur(${KA}px)`),this.lumaCtx.globalAlpha=MA;const BA=(z==null?void 0:z.width)||x.geometry.width||0,N=(z==null?void 0:z.height)||x.geometry.height||0,H=(z==null?void 0:z.corner_radius)??x.corner_radius??0;if(x.geometry.type==="Text"){const QA=z!=null&&z.geometry?this.deepMerge(x.geometry,z.geometry):x.geometry,wA=z!=null&&z.style?this.deepMerge(x.style,z.style):x.style;this._renderText(this.lumaCtx,x,{...QA,width:BA,height:N,corner_radius:H},wA,z,BA,N,!0)}else if(x.geometry.type==="Image"){const QA=x.geometry.src;if(QA){let wA=this.imageCache.get(QA);wA||(wA=new Image,wA.src=QA,this.imageCache.set(QA,wA)),wA.complete&&wA.naturalWidth>0?this.lumaCtx.drawImage(wA,-BA/2,-N/2,BA,N):(this.applyPath(this.lumaCtx,x.geometry,BA,N,H),this.lumaCtx.fillStyle="#ffffff",this.lumaCtx.fill())}}else if(x.geometry.type==="SVG"){const QA=x.geometry.svgContent;if(QA){const wA=`__lumamask_${x.id}`;let rA=this.imageCache.get(wA);if(!rA){rA=new Image;const HA=new Blob([QA],{type:"image/svg+xml"});rA.src=URL.createObjectURL(HA),rA.onload=()=>{this.artboard&&this.reset()},this.imageCache.set(wA,rA)}rA.complete&&rA.naturalWidth>0?this.lumaCtx.drawImage(rA,-BA/2,-N/2,BA,N):(this.applyPath(this.lumaCtx,x.geometry,BA,N,H),this.lumaCtx.fillStyle="#ffffff",this.lumaCtx.fill())}}else this.applyPath(this.lumaCtx,x.geometry,BA,N,H),this.lumaCtx.fillStyle="#ffffff",this.lumaCtx.fill();this.lumaCtx.restore();const d=this.maskCtx.getImageData(0,0,this.canvasWidth,this.canvasHeight),DA=this.lumaCtx.getImageData(0,0,this.canvasWidth,this.canvasHeight).data,cA=d.data;for(let QA=0;QA<cA.length;QA+=4){const wA=DA[QA],rA=DA[QA+1],HA=DA[QA+2];let NA=(.299*wA+.587*rA+.114*HA)/255;kA&&(NA=1-NA),cA[QA+3]*=NA}this.maskCtx.putImageData(d,0,0)}else{this.maskCtx.save(),this.rootTransform&&this.maskCtx.setTransform(this.rootTransform),this.maskCtx.globalCompositeOperation=kA?"destination-out":"destination-in",KA>0&&(this.maskCtx.filter=`blur(${KA}px)`),this.maskCtx.globalAlpha=MA,this.applyAbsoluteTransform(this.maskCtx,x.id,C);const BA=(z==null?void 0:z.width)||x.geometry.width||0,N=(z==null?void 0:z.height)||x.geometry.height||0,H=(z==null?void 0:z.corner_radius)??x.corner_radius??0;if(x.geometry.type==="Text"){const d=z!=null&&z.geometry?this.deepMerge(x.geometry,z.geometry):x.geometry,DA=z!=null&&z.style?this.deepMerge(x.style,z.style):x.style;this._renderText(this.maskCtx,x,{...d,width:BA,height:N,corner_radius:H},DA,z,BA,N,!0)}else if(x.geometry.type==="Image"){const d=x.geometry.src;if(d){let DA=this.imageCache.get(d);DA||(DA=new Image,DA.src=d,this.imageCache.set(d,DA)),DA.complete&&DA.naturalWidth>0?this.maskCtx.drawImage(DA,-BA/2,-N/2,BA,N):(this.applyPath(this.maskCtx,x.geometry,BA,N,H),this.maskCtx.fillStyle="#ffffff",this.maskCtx.fill())}}else if(x.geometry.type==="SVG"){const d=x.geometry.svgContent;if(d){const DA=`__alphamask_${x.id}`;let cA=this.imageCache.get(DA);if(!cA){cA=new Image;const QA=new Blob([d],{type:"image/svg+xml"});cA.src=URL.createObjectURL(QA),cA.onload=()=>{this.artboard&&this.reset()},this.imageCache.set(DA,cA)}cA.complete&&cA.naturalWidth>0?this.maskCtx.drawImage(cA,-BA/2,-N/2,BA,N):(this.applyPath(this.maskCtx,x.geometry,BA,N,H),this.maskCtx.fillStyle="#ffffff",this.maskCtx.fill())}}else this.applyPath(this.maskCtx,x.geometry,BA,N,H),this.maskCtx.fillStyle="#ffffff",this.maskCtx.fill();this.maskCtx.restore()}}),Y.save(),Y.setTransform(1,0,0,1,0,0);const p=I.maskBlendMode||I.blendMode;p&&p!=="Normal"&&(Y.globalCompositeOperation=p.toLowerCase()),Y.drawImage(this.maskBuffer,0,0),Y.restore(),Y.restore()}else A.restore()}_renderText(A,I,C,g,Q,E,i,D=!1,o=!1){var iA,j;let s=C.text||"";if(C.textInputId&&!D){const L=this.inputs.get(C.textInputId);L!==void 0&&(s=String(L),Q.geometry&&Q.geometry.type==="Text"&&(Q.geometry.text=s))}let h=s||"";if(C.segments&&Array.isArray(C.segments)){const L=C.segments.map(v=>v&&v.text?v.text:"").join("");L!==h&&L.toUpperCase()===(s||"").toUpperCase()?h=s||"":h=L}let a=((iA=C.fontWeight)==null?void 0:iA.toString())||"400",G="normal";a.toLowerCase().includes("italic")&&(G="italic",a=a.replace(/italic/gi,"").trim()||"400");const K=this.mapFontWeight(a),t=Math.max(1,C.fontSize||16);let S=C.fontFamily||"Inter";const y=["Bold","SemiBold","Medium","Regular","Light","Thin","ExtraBold","Black","Italic"];y.forEach(L=>{const v=new RegExp(`[\\s-]${L}$`,"i");v.test(S)&&(S=S.replace(v,"").trim())}),A.font=`${G} ${K} ${t}px "${S}", sans-serif`;const F=C.textVerticalAlign||"top";A.textBaseline="top";const M=C.textAlign||"left";A.textAlign=M;const e=C.letterSpacing||0,R=C.paragraphSpacing||0,T=(C.lineHeight||1.2)*t,b=Math.ceil(C.width||E||200)+.5,Y=`${G} ${K} ${t}px "${S}", sans-serif`,P=L=>{if(e===0)return A.measureText(L).width;let v=0;for(let CA=0;CA<L.length;CA++)v+=A.measureText(L[CA]).width+e;return v-e},l=`${h}|${Y}|${e}|${R}`;let r=this.pretextCache.get(l);if(!r&&(r=SE(h,Y),this.pretextCache.set(l,r),this.pretextCache.size>1e3)){const L=this.pretextCache.keys().next().value;L&&this.pretextCache.delete(L)}const u=r?eE(r,b,T):{height:0,lines:[]},gA=(u==null?void 0:u.height)??0,$=(u==null?void 0:u.lines)??[];let f=gA;const _=this.getFontLeadingFactor(C.fontFamily||"Inter"),IA=(T-t)*_;let O=Math.round(-f/2);i>0&&(F==="top"?O=Math.round(-i/2):F==="middle"||F==="center"?O=Math.round(-f/2):F==="bottom"&&(O=Math.round(i/2-f))),O+=IA;let q=null,n=0;if(C.pathId&&this.artboard){const L=this.artboard.objects.find(v=>v.id===C.pathId);if(L&&L.type==="Shape"&&((j=L.geometry)==null?void 0:j.type)==="Path"){const v=this.objectStates.get(L.id),CA=v!=null&&v.geometry?this.deepMerge(L.geometry,v.geometry):L.geometry,oA=(v==null?void 0:v.scale_x)!==void 0?(L.width||0)*v.scale_x:L.width||0,tA=(v==null?void 0:v.scale_y)!==void 0?(L.height||0)*v.scale_y:L.height||0;q={geo:CA,obj:L,w:oA,h:tA},n=this.getPerimeter(CA,oA,tA)}}const Z=(L,v,CA,oA,tA)=>{var V,p,U;const m=(!D||o)&&(I.behaviors||[]).some(x=>x.enabled&&(x.type.toString().includes("Text")||["Typewriter","Scramble","Wave","Bounce","GlitchText","Reveal3D","RevealSlide","RevealBlur"].includes(x.type)));if(!C.pathId&&e===0&&!m&&(C.enableSegments!==!0||!C.segments||C.segments.length===0))oA?A.strokeText(L,v,CA):A.fillText(L,v,CA);else{const x=P(L);let z=v;M==="center"?z-=x/2:M==="right"&&(z-=x);let KA=C.pathOffset||0;C.pathId&&n>0&&q&&(M==="center"?KA+=n/2-x/2:M==="right"&&(KA+=n-x));let kA=z;const MA=D&&!o?[]:((V=I.behaviors)==null?void 0:V.filter(nA=>[X.Typewriter,X.Scramble,X.Wave,X.Bounce,X.GlitchText,X.TextTrail,X.Reveal3D,X.RevealSlide,X.RevealBlur,X.TextLiquid,X.TextVortex,X.TextExplosion,X.TextRain,X.TextGravity,X.TextElastic,X.TextMatrix,X.TextNeon,X.TextGlitch3D,X.TextDissolve,X.TextOrganic,X.TextBreathe,X.TextFloral,X.TextSmoke,X.TextVariable,X.TextMagnet,X.TextSpin,X.TextZing,X.TextPerspective,X.TextMirror].includes(nA.type)&&nA.enabled))||[];for(let nA=0;nA<L.length;nA++){let BA=L[nA];const N=tA+nA;let H=0,d=0,DA=1,cA=1,QA=0,wA=1,rA=BA;if(MA.forEach(GA=>{const EA=GA.settings||{},FA=EA.strength||1,aA=Date.now();if(GA.type===X.Typewriter)this.currentTime*(EA.speed||1)-N*(EA.stagger||.05)<0&&(wA=0);else if(GA.type===X.Scramble)Math.max(0,Math.min(1,this.currentTime/(EA.duration||1.5))-N*.02)<1&&Math.random()<.3&&(rA="$%#@!*&"[Math.floor(Math.random()*7)]);else if(GA.type===X.Wave)d+=Math.sin(this.currentTime*5*(EA.speed||1)+N*(EA.frequency||1))*(EA.amplitude||20)*FA;else if(GA.type===X.Bounce){const W=Math.max(0,this.currentTime%2-N*(EA.stagger||.1));W<1&&(d-=Math.abs(Math.sin(W*Math.PI))*(EA.height||50)*FA)}else if(GA.type===X.TextTrail){const W=this.pointerHistory[Math.max(0,this.pointerHistory.length-1-N*(EA.delay||5))];W&&(H+=(W.x-(Q.x+kA))*FA*.2,d+=(W.y-(Q.y+CA+d))*FA*.2)}else if(GA.type===X.Reveal3D){const W=Math.max(0,Math.min(1,this.currentTime*(EA.speed||1)-N*(EA.stagger||.1)));DA*=W,cA*=W,wA=W}else if(GA.type===X.RevealSlide){const W=Math.max(0,Math.min(1,this.currentTime*1.5-N*.05)),AA=(1-W)*(EA.distance||40)*FA,hA=EA.direction||"up";hA==="up"?d-=AA:hA==="down"?d+=AA:hA==="left"?H-=AA:hA==="right"&&(H+=AA),wA=W}else if(GA.type===X.RevealBlur){const W=Math.max(0,Math.min(1,this.currentTime*1.2-N*.1));wA=W,H+=(1-W)*5}else if(GA.type===X.TextLiquid){const W=Math.max(0,Math.sin(aA*.001*(EA.speed||1)+N*.5));d+=W*(EA.amplitude||10)*FA,cA*=1+W*.2}else if(GA.type===X.TextVortex){const W=aA*.002*(EA.speed||1)+N*.2,AA=(1-(Math.sin(aA*.001)*.5+.5))*(EA.radius||50);H+=Math.cos(W)*AA*FA,d+=Math.sin(W)*AA*FA}else if(GA.type===X.TextExplosion){const W=EA.force||1,AA=this.currentTime%2;if(AA<1){const hA=(N/L.length-.5)*Math.PI*2,QI=AA*100*W;H+=Math.cos(hA)*QI*FA,d+=Math.sin(hA)*QI*FA,wA=1-AA}}else if(GA.type===X.TextRain){const W=EA.speed||1,AA=EA.height||100,hA=(aA*.001*W+N*.1)%1;d-=(1-hA)*AA*FA,wA=hA>.1?1:hA*10}else if(GA.type===X.TextGravity){const W=EA.gravity||9.8,AA=this.currentTime%3/3,hA=.5*W*Math.pow(AA*10,2);hA<100?d+=hA*FA:d+=100*FA}else if(GA.type===X.TextMatrix){const W=EA.speed||1;if(Math.random()<.1*W){const hA="0123456789ABCDEF!@#$%^&*";rA=hA[Math.floor(Math.random()*hA.length)]}wA=.3+(Math.sin(aA*.01*W+N)+1)/2*.7}else if(GA.type===X.TextNeon){const W=Math.random()>.95?.5:1;wA=(.7+(Math.sin(aA*.005)+1)/2*.3)*W}else if(GA.type===X.TextDissolve)Math.sin(N*1.5+aA*.002*(EA.speed||1))>.5&&(wA=0);else if(GA.type===X.TextOrganic){const W=EA.speed||1,AA=EA.amplitude||10;H+=Math.sin(aA*.002*W+N)*AA*FA,d+=Math.cos(aA*.0015*W+N*.7)*AA*FA}else if(GA.type===X.TextBreathe){const AA=1+(Math.sin(aA*.003+N*.2)+1)/2*.2*FA;DA*=AA,cA*=AA}else if(GA.type===X.TextSpin){const W=EA.speed||1;QA+=aA*.01*W+N}else if(GA.type===X.TextMagnet){const W=this.pointerHistory[this.pointerHistory.length-1];if(W){const AA=W.x-(Q.x+kA),hA=W.y-(Q.y+CA);QA=Math.atan2(hA,AA)}}else if(GA.type===X.TextPerspective){const W=L.length/2,AA=(N-W)/W,hA=1-Math.abs(AA)*.3*FA;DA*=hA,cA*=hA,H+=AA*20*FA}else if(GA.type===X.TextMirror)wA*=.8;else if(GA.type===X.TextFloral){const W=EA.speed||1,AA=EA.stagger||.1,hA=(aA*.001*W+N*AA)%2;hA<1&&(DA*=hA,cA*=hA,QA+=hA*Math.PI)}else if(GA.type===X.TextSmoke){const W=EA.speed||1,AA=EA.height||50,hA=(aA*5e-4*W+N*.2)%1;d-=hA*AA*FA,H+=Math.sin(aA*.002+N)*5*FA,wA=1-hA}else if(GA.type===X.TextVariable){const W=EA.speed||1,AA=EA.intensity||1.5,hA=(Math.sin(aA*.004*W+N*.3)+1)/2;DA*=1+hA*(AA-1)*FA}else if(GA.type===X.TextZing){const W=EA.speed||2,AA=EA.distance||100,hA=(aA*.002*W+N*.05)%1;H+=(1-hA)*AA*FA,wA=hA}else if(GA.type===X.TextElastic){const W=EA.stiffness||.2,AA=EA.damping||.1,hA=Math.sin(aA*.01)*Math.exp(-aA*.001*AA);cA*=1+hA*W*FA}else if(GA.type===X.TextGlitch3D){const W=EA.intensity||5;Math.random()<.2&&(H+=(Math.random()-.5)*W,d+=(Math.random()-.5)*W,wA=.8)}else if(GA.type===X.GlitchText){const W=EA.intensity||5;Math.random()<.1&&(H+=(Math.random()-.5)*W,d+=(Math.random()-.5)*W,Math.random()<.05&&(wA=.5))}}),wA<=0){kA+=A.measureText(BA).width+e;continue}if(C.enableSegments===!0&&((p=C.segments)==null?void 0:p.length)>0){let GA=0,EA=null;for(const FA of C.segments){if(N<GA+(FA.text||"").length){EA=FA;break}GA+=(FA.text||"").length}if(EA){let FA=EA.fontFamily||C.fontFamily||"Inter";y.forEach(aA=>{const W=new RegExp(`[\\s-]${aA}$`,"i");W.test(FA)&&(FA=FA.replace(W,"").trim())}),A.font=`${G} ${this.mapFontWeight((EA.fontWeight||C.fontWeight||"400").toString())} ${EA.fontSize||t}px "${FA}", sans-serif`}}const HA=A.globalAlpha;A.globalAlpha*=wA,A.save();const NA=A.measureText(rA).width;if(q&&n>0){const GA=kA-z+NA/2,FA=(KA+GA)/n,aA=this.getPointOnPath(q.geo,q.w,q.h,Math.abs(FA%1)),W=aA.angle,AA=CA+d+(C.pathOffsetY||0),hA=C.pathSide==="right"?-1:1,QI=Math.cos(W+Math.PI/2)*AA*hA,rI=Math.sin(W+Math.PI/2)*AA*hA;A.translate(aA.x+QI+H,aA.y+rI),A.rotate(W+QA+(hA===-1?Math.PI:0))}else A.translate(kA+H+NA/2,CA+d),QA!==0&&A.rotate(QA);if(A.scale(DA,cA),D||o){const GA=o?"#000000":this.createCanvasFill(A,g.fill,E,i);A.fillStyle=GA||g.fill.color||"#ffffff",A.fillText(rA,-NA/2,0)}else oA?A.strokeText(rA,-NA/2,0):A.fillText(rA,-NA/2,0);A.restore(),A.globalAlpha=HA,C.enableSegments===!0&&((U=C.segments)==null?void 0:U.length)>0&&(A.font=`${G} ${this.mapFontWeight((C.fontWeight||"400").toString())} ${t}px "${C.fontFamily||"Inter"}", sans-serif`),kA+=A.measureText(BA).width+e}}};if(D){let L=0,v=O;($||[]).forEach(CA=>{let oA=-E/2;M==="center"?oA=0:M==="right"&&(oA=E/2),Z(CA.text,oA,v,!1,L),L+=(CA.text||"").length+1,v+=T})}else if(o){let L=0,v=O;($||[]).forEach(CA=>{let oA=-E/2;M==="center"?oA=0:M==="right"&&(oA=E/2),Z(CA.text,oA,v,!1,L),L+=(CA.text||"").length+1,v+=T})}else{if(g.fill){const L=A.globalAlpha,v=this.createCanvasFill(A,g.fill,E,i);A.fillStyle=v||g.fill.color||"#000000",A.globalAlpha=L*this.normalizeOpacity(g.fill.opacity??100);let CA=0,oA=O;($||[]).forEach(tA=>{let m=Math.round(-E/2);M==="center"?m=0:M==="right"&&(m=Math.round(E/2)),Z(tA.text,m,oA,!1,CA),CA+=(tA.text||"").length+1,oA+=T}),A.globalAlpha=L}if(g.stroke&&g.stroke.width>0){const L=A.globalAlpha;g.fill&&g.fill.type!=="None"&&g.fill.isEnabled!==!1&&g.fill.opacity!==0&&g.fill.color!=="transparent"&&g.fill.color!=="rgba(0,0,0,0)"&&(A.shadowColor="transparent",A.shadowBlur=0,A.shadowOffsetX=0,A.shadowOffsetY=0),A.strokeStyle=g.stroke.color,A.lineWidth=g.stroke.width,A.globalAlpha=L*this.normalizeOpacity(g.stroke.opacity??100);let CA=0,oA=O;($||[]).forEach(tA=>{let m=Math.round(-E/2);M==="center"?m=0:M==="right"&&(m=Math.round(E/2)),Z(tA.text,m,oA,!0,CA),CA+=(tA.text||"").length+1,oA+=T}),A.globalAlpha=L}}}applyStrokeAlignment(A,I,C,g,Q,E){if(!I.stroke||I.stroke.width<=0||I.stroke.isEnabled===!1)return;const i=I.stroke,D=i.width,o=(i.alignment||"center").toLowerCase();if(A.save(),I.fill&&I.fill.type!=="None"&&I.fill.isEnabled!==!1&&I.fill.opacity!==0&&I.fill.color!=="transparent"&&I.fill.color!=="rgba(0,0,0,0)"&&(A.shadowColor="transparent",A.shadowBlur=0,A.shadowOffsetX=0,A.shadowOffsetY=0),i.fill){const y=this.createCanvasFill(A,i.fill,g,Q);y?A.strokeStyle=y:A.strokeStyle=i.color||"#000000"}else A.strokeStyle=i.color||"#000000";const h=A.globalAlpha;A.globalAlpha=h*this.normalizeOpacity(i.opacity??100),A.lineWidth=D,A.lineCap=i.lineCap||"round",A.lineJoin=i.lineJoin||"round",i.miterLimit!==void 0&&(A.miterLimit=i.miterLimit);const a=i.trimStart??0,G=i.trimEnd??1,K=i.trimOffset??0,t=i.dashOffset??0,S=i.dashArray||[];if(a!==0||G!==1||K!==0){const y=this.getPerimeter(C,g,Q);if(y>0){const F=Math.max(0,Math.min(1,a)),M=Math.max(0,Math.min(1,G));if(F<M){const e=y*(M-F),R=y-e,T=-(y*(F+K%1+t%1));A.setLineDash([e,R]),A.lineDashOffset=T}else A.setLineDash([0,y])}}else S.length>0&&(A.setLineDash(S),A.lineDashOffset=t);C.type==="Line"||g===0||Q===0?(this.applyPath(A,C,g,Q,E),A.stroke()):o==="inside"?(A.lineWidth=D*2,A.save(),this.applyPath(A,C,g,Q,E),A.clip(),A.stroke(),A.restore()):o==="outside"?(A.lineWidth=D*2,this.applyPath(A,C,g,Q,E),A.stroke(),A.save(),A.globalCompositeOperation="destination-out",this.applyPath(A,C,g,Q,E),A.fill(),A.restore()):(A.lineWidth=D,this.applyPath(A,C,g,Q,E),A.stroke()),A.restore()}getPerimeter(A,I,C){switch(A.type){case"Rectangle":return(I+C)*2;case"Ellipse":{const g=I/2,Q=C/2,E=Math.abs(A.sweepAngle??360),i=A.ratio||0,D=Math.PI*(3*(g+Q)-Math.sqrt((3*g+Q)*(g+3*Q)));if(E>=360&&i<=0)return D;let o=E/360*D;if(i>0){const s=Math.PI*(3*(g*i+Q*i)-Math.sqrt((3*g*i+Q*i)*(g*i+3*Q*i)));o+=E/360*s,E<360&&(o+=2*Math.sqrt((g-g*i)**2+(Q-Q*i)**2))}else E<360&&(o+=g+Q);return o}case"Line":return A.length||Math.sqrt(I*I+C*C);case"Triangle":return I+Math.sqrt((I/2)**2+C**2)*2;case"Polygon":{const g=A.sides||3,Q=A.radius||Math.min(I,C)/2;return 2*g*Q*Math.sin(Math.PI/g)}case"Star":{const g=A.points||5,Q=A.outer_radius||Math.min(I,C)/2,E=A.inner_radius||Q/2,i=Math.PI/g;return Math.sqrt(Q*Q+E*E-2*Q*E*Math.cos(i))*g*2}case"Path":{const g=A.points||[];if(g.length<2)return A.length||0;let Q=0;for(let E=1;E<g.length;E++){const i=g[E-1],D=g[E];if(i.out_x!==void 0||D.in_x!==void 0)Q+=this.getBezierLength(i.x,i.y,i.out_x??i.x,i.out_y??i.y,D.in_x??D.x,D.in_y??D.y,D.x,D.y);else{const o=D.x-i.x,s=D.y-i.y;Q+=Math.sqrt(o*o+s*s)}}if(A.is_closed){const E=g[g.length-1],i=g[0];if(E.out_x!==void 0||i.in_x!==void 0)Q+=this.getBezierLength(E.x,E.y,E.out_x??E.x,E.out_y??E.y,i.in_x??i.x,i.in_y??i.y,i.x,i.y);else{const D=i.x-E.x,o=i.y-E.y;Q+=Math.sqrt(D*D+o*o)}}return Q}default:return(I+C)*2}}getBezierLength(A,I,C,g,Q,E,i,D,o=10){let s=0,h=A,a=I;for(let G=1;G<=o;G++){const K=G/o,t=1-K,S=K*K,y=t*t,F=y*t,M=S*K,e=F*A+3*y*K*C+3*t*S*Q+M*i,R=F*I+3*y*K*g+3*t*S*E+M*D,T=e-h,b=R-a;s+=Math.sqrt(T*T+b*b),h=e,a=R}return s}getBezierTAtLength(A,I,C,g,Q,E,i,D,o,s=20){if(A<=0)return 0;let h=0,a=I,G=C;for(let K=1;K<=s;K++){const t=K/s,S=1-t,y=t*t,F=S*S,M=F*S,e=y*t,R=M*I+3*F*t*g+3*S*y*E+e*D,T=M*C+3*F*t*Q+3*S*y*i+e*o,b=R-a,Y=T-G,P=Math.sqrt(b*b+Y*Y);if(h+P>=A){const l=A-h,r=P===0?0:l/P;return(K-1+r)/s}h+=P,a=R,G=T}return 1}getPointOnPath(A,I,C,g){if(A.type==="Path"){const Q=A.points||[];if(Q.length<2)return{x:0,y:0,angle:0};let E=1/0,i=-1/0,D=1/0,o=-1/0;Q.forEach(S=>{E=Math.min(E,S.x),i=Math.max(i,S.x),D=Math.min(D,S.y),o=Math.max(o,S.y)});const s=(E+i)/2,h=(D+o)/2,G=this.getPerimeter(A,I,C)*g;let K=0;const t=[];for(let S=1;S<Q.length;S++)t.push({p0:Q[S-1],p1:Q[S]});A.is_closed&&t.push({p0:Q[Q.length-1],p1:Q[0]});for(const S of t){const y=S.p0,F=S.p1;let M=0;const e=y.out_x!==void 0||F.in_x!==void 0;if(e?M=this.getBezierLength(y.x,y.y,y.out_x??y.x,y.out_y??y.y,F.in_x??F.x,F.in_y??F.y,F.x,F.y):M=Math.sqrt((F.x-y.x)**2+(F.y-y.y)**2),K+M>=G||S===t[t.length-1]){let R=0;if(e)return R=this.getBezierTAtLength(G-K,y.x,y.y,y.out_x??y.x,y.out_y??y.y,F.in_x??F.x,F.in_y??F.y,F.x,F.y,20),this.getBezierPointAndAngle(R,y,F,s,h);{R=M===0?0:(G-K)/M;const T=y.x+(F.x-y.x)*R-s,b=y.y+(F.y-y.y)*R-h,Y=Math.atan2(F.y-y.y,F.x-y.x);return{x:T,y:b,angle:Y}}}K+=M}}return{x:0,y:0,angle:0}}getBezierPointAndAngle(A,I,C,g,Q){const E=I.x,i=I.y,D=I.out_x??I.x,o=I.out_y??I.y,s=C.in_x??C.x,h=C.in_y??C.y,a=C.x,G=C.y,K=1-A,t=A*A,S=K*K,y=S*K,F=t*A,M=y*E+3*S*A*D+3*K*t*s+F*a-g,e=y*i+3*S*A*o+3*K*t*h+F*G-Q,R=3*S*(D-E)+6*K*A*(s-D)+3*t*(a-s),T=3*S*(o-i)+6*K*A*(h-o)+3*t*(G-h),b=Math.atan2(T,R);return{x:M,y:e,angle:b}}applyAbsoluteTransform(A,I,C){if(!C.get(I))return;const Q=[];let E=I;for(;E;){Q.unshift(E);const i=C.get(E);E=i==null?void 0:i.parentId}Q.forEach(i=>{this.applyObjectTransform(A,i)})}applyObjectTransform(A,I){const C=this.objectStates.get(I);if(!C)return;A.translate(C.x,C.y),A.rotate(C.rotation*Math.PI/180);const g=(C.scale_x??1)*(C.flip_x===!0?-1:1),Q=(C.scale_y??1)*(C.flip_y===!0?-1:1);A.scale(g,Q)}applyPath(A,I,C,g,Q){A.beginPath(),this._tracePath(A,I,C,g,Q)}_tracePath(A,I,C,g,Q){if(I.type==="Rectangle"||I.type==="Image"){const E=Q!==void 0?Q:I.corner_radius??0;this.drawRoundRect(A,-C/2,-g/2,C,g,E)}else if(I.type==="Line")A.moveTo(-C/2,0),A.lineTo(C/2,0);else if(I.type==="Ellipse"){const{startAngle:E=0,sweepAngle:i=360,ratio:D=0}=I,o=C/2,s=g/2,h=E*Math.PI/180,a=i*Math.PI/180,G=h+a;i>=360&&D<=0?A.ellipse(0,0,o,s,0,0,Math.PI*2):(A.ellipse(0,0,o,s,0,h,G,!1),D>0?A.ellipse(0,0,o*D,s*D,0,G,h,!0):A.lineTo(0,0),A.closePath())}else if(I.type==="Triangle")A.moveTo(0,-g/2),A.lineTo(C/2,g/2),A.lineTo(-C/2,g/2),A.closePath();else if(I.type==="Polygon"){const E=I.sides||3,i=I.radius||Math.min(C,g)/2;for(let D=0;D<E;D++){const o=D*2*Math.PI/E-Math.PI/2,s=i*Math.cos(o),h=i*Math.sin(o);D===0?A.moveTo(s,h):A.lineTo(s,h)}A.closePath()}else if(I.type==="Star"){const E=I.inner_radius||20,i=I.outer_radius||50,D=I.points||5;for(let o=0;o<D*2;o++){const s=o*Math.PI/D-Math.PI/2,h=o%2===0?i:E,a=h*Math.cos(s),G=h*Math.sin(s);o===0?A.moveTo(a,G):A.lineTo(a,G)}A.closePath()}else if((I.type==="Path"||I.type==="Subtract"||I.type==="Union"||I.type==="Intersect"||I.type==="Exclude"||I.type==="BooleanOperation")&&I.points){let E=1/0,i=-1/0,D=1/0,o=-1/0;I.points.forEach(a=>{E=Math.min(E,a.x),i=Math.max(i,a.x),D=Math.min(D,a.y),o=Math.max(o,a.y)});const s=(E+i)/2,h=(D+o)/2;I.points.forEach((a,G)=>{if(G===0)A.moveTo(a.x-s,a.y-h);else{const K=I.points[G-1],t=(K.out_x??K.x)-s,S=(K.out_y??K.y)-h,y=(a.in_x??a.x)-s,F=(a.in_y??a.y)-h;A.bezierCurveTo(t,S,y,F,a.x-s,a.y-h)}}),I.is_closed&&A.closePath()}else if(I.points&&Array.isArray(I.points)){let E=1/0,i=-1/0,D=1/0,o=-1/0;I.points.forEach(a=>{E=Math.min(E,a.x),i=Math.max(i,a.x),D=Math.min(D,a.y),o=Math.max(o,a.y)});const s=(E+i)/2,h=(D+o)/2;I.points.forEach((a,G)=>{if(G===0)A.moveTo(a.x-s,a.y-h);else{const K=I.points[G-1];K.out_x!==void 0||a.in_x!==void 0?A.bezierCurveTo((K.out_x??K.x)-s,(K.out_y??K.y)-h,(a.in_x??a.x)-s,(a.in_y??a.y)-h,a.x-s,a.y-h):A.lineTo(a.x-s,a.y-h)}}),I.is_closed&&A.closePath()}}renderInputBox(A,I){var CA,oA;const C=this.objectStates.get(I.id),g=(C==null?void 0:C.options)||I.options||{},Q=((CA=I.geometry)==null?void 0:CA.width)||250,E=((oA=I.geometry)==null?void 0:oA.height)||45,i=this.focusedId===I.id,D=this.lastHoveredObjectId===I.id,o=g.previewState||"default",s=o!=="default"?o:i?"focused":D?"hovered":"default",h=g.label||{visible:!0,text:"Label"},a=g.helperText||{visible:!1,text:"Helper text"},G=g.leftIcon||{visible:!1},K=g.rightIcon||{visible:!1},t=g.multiline===!0,S=g.corner_radius??8,y=g.corners||{tl:S,tr:S,bl:S,br:S},F=[y.tl,y.tr,y.br,y.bl];let M=g.backgroundColor||"rgba(31, 41, 55, 1)",e=g.borderColor||"rgba(55, 65, 81, 1)",R=g.borderWidth??1.5,T=g.color||"#ffffff",b=g.placeholderColor||"rgba(156, 163, 175, 1)",Y=g.fontSize||14;const P=`${s}Style`,l=g[P];if(l?(l.backgroundColor!==void 0&&(M=l.backgroundColor),l.borderColor!==void 0&&(e=l.borderColor),l.borderWidth!==void 0&&(R=l.borderWidth),l.color!==void 0&&(T=l.color),l.placeholderColor!==void 0&&(b=l.placeholderColor),l.fontSize!==void 0&&(Y=l.fontSize)):s==="focused"?(e=g.focusBorderColor||"rgba(59, 130, 246, 1)",R=Math.max(R,2)):s==="hovered"||s==="hover"?(e=g.hoverBorderColor||e,M=g.hoverBackgroundColor||M):s==="disabled"?(M=g.disabledBackgroundColor||"rgba(31, 41, 55, 0.6)",e=g.disabledBorderColor||"rgba(55, 65, 81, 0.4)"):s==="error"&&(e="rgba(239, 68, 68, 1)",R=Math.max(R,2)),A.beginPath(),this.drawRoundRect(A,-Q/2,-E/2,Q,E,F),A.fillStyle=M,A.fill(),R>0&&(A.strokeStyle=e,A.lineWidth=R,A.stroke(),s==="focused"||s==="focus")){A.save(),A.beginPath();const tA=F.map(m=>m+2);this.drawRoundRect(A,-Q/2-2,-E/2-2,Q+4,E+4,tA),A.strokeStyle="rgba(59, 130, 246, 0.3)",A.lineWidth=2,A.stroke(),A.restore()}const r=(tA,m)=>{if(!tA.visible||!tA.svgPath)return;const V=tA.size||14,p=tA.offset??16,U=tA.color||"#ffffff",x=m?-(Q/2)+p:Q/2-p,z=tA.svgPath;if(A.save(),A.translate(x,0),!z.startsWith("<svg")){const KA=new Path2D(z),kA=V/24;A.scale(kA,kA),A.translate(-12,-12),A.fillStyle=U,A.fill(KA)}A.restore()};r(G,!0),r(K,!1);const u=g.text||"",gA=g.placeholder||"Enter text...",$=!u,f=u||gA,_=$?b:T,IA=Y,O=g.fontFamily||"Inter",q=g.fontWeight||400;A.font=`${q} ${IA}px "${O}", sans-serif`,A.fillStyle=_,A.textAlign="left",A.textBaseline=t?"top":"middle";const n=g.inputPadding??16,Z=G.visible?(G.offset??16)+(G.size||14)/2+8:n,iA=K.visible?(K.offset??16)+(K.size||14)/2+8:n,j=-(Q/2)+Z,L=Q-Z-iA,v=g.inputType==="password"?"•".repeat(f.length):f;if(A.save(),A.beginPath(),A.rect(j-2,-E/2+4,L+4,E-8),A.clip(),t){const tA=v.split(`
|
|
22
|
-
`);let m=-E/2+n;const V=IA*1.2;let p=0;tA.forEach((U,x)=>{const z=U.split(" ");let KA="";for(let kA=0;kA<z.length;kA++){const MA=KA+z[kA]+" ";A.measureText(MA).width>L&&kA>0?(A.fillText(KA,j,m),KA=z[kA]+" ",m+=V):KA=MA}A.fillText(KA,j,m),p=A.measureText(KA).width,x<tA.length-1&&(m+=V,p=0)}),i&&!$&&Math.floor(performance.now()/500)%2===0&&A.fillRect(j+p,m,1.5,IA)}else{const m=A.measureText(v).width;let V=0;if(m>L&&(V=m-L),A.fillText(v,j-V,0),i&&!$&&Math.floor(performance.now()/500)%2===0){const U=j+m-V;A.fillRect(U,-(IA/2),1.5,IA)}}if(A.restore(),h.visible!==!1){const tA=h.text||"Label",m=h.fontSize||12,V=h.color||"rgba(156, 163, 175, 1)",p=h.offset??8;A.font=`600 ${m}px "${O}", sans-serif`,A.fillStyle=V,A.textAlign="left",A.textBaseline="bottom";const U=-(Q/2),x=-(E/2)-p;A.fillText(tA,U,x)}if(a.visible===!0){const tA=a.text||"Helper text",m=a.fontSize||11,V=s==="error"?"rgba(239, 68, 68, 1)":a.color||"rgba(156, 163, 175, 1)",p=a.offset??6;A.font=`400 ${m}px "${O}", sans-serif`,A.fillStyle=V,A.textAlign="left",A.textBaseline="top";const U=-(Q/2),x=E/2+p;A.fillText(tA,U,x)}}renderSlider(A,I){const C=this.objectStates.get(I.id),g=(C==null?void 0:C.geometry)||I.geometry,Q=(C==null?void 0:C.options)||I.options||{},E=g.width||200,i=Q.value??50,D=Q.min??0,s=(Q.max??100)-D,h=s===0?0:(i-D)/s,a=Q.trackHeight||4,G=Q.trackRoundedness??2,K=Q.trackShape??"Rectangle",t=Q.trackPath||"",S=Q.activeColor||"#3b82f6",y=Q.inactiveColor||"#374151",F=Q.thumbShape||"Ellipse",M=Q.thumbWidth??16,e=Q.thumbHeight??16,R=Q.thumbRoundedness??0,T=Q.thumbColor||"#ffffff",b=Q.thumbPath||"",Y=Q.thumbIcon||"",P=Q.showValueTooltip??!1,l=Q.tooltipBgColor||"#333333",r=Q.tooltipColor||"#ffffff",u=Q.tooltipOffsetX??0,gA=Q.tooltipOffsetY??-25,$=(j,L,v,CA,oA,tA,m)=>{if((j==="Custom"||j==="Icon")&&m)try{const V=new Path2D(m);if(A.save(),A.translate(L,v),j==="Icon"){const p=Math.min(CA,oA)/24;A.scale(p,p),A.translate(-12,-12)}A.fill(V),A.restore();return}catch(V){console.error("Error drawing slider shape in engine:",V)}if(A.beginPath(),j==="Ellipse")A.ellipse(L,v,CA/2,oA/2,0,0,Math.PI*2);else if(j==="Rectangle")this.drawRoundRect(A,L-CA/2,v-oA/2,CA,oA,tA);else if(j==="Triangle")A.moveTo(L,v-oA/2),A.lineTo(L+CA/2,v+oA/2),A.lineTo(L-CA/2,v+oA/2),A.closePath();else if(j==="Diamond")A.moveTo(L,v-oA/2),A.lineTo(L+CA/2,v),A.lineTo(L,v+oA/2),A.lineTo(L-CA/2,v),A.closePath();else if(j==="Polygon"){const V=I.geometry.sides||3,p=I.geometry.radius||Math.min(CA,oA)/2;for(let U=0;U<V;U++){const x=U*2*Math.PI/V-Math.PI/2,z=L+p*Math.cos(x),KA=v+p*Math.sin(x);U===0?A.moveTo(z,KA):A.lineTo(z,KA)}A.closePath()}else if(j==="Star"){const p=Math.min(CA,oA)/2,U=p/2;for(let x=0;x<5*2;x++){const z=x%2===0?p:U,KA=x*Math.PI/5-Math.PI/2;A.lineTo(L+z*Math.cos(KA),v+z*Math.sin(KA))}A.closePath()}else j==="Line"&&(A.moveTo(L-CA/2,v),A.lineTo(L+CA/2,v));A.fill()};A.fillStyle=y,K==="Line"?(A.strokeStyle=y,A.lineWidth=a,A.beginPath(),A.moveTo(-E/2,0),A.lineTo(E/2,0),A.stroke()):$(K,0,0,E,a,G,t);const f=E-M,_=-E/2+M/2+h*f,IA=_- -E/2;IA>0&&(A.fillStyle=S,K==="Line"?(A.strokeStyle=S,A.lineWidth=a,A.beginPath(),A.moveTo(-E/2,0),A.lineTo(_,0),A.stroke()):K==="Rectangle"&&(A.beginPath(),this.drawRoundRect(A,-E/2,-a/2,IA,a,G),A.fill())),A.save(),A.translate(_,0);const O=A.getTransform(),q=Math.sqrt(O.a*O.a+O.b*O.b)||1;if(A.shadowColor="rgba(0,0,0,0.2)",A.shadowBlur=4*q,A.shadowOffsetY=1*q,A.fillStyle=T,$(F,0,0,M,e,R,F==="Icon"?Y:b),A.restore(),P){A.save(),A.translate(_+u,gA);const j=Math.round(i).toString();A.font="10px Inter, sans-serif";const L=A.measureText(j),v=6,CA=4,oA=L.width+v*2,tA=14+CA;A.beginPath(),this.drawRoundRect(A,-oA/2,-tA/2,oA,tA,4),A.fillStyle=l,A.fill(),A.fillStyle=r,A.textAlign="center",A.textBaseline="middle",A.fillText(j,0,0),A.restore()}const n=Q.label||{},Z=Q.helperText||{},iA=Q.fontFamily||"Inter";if(n.visible!==!1){const j=n.text||"Label",L=n.fontSize||12,v=n.color||"rgba(156, 163, 175, 1)",CA=n.offset??8;A.font=`600 ${L}px "${iA}", sans-serif`,A.fillStyle=v,A.textAlign="left",A.textBaseline="bottom";const oA=-(E/2),tA=-(a/2)-CA;A.fillText(j,oA,tA)}if(Z.visible===!0){const j=Z.text||"Helper text",L=Z.fontSize||11,v=Z.color||"rgba(156, 163, 175, 1)",CA=Z.offset??6;A.font=`400 ${L}px "${iA}", sans-serif`,A.fillStyle=v,A.textAlign="left",A.textBaseline="top";const oA=-(E/2),tA=a/2+CA;A.fillText(j,oA,tA)}}renderDropdown(A,I){var gA;const C=this.objectStates.get(I.id);if(!C)return;const g=C.options||I.options||{},Q=I.geometry.width||160,E=I.geometry.height||40,i=-Q/2,D=-E/2,o=g.corner_radius??6,s=g.disabled||g.previewState==="disabled",h=this.lastHoveredObjectId===I.id||g.previewState==="hover",a=(g.isOpen||g.previewState==="active")&&!s;let G=g.backgroundColor,K=g.borderColor,t=g.color||"#333333";s?(G=g.disabledBackgroundColor||"#f3f4f6",K=g.disabledBorderColor||"#e5e7eb",t=g.disabledColor||"#9ca3af"):a?(G=g.activeBackgroundColor||G,K=g.activeBorderColor||K,t=g.activeColor||t):h&&(G=g.hoverBackgroundColor||G,K=g.hoverBorderColor||K,t=g.hoverColor||t),G||(G="#ffffff"),K||(K="#e5e7eb");const S=A.globalAlpha;A.globalAlpha=S*(g.opacity??1),this.drawRoundRect(A,i,D,Q,E,o),A.fillStyle=this.createCanvasFill(A,typeof G=="string"?{type:"Solid",color:G}:G,Q,E)||"#ffffff",A.fill();const y=g.borderWidth??1;y>0&&(A.strokeStyle=this.createCanvasFill(A,typeof K=="string"?{type:"Solid",color:K}:K,Q,E)||"#e5e7eb",A.lineWidth=y,A.stroke());const F=12,M=g.chevronType||"chevron",e=g.chevronSize||16,R=(a?g.openIconColor:g.closedIconColor)||g.chevronColor||"#6b7280";if(M!=="none"){const $=i+Q-F-e/2;A.save(),A.translate($,0);const f=a?g.openIconAngle??180:g.closedIconAngle??0;if(A.rotate(f*Math.PI/180),A.strokeStyle=R,A.fillStyle=R,A.lineWidth=1.5,A.lineCap="round",A.lineJoin="round",M==="chevron")A.beginPath(),A.moveTo(-e/2,-e*.2),A.lineTo(0,e*.2),A.lineTo(e/2,-e*.2),A.stroke();else if(M==="custom"||M==="path"){const _=a&&g.openIconPath||g.closedIconPath;if(_){const IA=new Path2D(_);A.save();const O=e/24;A.scale(O,O),A.translate(-12,-12),A.fill(IA),A.restore()}}A.restore()}const T=g.selectedOption||g.placeholder||"Select...",b=g.fontSize||14,Y=g.fontWeight||400,P=g.fontFamily||"Inter, sans-serif";A.font=`${Y} ${b}px ${P}`;const l=s?g.disabledColor||"#9ca3af":!g.selectedOption&&g.placeholder?"#9ca3af":t;A.fillStyle=this.createCanvasFill(A,typeof l=="string"?{type:"Solid",color:l}:l,Q,E)||"#333333",A.textAlign="left",A.textBaseline="middle";const r=M==="none"?0:e+8,u=Q-F*2-r;if(A.save(),A.beginPath(),A.rect(i+F,D,u,E),A.clip(),A.fillText(T,i+F,0),A.restore(),a&&!s){const $=D+E+4,f=g.optionsList||[],_=g.itemHeight||32,IA=g.listPadding??4,O=f.length*_+IA*2,q=g.listCornerRadius??o;A.save();const n=g.listShadow||{},Z=A.getTransform(),iA=Math.sqrt(Z.a*Z.a+Z.b*Z.b)||1;A.shadowColor=typeof n.color=="string"?n.color:((gA=n.color)==null?void 0:gA.color)||"rgba(0,0,0,0.15)",A.shadowBlur=(n.blur??12)*iA,A.shadowOffsetY=(n.offsetY??6)*iA,A.shadowOffsetX=(n.offsetX??0)*iA,A.beginPath(),this.drawRoundRect(A,i,$,Q,O,q),A.fillStyle=this.createCanvasFill(A,typeof g.listBackgroundColor=="string"?{type:"Solid",color:g.listBackgroundColor}:g.listBackgroundColor||{type:"Solid",color:"#ffffff"},Q,O)||"#ffffff",A.fill();const j=g.listBorderWidth??1;j>0&&(A.shadowColor="transparent",A.strokeStyle=this.createCanvasFill(A,typeof g.listBorderColor=="string"?{type:"Solid",color:g.listBorderColor}:g.listBorderColor||{type:"Solid",color:K},Q,O)||"#e5e7eb",A.lineWidth=j,A.stroke()),A.restore();const L=g.itemFontSize||b,v=g.itemFontFamily||P;A.font=`${Y} ${L}px ${v}`,f.forEach((CA,oA)=>{const tA=$+IA+oA*_;if(CA===g.selectedOption)A.fillStyle=this.createCanvasFill(A,typeof g.itemSelectedBackgroundColor=="string"?{type:"Solid",color:g.itemSelectedBackgroundColor}:g.itemSelectedBackgroundColor||{type:"Solid",color:"#f3f4f6"},Q,_)||"#f3f4f6",A.fillRect(i+j,tA,Q-j*2,_),A.fillStyle=g.itemSelectedColor||g.activeColor||t||"#374151";else if(A.fillStyle=g.listTextColor||t||"#333333",this.activeDropdownId===I.id&&this._lastPointerPos){const V=this._lastPointerPos.y-($+IA),p=Math.floor(V/_);oA===p&&(A.fillStyle=this.createCanvasFill(A,typeof g.itemHoverBackgroundColor=="string"?{type:"Solid",color:g.itemHoverBackgroundColor}:g.itemHoverBackgroundColor||{type:"Solid",color:"#f9fafb"},Q,_)||"#f9fafb",A.fillRect(i+j,tA,Q-j*2,_),A.fillStyle=g.itemHoverColor||t)}A.fillText(CA,i+F,tA+_/2)})}A.globalAlpha=S}renderButton(A,I){var M,e,R,T;const C=this.objectStates.get(I.id),g=(C==null?void 0:C.options)||I.options||{},Q=((M=I.geometry)==null?void 0:M.width)||120,E=((e=I.geometry)==null?void 0:e.height)||40,i=-Q/2,D=-E/2,o=this.lastHoveredObjectId===I.id,s=g.corner_radius??8,h=g.bgShape||"Rectangle",a=o?((R=g.hoverStyle)==null?void 0:R.backgroundColor)||g.buttonBgColor||"#3b82f6":g.buttonBgColor||"#3b82f6",G=g.label||{},K=o?((T=g.hoverStyle)==null?void 0:T.textColor)||G.color||"#ffffff":G.color||"#ffffff",t=g.icon||{enabled:!1};A.save(),A.beginPath(),h==="Rectangle"?this.drawRoundRect(A,i,D,Q,E,s):h==="Ellipse"||h==="Circle"?A.ellipse(0,0,Q/2,E/2,0,0,Math.PI*2):h==="Pill"&&this.drawRoundRect(A,i,D,Q,E,E/2),A.fillStyle=a,A.fill();const S=G.fontSize||14,y=G.fontFamily||"Inter";A.font=`${G.fontWeight||400} ${S}px "${y}", sans-serif`,A.fillStyle=K,A.textAlign="center",A.textBaseline="middle";let F=0;if(t.enabled&&t.svgPath){const b=t.size||16,Y=t.gap||8,P=t.position==="left"?-(A.measureText(G.text||"").width/2+b/2+Y/2):A.measureText(G.text||"").width/2+b/2+Y/2;A.save(),A.translate(P,0);const l=new Path2D(t.svgPath),r=b/24;A.scale(r,r),A.translate(-12,-12),A.fillStyle=t.color||K,A.fill(l),A.restore(),F=t.position==="left"?b/2+Y/2:-(b/2+Y/2)}A.fillText(G.text||"Button",F,0),A.restore()}renderToggleButton(A,I){var S,y;const C=this.objectStates.get(I.id),g=(C==null?void 0:C.options)||I.options||{},Q=g.checked??!1,E=((S=I.geometry)==null?void 0:S.width)||120,i=((y=I.geometry)==null?void 0:y.height)||40,D=-E/2,o=-i/2,s=g.corner_radius??8,h=g.label||{},a=Q?g.activeColor||"#3b82f6":g.inactiveColor||"#374151",G=Q?g.activeTextColor||"#ffffff":g.inactiveTextColor||"#9ca3af";A.save(),A.beginPath(),this.drawRoundRect(A,D,o,E,i,s),A.fillStyle=a,A.fill();const K=h.fontSize||14,t=h.fontFamily||"Inter";A.font=`${h.fontWeight||600} ${K}px "${t}", sans-serif`,A.fillStyle=G,A.textAlign="center",A.textBaseline="middle",A.fillText(h.text||"Toggle",0,0),A.restore()}renderToggle(A,I){var F,M;const C=this.objectStates.get(I.id),g=(C==null?void 0:C.options)||I.options||{},Q=((F=I.geometry)==null?void 0:F.width)||52,E=((M=I.geometry)==null?void 0:M.height)||30,i=-Q/2,D=-E/2,o=g.checked??!1,s=g.corner_radius??E/2;A.beginPath(),this.drawRoundRect(A,i,D,Q,E,s),A.fillStyle=o?g.activeColor||"#10b981":g.inactiveColor||"#374151",g.disabled&&(A.globalAlpha*=.5),A.fill();const h=3,a=E-h*2,G=a/2,K=i+h,t=i+Q-h-a,S=o?t:K,y=D+h;if(A.beginPath(),A.arc(S+G,y+G,G,0,Math.PI*2),A.fillStyle=g.knobColor||"#ffffff",A.fill(),g.disabled&&(A.globalAlpha*=2),g.label&&g.label.text){const e=g.label,R=e.fontSize||14,T=e.fontWeight||400,b=e.fontFamily||"Inter";A.font=`${T} ${R}px "${b}", sans-serif`,A.fillStyle=e.color||"#f3f4f6",A.textBaseline="middle";const Y=e.gap||10;let P=0,l=0;e.position==="left"?(A.textAlign="right",P=i-Y,l=0):e.position==="right"?(A.textAlign="left",P=i+Q+Y,l=0):e.position==="top"?(A.textAlign="center",P=0,l=D-Y,A.textBaseline="bottom"):e.position==="bottom"?(A.textAlign="center",P=0,l=D+E+Y,A.textBaseline="top"):(A.textAlign="left",P=i+Q+Y,l=0),A.fillText(e.text,P,l)}}renderLineGraph(A,I,C,g){let Q=I.datasets||[];if((!Q||Q.length===0)&&(I.data||I.graphData)&&(Q=[{id:"line-1",label:"Series 1",data:I.data||I.graphData||[],lineColor:I.lineColor||"#3b82f6",lineWidth:I.lineWidth||2,showArea:I.showArea||!1,areaColor:I.areaColor||"rgba(139, 92, 246, 0.3)",smoothing:I.smoothing||!1,showPoints:I.showPoints!==void 0?I.showPoints:!0,pointSize:I.pointSize||6,pointFill:I.pointFill||"#ffffff",pointStrokeColor:I.pointStrokeColor||I.lineColor||"#3b82f6",pointStrokeWidth:I.pointStrokeWidth||2}]),!Q||Q.length===0||!Q.some(t=>t.data&&t.data.length>=2)){A.save(),A.fillStyle="#6366f1",A.font="12px Inter, system-ui, sans-serif",A.textAlign="center",A.textBaseline="middle",A.fillText("NO DATA",0,0),A.restore();return}let E=1/0,i=-1/0,D=0;if(Q.forEach(t=>{let S=t.data;if(t.isVarEnabled&&t.inputId){let y=this.inputs.get(t.inputId);if(y===void 0){const F=this.inputNameMap.get(t.inputId);F&&F.length>0&&(y=this.inputs.get(F[0]))}y&&Array.isArray(y)&&(S=y)}if(S&&S.length>0){const y=S.filter(F=>typeof F=="number"&&!isNaN(F));y.length>0&&(E=Math.min(E,...y),i=Math.max(i,...y),D=Math.max(D,S.length))}t._resolvedData=S}),D<2)return;const o=i-E,s=C/(D-1),h=t=>{const S=o===0?.5:(t-E)/o;return g/2-S*g},a=t=>t*s-C/2,G=I.axisColor||"#333333";if(I.showXAxis&&(A.beginPath(),A.strokeStyle=I.xAxisColor||G,A.lineWidth=1,A.moveTo(-C/2,g/2),A.lineTo(C/2,g/2),A.stroke()),I.showYAxis&&(A.beginPath(),A.strokeStyle=I.yAxisColor||G,A.lineWidth=1,A.moveTo(-C/2,-g/2),A.lineTo(-C/2,g/2),A.stroke()),A.fillStyle=I.axisLabelColor||"#333333",A.font=`${I.axisLabelFontSize||10}px Inter, sans-serif`,I.showXLabels){A.textAlign="center",A.textBaseline="top";for(let t=0;t<D;t++){const S=a(t);A.fillText(`${t+1}`,S,g/2+5)}}if(I.showYLabels){A.textAlign="right",A.textBaseline="middle";const t=-C/2-5,S=(i+E)/2;A.fillText(i.toFixed(1),t,h(i)),A.fillText(S.toFixed(1),t,h(S)),A.fillText(E.toFixed(1),t,h(E))}const K=10;if(Q.forEach(t=>{const S=t._resolvedData;if(!(!S||S.length<2)){if(t.showArea){if(A.beginPath(),A.moveTo(a(0),g/2),A.lineTo(a(0),h(S[0])),t.smoothing&&S.length>2)for(let F=0;F<S.length-1;F++){const M=S[F===0?F:F-1],e=S[F],R=S[F+1],T=S[F+1===S.length-1?F+1:F+2];for(let b=1;b<=K;b++){const Y=b/K,P=this._catmullRom(M,e,R,T,Y);A.lineTo(a(F+Y),h(P))}}else for(let F=1;F<S.length;F++)A.lineTo(a(F),h(S[F]));A.lineTo(a(S.length-1),g/2),A.closePath();const y=A.globalAlpha;A.globalAlpha=y*(I.areaOpacity??.3),A.fillStyle=t.areaColor||"rgba(139, 92, 246, 0.2)",A.fill(),A.globalAlpha=y}if(A.beginPath(),A.strokeStyle=t.lineColor||"#3b82f6",A.lineWidth=t.lineWidth||2,A.lineJoin="round",A.lineCap="round",A.moveTo(a(0),h(S[0])),t.smoothing&&S.length>2)for(let y=0;y<S.length-1;y++){const F=S[y===0?y:y-1],M=S[y],e=S[y+1],R=S[y+1===S.length-1?y+1:y+2];for(let T=1;T<=K;T++){const b=T/K,Y=this._catmullRom(F,M,e,R,b);A.lineTo(a(y+b),h(Y))}}else for(let y=1;y<S.length;y++)A.lineTo(a(y),h(S[y]));A.stroke(),t.showPoints&&S.forEach((y,F)=>{const M=a(F),e=h(y);A.beginPath(),A.arc(M,e,(t.pointSize||6)/2,0,Math.PI*2),A.fillStyle=t.pointFill||"#ffffff",A.fill(),A.strokeStyle=t.pointStrokeColor||t.lineColor||"#3b82f6",A.lineWidth=t.pointStrokeWidth||1,A.stroke()})}}),I.showLegend&&Q.length>0){const t=C/2-10;let S=-g/2+15;const y=I.legendFontSize||10,F=y+5;A.font=`${y}px Inter, sans-serif`,A.textAlign="right",A.textBaseline="alphabetic",Q.forEach(M=>{const R=M.label||"Series",T=A.measureText(R).width;A.beginPath(),A.rect(t-T-8-5,S-(8/2+2),8,8),A.fillStyle=M.lineColor||"#3b82f6",A.fill(),A.fillStyle=I.legendColor||"#333333",A.fillText(R,t,S),S+=F})}}_catmullRom(A,I,C,g,Q){const E=(C-A)*.5,i=(g-I)*.5,D=Q*Q,o=Q*D;return(2*I-2*C+E+i)*o+(-3*I+3*C-2*E-i)*D+E*Q+I}normalizeOpacity(A){const I=typeof A=="number"?A:parseFloat(String(A));return isNaN(I)?1:I>1?Math.min(1,I/100):Math.max(0,Math.min(1,I))}createCanvasFill(A,I,C,g){var Q,E,i;if(!I||I.type==="None")return null;if(typeof I=="string")return I;if(I.type==="Solid"&&I.color){const D=I.color,s=(((E=(Q=this.artboard)==null?void 0:Q.tokens)==null?void 0:E.colors)||{})[D]||D;return A.fillStyle=s,s}if((I.type==="LinearGradient"||I.type==="RadialGradient"||I.type==="AngularGradient"||I.type==="DiamondGradient")&&I.stops){const D=(o,s=100)=>{var e,R;const a=(((R=(e=this.artboard)==null?void 0:e.tokens)==null?void 0:R.colors)||{})[o]||o,G=this.normalizeOpacity(I.opacity??100),t=this.normalizeOpacity(s)*G;if(t>=1&&a.startsWith("#"))return a;const S=a.startsWith("#")?a.replace("#",""):"ffffff",y=parseInt(S.substring(0,2),16),F=parseInt(S.substring(2,4),16),M=parseInt(S.substring(4,6),16);return`rgba(${y}, ${F}, ${M}, ${t})`};if(I.type==="LinearGradient"){const o=(t,S,y)=>Array.isArray(t)?t[S]??(S===0?0:1):t&&typeof t=="object"?t[y]??(S===0?0:1):S===0?0:1,s=o(I.start,0,"x")*C-C/2,h=o(I.start,1,"y")*g-g/2,a=o(I.end,0,"x")*C-C/2,G=o(I.end,1,"y")*g-g/2,K=A.createLinearGradient(s,h,a,G);if(I.stops.forEach(t=>{const S=t.offset!==void 0?t.offset:t.pos!==void 0?t.pos:t.position!==void 0?t.position:0,y=D(t.color||"#000000",t.opacity??100);K.addColorStop(Math.max(0,Math.min(1,S)),y)}),I.gradientTransform&&K.setTransform){const[t,S,y,F,M,e]=I.gradientTransform;K.setTransform({a:t,b:S,c:y,d:F,e:M,f:e})}return K}else if(I.type==="RadialGradient"){const o=(K,t,S)=>Array.isArray(K)?K[t]??.5:K&&typeof K=="object"?K[S]??.5:.5,s=o(I.center,0,"x")*C-C/2,h=o(I.center,1,"y")*g-g/2,a=(I.radius??.5)*Math.max(C,g),G=A.createRadialGradient(s,h,0,s,h,a);if(I.stops.forEach(K=>{const t=K.offset!==void 0?K.offset:K.pos!==void 0?K.pos:K.position!==void 0?K.position:0,S=D(K.color||"#000000",K.opacity??100);G.addColorStop(Math.max(0,Math.min(1,t)),S)}),I.gradientTransform&&G.setTransform){const[K,t,S,y,F,M]=I.gradientTransform;G.setTransform({a:K,b:t,c:S,d:y,e:F,f:M})}return G}else if(I.type==="AngularGradient"){const o=(K,t,S)=>Array.isArray(K)?K[t]??.5:K&&typeof K=="object"?K[S]??.5:.5,s=o(I.center||[.5,.5],0,"x")*C-C/2,h=o(I.center||[.5,.5],1,"y")*g-g/2,a=(I.degree||I.angle||0)*(Math.PI/180),G=(i=A.createConicGradient)==null?void 0:i.call(A,a,s,h);if(G){if(I.stops.forEach(K=>{const t=K.offset!==void 0?K.offset:K.pos!==void 0?K.pos:K.position!==void 0?K.position:0,S=D(K.color||"#000000",K.opacity??100);G.addColorStop(Math.max(0,Math.min(1,t)),S)}),I.gradientTransform&&G.setTransform){const[K,t,S,y,F,M]=I.gradientTransform;G.setTransform({a:K,b:t,c:S,d:y,e:F,f:M})}return G}}else if(I.type==="DiamondGradient"){const o=(K,t,S)=>Array.isArray(K)?K[t]??.5:K&&typeof K=="object"?K[S]??.5:.5,s=o(I.center||[.5,.5],0,"x")*C-C/2,h=o(I.center||[.5,.5],1,"y")*g-g/2,a=(I.radius??.5)*Math.max(C,g);A.save(),A.translate(s,h),A.rotate(Math.PI/4);const G=A.createRadialGradient(0,0,0,0,0,a);if(I.stops.forEach(K=>{const t=K.offset!==void 0?K.offset:K.pos!==void 0?K.pos:K.position!==void 0?K.position:0,S=D(K.color||"#000000",K.opacity??100);G.addColorStop(Math.max(0,Math.min(1,t)),S)}),I.gradientTransform&&G.setTransform){const[K,t,S,y,F,M]=I.gradientTransform;G.setTransform({a:K,b:t,c:S,d:y,e:F,f:M})}return A.scale(1/Math.SQRT2,1/Math.SQRT2),A.fillStyle=G,A.restore(),G}}if(I.type==="Pattern"&&I.url){let D=this.imageCache.get(I.url);if(D||(D=new Image,D.src=I.url,this.imageCache.set(I.url,D)),D.complete&&D.naturalWidth>0){const o=A.createPattern(D,"repeat");if(o&&(I.scaleX!==void 0||I.offsetX!==void 0)){const s=new DOMMatrix,h=I.scaleX??1,a=I.scaleY??1,G=I.offsetX??0,K=I.offsetY??0,t=I.rotation??0;s.translateSelf(G,K),s.rotateSelf(t),s.scaleSelf(h,a),o.setTransform(s)}return o}}return I.color||null}drawRoundRect(A,I,C,g,Q,E){if(E===0||E===void 0||E===null){A.rect(I,C,g,Q);return}let i=E;if(typeof i=="string")try{i=JSON.parse(i)}catch{i=parseFloat(i)||0}let D=0,o=0,s=0,h=0;typeof i=="number"?D=o=s=h=i:Array.isArray(i)?i.length===1?D=o=s=h=i[0]:i.length===2?(D=s=i[0],o=h=i[1]):i.length===3?(D=i[0],o=h=i[1],s=i[2]):i.length>=4&&(D=i[0],o=i[1],s=i[2],h=i[3]):i&&typeof i=="object"&&(D=i.tl??i.corner_radius??i.cornerRadius??0,o=i.tr??i.corner_radius??i.cornerRadius??0,s=i.br??i.corner_radius??i.cornerRadius??0,h=i.bl??i.corner_radius??i.cornerRadius??0);const a=Math.min(Math.abs(g)/2,Math.abs(Q)/2);if(D=Math.min(Math.max(0,D),a),o=Math.min(Math.max(0,o),a),s=Math.min(Math.max(0,s),a),h=Math.min(Math.max(0,h),a),A.roundRect){A.roundRect(I,C,g,Q,[D,o,s,h]);return}A.moveTo(I+D,C),A.lineTo(I+g-o,C),A.arcTo(I+g,C,I+g,C+o,o),A.lineTo(I+g,C+Q-s),A.arcTo(I+g,C+Q,I+g-s,C+Q,s),A.lineTo(I+h,C+Q),A.arcTo(I,C+Q,I,C+Q-h,h),A.lineTo(I,C+D),A.arcTo(I,C,I+D,C,D),A.closePath()}renderListView(A,I){var $,f,_,IA;const C=this.objectStates.get(I.id)||{},g=C.options||I.options||{},Q=C.width!==void 0?C.width:(($=I.geometry)==null?void 0:$.width)||200,E=C.height!==void 0?C.height:((f=I.geometry)==null?void 0:f.height)||300,i=-Q/2,D=-E/2,o=C.corner_radius!==void 0?C.corner_radius:g.corner_radius??0,s=g.orientation||"vertical",h=g.items||[],a=g.itemGap??10,G=g.itemHeight??50,K=g.itemWidth??200,t=g.scrollOffset??0,S=g.padding??0,y=g.glassEffect!==!1,F=g.accentColor||"#3b82f6",M=g.itemTextColor||"#333333",e=g.itemBackgroundColor||"#ffffff",R=g.hoveredIndex??null,T=g.activeItemIndex??null,b=g.glowIntensity??0,Y=g.glowColor||"#3b82f6",P=typeof Y=="string"?Y:Y.color||((IA=(_=Y.stops)==null?void 0:_[0])==null?void 0:IA.color)||"#3b82f6",l=g.opacity!==void 0?g.opacity:I.opacity!==void 0?I.opacity:1;if(A.save(),A.globalAlpha*=l,b>0){const O=A.getTransform(),q=Math.sqrt(O.a*O.a+O.b*O.b)||1;A.shadowColor=P,A.shadowBlur=b*2*q,A.shadowOffsetX=0,A.shadowOffsetY=0}if(y){const O=g.listBackgroundColor||"rgba(31, 41, 55, 0.4)",q=this.createCanvasFill(A,O,Q,E);A.fillStyle=q||"rgba(31, 41, 55, 0.4)",this.drawListViewRect(A,i,D,Q,E,o),A.fill();const n=A.createLinearGradient(i,D,i+Q,D+E);n.addColorStop(0,"rgba(255, 255, 255, 0.15)"),n.addColorStop(.5,"rgba(255, 255, 255, 0.08)"),n.addColorStop(1,"rgba(255, 255, 255, 0.03)"),A.fillStyle=n,this.drawListViewRect(A,i,D,Q,E,o),A.fill(),A.strokeStyle="rgba(255, 255, 255, 0.25)",A.lineWidth=1,this.drawListViewRect(A,i,D,Q,E,o),A.stroke()}else{const O=g.listBackgroundColor||"transparent",q=this.createCanvasFill(A,O,Q,E);q&&(A.fillStyle=q,this.drawListViewRect(A,i,D,Q,E,o),A.fill());const n=g.borderWidth??0;n>0&&(A.strokeStyle=g.borderColor||"#cccccc",A.lineWidth=n,this.drawListViewRect(A,i,D,Q,E,o),A.stroke())}A.shadowBlur=0,A.save(),this.drawListViewRect(A,i,D,Q,E,o),A.clip();const r=typeof S=="number"?S:s==="vertical"?S[0]:S[3];let u=(s==="vertical"?D:i)+t+r;if(A.textBaseline="middle",h.forEach((O,q)=>{const n=s==="vertical"?Q:K,Z=s==="vertical"?G:E,iA=s==="vertical"?i:u,j=s==="vertical"?u:D,L=R===q,v=T===q;if(v){const V=this.createCanvasFill(A,F,n,Z);A.fillStyle=V||F;const p=A.globalAlpha;A.globalAlpha=p*.8,A.fillRect(iA,j,n,Z),A.globalAlpha=p}else if(L)A.fillStyle=y?"rgba(255, 255, 255, 0.1)":"rgba(0, 0, 0, 0.05)",A.fillRect(iA,j,n,Z);else if(e!=="transparent"){const V=this.createCanvasFill(A,e,n,Z);A.fillStyle=V||e,A.fillRect(iA,j,n,Z)}if(v||L){const V=this.createCanvasFill(A,F,s==="vertical"?3:n,s==="vertical"?Z:3);A.fillStyle=V||F,s==="vertical"?A.fillRect(iA,j,3,Z):A.fillRect(iA,j+Z-3,n,3)}const CA=v?"#ffffff":y?"rgba(255, 255, 255, 0.9)":M;A.fillStyle=CA,A.font=v||L?"600 14px Inter, sans-serif":"400 14px Inter, sans-serif";const oA=typeof O=="string"?O:(O==null?void 0:O.label)||`Item ${q+1}`,tA=iA+(s==="vertical"?16:n/2),m=j+Z/2;s==="horizontal"?A.textAlign="center":A.textAlign="left",A.fillText(oA,tA,m),u+=(s==="vertical"?G:K)+a}),A.restore(),g.showScrollbar!==!1){const O=(h.length||0)*(s==="vertical"?G:K)+((h.length||0)-1)*a,q=s==="vertical"?E:Q;if(O>q){const n=q/O,Z=q*n,iA=-t/O*q,j=g.scrollbarColor||"rgba(255,255,255,0.3)",L=g.scrollbarWidth||4;A.fillStyle=j,s==="vertical"?A.fillRect(i+Q-L-2,D+iA,L,Z):A.fillRect(i+iA,D+E-L-2,Z,L)}}A.restore()}updateListViewScrollFromPointer(A){var S,y;if(!this._lastPointerPos||!this._prevPointerPos)return;const I=A.options||{},C=I.orientation||"vertical",g=this._lastPointerPos.x-this._prevPointerPos.x,Q=this._lastPointerPos.y-this._prevPointerPos.y;C==="vertical"?I.scrollOffset=(I.scrollOffset||0)+Q:I.scrollOffset=(I.scrollOffset||0)+g;const E=this.objectStates.get(A.id)||{},i=I.items||[],D=I.itemGap??10,o=I.itemHeight??50,s=I.itemWidth??200,h=E.width!==void 0?E.width:((S=A.geometry)==null?void 0:S.width)||200,a=E.height!==void 0?E.height:((y=A.geometry)==null?void 0:y.height)||300,G=(i.length||0)*(C==="vertical"?o:s)+((i.length||0)-1)*D,t=Math.max(0,G-(C==="vertical"?a:h)+(I.padding*2||0));I.scrollOffset>0&&(I.scrollOffset=0),I.scrollOffset<-t&&(I.scrollOffset=-t)}updateListViewHoverFromPointer(A,I,C){const g=this.getListViewItemIndexAtPointer(A,I,C),Q=A.options||{};Q.hoveredIndex!==g&&(Q.hoveredIndex=g)}getListViewItemIndexAtPointer(A,I,C){var r,u;const g=A.options||{},Q=this.objectStates.get(A.id)||{},E=g.items||[];if(E.length===0)return null;const i=Q.width!==void 0?Q.width:((r=A.geometry)==null?void 0:r.width)||200,D=Q.height!==void 0?Q.height:((u=A.geometry)==null?void 0:u.height)||300,o=g.orientation||"vertical",s=g.itemGap??10,h=g.itemHeight??50,a=g.itemWidth??200,G=g.scrollOffset??0,K=g.padding??0,t=this.getWorldTransform(A.id),S=I-t.x,y=C-t.y,F=-t.rotation*(Math.PI/180),M=Math.cos(F),e=Math.sin(F),R=S*M-y*e,T=S*e+y*M,b=-i/2,Y=-D/2,P=typeof K=="number"?K:o==="vertical"?K[0]:K[3];let l=(o==="vertical"?Y:b)+G+P;for(let gA=0;gA<E.length;gA++){const $=o==="vertical"?i:a,f=o==="vertical"?h:D,_=o==="vertical"?b:l,IA=o==="vertical"?l:Y;if(R>=_&&R<=_+$&&T>=IA&&T<=IA+f)return gA;l+=(o==="vertical"?h:a)+s}return null}drawListViewRect(A,I,C,g,Q,E){A.beginPath(),this.drawRoundRect(A,I,C,g,Q,E),A.fill()}solveBehaviors(A){if(!this.artboard)return;if(!this._lastPointerPos){this.frameCount%60;return}const{x:I,y:C}=this._lastPointerPos;this.artboard.objects.forEach(g=>{if(!g.behaviors||g.behaviors.length===0)return;const Q=this.objectStates.get(g.id);Q&&g.behaviors.forEach(E=>{var a,G,K,t,S,y,F,M,e,R,T,b,Y,P,l,r,u,gA,$,f,_,IA,O,q,n,Z,iA,j,L,v,CA,oA,tA,m,V,p,U,x,z,KA,kA,MA,nA,BA;if(!E.enabled)return;const i=E.startTime||0,D=E.endTime||1/0;if(this.currentTime<i||this.currentTime>D)return;const o=Q.x-I,s=Q.y-C,h=Math.sqrt(o*o+s*s);if(this.frameCount%240===0&&Math.random()<.1&&console.log(`[ExodeUI] Executing ${E.type} on ${g.name}`),E.type===X.Proximity){const N=((a=E.settings)==null?void 0:a.radius)||300,H=((G=E.settings)==null?void 0:G.falloff)||"smooth";let d=0;h<N&&(H==="linear"?d=1-h/N:d=Math.pow(1-h/N,2)),d>0&&E.sensors.forEach(DA=>{this.applyBehaviorSensor(Q,DA,d,A,E.settings)})}else if(E.type===X.Magnetic){const N=((K=E.settings)==null?void 0:K.radius)||400,H=((t=E.settings)==null?void 0:t.strength)||.5;if(h<N&&h>5){const d=1-h/N,DA=o*d*H,cA=s*d*H;Q.x-=DA*A*10,Q.y-=cA*A*10}}else if(E.type===X.Repel){const N=((S=E.settings)==null?void 0:S.radius)||300,H=((y=E.settings)==null?void 0:y.strength)||1;if(h<N){const d=Math.pow(1-h/N,2);Q.x+=o/(h||1)*d*60*H*A*5,Q.y+=s/(h||1)*d*60*H*A*5}}else if(E.type===X.Orbit){const N=((F=E.settings)==null?void 0:F.speed)||1,H=((M=E.settings)==null?void 0:M.radius)||30,d=this.currentTime*N*Math.PI*2;Q.x+=Math.cos(d)*H*A*5,Q.y+=Math.sin(d)*H*A*5,Q.rotation+=2*A*5}else if(E.type===X.Vortex){const N=((e=E.settings)==null?void 0:e.radius)||400,H=((R=E.settings)==null?void 0:R.speed)||2,d=((T=E.settings)==null?void 0:T.strength)||1;if(h<N){const DA=Math.pow(1-h/N,1.5),cA=this.currentTime*H*Math.PI*2,QA=Math.cos(cA)*30-o*.4,wA=Math.sin(cA)*30-s*.4;Q.x+=QA*DA*d*A*5,Q.y+=wA*DA*d*A*5,Q.rotation+=5*DA*d*A*5,Q.scale_x*=1-DA*.1*d*A,Q.scale_y*=1-DA*.1*d*A}}else if(E.type===X.Fluid){const N=((b=E.settings)==null?void 0:b.radius)||300,H=((Y=E.settings)==null?void 0:Y.strength)||1;if(h<N){const d=Math.pow(1-h/N,1.2),DA=o/(h||1)*d*1.2*H,cA=s/(h||1)*d*1.2*H;Q.x+=DA*10*A*5,Q.y+=cA*10*A*5,Q.scale_x*=1+d*.3*H*A,Q.scale_y*=1+d*.3*H*A}}else if(E.type===X.Elastic){const N=((P=E.settings)==null?void 0:P.radius)||300,H=((l=E.settings)==null?void 0:l.strength)||1;if(h<N){const d=1-h/N;Q.scale_x*=1+d*.4*H*A,Q.scale_y*=1+d*.4*H*A}}else if(E.type===X.Holographic){const N=Q.x-this.canvasWidth/2,H=Q.y-this.canvasHeight/2,d=((r=E.settings)==null?void 0:r.factor)||25;if(Q.x-=N/1e3*d*A*5,Q.y-=H/1e3*d*A*5,Q.style){const DA=1-Math.min(1,h/400);Q.style.exposure=(Q.style.exposure||1)+DA*.5*A}}else if(E.type===X.Sticky){const N=((u=E.settings)==null?void 0:u.radius)||80,H=((gA=E.settings)==null?void 0:gA.strength)||1;if(h<N){const d=Math.pow(1-h/N,2);Q.x-=o*d*H*A*10,Q.y-=s*d*H*A*10,Q.scale_x*=1-d*.1*H*A,Q.scale_y*=1-d*.1*H*A}}else if(E.type===X.Dilation){const N=(($=E.settings)==null?void 0:$.size)||120,H=((f=E.settings)==null?void 0:f.strength)||1;if(h<N){const d=1-h/N;Q.scale_x*=1+d*.5*H*A,Q.scale_y*=1+d*.5*H*A}}else if(E.type===X.Parallax){const N=((_=E.settings)==null?void 0:_.factor)||.05,H=this.canvasHeight/2,d=(this._lastPointerPos.y-H)*N;Q.y+=d*A*10}else if(E.type===X.Noise||E.type===X.Float){const N=(((IA=E.settings)==null?void 0:IA.frequency)||((O=E.settings)==null?void 0:O.speed)||1)*.002,H=(((q=E.settings)==null?void 0:q.amplitude)||((n=E.settings)==null?void 0:n.range)||50)*(((Z=E.settings)==null?void 0:Z.strength)||1),d=Date.now();Q.x+=Math.sin(d*N)*H*A,Q.y+=Math.cos(d*N*.8)*H*A,Q.rotation+=Math.sin(d*N*.5)*5*A}else if(E.type===X.Pulse){const N=(((iA=E.settings)==null?void 0:iA.speed)||1)*.005,H=(((j=E.settings)==null?void 0:j.scale)||1.2)-1,d=Math.sin(Date.now()*N),DA=((L=E.settings)==null?void 0:L.strength)||1;Q.scale_x*=1+d*H*DA*A,Q.scale_y*=1+d*H*DA*A,Q.style&&(Q.style.exposure=(Q.style.exposure||1)+Math.max(0,d)*.1*DA*A)}else if(E.type===X.Draggable){const N=((v=E.settings)==null?void 0:v.radius)||150,H=this.draggingBehaviors.has(g.id);if(h<N||H){const d=((CA=E.settings)==null?void 0:CA.strength)||1,DA=H?1:Math.max(0,1-h/N);this.applyBehaviorSensor(Q,xA.PositionX,DA*d,A,E.settings),this.applyBehaviorSensor(Q,xA.PositionY,DA*d,A,E.settings)}}else if(E.type===X.Scroll){const N=((oA=E.settings)==null?void 0:oA.axis)||"vertical",H=((tA=E.settings)==null?void 0:tA.factor)||.5,d=((m=E.settings)==null?void 0:m.strength)||1;(N==="vertical"||N==="both")&&(Q.y+=this.scrollOffset.y*H*d*A),(N==="horizontal"||N==="both")&&(Q.x+=this.scrollOffset.x*H*d*A)}else if(E.type===X.LookAt){const N=((V=E.settings)==null?void 0:V.factor)||1,H=((p=E.settings)==null?void 0:p.strength)||1,d=Math.atan2(-s,-o)*(180/Math.PI),DA=Q.rotation,cA=(d-DA+180)%360-180;Q.rotation+=cA*N*H*A*10}else if(E.type===X.Glint||E.type===X.Scan){const N=(((U=E.settings)==null?void 0:U.speed)||1)*.004,H=((x=E.settings)==null?void 0:x.strength)||1,d=(Math.sin(Date.now()*N)+1)/2;Q.style&&(Q.style.exposure=(Q.style.exposure||1)+d*H*A*5),Q.x+=(d-.5)*20*H*A}else if(E.type===X.Ratchet){const N=((z=E.settings)==null?void 0:z.steps)||12,H=(((KA=E.settings)==null?void 0:KA.speed)||1)*30,d=Math.floor(Q.rotation/(360/N))*(360/N);Q.rotation=this.lerp(Q.rotation,d+H*A,.1)}else if(E.type===X.Jitter&&h<300){const N=((kA=E.settings)==null?void 0:kA.strength)||1,H=(((MA=E.settings)==null?void 0:MA.intensity)||5)*N;Q.x+=(Math.random()-.5)*H*A*60,Q.y+=(Math.random()-.5)*H*A*60,Q.rotation+=(Math.random()-.5)*H*A*120}else if(E.type===X.Follower){const N=(nA=E.settings)==null?void 0:nA.targetId;if(N){const H=this.objectStates.get(N);if(H){const d=((BA=E.settings)==null?void 0:BA.stiffness)||.1,DA=H.x-Q.x,cA=H.y-Q.y;Q.x+=DA*d*A*60,Q.y+=cA*d*A*60}}}else E.type===X.Wrap&&(Q.x<0?Q.x=this.canvasWidth:Q.x>this.canvasWidth&&(Q.x=0),Q.y<0?Q.y=this.canvasHeight:Q.y>this.canvasHeight&&(Q.y=0))})})}applyBehaviorSensor(A,I,C,g,Q){const E=(Q==null?void 0:Q.intensity)||(Q==null?void 0:Q.strength)||1,i=C*E*g;switch(I){case xA.Scale:A.scale_x*=1+i*.5,A.scale_y*=1+i*.5;break;case xA.Opacity:A.opacity=Math.max(0,Math.min(100,A.opacity-i*100));break;case xA.RotateZ:A.rotation+=i*180;break;case xA.RotateX:A.rotate_x=(A.rotate_x||0)+i*180;break;case xA.RotateY:A.rotate_y=(A.rotate_y||0)+i*180;break;case xA.PositionX:A.x+=i*300;break;case xA.PositionY:A.y+=i*300;break;case xA.SkewX:A.skew_x=(A.skew_x||0)+i*45;break;case xA.Blur:A.style||(A.style={}),A.style.blur=Math.min(100,(A.style.blur||0)+i*50);break;case xA.Exposure:A.style||(A.style={}),A.style.exposure=(A.style.exposure||1)+i*2;break;case xA.HueShift:A.style||(A.style={}),A.style.hue=(A.style.hue||0)+i*360;break;case xA.CornerRadius:A.corner_radius=Math.min(200,(A.corner_radius||0)+i*100);break;case xA.LetterSpacing:A.geometry||(A.geometry={}),A.geometry.letterSpacing=(A.geometry.letterSpacing||0)+i*10;break}}lerp(A,I,C){return A*(1-C)+I*C}deepMerge(A,I){if(!A)return I;if(!I)return A;if(typeof A!="object"||typeof I!="object"||A===null||I===null)return I;const C={...A};for(const g in I)Object.prototype.hasOwnProperty.call(I,g)&&(I[g]&&typeof I[g]=="object"&&!Array.isArray(I[g])?C[g]=this.deepMerge(A[g],I[g]):C[g]=I[g]);return C}}const OQ=({artboard:B,config:A})=>{const I={...B.seo,...A},C=I.enableSmartExtraction!==!1;JA.useEffect(()=>{const i=I.title||B.name;i&&(document.title=i);let D=I.description;if(!D&&C){const h=B.objects.filter(a=>a.geometry.type==="Text").sort((a,G)=>{var K,t;return(((K=G.geometry.text)==null?void 0:K.length)||0)-(((t=a.geometry.text)==null?void 0:t.length)||0)});h.length>0&&(D=h[0].geometry.text)}D&&(g("name","description",D),g("property","og:description",D)),I.keywords&&I.keywords.length>0&&g("name","keywords",I.keywords.join(", "));const o=I.ogImage||B.backgroundImage;o&&g("property","og:image",o),i&&g("property","og:title",i),g("property","og:type","website")},[I,B,C]);const g=(i,D,o)=>{let s=document.querySelector(`meta[${i}="${D}"]`);s||(s=document.createElement("meta"),s.setAttribute(i,D),document.head.appendChild(s)),s.setAttribute("content",o)},Q=()=>{const i=[];return i.push(fA.jsx("h1",{children:I.title||B.name},"artboard-title")),B.objects.forEach((o,s)=>{if(!(!o.visible&&o.isVisible!==!0))if(o.geometry.type==="Text"){const h=o.geometry.text;h&&(o.geometry.fontSize>24?i.push(fA.jsx("h2",{children:h},o.id||s)):i.push(fA.jsx("p",{children:h},o.id||s)))}else if(o.geometry.type==="Image"){const h=o.geometry.src,a=o.altText||o.name||"Illustration";i.push(fA.jsx("img",{src:h,alt:a},o.id||s))}else o.type==="Button"&&i.push(fA.jsx("button",{children:o.name||"Button"},o.id||s))}),i},E=I.jsonLd||{"@context":"https://schema.org","@type":"VisualArtwork",name:I.title||B.name,description:I.description,image:I.ogImage||B.backgroundImage,abstract:"Animated interface created with ExodeUI"};return fA.jsxs("div",{id:`exode-seo-${B.id||"default"}`,"aria-hidden":"false",style:{position:"absolute",width:"1px",height:"1px",padding:"0",margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",border:"0",zIndex:-1},children:[Q(),fA.jsx("script",{type:"application/ld+json",children:JSON.stringify(E)})]})},Ai=JA.forwardRef(({artboard:B,src:A,className:I,style:C,autoPlay:g=!0,fit:Q="Contain",alignment:E="Center",enableSEO:i=!0,seo:D,onReady:o,onTrigger:s,onInputUpdate:h,onComponentChange:a,onToggle:G,onInputChange:K,onInputFocus:t,onInputBlur:S,onLog:y,currentTime:F},M)=>{const e=JA.useRef(null),R=JA.useRef(new xQ),T=JA.useRef(),b=JA.useRef(0),Y=JA.useRef(null),[P,l]=JA.useState(B||null);JA.useImperativeHandle(M,()=>e.current),JA.useEffect(()=>{console.log("[ExodeUI] Layout Effect - Component Updated/Mounted"),R.current.setLayout(Q,E)},[Q,E]),JA.useEffect(()=>{s&&R.current.setTriggerCallback(s)},[s]),JA.useEffect(()=>{h&&R.current.setInputUpdateCallback(h)},[h]),JA.useEffect(()=>{a&&R.current.setComponentChangeCallback(a)},[a]),JA.useEffect(()=>{G&&R.current.setToggleCallback(G)},[G]),JA.useEffect(()=>{K&&R.current.setInputChangeCallback(K)},[K]),JA.useEffect(()=>{t&&R.current.setInputFocusCallback(t)},[t]),JA.useEffect(()=>{S&&R.current.setInputBlurCallback(S)},[S]),JA.useEffect(()=>{(async()=>{const gA=R.current;let $=B;if(!$&&A)try{$=await(await fetch(A)).json()}catch(f){console.error("Failed to load ExodeUI animation:",f);return}if($){const f=$.id||$.name||"default";Y.current!==f&&(gA.load($),Y.current=f,l($),b.current=0),o&&o(gA)}})()},[B,A]),JA.useEffect(()=>{F!==void 0&&R.current.seek(F)},[F]),JA.useEffect(()=>{const u=R.current,gA=e.current;if(!gA)return;const $=gA.getContext("2d");if(!$)return;$.imageSmoothingEnabled=!0,$.imageSmoothingQuality="high",y&&u.setOnLogCallback(y);const f=IA=>{b.current||(b.current=IA);const O=(IA-b.current)/1e3;b.current=IA,g&&u.advance(O);const q=window.devicePixelRatio||1,n=gA.getBoundingClientRect(),Z=Math.floor(n.width*q),iA=Math.floor(n.height*q);(gA.width!==Z||gA.height!==iA)&&(gA.width=Z,gA.height=iA),u.render($,Z,iA),T.current=requestAnimationFrame(f)};T.current=requestAnimationFrame(f);const _=()=>{u.handleScroll(window.scrollX,window.scrollY)};return window.addEventListener("scroll",_,{passive:!0}),()=>{T.current&&cancelAnimationFrame(T.current),window.removeEventListener("scroll",_)}},[g]);const r=(u,gA)=>{const $=u.currentTarget.getBoundingClientRect(),f=u.clientX-$.left,_=u.clientY-$.top,IA=$.width,O=$.height;R.current.handlePointerInput(gA,f,_,IA,O)};return fA.jsxs("div",{style:{position:"relative",width:"100%",height:"100%",...C},className:I,children:[fA.jsx("canvas",{ref:e,style:{width:"100%",height:"100%",outline:"none"},tabIndex:0,onPointerDown:u=>{var gA;r(u,"down"),(gA=e.current)==null||gA.focus()},onPointerUp:u=>r(u,"up"),onPointerMove:u=>r(u,"move"),onPointerLeave:u=>r(u,"blur"),onClick:u=>r(u,"click"),onKeyDown:u=>{u.key==="Backspace"||u.key==="Enter"||u.key,R.current.handleKeyDown(u.nativeEvent)}}),i&&P&&fA.jsx(OQ,{artboard:P,config:D})]})});function Ii(){const[B,A]=JA.useState(null),I=JA.useCallback((h,a)=>{B==null||B.setInputBool(h,a)},[B]),C=JA.useCallback((h,a)=>{B==null||B.setInputNumber(h,a)},[B]),g=JA.useCallback(h=>{B==null||B.fireTrigger(h)},[B]),Q=JA.useCallback((h,a)=>{B==null||B.setInputText(h,a)},[B]),E=JA.useCallback((h,a)=>{B==null||B.setInputNumberArray(h,a)},[B]),i=JA.useCallback((h,a)=>{B==null||B.setInputStringArray(h,a)},[B]),D=JA.useCallback((h,a)=>{B==null||B.updateObjectOptions(h,a)},[B]),o=JA.useCallback((h,a,G)=>{B==null||B.updateConstraint(h,a,G)},[B]),s=JA.useCallback((h,a)=>{B==null||B.updateGraphData(h,a)},[B]);return{setEngine:A,engine:B,setInputBool:I,setInputNumber:C,fireTrigger:g,setInputText:Q,setInputNumberArray:E,setInputStringArray:i,updateConstraint:o,updateGraphData:s,updateObjectOptions:D}}const gi="6.0.32";dA.BehaviorSensor=xA,dA.BehaviorType=X,dA.ConditionOp=tC,dA.ExodeSEO=OQ,dA.ExodeUICanvas=Ai,dA.ExodeUIEngine=xQ,dA.LogicOp=FI,dA.VERSION=gi,dA.useExodeUI=Ii,Object.defineProperty(dA,Symbol.toStringTag,{value:"Module"})});
|
|
22
|
+
`);let m=-E/2+n;const V=IA*1.2;let p=0;tA.forEach((U,x)=>{const z=U.split(" ");let KA="";for(let kA=0;kA<z.length;kA++){const MA=KA+z[kA]+" ";A.measureText(MA).width>L&&kA>0?(A.fillText(KA,j,m),KA=z[kA]+" ",m+=V):KA=MA}A.fillText(KA,j,m),p=A.measureText(KA).width,x<tA.length-1&&(m+=V,p=0)}),i&&!$&&Math.floor(performance.now()/500)%2===0&&A.fillRect(j+p,m,1.5,IA)}else{const m=A.measureText(v).width;let V=0;if(m>L&&(V=m-L),A.fillText(v,j-V,0),i&&!$&&Math.floor(performance.now()/500)%2===0){const U=j+m-V;A.fillRect(U,-(IA/2),1.5,IA)}}if(A.restore(),h.visible!==!1){const tA=h.text||"Label",m=h.fontSize||12,V=h.color||"rgba(156, 163, 175, 1)",p=h.offset??8;A.font=`600 ${m}px "${O}", sans-serif`,A.fillStyle=V,A.textAlign="left",A.textBaseline="bottom";const U=-(Q/2),x=-(E/2)-p;A.fillText(tA,U,x)}if(a.visible===!0){const tA=a.text||"Helper text",m=a.fontSize||11,V=s==="error"?"rgba(239, 68, 68, 1)":a.color||"rgba(156, 163, 175, 1)",p=a.offset??6;A.font=`400 ${m}px "${O}", sans-serif`,A.fillStyle=V,A.textAlign="left",A.textBaseline="top";const U=-(Q/2),x=E/2+p;A.fillText(tA,U,x)}}renderSlider(A,I){const C=this.objectStates.get(I.id),g=(C==null?void 0:C.geometry)||I.geometry,Q=(C==null?void 0:C.options)||I.options||{},E=g.width||200,i=Q.value??50,D=Q.min??0,s=(Q.max??100)-D,h=s===0?0:(i-D)/s,a=Q.trackHeight||4,G=Q.trackRoundedness??2,K=Q.trackShape??"Rectangle",t=Q.trackPath||"",S=Q.activeColor||"#3b82f6",y=Q.inactiveColor||"#374151",F=Q.thumbShape||"Ellipse",M=Q.thumbWidth??16,e=Q.thumbHeight??16,R=Q.thumbRoundedness??0,T=Q.thumbColor||"#ffffff",b=Q.thumbPath||"",Y=Q.thumbIcon||"",P=Q.showValueTooltip??!1,l=Q.tooltipBgColor||"#333333",r=Q.tooltipColor||"#ffffff",u=Q.tooltipOffsetX??0,gA=Q.tooltipOffsetY??-25,$=(j,L,v,CA,oA,tA,m)=>{if((j==="Custom"||j==="Icon")&&m)try{const V=new Path2D(m);if(A.save(),A.translate(L,v),j==="Icon"){const p=Math.min(CA,oA)/24;A.scale(p,p),A.translate(-12,-12)}A.fill(V),A.restore();return}catch(V){console.error("Error drawing slider shape in engine:",V)}if(A.beginPath(),j==="Ellipse")A.ellipse(L,v,CA/2,oA/2,0,0,Math.PI*2);else if(j==="Rectangle")this.drawRoundRect(A,L-CA/2,v-oA/2,CA,oA,tA);else if(j==="Triangle")A.moveTo(L,v-oA/2),A.lineTo(L+CA/2,v+oA/2),A.lineTo(L-CA/2,v+oA/2),A.closePath();else if(j==="Diamond")A.moveTo(L,v-oA/2),A.lineTo(L+CA/2,v),A.lineTo(L,v+oA/2),A.lineTo(L-CA/2,v),A.closePath();else if(j==="Polygon"){const V=I.geometry.sides||3,p=I.geometry.radius||Math.min(CA,oA)/2;for(let U=0;U<V;U++){const x=U*2*Math.PI/V-Math.PI/2,z=L+p*Math.cos(x),KA=v+p*Math.sin(x);U===0?A.moveTo(z,KA):A.lineTo(z,KA)}A.closePath()}else if(j==="Star"){const p=Math.min(CA,oA)/2,U=p/2;for(let x=0;x<5*2;x++){const z=x%2===0?p:U,KA=x*Math.PI/5-Math.PI/2;A.lineTo(L+z*Math.cos(KA),v+z*Math.sin(KA))}A.closePath()}else j==="Line"&&(A.moveTo(L-CA/2,v),A.lineTo(L+CA/2,v));A.fill()};A.fillStyle=y,K==="Line"?(A.strokeStyle=y,A.lineWidth=a,A.beginPath(),A.moveTo(-E/2,0),A.lineTo(E/2,0),A.stroke()):$(K,0,0,E,a,G,t);const f=E-M,_=-E/2+M/2+h*f,IA=_- -E/2;IA>0&&(A.fillStyle=S,K==="Line"?(A.strokeStyle=S,A.lineWidth=a,A.beginPath(),A.moveTo(-E/2,0),A.lineTo(_,0),A.stroke()):K==="Rectangle"&&(A.beginPath(),this.drawRoundRect(A,-E/2,-a/2,IA,a,G),A.fill())),A.save(),A.translate(_,0);const O=A.getTransform(),q=Math.sqrt(O.a*O.a+O.b*O.b)||1;if(A.shadowColor="rgba(0,0,0,0.2)",A.shadowBlur=4*q,A.shadowOffsetY=1*q,A.fillStyle=T,$(F,0,0,M,e,R,F==="Icon"?Y:b),A.restore(),P){A.save(),A.translate(_+u,gA);const j=Math.round(i).toString();A.font="10px Inter, sans-serif";const L=A.measureText(j),v=6,CA=4,oA=L.width+v*2,tA=14+CA;A.beginPath(),this.drawRoundRect(A,-oA/2,-tA/2,oA,tA,4),A.fillStyle=l,A.fill(),A.fillStyle=r,A.textAlign="center",A.textBaseline="middle",A.fillText(j,0,0),A.restore()}const n=Q.label||{},Z=Q.helperText||{},iA=Q.fontFamily||"Inter";if(n.visible!==!1){const j=n.text||"Label",L=n.fontSize||12,v=n.color||"rgba(156, 163, 175, 1)",CA=n.offset??8;A.font=`600 ${L}px "${iA}", sans-serif`,A.fillStyle=v,A.textAlign="left",A.textBaseline="bottom";const oA=-(E/2),tA=-(a/2)-CA;A.fillText(j,oA,tA)}if(Z.visible===!0){const j=Z.text||"Helper text",L=Z.fontSize||11,v=Z.color||"rgba(156, 163, 175, 1)",CA=Z.offset??6;A.font=`400 ${L}px "${iA}", sans-serif`,A.fillStyle=v,A.textAlign="left",A.textBaseline="top";const oA=-(E/2),tA=a/2+CA;A.fillText(j,oA,tA)}}renderDropdown(A,I){var gA;const C=this.objectStates.get(I.id);if(!C)return;const g=C.options||I.options||{},Q=I.geometry.width||160,E=I.geometry.height||40,i=-Q/2,D=-E/2,o=g.corner_radius??6,s=g.disabled||g.previewState==="disabled",h=this.lastHoveredObjectId===I.id||g.previewState==="hover",a=(g.isOpen||g.previewState==="active")&&!s;let G=g.backgroundColor,K=g.borderColor,t=g.color||"#333333";s?(G=g.disabledBackgroundColor||"#f3f4f6",K=g.disabledBorderColor||"#e5e7eb",t=g.disabledColor||"#9ca3af"):a?(G=g.activeBackgroundColor||G,K=g.activeBorderColor||K,t=g.activeColor||t):h&&(G=g.hoverBackgroundColor||G,K=g.hoverBorderColor||K,t=g.hoverColor||t),G||(G="#ffffff"),K||(K="#e5e7eb");const S=A.globalAlpha;A.globalAlpha=S*(g.opacity??1),this.drawRoundRect(A,i,D,Q,E,o),A.fillStyle=this.createCanvasFill(A,typeof G=="string"?{type:"Solid",color:G}:G,Q,E)||"#ffffff",A.fill();const y=g.borderWidth??1;y>0&&(A.strokeStyle=this.createCanvasFill(A,typeof K=="string"?{type:"Solid",color:K}:K,Q,E)||"#e5e7eb",A.lineWidth=y,A.stroke());const F=12,M=g.chevronType||"chevron",e=g.chevronSize||16,R=(a?g.openIconColor:g.closedIconColor)||g.chevronColor||"#6b7280";if(M!=="none"){const $=i+Q-F-e/2;A.save(),A.translate($,0);const f=a?g.openIconAngle??180:g.closedIconAngle??0;if(A.rotate(f*Math.PI/180),A.strokeStyle=R,A.fillStyle=R,A.lineWidth=1.5,A.lineCap="round",A.lineJoin="round",M==="chevron")A.beginPath(),A.moveTo(-e/2,-e*.2),A.lineTo(0,e*.2),A.lineTo(e/2,-e*.2),A.stroke();else if(M==="custom"||M==="path"){const _=a&&g.openIconPath||g.closedIconPath;if(_){const IA=new Path2D(_);A.save();const O=e/24;A.scale(O,O),A.translate(-12,-12),A.fill(IA),A.restore()}}A.restore()}const T=g.selectedOption||g.placeholder||"Select...",b=g.fontSize||14,Y=g.fontWeight||400,P=g.fontFamily||"Inter, sans-serif";A.font=`${Y} ${b}px ${P}`;const l=s?g.disabledColor||"#9ca3af":!g.selectedOption&&g.placeholder?"#9ca3af":t;A.fillStyle=this.createCanvasFill(A,typeof l=="string"?{type:"Solid",color:l}:l,Q,E)||"#333333",A.textAlign="left",A.textBaseline="middle";const r=M==="none"?0:e+8,u=Q-F*2-r;if(A.save(),A.beginPath(),A.rect(i+F,D,u,E),A.clip(),A.fillText(T,i+F,0),A.restore(),a&&!s){const $=D+E+4,f=g.optionsList||[],_=g.itemHeight||32,IA=g.listPadding??4,O=f.length*_+IA*2,q=g.listCornerRadius??o;A.save();const n=g.listShadow||{},Z=A.getTransform(),iA=Math.sqrt(Z.a*Z.a+Z.b*Z.b)||1;A.shadowColor=typeof n.color=="string"?n.color:((gA=n.color)==null?void 0:gA.color)||"rgba(0,0,0,0.15)",A.shadowBlur=(n.blur??12)*iA,A.shadowOffsetY=(n.offsetY??6)*iA,A.shadowOffsetX=(n.offsetX??0)*iA,A.beginPath(),this.drawRoundRect(A,i,$,Q,O,q),A.fillStyle=this.createCanvasFill(A,typeof g.listBackgroundColor=="string"?{type:"Solid",color:g.listBackgroundColor}:g.listBackgroundColor||{type:"Solid",color:"#ffffff"},Q,O)||"#ffffff",A.fill();const j=g.listBorderWidth??1;j>0&&(A.shadowColor="transparent",A.strokeStyle=this.createCanvasFill(A,typeof g.listBorderColor=="string"?{type:"Solid",color:g.listBorderColor}:g.listBorderColor||{type:"Solid",color:K},Q,O)||"#e5e7eb",A.lineWidth=j,A.stroke()),A.restore();const L=g.itemFontSize||b,v=g.itemFontFamily||P;A.font=`${Y} ${L}px ${v}`,f.forEach((CA,oA)=>{const tA=$+IA+oA*_;if(CA===g.selectedOption)A.fillStyle=this.createCanvasFill(A,typeof g.itemSelectedBackgroundColor=="string"?{type:"Solid",color:g.itemSelectedBackgroundColor}:g.itemSelectedBackgroundColor||{type:"Solid",color:"#f3f4f6"},Q,_)||"#f3f4f6",A.fillRect(i+j,tA,Q-j*2,_),A.fillStyle=g.itemSelectedColor||g.activeColor||t||"#374151";else if(A.fillStyle=g.listTextColor||t||"#333333",this.activeDropdownId===I.id&&this._lastPointerPos){const V=this._lastPointerPos.y-($+IA),p=Math.floor(V/_);oA===p&&(A.fillStyle=this.createCanvasFill(A,typeof g.itemHoverBackgroundColor=="string"?{type:"Solid",color:g.itemHoverBackgroundColor}:g.itemHoverBackgroundColor||{type:"Solid",color:"#f9fafb"},Q,_)||"#f9fafb",A.fillRect(i+j,tA,Q-j*2,_),A.fillStyle=g.itemHoverColor||t)}A.fillText(CA,i+F,tA+_/2)})}A.globalAlpha=S}renderButton(A,I){var M,e,R,T;const C=this.objectStates.get(I.id),g=(C==null?void 0:C.options)||I.options||{},Q=((M=I.geometry)==null?void 0:M.width)||120,E=((e=I.geometry)==null?void 0:e.height)||40,i=-Q/2,D=-E/2,o=this.lastHoveredObjectId===I.id,s=g.corner_radius??8,h=g.bgShape||"Rectangle",a=o?((R=g.hoverStyle)==null?void 0:R.backgroundColor)||g.buttonBgColor||"#3b82f6":g.buttonBgColor||"#3b82f6",G=g.label||{},K=o?((T=g.hoverStyle)==null?void 0:T.textColor)||G.color||"#ffffff":G.color||"#ffffff",t=g.icon||{enabled:!1};A.save(),A.beginPath(),h==="Rectangle"?this.drawRoundRect(A,i,D,Q,E,s):h==="Ellipse"||h==="Circle"?A.ellipse(0,0,Q/2,E/2,0,0,Math.PI*2):h==="Pill"&&this.drawRoundRect(A,i,D,Q,E,E/2),A.fillStyle=a,A.fill();const S=G.fontSize||14,y=G.fontFamily||"Inter";A.font=`${G.fontWeight||400} ${S}px "${y}", sans-serif`,A.fillStyle=K,A.textAlign="center",A.textBaseline="middle";let F=0;if(t.enabled&&t.svgPath){const b=t.size||16,Y=t.gap||8,P=t.position==="left"?-(A.measureText(G.text||"").width/2+b/2+Y/2):A.measureText(G.text||"").width/2+b/2+Y/2;A.save(),A.translate(P,0);const l=new Path2D(t.svgPath),r=b/24;A.scale(r,r),A.translate(-12,-12),A.fillStyle=t.color||K,A.fill(l),A.restore(),F=t.position==="left"?b/2+Y/2:-(b/2+Y/2)}A.fillText(G.text||"Button",F,0),A.restore()}renderToggleButton(A,I){var S,y;const C=this.objectStates.get(I.id),g=(C==null?void 0:C.options)||I.options||{},Q=g.checked??!1,E=((S=I.geometry)==null?void 0:S.width)||120,i=((y=I.geometry)==null?void 0:y.height)||40,D=-E/2,o=-i/2,s=g.corner_radius??8,h=g.label||{},a=Q?g.activeColor||"#3b82f6":g.inactiveColor||"#374151",G=Q?g.activeTextColor||"#ffffff":g.inactiveTextColor||"#9ca3af";A.save(),A.beginPath(),this.drawRoundRect(A,D,o,E,i,s),A.fillStyle=a,A.fill();const K=h.fontSize||14,t=h.fontFamily||"Inter";A.font=`${h.fontWeight||600} ${K}px "${t}", sans-serif`,A.fillStyle=G,A.textAlign="center",A.textBaseline="middle",A.fillText(h.text||"Toggle",0,0),A.restore()}renderToggle(A,I){var F,M;const C=this.objectStates.get(I.id),g=(C==null?void 0:C.options)||I.options||{},Q=((F=I.geometry)==null?void 0:F.width)||52,E=((M=I.geometry)==null?void 0:M.height)||30,i=-Q/2,D=-E/2,o=g.checked??!1,s=g.corner_radius??E/2;A.beginPath(),this.drawRoundRect(A,i,D,Q,E,s),A.fillStyle=o?g.activeColor||"#10b981":g.inactiveColor||"#374151",g.disabled&&(A.globalAlpha*=.5),A.fill();const h=3,a=E-h*2,G=a/2,K=i+h,t=i+Q-h-a,S=o?t:K,y=D+h;if(A.beginPath(),A.arc(S+G,y+G,G,0,Math.PI*2),A.fillStyle=g.knobColor||"#ffffff",A.fill(),g.disabled&&(A.globalAlpha*=2),g.label&&g.label.text){const e=g.label,R=e.fontSize||14,T=e.fontWeight||400,b=e.fontFamily||"Inter";A.font=`${T} ${R}px "${b}", sans-serif`,A.fillStyle=e.color||"#f3f4f6",A.textBaseline="middle";const Y=e.gap||10;let P=0,l=0;e.position==="left"?(A.textAlign="right",P=i-Y,l=0):e.position==="right"?(A.textAlign="left",P=i+Q+Y,l=0):e.position==="top"?(A.textAlign="center",P=0,l=D-Y,A.textBaseline="bottom"):e.position==="bottom"?(A.textAlign="center",P=0,l=D+E+Y,A.textBaseline="top"):(A.textAlign="left",P=i+Q+Y,l=0),A.fillText(e.text,P,l)}}renderLineGraph(A,I,C,g){let Q=I.datasets||[];if((!Q||Q.length===0)&&(I.data||I.graphData)&&(Q=[{id:"line-1",label:"Series 1",data:I.data||I.graphData||[],lineColor:I.lineColor||"#3b82f6",lineWidth:I.lineWidth||2,showArea:I.showArea||!1,areaColor:I.areaColor||"rgba(139, 92, 246, 0.3)",smoothing:I.smoothing||!1,showPoints:I.showPoints!==void 0?I.showPoints:!0,pointSize:I.pointSize||6,pointFill:I.pointFill||"#ffffff",pointStrokeColor:I.pointStrokeColor||I.lineColor||"#3b82f6",pointStrokeWidth:I.pointStrokeWidth||2}]),!Q||Q.length===0||!Q.some(t=>t.data&&t.data.length>=2)){A.save(),A.fillStyle="#6366f1",A.font="12px Inter, system-ui, sans-serif",A.textAlign="center",A.textBaseline="middle",A.fillText("NO DATA",0,0),A.restore();return}let E=1/0,i=-1/0,D=0;if(Q.forEach(t=>{let S=t.data;if(t.isVarEnabled&&t.inputId){let y=this.inputs.get(t.inputId);if(y===void 0){const F=this.inputNameMap.get(t.inputId);F&&F.length>0&&(y=this.inputs.get(F[0]))}y&&Array.isArray(y)&&(S=y)}if(S&&S.length>0){const y=S.filter(F=>typeof F=="number"&&!isNaN(F));y.length>0&&(E=Math.min(E,...y),i=Math.max(i,...y),D=Math.max(D,S.length))}t._resolvedData=S}),D<2)return;const o=i-E,s=C/(D-1),h=t=>{const S=o===0?.5:(t-E)/o;return g/2-S*g},a=t=>t*s-C/2,G=I.axisColor||"#333333";if(I.showXAxis&&(A.beginPath(),A.strokeStyle=I.xAxisColor||G,A.lineWidth=1,A.moveTo(-C/2,g/2),A.lineTo(C/2,g/2),A.stroke()),I.showYAxis&&(A.beginPath(),A.strokeStyle=I.yAxisColor||G,A.lineWidth=1,A.moveTo(-C/2,-g/2),A.lineTo(-C/2,g/2),A.stroke()),A.fillStyle=I.axisLabelColor||"#333333",A.font=`${I.axisLabelFontSize||10}px Inter, sans-serif`,I.showXLabels){A.textAlign="center",A.textBaseline="top";for(let t=0;t<D;t++){const S=a(t);A.fillText(`${t+1}`,S,g/2+5)}}if(I.showYLabels){A.textAlign="right",A.textBaseline="middle";const t=-C/2-5,S=(i+E)/2;A.fillText(i.toFixed(1),t,h(i)),A.fillText(S.toFixed(1),t,h(S)),A.fillText(E.toFixed(1),t,h(E))}const K=10;if(Q.forEach(t=>{const S=t._resolvedData;if(!(!S||S.length<2)){if(t.showArea){if(A.beginPath(),A.moveTo(a(0),g/2),A.lineTo(a(0),h(S[0])),t.smoothing&&S.length>2)for(let F=0;F<S.length-1;F++){const M=S[F===0?F:F-1],e=S[F],R=S[F+1],T=S[F+1===S.length-1?F+1:F+2];for(let b=1;b<=K;b++){const Y=b/K,P=this._catmullRom(M,e,R,T,Y);A.lineTo(a(F+Y),h(P))}}else for(let F=1;F<S.length;F++)A.lineTo(a(F),h(S[F]));A.lineTo(a(S.length-1),g/2),A.closePath();const y=A.globalAlpha;A.globalAlpha=y*(I.areaOpacity??.3),A.fillStyle=t.areaColor||"rgba(139, 92, 246, 0.2)",A.fill(),A.globalAlpha=y}if(A.beginPath(),A.strokeStyle=t.lineColor||"#3b82f6",A.lineWidth=t.lineWidth||2,A.lineJoin="round",A.lineCap="round",A.moveTo(a(0),h(S[0])),t.smoothing&&S.length>2)for(let y=0;y<S.length-1;y++){const F=S[y===0?y:y-1],M=S[y],e=S[y+1],R=S[y+1===S.length-1?y+1:y+2];for(let T=1;T<=K;T++){const b=T/K,Y=this._catmullRom(F,M,e,R,b);A.lineTo(a(y+b),h(Y))}}else for(let y=1;y<S.length;y++)A.lineTo(a(y),h(S[y]));A.stroke(),t.showPoints&&S.forEach((y,F)=>{const M=a(F),e=h(y);A.beginPath(),A.arc(M,e,(t.pointSize||6)/2,0,Math.PI*2),A.fillStyle=t.pointFill||"#ffffff",A.fill(),A.strokeStyle=t.pointStrokeColor||t.lineColor||"#3b82f6",A.lineWidth=t.pointStrokeWidth||1,A.stroke()})}}),I.showLegend&&Q.length>0){const t=C/2-10;let S=-g/2+15;const y=I.legendFontSize||10,F=y+5;A.font=`${y}px Inter, sans-serif`,A.textAlign="right",A.textBaseline="alphabetic",Q.forEach(M=>{const R=M.label||"Series",T=A.measureText(R).width;A.beginPath(),A.rect(t-T-8-5,S-(8/2+2),8,8),A.fillStyle=M.lineColor||"#3b82f6",A.fill(),A.fillStyle=I.legendColor||"#333333",A.fillText(R,t,S),S+=F})}}_catmullRom(A,I,C,g,Q){const E=(C-A)*.5,i=(g-I)*.5,D=Q*Q,o=Q*D;return(2*I-2*C+E+i)*o+(-3*I+3*C-2*E-i)*D+E*Q+I}normalizeOpacity(A){const I=typeof A=="number"?A:parseFloat(String(A));return isNaN(I)?1:I>1?Math.min(1,I/100):Math.max(0,Math.min(1,I))}createCanvasFill(A,I,C,g){var Q,E,i;if(!I||I.type==="None")return null;if(typeof I=="string")return I;if(I.type==="Solid"&&I.color){const D=I.color,s=(((E=(Q=this.artboard)==null?void 0:Q.tokens)==null?void 0:E.colors)||{})[D]||D;return A.fillStyle=s,s}if((I.type==="LinearGradient"||I.type==="RadialGradient"||I.type==="AngularGradient"||I.type==="DiamondGradient")&&I.stops){const D=(o,s=100)=>{var e,R;const a=(((R=(e=this.artboard)==null?void 0:e.tokens)==null?void 0:R.colors)||{})[o]||o,G=this.normalizeOpacity(I.opacity??100),t=this.normalizeOpacity(s)*G;if(t>=1&&a.startsWith("#"))return a;const S=a.startsWith("#")?a.replace("#",""):"ffffff",y=parseInt(S.substring(0,2),16),F=parseInt(S.substring(2,4),16),M=parseInt(S.substring(4,6),16);return`rgba(${y}, ${F}, ${M}, ${t})`};if(I.type==="LinearGradient"){const o=(t,S,y)=>Array.isArray(t)?t[S]??(S===0?0:1):t&&typeof t=="object"?t[y]??(S===0?0:1):S===0?0:1,s=o(I.start,0,"x")*C-C/2,h=o(I.start,1,"y")*g-g/2,a=o(I.end,0,"x")*C-C/2,G=o(I.end,1,"y")*g-g/2,K=A.createLinearGradient(s,h,a,G);if(I.stops.forEach(t=>{const S=t.offset!==void 0?t.offset:t.pos!==void 0?t.pos:t.position!==void 0?t.position:0,y=D(t.color||"#000000",t.opacity??100);K.addColorStop(Math.max(0,Math.min(1,S)),y)}),I.gradientTransform&&K.setTransform){const[t,S,y,F,M,e]=I.gradientTransform;K.setTransform({a:t,b:S,c:y,d:F,e:M,f:e})}return K}else if(I.type==="RadialGradient"){const o=(K,t,S)=>Array.isArray(K)?K[t]??.5:K&&typeof K=="object"?K[S]??.5:.5,s=o(I.center,0,"x")*C-C/2,h=o(I.center,1,"y")*g-g/2,a=(I.radius??.5)*Math.max(C,g),G=A.createRadialGradient(s,h,0,s,h,a);if(I.stops.forEach(K=>{const t=K.offset!==void 0?K.offset:K.pos!==void 0?K.pos:K.position!==void 0?K.position:0,S=D(K.color||"#000000",K.opacity??100);G.addColorStop(Math.max(0,Math.min(1,t)),S)}),I.gradientTransform&&G.setTransform){const[K,t,S,y,F,M]=I.gradientTransform;G.setTransform({a:K,b:t,c:S,d:y,e:F,f:M})}return G}else if(I.type==="AngularGradient"){const o=(K,t,S)=>Array.isArray(K)?K[t]??.5:K&&typeof K=="object"?K[S]??.5:.5,s=o(I.center||[.5,.5],0,"x")*C-C/2,h=o(I.center||[.5,.5],1,"y")*g-g/2,a=(I.degree||I.angle||0)*(Math.PI/180),G=(i=A.createConicGradient)==null?void 0:i.call(A,a,s,h);if(G){if(I.stops.forEach(K=>{const t=K.offset!==void 0?K.offset:K.pos!==void 0?K.pos:K.position!==void 0?K.position:0,S=D(K.color||"#000000",K.opacity??100);G.addColorStop(Math.max(0,Math.min(1,t)),S)}),I.gradientTransform&&G.setTransform){const[K,t,S,y,F,M]=I.gradientTransform;G.setTransform({a:K,b:t,c:S,d:y,e:F,f:M})}return G}}else if(I.type==="DiamondGradient"){const o=(K,t,S)=>Array.isArray(K)?K[t]??.5:K&&typeof K=="object"?K[S]??.5:.5,s=o(I.center||[.5,.5],0,"x")*C-C/2,h=o(I.center||[.5,.5],1,"y")*g-g/2,a=(I.radius??.5)*Math.max(C,g);A.save(),A.translate(s,h),A.rotate(Math.PI/4);const G=A.createRadialGradient(0,0,0,0,0,a);if(I.stops.forEach(K=>{const t=K.offset!==void 0?K.offset:K.pos!==void 0?K.pos:K.position!==void 0?K.position:0,S=D(K.color||"#000000",K.opacity??100);G.addColorStop(Math.max(0,Math.min(1,t)),S)}),I.gradientTransform&&G.setTransform){const[K,t,S,y,F,M]=I.gradientTransform;G.setTransform({a:K,b:t,c:S,d:y,e:F,f:M})}return A.scale(1/Math.SQRT2,1/Math.SQRT2),A.fillStyle=G,A.restore(),G}}if(I.type==="Pattern"&&I.url){let D=this.imageCache.get(I.url);if(D||(D=new Image,D.src=I.url,this.imageCache.set(I.url,D)),D.complete&&D.naturalWidth>0){const o=A.createPattern(D,"repeat");if(o&&(I.scaleX!==void 0||I.offsetX!==void 0)){const s=new DOMMatrix,h=I.scaleX??1,a=I.scaleY??1,G=I.offsetX??0,K=I.offsetY??0,t=I.rotation??0;s.translateSelf(G,K),s.rotateSelf(t),s.scaleSelf(h,a),o.setTransform(s)}return o}}return I.color||null}drawRoundRect(A,I,C,g,Q,E){if(E===0||E===void 0||E===null){A.rect(I,C,g,Q);return}let i=E;if(typeof i=="string")try{i=JSON.parse(i)}catch{i=parseFloat(i)||0}let D=0,o=0,s=0,h=0;typeof i=="number"?D=o=s=h=i:Array.isArray(i)?i.length===1?D=o=s=h=i[0]:i.length===2?(D=s=i[0],o=h=i[1]):i.length===3?(D=i[0],o=h=i[1],s=i[2]):i.length>=4&&(D=i[0],o=i[1],s=i[2],h=i[3]):i&&typeof i=="object"&&(D=i.tl??i.corner_radius??i.cornerRadius??0,o=i.tr??i.corner_radius??i.cornerRadius??0,s=i.br??i.corner_radius??i.cornerRadius??0,h=i.bl??i.corner_radius??i.cornerRadius??0);const a=Math.min(Math.abs(g)/2,Math.abs(Q)/2);if(D=Math.min(Math.max(0,D),a),o=Math.min(Math.max(0,o),a),s=Math.min(Math.max(0,s),a),h=Math.min(Math.max(0,h),a),A.roundRect){A.roundRect(I,C,g,Q,[D,o,s,h]);return}A.moveTo(I+D,C),A.lineTo(I+g-o,C),A.arcTo(I+g,C,I+g,C+o,o),A.lineTo(I+g,C+Q-s),A.arcTo(I+g,C+Q,I+g-s,C+Q,s),A.lineTo(I+h,C+Q),A.arcTo(I,C+Q,I,C+Q-h,h),A.lineTo(I,C+D),A.arcTo(I,C,I+D,C,D),A.closePath()}renderListView(A,I){var $,f,_,IA;const C=this.objectStates.get(I.id)||{},g=C.options||I.options||{},Q=C.width!==void 0?C.width:(($=I.geometry)==null?void 0:$.width)||200,E=C.height!==void 0?C.height:((f=I.geometry)==null?void 0:f.height)||300,i=-Q/2,D=-E/2,o=C.corner_radius!==void 0?C.corner_radius:g.corner_radius??0,s=g.orientation||"vertical",h=g.items||[],a=g.itemGap??10,G=g.itemHeight??50,K=g.itemWidth??200,t=g.scrollOffset??0,S=g.padding??0,y=g.glassEffect!==!1,F=g.accentColor||"#3b82f6",M=g.itemTextColor||"#333333",e=g.itemBackgroundColor||"#ffffff",R=g.hoveredIndex??null,T=g.activeItemIndex??null,b=g.glowIntensity??0,Y=g.glowColor||"#3b82f6",P=typeof Y=="string"?Y:Y.color||((IA=(_=Y.stops)==null?void 0:_[0])==null?void 0:IA.color)||"#3b82f6",l=g.opacity!==void 0?g.opacity:I.opacity!==void 0?I.opacity:1;if(A.save(),A.globalAlpha*=l,b>0){const O=A.getTransform(),q=Math.sqrt(O.a*O.a+O.b*O.b)||1;A.shadowColor=P,A.shadowBlur=b*2*q,A.shadowOffsetX=0,A.shadowOffsetY=0}if(y){const O=g.listBackgroundColor||"rgba(31, 41, 55, 0.4)",q=this.createCanvasFill(A,O,Q,E);A.fillStyle=q||"rgba(31, 41, 55, 0.4)",this.drawListViewRect(A,i,D,Q,E,o),A.fill();const n=A.createLinearGradient(i,D,i+Q,D+E);n.addColorStop(0,"rgba(255, 255, 255, 0.15)"),n.addColorStop(.5,"rgba(255, 255, 255, 0.08)"),n.addColorStop(1,"rgba(255, 255, 255, 0.03)"),A.fillStyle=n,this.drawListViewRect(A,i,D,Q,E,o),A.fill(),A.strokeStyle="rgba(255, 255, 255, 0.25)",A.lineWidth=1,this.drawListViewRect(A,i,D,Q,E,o),A.stroke()}else{const O=g.listBackgroundColor||"transparent",q=this.createCanvasFill(A,O,Q,E);q&&(A.fillStyle=q,this.drawListViewRect(A,i,D,Q,E,o),A.fill());const n=g.borderWidth??0;n>0&&(A.strokeStyle=g.borderColor||"#cccccc",A.lineWidth=n,this.drawListViewRect(A,i,D,Q,E,o),A.stroke())}A.shadowBlur=0,A.save(),this.drawListViewRect(A,i,D,Q,E,o),A.clip();const r=typeof S=="number"?S:s==="vertical"?S[0]:S[3];let u=(s==="vertical"?D:i)+t+r;if(A.textBaseline="middle",h.forEach((O,q)=>{const n=s==="vertical"?Q:K,Z=s==="vertical"?G:E,iA=s==="vertical"?i:u,j=s==="vertical"?u:D,L=R===q,v=T===q;if(v){const V=this.createCanvasFill(A,F,n,Z);A.fillStyle=V||F;const p=A.globalAlpha;A.globalAlpha=p*.8,A.fillRect(iA,j,n,Z),A.globalAlpha=p}else if(L)A.fillStyle=y?"rgba(255, 255, 255, 0.1)":"rgba(0, 0, 0, 0.05)",A.fillRect(iA,j,n,Z);else if(e!=="transparent"){const V=this.createCanvasFill(A,e,n,Z);A.fillStyle=V||e,A.fillRect(iA,j,n,Z)}if(v||L){const V=this.createCanvasFill(A,F,s==="vertical"?3:n,s==="vertical"?Z:3);A.fillStyle=V||F,s==="vertical"?A.fillRect(iA,j,3,Z):A.fillRect(iA,j+Z-3,n,3)}const CA=v?"#ffffff":y?"rgba(255, 255, 255, 0.9)":M;A.fillStyle=CA,A.font=v||L?"600 14px Inter, sans-serif":"400 14px Inter, sans-serif";const oA=typeof O=="string"?O:(O==null?void 0:O.label)||`Item ${q+1}`,tA=iA+(s==="vertical"?16:n/2),m=j+Z/2;s==="horizontal"?A.textAlign="center":A.textAlign="left",A.fillText(oA,tA,m),u+=(s==="vertical"?G:K)+a}),A.restore(),g.showScrollbar!==!1){const O=(h.length||0)*(s==="vertical"?G:K)+((h.length||0)-1)*a,q=s==="vertical"?E:Q;if(O>q){const n=q/O,Z=q*n,iA=-t/O*q,j=g.scrollbarColor||"rgba(255,255,255,0.3)",L=g.scrollbarWidth||4;A.fillStyle=j,s==="vertical"?A.fillRect(i+Q-L-2,D+iA,L,Z):A.fillRect(i+iA,D+E-L-2,Z,L)}}A.restore()}updateListViewScrollFromPointer(A){var S,y;if(!this._lastPointerPos||!this._prevPointerPos)return;const I=A.options||{},C=I.orientation||"vertical",g=this._lastPointerPos.x-this._prevPointerPos.x,Q=this._lastPointerPos.y-this._prevPointerPos.y;C==="vertical"?I.scrollOffset=(I.scrollOffset||0)+Q:I.scrollOffset=(I.scrollOffset||0)+g;const E=this.objectStates.get(A.id)||{},i=I.items||[],D=I.itemGap??10,o=I.itemHeight??50,s=I.itemWidth??200,h=E.width!==void 0?E.width:((S=A.geometry)==null?void 0:S.width)||200,a=E.height!==void 0?E.height:((y=A.geometry)==null?void 0:y.height)||300,G=(i.length||0)*(C==="vertical"?o:s)+((i.length||0)-1)*D,t=Math.max(0,G-(C==="vertical"?a:h)+(I.padding*2||0));I.scrollOffset>0&&(I.scrollOffset=0),I.scrollOffset<-t&&(I.scrollOffset=-t)}updateListViewHoverFromPointer(A,I,C){const g=this.getListViewItemIndexAtPointer(A,I,C),Q=A.options||{};Q.hoveredIndex!==g&&(Q.hoveredIndex=g)}getListViewItemIndexAtPointer(A,I,C){var r,u;const g=A.options||{},Q=this.objectStates.get(A.id)||{},E=g.items||[];if(E.length===0)return null;const i=Q.width!==void 0?Q.width:((r=A.geometry)==null?void 0:r.width)||200,D=Q.height!==void 0?Q.height:((u=A.geometry)==null?void 0:u.height)||300,o=g.orientation||"vertical",s=g.itemGap??10,h=g.itemHeight??50,a=g.itemWidth??200,G=g.scrollOffset??0,K=g.padding??0,t=this.getWorldTransform(A.id),S=I-t.x,y=C-t.y,F=-t.rotation*(Math.PI/180),M=Math.cos(F),e=Math.sin(F),R=S*M-y*e,T=S*e+y*M,b=-i/2,Y=-D/2,P=typeof K=="number"?K:o==="vertical"?K[0]:K[3];let l=(o==="vertical"?Y:b)+G+P;for(let gA=0;gA<E.length;gA++){const $=o==="vertical"?i:a,f=o==="vertical"?h:D,_=o==="vertical"?b:l,IA=o==="vertical"?l:Y;if(R>=_&&R<=_+$&&T>=IA&&T<=IA+f)return gA;l+=(o==="vertical"?h:a)+s}return null}drawListViewRect(A,I,C,g,Q,E){A.beginPath(),this.drawRoundRect(A,I,C,g,Q,E),A.fill()}solveBehaviors(A){if(!this.artboard)return;if(!this._lastPointerPos){this.frameCount%60;return}const{x:I,y:C}=this._lastPointerPos;this.artboard.objects.forEach(g=>{if(!g.behaviors||g.behaviors.length===0)return;const Q=this.objectStates.get(g.id);Q&&g.behaviors.forEach(E=>{var a,G,K,t,S,y,F,M,e,R,T,b,Y,P,l,r,u,gA,$,f,_,IA,O,q,n,Z,iA,j,L,v,CA,oA,tA,m,V,p,U,x,z,KA,kA,MA,nA,BA;if(!E.enabled)return;const i=E.startTime||0,D=E.endTime||1/0;if(this.currentTime<i||this.currentTime>D)return;const o=Q.x-I,s=Q.y-C,h=Math.sqrt(o*o+s*s);if(this.frameCount%240===0&&Math.random()<.1&&console.log(`[ExodeUI] Executing ${E.type} on ${g.name}`),E.type===X.Proximity){const N=((a=E.settings)==null?void 0:a.radius)||300,H=((G=E.settings)==null?void 0:G.falloff)||"smooth";let d=0;h<N&&(H==="linear"?d=1-h/N:d=Math.pow(1-h/N,2)),d>0&&E.sensors.forEach(DA=>{this.applyBehaviorSensor(Q,DA,d,A,E.settings)})}else if(E.type===X.Magnetic){const N=((K=E.settings)==null?void 0:K.radius)||400,H=((t=E.settings)==null?void 0:t.strength)||.5;if(h<N&&h>5){const d=1-h/N,DA=o*d*H,cA=s*d*H;Q.x-=DA*A*10,Q.y-=cA*A*10}}else if(E.type===X.Repel){const N=((S=E.settings)==null?void 0:S.radius)||300,H=((y=E.settings)==null?void 0:y.strength)||1;if(h<N){const d=Math.pow(1-h/N,2);Q.x+=o/(h||1)*d*60*H*A*5,Q.y+=s/(h||1)*d*60*H*A*5}}else if(E.type===X.Orbit){const N=((F=E.settings)==null?void 0:F.speed)||1,H=((M=E.settings)==null?void 0:M.radius)||30,d=this.currentTime*N*Math.PI*2;Q.x+=Math.cos(d)*H*A*5,Q.y+=Math.sin(d)*H*A*5,Q.rotation+=2*A*5}else if(E.type===X.Vortex){const N=((e=E.settings)==null?void 0:e.radius)||400,H=((R=E.settings)==null?void 0:R.speed)||2,d=((T=E.settings)==null?void 0:T.strength)||1;if(h<N){const DA=Math.pow(1-h/N,1.5),cA=this.currentTime*H*Math.PI*2,QA=Math.cos(cA)*30-o*.4,wA=Math.sin(cA)*30-s*.4;Q.x+=QA*DA*d*A*5,Q.y+=wA*DA*d*A*5,Q.rotation+=5*DA*d*A*5,Q.scale_x*=1-DA*.1*d*A,Q.scale_y*=1-DA*.1*d*A}}else if(E.type===X.Fluid){const N=((b=E.settings)==null?void 0:b.radius)||300,H=((Y=E.settings)==null?void 0:Y.strength)||1;if(h<N){const d=Math.pow(1-h/N,1.2),DA=o/(h||1)*d*1.2*H,cA=s/(h||1)*d*1.2*H;Q.x+=DA*10*A*5,Q.y+=cA*10*A*5,Q.scale_x*=1+d*.3*H*A,Q.scale_y*=1+d*.3*H*A}}else if(E.type===X.Elastic){const N=((P=E.settings)==null?void 0:P.radius)||300,H=((l=E.settings)==null?void 0:l.strength)||1;if(h<N){const d=1-h/N;Q.scale_x*=1+d*.4*H*A,Q.scale_y*=1+d*.4*H*A}}else if(E.type===X.Holographic){const N=Q.x-this.canvasWidth/2,H=Q.y-this.canvasHeight/2,d=((r=E.settings)==null?void 0:r.factor)||25;if(Q.x-=N/1e3*d*A*5,Q.y-=H/1e3*d*A*5,Q.style){const DA=1-Math.min(1,h/400);Q.style.exposure=(Q.style.exposure||1)+DA*.5*A}}else if(E.type===X.Sticky){const N=((u=E.settings)==null?void 0:u.radius)||80,H=((gA=E.settings)==null?void 0:gA.strength)||1;if(h<N){const d=Math.pow(1-h/N,2);Q.x-=o*d*H*A*10,Q.y-=s*d*H*A*10,Q.scale_x*=1-d*.1*H*A,Q.scale_y*=1-d*.1*H*A}}else if(E.type===X.Dilation){const N=(($=E.settings)==null?void 0:$.size)||120,H=((f=E.settings)==null?void 0:f.strength)||1;if(h<N){const d=1-h/N;Q.scale_x*=1+d*.5*H*A,Q.scale_y*=1+d*.5*H*A}}else if(E.type===X.Parallax){const N=((_=E.settings)==null?void 0:_.factor)||.05,H=this.canvasHeight/2,d=(this._lastPointerPos.y-H)*N;Q.y+=d*A*10}else if(E.type===X.Noise||E.type===X.Float){const N=(((IA=E.settings)==null?void 0:IA.frequency)||((O=E.settings)==null?void 0:O.speed)||1)*.002,H=(((q=E.settings)==null?void 0:q.amplitude)||((n=E.settings)==null?void 0:n.range)||50)*(((Z=E.settings)==null?void 0:Z.strength)||1),d=Date.now();Q.x+=Math.sin(d*N)*H*A,Q.y+=Math.cos(d*N*.8)*H*A,Q.rotation+=Math.sin(d*N*.5)*5*A}else if(E.type===X.Pulse){const N=(((iA=E.settings)==null?void 0:iA.speed)||1)*.005,H=(((j=E.settings)==null?void 0:j.scale)||1.2)-1,d=Math.sin(Date.now()*N),DA=((L=E.settings)==null?void 0:L.strength)||1;Q.scale_x*=1+d*H*DA*A,Q.scale_y*=1+d*H*DA*A,Q.style&&(Q.style.exposure=(Q.style.exposure||1)+Math.max(0,d)*.1*DA*A)}else if(E.type===X.Draggable){const N=((v=E.settings)==null?void 0:v.radius)||150,H=this.draggingBehaviors.has(g.id);if(h<N||H){const d=((CA=E.settings)==null?void 0:CA.strength)||1,DA=H?1:Math.max(0,1-h/N);this.applyBehaviorSensor(Q,xA.PositionX,DA*d,A,E.settings),this.applyBehaviorSensor(Q,xA.PositionY,DA*d,A,E.settings)}}else if(E.type===X.Scroll){const N=((oA=E.settings)==null?void 0:oA.axis)||"vertical",H=((tA=E.settings)==null?void 0:tA.factor)||.5,d=((m=E.settings)==null?void 0:m.strength)||1;(N==="vertical"||N==="both")&&(Q.y+=this.scrollOffset.y*H*d*A),(N==="horizontal"||N==="both")&&(Q.x+=this.scrollOffset.x*H*d*A)}else if(E.type===X.LookAt){const N=((V=E.settings)==null?void 0:V.factor)||1,H=((p=E.settings)==null?void 0:p.strength)||1,d=Math.atan2(-s,-o)*(180/Math.PI),DA=Q.rotation,cA=(d-DA+180)%360-180;Q.rotation+=cA*N*H*A*10}else if(E.type===X.Glint||E.type===X.Scan){const N=(((U=E.settings)==null?void 0:U.speed)||1)*.004,H=((x=E.settings)==null?void 0:x.strength)||1,d=(Math.sin(Date.now()*N)+1)/2;Q.style&&(Q.style.exposure=(Q.style.exposure||1)+d*H*A*5),Q.x+=(d-.5)*20*H*A}else if(E.type===X.Ratchet){const N=((z=E.settings)==null?void 0:z.steps)||12,H=(((KA=E.settings)==null?void 0:KA.speed)||1)*30,d=Math.floor(Q.rotation/(360/N))*(360/N);Q.rotation=this.lerp(Q.rotation,d+H*A,.1)}else if(E.type===X.Jitter&&h<300){const N=((kA=E.settings)==null?void 0:kA.strength)||1,H=(((MA=E.settings)==null?void 0:MA.intensity)||5)*N;Q.x+=(Math.random()-.5)*H*A*60,Q.y+=(Math.random()-.5)*H*A*60,Q.rotation+=(Math.random()-.5)*H*A*120}else if(E.type===X.Follower){const N=(nA=E.settings)==null?void 0:nA.targetId;if(N){const H=this.objectStates.get(N);if(H){const d=((BA=E.settings)==null?void 0:BA.stiffness)||.1,DA=H.x-Q.x,cA=H.y-Q.y;Q.x+=DA*d*A*60,Q.y+=cA*d*A*60}}}else E.type===X.Wrap&&(Q.x<0?Q.x=this.canvasWidth:Q.x>this.canvasWidth&&(Q.x=0),Q.y<0?Q.y=this.canvasHeight:Q.y>this.canvasHeight&&(Q.y=0))})})}applyBehaviorSensor(A,I,C,g,Q){const E=(Q==null?void 0:Q.intensity)||(Q==null?void 0:Q.strength)||1,i=C*E*g;switch(I){case xA.Scale:A.scale_x*=1+i*.5,A.scale_y*=1+i*.5;break;case xA.Opacity:A.opacity=Math.max(0,Math.min(100,A.opacity-i*100));break;case xA.RotateZ:A.rotation+=i*180;break;case xA.RotateX:A.rotate_x=(A.rotate_x||0)+i*180;break;case xA.RotateY:A.rotate_y=(A.rotate_y||0)+i*180;break;case xA.PositionX:A.x+=i*300;break;case xA.PositionY:A.y+=i*300;break;case xA.SkewX:A.skew_x=(A.skew_x||0)+i*45;break;case xA.Blur:A.style||(A.style={}),A.style.blur=Math.min(100,(A.style.blur||0)+i*50);break;case xA.Exposure:A.style||(A.style={}),A.style.exposure=(A.style.exposure||1)+i*2;break;case xA.HueShift:A.style||(A.style={}),A.style.hue=(A.style.hue||0)+i*360;break;case xA.CornerRadius:A.corner_radius=Math.min(200,(A.corner_radius||0)+i*100);break;case xA.LetterSpacing:A.geometry||(A.geometry={}),A.geometry.letterSpacing=(A.geometry.letterSpacing||0)+i*10;break}}lerp(A,I,C){return A*(1-C)+I*C}deepMerge(A,I){if(!A)return I;if(!I)return A;if(typeof A!="object"||typeof I!="object"||A===null||I===null)return I;const C={...A};for(const g in I)Object.prototype.hasOwnProperty.call(I,g)&&(I[g]&&typeof I[g]=="object"&&!Array.isArray(I[g])?C[g]=this.deepMerge(A[g],I[g]):C[g]=I[g]);return C}}const OQ=({artboard:B,config:A})=>{const I={...B.seo,...A},C=I.enableSmartExtraction!==!1;JA.useEffect(()=>{const i=I.title||B.name;i&&(document.title=i);let D=I.description;if(!D&&C){const h=B.objects.filter(a=>a.geometry.type==="Text").sort((a,G)=>{var K,t;return(((K=G.geometry.text)==null?void 0:K.length)||0)-(((t=a.geometry.text)==null?void 0:t.length)||0)});h.length>0&&(D=h[0].geometry.text)}D&&(g("name","description",D),g("property","og:description",D)),I.keywords&&I.keywords.length>0&&g("name","keywords",I.keywords.join(", "));const o=I.ogImage||B.backgroundImage;o&&g("property","og:image",o),i&&g("property","og:title",i),g("property","og:type","website")},[I,B,C]);const g=(i,D,o)=>{let s=document.querySelector(`meta[${i}="${D}"]`);s||(s=document.createElement("meta"),s.setAttribute(i,D),document.head.appendChild(s)),s.setAttribute("content",o)},Q=()=>{const i=[];return i.push(fA.jsx("h1",{children:I.title||B.name},"artboard-title")),B.objects.forEach((o,s)=>{if(!(!o.visible&&o.isVisible!==!0))if(o.geometry.type==="Text"){const h=o.geometry.text;h&&(o.geometry.fontSize>24?i.push(fA.jsx("h2",{children:h},o.id||s)):i.push(fA.jsx("p",{children:h},o.id||s)))}else if(o.geometry.type==="Image"){const h=o.geometry.src,a=o.altText||o.name||"Illustration";i.push(fA.jsx("img",{src:h,alt:a},o.id||s))}else o.type==="Button"&&i.push(fA.jsx("button",{children:o.name||"Button"},o.id||s))}),i},E=I.jsonLd||{"@context":"https://schema.org","@type":"VisualArtwork",name:I.title||B.name,description:I.description,image:I.ogImage||B.backgroundImage,abstract:"Animated interface created with ExodeUI"};return fA.jsxs("div",{id:`exode-seo-${B.id||"default"}`,"aria-hidden":"false",style:{position:"absolute",width:"1px",height:"1px",padding:"0",margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",border:"0",zIndex:-1},children:[Q(),fA.jsx("script",{type:"application/ld+json",children:JSON.stringify(E)})]})},Ai=JA.forwardRef(({artboard:B,src:A,className:I,style:C,autoPlay:g=!0,fit:Q="Contain",alignment:E="Center",enableSEO:i=!0,seo:D,onReady:o,onTrigger:s,onInputUpdate:h,onComponentChange:a,onToggle:G,onInputChange:K,onInputFocus:t,onInputBlur:S,onLog:y,currentTime:F},M)=>{const e=JA.useRef(null),R=JA.useRef(new xQ),T=JA.useRef(),b=JA.useRef(0),Y=JA.useRef(null),[P,l]=JA.useState(B||null);JA.useImperativeHandle(M,()=>e.current),JA.useEffect(()=>{console.log("[ExodeUI] Layout Effect - Component Updated/Mounted"),R.current.setLayout(Q,E)},[Q,E]),JA.useEffect(()=>{s&&R.current.setTriggerCallback(s)},[s]),JA.useEffect(()=>{h&&R.current.setInputUpdateCallback(h)},[h]),JA.useEffect(()=>{a&&R.current.setComponentChangeCallback(a)},[a]),JA.useEffect(()=>{G&&R.current.setToggleCallback(G)},[G]),JA.useEffect(()=>{K&&R.current.setInputChangeCallback(K)},[K]),JA.useEffect(()=>{t&&R.current.setInputFocusCallback(t)},[t]),JA.useEffect(()=>{S&&R.current.setInputBlurCallback(S)},[S]),JA.useEffect(()=>{(async()=>{const gA=R.current;let $=B;if(!$&&A)try{$=await(await fetch(A)).json()}catch(f){console.error("Failed to load ExodeUI animation:",f);return}if($){const f=$.id||$.name||"default";Y.current!==f&&(gA.load($),Y.current=f,l($),b.current=0),o&&o(gA)}})()},[B,A]),JA.useEffect(()=>{F!==void 0&&R.current.seek(F)},[F]),JA.useEffect(()=>{const u=R.current,gA=e.current;if(!gA)return;const $=gA.getContext("2d");if(!$)return;$.imageSmoothingEnabled=!0,$.imageSmoothingQuality="high",y&&u.setOnLogCallback(y);const f=IA=>{b.current||(b.current=IA);const O=(IA-b.current)/1e3;b.current=IA,g&&u.advance(O);const q=window.devicePixelRatio||1,n=gA.getBoundingClientRect(),Z=Math.floor(n.width*q),iA=Math.floor(n.height*q);(gA.width!==Z||gA.height!==iA)&&(gA.width=Z,gA.height=iA),u.render($,Z,iA),T.current=requestAnimationFrame(f)};T.current=requestAnimationFrame(f);const _=()=>{u.handleScroll(window.scrollX,window.scrollY)};return window.addEventListener("scroll",_,{passive:!0}),()=>{T.current&&cancelAnimationFrame(T.current),window.removeEventListener("scroll",_)}},[g]);const r=(u,gA)=>{const $=u.currentTarget.getBoundingClientRect(),f=u.clientX-$.left,_=u.clientY-$.top,IA=$.width,O=$.height;R.current.handlePointerInput(gA,f,_,IA,O)};return fA.jsxs("div",{style:{position:"relative",width:"100%",height:"100%",...C},className:I,children:[fA.jsx("canvas",{ref:e,style:{width:"100%",height:"100%",outline:"none"},tabIndex:0,onPointerDown:u=>{var gA;r(u,"down"),(gA=e.current)==null||gA.focus()},onPointerUp:u=>r(u,"up"),onPointerMove:u=>r(u,"move"),onPointerLeave:u=>r(u,"blur"),onClick:u=>r(u,"click"),onKeyDown:u=>{u.key==="Backspace"||u.key==="Enter"||u.key,R.current.handleKeyDown(u.nativeEvent)}}),i&&P&&fA.jsx(OQ,{artboard:P,config:D})]})});function Ii(){const[B,A]=JA.useState(null),I=JA.useCallback((h,a)=>{B==null||B.setInputBool(h,a)},[B]),C=JA.useCallback((h,a)=>{B==null||B.setInputNumber(h,a)},[B]),g=JA.useCallback(h=>{B==null||B.fireTrigger(h)},[B]),Q=JA.useCallback((h,a)=>{B==null||B.setInputText(h,a)},[B]),E=JA.useCallback((h,a)=>{B==null||B.setInputNumberArray(h,a)},[B]),i=JA.useCallback((h,a)=>{B==null||B.setInputStringArray(h,a)},[B]),D=JA.useCallback((h,a)=>{B==null||B.updateObjectOptions(h,a)},[B]),o=JA.useCallback((h,a,G)=>{B==null||B.updateConstraint(h,a,G)},[B]),s=JA.useCallback((h,a)=>{B==null||B.updateGraphData(h,a)},[B]);return{setEngine:A,engine:B,setInputBool:I,setInputNumber:C,fireTrigger:g,setInputText:Q,setInputNumberArray:E,setInputStringArray:i,updateConstraint:o,updateGraphData:s,updateObjectOptions:D}}const gi={version:"6.0.33"}.version;dA.BehaviorSensor=xA,dA.BehaviorType=X,dA.ConditionOp=tC,dA.ExodeSEO=OQ,dA.ExodeUICanvas=Ai,dA.ExodeUIEngine=xQ,dA.LogicOp=FI,dA.VERSION=gi,dA.useExodeUI=Ii,Object.defineProperty(dA,Symbol.toStringTag,{value:"Module"})});
|
package/dist/index.mjs
CHANGED
|
@@ -9348,7 +9348,7 @@ const oi = ({ artboard: B, config: A }) => {
|
|
|
9348
9348
|
]
|
|
9349
9349
|
}
|
|
9350
9350
|
);
|
|
9351
|
-
},
|
|
9351
|
+
}, Gi = PQ(
|
|
9352
9352
|
({
|
|
9353
9353
|
artboard: B,
|
|
9354
9354
|
src: A,
|
|
@@ -9454,7 +9454,7 @@ const oi = ({ artboard: B, config: A }) => {
|
|
|
9454
9454
|
] });
|
|
9455
9455
|
}
|
|
9456
9456
|
);
|
|
9457
|
-
function
|
|
9457
|
+
function ti() {
|
|
9458
9458
|
const [B, A] = CQ(null), I = AI((h, a) => {
|
|
9459
9459
|
B == null || B.setInputBool(h, a);
|
|
9460
9460
|
}, [B]), C = AI((h, a) => {
|
|
@@ -9489,15 +9489,17 @@ function ai() {
|
|
|
9489
9489
|
updateObjectOptions: D
|
|
9490
9490
|
};
|
|
9491
9491
|
}
|
|
9492
|
-
const
|
|
9492
|
+
const Di = "6.0.33", wi = {
|
|
9493
|
+
version: Di
|
|
9494
|
+
}, Ki = wi.version;
|
|
9493
9495
|
export {
|
|
9494
9496
|
uA as BehaviorSensor,
|
|
9495
9497
|
v as BehaviorType,
|
|
9496
9498
|
zQ as ConditionOp,
|
|
9497
9499
|
oi as ExodeSEO,
|
|
9498
|
-
|
|
9500
|
+
Gi as ExodeUICanvas,
|
|
9499
9501
|
ii as ExodeUIEngine,
|
|
9500
9502
|
LI as LogicOp,
|
|
9501
|
-
|
|
9502
|
-
|
|
9503
|
+
Ki as VERSION,
|
|
9504
|
+
ti as useExodeUI
|
|
9503
9505
|
};
|
package/package.json
CHANGED
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|