chore: minor improvements to Draggable grab cursor and use abortcontroller

src/components/Flippable.tsx

@@ -53,7 +53,6 @@ export const Flippable: React.FC<FlippableProps> = ({
 					width: 100%;
 					height: 100%;
 					transform-style: preserve-3d;
-					cursor: pointer;
 					transition: rotate 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 					rotate: ${isFlipped ? "y 180deg" : "y 0deg"};
 

src/draggable.attempts/6/Draggable.ts

@@ -88,6 +88,7 @@ export function makeDraggable(card: HTMLElement, opts: DraggableOpts = {}) {
 		state.dragging = true;
 		activePointerId = e.pointerId;
 		card.style.cursor = "grabbing";
+		document.body.style.cursor = "grabbing";
 		velocity = { x: 0, y: 0 };
 
 		const dx = e.pageX - center.x;
@@ -153,6 +154,7 @@ export function makeDraggable(card: HTMLElement, opts: DraggableOpts = {}) {
 	const cancel = () => {
 		state.dragging = false;
 		activePointerId = null;
+		document.body.style.cursor = "";
 		card.style.cursor = "grab";
 		document.body.style.userSelect = "auto";
 		document.body.style.webkitUserSelect = "auto";
@@ -246,27 +248,25 @@ export function makeDraggable(card: HTMLElement, opts: DraggableOpts = {}) {
 	card.style.touchAction = "none";
 
 	card.style.transform = `translate(0px, 0px) rotate(${rotation}rad)`;
+	card.style.willChange = "transform";
 
-	card.addEventListener("pointerdown", down, { passive: true });
+	const abort = new AbortController();
-	window.addEventListener("pointermove", move, { passive: true });
+	const evtOpts = { passive: true, signal: abort.signal };
-	window.addEventListener("pointerup", up, { passive: true });
+
-	window.addEventListener("pointercancel", up, { passive: true });
+	card.addEventListener("pointerdown", down, evtOpts);
-	window.addEventListener("blur", up, { passive: true });
+	window.addEventListener("pointermove", move, evtOpts);
-	window.addEventListener("keydown", up, { passive: true });
+	window.addEventListener("pointerup", up, evtOpts);
+	window.addEventListener("pointercancel", up, evtOpts);
+	window.addEventListener("blur", up, evtOpts);
+	window.addEventListener("keydown", up, evtOpts);
 	window.addEventListener("resize", handleResize);
 
 	render();
 
 	return function cleanup() {
+		abort.abort();
 		if (animationFrameId !== null) cancelAnimationFrame(animationFrameId);
-		card.removeEventListener("pointerdown", down);
+		document.body.style.cursor = "";
-		window.removeEventListener("pointermove", move);
-		window.removeEventListener("pointerup", up);
-		window.removeEventListener("pointercancel", up);
-		window.removeEventListener("blur", up);
-		window.removeEventListener("keydown", up);
-		window.removeEventListener("resize", handleResize);
-		card.style.cursor = "";
 		card.style.touchAction = "";
 		card.style.userSelect = "";
 	};