chore: normalize line endings

12 files changed, 983 insertions, 983 deletions

diff --git a/apps/web/src/lib/selection/constants.ts b/apps/web/src/lib/selection/constants.ts
index a1aee842..a262c8ce 100644
--- a/apps/web/src/lib/selection/constants.ts
+++ b/apps/web/src/lib/selection/constants.ts
@@ -1 +1 @@
-export const SELECTABLE_ITEM_ATTRIBUTE = "data-selectable-item";
+export const SELECTABLE_ITEM_ATTRIBUTE = "data-selectable-item";

diff --git a/apps/web/src/lib/selection/context.tsx b/apps/web/src/lib/selection/context.tsx
index ced49c88..8e87aa40 100644
--- a/apps/web/src/lib/selection/context.tsx
+++ b/apps/web/src/lib/selection/context.tsx
@@ -1,52 +1,52 @@
-"use client";
-
-import { createContext, useContext } from "react";
-
-interface SelectionContextValue {
-	selectedIds: string[];
-	anchorId: string | null;
-	highlightedId: string | null;
-	isBoxSelecting: boolean;
-	isSelected: (id: string) => boolean;
-	clearSelection: () => void;
-	handleItemClick: ({
-		event,
-		id,
-	}: {
-		event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>;
-		id: string;
-	}) => void;
-	handleItemMouseDown: ({
-		event,
-		id,
-	}: {
-		event: React.MouseEvent<HTMLDivElement>;
-		id: string;
-	}) => void;
-	registerItem: (id: string, element: HTMLElement | null) => void;
-}
-
-export const SelectionContext = createContext<SelectionContextValue | null>(null);
-
-export function useSelectionContext() {
-	const context = useContext(SelectionContext);
-
-	if (!context) {
-		throw new Error("useSelectionContext must be used within SelectableSurface");
-	}
-
-	return context;
-}
-
-export function useSelection() {
-	const { selectedIds, anchorId, highlightedId, isSelected, clearSelection } =
-		useSelectionContext();
-
-	return {
-		selectedIds,
-		anchorId,
-		highlightedId,
-		isSelected,
-		clearSelection,
-	};
-}
+"use client";

+

+import { createContext, useContext } from "react";

+

+interface SelectionContextValue {

+	selectedIds: string[];

+	anchorId: string | null;

+	highlightedId: string | null;

+	isBoxSelecting: boolean;

+	isSelected: (id: string) => boolean;

+	clearSelection: () => void;

+	handleItemClick: ({

+		event,

+		id,

+	}: {

+		event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>;

+		id: string;

+	}) => void;

+	handleItemMouseDown: ({

+		event,

+		id,

+	}: {

+		event: React.MouseEvent<HTMLDivElement>;

+		id: string;

+	}) => void;

+	registerItem: (id: string, element: HTMLElement | null) => void;

+}

+

+export const SelectionContext = createContext<SelectionContextValue | null>(null);

+

+export function useSelectionContext() {

+	const context = useContext(SelectionContext);

+

+	if (!context) {

+		throw new Error("useSelectionContext must be used within SelectableSurface");

+	}

+

+	return context;

+}

+

+export function useSelection() {

+	const { selectedIds, anchorId, highlightedId, isSelected, clearSelection } =

+		useSelectionContext();

+

+	return {

+		selectedIds,

+		anchorId,

+		highlightedId,

+		isSelected,

+		clearSelection,

+	};

+}

diff --git a/apps/web/src/lib/selection/hit-testing.ts b/apps/web/src/lib/selection/hit-testing.ts
index ba086425..d8186238 100644
--- a/apps/web/src/lib/selection/hit-testing.ts
+++ b/apps/web/src/lib/selection/hit-testing.ts
@@ -1,50 +1,50 @@
-function isIntersecting({
-	selectionRect,
-	itemRect,
-}: {
-	selectionRect: DOMRect;
-	itemRect: DOMRect;
-}) {
-	return !(
-		itemRect.right < selectionRect.left ||
-		itemRect.left > selectionRect.right ||
-		itemRect.bottom < selectionRect.top ||
-		itemRect.top > selectionRect.bottom
-	);
-}
-
-function createSelectionRect({
-	startPos,
-	currentPos,
-}: {
-	startPos: { x: number; y: number };
-	currentPos: { x: number; y: number };
-}) {
-	return new DOMRect(
-		Math.min(startPos.x, currentPos.x),
-		Math.min(startPos.y, currentPos.y),
-		Math.abs(currentPos.x - startPos.x),
-		Math.abs(currentPos.y - startPos.y),
-	);
-}
-
-export function resolveElementIntersections({
-	startPos,
-	currentPos,
-	elements,
-}: {
-	startPos: { x: number; y: number };
-	currentPos: { x: number; y: number };
-	elements: Map<string, HTMLElement>;
-}) {
-	const selectionRect = createSelectionRect({ startPos, currentPos });
-
-	return [...elements.entries()]
-		.filter(([, element]) =>
-			isIntersecting({
-				selectionRect,
-				itemRect: element.getBoundingClientRect(),
-			}),
-		)
-		.map(([id]) => id);
-}
+function isIntersecting({

+	selectionRect,

+	itemRect,

+}: {

+	selectionRect: DOMRect;

+	itemRect: DOMRect;

+}) {

+	return !(

+		itemRect.right < selectionRect.left ||

+		itemRect.left > selectionRect.right ||

+		itemRect.bottom < selectionRect.top ||

+		itemRect.top > selectionRect.bottom

+	);

+}

+

+function createSelectionRect({

+	startPos,

+	currentPos,

+}: {

+	startPos: { x: number; y: number };

+	currentPos: { x: number; y: number };

+}) {

+	return new DOMRect(

+		Math.min(startPos.x, currentPos.x),

+		Math.min(startPos.y, currentPos.y),

+		Math.abs(currentPos.x - startPos.x),

+		Math.abs(currentPos.y - startPos.y),

+	);

+}

+

+export function resolveElementIntersections({

+	startPos,

+	currentPos,

+	elements,

+}: {

+	startPos: { x: number; y: number };

+	currentPos: { x: number; y: number };

+	elements: Map<string, HTMLElement>;

+}) {

+	const selectionRect = createSelectionRect({ startPos, currentPos });

+

+	return [...elements.entries()]

+		.filter(([, element]) =>

+			isIntersecting({

+				selectionRect,

+				itemRect: element.getBoundingClientRect(),

+			}),

+		)

+		.map(([id]) => id);

+}

