feat: add ComfyUI integration for image generation

- Implemented ComfyUI API for generating images with various modes (text-to-image, image-to-image, inpaint, outpaint).
- Created GenerateSheet and associated controls for user input on generation settings.
- Added subtle scrollbar styles for improved UI experience.
- Enhanced canvas input handling to ignore key events when focused on editable elements.
- Optimized canvas resizing logic to prevent unnecessary dispatches.
- Introduced error handling for generation failures and loading models.
- Added functionality to upload images and masks for inpainting.

editor/tools.ts

@@ -1,4 +1,4 @@
-export const availableToolIds = ["select", "brush", "eraser", "chromaKey", "magicWand", "pan"] as const;
+export const availableToolIds = ["select", "generate", "brush", "eraser", "chromaKey", "magicWand", "pan"] as const;
 
 export type ToolId = (typeof availableToolIds)[number];
 
@@ -24,6 +24,32 @@ export type ChromaKeySettings = {
 
 export type MagicWandMode = "replace" | "add" | "subtract";
 
+export type GenerateMode = "text-to-image" | "image-to-image" | "inpaint" | "outpaint";
+
+export type GenerateModel = string;
+
+export type GenerateSettings = {
+  mode: GenerateMode;
+  model: GenerateModel;
+  prompt: string;
+  negativePrompt: string;
+  strength: number;
+  steps: number;
+  cfg: number;
+  seed: number;
+  sampler: string;
+  scheduler: string;
+  width: number;
+  height: number;
+  outpaint: {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    feathering: number;
+  };
+};
+
 export type MagicWandSettings = {
   tolerance: number;
   feather: number;
@@ -39,6 +65,7 @@ export type ToolState = {
   brush: BrushSettings;
   chromaKey: ChromaKeySettings;
   magicWand: MagicWandSettings;
+  generate: GenerateSettings;
 };
 
 export const initialToolState: ToolState = {
@@ -47,6 +74,7 @@ export const initialToolState: ToolState = {
   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" },
+  generate: { mode: "text-to-image", model: "auto", prompt: "", negativePrompt: "", strength: 75, steps: 30, cfg: 7, seed: -1, sampler: "euler", scheduler: "normal", width: 1024, height: 1024, outpaint: { left: 128, top: 128, right: 128, bottom: 128, feathering: 32 } },
 };
 
 export function isPanInteractionMode(interactionMode: InteractionMode): boolean {