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

1 files changed, 33 insertions, 11 deletions

diff --git a/apps/web/src/stores/assets-panel-store.tsx b/apps/web/src/stores/assets-panel-store.tsx
index 21ceb6a3..35466573 100644
--- a/apps/web/src/stores/assets-panel-store.tsx
+++ b/apps/web/src/stores/assets-panel-store.tsx
@@ -1,5 +1,6 @@
 import type { ElementType } from "react";
 import { create } from "zustand";
+import { persist } from "zustand/middleware";
 import {
 	ArrowRightDoubleIcon,
 	ClosedCaptionIcon,
@@ -81,7 +82,9 @@ export const tabs = {
 	{ icon: ElementType<{ className?: string }>; label: string }
 >;
 
-type MediaViewMode = "grid" | "list";
+export type MediaViewMode = "grid" | "list";
+export type MediaSortKey = "name" | "type" | "duration" | "size";
+export type MediaSortOrder = "asc" | "desc";
 
 interface AssetsPanelStore {
 	activeTab: Tab;
@@ -93,15 +96,34 @@ interface AssetsPanelStore {
 	/* Media */
 	mediaViewMode: MediaViewMode;
 	setMediaViewMode: (mode: MediaViewMode) => void;
+	mediaSortBy: MediaSortKey;
+	mediaSortOrder: MediaSortOrder;
+	setMediaSort: (key: MediaSortKey, order: MediaSortOrder) => void;
 }
 
-export const useAssetsPanelStore = create<AssetsPanelStore>((set) => ({
-	activeTab: "media",
-	setActiveTab: (tab) => set({ activeTab: tab }),
-	highlightMediaId: null,
-	requestRevealMedia: (mediaId) =>
-		set({ activeTab: "media", highlightMediaId: mediaId }),
-	clearHighlight: () => set({ highlightMediaId: null }),
-	mediaViewMode: "grid",
-	setMediaViewMode: (mode) => set({ mediaViewMode: mode }),
-}));
+export const useAssetsPanelStore = create<AssetsPanelStore>()(
+	persist(
+		(set) => ({
+			activeTab: "media",
+			setActiveTab: (tab) => set({ activeTab: tab }),
+			highlightMediaId: null,
+			requestRevealMedia: (mediaId) =>
+				set({ activeTab: "media", highlightMediaId: mediaId }),
+			clearHighlight: () => set({ highlightMediaId: null }),
+			mediaViewMode: "grid",
+			setMediaViewMode: (mode) => set({ mediaViewMode: mode }),
+			mediaSortBy: "name",
+			mediaSortOrder: "asc",
+			setMediaSort: (key, order) =>
+				set({ mediaSortBy: key, mediaSortOrder: order }),
+		}),
+		{
+			name: "assets-panel",
+			partialize: (state) => ({
+				mediaViewMode: state.mediaViewMode,
+				mediaSortBy: state.mediaSortBy,
+				mediaSortOrder: state.mediaSortOrder,
+			}),
+		},
+	),
+);