feat: implement Convex-synced canvas foundation

components/canvas/nodes/compare-node.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
+
+import BaseNodeWrapper from "./base-node-wrapper";
+
+export type CompareNodeData = {
+  leftUrl?: string;
+  rightUrl?: string;
+};
+
+export type CompareNode = Node<CompareNodeData, "compare">;
+
+export default function CompareNode({ data, selected }: NodeProps<CompareNode>) {
+  return (
+    <BaseNodeWrapper selected={selected} className="w-[500px] p-2">
+      <div className="mb-1 text-xs font-medium text-muted-foreground">Vergleich</div>
+      <div className="flex h-40 gap-2">
+        <div className="flex flex-1 items-center justify-center rounded bg-muted text-xs text-muted-foreground">
+          {data.leftUrl ? (
+            <img src={data.leftUrl} alt="Bild A" className="h-full w-full rounded object-cover" />
+          ) : (
+            "Bild A"
+          )}
+        </div>
+        <div className="flex flex-1 items-center justify-center rounded bg-muted text-xs text-muted-foreground">
+          {data.rightUrl ? (
+            <img src={data.rightUrl} alt="Bild B" className="h-full w-full rounded object-cover" />
+          ) : (
+            "Bild B"
+          )}
+        </div>
+      </div>
+      <Handle
+        type="target"
+        position={Position.Left}
+        id="left"
+        className="!h-3 !w-3 !border-2 !border-background !bg-primary"
+        style={{ top: "40%" }}
+      />
+      <Handle
+        type="target"
+        position={Position.Left}
+        id="right"
+        className="!h-3 !w-3 !border-2 !border-background !bg-primary"
+        style={{ top: "60%" }}
+      />
+    </BaseNodeWrapper>
+  );
+}