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.
2026-03-25 21:33:22 +01:00
parent fffdae3a9c
commit da6529f263
19 changed files with 1801 additions and 122 deletions
--- a/components/canvas/canvas-toolbar.tsx
+++ b/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>
  );
 }
--- a/components/canvas/canvas.tsx
+++ b/components/canvas/canvas.tsx
@@ -32,6 +32,54 @@ interface CanvasInnerProps {
  canvasId: Id<"canvases">;
 }

+function withResolvedCompareData(nodes: RFNode[], edges: RFEdge[]): RFNode[] {
+  return nodes.map((node) => {
+    if (node.type !== "compare") return node;
+
+    const incoming = edges.filter((edge) => edge.target === node.id);
+    let leftUrl: string | undefined;
+    let rightUrl: string | undefined;
+    let leftLabel: string | undefined;
+    let rightLabel: string | undefined;
+
+    for (const edge of incoming) {
+      const source = nodes.find((candidate) => candidate.id === edge.source);
+      if (!source) continue;
+
+      const srcData = source.data as { url?: string; label?: string };
+
+      if (edge.targetHandle === "left") {
+        leftUrl = srcData.url;
+        leftLabel = srcData.label ?? source.type ?? "Before";
+      } else if (edge.targetHandle === "right") {
+        rightUrl = srcData.url;
+        rightLabel = srcData.label ?? source.type ?? "After";
+      }
+    }
+
+    const current = node.data as {
+      leftUrl?: string;
+      rightUrl?: string;
+      leftLabel?: string;
+      rightLabel?: string;
+    };
+
+    if (
+      current.leftUrl === leftUrl &&
+      current.rightUrl === rightUrl &&
+      current.leftLabel === leftLabel &&
+      current.rightLabel === rightLabel
+    ) {
+      return node;
+    }
+
+    return {
+      ...node,
+      data: { ...node.data, leftUrl, rightUrl, leftLabel, rightLabel },
+    };
+  });
+}
+
 function CanvasInner({ canvasId }: CanvasInnerProps) {
  const { screenToFlowPosition } = useReactFlow();
  const { resolvedTheme } = useTheme();
@@ -54,9 +102,14 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
    api.edges.list,
    shouldSkipCanvasQueries ? "skip" : { canvasId },
  );
+  const canvas = useQuery(
+    api.canvases.get,
+    shouldSkipCanvasQueries ? "skip" : { canvasId },
+  );

  // ─── Convex Mutations (exakte Signaturen aus nodes.ts / edges.ts) ──
  const moveNode = useMutation(api.nodes.move);
+  const resizeNode = useMutation(api.nodes.resize);
  const batchMoveNodes = useMutation(api.nodes.batchMove);
  const createNode = useMutation(api.nodes.create);
  const removeNode = useMutation(api.nodes.remove);
@@ -74,8 +127,8 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
  useEffect(() => {
    if (!convexNodes || isDragging.current) return;
    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setNodes(convexNodes.map(convexNodeToRF));
-  }, [convexNodes]);
+    setNodes(withResolvedCompareData(convexNodes.map(convexNodeToRF), edges));
+  }, [convexNodes, edges]);

  useEffect(() => {
    if (!convexEdges) return;
@@ -83,10 +136,36 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
    setEdges(convexEdges.map(convexEdgeToRF));
  }, [convexEdges]);

+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setNodes((nds) => withResolvedCompareData(nds, edges));
+  }, [edges]);
+
  // ─── Node Changes (Drag, Select, Remove) ─────────────────────
