♻️ refactor!: massive refactor

apps/web/lib/effects/registry.ts

@@ -12,7 +12,6 @@ export function getEffectRenderer(kind: string): EffectRenderer | undefined {
   return effectRendererRegistry.get(kind);
 }
 
-/** Draws a layer image applying all its effects in order. */
 export function renderLayerWithEffects(
   ctx: CanvasRenderingContext2D,
   image: HTMLImageElement,
@@ -30,14 +29,18 @@ export function renderLayerWithEffects(
     return;
   }
 
-  const context: EffectRenderContext = { ctx, image, targetWidth, targetHeight };
+  const context: EffectRenderContext = {
+    ctx,
+    image,
+    targetWidth,
+    targetHeight,
+  };
 
-  // The first effect owns the full layer render (draws base image + applies itself)
+  // The first effect owns the base image draw; later effects only overlay their changes.
   const first = activeEffects[0];
   const firstRenderer = effectRendererRegistry.get(first.kind);
   firstRenderer?.renderLayer(context, first);
 
-  // Subsequent effects render on top (overlay only, no re-draw of base)
   for (let i = 1; i < activeEffects.length; i++) {
     const effect = activeEffects[i];
     const renderer = effectRendererRegistry.get(effect.kind);