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).

2 files changed, 14 insertions, 12 deletions

diff --git a/apps/web/src/components/editor/panels/preview/text-edit-overlay.tsx b/apps/web/src/components/editor/panels/preview/text-edit-overlay.tsx
index fdd4055d..26649b26 100644
--- a/apps/web/src/components/editor/panels/preview/text-edit-overlay.tsx
+++ b/apps/web/src/components/editor/panels/preview/text-edit-overlay.tsx
@@ -56,7 +56,7 @@ export function TextEditOverlay({
 	}, [editor.timeline, trackId, elementId]);
 
 	const handleKeyDown = useCallback(
-		(event: React.KeyboardEvent) => {
+		({ event }: { event: React.KeyboardEvent }) => {
 			const { key } = event;
 			if (key === "Escape") {
 				event.preventDefault();
@@ -98,10 +98,13 @@ export function TextEditOverlay({
 	const fontWeight = element.fontWeight === "bold" ? "bold" : "normal";
 	const fontStyle = element.fontStyle === "italic" ? "italic" : "normal";
 	const letterSpacing = element.letterSpacing ?? 0;
-	const backgroundColor =
-		element.background.color === "transparent"
-			? "transparent"
-			: element.background.color;
+	const shouldShowBackground =
+		element.background.enabled &&
+		element.background.color &&
+		element.background.color !== "transparent";
+	const backgroundColor = shouldShowBackground
+		? element.background.color
+		: "transparent";
 
 	return (
 		<div
@@ -134,13 +137,12 @@ export function TextEditOverlay({
 					backgroundColor,
 					minHeight: displayFontSize * lineHeight,
 					textDecoration: element.textDecoration ?? "none",
-					padding:
-						backgroundColor === "transparent" ? 0 : TEXT_BACKGROUND_PADDING,
+					padding: shouldShowBackground ? TEXT_BACKGROUND_PADDING : 0,
 					minWidth: 1,
 				}}
 				onInput={handleInput}
 				onBlur={onCommit}
-				onKeyDown={handleKeyDown}
+				onKeyDown={(event) => handleKeyDown({ event })}
 			>
 				{element.content || ""}
 			</div>
diff --git a/apps/web/src/components/editor/panels/preview/transform-handles.tsx b/apps/web/src/components/editor/panels/preview/transform-handles.tsx
index 976c3019..2fcf8096 100644
--- a/apps/web/src/components/editor/panels/preview/transform-handles.tsx
+++ b/apps/web/src/components/editor/panels/preview/transform-handles.tsx
@@ -23,7 +23,7 @@ const CORNERS: Corner[] = [
 	"bottom-right",
 ];
 
-function getCornerPosition({
+export function getCornerPosition({
 	bounds,
 	corner,
 }: {
@@ -47,7 +47,7 @@ function getCornerPosition({
 	};
 }
 
-function getRotationHandlePosition({ bounds }: { bounds: ElementBounds }): {
+export function getRotationHandlePosition({ bounds }: { bounds: ElementBounds }): {
 	x: number;
 	y: number;
 } {
@@ -61,7 +61,7 @@ function getRotationHandlePosition({ bounds }: { bounds: ElementBounds }): {
 	};
 }
 
-function getOverlayContext({
+export function getOverlayContext({
 	canvasRef,
 	containerRef,
 }: {
@@ -196,7 +196,7 @@ function BoundingBoxOutline({
 				height: outlineHeight,
 				transform: `rotate(${rotation}deg)`,
 				transformOrigin: "center center",
-				border: "1px solid white",
+				border: "1px dashed white",
 				boxSizing: "border-box",
 				opacity: 0.75,
 			}}