diff --git a/apps/web/src/lib/selection/hooks/use-box-select.ts b/apps/web/src/lib/selection/hooks/use-box-select.ts
index 5a9a5cd0..ab8464ec 100644
--- a/apps/web/src/lib/selection/hooks/use-box-select.ts
+++ b/apps/web/src/lib/selection/hooks/use-box-select.ts
@@ -1,170 +1,170 @@
-"use client";
-
-import { useCallback, useEffect, useRef, useState } from "react";
-import type {
-	BoxSelectionSnapshot,
-	ResolveIntersections,
-} from "@/lib/selection/types";
-
-interface SelectionBoxState<TId> extends BoxSelectionSnapshot<TId> {
-	startPos: { x: number; y: number };
-	currentPos: { x: number; y: number };
-	isActive: boolean;
-	isAdditive: boolean;
-}
-
-export function useBoxSelect<TId>({
-	containerRef,
-	resolveIntersections,
-	selectedIds,
-	anchorId,
-	onSelectionChange,
-	shouldStartSelection,
-	getIsAdditiveSelection,
-	isEnabled = true,
-}: {
-	containerRef: React.RefObject<HTMLElement | null>;
-	resolveIntersections: ResolveIntersections<TId>;
-	selectedIds: TId[];
-	anchorId: TId | null;
-	onSelectionChange: (state: {
-		intersectedIds: TId[];
-		initialSelectedIds: TId[];
-		initialAnchorId: TId | null;
-		isAdditive: boolean;
-	}) => void;
-	shouldStartSelection?: (event: React.MouseEvent<Element>) => boolean;
-	getIsAdditiveSelection?: (event: React.MouseEvent<Element>) => boolean;
-	isEnabled?: boolean;
-}) {
-	const [selectionBox, setSelectionBox] = useState<SelectionBoxState<TId> | null>(
-		null,
-	);
-	const justFinishedSelectingRef = useRef(false);
-	const shouldStartSelectionCheck = shouldStartSelection ?? (() => true);
-	const getIsAdditiveSelectionCheck =
-		getIsAdditiveSelection ??
-		((event: React.MouseEvent<Element>) => event.ctrlKey || event.metaKey);
-
-	const handleMouseDown = useCallback(
-		(event: React.MouseEvent<Element>) => {
-			const canStartSelection = shouldStartSelectionCheck(event);
-			if (!isEnabled || event.button !== 0 || !canStartSelection) {
-				return;
-			}
-
-			setSelectionBox({
-				startPos: { x: event.clientX, y: event.clientY },
-				currentPos: { x: event.clientX, y: event.clientY },
-				isActive: false,
-				isAdditive: getIsAdditiveSelectionCheck(event),
-				initialSelectedIds: selectedIds,
-				initialAnchorId: anchorId,
-			});
-		},
-		[
-			anchorId,
-			getIsAdditiveSelectionCheck,
-			isEnabled,
-			selectedIds,
-			shouldStartSelectionCheck,
-		],
-	);
-
-	const updateSelection = useCallback(
-		({
-			startPos,
-			currentPos,
-			isAdditive,
-			initialSelectedIds,
-			initialAnchorId,
-		}: SelectionBoxState<TId>) => {
-			const intersectedIds = resolveIntersections({
-				startPos,
-				currentPos,
-			});
-			onSelectionChange({
-				intersectedIds,
-				initialSelectedIds,
-				initialAnchorId,
-				isAdditive,
-			});
-		},
-		[onSelectionChange, resolveIntersections],
-	);
-
-	useEffect(() => {
-		if (!selectionBox) {
-			return;
-		}
-
-		const handleMouseMove = ({ clientX, clientY }: MouseEvent) => {
-			const deltaX = Math.abs(clientX - selectionBox.startPos.x);
-			const deltaY = Math.abs(clientY - selectionBox.startPos.y);
-			const nextSelectionBox = {
-				...selectionBox,
-				currentPos: { x: clientX, y: clientY },
-				isActive: deltaX > 5 || deltaY > 5 || selectionBox.isActive,
-			};
-
-			setSelectionBox(nextSelectionBox);
-
-			if (!nextSelectionBox.isActive) {
-				return;
-			}
-
-			updateSelection(nextSelectionBox);
-		};
-
-		const handleMouseUp = () => {
-			if (selectionBox.isActive) {
-				justFinishedSelectingRef.current = true;
-				requestAnimationFrame(() => {
-					justFinishedSelectingRef.current = false;
-				});
-			}
-
-			setSelectionBox(null);
-		};
-
-		window.addEventListener("mousemove", handleMouseMove);
-		window.addEventListener("mouseup", handleMouseUp);
-
-		return () => {
-			window.removeEventListener("mousemove", handleMouseMove);
-			window.removeEventListener("mouseup", handleMouseUp);
-		};
-	}, [selectionBox, updateSelection]);
-
-	useEffect(() => {
-		if (!selectionBox) {
-			return;
-		}
-
-		const previousBodyUserSelect = document.body.style.userSelect;
-		const previousContainerUserSelect = containerRef.current?.style.userSelect ?? "";
-
-		document.body.style.userSelect = "none";
-		if (containerRef.current) {
-			containerRef.current.style.userSelect = "none";
-		}
-
-		return () => {
-			document.body.style.userSelect = previousBodyUserSelect;
-			if (containerRef.current) {
-				containerRef.current.style.userSelect = previousContainerUserSelect;
-			}
-		};
-	}, [containerRef, selectionBox]);
-
-	const shouldIgnoreClick = useCallback(() => {
-		return justFinishedSelectingRef.current;
-	}, []);
-
-	return {
-		selectionBox,
-		handleMouseDown,
-		isSelecting: selectionBox?.isActive ?? false,
-		shouldIgnoreClick,
-	};
-}
+"use client";

+

+import { useCallback, useEffect, useRef, useState } from "react";

+import type {

+	BoxSelectionSnapshot,

+	ResolveIntersections,

+} from "@/lib/selection/types";

+

+interface SelectionBoxState<TId> extends BoxSelectionSnapshot<TId> {

+	startPos: { x: number; y: number };

+	currentPos: { x: number; y: number };

+	isActive: boolean;

+	isAdditive: boolean;

+}

+

