feat: introduce image editing capabilities and enhance canvas component organization

- Added new image editing node types including curves, color adjustment, light adjustment, detail adjustment, and render, expanding the functionality of the canvas.
- Updated the canvas command palette and sidebar to categorize and display new image editing nodes, improving user navigation and accessibility.
- Implemented collapsible categories in the sidebar for better organization of node types, enhancing the overall user experience.
- Refactored canvas components to support the new image editing features, ensuring seamless integration with existing functionalities.

lib/canvas-local-persistence.ts

@@ -165,3 +165,7 @@ export function resolveCanvasOp(canvasId: string, opId: string): void {
   payload.updatedAt = Date.now();
   writePayload(opsKey(canvasId), payload);
 }
+
+export function readCanvasOps(canvasId: string): CanvasPendingOp[] {
+  return readOpsPayload(canvasId).ops;
+}

lib/canvas-node-catalog.ts

@@ -10,6 +10,7 @@ export type NodeCategoryId =
   | "source"
   | "ai-output"
   | "transform"
+  | "image-edit"
   | "control"
   | "layout";
 
@@ -20,8 +21,9 @@ export const NODE_CATEGORY_META: Record<
   source: { label: "Quelle", order: 0 },
   "ai-output": { label: "KI-Ausgabe", order: 1 },
   transform: { label: "Transformation", order: 2 },
-  control: { label: "Steuerung & Flow", order: 3 },
-  layout: { label: "Canvas & Layout", order: 4 },
+  "image-edit": { label: "Bildbearbeitung", order: 3 },
+  control: { label: "Steuerung & Flow", order: 4 },
+  layout: { label: "Canvas & Layout", order: 5 },
 };
 
 export const NODE_CATEGORIES_ORDERED: NodeCategoryId[] = (
@@ -161,6 +163,47 @@ export const NODE_CATALOG: readonly NodeCatalogEntry[] = [
     implemented: false,
     disabledHint: "Folgt in Phase 3",
   }),
+  // Bildbearbeitung
+  entry({
+    type: "curves",
+    label: "Kurven",
+    category: "image-edit",
+    phase: 2,
+    implemented: false,
+    disabledHint: "Folgt in Phase 2",
+  }),
+  entry({
+    type: "color-adjust",
+    label: "Farbe",
+    category: "image-edit",
+    phase: 2,
+    implemented: false,
+    disabledHint: "Folgt in Phase 2",
+  }),
+  entry({
+    type: "light-adjust",
+    label: "Licht",
+    category: "image-edit",
+    phase: 2,
+    implemented: false,
+    disabledHint: "Folgt in Phase 2",
+  }),
+  entry({
+    type: "detail-adjust",
+    label: "Detail",
+    category: "image-edit",
+    phase: 2,
+    implemented: false,
+    disabledHint: "Folgt in Phase 2",
+  }),
+  entry({
+    type: "render",
+    label: "Render",
+    category: "image-edit",
+    phase: 2,
+    implemented: false,
+    disabledHint: "Folgt in Phase 2",
+  }),
   // Steuerung & Flow
   entry({
     type: "splitter",