feat: enhance canvas functionality with new asset node type and improved image handling

- Introduced a new "asset" node type in the canvas sidebar for better resource management.
- Updated image node components to support dynamic image dimensions and improved resizing logic.
- Enhanced prompt and AI image nodes to utilize reference images from asset nodes, improving integration and functionality.
- Refactored canvas utilities to accommodate new asset configurations and maintain consistent media handling.

components/canvas/nodes/ai-image-node.tsx

@@ -97,6 +97,7 @@ export default function AiImageNode({
       const edges = getEdges();
       const incomingEdges = edges.filter((e) => e.target === id);
       let referenceStorageId: Id<"_storage"> | undefined;
+      let referenceImageUrl: string | undefined;
       for (const edge of incomingEdges) {
         const src = getNode(edge.source);
         if (src?.type === "image") {
@@ -106,6 +107,10 @@ export default function AiImageNode({
             break;
           }
         }
+        if (src?.type === "asset") {
+          const srcData = src.data as { previewUrl?: string; url?: string };
+          referenceImageUrl = srcData.url ?? srcData.previewUrl;
+        }
       }
 
       const modelId = nodeData.model ?? DEFAULT_MODEL_ID;
@@ -117,6 +122,7 @@ export default function AiImageNode({
           nodeId: id as Id<"nodes">,
           prompt,
           referenceStorageId,
+          referenceImageUrl,
           model: modelId,
           aspectRatio: nodeData.aspectRatio ?? DEFAULT_ASPECT_RATIO,
         }),