+export function useBoxSelect<TId>({

+	containerRef,

+	resolveIntersections,

+	selectedIds,

+	anchorId,

+	onSelectionChange,

+	shouldStartSelection,

+	getIsAdditiveSelection,

+	isEnabled = true,

+}: {

+	containerRef: React.RefObject<HTMLElement | null>;

+	resolveIntersections: ResolveIntersections<TId>;

+	selectedIds: TId[];

+	anchorId: TId | null;

+	onSelectionChange: (state: {

+		intersectedIds: TId[];

+		initialSelectedIds: TId[];

+		initialAnchorId: TId | null;

+		isAdditive: boolean;

+	}) => void;

+	shouldStartSelection?: (event: React.MouseEvent<Element>) => boolean;

+	getIsAdditiveSelection?: (event: React.MouseEvent<Element>) => boolean;

+	isEnabled?: boolean;

+}) {

+	const [selectionBox, setSelectionBox] = useState<SelectionBoxState<TId> | null>(

+		null,

+	);

+	const justFinishedSelectingRef = useRef(false);

+	const shouldStartSelectionCheck = shouldStartSelection ?? (() => true);

+	const getIsAdditiveSelectionCheck =

+		getIsAdditiveSelection ??

+		((event: React.MouseEvent<Element>) => event.ctrlKey || event.metaKey);

+

+	const handleMouseDown = useCallback(

+		(event: React.MouseEvent<Element>) => {

+			const canStartSelection = shouldStartSelectionCheck(event);

+			if (!isEnabled || event.button !== 0 || !canStartSelection) {

+				return;

+			}

+

+			setSelectionBox({

+				startPos: { x: event.clientX, y: event.clientY },

+				currentPos: { x: event.clientX, y: event.clientY },

+				isActive: false,

+				isAdditive: getIsAdditiveSelectionCheck(event),

+				initialSelectedIds: selectedIds,

+				initialAnchorId: anchorId,

+			});

+		},

+		[

+			anchorId,

+			getIsAdditiveSelectionCheck,

+			isEnabled,

+			selectedIds,

+			shouldStartSelectionCheck,

+		],

+	);

+

+	const updateSelection = useCallback(

+		({

+			startPos,

+			currentPos,

+			isAdditive,

+			initialSelectedIds,

+			initialAnchorId,

+		}: SelectionBoxState<TId>) => {

+			const intersectedIds = resolveIntersections({

+				startPos,

+				currentPos,

+			});

+			onSelectionChange({

+				intersectedIds,

+				initialSelectedIds,

+				initialAnchorId,

+				isAdditive,

+			});

+		},

+		[onSelectionChange, resolveIntersections],

+	);

+

+	useEffect(() => {

+		if (!selectionBox) {

+			return;

+		}

+

+		const handleMouseMove = ({ clientX, clientY }: MouseEvent) => {

+			const deltaX = Math.abs(clientX - selectionBox.startPos.x);

+			const deltaY = Math.abs(clientY - selectionBox.startPos.y);

+			const nextSelectionBox = {

+				...selectionBox,

+				currentPos: { x: clientX, y: clientY },

+				isActive: deltaX > 5 || deltaY > 5 || selectionBox.isActive,

+			};

+

+			setSelectionBox(nextSelectionBox);

+

+			if (!nextSelectionBox.isActive) {

+				return;

+			}

+

+			updateSelection(nextSelectionBox);

+		};

+

+		const handleMouseUp = () => {

+			if (selectionBox.isActive) {

+				justFinishedSelectingRef.current = true;

+				requestAnimationFrame(() => {

+					justFinishedSelectingRef.current = false;

+				});

+			}

+

+			setSelectionBox(null);

+		};

+

+		window.addEventListener("mousemove", handleMouseMove);

+		window.addEventListener("mouseup", handleMouseUp);

+

+		return () => {

+			window.removeEventListener("mousemove", handleMouseMove);

+			window.removeEventListener("mouseup", handleMouseUp);

+		};

+	}, [selectionBox, updateSelection]);

+

+	useEffect(() => {

+		if (!selectionBox) {

+			return;

+		}

+

+		const previousBodyUserSelect = document.body.style.userSelect;

+		const previousContainerUserSelect = containerRef.current?.style.userSelect ?? "";

+

+		document.body.style.userSelect = "none";

+		if (containerRef.current) {

+			containerRef.current.style.userSelect = "none";

+		}

+

+		return () => {

+			document.body.style.userSelect = previousBodyUserSelect;

+			if (containerRef.current) {

+				containerRef.current.style.userSelect = previousContainerUserSelect;

+			}

+		};

+	}, [containerRef, selectionBox]);

+

+	const shouldIgnoreClick = useCallback(() => {

+		return justFinishedSelectingRef.current;

+	}, []);

+

+	return {

+		selectionBox,

+		handleMouseDown,

+		isSelecting: selectionBox?.isActive ?? false,

+		shouldIgnoreClick,

+	};

+}

diff --git a/apps/web/src/lib/selection/hooks/use-selection-scope.ts b/apps/web/src/lib/selection/hooks/use-selection-scope.ts
index 7ed63815..a7090c5d 100644
--- a/apps/web/src/lib/selection/hooks/use-selection-scope.ts
+++ b/apps/web/src/lib/selection/hooks/use-selection-scope.ts
@@ -1,28 +1,28 @@
-import { useEffect, useRef } from "react";
-import { useSelectionContext } from "@/lib/selection/context";
-import { activateScope, type ScopeEntry } from "@/lib/selection/scope";
-
-export function useSelectionScope() {
-	const { selectedIds, clearSelection } = useSelectionContext();
-	const hasSelectionRef = useRef(selectedIds.length > 0);
-	const clearSelectionRef = useRef(clearSelection);
-	const hasSelection = selectedIds.length > 0;
-
-	hasSelectionRef.current = hasSelection;
-	clearSelectionRef.current = clearSelection;
-
-	const entryRef = useRef<ScopeEntry>({
-		hasSelection: () => hasSelectionRef.current,
-		clear: () => {
-			clearSelectionRef.current();
-		},
-	});
-
-	useEffect(() => {
-		if (!hasSelection) {
-			return;
-		}
-
-		return activateScope({ entry: entryRef.current });
-	}, [hasSelection]);
-}
+import { useEffect, useRef } from "react";

+import { useSelectionContext } from "@/lib/selection/context";

+import { activateScope, type ScopeEntry } from "@/lib/selection/scope";

+

+export function useSelectionScope() {

+	const { selectedIds, clearSelection } = useSelectionContext();

+	const hasSelectionRef = useRef(selectedIds.length > 0);

+	const clearSelectionRef = useRef(clearSelection);

+	const hasSelection = selectedIds.length > 0;

+

+	hasSelectionRef.current = hasSelection;

+	clearSelectionRef.current = clearSelection;

+

+	const entryRef = useRef<ScopeEntry>({

+		hasSelection: () => hasSelectionRef.current,

+		clear: () => {

+			clearSelectionRef.current();

+		},

+	});

+

+	useEffect(() => {

+		if (!hasSelection) {

+			return;

+		}

+

+		return activateScope({ entry: entryRef.current });

+	}, [hasSelection]);

+}

diff --git a/apps/web/src/lib/selection/index.ts b/apps/web/src/lib/selection/index.ts
index b8699ecf..b1ded820 100644
--- a/apps/web/src/lib/selection/index.ts
+++ b/apps/web/src/lib/selection/index.ts
@@ -1,4 +1,4 @@
-export { SelectableItem } from "@/lib/selection/selectable-item";
-export { SelectableSurface } from "@/lib/selection/selectable-surface";
-export { useSelection } from "@/lib/selection/context";
-export { useSelectionScope } from "@/lib/selection/hooks/use-selection-scope";
+export { SelectableItem } from "@/lib/selection/selectable-item";

+export { SelectableSurface } from "@/lib/selection/selectable-surface";

+export { useSelection } from "@/lib/selection/context";

+export { useSelectionScope } from "@/lib/selection/hooks/use-selection-scope";

diff --git a/apps/web/src/lib/selection/scope.ts b/apps/web/src/lib/selection/scope.ts
index 45bf6b56..35e86945 100644
--- a/apps/web/src/lib/selection/scope.ts
+++ b/apps/web/src/lib/selection/scope.ts
@@ -1,29 +1,29 @@
-export type ScopeEntry = {
-	hasSelection: () => boolean;
-	clear: () => void;
-};
-
-let activeScope: ScopeEntry | null = null;
-
-export function activateScope({ entry }: { entry: ScopeEntry }): () => void {
-	if (activeScope && activeScope !== entry) {
-		activeScope.clear();
-	}
-
-	activeScope = entry;
-
-	return () => {
-		if (activeScope === entry) {
-			activeScope = null;
-		}
-	};
-}
-
-export function clearActiveScope(): boolean {
-	if (!activeScope?.hasSelection()) {
-		return false;
-	}
-
-	activeScope.clear();
-	return true;
-}
+export type ScopeEntry = {

+	hasSelection: () => boolean;

+	clear: () => void;

+};

+

+let activeScope: ScopeEntry | null = null;

+

+export function activateScope({ entry }: { entry: ScopeEntry }): () => void {

+	if (activeScope && activeScope !== entry) {

+		activeScope.clear();

+	}

+

+	activeScope = entry;

+

+	return () => {

+		if (activeScope === entry) {

+			activeScope = null;

+		}

+	};

+}

+

+export function clearActiveScope(): boolean {

+	if (!activeScope?.hasSelection()) {

+		return false;

+	}

+

+	activeScope.clear();

+	return true;

+}

