From 8db3bead13441a5882d8689dfc6a9f09c82375d9 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Wed, 25 Mar 2026 16:47:22 +0100
Subject: feat: masks, properties refactor, shaders, storage migrations, and
 more

---
 .../timeline/element/use-element-selection.ts      | 35 +++++++++++++++++-----
 1 file changed, 28 insertions(+), 7 deletions(-)

(limited to 'apps/web/src/hooks/timeline/element/use-element-selection.ts')

diff --git a/apps/web/src/hooks/timeline/element/use-element-selection.ts b/apps/web/src/hooks/timeline/element/use-element-selection.ts
index c1e5b53f..dcfb5720 100644
--- a/apps/web/src/hooks/timeline/element/use-element-selection.ts
+++ b/apps/web/src/hooks/timeline/element/use-element-selection.ts
@@ -1,14 +1,10 @@
-import { useCallback, useSyncExternalStore } from "react";
+import { useCallback } from "react";
 import { useEditor } from "@/hooks/use-editor";
-
-type ElementRef = { trackId: string; elementId: string };
+import type { ElementRef } from "@/lib/timeline/types";
 
 export function useElementSelection() {
 	const editor = useEditor();
-	const selectedElements = useSyncExternalStore(
-		(listener) => editor.selection.subscribe(listener),
-		() => editor.selection.getSelectedElements(),
-	);
+	const selectedElements = useEditor((e) => e.selection.getSelectedElements());
 
 	const isElementSelected = useCallback(
 		({ trackId, elementId }: ElementRef) =>
@@ -82,6 +78,30 @@ export function useElementSelection() {
 		[editor],
 	);
 
+
+	/**
+	 * Merges elements into the current selection, deduplicating by identity.
+	 * Used for additive box-select where the pre-drag selection is preserved.
+	 */
+	const mergeElementsIntoSelection = useCallback(
+		({ elements }: { elements: ElementRef[] }) => {
+			const merged = [
+				...selectedElements.filter(
+					(selectedElement) =>
+						!elements.some(
+							(element) =>
+								element.trackId === selectedElement.trackId &&
+								element.elementId === selectedElement.elementId,
+						),
+				),
+				...elements,
+			];
+			editor.selection.setSelectedElements({ elements: merged });
+		},
+		[selectedElements, editor],
+	);
+
+
 	/**
 	 * Handles click interaction on an element.
 	 * - Regular click: select only this element
@@ -107,6 +127,7 @@ export function useElementSelection() {
 		isElementSelected,
 		selectElement,
 		setElementSelection,
+		mergeElementsIntoSelection,
 		addElementToSelection,
 		removeElementFromSelection,
 		toggleElementSelection,
-- 
cgit v1.3.1