feat: add feather brush tool with adjustable settings and blending functionality

- Implemented feather brush tool in the brushRaster module, allowing for feathered edges in brush strokes.
- Added new FeatherControls component for UI adjustments of feather settings including size, radius, strength, and smoothing.
- Updated brush preview logic to accommodate feather tool alongside existing brush and eraser tools.
- Enhanced layer rendering to support feather mask previews and interactions.
- Introduced blending logic for feathered strokes to mix blurred mask values with original pixels.
- Added unit tests for feather blending functionality and tool keybindings.
- Updated cursor handling to reflect feather tool usage.

input/tool-keybinds.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, test } from "bun:test";
+import { commandIds } from "@commands/ids";
+import type { Dispatch } from "@commands/dispatcher";
+import { handleToolKey } from "./tool-keybinds";
+
+describe("tool keybinds", () => {
+  test("selects the feather tool with F", () => {
+    const dispatched: unknown[] = [];
+    const consumed = handleToolKey({
+      event: { key: "f", code: "KeyF", altKey: false, ctrlKey: false, metaKey: false, shiftKey: false },
+      dispatch: ((commandId: unknown, payload: unknown) => {
+        dispatched.push({ commandId, payload });
+        return undefined;
+      }) as unknown as Dispatch,
+    });
+
+    expect(consumed).toBe(true);
+    expect(dispatched).toEqual([{ commandId: commandIds.toolSetActive, payload: { tool: "feather" } }]);
+  });
+});

input/tool-keybinds.ts

@@ -5,6 +5,7 @@ import type { KeybindEvent } from "./keyboard";
 const toolKeybinds = {
   b: "brush",
   e: "eraser",
+  f: "feather",
   w: "magicWand",
   p: "pan",
   s: "select",

input/transform-controls.ts

@@ -16,7 +16,7 @@ import type { PointerInputEvent } from "./pointer";
 
 type TransformHandle = "body" | "nw" | "n" | "ne" | "e" | "se" | "s" | "sw" | "w";
 
-type InputToolId = "select" | "brush" | "eraser" | "magicWand" | "semanticSelect" | "maskLasso" | "maskRectangle" | "pan";
+type InputToolId = "select" | "brush" | "eraser" | "feather" | "magicWand" | "semanticSelect" | "maskLasso" | "maskRectangle" | "pan";
 
 type InputInteractionMode =
   | { type: "tool"; tool: InputToolId }