feat: Clip effects, asset sorting, and timeline improvements

Major features and improvements:

* **Clip Effects**:
  * Added UI in Properties Panel to manage effects on video/image clips (add, remove, toggle, reorder).
  * Implemented dynamic parameter fields for effects.
  * Added support for keyframing effect parameters.

* **Assets Panel**:
  * Added sorting options: Name, Type, Duration, and File Size.
  * Persisted view preferences (grid/list mode, sort order) to local storage.
  * Refactored media item rendering and drag interactions.

* **Timeline & Interaction**:
  * **Keyframe Dragging**: Added ability to drag keyframes directly on the timeline element.
  * **Resizing**: Improved resize logic to respect neighboring clips (prevents overlaps).
  * **Visuals**: Implemented tiled background rendering for video/image clips on the timeline.
  * **Shortcuts**: Added "Deselect All" action bound to the `Escape` key.
  * **Fixes**: Corrected drag-and-drop coordinate calculations when the timeline track area is scrolled.

* **Text Elements**:
  * Refactored text background storage to use an explicit `enabled` flag.
  * Added `V8toV9` storage migration to update existing projects.

* **Architecture**:
  * Moved export state management to `ProjectManager` for better lifecycle handling.
  * Refactored `PropertiesPanel` sections to be more composable (custom headers, borders).

apps/web/src/lib/commands/timeline/element/move-elements.ts

@@ -11,6 +11,7 @@ import {
 	validateElementTrackCompatibility,
 	enforceMainTrackStart,
 } from "@/lib/timeline/track-utils";
+import { rippleShiftElements } from "@/lib/timeline/ripple-utils";
 
 export class MoveElementCommand extends Command {
 	private savedState: TimelineTrack[] | null = null;
@@ -19,6 +20,7 @@ export class MoveElementCommand extends Command {
 	private readonly elementId: string;
 	private readonly newStartTime: number;
 	private readonly createTrack: { type: TrackType; index: number } | undefined;
+	private readonly rippleEnabled: boolean;
 
 	constructor({
 		sourceTrackId,
@@ -26,12 +28,14 @@ export class MoveElementCommand extends Command {
 		elementId,
 		newStartTime,
 		createTrack,
+		rippleEnabled = false,
 	}: {
 		sourceTrackId: string;
 		targetTrackId: string;
 		elementId: string;
 		newStartTime: number;
 		createTrack?: { type: TrackType; index: number };
+		rippleEnabled?: boolean;
 	}) {
 		super();
 		this.sourceTrackId = sourceTrackId;
@@ -39,6 +43,7 @@ export class MoveElementCommand extends Command {
 		this.elementId = elementId;
 		this.newStartTime = newStartTime;
 		this.createTrack = createTrack;
+		this.rippleEnabled = rippleEnabled;
 	}
 
 	execute(): void {
@@ -53,8 +58,7 @@ export class MoveElementCommand extends Command {
 		);
 
 		if (!sourceTrack || !element) {
-			console.error("Source track or element not found");
-			return;
+			throw new Error("Source track or element not found");
 		}
 
 		let targetTrack = this.savedState.find((track) => track.id === this.targetTrackId);
@@ -69,8 +73,7 @@ export class MoveElementCommand extends Command {
 			targetTrack = newTrack;
 		}
 		if (!targetTrack) {
-			console.error("Target track not found");
-			return;
+			throw new Error("Target track not found");
 		}
 
 		const validation = validateElementTrackCompatibility({
@@ -79,8 +82,7 @@ export class MoveElementCommand extends Command {
 		});
 
 		if (!validation.isValid) {
-			console.error(validation.errorMessage);
-			return;
+			throw new Error(validation.errorMessage);
 		}
 
 		const adjustedStartTime = enforceMainTrackStart({
@@ -105,27 +107,32 @@ export class MoveElementCommand extends Command {
 					elements: track.elements.map((trackElement) =>
 						trackElement.id === this.elementId ? movedElement : trackElement,
 					),
-				};
+				} as typeof track;
 			}
 
 			if (track.id === this.sourceTrackId) {
-				return {
-					...track,
-					elements: track.elements.filter(
-						(trackElement) => trackElement.id !== this.elementId,
-					),
-				};
+				const remainingElements = track.elements.filter(
+					(trackElement) => trackElement.id !== this.elementId,
+				);
+				const shiftedElements = this.rippleEnabled
+					? rippleShiftElements({
+							elements: remainingElements,
+							afterTime: element.startTime,
+							shiftAmount: element.duration,
+						})
+					: remainingElements;
+				return { ...track, elements: shiftedElements } as typeof track;
 			}
 
 			if (track.id === this.targetTrackId) {
 				return {
 					...track,
 					elements: [...track.elements, movedElement],
-				};
+				} as typeof track;
 			}
 
-		return track;
-	});
+			return track;
+		});
 
 		if (!isSameTrack) {
 			const sourceTrackAfterMove = updatedTracks.find(