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/nodes/frame-node.tsx

@@ -1,72 +1,119 @@
 "use client";
 
-import { useState, useCallback } from "react";
-import { type NodeProps, type Node } from "@xyflow/react";
-import { useMutation } from "convex/react";
+import { useCallback, useState } from "react";
+import { Handle, NodeResizer, Position, type NodeProps } from "@xyflow/react";
+import { useAction, useMutation } from "convex/react";
+import { Download, Loader2 } from "lucide-react";
 import { api } from "@/convex/_generated/api";
 import type { Id } from "@/convex/_generated/dataModel";
+import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
 import BaseNodeWrapper from "./base-node-wrapper";
 
-type FrameNodeData = {
+interface FrameNodeData {
   label?: string;
-  resolution?: string;
-  _status?: string;
-  _statusMessage?: string;
-};
+  width?: number;
+  height?: number;
+}
 
-export type FrameNode = Node<FrameNodeData, "frame">;
-
-export default function FrameNode({ id, data, selected }: NodeProps<FrameNode>) {
+export default function FrameNode({ id, data, selected, width, height }: NodeProps) {
+  const nodeData = data as FrameNodeData;
   const updateData = useMutation(api.nodes.updateData);
-  const [editingLabel, setEditingLabel] = useState<string | null>(null);
+  const exportFrame = useAction(api.export.exportFrame);
 
-  const displayLabel = data.label ?? "Frame";
-  const isEditing = editingLabel !== null;
+  const [label, setLabel] = useState(nodeData.label ?? "Frame");
+  const [isExporting, setIsExporting] = useState(false);
+  const [exportError, setExportError] = useState<string | null>(null);
 
-  const handleDoubleClick = useCallback(() => {
-    setEditingLabel(displayLabel);
-  }, [displayLabel]);
+  const debouncedSave = useDebouncedCallback((value: string) => {
+    void updateData({ nodeId: id as Id<"nodes">, data: { ...nodeData, label: value } });
+  }, 500);
 
-  const handleBlur = useCallback(() => {
-    if (editingLabel !== null && editingLabel !== data.label) {
-      updateData({
-        nodeId: id as Id<"nodes">,
-        data: {
-          ...data,
-          label: editingLabel,
-          _status: undefined,
-          _statusMessage: undefined,
-        },
-      });
+  const handleLabelChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setLabel(event.target.value);
+      debouncedSave(event.target.value);
+    },
+    [debouncedSave],
+  );
+
+  const handleExport = useCallback(async () => {
+    if (isExporting) return;
+    setIsExporting(true);
+    setExportError(null);
+
+    try {
+      const result = await exportFrame({ frameNodeId: id as Id<"nodes"> });
+      const a = document.createElement("a");
+      a.href = result.url;
+      a.download = result.filename;
+      a.click();
+    } catch (error) {
+      setExportError(error instanceof Error ? error.message : "Export failed");
+    } finally {
+      setIsExporting(false);
     }
-    setEditingLabel(null);
-  }, [editingLabel, data, id, updateData]);
+  }, [exportFrame, id, isExporting]);
+
+  const frameW = Math.round(width ?? 400);
+  const frameH = Math.round(height ?? 300);
 
   return (
     <BaseNodeWrapper
       selected={selected}
-      className="min-w-[300px] min-h-[200px] p-3 border-blue-500/30"
+      className="relative h-full w-full border-2 border-dashed border-muted-foreground/40 !bg-transparent p-0 shadow-none"
     >
-      {isEditing ? (
+      <NodeResizer isVisible={selected} minWidth={200} minHeight={150} />
+
+      <div className="absolute -top-8 left-0 flex items-center gap-2">
         <input
-          value={editingLabel}
-          onChange={(e) => setEditingLabel(e.target.value)}
-          onBlur={handleBlur}
-          onKeyDown={(e) => e.key === "Enter" && handleBlur()}
-          autoFocus
-          className="nodrag text-xs font-medium text-blue-500 bg-transparent border-0 outline-none w-full"
+          value={label}
+          onChange={handleLabelChange}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              (event.target as HTMLInputElement).blur();
+            }
+          }}
+          className="nodrag nowheel w-40 border-none bg-transparent text-sm font-medium text-muted-foreground outline-none focus:text-foreground"
         />
-      ) : (
-        <div
-          onDoubleClick={handleDoubleClick}
-          className="text-xs font-medium text-blue-500 cursor-text"
+
+        <span className="text-xs text-muted-foreground/60">
+          {frameW}x{frameH}
+        </span>
+
+        <button
+          onClick={() => void handleExport()}
+          disabled={isExporting}
+          title="Export as PNG"
+          className="nodrag flex items-center gap-1 rounded-md border border-border bg-background px-2 py-1 text-xs font-medium transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
+          type="button"
         >
-          🖥️ {displayLabel}{" "}
-          {data.resolution && (
-            <span className="text-muted-foreground">({data.resolution})</span>
+          {isExporting ? (
+            <Loader2 className="h-3 w-3 animate-spin" />
+          ) : (
+            <Download className="h-3 w-3" />
           )}
-        </div>
+          {isExporting ? "Exporting..." : "Export PNG"}
+        </button>
+      </div>
+
+      {exportError && (
+        <div className="absolute -bottom-6 left-0 text-xs text-destructive">{exportError}</div>
       )}
+
+      <div className="nodrag h-full w-full" />
+
+      <Handle
+        type="target"
+        position={Position.Left}
+        id="frame-in"
+        className="!h-3 !w-3 !border-2 !border-background !bg-orange-500"
+      />
+      <Handle
+        type="source"
+        position={Position.Right}
+        id="frame-out"
+        className="!h-3 !w-3 !border-2 !border-background !bg-orange-500"
+      />
     </BaseNodeWrapper>
   );
 }