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

1 files changed, 38 insertions, 24 deletions

diff --git a/apps/web/src/components/editor/panels/timeline/timeline-track.tsx b/apps/web/src/components/editor/panels/timeline/timeline-track.tsx
index 81cda7a6..6a9e4dfe 100644
--- a/apps/web/src/components/editor/panels/timeline/timeline-track.tsx
+++ b/apps/web/src/components/editor/panels/timeline/timeline-track.tsx
@@ -2,12 +2,12 @@
 
 import { useElementSelection } from "@/hooks/timeline/element/use-element-selection";
 import { TimelineElement } from "./timeline-element";
-import type { TimelineTrack } from "@/types/timeline";
-import type { TimelineElement as TimelineElementType } from "@/types/timeline";
+import type { TimelineTrack } from "@/lib/timeline";
+import type { TimelineElement as TimelineElementType } from "@/lib/timeline";
 import type { SnapPoint } from "@/lib/timeline/snap-utils";
-import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
+import { TIMELINE_CONSTANTS, TIMELINE_LAYERS } from "@/constants/timeline-constants";
 import { useEdgeAutoScroll } from "@/hooks/timeline/use-edge-auto-scroll";
-import type { ElementDragState } from "@/types/timeline";
+import type { ElementDragState } from "@/lib/timeline";
 import { useEditor } from "@/hooks/use-editor";
 
 interface TimelineTrackContentProps {
@@ -30,7 +30,7 @@ interface TimelineTrackContentProps {
 		track: TimelineTrack;
 	}) => void;
 	onTrackMouseDown?: (event: React.MouseEvent) => void;
-	onTrackClick?: (event: React.MouseEvent) => void;
+	onTrackMouseUp?: (event: React.MouseEvent) => void;
 	shouldIgnoreClick?: () => boolean;
 	targetElementId?: string | null;
 }
@@ -47,14 +47,12 @@ export function TimelineTrackContent({
 	onElementMouseDown,
 	onElementClick,
 	onTrackMouseDown,
-	onTrackClick,
+	onTrackMouseUp,
 	shouldIgnoreClick,
 	targetElementId = null,
 }: TimelineTrackContentProps) {
-	const editor = useEditor();
 	const { isElementSelected } = useElementSelection();
-
-	const duration = editor.timeline.getTotalDuration();
+	const duration = useEditor((e) => e.timeline.getTotalDuration());
 
 	useEdgeAutoScroll({
 		isActive: dragState.isDragging,
@@ -65,21 +63,37 @@ export function TimelineTrackContent({
 	});
 
 	return (
-		<button
-			className="size-full"
-			onClick={(event) => {
-				if (shouldIgnoreClick?.()) return;
-				onTrackClick?.(event);
-			}}
-			onMouseDown={(event) => {
-				event.preventDefault();
-				onTrackMouseDown?.(event);
-			}}
-			type="button"
-		>
-			<div className="relative h-full min-w-full">
+		<div className="relative size-full">
+			<button
+				type="button"
+				className="absolute inset-0 m-0 size-full appearance-none border-0 bg-transparent p-0"
+				aria-label={`Select ${track.name} track`}
+			onMouseUp={(event) => {
+					if (shouldIgnoreClick?.()) return;
+				onTrackMouseUp?.(event);
+				}}
+				onMouseDown={(event) => {
+					event.preventDefault();
+					onTrackMouseDown?.(event);
+				}}
+			/>
+			{/* biome-ignore lint/a11y/noStaticElementInteractions: empty track area is a pointer-only seek surface */}
+			<div
+				className="relative h-full min-w-full"
+				style={{ zIndex: TIMELINE_LAYERS.trackContent }}
+				onMouseUp={(event) => {
+					if (event.target !== event.currentTarget) return;
+					if (shouldIgnoreClick?.()) return;
+					onTrackMouseUp?.(event);
+				}}
+				onMouseDown={(event) => {
+					if (event.target !== event.currentTarget) return;
+					event.preventDefault();
+					onTrackMouseDown?.(event);
+				}}
+			>
 				{track.elements.length === 0 ? (
-					<div className="text-muted-foreground border-muted/30 flex size-full items-center justify-center rounded-sm border-2 border-dashed text-xs" />
+					<div className="text-muted-foreground border-muted/30 pointer-events-none flex size-full items-center justify-center rounded-sm border-2 border-dashed text-xs" />
 				) : (
 					track.elements.map((element) => {
 						const isSelected = isElementSelected({
@@ -109,6 +123,6 @@ export function TimelineTrackContent({
 					})
 				)}
 			</div>
-		</button>
+		</div>
 	);
 }