diff --git a/apps/web/src/lib/selection/selectable-item.tsx b/apps/web/src/lib/selection/selectable-item.tsx
index 1d7e74a8..52fd679b 100644
--- a/apps/web/src/lib/selection/selectable-item.tsx
+++ b/apps/web/src/lib/selection/selectable-item.tsx
@@ -1,107 +1,107 @@
-"use client";
-
-import { forwardRef, useCallback } from "react";
-import { useSelectionContext } from "@/lib/selection/context";
-import { SELECTABLE_ITEM_ATTRIBUTE } from "@/lib/selection/constants";
-import type { SelectableItemProps } from "@/lib/selection/types";
-import { cn } from "@/utils/ui";
-
-function setForwardedRef<T>(ref: React.ForwardedRef<T>, value: T | null) {
-	if (typeof ref === "function") {
-		ref(value);
-		return;
-	}
-
-	if (ref) {
-		ref.current = value;
-	}
-}
-
-export const SelectableItem = forwardRef<HTMLDivElement, SelectableItemProps>(
-	function SelectableItem(
-		{
-			id,
-			children,
-			className,
-			onClick,
-			onKeyDown,
-			onMouseDown,
-			onContextMenu,
-			tabIndex,
-			...rest
-		}: SelectableItemProps,
-		forwardedRef,
-	) {
-		const {
-			highlightedId,
-			isBoxSelecting,
-			isSelected,
-			handleItemClick,
-			handleItemMouseDown,
-			registerItem,
-		} = useSelectionContext();
-		const isItemSelected = isSelected(id);
-		const isItemHighlighted = highlightedId === id;
-		const stateClassName = cn(
-			"relative",
-			isBoxSelecting && "pointer-events-none",
-			isItemSelected && "ring-1 ring-primary rounded-sm bg-primary/10",
-			isItemHighlighted &&
-				(isItemSelected
-					? "rounded-sm shadow-[0_0_0_1px_hsl(var(--primary))]"
-					: "ring-1 ring-primary/60 rounded-sm bg-primary/5"),
-		);
-
-		const handleRef = useCallback(
-			(element: HTMLDivElement | null) => {
-				registerItem(id, element);
-				setForwardedRef(forwardedRef, element);
-			},
-			[forwardedRef, id, registerItem],
-		);
-
-		return (
-			<div
-				ref={handleRef}
-				className={cn(stateClassName, className)}
-				{...{ [SELECTABLE_ITEM_ATTRIBUTE]: "true" }}
-				role="option"
-				aria-selected={isItemSelected}
-				tabIndex={tabIndex ?? 0}
-				onClick={(event) => {
-					onClick?.(event);
-					if (event.defaultPrevented) {
-						return;
-					}
-
-					handleItemClick({ event, id });
-				}}
-				onMouseDown={(event) => {
-					onMouseDown?.(event);
-					if (event.defaultPrevented) {
-						return;
-					}
-
-					handleItemMouseDown({ event, id });
-				}}
-				onKeyDown={(event) => {
-					onKeyDown?.(event);
-					if (event.defaultPrevented || event.target !== event.currentTarget) {
-						return;
-					}
-
-					if (event.key !== "Enter" && event.key !== " ") {
-						return;
-					}
-
-					event.preventDefault();
-					handleItemClick({ event, id });
-				}}
-				onContextMenu={onContextMenu}
-				{...rest}
-			>
-				{children}
-			</div>
-		);
-	},
-);
+"use client";

+

+import { forwardRef, useCallback } from "react";

+import { useSelectionContext } from "@/lib/selection/context";

+import { SELECTABLE_ITEM_ATTRIBUTE } from "@/lib/selection/constants";

+import type { SelectableItemProps } from "@/lib/selection/types";

+import { cn } from "@/utils/ui";

+

+function setForwardedRef<T>(ref: React.ForwardedRef<T>, value: T | null) {

+	if (typeof ref === "function") {

+		ref(value);

+		return;

+	}

+

+	if (ref) {

+		ref.current = value;

+	}

+}

+

+export const SelectableItem = forwardRef<HTMLDivElement, SelectableItemProps>(

+	function SelectableItem(

+		{

+			id,

+			children,

+			className,

+			onClick,

+			onKeyDown,

+			onMouseDown,

+			onContextMenu,

+			tabIndex,

+			...rest

+		}: SelectableItemProps,

+		forwardedRef,

+	) {

+		const {

+			highlightedId,

+			isBoxSelecting,

+			isSelected,

+			handleItemClick,

+			handleItemMouseDown,

+			registerItem,

+		} = useSelectionContext();

+		const isItemSelected = isSelected(id);

+		const isItemHighlighted = highlightedId === id;

+		const stateClassName = cn(

+			"relative",

+			isBoxSelecting && "pointer-events-none",

+			isItemSelected && "ring-1 ring-primary rounded-sm bg-primary/10",

+			isItemHighlighted &&

+				(isItemSelected

+					? "rounded-sm shadow-[0_0_0_1px_hsl(var(--primary))]"

+					: "ring-1 ring-primary/60 rounded-sm bg-primary/5"),

+		);

+

+		const handleRef = useCallback(

+			(element: HTMLDivElement | null) => {

+				registerItem(id, element);

+				setForwardedRef(forwardedRef, element);

+			},

+			[forwardedRef, id, registerItem],

+		);

+

+		return (

+			<div

+				ref={handleRef}

+				className={cn(stateClassName, className)}

+				{...{ [SELECTABLE_ITEM_ATTRIBUTE]: "true" }}

+				role="option"

+				aria-selected={isItemSelected}

+				tabIndex={tabIndex ?? 0}

+				onClick={(event) => {

+					onClick?.(event);

+					if (event.defaultPrevented) {

+						return;

+					}

+

+					handleItemClick({ event, id });

+				}}

+				onMouseDown={(event) => {

+					onMouseDown?.(event);

+					if (event.defaultPrevented) {

+						return;

+					}

+

+					handleItemMouseDown({ event, id });

+				}}

+				onKeyDown={(event) => {

+					onKeyDown?.(event);

+					if (event.defaultPrevented || event.target !== event.currentTarget) {

+						return;

+					}

+

+					if (event.key !== "Enter" && event.key !== " ") {

+						return;

+					}

+

+					event.preventDefault();

+					handleItemClick({ event, id });

+				}}

+				onContextMenu={onContextMenu}

+				{...rest}

+			>

+				{children}

+			</div>

+		);

+	},

+);

