feat: introduce WebGL effects system and Blur effect

This implements the foundational architecture for video effects, starting with a multi-pass WebGL rendering pipeline and a customizable Gaussian Blur effect.

Key changes:
- WebGL Engine: Added `raw-loader` for `.glsl` shaders, multi-pass framebuffer rendering, and live offscreen canvas previews.
- Node Architecture: Replaced hardcoded background blur with `CompositeEffectNode` and added `EffectLayerNode` to apply effects to specific visual elements.
- Timeline & DND: Added a new `effect` track type. Upgraded drag-and-drop to support dropping effects directly onto the timeline. Consolidated track constants into a cleaner `TRACK_CONFIG`.
- UI/UX: Added an Effects tab in the assets panel with live previews. Added an Effect Properties panel with sliders and inputs for fine-tuning parameters.
- Data Model: Added `sourceDuration` to video and audio elements, and wrote a v8 storage migration to update existing projects to the new schema.
- Docs: Added `CHANGELOG.md` tracking v0.1.0 and v0.2.0, plus `docs/effects-renderer.md` to document the new WebGL pipeline.

apps/web/src/services/storage/migrations/index.ts

@@ -6,10 +6,11 @@ import { V3toV4Migration } from "./v3-to-v4";
 import { V4toV5Migration } from "./v4-to-v5";
 import { V5toV6Migration } from "./v5-to-v6";
 import { V6toV7Migration } from "./v6-to-v7";
+import { V7toV8Migration } from "./v7-to-v8";
 export { runStorageMigrations } from "./runner";
 export type { MigrationProgress } from "./runner";
 
-export const CURRENT_PROJECT_VERSION = 7;
+export const CURRENT_PROJECT_VERSION = 8;
 
 export const migrations = [
 	new V0toV1Migration(),
@@ -19,4 +20,5 @@ export const migrations = [
 	new V4toV5Migration(),
 	new V5toV6Migration(),
 	new V6toV7Migration(),
+	new V7toV8Migration(),
 ];

apps/web/src/services/storage/migrations/transformers/v7-to-v8.ts

@@ -0,0 +1,96 @@
+import type { MigrationResult, ProjectRecord } from "./types";
+import { getProjectId, isRecord } from "./utils";
+
+export function transformProjectV7ToV8({
+	project,
+}: {
+	project: ProjectRecord;
+}): MigrationResult<ProjectRecord> {
+	const projectId = getProjectId({ project });
+	if (!projectId) {
+		return { project, skipped: true, reason: "no project id" };
+	}
+
+	if (isV8Project({ project })) {
+		return { project, skipped: true, reason: "already v8" };
+	}
+
+	const migratedProject = migrateProjectElements({ project });
+
+	return {
+		project: { ...migratedProject, version: 8 },
+		skipped: false,
+	};
+}
+
+function migrateProjectElements({
+	project,
+}: {
+	project: ProjectRecord;
+}): ProjectRecord {
+	const scenesValue = project.scenes;
+	if (!Array.isArray(scenesValue)) return project;
+
+	let hasChanges = false;
+	const migratedScenes = scenesValue.map((scene) => {
+		const migrated = migrateSceneElements({ scene });
+		if (migrated !== scene) hasChanges = true;
+		return migrated;
+	});
+
+	if (!hasChanges) return project;
+	return { ...project, scenes: migratedScenes };
+}
+
+function migrateSceneElements({ scene }: { scene: unknown }): unknown {
+	if (!isRecord(scene)) return scene;
+
+	const tracksValue = scene.tracks;
+	if (!Array.isArray(tracksValue)) return scene;
+
+	let hasChanges = false;
+	const migratedTracks = tracksValue.map((track) => {
+		const migrated = migrateTrackElements({ track });
+		if (migrated !== track) hasChanges = true;
+		return migrated;
+	});
+
+	if (!hasChanges) return scene;
+	return { ...scene, tracks: migratedTracks };
+}
+
+function migrateTrackElements({ track }: { track: unknown }): unknown {
+	if (!isRecord(track)) return track;
+
+	const elementsValue = track.elements;
+	if (!Array.isArray(elementsValue)) return track;
+
+	let hasChanges = false;
+	const migratedElements = elementsValue.map((element) => {
+		const migrated = migrateElement({ element });
+		if (migrated !== element) hasChanges = true;
+		return migrated;
+	});
+
+	if (!hasChanges) return track;
+	return { ...track, elements: migratedElements };
+}
+
+function migrateElement({ element }: { element: unknown }): unknown {
+	if (!isRecord(element)) return element;
+	if (element.type !== "video" && element.type !== "audio") return element;
+	if (typeof element.sourceDuration === "number") return element;
+
+	const trimStart = typeof element.trimStart === "number" ? element.trimStart : 0;
+	const duration = typeof element.duration === "number" ? element.duration : 0;
+	const trimEnd = typeof element.trimEnd === "number" ? element.trimEnd : 0;
+
+	return {
+		...element,
+		sourceDuration: trimStart + duration + trimEnd,
+	};
+}
+
+function isV8Project({ project }: { project: ProjectRecord }): boolean {
+	return typeof project.version === "number" && project.version >= 8;
+}

apps/web/src/services/storage/migrations/v7-to-v8.ts

@@ -0,0 +1,16 @@
+import { StorageMigration } from "./base";
+import type { ProjectRecord } from "./transformers/types";
+import { transformProjectV7ToV8 } from "./transformers/v7-to-v8";
+
+export class V7toV8Migration extends StorageMigration {
+	from = 7;
+	to = 8;
+
+	async transform(project: ProjectRecord): Promise<{
+		project: ProjectRecord;
+		skipped: boolean;
+		reason?: string;
+	}> {
+		return transformProjectV7ToV8({ project });
+	}
+}