♻️ refactor!: massive refactor

apps/web/lib/brush-painter.ts

@@ -2,7 +2,7 @@ export type BrushOptions = {
   color: string;
   size: number;
   opacity: number;
-  hardness: number; // 0–1: 0 = fully soft, 1 = hard edge
+  hardness: number; // 0 to 1: 0 is fully soft, 1 is a hard edge.
 };
 
 export type BrushStroke = {
@@ -31,12 +31,24 @@ export function clampBrushOptions(options: BrushOptions): BrushOptions {
   return {
     color: options.color,
     size: Math.max(1, Number.isFinite(options.size) ? options.size : 1),
-    opacity: Math.max(0, Math.min(1, Number.isFinite(options.opacity) ? options.opacity : 1)),
-    hardness: Math.max(0, Math.min(1, Number.isFinite(options.hardness) ? options.hardness : 1)),
+    opacity: Math.max(
+      0,
+      Math.min(1, Number.isFinite(options.opacity) ? options.opacity : 1),
+    ),
+    hardness: Math.max(
+      0,
+      Math.min(1, Number.isFinite(options.hardness) ? options.hardness : 1),
+    ),
   };
 }
 
-export function buildBrushDabs(x0: number, y0: number, x1: number, y1: number, size: number): BrushDab[] {
+export function buildBrushDabs(
+  x0: number,
+  y0: number,
+  x1: number,
+  y1: number,
+  size: number,
+): BrushDab[] {
   const dx = x1 - x0;
   const dy = y1 - y0;
   const dist = Math.sqrt(dx * dx + dy * dy);
@@ -65,7 +77,10 @@ function drawDab(
   const gradient = ctx.createRadialGradient(x, y, 0, x, y, r);
 
   gradient.addColorStop(0, `rgba(${cr},${cg},${cb},${normalized.opacity})`);
-  gradient.addColorStop(normalized.hardness, `rgba(${cr},${cg},${cb},${normalized.opacity})`);
+  gradient.addColorStop(
+    normalized.hardness,
+    `rgba(${cr},${cg},${cb},${normalized.opacity})`,
+  );
   gradient.addColorStop(1, `rgba(${cr},${cg},${cb},0)`);
 
   ctx.beginPath();
@@ -74,7 +89,6 @@ function drawDab(
   ctx.fill();
 }
 
-/** Creates a fresh stroke canvas sized to the layer. */
 export function createStroke(width: number, height: number): BrushStroke {
   const canvas = document.createElement("canvas");
   canvas.width = Math.max(1, Math.round(width));
@@ -84,7 +98,6 @@ export function createStroke(width: number, height: number): BrushStroke {
   return { canvas, ctx, width: canvas.width, height: canvas.height };
 }
 
-/** Paints a segment of a stroke from (x0,y0) to (x1,y1) using interpolated dabs. */
 export function paintSegment(
   stroke: BrushStroke,
   x0: number,
@@ -99,8 +112,10 @@ export function paintSegment(
   }
 }
 
-/** Merges stroke canvas on top of the source image and returns a data URL. */
-export function commitStroke(sourceUri: string, stroke: BrushStroke): Promise<string> {
+export function commitStroke(
+  sourceUri: string,
+  stroke: BrushStroke,
+): Promise<string> {
   return new Promise((resolve, reject) => {
     const image = new Image();
     image.crossOrigin = "anonymous";
@@ -114,7 +129,6 @@ export function commitStroke(sourceUri: string, stroke: BrushStroke): Promise<st
         return;
       }
       ctx.drawImage(image, 0, 0);
-      // Scale stroke canvas to match image natural size
       ctx.drawImage(stroke.canvas, 0, 0, canvas.width, canvas.height);
       resolve(canvas.toDataURL("image/png"));
     };