diff --git a/apps/web/src/lib/selection/selectable-surface.tsx b/apps/web/src/lib/selection/selectable-surface.tsx
index 605b3d18..20c7adb3 100644
--- a/apps/web/src/lib/selection/selectable-surface.tsx
+++ b/apps/web/src/lib/selection/selectable-surface.tsx
@@ -1,288 +1,288 @@
-"use client";
-
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { SelectionBox } from "@/lib/selection/selection-box";
-import { SelectionContext } from "@/lib/selection/context";
-import { SELECTABLE_ITEM_ATTRIBUTE } from "@/lib/selection/constants";
-import { resolveElementIntersections } from "@/lib/selection/hit-testing";
-import {
-	applyBoxSelection,
-	clearSelection,
-	isSelected as getIsSelected,
-	pruneSelection,
-	replaceSelection,
-	selectRange,
-	toggleSelection,
-} from "@/lib/selection/state";
-import type {
-	SelectableSurfaceProps,
-	SelectionState,
-} from "@/lib/selection/types";
-import { useBoxSelect } from "@/lib/selection/hooks/use-box-select";
-import { cn } from "@/utils/ui";
-
-export function SelectableSurface({
-	orderedIds,
-	children,
-	className,
-	ariaLabel = "Selectable items",
-	revealId = null,
-	onRevealComplete,
-	onSelectionChange,
-}: SelectableSurfaceProps) {
-	const [selectionState, setSelectionState] = useState<SelectionState>(() =>
-		clearSelection(),
-	);
-	const [highlightedId, setHighlightedId] = useState<string | null>(null);
-	const containerRef = useRef<HTMLDivElement>(null);
-	const itemElementsRef = useRef<Map<string, HTMLElement>>(new Map());
-
-	const registerItem = useCallback(
-		(id: string, element: HTMLElement | null) => {
-			if (element) {
-				itemElementsRef.current.set(id, element);
-			} else {
-				itemElementsRef.current.delete(id);
-			}
-		},
-		[],
-	);
-
-	const getSelectableElements = useCallback(() => {
-		return itemElementsRef.current;
-	}, []);
-
-	const getItemElement = useCallback((id: string) => {
-		return itemElementsRef.current.get(id) ?? null;
-	}, []);
-	const shouldStartSelection = useCallback(
-		(event: React.MouseEvent<Element>) => {
-			return !(
-				event.target instanceof Element &&
-				event.target.closest(`[${SELECTABLE_ITEM_ATTRIBUTE}='true']`)
-			);
-		},
-		[],
-	);
-	const resolveIntersections = useCallback(
-		({
-			startPos,
-			currentPos,
-		}: {
-			startPos: { x: number; y: number };
-			currentPos: { x: number; y: number };
-		}) => {
-			return resolveElementIntersections({
-				startPos,
-				currentPos,
-				elements: getSelectableElements(),
-			});
-		},
-		[getSelectableElements],
-	);
-
-	const clearSelectionState = useCallback(() => {
-		setSelectionState(clearSelection());
-	}, []);
-
-	const selectedIdSet = useMemo(
-		() => new Set(selectionState.selectedIds),
-		[selectionState.selectedIds],
-	);
-
-	const isSelected = useCallback(
-		(id: string) => selectedIdSet.has(id),
-		[selectedIdSet],
-	);
-
-	const handleItemClick = useCallback(
-		({
-			event,
-			id,
-		}: {
-			event:
-				| React.MouseEvent<HTMLDivElement>
-				| React.KeyboardEvent<HTMLDivElement>;
-			id: string;
-		}) => {
-			setSelectionState((state) => {
-				const isToggleSelection = event.ctrlKey || event.metaKey;
-
-				if (event.shiftKey) {
-					return selectRange({
-						state,
-						orderedIds,
-						targetId: id,
-						isAdditive: isToggleSelection,
-					});
-				}
-
-				if (isToggleSelection) {
-					return toggleSelection({
-						state,
-						id,
-					});
-				}
-
-				return replaceSelection({
-					ids: [id],
-					anchorId: id,
-				});
-			});
-		},
-		[orderedIds],
-	);
-
-	const selectUnselectedItem = useCallback((id: string) => {
-		setSelectionState((state) => {
-			if (getIsSelected({ state, id })) {
-				return state;
-			}
-
-			return replaceSelection({ ids: [id], anchorId: id });
-		});
-	}, []);
-
-	const handleItemMouseDown = useCallback(
-		({
-			event,
-			id,
-		}: {
-			event: React.MouseEvent<HTMLDivElement>;
-			id: string;
-		}) => {
-			if (event.button !== 2) {
-				return;
-			}
-
-			selectUnselectedItem(id);
-		},
-		[selectUnselectedItem],
-	);
-
-	const handleBoxSelectionChange = useCallback(
-		(change: Parameters<typeof applyBoxSelection>[0]) => {
-			setSelectionState(applyBoxSelection(change));
-		},
-		[],
-	);
-
-	const { selectionBox, handleMouseDown, shouldIgnoreClick } = useBoxSelect({
-		containerRef,
-		resolveIntersections,
-		selectedIds: selectionState.selectedIds,
-		anchorId: selectionState.anchorId,
-		onSelectionChange: handleBoxSelectionChange,
-		shouldStartSelection,
-	});
-
-	const handleBackgroundClick = useCallback(
-		(event: React.MouseEvent<HTMLDivElement>) => {
-			const clickedSelectableItem =
-				event.target instanceof Element &&
-				event.target.closest(`[${SELECTABLE_ITEM_ATTRIBUTE}='true']`);
-			const isIgnoringClick = shouldIgnoreClick();
-			if (clickedSelectableItem || isIgnoringClick) {
-				return;
-			}
-
-			clearSelectionState();
-		},
-		[clearSelectionState, shouldIgnoreClick],
-	);
-
-	const handleBackgroundKeyDown = useCallback(
-		(event: React.KeyboardEvent<HTMLDivElement>) => {
-			if (event.target !== event.currentTarget) {
-				return;
-			}
-
-			if (event.key !== "Enter" && event.key !== " " && event.key !== "Escape") {
-				return;
-			}
-
-			event.preventDefault();
-			clearSelectionState();
-		},
-		[clearSelectionState],
-	);
-
-	useEffect(() => {
-		setSelectionState((state) =>
-			pruneSelection({
-				state,
-				orderedIds,
-			}),
-		);
-	}, [orderedIds]);
-
-	useEffect(() => {
-		onSelectionChange?.(selectionState);
-	}, [onSelectionChange, selectionState]);
-
-	useEffect(() => {
-		if (!revealId) {
-			return;
-		}
-
-		setHighlightedId(revealId);
-		getItemElement(revealId)?.scrollIntoView({ block: "center" });
-
-		const timer = setTimeout(() => {
-			setHighlightedId(null);
-			onRevealComplete?.();
-		}, 1500);
-
-		return () => clearTimeout(timer);
-	}, [getItemElement, onRevealComplete, revealId]);
-
-	const isBoxSelecting = selectionBox?.isActive ?? false;
-
-	const contextValue = useMemo(() => {
-		return {
-			selectedIds: selectionState.selectedIds,
-			anchorId: selectionState.anchorId,
-			highlightedId,
-			isBoxSelecting,
-			isSelected,
-			clearSelection: clearSelectionState,
-			handleItemClick,
-			handleItemMouseDown,
-			registerItem,
-		};
-	}, [
-		clearSelectionState,
-		handleItemClick,
-		handleItemMouseDown,
-		highlightedId,
-		isBoxSelecting,
-		isSelected,
-		registerItem,
-		selectionState.anchorId,
-		selectionState.selectedIds,
-	]);
-
-	return (
-		<SelectionContext.Provider value={contextValue}>
-			<div
-				ref={containerRef}
-				className={cn("relative min-h-full", className)}
-				role="listbox"
-				aria-label={ariaLabel}
-				aria-multiselectable="true"
-				tabIndex={0}
-				onMouseDown={handleMouseDown}
-				onClick={handleBackgroundClick}
-				onKeyDown={handleBackgroundKeyDown}
-			>
-				{children}
-				<SelectionBox
-					startPos={selectionBox?.startPos ?? null}
-					currentPos={selectionBox?.currentPos ?? null}
-					containerRef={containerRef}
-					isActive={selectionBox?.isActive ?? false}
-				/>
-			</div>
-		</SelectionContext.Provider>
-	);
-}
+"use client";

