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

6 files changed, 370 insertions, 0 deletions

diff --git a/apps/web/src/lib/commands/timeline/element/effects/add-effect.ts b/apps/web/src/lib/commands/timeline/element/effects/add-effect.ts
new file mode 100644
index 00000000..5299749d
--- /dev/null
+++ b/apps/web/src/lib/commands/timeline/element/effects/add-effect.ts
@@ -0,0 +1,74 @@
+import { Command } from "@/lib/commands/base-command";
+import { EditorCore } from "@/core";
+import { isVisualElement, updateElementInTracks } from "@/lib/timeline";
+import type { TimelineTrack, VisualElement } from "@/types/timeline";
+import { buildDefaultEffectInstance } from "@/lib/effects";
+
+function addEffectToElement({
+	element,
+	effectType,
+}: {
+	element: VisualElement;
+	effectType: string;
+}): VisualElement {
+	const instance = buildDefaultEffectInstance({ effectType });
+	const currentEffects = element.effects ?? [];
+	return { ...element, effects: [...currentEffects, instance] };
+}
+
+export class AddClipEffectCommand extends Command {
+	private savedState: TimelineTrack[] | null = null;
+	private effectId: string | null = null;
+	private readonly trackId: string;
+	private readonly elementId: string;
+	private readonly effectType: string;
+
+	constructor({
+		trackId,
+		elementId,
+		effectType,
+	}: {
+		trackId: string;
+		elementId: string;
+		effectType: string;
+	}) {
+		super();
+		this.trackId = trackId;
+		this.elementId = elementId;
+		this.effectType = effectType;
+	}
+
+	execute(): void {
+		const editor = EditorCore.getInstance();
+		this.savedState = editor.timeline.getTracks();
+
+		const updatedTracks = updateElementInTracks({
+			tracks: this.savedState,
+			trackId: this.trackId,
+			elementId: this.elementId,
+			elementPredicate: isVisualElement,
+		update: (element) => {
+			const updated = addEffectToElement({
+				element: element as VisualElement,
+				effectType: this.effectType,
+			});
+				const effects = updated.effects ?? [];
+				this.effectId = effects[effects.length - 1]?.id ?? null;
+				return updated;
+			},
+		});
+
+		editor.timeline.updateTracks(updatedTracks);
+	}
+
+	undo(): void {
+		if (this.savedState) {
+			const editor = EditorCore.getInstance();
+			editor.timeline.updateTracks(this.savedState);
+		}
+	}
+
+	getEffectId(): string | null {
+		return this.effectId;
+	}
+}
diff --git a/apps/web/src/lib/commands/timeline/element/effects/index.ts b/apps/web/src/lib/commands/timeline/element/effects/index.ts
new file mode 100644
index 00000000..133ce661
--- /dev/null
+++ b/apps/web/src/lib/commands/timeline/element/effects/index.ts
@@ -0,0 +1,5 @@
+export { AddClipEffectCommand } from "./add-effect";
+export { RemoveClipEffectCommand } from "./remove-effect";
+export { ToggleClipEffectCommand } from "./toggle-effect";
+export { UpdateClipEffectParamsCommand } from "./update-effect-params";
+export { ReorderClipEffectsCommand } from "./reorder-effect";
diff --git a/apps/web/src/lib/commands/timeline/element/effects/remove-effect.ts b/apps/web/src/lib/commands/timeline/element/effects/remove-effect.ts
new file mode 100644
index 00000000..b475474f
--- /dev/null
+++ b/apps/web/src/lib/commands/timeline/element/effects/remove-effect.ts
@@ -0,0 +1,65 @@
+import { Command } from "@/lib/commands/base-command";
+import { EditorCore } from "@/core";
+import { isVisualElement, updateElementInTracks } from "@/lib/timeline";
+import type { TimelineTrack, VisualElement } from "@/types/timeline";
+
+function removeEffectFromElement({
+	element,
+	effectId,
+}: {
+	element: VisualElement;
+	effectId: string;
+}): VisualElement {
+	const currentEffects = element.effects ?? [];
+	const filtered = currentEffects.filter((effect) => effect.id !== effectId);
+	return { ...element, effects: filtered };
+}
+
+export class RemoveClipEffectCommand extends Command {
+	private savedState: TimelineTrack[] | null = null;
+	private readonly trackId: string;
+	private readonly elementId: string;
+	private readonly effectId: string;
+
+	constructor({
+		trackId,
+		elementId,
+		effectId,
+	}: {
+		trackId: string;
+		elementId: string;
+		effectId: string;
+	}) {
+		super();
+		this.trackId = trackId;
+		this.elementId = elementId;
+		this.effectId = effectId;
+	}
+
+	execute(): void {
+		const editor = EditorCore.getInstance();
+		this.savedState = editor.timeline.getTracks();
+
+		const updatedTracks = updateElementInTracks({
+			tracks: this.savedState,
+			trackId: this.trackId,
+			elementId: this.elementId,
+			elementPredicate: isVisualElement,
+		update: (element) => {
+			return removeEffectFromElement({
+				element: element as VisualElement,
+				effectId: this.effectId,
+			});
+			},
+		});
+
+		editor.timeline.updateTracks(updatedTracks);
+	}
+
+	undo(): void {
+		if (this.savedState) {
+			const editor = EditorCore.getInstance();
+			editor.timeline.updateTracks(this.savedState);
+		}
+	}
+}
diff --git a/apps/web/src/lib/commands/timeline/element/effects/reorder-effect.ts b/apps/web/src/lib/commands/timeline/element/effects/reorder-effect.ts
new file mode 100644
index 00000000..81c66503
--- /dev/null
+++ b/apps/web/src/lib/commands/timeline/element/effects/reorder-effect.ts
@@ -0,0 +1,73 @@
+import { Command } from "@/lib/commands/base-command";
+import { EditorCore } from "@/core";
+import { isVisualElement, updateElementInTracks } from "@/lib/timeline";
+import type { TimelineTrack, VisualElement } from "@/types/timeline";
+
+function reorderEffectsOnElement({
+	element,
+	fromIndex,
+	toIndex,
+}: {
+	element: VisualElement;
+	fromIndex: number;
+	toIndex: number;
+}): VisualElement {
+	const effects = [...(element.effects ?? [])];
+	const [moved] = effects.splice(fromIndex, 1);
+	effects.splice(toIndex, 0, moved);
+	return { ...element, effects };
+}
+
+export class ReorderClipEffectsCommand extends Command {
+	private savedState: TimelineTrack[] | null = null;
+	private readonly trackId: string;
+	private readonly elementId: string;
+	private readonly fromIndex: number;
+	private readonly toIndex: number;
+
+	constructor({
+		trackId,
+		elementId,
+		fromIndex,
+		toIndex,
+	}: {
+		trackId: string;
+		elementId: string;
+		fromIndex: number;
+		toIndex: number;
+	}) {
+		super();
+		this.trackId = trackId;
+		this.elementId = elementId;
+		this.fromIndex = fromIndex;
+		this.toIndex = toIndex;
+	}
+
+	execute(): void {
+		const editor = EditorCore.getInstance();
+		this.savedState = editor.timeline.getTracks();
+
+		const updatedTracks = updateElementInTracks({
+			tracks: this.savedState,
+			trackId: this.trackId,
+			elementId: this.elementId,
+			elementPredicate: isVisualElement,
+		update: (element) => {
+			return reorderEffectsOnElement({
+				element: element as VisualElement,
+				fromIndex: this.fromIndex,
+				toIndex: this.toIndex,
+			});
+			},
+		});
+
+		editor.timeline.updateTracks(updatedTracks);
+	}
+
+	undo(): void {
+		if (this.savedState) {
+			const editor = EditorCore.getInstance();
+			editor.timeline.updateTracks(this.savedState);
+		}
+	}
+}
diff --git a/apps/web/src/lib/commands/timeline/element/effects/toggle-effect.ts b/apps/web/src/lib/commands/timeline/element/effects/toggle-effect.ts
new file mode 100644
index 00000000..70bf955d
--- /dev/null
+++ b/apps/web/src/lib/commands/timeline/element/effects/toggle-effect.ts
@@ -0,0 +1,67 @@
+import { Command } from "@/lib/commands/base-command";
+import { EditorCore } from "@/core";
+import { isVisualElement, updateElementInTracks } from "@/lib/timeline";
+import type { TimelineTrack, VisualElement } from "@/types/timeline";
+
+export function toggleEffectOnElement({
+	element,
+	effectId,
+}: {
+	element: VisualElement;
+	effectId: string;
+}): VisualElement {
+	const currentEffects = element.effects ?? [];
+	const updated = currentEffects.map((effect) =>
+		effect.id === effectId ? { ...effect, enabled: !effect.enabled } : effect,
+	);
+	return { ...element, effects: updated };
+}
+
+export class ToggleClipEffectCommand extends Command {
+	private savedState: TimelineTrack[] | null = null;
+	private readonly trackId: string;
+	private readonly elementId: string;
+	private readonly effectId: string;
+
+	constructor({
+		trackId,
+		elementId,
+		effectId,
+	}: {
+		trackId: string;
+		elementId: string;
+		effectId: string;
+	}) {
+		super();
+		this.trackId = trackId;
+		this.elementId = elementId;
+		this.effectId = effectId;
+	}
+
+	execute(): void {
+		const editor = EditorCore.getInstance();
+		this.savedState = editor.timeline.getTracks();
+
+		const updatedTracks = updateElementInTracks({
+			tracks: this.savedState,
+			trackId: this.trackId,
+			elementId: this.elementId,
+			elementPredicate: isVisualElement,
+		update: (element) => {
+			return toggleEffectOnElement({
+				element: element as VisualElement,
+				effectId: this.effectId,
+			});
+			},
+		});
+
+		editor.timeline.updateTracks(updatedTracks);
+	}
+
+	undo(): void {
+		if (this.savedState) {
+			const editor = EditorCore.getInstance();
+			editor.timeline.updateTracks(this.savedState);
+		}
+	}
+}
diff --git a/apps/web/src/lib/commands/timeline/element/effects/update-effect-params.ts b/apps/web/src/lib/commands/timeline/element/effects/update-effect-params.ts
new file mode 100644
index 00000000..d9bf0aad
--- /dev/null
+++ b/apps/web/src/lib/commands/timeline/element/effects/update-effect-params.ts
@@ -0,0 +1,86 @@
+import { Command } from "@/lib/commands/base-command";
+import { EditorCore } from "@/core";
+import { isVisualElement, updateElementInTracks } from "@/lib/timeline";
+import type { EffectParamValues } from "@/types/effects";
+import type { TimelineTrack, VisualElement } from "@/types/timeline";
+
+function updateEffectParamsOnElement({
+	element,
+	effectId,
+	params,
+}: {
+	element: VisualElement;
+	effectId: string;
+	params: Partial<EffectParamValues>;
+}): VisualElement {
+	const currentEffects = element.effects ?? [];
+	const updated = currentEffects.map((effect) => {
+		if (effect.id !== effectId) {
+			return effect;
+		}
+
+		const nextParams = { ...effect.params };
+		for (const [key, value] of Object.entries(params)) {
+			if (value !== undefined) {
+				nextParams[key] = value;
+			}
+		}
+
+		return { ...effect, params: nextParams };
+	});
+	return { ...element, effects: updated };
+}
+
+export class UpdateClipEffectParamsCommand extends Command {
+	private savedState: TimelineTrack[] | null = null;
+	private readonly trackId: string;
+	private readonly elementId: string;
+	private readonly effectId: string;
+	private readonly params: Partial<EffectParamValues>;
+
+	constructor({
+		trackId,
+		elementId,
+		effectId,
+		params,
+	}: {
+		trackId: string;
+		elementId: string;
+		effectId: string;
+		params: Partial<EffectParamValues>;
+	}) {
+		super();
+		this.trackId = trackId;
+		this.elementId = elementId;
+		this.effectId = effectId;
+		this.params = params;
+	}
+
+	execute(): void {
+		const editor = EditorCore.getInstance();
+		this.savedState = editor.timeline.getTracks();
+
+		const updatedTracks = updateElementInTracks({
+			tracks: this.savedState,
+			trackId: this.trackId,
+			elementId: this.elementId,
+			elementPredicate: isVisualElement,
+		update: (element) => {
+			return updateEffectParamsOnElement({
+				element: element as VisualElement,
+				effectId: this.effectId,
+				params: this.params,
+			});
+			},
+		});
+
+		editor.timeline.updateTracks(updatedTracks);
+	}
+
+	undo(): void {
+		if (this.savedState) {
+			const editor = EditorCore.getInstance();
+			editor.timeline.updateTracks(this.savedState);
+		}
+	}
+}