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

editor/index.ts

@@ -1,5 +1,5 @@
 export type { AppState, EditorState, SelectionState, ViewportState } from "./state";
-export type { InteractionMode, ToolId, ToolState } from "./tools";
+export type { BrushSettings, ChromaKeySettings, 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", "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 {