+

+import { useCallback, useEffect, useMemo, useRef, useState } from "react";

+import { SelectionBox } from "@/lib/selection/selection-box";

+import { SelectionContext } from "@/lib/selection/context";

+import { SELECTABLE_ITEM_ATTRIBUTE } from "@/lib/selection/constants";

+import { resolveElementIntersections } from "@/lib/selection/hit-testing";

+import {

+	applyBoxSelection,

+	clearSelection,

+	isSelected as getIsSelected,

+	pruneSelection,

+	replaceSelection,

+	selectRange,

+	toggleSelection,

+} from "@/lib/selection/state";

+import type {

+	SelectableSurfaceProps,

+	SelectionState,

+} from "@/lib/selection/types";

+import { useBoxSelect } from "@/lib/selection/hooks/use-box-select";

+import { cn } from "@/utils/ui";

+

+export function SelectableSurface({

+	orderedIds,

+	children,

+	className,

+	ariaLabel = "Selectable items",

+	revealId = null,

+	onRevealComplete,

+	onSelectionChange,

+}: SelectableSurfaceProps) {

+	const [selectionState, setSelectionState] = useState<SelectionState>(() =>

+		clearSelection(),

+	);

+	const [highlightedId, setHighlightedId] = useState<string | null>(null);

+	const containerRef = useRef<HTMLDivElement>(null);

+	const itemElementsRef = useRef<Map<string, HTMLElement>>(new Map());

+

+	const registerItem = useCallback(

+		(id: string, element: HTMLElement | null) => {

+			if (element) {

+				itemElementsRef.current.set(id, element);

+			} else {

+				itemElementsRef.current.delete(id);

+			}

+		},

+		[],

+	);

+

+	const getSelectableElements = useCallback(() => {

+		return itemElementsRef.current;

+	}, []);

+

+	const getItemElement = useCallback((id: string) => {

+		return itemElementsRef.current.get(id) ?? null;

+	}, []);

+	const shouldStartSelection = useCallback(

+		(event: React.MouseEvent<Element>) => {

+			return !(

+				event.target instanceof Element &&

+				event.target.closest(`[${SELECTABLE_ITEM_ATTRIBUTE}='true']`)

+			);

+		},

+		[],

+	);

+	const resolveIntersections = useCallback(

+		({

+			startPos,

+			currentPos,

+		}: {

+			startPos: { x: number; y: number };

+			currentPos: { x: number; y: number };

+		}) => {

+			return resolveElementIntersections({

+				startPos,

+				currentPos,

+				elements: getSelectableElements(),

+			});

+		},

+		[getSelectableElements],

+	);

+

+	const clearSelectionState = useCallback(() => {

+		setSelectionState(clearSelection());

+	}, []);

+

+	const selectedIdSet = useMemo(

+		() => new Set(selectionState.selectedIds),

+		[selectionState.selectedIds],

+	);

+

+	const isSelected = useCallback(

+		(id: string) => selectedIdSet.has(id),

+		[selectedIdSet],

+	);

+

+	const handleItemClick = useCallback(

+		({

+			event,

+			id,

+		}: {

+			event:

+				| React.MouseEvent<HTMLDivElement>

+				| React.KeyboardEvent<HTMLDivElement>;

+			id: string;

+		}) => {

+			setSelectionState((state) => {

+				const isToggleSelection = event.ctrlKey || event.metaKey;

+

+				if (event.shiftKey) {

+					return selectRange({

+						state,

+						orderedIds,

+						targetId: id,

+						isAdditive: isToggleSelection,

+					});

+				}

+

+				if (isToggleSelection) {

+					return toggleSelection({

+						state,

+						id,

+					});

+				}

+

+				return replaceSelection({

+					ids: [id],

+					anchorId: id,

+				});

+			});

+		},

+		[orderedIds],

+	);

+

+	const selectUnselectedItem = useCallback((id: string) => {

+		setSelectionState((state) => {

+			if (getIsSelected({ state, id })) {

+				return state;

+			}

+

+			return replaceSelection({ ids: [id], anchorId: id });

+		});

+	}, []);

+

+	const handleItemMouseDown = useCallback(

+		({

+			event,

+			id,

+		}: {

+			event: React.MouseEvent<HTMLDivElement>;

+			id: string;

+		}) => {

+			if (event.button !== 2) {

+				return;

+			}

+

+			selectUnselectedItem(id);

+		},

+		[selectUnselectedItem],

+	);

+

+	const handleBoxSelectionChange = useCallback(

+		(change: Parameters<typeof applyBoxSelection>[0]) => {

+			setSelectionState(applyBoxSelection(change));

+		},

+		[],

+	);

+

+	const { selectionBox, handleMouseDown, shouldIgnoreClick } = useBoxSelect({

+		containerRef,

+		resolveIntersections,

+		selectedIds: selectionState.selectedIds,

+		anchorId: selectionState.anchorId,

+		onSelectionChange: handleBoxSelectionChange,

+		shouldStartSelection,

+	});

+

+	const handleBackgroundClick = useCallback(

+		(event: React.MouseEvent<HTMLDivElement>) => {

+			const clickedSelectableItem =

+				event.target instanceof Element &&

+				event.target.closest(`[${SELECTABLE_ITEM_ATTRIBUTE}='true']`);

+			const isIgnoringClick = shouldIgnoreClick();

+			if (clickedSelectableItem || isIgnoringClick) {

+				return;

+			}

+

+			clearSelectionState();

+		},

+		[clearSelectionState, shouldIgnoreClick],

+	);

+

+	const handleBackgroundKeyDown = useCallback(

+		(event: React.KeyboardEvent<HTMLDivElement>) => {

+			if (event.target !== event.currentTarget) {

+				return;

+			}

+

+			if (event.key !== "Enter" && event.key !== " " && event.key !== "Escape") {

+				return;

+			}

+

+			event.preventDefault();

+			clearSelectionState();

+		},

+		[clearSelectionState],

+	);

+

+	useEffect(() => {

+		setSelectionState((state) =>

+			pruneSelection({

+				state,

+				orderedIds,

+			}),

+		);

+	}, [orderedIds]);

+

+	useEffect(() => {

+		onSelectionChange?.(selectionState);

+	}, [onSelectionChange, selectionState]);

+

+	useEffect(() => {

+		if (!revealId) {

+			return;

+		}

+

+		setHighlightedId(revealId);

+		getItemElement(revealId)?.scrollIntoView({ block: "center" });

+

+		const timer = setTimeout(() => {

+			setHighlightedId(null);

+			onRevealComplete?.();

+		}, 1500);

+

+		return () => clearTimeout(timer);

+	}, [getItemElement, onRevealComplete, revealId]);

+

+	const isBoxSelecting = selectionBox?.isActive ?? false;

+

+	const contextValue = useMemo(() => {

+		return {

+			selectedIds: selectionState.selectedIds,

+			anchorId: selectionState.anchorId,

+			highlightedId,

+			isBoxSelecting,

+			isSelected,

+			clearSelection: clearSelectionState,

+			handleItemClick,

+			handleItemMouseDown,

+			registerItem,

+		};

+	}, [

+		clearSelectionState,

+		handleItemClick,

+		handleItemMouseDown,

+		highlightedId,

+		isBoxSelecting,

+		isSelected,

+		registerItem,

+		selectionState.anchorId,

+		selectionState.selectedIds,

+	]);

+

+	return (

+		<SelectionContext.Provider value={contextValue}>

+			<div

+				ref={containerRef}

+				className={cn("relative min-h-full", className)}

+				role="listbox"

+				aria-label={ariaLabel}

+				aria-multiselectable="true"

+				tabIndex={0}

+				onMouseDown={handleMouseDown}

+				onClick={handleBackgroundClick}

+				onKeyDown={handleBackgroundKeyDown}

+			>

+				{children}

+				<SelectionBox

+					startPos={selectionBox?.startPos ?? null}

+					currentPos={selectionBox?.currentPos ?? null}

+					containerRef={containerRef}

+					isActive={selectionBox?.isActive ?? false}

+				/>

+			</div>

+		</SelectionContext.Provider>

+	);

+}

