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

@@ -182,6 +182,7 @@ export default function PromptNode({
       const incomingEdges = currentEdges.filter((e) => e.target === id);
       let connectedTextPrompt: string | undefined;
       let referenceStorageId: Id<"_storage"> | undefined;
+      let referenceImageUrl: string | undefined;
 
       for (const edge of incomingEdges) {
         const sourceNode = getNode(edge.source);
@@ -197,6 +198,10 @@ export default function PromptNode({
             referenceStorageId = srcData.storageId as Id<"_storage">;
           }
         }
+        if (sourceNode?.type === "asset") {
+          const srcData = sourceNode.data as { previewUrl?: string; url?: string };
+          referenceImageUrl = srcData.url ?? srcData.previewUrl;
+        }
       }
 
       const promptToUse = (connectedTextPrompt ?? prompt).trim();
@@ -240,6 +245,7 @@ export default function PromptNode({
           nodeId: aiNodeId,
           prompt: promptToUse,
           referenceStorageId,
+          referenceImageUrl,
           model: DEFAULT_MODEL_ID,
           aspectRatio,
         }),