1 files changed, 36 insertions, 41 deletions

diff --git a/apps/web/src/components/editor/selection-box.tsx b/apps/web/src/components/editor/selection-box.tsx
index ca9d799f..32adbfd8 100644
--- a/apps/web/src/components/editor/selection-box.tsx
+++ b/apps/web/src/components/editor/selection-box.tsx
@@ -1,55 +1,50 @@
 "use client";
 
-import { useEffect, useRef } from "react";
+import { useMemo } from "react";
 
 interface SelectionBoxProps {
-  startPos: { x: number; y: number } | null;
-  currentPos: { x: number; y: number } | null;
-  containerRef: React.RefObject<HTMLElement>;
-  isActive: boolean;
+	startPos: { x: number; y: number } | null;
+	currentPos: { x: number; y: number } | null;
+	containerRef: React.RefObject<HTMLElement>;
+	isActive: boolean;
 }
 
 export function SelectionBox({
-  startPos,
-  currentPos,
-  containerRef,
-  isActive,
+	startPos,
+	currentPos,
+	containerRef,
+	isActive,
 }: SelectionBoxProps) {
-  const selectionBoxRef = useRef<HTMLDivElement>(null);
+	const selectionBoxStyle = useMemo(() => {
+		if (!isActive || !startPos || !currentPos || !containerRef.current) {
+			return null;
+		}
 
-  useEffect(() => {
-    if (!isActive || !startPos || !currentPos || !containerRef.current) return;
+		const containerRect = containerRef.current.getBoundingClientRect();
+		const startX = startPos.x - containerRect.left;
+		const startY = startPos.y - containerRect.top;
+		const currentX = currentPos.x - containerRect.left;
+		const currentY = currentPos.y - containerRect.top;
 
-    const container = containerRef.current;
-    const containerRect = container.getBoundingClientRect();
+		const left = Math.min(startX, currentX);
+		const top = Math.min(startY, currentY);
+		const width = Math.abs(currentX - startX);
+		const height = Math.abs(currentY - startY);
 
-    // Calculate relative positions within the container
-    const startX = startPos.x - containerRect.left;
-    const startY = startPos.y - containerRect.top;
-    const currentX = currentPos.x - containerRect.left;
-    const currentY = currentPos.y - containerRect.top;
+		return {
+			left: `${left}px`,
+			top: `${top}px`,
+			width: `${width}px`,
+			height: `${height}px`,
+		};
+	}, [containerRef, currentPos, isActive, startPos]);
 
-    // Calculate the selection rectangle bounds
-    const left = Math.min(startX, currentX);
-    const top = Math.min(startY, currentY);
-    const width = Math.abs(currentX - startX);
-    const height = Math.abs(currentY - startY);
+	if (!selectionBoxStyle) return null;
 
-    // Update the selection box position and size
-    if (selectionBoxRef.current) {
-      selectionBoxRef.current.style.left = `${left}px`;
-      selectionBoxRef.current.style.top = `${top}px`;
-      selectionBoxRef.current.style.width = `${width}px`;
-      selectionBoxRef.current.style.height = `${height}px`;
-    }
-  }, [startPos, currentPos, isActive, containerRef]);
-
-  if (!isActive || !startPos || !currentPos) return null;
-
-  return (
-    <div
-      ref={selectionBoxRef}
-      className="absolute pointer-events-none z-50 bg-foreground/10"
-    />
-  );
+	return (
+		<div
+			style={selectionBoxStyle}
+			className="border-foreground/50 bg-foreground/5 pointer-events-none absolute z-50 border"
+		/>
+	);
 }