feat: add magic wand tool with settings and controls, including UI integration and functionality

editor/index.ts

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

editor/tools.ts

@@ -1,4 +1,4 @@
-export const availableToolIds = ["select", "brush", "eraser", "chromaKey", "pan"] as const;
+export const availableToolIds = ["select", "brush", "eraser", "chromaKey", "magicWand", "pan"] as const;
 
 export type ToolId = (typeof availableToolIds)[number];
 
@@ -22,11 +22,23 @@ export type ChromaKeySettings = {
   spill: number;
 };
 
+export type MagicWandMode = "replace" | "add" | "subtract";
+
+export type MagicWandSettings = {
+  tolerance: number;
+  feather: number;
+  choke: number;
+  despeckle: number;
+  contiguous: boolean;
+  mode: MagicWandMode;
+};
+
 export type ToolState = {
   activeTool: ToolId;
   interactionMode: InteractionMode;
   brush: BrushSettings;
   chromaKey: ChromaKeySettings;
+  magicWand: MagicWandSettings;
 };
 
 export const initialToolState: ToolState = {
@@ -34,6 +46,7 @@ export const initialToolState: ToolState = {
   interactionMode: { type: "tool", tool: "select" },
   brush: { color: "#111827", size: 8, hardness: 100 },
   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" },
 };
 
 export function isPanInteractionMode(interactionMode: InteractionMode): boolean {