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

4 files changed, 56 insertions, 24 deletions

diff --git a/apps/web/src/types/animation.ts b/apps/web/src/types/animation.ts
index b9ca91af..3985c5b2 100644
--- a/apps/web/src/types/animation.ts
+++ b/apps/web/src/types/animation.ts
@@ -13,12 +13,10 @@ export type AnimationValueKind = "number" | "color" | "discrete";
 export type DiscreteValue = boolean | string;
 export type AnimationValue = number | string | boolean;
 
-export type NumberKeyframeInterpolation = "linear" | "hold";
-export type ColorKeyframeInterpolation = "linear" | "hold";
+export type ContinuousKeyframeInterpolation = "linear" | "hold";
 export type DiscreteKeyframeInterpolation = "hold";
 export type AnimationInterpolation =
-	| NumberKeyframeInterpolation
-	| ColorKeyframeInterpolation
+	| ContinuousKeyframeInterpolation
 	| DiscreteKeyframeInterpolation;
 
 interface BaseAnimationKeyframe<
@@ -32,15 +30,18 @@ interface BaseAnimationKeyframe<
 }
 
 export interface NumberKeyframe
-	extends BaseAnimationKeyframe<number, NumberKeyframeInterpolation> {}
+	extends BaseAnimationKeyframe<number, ContinuousKeyframeInterpolation> {}
 
 export interface ColorKeyframe
-	extends BaseAnimationKeyframe<string, ColorKeyframeInterpolation> {}
+	extends BaseAnimationKeyframe<string, ContinuousKeyframeInterpolation> {}
 
 export interface DiscreteKeyframe
 	extends BaseAnimationKeyframe<DiscreteValue, DiscreteKeyframeInterpolation> {}
 
-export type AnimationKeyframe = NumberKeyframe | ColorKeyframe | DiscreteKeyframe;
+export type AnimationKeyframe =
+	| NumberKeyframe
+	| ColorKeyframe
+	| DiscreteKeyframe;
 
 interface BaseAnimationChannel<
 	TValueKind extends AnimationValueKind,
diff --git a/apps/web/src/types/effects.ts b/apps/web/src/types/effects.ts
index cc369450..6c96dfb2 100644
--- a/apps/web/src/types/effects.ts
+++ b/apps/web/src/types/effects.ts
@@ -9,17 +9,41 @@ export type EffectParamType = "number" | "boolean" | "select" | "color";
 
 export type EffectParamValues = Record<string, number | string | boolean>;
 
-export interface EffectParamDefinition {
+interface BaseEffectParamDefinition {
 	key: string;
 	label: string;
-	type: EffectParamType;
-	default: number | string | boolean;
-	min?: number;
-	max?: number;
-	step?: number;
-	options?: Array<{ value: string; label: string }>;
 }
 
+export interface NumberEffectParamDefinition extends BaseEffectParamDefinition {
+	type: "number";
+	default: number;
+	min: number;
+	max: number;
+	step: number;
+}
+
+interface BooleanEffectParamDefinition extends BaseEffectParamDefinition {
+	type: "boolean";
+	default: boolean;
+}
+
+interface SelectEffectParamDefinition extends BaseEffectParamDefinition {
+	type: "select";
+	default: string;
+	options: Array<{ value: string; label: string }>;
+}
+
+interface ColorEffectParamDefinition extends BaseEffectParamDefinition {
+	type: "color";
+	default: string;
+}
+
+export type EffectParamDefinition =
+	| NumberEffectParamDefinition
+	| BooleanEffectParamDefinition
+	| SelectEffectParamDefinition
+	| ColorEffectParamDefinition;
+
 export interface WebGLEffectPass {
 	fragmentShader: string;
 	uniforms(params: {
diff --git a/apps/web/src/types/export.ts b/apps/web/src/types/export.ts
index 351f5fc4..2c2408d8 100644
--- a/apps/web/src/types/export.ts
+++ b/apps/web/src/types/export.ts
@@ -15,8 +15,6 @@ export interface ExportOptions {
 	quality: ExportQuality;
 	fps?: number;
 	includeAudio?: boolean;
-	onProgress?: ({ progress }: { progress: number }) => void;
-	onCancel?: () => boolean;
 }
 
 export interface ExportResult {
@@ -25,3 +23,9 @@ export interface ExportResult {
 	error?: string;
 	cancelled?: boolean;
 }
+
+export interface ExportState {
+	isExporting: boolean;
+	progress: number;
+	result: ExportResult | null;
+}
diff --git a/apps/web/src/types/timeline.ts b/apps/web/src/types/timeline.ts
index 0c138f56..15696b34 100644
--- a/apps/web/src/types/timeline.ts
+++ b/apps/web/src/types/timeline.ts
@@ -118,20 +118,23 @@ export interface ImageElement extends BaseTimelineElement {
 	effects?: Effect[];
 }
 
+export interface TextBackground {
+	enabled: boolean;
+	color: string;
+	cornerRadius?: number;
+	paddingX?: number;
+	paddingY?: number;
+	offsetX?: number;
+	offsetY?: number;
+}
+
 export interface TextElement extends BaseTimelineElement {
 	type: "text";
 	content: string;
 	fontSize: number;
 	fontFamily: string;
 	color: string;
-	background: {
-		color: string;
-		cornerRadius?: number;
-		paddingX?: number;
-		paddingY?: number;
-		offsetX?: number;
-		offsetY?: number;
-	};
+	background: TextBackground;
 	textAlign: "left" | "center" | "right";
 	fontWeight: "normal" | "bold";
 	fontStyle: "normal" | "italic";