feat: enhance canvas functionality with new node types and improved data handling

- Added support for a new "compare" node type to facilitate side-by-side image comparisons.
- Updated AI image and prompt nodes to include aspect ratio handling for better image generation.
- Enhanced canvas toolbar to include export functionality for canvas data.
- Improved data resolution for compare nodes by resolving incoming edges and updating node data accordingly.
- Refactored frame node to support dynamic resizing and exporting capabilities.
- Introduced debounced saving for prompt node to optimize performance during user input.

components/canvas/canvas-toolbar.tsx

@@ -5,6 +5,7 @@ import { useRef } from "react";
 
 import { api } from "@/convex/_generated/api";
 import type { Id } from "@/convex/_generated/dataModel";
+import { ExportButton } from "@/components/canvas/export-button";
 
 const nodeTemplates = [
   {
@@ -25,8 +26,8 @@ const nodeTemplates = [
     type: "prompt",
     label: "Prompt",
     width: 320,
-    height: 140,
-    defaultData: { prompt: "", model: "" },
+    height: 220,
+    defaultData: { prompt: "", model: "", aspectRatio: "1:1" },
   },
   {
     type: "note",
@@ -42,13 +43,24 @@ const nodeTemplates = [
     height: 240,
     defaultData: { label: "Untitled", exportWidth: 1080, exportHeight: 1080 },
   },
+  {
+    type: "compare",
+    label: "Compare",
+    width: 500,
+    height: 380,
+    defaultData: {},
+  },
 ] as const;
 
 interface CanvasToolbarProps {
   canvasId: Id<"canvases">;
+  canvasName?: string;
 }
 
-export default function CanvasToolbar({ canvasId }: CanvasToolbarProps) {
+export default function CanvasToolbar({
+  canvasId,
+  canvasName,
+}: CanvasToolbarProps) {
   const createNode = useMutation(api.nodes.create);
   const nodeCountRef = useRef(0);
 
@@ -91,6 +103,8 @@ export default function CanvasToolbar({ canvasId }: CanvasToolbarProps) {
           {template.label}
         </button>
       ))}
+      <div className="ml-1 h-6 w-px bg-border" />
+      <ExportButton canvasName={canvasName ?? "canvas"} />
     </div>
   );
 }