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.

editor/index.ts

@@ -1,5 +1,5 @@
 export type { AppState, EditorState, SelectionState, ViewportState } from "./state";
-export type { BrushSettings, ChromaKeySettings, MagicWandSettings, InteractionMode, OperationId, ToolId, ToolState } from "./tools";
+export type { BrushSettings, ChromaKeySettings, FeatherSettings, MagicWandSettings, InteractionMode, OperationId, ToolId, ToolState } from "./tools";
 export { initialToolState } from "./tools";
 export { createInitialAppState, initialEditorState } from "./initial-state";
 export type { AppStore, StateListener } from "./store";

editor/state.ts

@@ -35,6 +35,8 @@ export type BrushStrokePreviewState = {
   layerId: LayerId;
   assetId: AssetId;
   source: string;
+  pendingTargetLayerId?: LayerId;
+  intrinsicSize?: Size;
 };
 
 export type MaskShapeSession = {

editor/tools.ts

@@ -1,4 +1,4 @@
-export const availableToolIds = ["select", "brush", "eraser", "magicWand", "semanticSelect", "maskLasso", "maskRectangle", "pan"] as const;
+export const availableToolIds = ["select", "brush", "eraser", "feather", "magicWand", "semanticSelect", "maskLasso", "maskRectangle", "pan"] as const;
 
 export const availableOperationIds = ["generate", "chromaKey"] as const;
 
@@ -19,6 +19,14 @@ export type BrushSettings = {
   pressureSize: boolean;
 };
 
+export type FeatherSettings = {
+  size: number;
+  radius: number;
+  strength: number;
+  smoothing: number;
+  pressureSize: boolean;
+};
+
 export type ChromaKeySettings = {
   color: string;
   tolerance: number;
@@ -115,6 +123,7 @@ export type ToolState = {
   activeTool: ToolId;
   interactionMode: InteractionMode;
   brush: BrushSettings;
+  feather: FeatherSettings;
   chromaKey: ChromaKeySettings;
   magicWand: MagicWandSettings;
   generate: GenerateSettings;
@@ -124,6 +133,7 @@ export const initialToolState: ToolState = {
   activeTool: "select",
   interactionMode: { type: "tool", tool: "select" },
   brush: { color: "#111827", size: 8, hardness: 100, opacity: 100, flow: 100, smoothing: 20, pressureSize: true },
+  feather: { size: 96, radius: 16, strength: 65, smoothing: 25, pressureSize: true },
   chromaKey: { color: "#00ff00", tolerance: 32, softness: 24, feather: 0, choke: 0, despeckle: 0, spill: 50 },
   magicWand: { tolerance: 32, feather: 0, choke: 0, despeckle: 0, contiguous: true, mode: "replace" },
   generate: {