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/text/layout.ts

@@ -1,5 +1,5 @@
 import { DEFAULT_TEXT_BACKGROUND } from "@/constants/text-constants";
-import type { TextElement } from "@/types/timeline";
+import type { TextBackground, TextElement } from "@/types/timeline";
 
 type TextRect = {
 	left: number;
@@ -74,8 +74,12 @@ function getTextRect({
 	textAlign: TextElement["textAlign"];
 	block: TextBlockMeasurement;
 }): TextRect {
-	const left =
-		textAlign === "left" ? 0 : textAlign === "right" ? -block.maxWidth : -block.maxWidth / 2;
+	const textAlignToLeft: Record<typeof textAlign, number> = {
+		left: 0,
+		right: -block.maxWidth,
+		center: -block.maxWidth / 2,
+	};
+	const left = textAlignToLeft[textAlign];
 
 	return {
 		left,
@@ -88,9 +92,13 @@ function getTextRect({
 function isTextBackgroundVisible({
 	background,
 }: {
-	background: TextElement["background"];
+	background: TextBackground;
 }): boolean {
-	return Boolean(background.color) && background.color !== "transparent";
+	return (
+		background.enabled &&
+		Boolean(background.color) &&
+		background.color !== "transparent"
+	);
 }
 
 export function getTextBackgroundRect({
@@ -101,7 +109,7 @@ export function getTextBackgroundRect({
 }: {
 	textAlign: TextElement["textAlign"];
 	block: TextBlockMeasurement;
-	background: TextElement["background"];
+	background: TextBackground;
 	fontSizeRatio?: number;
 }): TextRect | null {
 	if (!isTextBackgroundVisible({ background })) {
@@ -132,7 +140,7 @@ export function getTextVisualRect({
 }: {
 	textAlign: TextElement["textAlign"];
 	block: TextBlockMeasurement;
-	background: TextElement["background"];
+	background: TextBackground;
 	fontSizeRatio?: number;
 }): TextRect {
 	const textRect = getTextRect({ textAlign, block });