feat: add chroma key tool and settings, including UI components and controls

editor/tools.ts

@@ -1,4 +1,4 @@
-export const availableToolIds = ["select", "brush", "eraser", "pan"] as const;
+export const availableToolIds = ["select", "brush", "eraser", "chromaKey", "pan"] as const;
 
 export type ToolId = (typeof availableToolIds)[number];
 
@@ -12,16 +12,28 @@ export type BrushSettings = {
   hardness: number;
 };
 
+export type ChromaKeySettings = {
+  color: string;
+  tolerance: number;
+  softness: number;
+  feather: number;
+  choke: number;
+  despeckle: number;
+  spill: number;
+};
+
 export type ToolState = {
   activeTool: ToolId;
   interactionMode: InteractionMode;
   brush: BrushSettings;
+  chromaKey: ChromaKeySettings;
 };
 
 export const initialToolState: ToolState = {
   activeTool: "select",
   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 },
 };
 
 export function isPanInteractionMode(interactionMode: InteractionMode): boolean {