diff --git a/apps/web/src/lib/selection/selection-box.tsx b/apps/web/src/lib/selection/selection-box.tsx
index 0b757e36..e30f574d 100644
--- a/apps/web/src/lib/selection/selection-box.tsx
+++ b/apps/web/src/lib/selection/selection-box.tsx
@@ -1,50 +1,50 @@
-"use client";
-
-import { useMemo } from "react";
-
-interface SelectionBoxProps {
-	startPos: { x: number; y: number } | null;
-	currentPos: { x: number; y: number } | null;
-	containerRef: React.RefObject<HTMLElement | null>;
-	isActive: boolean;
-}
-
-export function SelectionBox({
-	startPos,
-	currentPos,
-	containerRef,
-	isActive,
-}: SelectionBoxProps) {
-	const selectionBoxStyle = useMemo(() => {
-		if (!isActive || !startPos || !currentPos || !containerRef.current) {
-			return null;
-		}
-
-		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 left = Math.min(startX, currentX);
-		const top = Math.min(startY, currentY);
-		const width = Math.abs(currentX - startX);
-		const height = Math.abs(currentY - startY);
-
-		return {
-			left: `${left}px`,
-			top: `${top}px`,
-			width: `${width}px`,
-			height: `${height}px`,
-		};
-	}, [containerRef, currentPos, isActive, startPos]);
-
-	if (!selectionBoxStyle) return null;
-
-	return (
-		<div
-			style={selectionBoxStyle}
-			className="border-foreground/50 bg-foreground/5 pointer-events-none absolute z-50 border"
-		/>
-	);
-}
+"use client";

+

+import { useMemo } from "react";

+

+interface SelectionBoxProps {

+	startPos: { x: number; y: number } | null;

+	currentPos: { x: number; y: number } | null;

+	containerRef: React.RefObject<HTMLElement | null>;

+	isActive: boolean;

+}

+

+export function SelectionBox({

+	startPos,

+	currentPos,

+	containerRef,

+	isActive,

+}: SelectionBoxProps) {

+	const selectionBoxStyle = useMemo(() => {

+		if (!isActive || !startPos || !currentPos || !containerRef.current) {

+			return null;

+		}

+

+		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 left = Math.min(startX, currentX);

+		const top = Math.min(startY, currentY);

+		const width = Math.abs(currentX - startX);

+		const height = Math.abs(currentY - startY);

+

+		return {

+			left: `${left}px`,

+			top: `${top}px`,

+			width: `${width}px`,

+			height: `${height}px`,

+		};

+	}, [containerRef, currentPos, isActive, startPos]);

+

+	if (!selectionBoxStyle) return null;

+

+	return (

+		<div

+			style={selectionBoxStyle}

+			className="border-foreground/50 bg-foreground/5 pointer-events-none absolute z-50 border"

+		/>

+	);

+}

diff --git a/apps/web/src/lib/selection/state.ts b/apps/web/src/lib/selection/state.ts
index b4c454fb..b0ba3089 100644
--- a/apps/web/src/lib/selection/state.ts
+++ b/apps/web/src/lib/selection/state.ts
@@ -1,165 +1,165 @@
-import type {
-	BoxSelectionChange,
-	SelectionState,
-} from "@/lib/selection/types";
-
-function dedupeIds({ ids }: { ids: string[] }) {
-	return [...new Set(ids)];
-}
-
-function getRangeIds({
-	orderedIds,
-	anchorId,
-	targetId,
-}: {
-	orderedIds: string[];
-	anchorId: string;
-	targetId: string;
-}) {
-	const anchorIndex = orderedIds.indexOf(anchorId);
-	const targetIndex = orderedIds.indexOf(targetId);
-
-	if (anchorIndex === -1 || targetIndex === -1) {
-		return [targetId];
-	}
-
-	const rangeStart = Math.min(anchorIndex, targetIndex);
-	const rangeEnd = Math.max(anchorIndex, targetIndex);
-	return orderedIds.slice(rangeStart, rangeEnd + 1);
-}
-
-export function replaceSelection({
-	ids,
-	anchorId,
-}: {
-	ids: string[];
-	anchorId?: string | null;
-}): SelectionState {
-	const selectedIds = dedupeIds({ ids });
-	return {
-		selectedIds,
-		anchorId: anchorId ?? selectedIds[selectedIds.length - 1] ?? null,
-	};
-}
-
-export function clearSelection(): SelectionState {
-	return {
-		selectedIds: [],
-		anchorId: null,
-	};
-}
-
-export function pruneSelection({
-	state,
-	orderedIds,
-}: {
-	state: SelectionState;
-	orderedIds: string[];
-}): SelectionState {
-	const validIds = new Set(orderedIds);
-	const selectedIds = state.selectedIds.filter((id) => validIds.has(id));
-	const anchorId =
-		state.anchorId && validIds.has(state.anchorId)
-			? state.anchorId
-			: selectedIds[selectedIds.length - 1] ?? null;
-	const isUnchanged =
-		selectedIds.length === state.selectedIds.length &&
-		anchorId === state.anchorId;
-
-	if (isUnchanged) {
-		return state;
-	}
-
-	return {
-		selectedIds,
-		anchorId,
-	};
-}
-
-export function isSelected({
-	state,
-	id,
-}: {
-	state: SelectionState;
-	id: string;
-}) {
-	return state.selectedIds.includes(id);
-}
-
-export function toggleSelection({
-	state,
-	id,
-}: {
-	state: SelectionState;
-	id: string;
-}): SelectionState {
-	if (isSelected({ state, id })) {
-		const selectedIds = state.selectedIds.filter((selectedId) => selectedId !== id);
-		const anchorId =
-			state.anchorId === id
-				? selectedIds[selectedIds.length - 1] ?? null
-				: state.anchorId;
-		return replaceSelection({
-			ids: selectedIds,
-			anchorId,
-		});
-	}
-
-	return replaceSelection({
-		ids: [...state.selectedIds, id],
-		anchorId: id,
-	});
-}
-
-export function selectRange({
-	state,
-	orderedIds,
-	targetId,
-	isAdditive,
-}: {
-	state: SelectionState;
-	orderedIds: string[];
-	targetId: string;
-	isAdditive: boolean;
-}): SelectionState {
-	const anchorId =
-		state.anchorId ??
-		state.selectedIds[state.selectedIds.length - 1] ??
-		targetId;
-	const rangeIds = getRangeIds({
-		orderedIds,
-		anchorId,
-		targetId,
-	});
-	const selectedIds = isAdditive
-		? dedupeIds({
-				ids: [...state.selectedIds, ...rangeIds],
-			})
-		: rangeIds;
-
-	return replaceSelection({
-		ids: selectedIds,
-		anchorId,
-	});
-}
-
-export function applyBoxSelection({
-	intersectedIds,
-	initialSelectedIds,
-	initialAnchorId,
-	isAdditive,
-}: BoxSelectionChange): SelectionState {
-	const selectedIds = isAdditive
-		? dedupeIds({
-				ids: [...initialSelectedIds, ...intersectedIds],
-			})
-		: intersectedIds;
-	const anchorId = isAdditive
-		? initialAnchorId ?? intersectedIds[intersectedIds.length - 1] ?? null
-		: intersectedIds[intersectedIds.length - 1] ?? null;
-
-	return replaceSelection({
-		ids: selectedIds,
-		anchorId,
-	});
-}
+import type {

+	BoxSelectionChange,

+	SelectionState,

+} from "@/lib/selection/types";

