@field/cascade 0.2.22

package/dist/assets/image-BUcQC7PG.js

@@ -0,0 +1,2076 @@
+import{c as e,o as t}from"./nodeTypeUtils-CweA3NHd.js";import{E as n,T as r,_ as i,g as a,o}from"./index-BXYXSdgh.js";var s=class extends o{constructor(e,t){super(e,`Color`,t)}setup(){this.addParm(`color`,{value:{r:1,g:1,b:1},type:`color`,displayName:`Color`}),this.addResolutionParm(),this.output=this.out(`image`),this.watchProp(`color`,()=>this.requestCook()),this.onReady=()=>this.requestCook()}render(){let[e,t]=this.getResolution(),r=n(this.props.color.value),a=i.solid(e,t,r);this.setOutput(this.output,a)}},c=class extends o{constructor(e,t){super(e,`File`,t)}setup(){this.imageInput=this.in(`image`,null),this.addParm(`file`,{value:``,type:`image`,params:{accept:`image/*`},displayName:`File`,onChange:()=>{this.props.file.value&&!this.imageInput.value&&this.requestCook()}}),this.addParm(`resolutionMode`,{value:`original`,params:{options:[{value:`original`,label:`Original`},{value:`max`,label:`Max Resolution`},{value:`fixed`,label:`Fixed Resolution`}]},displayName:`Resolution Mode`,onChange:()=>{(this.props.file.value||this.imageInput.value)&&this.requestCook()}}),this.addParm(`maxResolution`,{value:[2048,2048],params:{min:[1,1],max:[4096,4096]},displayName:`Max Resolution`,hidden:()=>this.props.resolutionMode.value!==`max`,onChange:()=>{(this.props.file.value||this.imageInput.value)&&this.props.resolutionMode.value===`max`&&this.requestCook()}}),this.addParm(`fixedResolution`,{value:[512,512],params:{min:[1,1],max:[4096,4096]},displayName:`Fixed Resolution`,hidden:()=>this.props.resolutionMode.value!==`fixed`,onChange:()=>{(this.props.file.value||this.imageInput.value)&&this.props.resolutionMode.value===`fixed`&&this.requestCook()}}),this.output=this.out(`image`),this.imageInput.onChange=()=>this.requestCook(),this.onReady=()=>{(this.props.file.value||this.imageInput.value)&&this.requestCook()}}async render(){let e=null;if(this.imageInput.value){if(this.imageInput.value instanceof i)e=this.imageInput.value;else if(this.imageInput.value instanceof HTMLImageElement||this.imageInput.value instanceof HTMLCanvasElement)e=i.fromCanvas(this.imageInput.value);else if(typeof this.imageInput.value==`string`){let t=new Image;t.crossOrigin=`anonymous`,await new Promise((e,n)=>{t.onload=()=>e(),t.onerror=n,t.src=this.imageInput.value}),e=i.fromCanvas(t)}}else if(this.props.file.value){let t=new Image;t.crossOrigin=`anonymous`,await new Promise((e,n)=>{t.onload=()=>e(),t.onerror=n,t.src=this.props.file.value}),e=i.fromCanvas(t)}if(e)try{let t=this.props.resolutionMode.value,n;if(t===`original`)n=e;else if(t===`max`){let[t,r]=this.props.maxResolution.value,i=e.width/e.height,a=e.width,o=e.height;a>t&&(a=t,o=t/i),o>r&&(o=r,a=r*i),a=Math.round(a),o=Math.round(o),n=a!==e.width||o!==e.height?this.resizeBuffer(e,a,o):e}else{let[t,r]=this.props.fixedResolution.value;n=this.resizeBuffer(e,t,r)}this.setOutput(this.output,n)}catch(e){this.error=e,console.error(`Failed to process image:`,e)}}resizeBuffer(e,t,n){let r=i.rgba(t,n),a=e.width/t,o=e.height/n;for(let i=0;i<Math.min(e.channelCount,4);i++){let s=r.channels[i];for(let r=0;r<n;r++)for(let n=0;n<t;n++){let c=n*a,l=r*o;s[r*t+n]=e.sample(c,l,i)}}return e.channelCount<4&&r.fill(3,1),r}},l=class extends o{constructor(e,t){super(e,`Composite`,t)}setup(){this.image1=this.in(`image1`,null),this.image2=this.in(`image2`,null),this.addParm(`blendMode`,{value:`multiply`,params:{options:[{value:`normal`,label:`Normal`},{value:`multiply`,label:`Multiply`},{value:`screen`,label:`Screen`},{value:`overlay`,label:`Overlay`},{value:`darken`,label:`Darken`},{value:`lighten`,label:`Lighten`},{value:`color-dodge`,label:`Color Dodge`},{value:`color-burn`,label:`Color Burn`},{value:`hard-light`,label:`Hard Light`},{value:`soft-light`,label:`Soft Light`},{value:`difference`,label:`Difference`},{value:`exclusion`,label:`Exclusion`},{value:`add`,label:`Add`},{value:`subtract`,label:`Subtract`},{value:`divide`,label:`Divide`},{value:`pin-light`,label:`Pin Light`},{value:`vivid-light`,label:`Vivid Light`},{value:`linear-dodge`,label:`Linear Dodge`},{value:`linear-burn`,label:`Linear Burn`}]},displayName:`Blend Mode`,onChange:()=>this.requestCook()}),this.addParm(`opacity`,{value:1,params:{min:0,max:1,step:.01},displayName:`Opacity`,onChange:()=>this.requestCook()}),this.addParm(`outputResolution`,{value:`input1`,params:{options:[{value:`input1`,label:`Use Input 1`},{value:`input2`,label:`Use Input 2`},{value:`largest`,label:`Largest Input`},{value:`smallest`,label:`Smallest Input`},{value:`custom`,label:`Custom`}]},displayName:`Output Resolution`,onChange:()=>this.requestCook()}),this.addParm(`customResolution`,{value:[512,512],params:{min:[1,1],max:[4096,4096],integer:!0},displayName:`Resolution`,hidden:()=>this.props.outputResolution.value!==`custom`,onChange:()=>this.requestCook()}),this.addParm(`fitMode`,{value:`fill`,params:{options:[{value:`fill`,label:`Fill (Crop)`},{value:`fit`,label:`Fit (Letterbox)`},{value:`stretch`,label:`Stretch`},{value:`native`,label:`Native (No Scale)`}]},displayName:`Fit Mode`,onChange:()=>this.requestCook()}),this.output=this.out(`image`),this.image1.onChange=()=>this.requestCook(),this.image2.onChange=()=>this.requestCook(),this.onReady=()=>this.requestCook()}blendBuffers(e,t,n,r){let a=e.width,o=e.height,s=i.rgba(a,o),c=e.channelCount>=4?e:e.toRGBA(),l=t.channelCount>=4?t:t.toRGBA(),u=c.channels[0],d=c.channels[1],f=c.channels[2],p=c.channels[3],m=l.channels[0],h=l.channels[1],g=l.channels[2],_=l.channels[3],v=s.channels[0],y=s.channels[1],b=s.channels[2],x=s.channels[3];for(let e=0;e<a*o;e++){let t=u[e],i=d[e],a=f[e],o=p[e],s=m[e],c=h[e],l=g[e],S=_[e],C,w,T;switch(n){case`normal`:C=s,w=c,T=l;break;case`multiply`:C=t*s,w=i*c,T=a*l;break;case`screen`:C=1-(1-t)*(1-s),w=1-(1-i)*(1-c),T=1-(1-a)*(1-l);break;case`overlay`:C=t<.5?2*t*s:1-2*(1-t)*(1-s),w=i<.5?2*i*c:1-2*(1-i)*(1-c),T=a<.5?2*a*l:1-2*(1-a)*(1-l);break;case`darken`:C=Math.min(t,s),w=Math.min(i,c),T=Math.min(a,l);break;case`lighten`:C=Math.max(t,s),w=Math.max(i,c),T=Math.max(a,l);break;case`color-dodge`:C=s===1?1:Math.min(1,t/(1-s)),w=c===1?1:Math.min(1,i/(1-c)),T=l===1?1:Math.min(1,a/(1-l));break;case`color-burn`:C=s===0?0:Math.max(0,1-(1-t)/s),w=c===0?0:Math.max(0,1-(1-i)/c),T=l===0?0:Math.max(0,1-(1-a)/l);break;case`hard-light`:C=s<.5?2*t*s:1-2*(1-t)*(1-s),w=c<.5?2*i*c:1-2*(1-i)*(1-c),T=l<.5?2*a*l:1-2*(1-a)*(1-l);break;case`soft-light`:C=s<.5?t-(1-2*s)*t*(1-t):t+(2*s-1)*(Math.sqrt(t)-t),w=c<.5?i-(1-2*c)*i*(1-i):i+(2*c-1)*(Math.sqrt(i)-i),T=l<.5?a-(1-2*l)*a*(1-a):a+(2*l-1)*(Math.sqrt(a)-a);break;case`difference`:C=Math.abs(t-s),w=Math.abs(i-c),T=Math.abs(a-l);break;case`exclusion`:C=t+s-2*t*s,w=i+c-2*i*c,T=a+l-2*a*l;break;case`add`:C=Math.min(1,t+s),w=Math.min(1,i+c),T=Math.min(1,a+l);break;case`subtract`:C=Math.max(0,t-s),w=Math.max(0,i-c),T=Math.max(0,a-l);break;case`divide`:C=s===0?1:Math.min(1,t/s),w=c===0?1:Math.min(1,i/c),T=l===0?1:Math.min(1,a/l);break;case`pin-light`:C=s<.5?Math.min(t,2*s):Math.max(t,2*(s-.5)),w=c<.5?Math.min(i,2*c):Math.max(i,2*(c-.5)),T=l<.5?Math.min(a,2*l):Math.max(a,2*(l-.5));break;case`vivid-light`:C=s<.5?s===0?0:1-(1-t)/(2*s):s===1?1:t/(2*(1-s)),w=c<.5?c===0?0:1-(1-i)/(2*c):c===1?1:i/(2*(1-c)),T=l<.5?l===0?0:1-(1-a)/(2*l):l===1?1:a/(2*(1-l));break;case`linear-dodge`:C=Math.min(1,t+s),w=Math.min(1,i+c),T=Math.min(1,a+l);break;case`linear-burn`:C=Math.max(0,t+s-1),w=Math.max(0,i+c-1),T=Math.max(0,a+l-1);break;default:C=s,w=c,T=l}v[e]=t+(C-t)*r*S,y[e]=i+(w-i)*r*S,b[e]=a+(T-a)*r*S,x[e]=o+(S-o)*r}return s}render(){let e=this.props.outputResolution.value,t=this.props.fitMode.value,n=this.props.customResolution.value,{buffers:r}=this.prepareInputs([this.image1.value,this.image2.value],e,t,n),[i,a]=r;if(!i||!a)return;let o=this.props.blendMode.value,s=this.props.opacity.value;try{let e=this.blendBuffers(i,a,o,s);this.setOutput(this.output,e)}catch(e){console.error(`Composite render error:`,e),this.error=e}}},u=class extends o{constructor(e,t){super(e,`Checkers`,t)}setup(){this.addParm(`color1`,{value:{r:1,g:1,b:1},type:`color`,displayName:`Color 1`,onChange:()=>this.requestCook()}),this.addParm(`color2`,{value:{r:0,g:0,b:0},type:`color`,displayName:`Color 2`,onChange:()=>this.requestCook()}),this.addParm(`mode`,{value:`size`,params:{options:[{value:`size`,label:`Size`},{value:`divisions`,label:`Divisions`}]},displayName:`Mode`,onChange:()=>this.requestCook()}),this.addParm(`size`,{value:32,params:{min:1,max:512,step:.1},displayName:`Size`,hidden:()=>this.props.mode.value!==`size`,onChange:()=>this.requestCook()}),this.addParm(`divisions`,{value:16,params:{min:1,max:512,step:1,integer:!0},displayName:`Divisions`,hidden:()=>this.props.mode.value!==`divisions`,onChange:()=>this.requestCook()}),this.addParm(`centered`,{value:!1,type:`boolean`,displayName:`Centered`,onChange:()=>this.requestCook()}),this.addResolutionParm(),this.output=this.out(`image`),this.onReady=()=>this.requestCook()}render(){let[e,t]=this.getResolution(),r=this.props.mode.value,a=n(this.props.color1.value),o=n(this.props.color2.value),s=this.props.centered.value,c;c=r===`size`?this.props.size.value:e/this.props.divisions.value;let l=0,u=0;s&&(l=e/2%c-c/2,u=t/2%c-c/2);let d=i.rgba(e,t),f=d.r(),p=d.g(),m=d.b(),h=d.a();for(let n=0;n<t;n++)for(let t=0;t<e;t++){let r=n*e+t,i=(Math.floor((t-l)/c)+Math.floor((n-u)/c))%2==0?a:o;f[r]=i.r,p[r]=i.g,m[r]=i.b,h[r]=i.a}d.markDirty(),this.setOutput(this.output,d)}},d=class extends o{constructor(e,t){super(e,`Resize`,t)}setup(){this.image=this.in(`image`,null),this.addParm(`mode`,{value:`scale`,params:{options:[{value:`scale`,label:`Scale`},{value:`fixed`,label:`Fixed`}]},displayName:`Mode`,onChange:()=>this.requestCook()}),this.addParm(`scale`,{value:1,params:{min:.1,max:10,step:.1},displayName:`Scale`,hidden:()=>this.props.mode.value!==`scale`,onChange:()=>this.requestCook()}),this.addParm(`width`,{value:512,params:{min:1,max:4096,step:1},displayName:`Width`,hidden:()=>this.props.mode.value!==`fixed`,onChange:()=>this.requestCook()}),this.addParm(`height`,{value:512,params:{min:1,max:4096,step:1},displayName:`Height`,hidden:()=>this.props.mode.value!==`fixed`,onChange:()=>this.requestCook()}),this.output=this.out(`image`),this.image.onChange=()=>this.requestCook(),this.onReady=()=>this.requestCook()}resizeBuffer(e,t,n){let r=i.rgba(t,n),a=e.width/t,o=e.height/n;for(let i=0;i<Math.min(e.channelCount,4);i++){let s=r.channels[i];for(let r=0;r<n;r++)for(let n=0;n<t;n++){let c=n*a,l=r*o;s[r*t+n]=e.sample(c,l,i)}}return e.channelCount<4&&r.fill(3,1),r}render(){let e=this.toImageBuffer(this.image.value);if(!e)return;let t,n;if(this.props.mode.value===`scale`){let r=this.props.scale.value;t=Math.round(e.width*r),n=Math.round(e.height*r)}else t=this.props.width.value,n=this.props.height.value;let r=this.resizeBuffer(e,t,n);this.setOutput(this.output,r)}},f=class extends o{constructor(e,t){super(e,`NormalMap`,t)}setup(){this.image=this.in(`image`,null),this.addParm(`scale`,{value:1,params:{min:0,max:10,step:.1},displayName:`Scale`,onChange:()=>this.requestCook()}),this.addParm(`flipX`,{value:!1,type:`boolean`,displayName:`Flip X`,onChange:()=>this.requestCook()}),this.addParm(`flipY`,{value:!1,type:`boolean`,displayName:`Flip Y`,onChange:()=>this.requestCook()}),this.output=this.out(`image`),this.image.onChange=()=>this.requestCook(),this.onReady=()=>this.requestCook()}computeNormalMap(e,t,n,r){let{width:a,height:o}=e,s=i.rgba(a,o),c=e.channels[0],l=s.channels[0],u=s.channels[1],d=s.channels[2],f=s.channels[3];for(let e=0;e<o;e++)for(let i=0;i<a;i++){let s=e*a+i,p=c[s],m=c[Math.min(i+1,a-1)+e*a],h=c[i+Math.min(e+1,o-1)*a],g=(m-p)*t,_=(h-p)*t,v=n?-g:g,y=r?-_:_,b=-v,x=-y,S=Math.sqrt(b*b+x*x+1),C=b/S,w=x/S,T=1/S;l[s]=C*.5+.5,u[s]=w*.5+.5,d[s]=T*.5+.5,f[s]=1}return s}render(){let e=this.toImageBuffer(this.image.value);if(!e)return;let t=this.props.scale.value,n=this.props.flipX.value,r=this.props.flipY.value,i=this.computeNormalMap(e,t,n,r);this.setOutput(this.output,i)}},p=class extends o{constructor(e,t){super(e,`Ramp`,t)}setup(){this.addParm(`type`,{value:`horizontal`,params:{options:[{value:`horizontal`,label:`Horizontal`},{value:`vertical`,label:`Vertical`},{value:`radial`,label:`Radial`},{value:`concentric`,label:`Concentric`}]},displayName:`Type`,onChange:()=>this.requestCook()}),this.addParm(`points`,{value:[{position:0,color:{r:0,g:0,b:0},interpolation:`linear`},{position:1,color:{r:1,g:1,b:1},interpolation:`linear`}],type:`colorramp`,displayName:`Ramp`,onChange:()=>this.requestCook()}),this.addResolutionParm(),this.output=this.out(`image`),this.onReady=()=>this.requestCook()}normalizeRampColor(e){if(typeof e==`object`&&e&&`r`in e&&`g`in e&&`b`in e){let t=e.r<=1&&e.g<=1&&e.b<=1;return{r:t?e.r:e.r/255,g:t?e.g:e.g/255,b:t?e.b:e.b/255,a:e.a===void 0?1:t?e.a:e.a/255}}if(Array.isArray(e)){let t=e.every(e=>e<=1);return{r:t?e[0]:e[0]/255,g:t?e[1]:e[1]/255,b:t?e[2]:e[2]/255,a:e[3]===void 0?1:t?e[3]:e[3]/255}}if(typeof e==`string`){let t=e.match(/rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/);if(t)return{r:parseInt(t[1],10)/255,g:parseInt(t[2],10)/255,b:parseInt(t[3],10)/255,a:1};let n=e.replace(`#`,``);if(n.length===3||n.length===6){let e=n.length===3?n.split(``).map(e=>e+e).join(``):n,t=/^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(t)return{r:parseInt(t[1],16)/255,g:parseInt(t[2],16)/255,b:parseInt(t[3],16)/255,a:1}}}return{r:0,g:0,b:0,a:1}}interpolateColor(e,t,n,r){return r===`constant`?n<.5?e:t:(r===`smooth`&&(n=n*n*(3-2*n)),{r:e.r+(t.r-e.r)*n,g:e.g+(t.g-e.g)*n,b:e.b+(t.b-e.b)*n,a:(e.a??1)+((t.a??1)-(e.a??1))*n})}getColorAtPosition(e,t){let n=[...e].sort((e,t)=>e.position-t.position);t=Math.max(0,Math.min(1,t));let r=null,i=null;for(let e=0;e<n.length;e++)if(n[e].position<=t&&(r=n[e]),n[e].position>=t&&!i){i=n[e];break}if(!r&&i)return this.normalizeRampColor(i.color);if(r&&!i)return this.normalizeRampColor(r.color);if(!r&&!i)return{r:0,g:0,b:0,a:1};if(r.position===t)return this.normalizeRampColor(r.color);if(i.position===t)return this.normalizeRampColor(i.color);let a=(t-r.position)/(i.position-r.position),o=this.normalizeRampColor(r.color),s=this.normalizeRampColor(i.color),c=i.interpolation||`linear`;return this.interpolateColor(o,s,a,c)}render(){let[e,t]=this.getResolution(),n=this.props.type.value,r=this.props.points.value||[];if(r.length===0)return;let a=i.rgba(e,t),o=a.r(),s=a.g(),c=a.b(),l=a.a(),u=e/2,d=t/2,f=Math.sqrt(u*u+d*d);for(let i=0;i<t;i++)for(let a=0;a<e;a++){let p=0;if(n===`horizontal`)p=a/e;else if(n===`vertical`)p=i/t;else if(n===`radial`){let e=a-u,t=i-d;p=(Math.atan2(t,e)+Math.PI)/(2*Math.PI)}else if(n===`concentric`){let e=a-u,t=i-d;p=Math.sqrt(e*e+t*t)/f}let m=this.getColorAtPosition(r,p),h=i*e+a;o[h]=m.r,s[h]=m.g,c[h]=m.b,l[h]=m.a??1}a.markDirty(),this.setOutput(this.output,a)}},m=class extends o{constructor(e,t){super(e,`Noise`,t),this.noise2D=null,this.currentSeed=null}setup(){this.addParm(`seed`,{value:0,params:{min:0,max:1e4,step:1,integer:!0},displayName:`Seed`,onChange:()=>{this.initNoise().then(()=>{this.noise2D&&this.requestCook()})}}),this.addParm(`scale`,{value:.01,params:{min:.001,max:1,step:.001},displayName:`Scale`,onChange:()=>this.requestCook()}),this.addParm(`iterations`,{value:4,params:{min:1,max:8,step:1,integer:!0},displayName:`Iterations`,onChange:()=>this.requestCook()}),this.addResolutionParm(),this.output=this.out(`image`),this.onReady=async()=>{await this.initNoise(),this.noise2D&&this.requestCook()}}async initNoise(){try{let{createNoise2D:e}=await this.require(`simplex-noise`),t=this.props.seed.value,n=t;function r(){return n=(n*9301+49297)%233280,n/233280}this.noise2D=e(r),this.currentSeed=t}catch(e){console.error(`Failed to load simplex-noise:`,e),this.error=e}}render(){if(!this.noise2D){this.initNoise().then(()=>{this.noise2D&&this.requestCook()});return}let[e,t]=this.getResolution(),n=this.props.scale.value,r=this.props.iterations.value;if(this.props.seed.value!==this.currentSeed){this.initNoise().then(()=>{this.noise2D&&this.requestCook()});return}let a=i.grayscale(e,t),o=a.r();for(let i=0;i<t;i++)for(let t=0;t<e;t++){let a=0,s=1,c=n,l=0;for(let e=0;e<r;e++){let e=t*c,n=i*c,r=this.noise2D(e,n);a+=r*s,l+=s,s*=.5,c*=2}a=(a/l+1)*.5,o[i*e+t]=a}a.markDirty(),this.setOutput(this.output,a)}},h=class extends o{constructor(e,t){super(e,`Blur`,t)}setup(){this.image=this.in(`image`,null),this.addParm(`method`,{value:`box`,params:{options:[{value:`box`,label:`Box (Fast)`},{value:`gaussian`,label:`Gaussian (Accurate)`}]},displayName:`Method`,onChange:()=>this.requestCook()}),this.addParm(`radius`,{value:5,params:{min:0,max:100,step:.1},displayName:`Radius`,onChange:()=>this.requestCook()}),this.addParm(`wrapEdges`,{value:!1,type:`boolean`,displayName:`Wrap Edges`,onChange:()=>this.requestCook()}),this.output=this.out(`image`),this.image.onChange=()=>this.requestCook(),this.onReady=()=>this.requestCook()}boxBlur(e,t,n){if(t<=0)return e.clone();let{width:r,height:i}=e,a=t,o=this.boxesForGauss(a,3),s=e.emptyClone();for(let t=0;t<e.channelCount;t++){let a=new Float32Array(e.channels[t]);for(let e of o)this.boxBlurPass(a,r,i,e,n);s.channels[t].set(a)}return s}boxesForGauss(e,t){let n=Math.sqrt(12*e*e/t+1),r=Math.floor(n);r%2==0&&r--;let i=r+2,a=(12*e*e-t*r*r-4*t*r-3*t)/(-4*r-4),o=Math.round(a),s=[];for(let e=0;e<t;e++)s.push(e<o?r:i);return s.map(e=>(e-1)/2)}boxBlurPass(e,t,n,r,i){if(r<1)return;let a=new Float32Array(t*n),o=Math.floor(r),s=1/(o*2+1);for(let r=0;r<n;r++){let n=r*t,c=0;for(let r=-o;r<=o;r++){let a=i?(r%t+t)%t:Math.max(0,Math.min(t-1,r));c+=e[n+a]}a[n]=c*s;for(let r=1;r<t;r++){let l=i?((r-o-1)%t+t)%t:Math.max(0,r-o-1),u=i?((r+o)%t+t)%t:Math.min(t-1,r+o);c-=e[n+l],c+=e[n+u],a[n+r]=c*s}}for(let r=0;r<t;r++){let c=0;for(let e=-o;e<=o;e++){let o=i?(e%n+n)%n:Math.max(0,Math.min(n-1,e));c+=a[o*t+r]}e[r]=c*s;for(let l=1;l<n;l++){let u=i?((l-o-1)%n+n)%n:Math.max(0,l-o-1),d=i?((l+o)%n+n)%n:Math.min(n-1,l+o);c-=a[u*t+r],c+=a[d*t+r],e[l*t+r]=c*s}}}trueGaussianBlur(e,t,n){if(t<=0)return e.clone();let{width:r,height:i}=e,a=e.emptyClone(),o=Math.ceil(t*3)*2+1,s=new Float32Array(o),c=t/3,l=2*c*c,u=0,d=o-1>>1;for(let e=0;e<o;e++){let t=e-d,n=Math.exp(-(t*t)/l);s[e]=n,u+=n}let f=1/u;for(let e=0;e<o;e++)s[e]*=f;let p=n?e=>(e%r+r)%r:e=>e<0?0:e>=r?r-1:e,m=n?e=>(e%i+i)%i:e=>e<0?0:e>=i?i-1:e;for(let t=0;t<e.channelCount;t++){let n=e.channels[t],c=a.channels[t],l=new Float32Array(r*i);for(let e=0;e<i;e++){let t=e*r;for(let e=0;e<r;e++){let r=0;for(let i=0;i<o;i++){let a=p(e+i-d);r+=n[t+a]*s[i]}l[t+e]=r}}for(let e=0;e<r;e++)for(let t=0;t<i;t++){let n=0;for(let i=0;i<o;i++){let a=m(t+i-d);n+=l[a*r+e]*s[i]}c[t*r+e]=n}}return a}render(){let e=this.toImageBuffer(this.image.value);if(!e)return;let t=this.props.method.value,n=this.props.radius.value,r=this.props.wrapEdges.value,i=t===`gaussian`?this.trueGaussianBlur(e,n,r):this.boxBlur(e,n,r);this.setOutput(this.output,i)}},g=class extends o{constructor(e,t){super(e,`Text`,t)}setup(){this.addParm(`text`,{value:`Hello, World!`,type:`textarea`,displayName:`Text`}),this.addParm(`font`,{value:`Inter, system-ui, sans-serif`,type:`text`,displayName:`Font`}),this.addParm(`fontSize`,{value:48,type:`slider`,params:{min:1,max:500,step:1},displayName:`Font Size`}),this.addParm(`fontWeight`,{value:`normal`,type:`select`,params:{options:[{value:`normal`,label:`Normal`},{value:`bold`,label:`Bold`},{value:`100`,label:`Thin (100)`},{value:`200`,label:`Extra Light (200)`},{value:`300`,label:`Light (300)`},{value:`500`,label:`Medium (500)`},{value:`600`,label:`Semi Bold (600)`},{value:`700`,label:`Bold (700)`},{value:`800`,label:`Extra Bold (800)`},{value:`900`,label:`Black (900)`}]},displayName:`Font Weight`}),this.addParm(`fontStyle`,{value:`normal`,type:`select`,params:{options:[{value:`normal`,label:`Normal`},{value:`italic`,label:`Italic`},{value:`oblique`,label:`Oblique`}]},displayName:`Font Style`}),this.addParm(`alignH`,{value:`center`,type:`select`,params:{options:[{value:`left`,label:`Left`},{value:`center`,label:`Center`},{value:`right`,label:`Right`}]},displayName:`Horizontal Align`}),this.addParm(`alignV`,{value:`middle`,type:`select`,params:{options:[{value:`top`,label:`Top`},{value:`middle`,label:`Middle`},{value:`bottom`,label:`Bottom`}]},displayName:`Vertical Align`}),this.addParm(`color`,{value:{r:1,g:1,b:1},type:`color`,displayName:`Color`}),this.addParm(`backgroundColor`,{value:{r:0,g:0,b:0,a:0},type:`color`,displayName:`Background`}),this.addResolutionParm(),this.addParm(`offset`,{value:[0,0],params:{min:[-2048,-2048],max:[2048,2048],step:1},displayName:`Offset`}),this.addParm(`rotation`,{value:0,type:`slider`,params:{min:-180,max:180,step:.1},displayName:`Rotation`}),this.addParm(`letterSpacing`,{value:0,type:`slider`,params:{min:-50,max:100,step:.5},displayName:`Letter Spacing`}),this.addParm(`lineHeight`,{value:1.2,type:`slider`,params:{min:.5,max:3,step:.05},displayName:`Line Height`}),this.addParm(`opacity`,{value:1,type:`slider`,params:{min:0,max:1,step:.01},displayName:`Opacity`}),this.output=this.out(`image`),[`text`,`font`,`fontSize`,`fontWeight`,`fontStyle`,`alignH`,`alignV`,`color`,`backgroundColor`,`offset`,`rotation`,`letterSpacing`,`lineHeight`,`opacity`].forEach(e=>this.watchProp(e,()=>this.requestCook())),this.onReady=()=>this.requestCook()}render(){let[e,t]=this.getResolution(),a=this.props.text.value,o=this.props.font.value,s=this.props.fontSize.value,c=this.props.fontWeight.value,l=this.props.fontStyle.value,u=this.props.alignH.value,d=this.props.alignV.value,f=n(this.props.color.value),p=n(this.props.backgroundColor.value),[m,h]=this.props.offset.value,g=this.props.rotation.value,_=this.props.letterSpacing.value,v=this.props.lineHeight.value,y=this.props.opacity.value,b=document.createElement(`canvas`);b.width=e,b.height=t;let x=b.getContext(`2d`);if(!x){this.setOutput(this.output,i.rgba(e,t));return}p.a>0?(x.fillStyle=r(p),x.fillRect(0,0,e,t)):x.clearRect(0,0,e,t),x.save(),x.globalAlpha=y,x.font=`${l} ${c} ${s}px ${o}`,x.fillStyle=r(f);let S=a.split(`
+`),C=s*v,w=S.length*C,T,E;switch(u){case`left`:x.textAlign=`left`,T=0;break;case`right`:x.textAlign=`right`,T=e;break;default:x.textAlign=`center`,T=e/2}switch(d){case`top`:E=s;break;case`bottom`:E=t-w+s;break;default:E=(t-w)/2+s}if(T+=m,E+=h,g!==0){let e=g*Math.PI/180;x.translate(T,E-s/2+w/2),x.rotate(e),x.translate(-T,-(E-s/2+w/2))}if(_!==0){x.textAlign=`left`;for(let e=0;e<S.length;e++){let t=S[e],n=E+e*C,r=0;for(let e of t)r+=x.measureText(e).width+_;r-=_;let i;switch(u){case`left`:i=T;break;case`right`:i=T-r;break;default:i=T-r/2}for(let e of t)x.fillText(e,i,n),i+=x.measureText(e).width+_}}else for(let e=0;e<S.length;e++){let t=E+e*C;x.fillText(S[e],T,t)}x.restore();let D=i.fromCanvas(b);this.setOutput(this.output,D)}},_=class extends o{constructor(e,t){super(e,`Transform`,t)}setup(){this.imageInput=this.in(`image`,null),this.addParm(`translate`,{value:[0,0],params:{min:[-2048,-2048],max:[2048,2048],step:1},displayName:`Translate`,onChange:()=>this.requestCook()}),this.addParm(`rotation`,{value:0,params:{min:-180,max:180,step:.1},displayName:`Rotation`,onChange:()=>this.requestCook()}),this.addParm(`scale`,{value:[1,1],params:{min:[.01,.01],max:[10,10],step:.01},displayName:`Scale`,onChange:()=>this.requestCook()}),this.addParm(`uniformScale`,{value:!0,type:`boolean`,displayName:`Uniform Scale`,onChange:()=>this.requestCook()}),this.addParm(`pivot`,{value:`center`,params:{options:[{value:`center`,label:`Center`},{value:`top-left`,label:`Top Left`},{value:`top-right`,label:`Top Right`},{value:`bottom-left`,label:`Bottom Left`},{value:`bottom-right`,label:`Bottom Right`},{value:`custom`,label:`Custom`}]},displayName:`Pivot`,onChange:()=>this.requestCook()}),this.addParm(`customPivot`,{value:[.5,.5],params:{min:[0,0],max:[1,1],step:.01},displayName:`Custom Pivot`,hidden:()=>this.props.pivot.value!==`custom`,onChange:()=>this.requestCook()}),this.addParm(`filter`,{value:`bilinear`,params:{options:[{value:`nearest`,label:`Nearest`},{value:`bilinear`,label:`Bilinear`}]},displayName:`Filter`,onChange:()=>this.requestCook()}),this.addParm(`wrap`,{value:`clamp`,params:{options:[{value:`clamp`,label:`Clamp`},{value:`repeat`,label:`Repeat`},{value:`mirror`,label:`Mirror`},{value:`transparent`,label:`Transparent`}]},displayName:`Wrap Mode`,onChange:()=>this.requestCook()}),this.output=this.out(`image`),this.imageInput.onChange=()=>this.requestCook(),this.onReady=()=>this.requestCook()}getPivotPoint(e,t){switch(this.props.pivot.value){case`center`:return[e/2,t/2];case`top-left`:return[0,0];case`top-right`:return[e,0];case`bottom-left`:return[0,t];case`bottom-right`:return[e,t];case`custom`:let[n,r]=this.props.customPivot.value;return[n*e,r*t];default:return[e/2,t/2]}}wrapCoord(e,t,n){if(n===`clamp`)return Math.max(0,Math.min(t-1,e));if(n===`repeat`)return e%=t,e<0&&(e+=t),e;if(n===`mirror`){let n=t*2;return e=Math.abs(e%n),e>=t&&(e=n-e-1),Math.max(0,Math.min(t-1,e))}return e}render(){let e=this.toImageBuffer(this.imageInput.value);if(!e)return;let t=e.width,n=e.height,[r,a]=this.props.translate.value,o=this.props.rotation.value*Math.PI/180,[s,c]=this.props.scale.value,l=this.props.uniformScale.value,u=this.props.filter.value,d=this.props.wrap.value;l&&(c=s);let[f,p]=this.getPivotPoint(t,n),m=Math.cos(-o),h=Math.sin(-o),g=1/s,_=1/c,v=i.rgba(t,n),y=Math.min(e.channelCount,4);for(let i=0;i<n;i++)for(let o=0;o<t;o++){let s=o-f-r,c=i-p-a,l=s*m-c*h,b=s*h+c*m,x=l*g+f,S=b*_+p;if(d===`transparent`&&(x<0||x>=t||S<0||S>=n)){let e=i*t+o;for(let t=0;t<4;t++)v.channels[t][e]=0;continue}let C=i*t+o;if(u===`nearest`){let r=Math.round(x),i=Math.round(S),a=this.wrapCoord(r,t,d),o=this.wrapCoord(i,n,d)*t+a;for(let t=0;t<y;t++)v.channels[t][C]=e.channels[t][o];y<4&&(v.channels[3][C]=1)}else{let r=Math.floor(x),i=Math.floor(S),a=r+1,o=i+1,s=x-r,c=S-i,l=this.wrapCoord(r,t,d),u=this.wrapCoord(a,t,d),f=this.wrapCoord(i,n,d),p=this.wrapCoord(o,n,d),m=f*t+l,h=f*t+u,g=p*t+l,_=p*t+u;for(let t=0;t<y;t++){let n=e.channels[t][m],r=e.channels[t][h],i=e.channels[t][g],a=e.channels[t][_],o=n+(r-n)*s,l=i+(a-i)*s;v.channels[t][C]=o+(l-o)*c}y<4&&(v.channels[3][C]=1)}}v.markDirty(),this.setOutput(this.output,v)}},v=`/**
+ * ColorNode - creates a solid color ImageBuffer
+ */
+
+import { ImageNodeBase, ImageBuffer } from '../ImageNodeBase';
+import type { Graph } from '@/nodes/Graph';
+import type { OutputPort } from '@/types/node.types';
+import { normalizeColor } from '@/utils/colorUtils';
+
+export class ColorNode extends ImageNodeBase {
+  private output!: OutputPort<ImageBuffer>;
+
+  constructor(id: string, graph: Graph) {
+    super(id, 'Color', graph);
+  }
+
+  protected setup(): void {
+    this.addParm('color', {
+      value: { r: 1.0, g: 1.0, b: 1.0 },
+      type: 'color',
+      displayName: 'Color'
+    });
+
+    this.addResolutionParm();
+
+    this.output = this.out('image');
+
+    this.watchProp('color', () => this.requestCook());
+
+    this.onReady = () => this.requestCook();
+  }
+
+  protected render(): void {
+    const [width, height] = this.getResolution();
+    const color = normalizeColor(this.props.color.value);
+
+    const buffer = ImageBuffer.solid(width, height, color);
+    this.setOutput(this.output, buffer);
+  }
+}
+`,y=`/**
+ * ImageNode - loads an image file or accepts image input
+ * Converts to ImageBuffer for the processing pipeline
+ */
+
+import { ImageNodeBase, ImageBuffer, type ImageInput } from '../ImageNodeBase';
+import type { Graph } from '@/nodes/Graph';
+import type { InputPort, OutputPort } from '@/types/node.types';
+
+type ImageInputValue = HTMLCanvasElement | HTMLImageElement | ImageBuffer | string | null;
+
+export class ImageNode extends ImageNodeBase {
+  private imageInput!: InputPort<ImageInputValue>;
+  private output!: OutputPort<ImageBuffer>;
+
+  constructor(id: string, graph: Graph) {
+    super(id, 'File', graph);
+  }
+
+  protected setup(): void {
+    this.imageInput = this.in<ImageInputValue>('image', null);
+
+    this.addParm('file', {
+      value: '',
+      type: 'image',
+      params: {
+        accept: 'image/*'
+      },
+      displayName: 'File',
+      onChange: () => {
+        if (this.props.file.value && !this.imageInput.value) {
+          this.requestCook();
+        }
+      }
+    });
+
+    this.addParm('resolutionMode', {
+      value: 'original',
+      params: {
+        options: [
+          { value: 'original', label: 'Original' },
+          { value: 'max', label: 'Max Resolution' },
+          { value: 'fixed', label: 'Fixed Resolution' }
+        ]
+      },
+      displayName: 'Resolution Mode',
+      onChange: () => {
+        if (this.props.file.value || this.imageInput.value) {
+          this.requestCook();
+        }
+      }
+    });
+
+    this.addParm('maxResolution', {
+      value: [2048, 2048],
+      params: {
+        min: [1, 1],
+        max: [4096, 4096]
+      },
+      displayName: 'Max Resolution',
+      hidden: () => this.props.resolutionMode.value !== 'max',
+      onChange: () => {
+        if ((this.props.file.value || this.imageInput.value) && this.props.resolutionMode.value === 'max') {
+          this.requestCook();
+        }
+      }
+    });
+
+    this.addParm('fixedResolution', {
+      value: [512, 512],
+      params: {
+        min: [1, 1],
+        max: [4096, 4096]
+      },
+      displayName: 'Fixed Resolution',
+      hidden: () => this.props.resolutionMode.value !== 'fixed',
+      onChange: () => {
+        if ((this.props.file.value || this.imageInput.value) && this.props.resolutionMode.value === 'fixed') {
+          this.requestCook();
+        }
+      }
+    });
+
+    this.output = this.out('image');
+
+    this.imageInput.onChange = () => this.requestCook();
+
+    this.onReady = () => {
+      if (this.props.file.value || this.imageInput.value) {
+        this.requestCook();
+      }
+    };
+  }
+
+  protected async render(): Promise<void> {
+    let sourceBuffer: ImageBuffer | null = null;
+
+    // First check input port
+    if (this.imageInput.value) {
+      if (this.imageInput.value instanceof ImageBuffer) {
+        sourceBuffer = this.imageInput.value;
+      } else if (this.imageInput.value instanceof HTMLImageElement ||
+                 this.imageInput.value instanceof HTMLCanvasElement) {
+        sourceBuffer = ImageBuffer.fromCanvas(this.imageInput.value);
+      } else if (typeof this.imageInput.value === 'string') {
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        await new Promise<void>((resolve, reject) => {
+          img.onload = () => resolve();
+          img.onerror = reject;
+          img.src = this.imageInput.value as string;
+        });
+        sourceBuffer = ImageBuffer.fromCanvas(img);
+      }
+    } else if (this.props.file.value) {
+      const img = new Image();
+      img.crossOrigin = 'anonymous';
+      await new Promise<void>((resolve, reject) => {
+        img.onload = () => resolve();
+        img.onerror = reject;
+        img.src = this.props.file.value;
+      });
+      sourceBuffer = ImageBuffer.fromCanvas(img);
+    }
+
+    if (!sourceBuffer) {
+      return;
+    }
+
+    try {
+      const mode = this.props.resolutionMode.value;
+      let outputBuffer: ImageBuffer;
+
+      if (mode === 'original') {
+        outputBuffer = sourceBuffer;
+      } else if (mode === 'max') {
+        const [maxWidth, maxHeight] = this.props.maxResolution.value;
+        const aspectRatio = sourceBuffer.width / sourceBuffer.height;
+        let newWidth = sourceBuffer.width;
+        let newHeight = sourceBuffer.height;
+
+        if (newWidth > maxWidth) {
+          newWidth = maxWidth;
+          newHeight = maxWidth / aspectRatio;
+        }
+        if (newHeight > maxHeight) {
+          newHeight = maxHeight;
+          newWidth = maxHeight * aspectRatio;
+        }
+
+        newWidth = Math.round(newWidth);
+        newHeight = Math.round(newHeight);
+
+        if (newWidth !== sourceBuffer.width || newHeight !== sourceBuffer.height) {
+          outputBuffer = this.resizeBuffer(sourceBuffer, newWidth, newHeight);
+        } else {
+          outputBuffer = sourceBuffer;
+        }
+      } else {
+        const [width, height] = this.props.fixedResolution.value;
+        outputBuffer = this.resizeBuffer(sourceBuffer, width, height);
+      }
+
+      this.setOutput(this.output, outputBuffer);
+    } catch (error) {
+      this.error = error as Error;
+      console.error('Failed to process image:', error);
+    }
+  }
+
+  private resizeBuffer(source: ImageBuffer, newWidth: number, newHeight: number): ImageBuffer {
+    const result = ImageBuffer.rgba(newWidth, newHeight);
+    const scaleX = source.width / newWidth;
+    const scaleY = source.height / newHeight;
+
+    for (let c = 0; c < Math.min(source.channelCount, 4); c++) {
+      const dstChannel = result.channels[c];
+
+      for (let y = 0; y < newHeight; y++) {
+        for (let x = 0; x < newWidth; x++) {
+          const srcX = x * scaleX;
+          const srcY = y * scaleY;
+          dstChannel[y * newWidth + x] = source.sample(srcX, srcY, c);
+        }
+      }
+    }
+
+    if (source.channelCount < 4) {
+      result.fill(3, 1);
+    }
+
+    return result;
+  }
+}
+`,b=`/**
+ * CompositeNode - blends two ImageBuffers together
+ * Supports resolution control similar to TouchDesigner TOPs
+ */
+
+import { ImageNodeBase, ImageBuffer, type ImageInput, type ResolutionMode, type FitMode } from '../ImageNodeBase';
+import type { Graph } from '@/nodes/Graph';
+import type { InputPort, OutputPort } from '@/types/node.types';
+
+export class CompositeNode extends ImageNodeBase {
+  private image1!: InputPort<ImageInput>;
+  private image2!: InputPort<ImageInput>;
+  private output!: OutputPort<ImageBuffer>;
+
+  constructor(id: string, graph: Graph) {
+    super(id, 'Composite', graph);
+  }
+
+  protected setup(): void {
+    this.image1 = this.in<ImageInput>('image1', null);
+    this.image2 = this.in<ImageInput>('image2', null);
+
+    this.addParm('blendMode', {
+      value: 'multiply',
+      params: {
+        options: [
+          { value: 'normal', label: 'Normal' },
+          { value: 'multiply', label: 'Multiply' },
+          { value: 'screen', label: 'Screen' },
+          { value: 'overlay', label: 'Overlay' },
+          { value: 'darken', label: 'Darken' },
+          { value: 'lighten', label: 'Lighten' },
+          { value: 'color-dodge', label: 'Color Dodge' },
+          { value: 'color-burn', label: 'Color Burn' },
+          { value: 'hard-light', label: 'Hard Light' },
+          { value: 'soft-light', label: 'Soft Light' },
+          { value: 'difference', label: 'Difference' },
+          { value: 'exclusion', label: 'Exclusion' },
+          { value: 'add', label: 'Add' },
+          { value: 'subtract', label: 'Subtract' },
+          { value: 'divide', label: 'Divide' },
+          { value: 'pin-light', label: 'Pin Light' },
+          { value: 'vivid-light', label: 'Vivid Light' },
+          { value: 'linear-dodge', label: 'Linear Dodge' },
+          { value: 'linear-burn', label: 'Linear Burn' }
+        ]
+      },
+      displayName: 'Blend Mode',
+      onChange: () => this.requestCook()
+    });
+
+    this.addParm('opacity', {
+      value: 1.0,
+      params: {
+        min: 0.0,
+        max: 1.0,
+        step: 0.01
+      },
+      displayName: 'Opacity',
+      onChange: () => this.requestCook()
+    });
+
+    // Resolution control - which input determines output size
+    this.addParm('outputResolution', {
+      value: 'input1',
+      params: {
+        options: [
+          { value: 'input1', label: 'Use Input 1' },
+          { value: 'input2', label: 'Use Input 2' },
+          { value: 'largest', label: 'Largest Input' },
+          { value: 'smallest', label: 'Smallest Input' },
+          { value: 'custom', label: 'Custom' }
+        ]
+      },
+      displayName: 'Output Resolution',
+      onChange: () => this.requestCook()
+    });
+
+    this.addParm('customResolution', {
+      value: [512, 512],
+      params: {
+        min: [1, 1],
+        max: [4096, 4096],
+        integer: true
+      },
+      displayName: 'Resolution',
+      hidden: () => this.props.outputResolution.value !== 'custom',
+      onChange: () => this.requestCook()
+    });
+
+    // How to fit inputs that don't match output resolution
+    this.addParm('fitMode', {
+      value: 'fill',
+      params: {
+        options: [
+          { value: 'fill', label: 'Fill (Crop)' },
+          { value: 'fit', label: 'Fit (Letterbox)' },
+          { value: 'stretch', label: 'Stretch' },
+          { value: 'native', label: 'Native (No Scale)' }
+        ]
+      },
+      displayName: 'Fit Mode',
+      onChange: () => this.requestCook()
+    });
+
+    this.output = this.out('image');
+
+    this.image1.onChange = () => this.requestCook();
+    this.image2.onChange = () => this.requestCook();
+
+    this.onReady = () => this.requestCook();
+  }
+
+  private blendBuffers(base: ImageBuffer, blend: ImageBuffer, mode: string, opacity: number): ImageBuffer {
+    const width = base.width;
+    const height = base.height;
+    const result = ImageBuffer.rgba(width, height);
+
+    // Ensure both have RGBA
+    const baseRGBA = base.channelCount >= 4 ? base : base.toRGBA();
+    const blendRGBA = blend.channelCount >= 4 ? blend : blend.toRGBA();
+
+    const r1 = baseRGBA.channels[0];
+    const g1 = baseRGBA.channels[1];
+    const b1 = baseRGBA.channels[2];
+    const a1 = baseRGBA.channels[3];
+
+    const r2 = blendRGBA.channels[0];
+    const g2 = blendRGBA.channels[1];
+    const b2 = blendRGBA.channels[2];
+    const a2 = blendRGBA.channels[3];
+
+    const rOut = result.channels[0];
+    const gOut = result.channels[1];
+    const bOut = result.channels[2];
+    const aOut = result.channels[3];
+
+    for (let i = 0; i < width * height; i++) {
+      const baseR = r1[i], baseG = g1[i], baseB = b1[i], baseA = a1[i];
+      const blendR = r2[i], blendG = g2[i], blendB = b2[i], blendA = a2[i];
+
+      let r: number, g: number, b: number;
+
+      switch (mode) {
+        case 'normal':
+          r = blendR; g = blendG; b = blendB;
+          break;
+        case 'multiply':
+          r = baseR * blendR; g = baseG * blendG; b = baseB * blendB;
+          break;
+        case 'screen':
+          r = 1 - (1 - baseR) * (1 - blendR);
+          g = 1 - (1 - baseG) * (1 - blendG);
+          b = 1 - (1 - baseB) * (1 - blendB);
+          break;
+        case 'overlay':
+          r = baseR < 0.5 ? 2 * baseR * blendR : 1 - 2 * (1 - baseR) * (1 - blendR);
+          g = baseG < 0.5 ? 2 * baseG * blendG : 1 - 2 * (1 - baseG) * (1 - blendG);
+          b = baseB < 0.5 ? 2 * baseB * blendB : 1 - 2 * (1 - baseB) * (1 - blendB);
+          break;
+        case 'darken':
+          r = Math.min(baseR, blendR); g = Math.min(baseG, blendG); b = Math.min(baseB, blendB);
+          break;
+        case 'lighten':
+          r = Math.max(baseR, blendR); g = Math.max(baseG, blendG); b = Math.max(baseB, blendB);
+          break;
+        case 'color-dodge':
+          r = blendR === 1 ? 1 : Math.min(1, baseR / (1 - blendR));
+          g = blendG === 1 ? 1 : Math.min(1, baseG / (1 - blendG));
+          b = blendB === 1 ? 1 : Math.min(1, baseB / (1 - blendB));
+          break;
+        case 'color-burn':
+          r = blendR === 0 ? 0 : Math.max(0, 1 - (1 - baseR) / blendR);
+          g = blendG === 0 ? 0 : Math.max(0, 1 - (1 - baseG) / blendG);
+          b = blendB === 0 ? 0 : Math.max(0, 1 - (1 - baseB) / blendB);
+          break;
+        case 'hard-light':
+          r = blendR < 0.5 ? 2 * baseR * blendR : 1 - 2 * (1 - baseR) * (1 - blendR);
+          g = blendG < 0.5 ? 2 * baseG * blendG : 1 - 2 * (1 - baseG) * (1 - blendG);
+          b = blendB < 0.5 ? 2 * baseB * blendB : 1 - 2 * (1 - baseB) * (1 - blendB);
+          break;
+        case 'soft-light':
+          r = blendR < 0.5 ? baseR - (1 - 2 * blendR) * baseR * (1 - baseR) : baseR + (2 * blendR - 1) * (Math.sqrt(baseR) - baseR);
+          g = blendG < 0.5 ? baseG - (1 - 2 * blendG) * baseG * (1 - baseG) : baseG + (2 * blendG - 1) * (Math.sqrt(baseG) - baseG);
+          b = blendB < 0.5 ? baseB - (1 - 2 * blendB) * baseB * (1 - baseB) : baseB + (2 * blendB - 1) * (Math.sqrt(baseB) - baseB);
+          break;
+        case 'difference':
+          r = Math.abs(baseR - blendR); g = Math.abs(baseG - blendG); b = Math.abs(baseB - blendB);
+          break;
+        case 'exclusion':
+          r = baseR + blendR - 2 * baseR * blendR;
+          g = baseG + blendG - 2 * baseG * blendG;
+          b = baseB + blendB - 2 * baseB * blendB;
+          break;
+        case 'add':
+          r = Math.min(1, baseR + blendR); g = Math.min(1, baseG + blendG); b = Math.min(1, baseB + blendB);
+          break;
+        case 'subtract':
+          r = Math.max(0, baseR - blendR); g = Math.max(0, baseG - blendG); b = Math.max(0, baseB - blendB);
+          break;
+        case 'divide':
+          r = blendR === 0 ? 1 : Math.min(1, baseR / blendR);
+          g = blendG === 0 ? 1 : Math.min(1, baseG / blendG);
+          b = blendB === 0 ? 1 : Math.min(1, baseB / blendB);
+          break;
+        case 'pin-light':
+          r = blendR < 0.5 ? Math.min(baseR, 2 * blendR) : Math.max(baseR, 2 * (blendR - 0.5));
+          g = blendG < 0.5 ? Math.min(baseG, 2 * blendG) : Math.max(baseG, 2 * (blendG - 0.5));
+          b = blendB < 0.5 ? Math.min(baseB, 2 * blendB) : Math.max(baseB, 2 * (blendB - 0.5));
+          break;
+        case 'vivid-light':
+          r = blendR < 0.5 ? (blendR === 0 ? 0 : 1 - (1 - baseR) / (2 * blendR)) : (blendR === 1 ? 1 : baseR / (2 * (1 - blendR)));
+          g = blendG < 0.5 ? (blendG === 0 ? 0 : 1 - (1 - baseG) / (2 * blendG)) : (blendG === 1 ? 1 : baseG / (2 * (1 - blendG)));
+          b = blendB < 0.5 ? (blendB === 0 ? 0 : 1 - (1 - baseB) / (2 * blendB)) : (blendB === 1 ? 1 : baseB / (2 * (1 - blendB)));
+          break;
+        case 'linear-dodge':
+          r = Math.min(1, baseR + blendR); g = Math.min(1, baseG + blendG); b = Math.min(1, baseB + blendB);
+          break;
+        case 'linear-burn':
+          r = Math.max(0, baseR + blendR - 1); g = Math.max(0, baseG + blendG - 1); b = Math.max(0, baseB + blendB - 1);
+          break;
+        default:
+          r = blendR; g = blendG; b = blendB;
+      }
+
+      // Apply opacity
+      rOut[i] = baseR + (r - baseR) * opacity * blendA;
+      gOut[i] = baseG + (g - baseG) * opacity * blendA;
+      bOut[i] = baseB + (b - baseB) * opacity * blendA;
+      aOut[i] = baseA + (blendA - baseA) * opacity;
+    }
+
+    return result;
+  }
+
+  protected render(): void {
+    // Get resolution settings
+    const resolutionMode = this.props.outputResolution.value as ResolutionMode;
+    const fitMode = this.props.fitMode.value as FitMode;
+    const customSize = this.props.customResolution.value as [number, number];
+
+    // Prepare inputs - handles resolution matching
+    const { buffers } = this.prepareInputs(
+      [this.image1.value, this.image2.value],
+      resolutionMode,
+      fitMode,
+      customSize
+    );
+
+    const [buf1, buf2] = buffers;
+
+    if (!buf1 || !buf2) {
+      return;
+    }
+
+    const blendMode = this.props.blendMode.value;
+    const opacity = this.props.opacity.value;
+
+    try {
+      const result = this.blendBuffers(buf1, buf2, blendMode, opacity);
+      this.setOutput(this.output, result);
+    } catch (error) {
+      console.error('Composite render error:', error);
+      this.error = error as Error;
+    }
+  }
+}
+`,x=`/**
+ * CheckersNode - generates a checkerboard pattern as ImageBuffer
+ */
+
+import { ImageNodeBase, ImageBuffer } from '../ImageNodeBase';
+import type { Graph } from '@/nodes/Graph';
+import type { OutputPort } from '@/types/node.types';
+import { normalizeColor } from '@/utils/colorUtils';
+
+export class CheckersNode extends ImageNodeBase {
+  private output!: OutputPort<ImageBuffer>;
+
+  constructor(id: string, graph: Graph) {
+    super(id, 'Checkers', graph);
+  }
+
+  protected setup(): void {
+    this.addParm('color1', {
+      value: { r: 1.0, g: 1.0, b: 1.0 },
+      type: 'color',
+      displayName: 'Color 1',
+      onChange: () => this.requestCook()
+    });
+
+    this.addParm('color2', {
+      value: { r: 0.0, g: 0.0, b: 0.0 },
+      type: 'color',
+      displayName: 'Color 2',
+      onChange: () => this.requestCook()
+    });
+
+    this.addParm('mode', {
+      value: 'size',
+      params: {
+        options: [
+          { value: 'size', label: 'Size' },
+          { value: 'divisions', label: 'Divisions' }
+        ]
+      },
+      displayName: 'Mode',
+      onChange: () => this.requestCook()
+    });
+
+    this.addParm('size', {
+      value: 32,
+      params: {
+        min: 1,
+        max: 512,
+        step: 0.1
+      },
+      displayName: 'Size',
+      hidden: () => this.props.mode.value !== 'size',
+      onChange: () => this.requestCook()
+    });
+
+    this.addParm('divisions', {
+      value: 16,
+      params: {
+        min: 1,
+        max: 512,
+        step: 1,
+        integer: true
+      },
+      displayName: 'Divisions',
+      hidden: () => this.props.mode.value !== 'divisions',
+      onChange: () => this.requestCook()
+    });
+
+    this.addParm('centered', {
+      value: false,
+      type: 'boolean',
+      displayName: 'Centered',
+      onChange: () => this.requestCook()
+    });
+
+    this.addResolutionParm();
+
+    this.output = this.out('image');
+
+    this.onReady = () => this.requestCook();
+  }
+
+  protected render(): void {
+    const [width, height] = this.getResolution();
+    const mode = this.props.mode.value;
+    const color1 = normalizeColor(this.props.color1.value);
+    const color2 = normalizeColor(this.props.color2.value);
+    const centered = this.props.centered.value;
+
+    let checkerSize: number;
+    if (mode === 'size') {
+      checkerSize = this.props.size.value;
+    } else {
+      checkerSize = width / this.props.divisions.value;
+    }
+
+    // Calculate offset to center the pattern
+    let offsetX = 0;
+    let offsetY = 0;
+    if (centered) {
+      // Offset so that the center of the image is at the center of a checker cell
+      offsetX = (width / 2) % checkerSize - checkerSize / 2;
+      offsetY = (height / 2) % checkerSize - checkerSize / 2;
+    }
+
+    const buffer = ImageBuffer.rgba(width, height);
+    const r = buffer.r();
+    const g = buffer.g();
+    const b = buffer.b();
+    const a = buffer.a();
+
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        const idx = y * width + x;
+        const isEven = (Math.floor((x - offsetX) / checkerSize) + Math.floor((y - offsetY) / checkerSize)) % 2 === 0;
+        const color = isEven ? color1 : color2;
+
+        r[idx] = color.r;
+        g[idx] = color.g;
+        b[idx] = color.b;
+        a[idx] = color.a;
+      }
+    }
+
+    buffer.markDirty();
+    this.setOutput(this.output, buffer);
+  }
+}
+`,S=`/**
+ * ResizeNode - scales or resizes an ImageBuffer with bilinear interpolation
+ */
+
+import { ImageNodeBase, ImageBuffer, type ImageInput } from '../ImageNodeBase';
+import type { Graph } from '@/nodes/Graph';
+import type { InputPort, OutputPort } from '@/types/node.types';
+
+export class ResizeNode extends ImageNodeBase {
+  private image!: InputPort<ImageInput>;
+  private output!: OutputPort<ImageBuffer>;
+
+  constructor(id: string, graph: Graph) {
+    super(id, 'Resize', graph);
+  }
+
+  protected setup(): void {
+    this.image = this.in<ImageInput>('image', null);
+
+    this.addParm('mode', {
+      value: 'scale',
+      params: {
+        options: [
+          { value: 'scale', label: 'Scale' },
+          { value: 'fixed', label: 'Fixed' }
+        ]
+      },
+      displayName: 'Mode',
+      onChange: () => this.requestCook()
+    });
+
+    this.addParm('scale', {
+      value: 1.0,
+      params: {
+        min: 0.1,
+        max: 10.0,
+        step: 0.1
+      },
+      displayName: 'Scale',
+      hidden: () => this.props.mode.value !== 'scale',
+      onChange: () => this.requestCook()
+    });
+
+    this.addParm('width', {
+      value: 512,
+      params: {
+        min: 1,
+        max: 4096,
+        step: 1
+      },
+      displayName: 'Width',
+      hidden: () => this.props.mode.value !== 'fixed',
+      onChange: () => this.requestCook()
+    });
+
+    this.addParm('height', {
+      value: 512,
+      params: {
+        min: 1,
+        max: 4096,
+        step: 1
+      },
+      displayName: 'Height',
+      hidden: () => this.props.mode.value !== 'fixed',
+      onChange: () => this.requestCook()
+    });
+
+    this.output = this.out('image');
+
+    this.image.onChange = () => this.requestCook();
+
+    this.onReady = () => this.requestCook();
+  }
+
+  private resizeBuffer(source: ImageBuffer, newWidth: number, newHeight: number): ImageBuffer {
+    const result = ImageBuffer.rgba(newWidth, newHeight);
+    const scaleX = source.width / newWidth;
+    const scaleY = source.height / newHeight;
+
+    // Process each channel using bilinear interpolation
+    for (let c = 0; c < Math.min(source.channelCount, 4); c++) {
+      const dstChannel = result.channels[c];
+
+      for (let y = 0; y < newHeight; y++) {
+        for (let x = 0; x < newWidth; x++) {
+          const srcX = x * scaleX;
+          const srcY = y * scaleY;
+          dstChannel[y * newWidth + x] = source.sample(srcX, srcY, c);
+        }
+      }
+    }
+
+    // Fill alpha if source doesn't have it
+    if (source.channelCount < 4) {
+      result.fill(3, 1);
+    }
+
+    return result;
+  }
+
+  protected render(): void {
+    const buffer = this.toImageBuffer(this.image.value);
+    if (!buffer) {
+      return;
+    }
+
+    let newWidth: number, newHeight: number;
+
+    if (this.props.mode.value === 'scale') {
+      const scale = this.props.scale.value;
+      newWidth = Math.round(buffer.width * scale);
+      newHeight = Math.round(buffer.height * scale);
+    } else {
+      newWidth = this.props.width.value;
+      newHeight = this.props.height.value;
+    }
+
+    const resized = this.resizeBuffer(buffer, newWidth, newHeight);
+    this.setOutput(this.output, resized);
+  }
+}
+`,C=`/**
+ * NormalMapNode - computes normal map from height map (red/grayscale channel)
+ */
+
+import { ImageNodeBase, ImageBuffer, type ImageInput } from '../ImageNodeBase';
+import type { Graph } from '@/nodes/Graph';
+import type { InputPort, OutputPort } from '@/types/node.types';
+
+export class NormalMapNode extends ImageNodeBase {
+  private image!: InputPort<ImageInput>;
+  private output!: OutputPort<ImageBuffer>;
+
+  constructor(id: string, graph: Graph) {
+    super(id, 'NormalMap', graph);
+  }
+
+  protected setup(): void {
+    this.image = this.in<ImageInput>('image', null);
+
+    this.addParm('scale', {
+      value: 1.0,
+      params: {
+        min: 0.0,
+        max: 10.0,
+        step: 0.1
+      },
+      displayName: 'Scale',
+      onChange: () => this.requestCook()
+    });
+
+    this.addParm('flipX', {
+      value: false,
+      type: 'boolean',
+      displayName: 'Flip X',
+      onChange: () => this.requestCook()
+    });
+
+    this.addParm('flipY', {
+      value: false,
+      type: 'boolean',
+      displayName: 'Flip Y',
+      onChange: () => this.requestCook()
+    });
+
+    this.output = this.out('image');
+
+    this.image.onChange = () => this.requestCook();
+
+    this.onReady = () => this.requestCook();
+  }
+
+  private computeNormalMap(source: ImageBuffer, scale: number, flipX: boolean, flipY: boolean): ImageBuffer {
+    const { width, height } = source;
+    const result = ImageBuffer.rgba(width, height);
+
+    // Use first channel as height (works for grayscale or red channel)
+    const heightMap = source.channels[0];
+
+    const rOut = result.channels[0];
+    const gOut = result.channels[1];
+    const bOut = result.channels[2];
+    const aOut = result.channels[3];
+
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        const idx = y * width + x;
+
+        // Get neighboring heights with clamping
+        const h00 = heightMap[idx];
+        const h10 = heightMap[Math.min(x + 1, width - 1) + y * width];
+        const h01 = heightMap[x + Math.min(y + 1, height - 1) * width];
+
+        // Compute gradients
+        const dx = (h10 - h00) * scale;
+        const dy = (h01 - h00) * scale;
+
+        // Apply flips
+        const finalDx = flipX ? -dx : dx;
+        const finalDy = flipY ? -dy : dy;
+
+        // Compute normal vector: Normal = normalize(-dx, -dy, 1)
+        const nx = -finalDx;
+        const ny = -finalDy;
+        const nz = 1.0;
+
+        const length = Math.sqrt(nx * nx + ny * ny + nz * nz);
+        const normalizedX = nx / length;
+        const normalizedY = ny / length;
+        const normalizedZ = nz / length;
+
+        // Map from [-1, 1] to [0, 1] for normal map format
+        rOut[idx] = normalizedX * 0.5 + 0.5;
+        gOut[idx] = normalizedY * 0.5 + 0.5;
+        bOut[idx] = normalizedZ * 0.5 + 0.5;
+        aOut[idx] = 1.0;
+      }
+    }
+
+    return result;
+  }
+
+  protected render(): void {
+    const buffer = this.toImageBuffer(this.image.value);
+    if (!buffer) {
+      return;
+    }
+
+    const scale = this.props.scale.value;
+    const flipX = this.props.flipX.value;
+    const flipY = this.props.flipY.value;
+
+    const normalMap = this.computeNormalMap(buffer, scale, flipX, flipY);
+    this.setOutput(this.output, normalMap);
+  }
+}
+`,w=`/**
+ * RampNode - generates color ramps as ImageBuffer
+ */
+
+import { ImageNodeBase, ImageBuffer } from '../ImageNodeBase';
+import type { Graph } from '@/nodes/Graph';
+import type { OutputPort } from '@/types/node.types';
+
+interface ColorValue {
+  r: number;
+  g: number;
+  b: number;
+  a?: number;
+}
+
+interface RampPoint {
+  position: number;
+  color: ColorValue | number[] | string;
+  interpolation?: 'linear' | 'smooth' | 'constant';
+}
+
+export class RampNode extends ImageNodeBase {
+  private output!: OutputPort<ImageBuffer>;
+
+  constructor(id: string, graph: Graph) {
+    super(id, 'Ramp', graph);
+  }
+
+  protected setup(): void {
+    this.addParm('type', {
+      value: 'horizontal',
+      params: {
+        options: [
+          { value: 'horizontal', label: 'Horizontal' },
+          { value: 'vertical', label: 'Vertical' },
+          { value: 'radial', label: 'Radial' },
+          { value: 'concentric', label: 'Concentric' }
+        ]
+      },
+      displayName: 'Type',
+      onChange: () => this.requestCook()
+    });
+
+    this.addParm('points', {
+      value: [
+        { position: 0.0, color: { r: 0.0, g: 0.0, b: 0.0 }, interpolation: 'linear' },
+        { position: 1.0, color: { r: 1.0, g: 1.0, b: 1.0 }, interpolation: 'linear' }
+      ],
+      type: 'colorramp',
+      displayName: 'Ramp',
+      onChange: () => this.requestCook()
+    });
+
+    this.addResolutionParm();
+
+    this.output = this.out('image');
+
+    this.onReady = () => this.requestCook();
+  }
+
+  private normalizeRampColor(color: ColorValue | number[] | string): ColorValue {
+    if (typeof color === 'object' && color !== null && 'r' in color && 'g' in color && 'b' in color) {
+      const isNormalized = color.r <= 1.0 && color.g <= 1.0 && color.b <= 1.0;
+      return {
+        r: isNormalized ? color.r : color.r / 255,
+        g: isNormalized ? color.g : color.g / 255,
+        b: isNormalized ? color.b : color.b / 255,
+        a: color.a !== undefined ? (isNormalized ? color.a : color.a / 255) : 1.0
+      };
+    }
+
+    if (Array.isArray(color)) {
+      const isNormalized = color.every(v => v <= 1.0);
+      return {
+        r: isNormalized ? color[0] : color[0] / 255,
+        g: isNormalized ? color[1] : color[1] / 255,
+        b: isNormalized ? color[2] : color[2] / 255,
+        a: color[3] !== undefined ? (isNormalized ? color[3] : color[3] / 255) : 1.0
+      };
+    }
+
+    if (typeof color === 'string') {
+      const rgbMatch = color.match(/rgb\\s*\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*\\)/);
+      if (rgbMatch) {
+        return {
+          r: parseInt(rgbMatch[1], 10) / 255,
+          g: parseInt(rgbMatch[2], 10) / 255,
+          b: parseInt(rgbMatch[3], 10) / 255,
+          a: 1.0
+        };
+      }
+
+      const hex = color.replace('#', '');
+      if (hex.length === 3 || hex.length === 6) {
+        const expanded = hex.length === 3
+          ? hex.split('').map(c => c + c).join('')
+          : hex;
+        const result = /^([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(expanded);
+        if (result) {
+          return {
+            r: parseInt(result[1], 16) / 255,
+            g: parseInt(result[2], 16) / 255,
+            b: parseInt(result[3], 16) / 255,
+            a: 1.0
+          };
+        }
+      }
+    }
+
+    return { r: 0, g: 0, b: 0, a: 1.0 };
+  }
+
+  private interpolateColor(color1: ColorValue, color2: ColorValue, t: number, interpolation: string): ColorValue {
+    if (interpolation === 'constant') {
+      return t < 0.5 ? color1 : color2;
+    } else if (interpolation === 'smooth') {
+      t = t * t * (3 - 2 * t);
+    }
+
+    return {
+      r: color1.r + (color2.r - color1.r) * t,
+      g: color1.g + (color2.g - color1.g) * t,
+      b: color1.b + (color2.b - color1.b) * t,
+      a: (color1.a ?? 1) + ((color2.a ?? 1) - (color1.a ?? 1)) * t
+    };
+  }
+
+  private getColorAtPosition(points: RampPoint[], position: number): ColorValue {
+    const sortedPoints = [...points].sort((a, b) => a.position - b.position);
+    position = Math.max(0, Math.min(1, position));
+
+    let before: RampPoint | null = null;
+    let after: RampPoint | null = null;
+
+    for (let i = 0; i < sortedPoints.length; i++) {
+      if (sortedPoints[i].position <= position) {
+        before = sortedPoints[i];
+      }
+      if (sortedPoints[i].position >= position && !after) {
+        after = sortedPoints[i];
+        break;
+      }
+    }
+
+    if (!before && after) return this.normalizeRampColor(after.color);
+    if (before && !after) return this.normalizeRampColor(before.color);
+    if (!before && !after) return { r: 0, g: 0, b: 0, a: 1 };
+
+    if (before!.position === position) return this.normalizeRampColor(before!.color);
+    if (after!.position === position) return this.normalizeRampColor(after!.color);
+
+    const t = (position - before!.position) / (after!.position - before!.position);
+    const color1 = this.normalizeRampColor(before!.color);
+    const color2 = this.normalizeRampColor(after!.color);
+    const interpolation = after!.interpolation || 'linear';
+
+    return this.interpolateColor(color1, color2, t, interpolation);
+  }
+
+  protected render(): void {
+    const [width, height] = this.getResolution();
+    const rampType = this.props.type.value;
+    const points: RampPoint[] = this.props.points.value || [];
+
+    if (points.length === 0) {
+      return;
+    }
+
+    const buffer = ImageBuffer.rgba(width, height);
+    const r = buffer.r();
+    const g = buffer.g();
+    const b = buffer.b();
+    const a = buffer.a();
+
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const maxDist = Math.sqrt(centerX * centerX + centerY * centerY);
+
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        let position = 0;
+
+        if (rampType === 'horizontal') {
+          position = x / width;
+        } else if (rampType === 'vertical') {
+          position = y / height;
+        } else if (rampType === 'radial') {
+          const dx = x - centerX;
+          const dy = y - centerY;
+          const angle = Math.atan2(dy, dx);
+          position = (angle + Math.PI) / (2 * Math.PI);
+        } else if (rampType === 'concentric') {
+          const dx = x - centerX;
+          const dy = y - centerY;
+          const dist = Math.sqrt(dx * dx + dy * dy);
+          position = dist / maxDist;
+        }
+
+        const color = this.getColorAtPosition(points, position);
+        const idx = y * width + x;
+        r[idx] = color.r;
+        g[idx] = color.g;
+        b[idx] = color.b;
+        a[idx] = color.a ?? 1;
+      }
+    }
+
+    buffer.markDirty();
+    this.setOutput(this.output, buffer);
+  }
+}
+`,T=`/**
+ * NoiseNode - generates procedural noise patterns as ImageBuffer
+ */
+
+import { ImageNodeBase, ImageBuffer } from '../ImageNodeBase';
+import type { Graph } from '@/nodes/Graph';
+import type { OutputPort } from '@/types/node.types';
+
+type Noise2DFunction = (x: number, y: number) => number;
+
+export class NoiseNode extends ImageNodeBase {
+  private output!: OutputPort<ImageBuffer>;
+  private noise2D: Noise2DFunction | null = null;
+  private currentSeed: number | null = null;
+
+  constructor(id: string, graph: Graph) {
+    super(id, 'Noise', graph);
+  }
+
+  protected setup(): void {
+    this.addParm('seed', {
+      value: 0,
+      params: {
+        min: 0,
+        max: 10000,
+        step: 1,
+        integer: true
+      },
+      displayName: 'Seed',
+      onChange: () => {
+        void this.initNoise().then(() => {
+          if (this.noise2D) this.requestCook();
+        });
+      }
+    });
+
+    this.addParm('scale', {
+      value: 0.01,
+      params: {
+        min: 0.001,
+        max: 1.0,
+        step: 0.001
+      },
+      displayName: 'Scale',
+      onChange: () => this.requestCook()
+    });
+
+    this.addParm('iterations', {
+      value: 4,
+      params: {
+        min: 1,
+        max: 8,
+        step: 1,
+        integer: true
+      },
+      displayName: 'Iterations',
+      onChange: () => this.requestCook()
+    });
+
+    this.addResolutionParm();
+
+    this.output = this.out('image');
+
+    this.onReady = async () => {
+      await this.initNoise();
+      if (this.noise2D) {
+        this.requestCook();
+      }
+    };
+  }
+
+  private async initNoise(): Promise<void> {
+    try {
+      const simplexNoise = await this.require('simplex-noise');
+      const { createNoise2D } = simplexNoise;
+      const seed = this.props.seed.value;
+
+      let rng = seed;
+      function seededRandom() {
+        rng = (rng * 9301 + 49297) % 233280;
+        return rng / 233280;
+      }
+
+      this.noise2D = createNoise2D(seededRandom);
+      this.currentSeed = seed;
+    } catch (error) {
+      console.error('Failed to load simplex-noise:', error);
+      this.error = error as Error;
+    }
+  }
+
+  protected render(): void {
+    if (!this.noise2D) {
+      this.initNoise().then(() => {
+        if (this.noise2D) {
+          this.requestCook();
+        }
+      });
+      return;
+    }
+
+    const [width, height] = this.getResolution();
+    const scale = this.props.scale.value;
+    const iterations = this.props.iterations.value;
+    const seed = this.props.seed.value;
+
+    if (seed !== this.currentSeed) {
+      this.initNoise().then(() => {
+        if (this.noise2D) {
+          this.requestCook();
+        }
+      });
+      return;
+    }
+
+    // Create grayscale buffer (single channel for efficiency)
+    const buffer = ImageBuffer.grayscale(width, height);
+    const gray = buffer.r();
+
+    // Generate fractal noise
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        let value = 0;
+        let amplitude = 1;
+        let frequency = scale;
+        let maxValue = 0;
+
+        for (let i = 0; i < iterations; i++) {
+          const nx = x * frequency;
+          const ny = y * frequency;
+          const noiseValue = this.noise2D!(nx, ny);
+          value += noiseValue * amplitude;
+          maxValue += amplitude;
+          amplitude *= 0.5;
+          frequency *= 2;
+        }
+
+        // Normalize to [0, 1]
+        value = (value / maxValue + 1) * 0.5;
+        gray[y * width + x] = value;
+      }
+    }
+
+    buffer.markDirty();
+    this.setOutput(this.output, buffer);
+  }
+}
+`,E=`/**
+ * BlurNode - applies Gaussian blur to an ImageBuffer
+ * Uses separable convolution for efficiency
+ */
+
+import { ImageNodeBase, ImageBuffer, type ImageInput } from '../ImageNodeBase';
+import type { Graph } from '@/nodes/Graph';
+import type { InputPort, OutputPort } from '@/types/node.types';
+
+export class BlurNode extends ImageNodeBase {
+  private image!: InputPort<ImageInput>;
+  private output!: OutputPort<ImageBuffer>;
+
+  constructor(id: string, graph: Graph) {
+    super(id, 'Blur', graph);
+  }
+
+  protected setup(): void {
+    this.image = this.in<ImageInput>('image', null);
+
+    this.addParm('method', {
+      value: 'box',
+      params: {
+        options: [
+          { value: 'box', label: 'Box (Fast)' },
+          { value: 'gaussian', label: 'Gaussian (Accurate)' }
+        ]
+      },
+      displayName: 'Method',
+      onChange: () => this.requestCook()
+    });
+
+    this.addParm('radius', {
+      value: 5.0,
+      params: {
+        min: 0.0,
+        max: 100.0,
+        step: 0.1
+      },
+      displayName: 'Radius',
+      onChange: () => this.requestCook()
+    });
+
+    this.addParm('wrapEdges', {
+      value: false,
+      type: 'boolean',
+      displayName: 'Wrap Edges',
+      onChange: () => this.requestCook()
+    });
+
+    this.output = this.out('image');
+
+    this.image.onChange = () => this.requestCook();
+
+    this.onReady = () => this.requestCook();
+  }
+
+  /**
+   * Fast blur using stacked box blur approximation.
+   * 3 passes of box blur closely approximates Gaussian and is O(1) per pixel.
+   */
+  private boxBlur(source: ImageBuffer, radius: number, wrapEdges: boolean): ImageBuffer {
+    if (radius <= 0) {
+      return source.clone();
+    }
+
+    const { width, height } = source;
+
+    // Calculate box sizes for Gaussian approximation
+    // Using 3 passes gives a good approximation
+    const sigma = radius;
+    const boxes = this.boxesForGauss(sigma, 3);
+
+    // Process each channel
+    const result = source.emptyClone();
+
+    for (let c = 0; c < source.channelCount; c++) {
+      // Copy source to result for in-place processing
+      const channelData = new Float32Array(source.channels[c]);
+
+      // Apply 3 box blur passes
+      for (const boxSize of boxes) {
+        this.boxBlurPass(channelData, width, height, boxSize, wrapEdges);
+      }
+
+      result.channels[c].set(channelData);
+    }
+
+    return result;
+  }
+
+  /**
+   * Calculate box sizes for Gaussian approximation.
+   * Returns array of box radii for n passes.
+   */
+  private boxesForGauss(sigma: number, n: number): number[] {
+    // Ideal box width for Gaussian approximation
+    const wIdeal = Math.sqrt((12 * sigma * sigma / n) + 1);
+    let wl = Math.floor(wIdeal);
+    if (wl % 2 === 0) wl--;
+    const wu = wl + 2;
+
+    const mIdeal = (12 * sigma * sigma - n * wl * wl - 4 * n * wl - 3 * n) / (-4 * wl - 4);
+    const m = Math.round(mIdeal);
+
+    const sizes: number[] = [];
+    for (let i = 0; i < n; i++) {
+      sizes.push(i < m ? wl : wu);
+    }
+    return sizes.map(s => (s - 1) / 2); // Convert to radius
+  }
+
+  /**
+   * Single box blur pass (horizontal then vertical) - O(1) per pixel
+   */
+  private boxBlurPass(data: Float32Array, w: number, h: number, r: number, wrap: boolean): void {
+    if (r < 1) return;
+
+    const temp = new Float32Array(w * h);
+    const ri = Math.floor(r);
+    const diameter = ri * 2 + 1;
+    const invDiameter = 1 / diameter;
+
+    // Horizontal pass - O(1) per pixel using sliding window
+    for (let y = 0; y < h; y++) {
+      const rowOffset = y * w;
+      let sum = 0;
+
+      // Initialize sum for first pixel
+      for (let i = -ri; i <= ri; i++) {
+        const px = wrap ? ((i % w) + w) % w : Math.max(0, Math.min(w - 1, i));
+        sum += data[rowOffset + px];
+      }
+      temp[rowOffset] = sum * invDiameter;
+
+      // Slide window across row
+      for (let x = 1; x < w; x++) {
+        // Remove left pixel, add right pixel
+        const removeX = wrap ? (((x - ri - 1) % w) + w) % w : Math.max(0, x - ri - 1);
+        const addX = wrap ? (((x + ri) % w) + w) % w : Math.min(w - 1, x + ri);
+        sum -= data[rowOffset + removeX];
+        sum += data[rowOffset + addX];
+        temp[rowOffset + x] = sum * invDiameter;
+      }
+    }
+
+    // Vertical pass - O(1) per pixel using sliding window
+    for (let x = 0; x < w; x++) {
+      let sum = 0;
+
+      // Initialize sum for first pixel
+      for (let i = -ri; i <= ri; i++) {
+        const py = wrap ? ((i % h) + h) % h : Math.max(0, Math.min(h - 1, i));
+        sum += temp[py * w + x];
+      }
+      data[x] = sum * invDiameter;
+
+      // Slide window down column
+      for (let y = 1; y < h; y++) {
+        const removeY = wrap ? (((y - ri - 1) % h) + h) % h : Math.max(0, y - ri - 1);
+        const addY = wrap ? (((y + ri) % h) + h) % h : Math.min(h - 1, y + ri);
+        sum -= temp[removeY * w + x];
+        sum += temp[addY * w + x];
+        data[y * w + x] = sum * invDiameter;
+      }
+    }
+  }
+
+  /**
+   * True Gaussian blur using separable convolution.
+   * More accurate but O(radius) per pixel - slower for large radii.
+   */
+  private trueGaussianBlur(source: ImageBuffer, radius: number, wrapEdges: boolean): ImageBuffer {
+    if (radius <= 0) {
+      return source.clone();
+    }
+
+    const { width, height } = source;
+    const result = source.emptyClone();
+
+    // Create Gaussian kernel
+    const kernelSize = Math.ceil(radius * 3) * 2 + 1;
+    const kernel = new Float32Array(kernelSize);
+    const sigma = radius / 3;
+    const twoSigmaSq = 2 * sigma * sigma;
+    let sum = 0;
+
+    const halfKernel = (kernelSize - 1) >> 1;
+
+    for (let i = 0; i < kernelSize; i++) {
+      const x = i - halfKernel;
+      const value = Math.exp(-(x * x) / twoSigmaSq);
+      kernel[i] = value;
+      sum += value;
+    }
+
+    // Normalize kernel
+    const invSum = 1 / sum;
+    for (let i = 0; i < kernelSize; i++) {
+      kernel[i] *= invSum;
+    }
+
+    // Inline wrapCoord functions
+    const wrapX = wrapEdges
+      ? (coord: number) => ((coord % width) + width) % width
+      : (coord: number) => coord < 0 ? 0 : coord >= width ? width - 1 : coord;
+    const wrapY = wrapEdges
+      ? (coord: number) => ((coord % height) + height) % height
+      : (coord: number) => coord < 0 ? 0 : coord >= height ? height - 1 : coord;
+
+    // Process each channel
+    for (let c = 0; c < source.channelCount; c++) {
+      const srcChannel = source.channels[c];
+      const dstChannel = result.channels[c];
+      const temp = new Float32Array(width * height);
+
+      // Horizontal pass
+      for (let y = 0; y < height; y++) {
+        const rowOffset = y * width;
+        for (let x = 0; x < width; x++) {
+          let acc = 0;
+          for (let k = 0; k < kernelSize; k++) {
+            const px = wrapX(x + k - halfKernel);
+            acc += srcChannel[rowOffset + px] * kernel[k];
+          }
+          temp[rowOffset + x] = acc;
+        }
+      }
+
+      // Vertical pass
+      for (let x = 0; x < width; x++) {
+        for (let y = 0; y < height; y++) {
+          let acc = 0;
+          for (let k = 0; k < kernelSize; k++) {
+            const py = wrapY(y + k - halfKernel);
+            acc += temp[py * width + x] * kernel[k];
+          }
+          dstChannel[y * width + x] = acc;
+        }
+      }
+    }
+
+    return result;
+  }
+
+  protected render(): void {
+    const buffer = this.toImageBuffer(this.image.value);
+    if (!buffer) {
+      return;
+    }
+
+    const method = this.props.method.value;
+    const radius = this.props.radius.value;
+    const wrapEdges = this.props.wrapEdges.value;
+
+    const blurred = method === 'gaussian'
+      ? this.trueGaussianBlur(buffer, radius, wrapEdges)
+      : this.boxBlur(buffer, radius, wrapEdges);
+
+    this.setOutput(this.output, blurred);
+  }
+}
+`,D=`/**
+ * TextNode - Renders text onto an ImageBuffer
+ *
+ * Similar to Houdini's Font node, provides extensive control over
+ * text rendering including font, size, alignment, color, and transforms.
+ */
+
+import { ImageNodeBase, ImageBuffer } from '../ImageNodeBase';
+import type { Graph } from '@/nodes/Graph';
+import type { OutputPort } from '@/types/node.types';
+import { colorToCss, normalizeColor } from '@/utils/colorUtils';
+
+export class TextNode extends ImageNodeBase {
+  private output!: OutputPort<ImageBuffer>;
+
+  constructor(id: string, graph: Graph) {
+    super(id, 'Text', graph);
+  }
+
+  protected setup(): void {
+    // Text content (multiline)
+    this.addParm('text', {
+      value: 'Hello, World!',
+      type: 'textarea',
+      displayName: 'Text'
+    });
+
+    // Font family
+    this.addParm('font', {
+      value: 'Inter, system-ui, sans-serif',
+      type: 'text',
+      displayName: 'Font'
+    });
+
+    // Font size in pixels
+    this.addParm('fontSize', {
+      value: 48,
+      type: 'slider',
+      params: { min: 1, max: 500, step: 1 },
+      displayName: 'Font Size'
+    });
+
+    // Font weight
+    this.addParm('fontWeight', {
+      value: 'normal',
+      type: 'select',
+      params: {
+        options: [
+          { value: 'normal', label: 'Normal' },
+          { value: 'bold', label: 'Bold' },
+          { value: '100', label: 'Thin (100)' },
+          { value: '200', label: 'Extra Light (200)' },
+          { value: '300', label: 'Light (300)' },
+          { value: '500', label: 'Medium (500)' },
+          { value: '600', label: 'Semi Bold (600)' },
+          { value: '700', label: 'Bold (700)' },
+          { value: '800', label: 'Extra Bold (800)' },
+          { value: '900', label: 'Black (900)' }
+        ]
+      },
+      displayName: 'Font Weight'
+    });
+
+    // Font style
+    this.addParm('fontStyle', {
+      value: 'normal',
+      type: 'select',
+      params: {
+        options: [
+          { value: 'normal', label: 'Normal' },
+          { value: 'italic', label: 'Italic' },
+          { value: 'oblique', label: 'Oblique' }
+        ]
+      },
+      displayName: 'Font Style'
+    });
+
+    // Horizontal alignment
+    this.addParm('alignH', {
+      value: 'center',
+      type: 'select',
+      params: {
+        options: [
+          { value: 'left', label: 'Left' },
+          { value: 'center', label: 'Center' },
+          { value: 'right', label: 'Right' }
+        ]
+      },
+      displayName: 'Horizontal Align'
+    });
+
+    // Vertical alignment
+    this.addParm('alignV', {
+      value: 'middle',
+      type: 'select',
+      params: {
+        options: [
+          { value: 'top', label: 'Top' },
+          { value: 'middle', label: 'Middle' },
+          { value: 'bottom', label: 'Bottom' }
+        ]
+      },
+      displayName: 'Vertical Align'
+    });
+
+    // Text color
+    this.addParm('color', {
+      value: { r: 1.0, g: 1.0, b: 1.0 },
+      type: 'color',
+      displayName: 'Color'
+    });
+
+    // Background color (with alpha for transparency)
+    this.addParm('backgroundColor', {
+      value: { r: 0.0, g: 0.0, b: 0.0, a: 0.0 },
+      type: 'color',
+      displayName: 'Background'
+    });
+
+    this.addResolutionParm();
+
+    // Position offset (relative to alignment anchor)
+    this.addParm('offset', {
+      value: [0, 0],
+      params: {
+        min: [-2048, -2048],
+        max: [2048, 2048],
+        step: 1
+      },
+      displayName: 'Offset'
+    });
+
+    // Rotation in degrees
+    this.addParm('rotation', {
+      value: 0,
+      type: 'slider',
+      params: { min: -180, max: 180, step: 0.1 },
+      displayName: 'Rotation'
+    });
+
+    // Letter spacing (tracking)
+    this.addParm('letterSpacing', {
+      value: 0,
+      type: 'slider',
+      params: { min: -50, max: 100, step: 0.5 },
+      displayName: 'Letter Spacing'
+    });
+
+    // Line height multiplier
+    this.addParm('lineHeight', {
+      value: 1.2,
+      type: 'slider',
+      params: { min: 0.5, max: 3.0, step: 0.05 },
+      displayName: 'Line Height'
+    });
+
+    // Opacity
+    this.addParm('opacity', {
+      value: 1.0,
+      type: 'slider',
+      params: { min: 0, max: 1, step: 0.01 },
+      displayName: 'Opacity'
+    });
+
+    this.output = this.out('image');
+
+    // Watch all properties for changes (resolution is handled by addResolutionParm)
+    const propNames = [
+      'text', 'font', 'fontSize', 'fontWeight', 'fontStyle',
+      'alignH', 'alignV', 'color', 'backgroundColor',
+      'offset', 'rotation', 'letterSpacing', 'lineHeight', 'opacity'
+    ];
+    propNames.forEach(prop => this.watchProp(prop, () => this.requestCook()));
+
+    this.onReady = () => this.requestCook();
+  }
+
+  protected render(): void {
+    const [width, height] = this.getResolution();
+    const text = this.props.text.value as string;
+    const font = this.props.font.value as string;
+    const fontSize = this.props.fontSize.value as number;
+    const fontWeight = this.props.fontWeight.value as string;
+    const fontStyle = this.props.fontStyle.value as string;
+    const alignH = this.props.alignH.value as string;
+    const alignV = this.props.alignV.value as string;
+    const color = normalizeColor(this.props.color.value);
+    const bgColor = normalizeColor(this.props.backgroundColor.value);
+    const [offsetX, offsetY] = this.props.offset.value;
+    const rotation = this.props.rotation.value as number;
+    const letterSpacing = this.props.letterSpacing.value as number;
+    const lineHeight = this.props.lineHeight.value as number;
+    const opacity = this.props.opacity.value as number;
+
+    // Create canvas for rendering
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+      this.setOutput(this.output, ImageBuffer.rgba(width, height));
+      return;
+    }
+
+    // Fill background
+    if (bgColor.a > 0) {
+      ctx.fillStyle = colorToCss(bgColor);
+      ctx.fillRect(0, 0, width, height);
+    } else {
+      // Transparent background
+      ctx.clearRect(0, 0, width, height);
+    }
+
+    // Set up text rendering
+    ctx.save();
+
+    // Apply global alpha for opacity
+    ctx.globalAlpha = opacity;
+
+    // Build font string
+    const fontString = \`\${fontStyle} \${fontWeight} \${fontSize}px \${font}\`;
+    ctx.font = fontString;
+    ctx.fillStyle = colorToCss(color);
+
+    // Calculate text metrics for multiline
+    const lines = text.split('\\n');
+    const lineHeightPx = fontSize * lineHeight;
+    const totalTextHeight = lines.length * lineHeightPx;
+
+    // Calculate anchor point based on alignment
+    let anchorX: number;
+    let anchorY: number;
+
+    switch (alignH) {
+      case 'left':
+        ctx.textAlign = 'left';
+        anchorX = 0;
+        break;
+      case 'right':
+        ctx.textAlign = 'right';
+        anchorX = width;
+        break;
+      case 'center':
+      default:
+        ctx.textAlign = 'center';
+        anchorX = width / 2;
+        break;
+    }
+
+    switch (alignV) {
+      case 'top':
+        anchorY = fontSize; // Baseline offset
+        break;
+      case 'bottom':
+        anchorY = height - totalTextHeight + fontSize;
+        break;
+      case 'middle':
+      default:
+        anchorY = (height - totalTextHeight) / 2 + fontSize;
+        break;
+    }
+
+    // Apply offset
+    anchorX += offsetX;
+    anchorY += offsetY;
+
+    // Apply rotation around anchor point
+    if (rotation !== 0) {
+      const rotationRad = (rotation * Math.PI) / 180;
+      ctx.translate(anchorX, anchorY - fontSize / 2 + totalTextHeight / 2);
+      ctx.rotate(rotationRad);
+      ctx.translate(-anchorX, -(anchorY - fontSize / 2 + totalTextHeight / 2));
+    }
+
+    // Render each line
+    if (letterSpacing !== 0) {
+      // Manual letter spacing - render character by character
+      ctx.textAlign = 'left';
+      for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        const y = anchorY + i * lineHeightPx;
+
+        // Calculate line width for alignment
+        let lineWidth = 0;
+        for (const char of line) {
+          lineWidth += ctx.measureText(char).width + letterSpacing;
+        }
+        lineWidth -= letterSpacing; // Remove trailing spacing
+
+        // Calculate starting X based on alignment
+        let x: number;
+        switch (alignH) {
+          case 'left':
+            x = anchorX;
+            break;
+          case 'right':
+            x = anchorX - lineWidth;
+            break;
+          case 'center':
+          default:
+            x = anchorX - lineWidth / 2;
+            break;
+        }
+
+        // Render each character
+        for (const char of line) {
+          ctx.fillText(char, x, y);
+          x += ctx.measureText(char).width + letterSpacing;
+        }
+      }
+    } else {
+      // Standard text rendering (faster)
+      for (let i = 0; i < lines.length; i++) {
+        const y = anchorY + i * lineHeightPx;
+        ctx.fillText(lines[i], anchorX, y);
+      }
+    }
+
+    ctx.restore();
+
+    // Convert canvas to ImageBuffer
+    const buffer = ImageBuffer.fromCanvas(canvas);
+    this.setOutput(this.output, buffer);
+  }
+}
+`,O=`/**
+ * TransformNode - 2D transformation (rotation, translation, scaling) for images
+ */
+
+import { ImageNodeBase, ImageBuffer } from '../ImageNodeBase';
+import type { Graph } from '@/nodes/Graph';
+import type { InputPort, OutputPort } from '@/types/node.types';
+
+export class TransformNode extends ImageNodeBase {
+  private imageInput!: InputPort<ImageBuffer | null>;
+  private output!: OutputPort<ImageBuffer>;
+
+  constructor(id: string, graph: Graph) {
+    super(id, 'Transform', graph);
+  }
+
+  protected setup(): void {
+    this.imageInput = this.in<ImageBuffer | null>('image', null);
+
+    this.addParm('translate', {
+      value: [0, 0],
+      params: {
+        min: [-2048, -2048],
+        max: [2048, 2048],
+        step: 1
+      },
+      displayName: 'Translate',
+      onChange: () => this.requestCook()
+    });
+
+    this.addParm('rotation', {
+      value: 0,
+      params: {
+        min: -180,
+        max: 180,
+        step: 0.1
+      },
+      displayName: 'Rotation',
+      onChange: () => this.requestCook()
+    });
+
+    this.addParm('scale', {
+      value: [1, 1],
+      params: {
+        min: [0.01, 0.01],
+        max: [10, 10],
+        step: 0.01
+      },
+      displayName: 'Scale',
+      onChange: () => this.requestCook()
+    });
+
+    this.addParm('uniformScale', {
+      value: true,
+      type: 'boolean',
+      displayName: 'Uniform Scale',
+      onChange: () => this.requestCook()
+    });
+
+    this.addParm('pivot', {
+      value: 'center',
+      params: {
+        options: [
+          { value: 'center', label: 'Center' },
+          { value: 'top-left', label: 'Top Left' },
+          { value: 'top-right', label: 'Top Right' },
+          { value: 'bottom-left', label: 'Bottom Left' },
+          { value: 'bottom-right', label: 'Bottom Right' },
+          { value: 'custom', label: 'Custom' }
+        ]
+      },
+      displayName: 'Pivot',
+      onChange: () => this.requestCook()
+    });
+
+    this.addParm('customPivot', {
+      value: [0.5, 0.5],
+      params: {
+        min: [0, 0],
+        max: [1, 1],
+        step: 0.01
+      },
+      displayName: 'Custom Pivot',
+      hidden: () => this.props.pivot.value !== 'custom',
+      onChange: () => this.requestCook()
+    });
+
+    this.addParm('filter', {
+      value: 'bilinear',
+      params: {
+        options: [
+          { value: 'nearest', label: 'Nearest' },
+          { value: 'bilinear', label: 'Bilinear' }
+        ]
+      },
+      displayName: 'Filter',
+      onChange: () => this.requestCook()
+    });
+
+    this.addParm('wrap', {
+      value: 'clamp',
+      params: {
+        options: [
+          { value: 'clamp', label: 'Clamp' },
+          { value: 'repeat', label: 'Repeat' },
+          { value: 'mirror', label: 'Mirror' },
+          { value: 'transparent', label: 'Transparent' }
+        ]
+      },
+      displayName: 'Wrap Mode',
+      onChange: () => this.requestCook()
+    });
+
+    this.output = this.out('image');
+
+    this.imageInput.onChange = () => this.requestCook();
+
+    this.onReady = () => this.requestCook();
+  }
+
+  private getPivotPoint(width: number, height: number): [number, number] {
+    const pivot = this.props.pivot.value;
+    switch (pivot) {
+      case 'center': return [width / 2, height / 2];
+      case 'top-left': return [0, 0];
+      case 'top-right': return [width, 0];
+      case 'bottom-left': return [0, height];
+      case 'bottom-right': return [width, height];
+      case 'custom':
+        const [px, py] = this.props.customPivot.value;
+        return [px * width, py * height];
+      default: return [width / 2, height / 2];
+    }
+  }
+
+  private wrapCoord(coord: number, size: number, mode: string): number {
+    if (mode === 'clamp') {
+      return Math.max(0, Math.min(size - 1, coord));
+    } else if (mode === 'repeat') {
+      coord = coord % size;
+      if (coord < 0) coord += size;
+      return coord;
+    } else if (mode === 'mirror') {
+      const period = size * 2;
+      coord = Math.abs(coord % period);
+      if (coord >= size) coord = period - coord - 1;
+      return Math.max(0, Math.min(size - 1, coord));
+    }
+    return coord; // transparent - will be checked separately
+  }
+
+  protected render(): void {
+    const input = this.toImageBuffer(this.imageInput.value);
+    if (!input) {
+      return;
+    }
+
+    const width = input.width;
+    const height = input.height;
+    const [tx, ty] = this.props.translate.value;
+    const rotation = this.props.rotation.value * Math.PI / 180;
+    let [sx, sy] = this.props.scale.value;
+    const uniformScale = this.props.uniformScale.value;
+    const filterMode = this.props.filter.value;
+    const wrapMode = this.props.wrap.value;
+
+    if (uniformScale) {
+      sy = sx;
+    }
+
+    const [pivotX, pivotY] = this.getPivotPoint(width, height);
+
+    // Pre-compute inverse transform matrix
+    const cosR = Math.cos(-rotation);
+    const sinR = Math.sin(-rotation);
+    const invSx = 1 / sx;
+    const invSy = 1 / sy;
+
+    const buffer = ImageBuffer.rgba(width, height);
+    const channelCount = Math.min(input.channelCount, 4);
+
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        // Transform from destination to source coordinates
+        // 1. Translate to pivot
+        let dx = x - pivotX - tx;
+        let dy = y - pivotY - ty;
+
+        // 2. Rotate (inverse)
+        const rx = dx * cosR - dy * sinR;
+        const ry = dx * sinR + dy * cosR;
+
+        // 3. Scale (inverse)
+        const srcX = rx * invSx + pivotX;
+        const srcY = ry * invSy + pivotY;
+
+        // Check bounds for transparent mode
+        if (wrapMode === 'transparent') {
+          if (srcX < 0 || srcX >= width || srcY < 0 || srcY >= height) {
+            const idx = y * width + x;
+            for (let c = 0; c < 4; c++) {
+              buffer.channels[c][idx] = c === 3 ? 0 : 0; // transparent black
+            }
+            continue;
+          }
+        }
+
+        const idx = y * width + x;
+
+        if (filterMode === 'nearest') {
+          const sx0 = Math.round(srcX);
+          const sy0 = Math.round(srcY);
+          const wx = this.wrapCoord(sx0, width, wrapMode);
+          const wy = this.wrapCoord(sy0, height, wrapMode);
+          const srcIdx = wy * width + wx;
+
+          for (let c = 0; c < channelCount; c++) {
+            buffer.channels[c][idx] = input.channels[c][srcIdx];
+          }
+          // Fill alpha if input doesn't have it
+          if (channelCount < 4) {
+            buffer.channels[3][idx] = 1;
+          }
+        } else {
+          // Bilinear interpolation
+          const x0 = Math.floor(srcX);
+          const y0 = Math.floor(srcY);
+          const x1 = x0 + 1;
+          const y1 = y0 + 1;
+          const fx = srcX - x0;
+          const fy = srcY - y0;
+
+          const wx0 = this.wrapCoord(x0, width, wrapMode);
+          const wx1 = this.wrapCoord(x1, width, wrapMode);
+          const wy0 = this.wrapCoord(y0, height, wrapMode);
+          const wy1 = this.wrapCoord(y1, height, wrapMode);
+
+          const idx00 = wy0 * width + wx0;
+          const idx10 = wy0 * width + wx1;
+          const idx01 = wy1 * width + wx0;
+          const idx11 = wy1 * width + wx1;
+
+          for (let c = 0; c < channelCount; c++) {
+            const v00 = input.channels[c][idx00];
+            const v10 = input.channels[c][idx10];
+            const v01 = input.channels[c][idx01];
+            const v11 = input.channels[c][idx11];
+
+            const v0 = v00 + (v10 - v00) * fx;
+            const v1 = v01 + (v11 - v01) * fx;
+            buffer.channels[c][idx] = v0 + (v1 - v0) * fy;
+          }
+          // Fill alpha if input doesn't have it
+          if (channelCount < 4) {
+            buffer.channels[3][idx] = 1;
+          }
+        }
+      }
+    }
+
+    buffer.markDirty();
+    this.setOutput(this.output, buffer);
+  }
+}
+`;function k(e,t){let n=document.createElement(`canvas`);return n.width=e,n.height=t,n}function A(e){return e instanceof HTMLCanvasElement?{width:e.width,height:e.height}:e instanceof HTMLImageElement?{width:e.naturalWidth||e.width,height:e.naturalHeight||e.height}:{width:0,height:0}}function j(e){if(e instanceof HTMLCanvasElement)return e;let t=k(e.naturalWidth||e.width,e.naturalHeight||e.height),n=t.getContext(`2d`);return n&&n.drawImage(e,0,0),t}function M(e){return new Promise((t,n)=>{let r=new Image;r.crossOrigin=`anonymous`,r.onload=()=>t(r),r.onerror=()=>n(Error(`Failed to load image: ${e}`)),r.src=e})}function N(e,t,n){let{width:r,height:i}=A(e),a=r/i,o=r,s=i;r>t&&(o=t,s=t/a),s>n&&(s=n,o=n*a);let c=k(Math.round(o),Math.round(s)),l=c.getContext(`2d`);return l&&l.drawImage(e,0,0,c.width,c.height),c}function P(e,t,n){let r=k(t,n),i=r.getContext(`2d`);return i&&i.drawImage(e,0,0,t,n),r}function F(e,t){let{width:n,height:r}=A(e);return P(e,Math.round(n*t),Math.round(r*t))}function I(e){return{normal:`source-over`,multiply:`multiply`,screen:`screen`,overlay:`overlay`,darken:`darken`,lighten:`lighten`,"color-dodge":`color-dodge`,"color-burn":`color-burn`,"hard-light":`hard-light`,"soft-light":`soft-light`,difference:`difference`,exclusion:`exclusion`,add:`lighter`,subtract:`difference`}[e]||`source-over`}var L={Color:s,Image:c,Composite:l,Checkers:u,Resize:d,NormalMap:f,Ramp:p,Noise:m,Blur:h,Text:g,Transform:_};t(`image`,L),e(`Color`,v),e(`Image`,y),e(`Composite`,b),e(`Checkers`,x),e(`Resize`,S),e(`NormalMap`,C),e(`Ramp`,w),e(`Noise`,T),e(`Blur`,E),e(`Text`,D),e(`Transform`,O);export{h as BlurNode,u as CheckersNode,s as ColorNode,l as CompositeNode,c as ImageNode,o as ImageNodeBase,m as NoiseNode,f as NormalMapNode,p as RampNode,d as ResizeNode,g as TextNode,_ as TransformNode,k as createCanvas,I as getBlendMode,A as getImageResolution,a as imageLibrary,L as imageNodeClasses,j as imageToCanvas,M as loadImage,P as resizeImageToFixed,N as resizeImageWithAspectRatio,F as scaleImage};