-  const onNodesChange = useCallback((changes: NodeChange[]) => {
-    setNodes((nds) => applyNodeChanges(changes, nds));
-  }, []);
+  const onNodesChange = useCallback(
+    (changes: NodeChange[]) => {
+      setNodes((nds) => {
+        const nextNodes = applyNodeChanges(changes, nds);
+
+        for (const change of changes) {
+          if (change.type !== "dimensions") continue;
+          if (change.resizing !== false || !change.dimensions) continue;
+
+          const resizedNode = nextNodes.find((node) => node.id === change.id);
+          if (resizedNode?.type !== "frame") continue;
+
+          void resizeNode({
+            nodeId: change.id as Id<"nodes">,
+            width: change.dimensions.width,
+            height: change.dimensions.height,
+          });
+        }
+
+        return nextNodes;
+      });
+    },
+    [resizeNode],
+  );

  const onEdgesChange = useCallback((changes: EdgeChange[]) => {
    setEdges((eds) => applyEdgeChanges(changes, eds));
@@ -212,7 +291,7 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {

  return (
    <div className="relative h-full w-full">
-      <CanvasToolbar canvasId={canvasId} />
+      <CanvasToolbar canvasId={canvasId} canvasName={canvas?.name ?? "canvas"} />
      <ReactFlow
        nodes={nodes}
        edges={edges}
--- a/components/canvas/export-button.tsx
+++ b/components/canvas/export-button.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { useReactFlow } from "@xyflow/react";
+import { useAction } from "convex/react";
+import JSZip from "jszip";
+import { Archive, Loader2 } from "lucide-react";
+import { api } from "@/convex/_generated/api";
+import type { Id } from "@/convex/_generated/dataModel";
+
+interface ExportButtonProps {
+  canvasName?: string;
+}
+
+export function ExportButton({ canvasName = "canvas" }: ExportButtonProps) {
+  const { getNodes } = useReactFlow();
+  const exportFrame = useAction(api.export.exportFrame);
+  const [isExporting, setIsExporting] = useState(false);
+  const [progress, setProgress] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleZipExport = useCallback(async () => {
+    if (isExporting) return;
+    setIsExporting(true);
+    setError(null);
+
+    try {
+      const nodes = getNodes();
+      const frameNodes = nodes.filter((node) => node.type === "frame");
+
+      if (frameNodes.length === 0) {
+        throw new Error("No frames on canvas - add a Frame node first");
+      }
+
+      const zip = new JSZip();
+
+      for (let i = 0; i < frameNodes.length; i += 1) {
+        const frame = frameNodes[i];
+        const frameLabel =
+          (frame.data as { label?: string }).label?.trim() || `frame-${i + 1}`;
+
+        setProgress(`Exporting ${frameLabel} (${i + 1}/${frameNodes.length})...`);
+
+        const result = await exportFrame({
+          frameNodeId: frame.id as Id<"nodes">,
+        });
+
+        const response = await fetch(result.url);
+        if (!response.ok) {
+          throw new Error(`Failed to fetch export for ${frameLabel}`);
+        }
+
+        const blob = await response.blob();
+        zip.file(`${frameLabel}.png`, blob);
+      }
+
+      setProgress("Packing ZIP...");
+      const zipBlob = await zip.generateAsync({ type: "blob" });
+      const url = URL.createObjectURL(zipBlob);
+
+      const anchor = document.createElement("a");
+      anchor.href = url;
+      anchor.download = `${canvasName}-export.zip`;
+      anchor.click();
+
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Export failed");
+    } finally {
+      setIsExporting(false);
+      setProgress(null);
+    }
+  }, [canvasName, exportFrame, getNodes, isExporting]);
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => void handleZipExport()}
+        disabled={isExporting}
+        title="Export all frames as ZIP"
+        className="flex items-center gap-2 rounded-md border border-border bg-background px-3 py-2 text-sm font-medium transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
+        type="button"
+      >
+        {isExporting ? (
+          <Loader2 className="h-4 w-4 animate-spin" />
+        ) : (
+          <Archive className="h-4 w-4" />
+        )}
+        {progress ?? "Export ZIP"}
+      </button>
+
+      {error && (
+        <p className="absolute left-0 top-full mt-1 whitespace-nowrap text-xs text-destructive">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
--- a/components/canvas/nodes/ai-image-node.tsx
+++ b/components/canvas/nodes/ai-image-node.tsx
@@ -7,6 +7,7 @@ import { api } from "@/convex/_generated/api";
 import type { Id } from "@/convex/_generated/dataModel";
 import BaseNodeWrapper from "./base-node-wrapper";
 import { DEFAULT_MODEL_ID, getModel } from "@/lib/ai-models";
+import { DEFAULT_ASPECT_RATIO } from "@/lib/image-formats";
 import { cn, formatEurFromCents } from "@/lib/utils";
 import {
  Loader2,
@@ -25,6 +26,10 @@ type AiImageNodeData = {
  /** Gebuchte Credits in Euro-Cent (PRD: nach Commit) */
  creditCost?: number;
  canvasId?: string;
+  /** OpenRouter image_config.aspect_ratio */
+  aspectRatio?: string;
+  outputWidth?: number;
+  outputHeight?: number;
  _status?: string;
  _statusMessage?: string;
 };
@@ -93,6 +98,7 @@ export default function AiImageNode({
        prompt,
        referenceStorageId,
        model: nodeData.model ?? DEFAULT_MODEL_ID,
+        aspectRatio: nodeData.aspectRatio ?? DEFAULT_ASPECT_RATIO,
      });
    } catch (err) {
      setLocalError(err instanceof Error ? err.message : "Generation failed");
@@ -105,7 +111,10 @@ export default function AiImageNode({
    getModel(nodeData.model ?? DEFAULT_MODEL_ID)?.name ?? "AI";

  return (
-    <BaseNodeWrapper selected={selected} className="w-[320px] overflow-hidden">
+    <BaseNodeWrapper
+      selected={selected}
+      className="flex h-full w-full min-h-0 min-w-0 flex-col overflow-hidden"
+    >
      <Handle
        type="target"
        position={Position.Left}
@@ -113,13 +122,13 @@ export default function AiImageNode({
        className="!h-3 !w-3 !bg-violet-500 !border-2 !border-background"
      />

-      <div className="border-b border-border px-3 py-2">
+      <div className="shrink-0 border-b border-border px-3 py-2">
        <div className="text-xs font-medium text-emerald-600 dark:text-emerald-400">
          🖼️ AI Image
        </div>
      </div>

-      <div className="group relative h-[320px] overflow-hidden bg-muted">
+      <div className="group relative min-h-0 flex-1 overflow-hidden bg-muted">
        {status === "idle" && !nodeData.url && (
          <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 text-muted-foreground">
            <ImageIcon className="h-10 w-10 opacity-30" />
@@ -209,12 +218,12 @@ export default function AiImageNode({
      </div>

      {nodeData.prompt && (
-        <div className="border-t border-border px-3 py-2">
+        <div className="shrink-0 border-t border-border px-3 py-2">
          <p className="line-clamp-2 text-[10px] text-muted-foreground">
            {nodeData.prompt}
          </p>
          <p className="mt-0.5 text-[10px] text-muted-foreground/60">
-            {modelName}
+            {modelName} · {nodeData.aspectRatio ?? DEFAULT_ASPECT_RATIO}
          </p>
        </div>
      )}
--- a/components/canvas/nodes/compare-node.tsx
+++ b/components/canvas/nodes/compare-node.tsx
@@ -1,74 +1,168 @@
 "use client";

-import { Handle, Position, type NodeProps, type Node } from "@xyflow/react";
-import Image from "next/image";
+import { useCallback, useRef, useState } from "react";
+import { Handle, Position, type NodeProps } from "@xyflow/react";
+import { ImageIcon } from "lucide-react";
 import BaseNodeWrapper from "./base-node-wrapper";

-type CompareNodeData = {
+interface CompareNodeData {
  leftUrl?: string;
  rightUrl?: string;
-  _status?: string;
-};
+  leftLabel?: string;
+  rightLabel?: string;
+}

-export type CompareNode = Node<CompareNodeData, "compare">;
+export default function CompareNode({ data, selected }: NodeProps) {
+  const nodeData = data as CompareNodeData;
+  const [sliderX, setSliderX] = useState(50);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const hasLeft = !!nodeData.leftUrl;
+  const hasRight = !!nodeData.rightUrl;
+
+  const handleMouseDown = useCallback((event: React.MouseEvent) => {
+    event.stopPropagation();
+
+    const move = (moveEvent: MouseEvent) => {
+      if (!containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const x = Math.max(
+        0,
+        Math.min(1, (moveEvent.clientX - rect.left) / rect.width),
+      );
+      setSliderX(x * 100);
+    };
+
+    const up = () => {
+      window.removeEventListener("mousemove", move);
+      window.removeEventListener("mouseup", up);
+    };
+
+    window.addEventListener("mousemove", move);
+    window.addEventListener("mouseup", up);
+  }, []);
+
+  const handleTouchStart = useCallback((event: React.TouchEvent) => {
+    event.stopPropagation();
+
+    const move = (moveEvent: TouchEvent) => {
+      if (!containerRef.current || moveEvent.touches.length === 0) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const touch = moveEvent.touches[0];
+      const x = Math.max(0, Math.min(1, (touch.clientX - rect.left) / rect.width));
+      setSliderX(x * 100);
+    };
+
+    const end = () => {
+      window.removeEventListener("touchmove", move);
+      window.removeEventListener("touchend", end);
+    };
+
+    window.addEventListener("touchmove", move);
+    window.addEventListener("touchend", end);
+  }, []);

-export default function CompareNode({
-  data,
-  selected,
-}: NodeProps<CompareNode>) {
  return (
-    <BaseNodeWrapper selected={selected} className="w-[500px] p-2">
-      <div className="text-xs font-medium text-muted-foreground mb-1">
-        🔀 Vergleich
-      </div>
-      <div className="flex h-40 gap-2">
-        <div className="relative flex min-h-0 flex-1 overflow-hidden rounded bg-muted">
-          {data.leftUrl ? (
-            <Image
-              src={data.leftUrl}
-              alt="Vergleich Bild A"
-              fill
-              className="object-cover"
-              sizes="250px"
-              draggable={false}
-            />
-          ) : (
-            <div className="flex h-full w-full items-center justify-center text-xs text-muted-foreground">
-              Bild A
-            </div>
-          )}
-        </div>
-        <div className="relative flex min-h-0 flex-1 overflow-hidden rounded bg-muted">
-          {data.rightUrl ? (
-            <Image
-              src={data.rightUrl}
-              alt="Vergleich Bild B"
-              fill
-              className="object-cover"
-              sizes="250px"
-              draggable={false}
-            />
-          ) : (
-            <div className="flex h-full w-full items-center justify-center text-xs text-muted-foreground">
-              Bild B
-            </div>
-          )}
-        </div>
-      </div>
+    <BaseNodeWrapper selected={selected} className="w-[500px] p-0">
+      <div className="px-3 py-2 text-xs font-medium text-muted-foreground">⚖️ Compare</div>
+
      <Handle
        type="target"
        position={Position.Left}
        id="left"
-        className="h-3! w-3! bg-primary! border-2! border-background!"
        style={{ top: "40%" }}
+        className="!h-3 !w-3 !border-2 !border-background !bg-blue-500"
      />
      <Handle
        type="target"
-        position={Position.Left}
+        position={Position.Right}
        id="right"
-        className="h-3! w-3! bg-primary! border-2! border-background!"
-        style={{ top: "60%" }}
+        style={{ top: "40%" }}
+        className="!h-3 !w-3 !border-2 !border-background !bg-emerald-500"
      />
+
+      <div
+        ref={containerRef}
+        className="nodrag relative h-[320px] w-[500px] select-none overflow-hidden rounded-b-xl bg-muted"
+        onMouseDown={handleMouseDown}
+        onTouchStart={handleTouchStart}
+      >
+        {!hasLeft && !hasRight && (
+          <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-3 text-muted-foreground">
+            <ImageIcon className="h-10 w-10 opacity-30" />
+            <p className="px-8 text-center text-xs opacity-60">
+              Connect two image nodes - left handle (blue) and right handle (green)
+            </p>
+          </div>
+        )}
+
+        {hasRight && (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={nodeData.rightUrl}
+            alt={nodeData.rightLabel ?? "Right"}
+            className="pointer-events-none absolute inset-0 h-full w-full object-contain"
+            draggable={false}
+          />
+        )}
+
+        {hasLeft && (
+          <div
+            className="pointer-events-none absolute inset-0 overflow-hidden"
+            style={{ width: `${sliderX}%` }}
+          >
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={nodeData.leftUrl}
+              alt={nodeData.leftLabel ?? "Left"}
+              className="absolute inset-0 h-full w-full object-contain"
+              style={{ width: "500px", maxWidth: "none" }}
+              draggable={false}
+            />
+          </div>
+        )}
+
+        {hasLeft && hasRight && (
+          <>
+            <div
+              className="pointer-events-none absolute bottom-0 top-0 z-10 w-0.5 bg-white shadow-md"
+              style={{ left: `${sliderX}%` }}
+            />
+            <div
+              className="pointer-events-none absolute top-1/2 z-20 -translate-x-1/2 -translate-y-1/2"
+              style={{ left: `${sliderX}%` }}
+            >
+              <div className="flex h-8 w-8 items-center justify-center rounded-full border border-border bg-white shadow-lg">
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                  <path
+                    d="M5 8H1M11 8H15M5 5L2 8L5 11M11 5L14 8L11 11"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </div>
+            </div>
+          </>
+        )}
+
+        {hasLeft && (
+          <div className="pointer-events-none absolute left-2 top-2 z-10">
+            <span className="rounded bg-blue-500/80 px-1.5 py-0.5 text-[10px] font-medium text-white backdrop-blur-sm">
+              {nodeData.leftLabel ?? "Before"}
+            </span>
+          </div>
+        )}
+
+        {hasRight && (
+          <div className="pointer-events-none absolute right-2 top-2 z-10">
+            <span className="rounded bg-emerald-500/80 px-1.5 py-0.5 text-[10px] font-medium text-white backdrop-blur-sm">
+              {nodeData.rightLabel ?? "After"}
+            </span>
+          </div>
+        )}
+      </div>
    </BaseNodeWrapper>
  );
 }
--- a/components/canvas/nodes/frame-node.tsx
+++ b/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>
  );
 }
--- a/components/canvas/nodes/prompt-node.tsx
+++ b/components/canvas/nodes/prompt-node.tsx
@@ -8,10 +8,28 @@ import type { Id } from "@/convex/_generated/dataModel";
 import BaseNodeWrapper from "./base-node-wrapper";
 import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
 import { DEFAULT_MODEL_ID } from "@/lib/ai-models";
+import {
+  DEFAULT_ASPECT_RATIO,
+  getAiImageNodeOuterSize,
+  getImageViewportSize,
+  IMAGE_FORMAT_GROUP_LABELS,
+  IMAGE_FORMAT_PRESETS,
+} from "@/lib/image-formats";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Sparkles, Loader2 } from "lucide-react";

 type PromptNodeData = {
  prompt?: string;
+  aspectRatio?: string;
  model?: string;
  canvasId?: string;
  _status?: string;
@@ -29,13 +47,25 @@ export default function PromptNode({
  const { getEdges, getNode } = useReactFlow();

  const [prompt, setPrompt] = useState(nodeData.prompt ?? "");
+  const [aspectRatio, setAspectRatio] = useState(
+    nodeData.aspectRatio ?? DEFAULT_ASPECT_RATIO
+  );
  const [isGenerating, setIsGenerating] = useState(false);
  const [error, setError] = useState<string | null>(null);

+  const promptRef = useRef(prompt);
+  const aspectRatioRef = useRef(aspectRatio);
+  promptRef.current = prompt;
+  aspectRatioRef.current = aspectRatio;
+
  useEffect(() => {
    setPrompt(nodeData.prompt ?? "");
  }, [nodeData.prompt]);

+  useEffect(() => {
+    setAspectRatio(nodeData.aspectRatio ?? DEFAULT_ASPECT_RATIO);
+  }, [nodeData.aspectRatio]);
+
  const dataRef = useRef(data);
  dataRef.current = data;

@@ -44,14 +74,18 @@ export default function PromptNode({
  const createEdge = useMutation(api.edges.create);
  const generateImage = useAction(api.ai.generateImage);

-  const debouncedSave = useDebouncedCallback((value: string) => {
+  const debouncedSave = useDebouncedCallback(() => {
    const raw = dataRef.current as Record<string, unknown>;
    const { _status, _statusMessage, ...rest } = raw;
    void _status;
    void _statusMessage;
    updateData({
      nodeId: id as Id<"nodes">,
-      data: { ...rest, prompt: value },
+      data: {
+        ...rest,
+        prompt: promptRef.current,
+        aspectRatio: aspectRatioRef.current,
+      },
    });
  }, 500);

@@ -59,7 +93,15 @@ export default function PromptNode({
    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
      const value = e.target.value;
      setPrompt(value);
-      debouncedSave(value);
+      debouncedSave();
+    },
+    [debouncedSave]
+  );
+
+  const handleAspectRatioChange = useCallback(
+    (value: string) => {
+      setAspectRatio(value);
+      debouncedSave();
    },
    [debouncedSave]
  );
@@ -93,18 +135,24 @@ export default function PromptNode({
      const posX = (currentNode?.position?.x ?? 0) + offsetX;
      const posY = currentNode?.position?.y ?? 0;

+      const viewport = getImageViewportSize(aspectRatio);
+      const outer = getAiImageNodeOuterSize(viewport);
+
      const aiNodeId = await createNode({
        canvasId,
        type: "ai-image",
        positionX: posX,
        positionY: posY,
-        width: 320,
-        height: 320,
+        width: outer.width,
+        height: outer.height,
        data: {
          prompt,
          model: DEFAULT_MODEL_ID,
          modelTier: "standard",
          canvasId,
+          aspectRatio,
+          outputWidth: viewport.width,
+          outputHeight: viewport.height,
        },
      });

@@ -122,6 +170,7 @@ export default function PromptNode({
        prompt,
        referenceStorageId,
        model: DEFAULT_MODEL_ID,
+        aspectRatio,
      });
    } catch (err) {
      setError(err instanceof Error ? err.message : "Generation failed");
@@ -130,6 +179,7 @@ export default function PromptNode({
    }
  }, [
    prompt,
+    aspectRatio,
    isGenerating,
    nodeData.canvasId,
    id,
@@ -166,6 +216,45 @@ export default function PromptNode({
          className="nodrag nowheel w-full resize-none rounded-md border border-border bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-violet-500"
        />

+        <div className="flex flex-col gap-1.5">
+          <Label
+            htmlFor={`prompt-format-${id}`}
+            className="text-[11px] font-medium text-muted-foreground"
+          >
+            Format
+          </Label>
+          <Select
+            value={aspectRatio}
+            onValueChange={handleAspectRatioChange}
+          >
+            <SelectTrigger
+              id={`prompt-format-${id}`}
+              className="nodrag nowheel w-full"
+              size="sm"
+            >
+              <SelectValue placeholder="Seitenverhältnis" />
+            </SelectTrigger>
+            <SelectContent className="nodrag">
+              {(["square", "landscape", "portrait"] as const).map((group) => {
+                const presets = IMAGE_FORMAT_PRESETS.filter(
+                  (p) => p.group === group
+                );
+                if (presets.length === 0) return null;
+                return (
+                  <SelectGroup key={group}>
+                    <SelectLabel>{IMAGE_FORMAT_GROUP_LABELS[group]}</SelectLabel>
+                    {presets.map((p) => (
+                      <SelectItem key={p.aspectRatio} value={p.aspectRatio}>
+                        {p.label}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                );
+              })}
+            </SelectContent>
+          </Select>
+        </div>
+
        {error && (
          <p className="text-xs text-destructive">{error}</p>
        )}
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -0,0 +1,193 @@
+"use client"
+
+import * as React from "react"
+import { Select as SelectPrimitive } from "radix-ui"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "default" | "sm"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-full items-center justify-between gap-1.5 whitespace-nowrap rounded-lg border border-input bg-transparent px-2.5 py-1 text-sm outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-8 data-[size=sm]:h-7 data-placeholder:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 shrink-0 text-muted-foreground opacity-60" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        position={position}
+        align={align}
+        className={cn(
+          "dark relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-y-auto overflow-x-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "max-h-[min(20rem,var(--radix-select-content-available-height))] p-1",
+            position === "popper" &&
+              "w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn(
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default select-none items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-item-indicator-wrap"
+        className="absolute right-2 flex size-4 items-center justify-center"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1 text-muted-foreground",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1 text-muted-foreground",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}