+

+function dedupeIds({ ids }: { ids: string[] }) {

+	return [...new Set(ids)];

+}

+

+function getRangeIds({

+	orderedIds,

+	anchorId,

+	targetId,

+}: {

+	orderedIds: string[];

+	anchorId: string;

+	targetId: string;

+}) {

+	const anchorIndex = orderedIds.indexOf(anchorId);

+	const targetIndex = orderedIds.indexOf(targetId);

+

+	if (anchorIndex === -1 || targetIndex === -1) {

+		return [targetId];

+	}

+

+	const rangeStart = Math.min(anchorIndex, targetIndex);

+	const rangeEnd = Math.max(anchorIndex, targetIndex);

+	return orderedIds.slice(rangeStart, rangeEnd + 1);

+}

+

+export function replaceSelection({

+	ids,

+	anchorId,

+}: {

+	ids: string[];

+	anchorId?: string | null;

+}): SelectionState {

+	const selectedIds = dedupeIds({ ids });

+	return {

+		selectedIds,

+		anchorId: anchorId ?? selectedIds[selectedIds.length - 1] ?? null,

+	};

+}

+

+export function clearSelection(): SelectionState {

+	return {

+		selectedIds: [],

+		anchorId: null,

+	};

+}

+

+export function pruneSelection({

+	state,

+	orderedIds,

+}: {

+	state: SelectionState;

+	orderedIds: string[];

+}): SelectionState {

+	const validIds = new Set(orderedIds);

+	const selectedIds = state.selectedIds.filter((id) => validIds.has(id));

+	const anchorId =

+		state.anchorId && validIds.has(state.anchorId)

+			? state.anchorId

+			: selectedIds[selectedIds.length - 1] ?? null;

+	const isUnchanged =

+		selectedIds.length === state.selectedIds.length &&

+		anchorId === state.anchorId;

+

+	if (isUnchanged) {

+		return state;

+	}

+

+	return {

+		selectedIds,

+		anchorId,

+	};

+}

+

+export function isSelected({

+	state,

+	id,

+}: {

+	state: SelectionState;

+	id: string;

+}) {

+	return state.selectedIds.includes(id);

+}

+

+export function toggleSelection({

+	state,

+	id,

+}: {

+	state: SelectionState;

+	id: string;

+}): SelectionState {

+	if (isSelected({ state, id })) {

+		const selectedIds = state.selectedIds.filter((selectedId) => selectedId !== id);

+		const anchorId =

+			state.anchorId === id

+				? selectedIds[selectedIds.length - 1] ?? null

+				: state.anchorId;

+		return replaceSelection({

+			ids: selectedIds,

+			anchorId,

+		});

+	}

+

+	return replaceSelection({

+		ids: [...state.selectedIds, id],

+		anchorId: id,

+	});

+}

+

+export function selectRange({

+	state,

+	orderedIds,

+	targetId,

+	isAdditive,

+}: {

+	state: SelectionState;

+	orderedIds: string[];

+	targetId: string;

+	isAdditive: boolean;

+}): SelectionState {

+	const anchorId =

+		state.anchorId ??

+		state.selectedIds[state.selectedIds.length - 1] ??

+		targetId;

+	const rangeIds = getRangeIds({

+		orderedIds,

+		anchorId,

+		targetId,

+	});

+	const selectedIds = isAdditive

+		? dedupeIds({

+				ids: [...state.selectedIds, ...rangeIds],

+			})

+		: rangeIds;

+

+	return replaceSelection({

+		ids: selectedIds,

+		anchorId,

+	});

+}

+

+export function applyBoxSelection({

+	intersectedIds,

+	initialSelectedIds,

+	initialAnchorId,

+	isAdditive,

+}: BoxSelectionChange): SelectionState {

+	const selectedIds = isAdditive

+		? dedupeIds({

+				ids: [...initialSelectedIds, ...intersectedIds],

+			})

+		: intersectedIds;

+	const anchorId = isAdditive

+		? initialAnchorId ?? intersectedIds[intersectedIds.length - 1] ?? null

+		: intersectedIds[intersectedIds.length - 1] ?? null;

+

+	return replaceSelection({

+		ids: selectedIds,

+		anchorId,

+	});

+}

diff --git a/apps/web/src/lib/selection/types.ts b/apps/web/src/lib/selection/types.ts
index 94fd7abe..31520788 100644
--- a/apps/web/src/lib/selection/types.ts
+++ b/apps/web/src/lib/selection/types.ts
@@ -1,39 +1,39 @@
-export interface SelectionState {
-	selectedIds: string[];
-	anchorId: string | null;
-}
-
-export interface BoxSelectionSnapshot<TId = string> {
-	initialSelectedIds: TId[];
-	initialAnchorId: TId | null;
-}
-
-export interface BoxSelectionChange<TId = string>
-	extends BoxSelectionSnapshot<TId> {
-	intersectedIds: TId[];
-	isAdditive: boolean;
-}
-
-export type ResolveIntersections<TId = string> = ({
-	startPos,
-	currentPos,
-}: {
-	startPos: { x: number; y: number };
-	currentPos: { x: number; y: number };
-}) => TId[];
-
-export interface SelectableSurfaceProps {
-	orderedIds: string[];
-	children: React.ReactNode;
-	className?: string;
-	ariaLabel?: string;
-	revealId?: string | null;
-	onRevealComplete?: () => void;
-	onSelectionChange?: (state: SelectionState) => void;
-}
-
-export interface SelectableItemProps
-	extends React.HTMLAttributes<HTMLDivElement> {
-	id: string;
-	children: React.ReactNode;
-}
+export interface SelectionState {

+	selectedIds: string[];

+	anchorId: string | null;

+}

+

+export interface BoxSelectionSnapshot<TId = string> {

+	initialSelectedIds: TId[];

+	initialAnchorId: TId | null;

+}

+

+export interface BoxSelectionChange<TId = string>

+	extends BoxSelectionSnapshot<TId> {

+	intersectedIds: TId[];

+	isAdditive: boolean;

+}

+

+export type ResolveIntersections<TId = string> = ({

+	startPos,

+	currentPos,

+}: {

+	startPos: { x: number; y: number };

+	currentPos: { x: number; y: number };

+}) => TId[];

+

+export interface SelectableSurfaceProps {

+	orderedIds: string[];

+	children: React.ReactNode;

+	className?: string;

+	ariaLabel?: string;

+	revealId?: string | null;

+	onRevealComplete?: () => void;

+	onSelectionChange?: (state: SelectionState) => void;

+}

+

+export interface SelectableItemProps

+	extends React.HTMLAttributes<HTMLDivElement> {

+	id: string;

+	children: React.ReactNode;

+}