feat: masks, properties refactor, shaders, storage migrations, and more

1 files changed, 28 insertions, 7 deletions

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,