add konva js to project + create some components with ai

src/pages/editor/components/tools/RectangleShape.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useRef } from "react";
+import { Rect } from "react-konva";
+import Konva from "konva";
+import type { ShapeProps } from "./types";
+
+const RectangleShape = ({ obj, isSelected, transformerRef, onSelect, onUpdate, draggable }: ShapeProps) => {
+  const shapeRef = useRef<Konva.Rect>(null);
+
+  useEffect(() => {
+    if (isSelected && shapeRef.current && transformerRef.current) {
+      transformerRef.current.nodes([shapeRef.current]);
+      transformerRef.current.getLayer()?.batchDraw();
+    }
+  }, [isSelected, transformerRef]);
+
+  return (
+    <Rect
+      ref={shapeRef}
+      x={obj.x}
+      y={obj.y}
+      width={obj.width || 100}
+      height={obj.height || 100}
+      fill={obj.fill}
+      stroke={isSelected ? "#3b82f6" : obj.stroke}
+      strokeWidth={isSelected ? 3 : obj.strokeWidth || 2}
+      rotation={obj.rotation || 0}
+      draggable={draggable}
+      onClick={() => {
+        if (shapeRef.current) {
+          onSelect(obj.id, shapeRef.current);
+        }
+      }}
+      onDragEnd={(e) => {
+        const node = e.target;
+        onUpdate(obj.id, {
+          x: node.x(),
+          y: node.y(),
+        });
+      }}
+      onTransformEnd={() => {
+        const node = shapeRef.current;
+        if (!node) return;
+
+        const scaleX = node.scaleX();
+        const scaleY = node.scaleY();
+
+        node.scaleX(1);
+        node.scaleY(1);
+
+        onUpdate(obj.id, {
+          x: node.x(),
+          y: node.y(),
+          rotation: node.rotation(),
+          width: Math.max(5, (obj.width || 100) * scaleX),
+          height: Math.max(5, (obj.height || 100) * scaleY),
+        });
+      }}
+    />
+  );
+};
+
+export default RectangleShape;
+