feat: masks, properties refactor, shaders, storage migrations, and more

14 files changed, 1088 insertions, 30 deletions

diff --git a/apps/web/src/services/storage/migrations/transformers/index.ts b/apps/web/src/services/storage/migrations/transformers/index.ts
index 8878d6ba..c1ae894f 100644
--- a/apps/web/src/services/storage/migrations/transformers/index.ts
+++ b/apps/web/src/services/storage/migrations/transformers/index.ts
@@ -3,4 +3,5 @@ export { transformProjectV1ToV2 } from "./v1-to-v2";
 export { transformProjectV2ToV3 } from "./v2-to-v3";
 export { transformProjectV3ToV4 } from "./v3-to-v4";
 export { transformProjectV4ToV5 } from "./v4-to-v5";
+export { transformProjectV17ToV18 } from "./v17-to-v18";
 export type { MigrationResult, ProjectRecord } from "./types";
diff --git a/apps/web/src/services/storage/migrations/transformers/v0-to-v1.ts b/apps/web/src/services/storage/migrations/transformers/v0-to-v1.ts
index a26feb3b..b1fcf00b 100644
--- a/apps/web/src/services/storage/migrations/transformers/v0-to-v1.ts
+++ b/apps/web/src/services/storage/migrations/transformers/v0-to-v1.ts
@@ -1,8 +1,17 @@
 import { generateUUID } from "@/utils/id";
-import type { SerializedScene } from "@/services/storage/types";
 import type { MigrationResult, ProjectRecord } from "./types";
 import { isRecord } from "./utils";
 
+interface V1Scene {
+	id: string;
+	name: string;
+	isMain: boolean;
+	tracks: unknown[];
+	bookmarks: unknown[];
+	createdAt: string;
+	updatedAt: string;
+}
+
 export interface TransformV0ToV1Options {
 	now?: Date;
 }
@@ -25,7 +34,7 @@ export function transformProjectV0ToV1({
 	const sceneCreatedAt = now.toISOString();
 	const sceneUpdatedAt = now.toISOString();
 
-	const mainScene: SerializedScene = {
+	const mainScene: V1Scene = {
 		id: sceneId,
 		name: "Main scene",
 		isMain: true,
diff --git a/apps/web/src/services/storage/migrations/transformers/v1-to-v2.ts b/apps/web/src/services/storage/migrations/transformers/v1-to-v2.ts
index 297d1c58..52701cd5 100644
--- a/apps/web/src/services/storage/migrations/transformers/v1-to-v2.ts
+++ b/apps/web/src/services/storage/migrations/transformers/v1-to-v2.ts
@@ -6,14 +6,6 @@ import {
 } from "@/constants/project-constants";
 import { IndexedDBAdapter } from "@/services/storage/indexeddb-adapter";
 import type { MediaAssetData } from "@/services/storage/types";
-import type {
-	AudioElement,
-	ImageElement,
-	TextElement,
-	TimelineTrack,
-	Transform,
-	VideoElement,
-} from "@/types/timeline";
 import type { MigrationResult, ProjectRecord } from "./types";
 import { getProjectId, isRecord } from "./utils";
 
@@ -50,6 +42,112 @@ interface LegacyMediaTrack {
 	[key: string]: unknown;
 }
 
+interface V2Transform {
+	scale: number;
+	position: { x: number; y: number };
+	rotate: number;
+}
+
+interface V2VideoElement {
+	id: string;
+	name: string;
+	type: "video";
+	mediaId: string;
+	muted: boolean;
+	hidden: boolean;
+	transform: V2Transform;
+	opacity: number;
+	duration: number;
+	startTime: number;
+	trimStart: number;
+	trimEnd: number;
+}
+
+interface V2ImageElement {
+	id: string;
+	name: string;
+	type: "image";
+	mediaId: string;
+	duration: number;
+	startTime: number;
+	trimStart: number;
+	trimEnd: number;
+	hidden: boolean;
+	transform: V2Transform;
+	opacity: number;
+}
+
+interface V2TextElement {
+	id: string;
+	name: string;
+	type: "text";
+	content: string;
+	fontSize: number;
+	fontFamily: string;
+	color: string;
+	background: {
+		enabled: boolean;
+		color: string;
+		cornerRadius: number;
+		paddingX: number;
+		paddingY: number;
+		offsetX: number;
+		offsetY: number;
+	};
+	textAlign: "left" | "center" | "right";
+	fontWeight: "normal" | "bold";
+	fontStyle: "normal" | "italic";
+	textDecoration: "none" | "underline" | "line-through";
+	hidden: boolean;
+	transform: V2Transform;
+	opacity: number;
+	duration: number;
+	startTime: number;
+	trimStart: number;
+	trimEnd: number;
+}
+
+interface V2AudioElement {
+	id: string;
+	name: string;
+	type: "audio";
+	sourceType: "upload";
+	mediaId: string;
+	volume: number;
+	duration: number;
+	startTime: number;
+	trimStart: number;
+	trimEnd: number;
+}
+
+interface V2VideoTrack {
+	id: string;
+	name: string;
+	type: "video";
+	elements: (V2VideoElement | V2ImageElement)[];
+	isMain: boolean;
+	muted: boolean;
+	hidden: boolean;
+}
+
+interface V2TextTrack {
+	id: string;
+	name: string;
+	type: "text";
+	elements: V2TextElement[];
+	hidden: boolean;
+}
+
+interface V2AudioTrack {
+	id: string;
+	name: string;
+	type: "audio";
+	elements: V2AudioElement[];
+	muted: boolean;
+}
+
+type V2TimelineTrack = V2VideoTrack | V2TextTrack | V2AudioTrack;
+
 export interface TransformV1ToV2Options {
 	loadMediaAsset?: ({
 		mediaId,
@@ -259,13 +357,13 @@ async function transformTracks({
 	}: {
 		mediaId: string;
 	}) => Promise<MediaAssetData | null>;
-}): Promise<TimelineTrack[]> {
+}): Promise<V2TimelineTrack[]> {
 	if (!Array.isArray(tracks)) {
 		return [];
 	}
 
 	let isFirstVideoTrackFound = false;
-	const transformedTracks: (TimelineTrack | null)[] = [];
+	const transformedTracks: (V2TimelineTrack | null)[] = [];
 
 	for (const track of tracks) {
 		if (!isRecord(track)) {
@@ -299,7 +397,7 @@ async function transformTracks({
 	}
 
 	return transformedTracks.filter(
-		(track): track is TimelineTrack => track !== null,
+		(track): track is V2TimelineTrack => track !== null,
 	);
 }
 
@@ -315,7 +413,7 @@ async function transformMediaTrack({
 		mediaId: string;
 	}) => Promise<MediaAssetData | null>;
 	isMain: boolean;
-}): Promise<TimelineTrack> {
+}): Promise<V2VideoTrack> {
 	const elements = Array.isArray(track.elements) ? track.elements : [];
 
 	const transformedElements = await Promise.all(
@@ -338,7 +436,7 @@ async function transformMediaTrack({
 				}
 			}
 
-			const defaultTransform: Transform = {
+			const defaultTransform: V2Transform = {
 				scale: 1,
 				position: { x: 0, y: 0 },
 				rotate: 0,
@@ -347,7 +445,7 @@ async function transformMediaTrack({
 			const muted = mediaElement.muted === true;
 
 			if (mediaType === "image") {
-				const imageElement: ImageElement = {
+				const imageElement: V2ImageElement = {
 					id: getStringValue({ value: element.id, fallback: "" }),
 					name: getStringValue({ value: element.name, fallback: "" }),
 					type: "image",
@@ -369,7 +467,7 @@ async function transformMediaTrack({
 				return imageElement;
 			}
 
-			const videoElement: VideoElement = {
+			const videoElement: V2VideoElement = {
 				id: getStringValue({ value: element.id, fallback: "" }),
 				name: getStringValue({ value: element.name, fallback: "" }),
 				type: "video",
@@ -388,7 +486,7 @@ async function transformMediaTrack({
 	);
 
 	const validElements = transformedElements.filter(
-		(element): element is VideoElement | ImageElement => element !== null,
+		(element): element is V2VideoElement | V2ImageElement => element !== null,
 	);
 
 	return {
@@ -406,11 +504,11 @@ function transformTextTrack({
 	track,
 }: {
 	track: Record<string, unknown>;
-}): TimelineTrack {
+}): V2TextTrack {
 	const elements = Array.isArray(track.elements) ? track.elements : [];
 
 	const transformedElements = elements
-		.map((element): TextElement | null => {
+		.map((element): V2TextElement | null => {
 			if (!isRecord(element) || element.type !== "text") {
 				return null;
 			}
@@ -427,7 +525,7 @@ function transformTextTrack({
 				fallback: 1,
 			});
 
-			const transform: Transform = {
+			const transform: V2Transform = {
 				scale: 1,
 				position: { x, y },
 				rotate: rotation,
@@ -487,7 +585,7 @@ function transformTextTrack({
 				trimEnd: getNumberValue({ value: element.trimEnd, fallback: 0 }),
 			};
 		})
-		.filter((element): element is TextElement => element !== null);
+		.filter((element): element is V2TextElement => element !== null);
 
 	return {
 		id: getStringValue({ value: track.id, fallback: "" }),
@@ -502,11 +600,11 @@ function transformAudioTrack({
 	track,
 }: {
 	track: Record<string, unknown>;
-}): TimelineTrack {
+}): V2AudioTrack {
 	const elements = Array.isArray(track.elements) ? track.elements : [];
 
 	const transformedElements = elements
-		.map((element): AudioElement | null => {
+		.map((element): V2AudioElement | null => {
 			if (!isRecord(element) || element.type !== "audio") {
 				return null;
 			}
@@ -530,7 +628,7 @@ function transformAudioTrack({
 				trimEnd: getNumberValue({ value: element.trimEnd, fallback: 0 }),
 			};
 		})
-		.filter((element): element is AudioElement => element !== null);
+		.filter((element): element is V2AudioElement => element !== null);
 
 	return {
 		id: getStringValue({ value: track.id, fallback: "" }),
diff --git a/apps/web/src/services/storage/migrations/transformers/v10-to-v11.ts b/apps/web/src/services/storage/migrations/transformers/v10-to-v11.ts
new file mode 100644
index 00000000..b48f5e88
--- /dev/null
+++ b/apps/web/src/services/storage/migrations/transformers/v10-to-v11.ts
@@ -0,0 +1,113 @@
+import type { MigrationResult, ProjectRecord } from "./types";
+import { getProjectId, isRecord } from "./utils";
+
+export function transformProjectV10ToV11({
+	project,
+}: {
+	project: ProjectRecord;
+}): MigrationResult<ProjectRecord> {
+	if (!getProjectId({ project })) {
+		return { project, skipped: true, reason: "no project id" };
+	}
+
+	if (typeof project.version === "number" && project.version >= 11) {
+		return { project, skipped: true, reason: "already v11" };
+	}
+
+	const migratedProject = migrateProjectScale({ project });
+
+	return {
+		project: { ...migratedProject, version: 11 },
+		skipped: false,
+	};
+}
+
+function migrateProjectScale({
+	project,
+}: {
+	project: ProjectRecord;
+}): ProjectRecord {
+	const scenesValue = project.scenes;
+	if (!Array.isArray(scenesValue)) return project;
+
+	const migratedScenes = scenesValue.map((scene) =>
+		migrateSceneScale({ scene }),
+	);
+
+	return { ...project, scenes: migratedScenes };
+}
+
+function migrateSceneScale({ scene }: { scene: unknown }): unknown {
+	if (!isRecord(scene)) return scene;
+
+	const tracksValue = scene.tracks;
+	if (!Array.isArray(tracksValue)) return scene;
+
+	const migratedTracks = tracksValue.map((track) =>
+		migrateTrackScale({ track }),
+	);
+
+	return { ...scene, tracks: migratedTracks };
+}
+
+function migrateTrackScale({ track }: { track: unknown }): unknown {
+	if (!isRecord(track)) return track;
+
+	const elementsValue = track.elements;
+	if (!Array.isArray(elementsValue)) return track;
+
+	const migratedElements = elementsValue.map((element) =>
+		migrateElementScale({ element }),
+	);
+
+	return { ...track, elements: migratedElements };
+}
+
+function migrateElementScale({ element }: { element: unknown }): unknown {
+	if (!isRecord(element)) return element;
+
+	const transform = element.transform;
+	if (!isRecord(transform)) return element;
+
+	const scale = transform.scale;
+	if (typeof scale !== "number") return element;
+
+	const migratedTransform = {
+		...transform,
+		scaleX: scale,
+		scaleY: scale,
+	};
+	delete (migratedTransform as Record<string, unknown>).scale;
+
+	let migratedElement: ProjectRecord = {
+		...element,
+		transform: migratedTransform,
+	};
+
+	const animations = element.animations;
+	if (isRecord(animations) && isRecord(animations.channels)) {
+		const channels = animations.channels as Record<string, unknown>;
+		const scaleChannel = channels["transform.scale"];
+		if (scaleChannel && isRecord(scaleChannel)) {
+			const keyframes = (scaleChannel as { keyframes?: unknown[] }).keyframes;
+			if (Array.isArray(keyframes)) {
+				const newChannels = { ...channels };
+				delete newChannels["transform.scale"];
+				newChannels["transform.scaleX"] = {
+					...scaleChannel,
+					keyframes: [...keyframes],
+				};
+				newChannels["transform.scaleY"] = {
+					...scaleChannel,
+					keyframes: keyframes.map((kf) => (isRecord(kf) ? { ...kf } : kf)),
+				};
+				migratedElement = {
+					...migratedElement,
+					animations: { ...animations, channels: newChannels },
+				};
+			}
+		}
+	}
+
+	return migratedElement;
+}
diff --git a/apps/web/src/services/storage/migrations/transformers/v11-to-v12.ts b/apps/web/src/services/storage/migrations/transformers/v11-to-v12.ts
new file mode 100644
index 00000000..fa1bd371
--- /dev/null
+++ b/apps/web/src/services/storage/migrations/transformers/v11-to-v12.ts
@@ -0,0 +1,196 @@
+import type { MigrationResult, ProjectRecord } from "./types";
+import { getProjectId, isRecord } from "./utils";
+
+export function transformProjectV11ToV12({
+	project,
+}: {
+	project: ProjectRecord;
+}): MigrationResult<ProjectRecord> {
+	if (!getProjectId({ project })) {
+		return { project, skipped: true, reason: "no project id" };
+	}
+
+	if (typeof project.version === "number" && project.version >= 12) {
+		return { project, skipped: true, reason: "already v12" };
+	}
+
+	const migratedProject = migrateProjectPosition({ project });
+
+	return {
+		project: { ...migratedProject, version: 12 },
+		skipped: false,
+	};
+}
+
+function migrateProjectPosition({
+	project,
+}: {
+	project: ProjectRecord;
+}): ProjectRecord {
+	const scenesValue = project.scenes;
+	if (!Array.isArray(scenesValue)) return project;
+
+	const migratedScenes = scenesValue.map((scene) =>
+		migrateScenePosition({ scene }),
+	);
+
+	return { ...project, scenes: migratedScenes };
+}
+
+function migrateScenePosition({ scene }: { scene: unknown }): unknown {
+	if (!isRecord(scene)) return scene;
+
+	const tracksValue = scene.tracks;
+	if (!Array.isArray(tracksValue)) return scene;
+
+	const migratedTracks = tracksValue.map((track) =>
+		migrateTrackPosition({ track }),
+	);
+
+	return { ...scene, tracks: migratedTracks };
+}
+
+function migrateTrackPosition({ track }: { track: unknown }): unknown {
+	if (!isRecord(track)) return track;
+
+	const elementsValue = track.elements;
+	if (!Array.isArray(elementsValue)) return track;
+
+	const migratedElements = elementsValue.map((element) =>
+		migrateElementPosition({ element }),
+	);
+
+	return { ...track, elements: migratedElements };
+}
+
+function migrateElementPosition({ element }: { element: unknown }): unknown {
+	if (!isRecord(element)) return element;
+
+	const animations = element.animations;
+	if (!isRecord(animations) || !isRecord(animations.channels)) return element;
+
+	const channels = animations.channels as Record<string, unknown>;
+	const xChannel = channels["transform.position.x"];
+	const yChannel = channels["transform.position.y"];
+
+	if (!xChannel && !yChannel) return element;
+
+	const baseTransform = isRecord(element.transform) ? element.transform : {};
+	const basePosition = isRecord(baseTransform.position)
+		? baseTransform.position
+		: {};
+	const baseX = typeof basePosition.x === "number" ? basePosition.x : 0;
+	const baseY = typeof basePosition.y === "number" ? basePosition.y : 0;
+
+	const xKeyframes = getKeyframes({ channel: xChannel });
+	const yKeyframes = getKeyframes({ channel: yChannel });
+
+	const allTimes = Array.from(
+		new Set([
+			...xKeyframes.map((kf) => kf.time),
+			...yKeyframes.map((kf) => kf.time),
+		]),
+	).sort((a, b) => a - b);
+
+	const vectorKeyframes = allTimes.map((time) => {
+		const xKf = xKeyframes.find((kf) => Math.abs(kf.time - time) < 0.001);
+		const yKf = yKeyframes.find((kf) => Math.abs(kf.time - time) < 0.001);
+		const x =
+			typeof xKf?.value === "number"
+				? xKf.value
+				: interpolateScalarAtTime({
+						keyframes: xKeyframes,
+						time,
+						fallback: baseX,
+					});
+		const y =
+			typeof yKf?.value === "number"
+				? yKf.value
+				: interpolateScalarAtTime({
+						keyframes: yKeyframes,
+						time,
+						fallback: baseY,
+					});
+		const interpolation = xKf?.interpolation ?? yKf?.interpolation ?? "linear";
+		return {
+			id: xKf?.id ?? yKf?.id ?? crypto.randomUUID(),
+			time,
+			value: { x, y },
+			interpolation,
+		};
+	});
+
+	const newChannels = { ...channels };
+	delete newChannels["transform.position.x"];
+	delete newChannels["transform.position.y"];
+	newChannels["transform.position"] = {
+		valueKind: "vector",
+		keyframes: vectorKeyframes,
+	};
+
+	return {
+		...element,
+		animations: { ...animations, channels: newChannels },
+	};
+}
+
+interface ScalarKeyframe {
+	id: string;
+	time: number;
+	value: number;
+	interpolation: string;
+}
+
+function getKeyframes({ channel }: { channel: unknown }): ScalarKeyframe[] {
+	if (!isRecord(channel)) return [];
+	if (!Array.isArray(channel.keyframes)) return [];
+	return channel.keyframes.flatMap((kf) => {
+		if (!isRecord(kf)) return [];
+		if (
+			typeof kf.id !== "string" ||
+			typeof kf.time !== "number" ||
+			typeof kf.value !== "number"
+		)
+			return [];
+		return [
+			{
+				id: kf.id,
+				time: kf.time,
+				value: kf.value,
+				interpolation:
+					typeof kf.interpolation === "string" ? kf.interpolation : "linear",
+			},
+		];
+	});
+}
+
+function interpolateScalarAtTime({
+	keyframes,
+	time,
+	fallback,
+}: {
+	keyframes: ScalarKeyframe[];
+	time: number;
+	fallback: number;
+}): number {
+	if (keyframes.length === 0) return fallback;
+
+	const sorted = [...keyframes].sort((a, b) => a.time - b.time);
+	const first = sorted[0];
+	const last = sorted[sorted.length - 1];
+
+	if (!first || !last) return fallback;
+	if (time <= first.time) return first.value;
+	if (time >= last.time) return last.value;
+
+	for (let i = 0; i < sorted.length - 1; i++) {
+		const left = sorted[i];
+		const right = sorted[i + 1];
+		if (time < left.time || time > right.time) continue;
+		if (left.interpolation === "hold") return left.value;
+		const t = (time - left.time) / (right.time - left.time);
+		return left.value + (right.value - left.value) * t;
+	}
+
+	return last.value;
+}
diff --git a/apps/web/src/services/storage/migrations/transformers/v12-to-v13.ts b/apps/web/src/services/storage/migrations/transformers/v12-to-v13.ts
new file mode 100644
index 00000000..59b29732
--- /dev/null
+++ b/apps/web/src/services/storage/migrations/transformers/v12-to-v13.ts
@@ -0,0 +1,102 @@
+import type { MigrationResult, ProjectRecord } from "./types";
+import { getProjectId, isRecord } from "./utils";
+
+export function transformProjectV12ToV13({
+	project,
+}: {
+	project: ProjectRecord;
+}): MigrationResult<ProjectRecord> {
+	if (!getProjectId({ project })) {
+		return { project, skipped: true, reason: "no project id" };
+	}
+
+	if (typeof project.version === "number" && project.version >= 13) {
+		return { project, skipped: true, reason: "already v13" };
+	}
+
+	const migratedProject = migrateProjectMasks({ project });
+
+	return {
+		project: { ...migratedProject, version: 13 },
+		skipped: false,
+	};
+}
+
+function migrateProjectMasks({
+	project,
+}: {
+	project: ProjectRecord;
+}): ProjectRecord {
+	const scenesValue = project.scenes;
+	if (!Array.isArray(scenesValue)) return project;
+
+	const migratedScenes = scenesValue.map((scene) =>
+		migrateSceneMasks({ scene }),
+	);
+
+	return { ...project, scenes: migratedScenes };
+}
+
+function migrateSceneMasks({ scene }: { scene: unknown }): unknown {
+	if (!isRecord(scene)) return scene;
+
+	const tracksValue = scene.tracks;
+	if (!Array.isArray(tracksValue)) return scene;
+
+	const migratedTracks = tracksValue.map((track) =>
+		migrateTrackMasks({ track }),
+	);
+
+	return { ...scene, tracks: migratedTracks };
+}
+
+function migrateTrackMasks({ track }: { track: unknown }): unknown {
+	if (!isRecord(track)) return track;
+
+	const elementsValue = track.elements;
+	if (!Array.isArray(elementsValue)) return track;
+
+	const migratedElements = elementsValue.map((element) =>
+		migrateElementMasks({ element }),
+	);
+
+	return { ...track, elements: migratedElements };
+}
+
+function migrateElementMasks({ element }: { element: unknown }): unknown {
+	if (!isRecord(element)) return element;
+
+	const masksValue = element.masks;
+	if (!Array.isArray(masksValue)) return element;
+
+	const migratedMasks = masksValue.map((mask) => migrateMask({ mask }));
+
+	return { ...element, masks: migratedMasks };
+}
+
+function migrateMask({ mask }: { mask: unknown }): unknown {
+	if (!isRecord(mask)) return mask;
+
+	const params = isRecord(mask.params) ? { ...mask.params } : {};
+	const result = { ...mask };
+
+	result.params = {
+		...params,
+		feather: typeof mask.feather === "number" ? mask.feather : 0,
+		inverted: typeof mask.inverted === "boolean" ? mask.inverted : false,
+		strokeColor:
+			isRecord(mask.stroke) && typeof mask.stroke.color === "string"
+				? mask.stroke.color
+				: "#ffffff",
+		strokeWidth:
+			isRecord(mask.stroke) && typeof mask.stroke.width === "number"
+				? mask.stroke.width
+				: 0,
+	};
+
+	delete (result as Record<string, unknown>).feather;
+	delete (result as Record<string, unknown>).inverted;
+	delete (result as Record<string, unknown>).stroke;
+
+	return result;
+}
diff --git a/apps/web/src/services/storage/migrations/transformers/v13-to-v14.ts b/apps/web/src/services/storage/migrations/transformers/v13-to-v14.ts
new file mode 100644
index 00000000..01a3cc3e
--- /dev/null
+++ b/apps/web/src/services/storage/migrations/transformers/v13-to-v14.ts
@@ -0,0 +1,106 @@
+import type { MigrationResult, ProjectRecord } from "./types";
+import { getProjectId, isRecord } from "./utils";
+
+export function transformProjectV13ToV14({
+	project,
+}: {
+	project: ProjectRecord;
+}): MigrationResult<ProjectRecord> {
+	if (!getProjectId({ project })) {
+		return { project, skipped: true, reason: "no project id" };
+	}
+
+	if (typeof project.version === "number" && project.version >= 14) {
+		return { project, skipped: true, reason: "already v14" };
+	}
+
+	const migratedProject = migrateProjectSplitMasks({ project });
+
+	return {
+		project: { ...migratedProject, version: 14 },
+		skipped: false,
+	};
+}
+
+function migrateProjectSplitMasks({
+	project,
+}: {
+	project: ProjectRecord;
+}): ProjectRecord {
+	const scenesValue = project.scenes;
+	if (!Array.isArray(scenesValue)) return project;
+
+	const migratedScenes = scenesValue.map((scene) =>
+		migrateSceneSplitMasks({ scene }),
+	);
+
+	return { ...project, scenes: migratedScenes };
+}
+
+function migrateSceneSplitMasks({ scene }: { scene: unknown }): unknown {
+	if (!isRecord(scene)) return scene;
+
+	const tracksValue = scene.tracks;
+	if (!Array.isArray(tracksValue)) return scene;
+
+	const migratedTracks = tracksValue.map((track) =>
+		migrateTrackSplitMasks({ track }),
+	);
+
+	return { ...scene, tracks: migratedTracks };
+}
+
+function migrateTrackSplitMasks({ track }: { track: unknown }): unknown {
+	if (!isRecord(track)) return track;
+
+	const elementsValue = track.elements;
+	if (!Array.isArray(elementsValue)) return track;
+
+	const migratedElements = elementsValue.map((element) =>
+		migrateElementSplitMasks({ element }),
+	);
+
+	return { ...track, elements: migratedElements };
+}
+
+function migrateElementSplitMasks({ element }: { element: unknown }): unknown {
+	if (!isRecord(element)) return element;
+
+	const masksValue = element.masks;
+	if (!Array.isArray(masksValue)) return element;
+
+	const migratedMasks = masksValue.map((mask) => migrateSplitMask({ mask }));
+
+	return { ...element, masks: migratedMasks };
+}
+
+/**
+ * Converts split mask params from position-along-normal to explicit (x, y) anchor.
+ *
+ * Old: center = (cx + (position-0.5)*W*cos(rot), cy + (position-0.5)*W*sin(rot))
+ * New: center = (cx + x*W, cy + y*W)
+ *
+ * Conversion: x = (position-0.5)*cos(rot), y = (position-0.5)*sin(rot)
+ */
+function migrateSplitMask({ mask }: { mask: unknown }): unknown {
+	if (!isRecord(mask)) return mask;
+	if (mask.type !== "split") return mask;
+
+	const params = isRecord(mask.params) ? mask.params : {};
+	const position = typeof params.position === "number" ? params.position : 0.5;
+	const rotation = typeof params.rotation === "number" ? params.rotation : 0;
+
+	const angleRad = (rotation * Math.PI) / 180;
+	const x = (position - 0.5) * Math.cos(angleRad);
+	const y = (position - 0.5) * Math.sin(angleRad);
+
+	const { position: _removed, ...restParams } = params as Record<
+		string,
+		unknown
+	> & { position: unknown };
+
+	return {
+		...mask,
+		params: { ...restParams, x, y },
+	};
+}
diff --git a/apps/web/src/services/storage/migrations/transformers/v14-to-v15.ts b/apps/web/src/services/storage/migrations/transformers/v14-to-v15.ts
new file mode 100644
index 00000000..beef05d4
--- /dev/null
+++ b/apps/web/src/services/storage/migrations/transformers/v14-to-v15.ts
@@ -0,0 +1,67 @@
+import { STICKER_INTRINSIC_SIZE_FALLBACK } from "@/constants/sticker-constants";
+import type { MigrationResult, ProjectRecord } from "./types";
+import { getProjectId, isRecord } from "./utils";
+
+export function transformProjectV14ToV15({
+	project,
+}: {
+	project: ProjectRecord;
+}): MigrationResult<ProjectRecord> {
+	if (!getProjectId({ project })) {
+		return { project, skipped: true, reason: "no project id" };
+	}
+
+	if (typeof project.version === "number" && project.version >= 15) {
+		return { project, skipped: true, reason: "already v15" };
+	}
+
+	const migratedProject = backfillStickerIntrinsicDimensions({ project });
+
+	return {
+		project: { ...migratedProject, version: 15 },
+		skipped: false,
+	};
+}
+
+function backfillStickerIntrinsicDimensions({
+	project,
+}: {
+	project: ProjectRecord;
+}): ProjectRecord {
+	const scenesValue = project.scenes;
+	if (!Array.isArray(scenesValue)) return project;
+
+	const migratedScenes = scenesValue.map((scene) => {
+		if (!isRecord(scene)) return scene;
+		const tracksValue = scene.tracks;
+		if (!Array.isArray(tracksValue)) return scene;
+
+		const migratedTracks = tracksValue.map((track) => {
+			if (!isRecord(track)) return track;
+			const elementsValue = track.elements;
+			if (!Array.isArray(elementsValue)) return track;
+
+			const migratedElements = elementsValue.map((element) => {
+				if (!isRecord(element)) return element;
+				if (element.type !== "sticker") return element;
+				if (
+					typeof element.intrinsicWidth === "number" &&
+					typeof element.intrinsicHeight === "number"
+				) {
+					return element;
+				}
+				return {
+					...element,
+					intrinsicWidth: STICKER_INTRINSIC_SIZE_FALLBACK,
+					intrinsicHeight: STICKER_INTRINSIC_SIZE_FALLBACK,
+				};
+			});
+
+			return { ...track, elements: migratedElements };
+		});
+
+		return { ...scene, tracks: migratedTracks };
+	});
+
+	return { ...project, scenes: migratedScenes };
+}
diff --git a/apps/web/src/services/storage/migrations/transformers/v15-to-v16.ts b/apps/web/src/services/storage/migrations/transformers/v15-to-v16.ts
new file mode 100644
index 00000000..15e2f3bb
--- /dev/null
+++ b/apps/web/src/services/storage/migrations/transformers/v15-to-v16.ts
@@ -0,0 +1,60 @@
+import type { MigrationResult, ProjectRecord } from "./types";
+import { getProjectId, isRecord } from "./utils";
+
+export function transformProjectV15ToV16({
+	project,
+}: {
+	project: ProjectRecord;
+}): MigrationResult<ProjectRecord> {
+	if (!getProjectId({ project })) {
+		return { project, skipped: true, reason: "no project id" };
+	}
+
+	if (typeof project.version === "number" && project.version >= 16) {
+		return { project, skipped: true, reason: "already v16" };
+	}
+
+	return {
+		project: {
+			...renameStickerTracksToGraphic({ project }),
+			version: 16,
+		},
+		skipped: false,
+	};
+}
+
+function renameStickerTracksToGraphic({
+	project,
+}: {
+	project: ProjectRecord;
+}): ProjectRecord {
+	const scenesValue = project.scenes;
+	if (!Array.isArray(scenesValue)) {
+		return project;
+	}
+
+	const migratedScenes = scenesValue.map((scene) => {
+		if (!isRecord(scene) || !Array.isArray(scene.tracks)) {
+			return scene;
+		}
+
+		return {
+			...scene,
+			tracks: scene.tracks.map((track) => {
+				if (!isRecord(track) || track.type !== "sticker") {
+					return track;
+				}
+
+				return {
+					...track,
+					type: "graphic",
+				};
+			}),
+		};
+	});
+
+	return {
+		...project,
+		scenes: migratedScenes,
+	};
+}
diff --git a/apps/web/src/services/storage/migrations/transformers/v16-to-v17.ts b/apps/web/src/services/storage/migrations/transformers/v16-to-v17.ts
new file mode 100644
index 00000000..7fec70e9
--- /dev/null
+++ b/apps/web/src/services/storage/migrations/transformers/v16-to-v17.ts
@@ -0,0 +1,107 @@
+import type { MigrationResult, ProjectRecord } from "./types";
+import { getProjectId, isRecord } from "./utils";
+
+export function transformProjectV16ToV17({
+	project,
+}: {
+	project: ProjectRecord;
+}): MigrationResult<ProjectRecord> {
+	if (!getProjectId({ project })) {
+		return { project, skipped: true, reason: "no project id" };
+	}
+
+	if (typeof project.version === "number" && project.version >= 17) {
+		return { project, skipped: true, reason: "already v17" };
+	}
+
+	return {
+		project: {
+			...backfillMaskStrokeAlign({ project }),
+			version: 17,
+		},
+		skipped: false,
+	};
+}
+
+function backfillMaskStrokeAlign({
+	project,
+}: {
+	project: ProjectRecord;
+}): ProjectRecord {
+	const scenesValue = project.scenes;
+	if (!Array.isArray(scenesValue)) {
+		return project;
+	}
+
+	const migratedScenes = scenesValue.map((scene) => {
+		if (!isRecord(scene)) {
+			return scene;
+		}
+
+		const tracksValue = scene.tracks;
+		if (!Array.isArray(tracksValue)) {
+			return scene;
+		}
+
+		const migratedTracks = tracksValue.map((track) => {
+			if (!isRecord(track)) {
+				return track;
+			}
+
+			const elementsValue = track.elements;
+			if (!Array.isArray(elementsValue)) {
+				return track;
+			}
+
+			const migratedElements = elementsValue.map((element) => {
+				if (!isRecord(element)) {
+					return element;
+				}
+
+				const masksValue = element.masks;
+				if (!Array.isArray(masksValue)) {
+					return element;
+				}
+
+				const migratedMasks = masksValue.map((mask) => {
+					if (!isRecord(mask)) {
+						return mask;
+					}
+
+					const paramsValue = mask.params;
+					if (!isRecord(paramsValue) || typeof paramsValue.strokeAlign === "string") {
+						return mask;
+					}
+
+					return {
+						...mask,
+						params: {
+							...paramsValue,
+							strokeAlign: "center",
+						},
+					};
+				});
+
+				return {
+					...element,
+					masks: migratedMasks,
+				};
+			});
+
+			return {
+				...track,
+				elements: migratedElements,
+			};
+		});
+
+		return {
+			...scene,
+			tracks: migratedTracks,
+		};
+	});
+
+	return {
+		...project,
+		scenes: migratedScenes,
+	};
+}
diff --git a/apps/web/src/services/storage/migrations/transformers/v17-to-v18.ts b/apps/web/src/services/storage/migrations/transformers/v17-to-v18.ts
new file mode 100644
index 00000000..31a60121
--- /dev/null
+++ b/apps/web/src/services/storage/migrations/transformers/v17-to-v18.ts
@@ -0,0 +1,105 @@
+import type { MigrationResult, ProjectRecord } from "./types";
+import { VOLUME_DB_MIN } from "@/lib/timeline/audio-constants";
+import { clampDb } from "@/lib/timeline/audio-state";
+import { getProjectId, isRecord } from "./utils";
+
+export function transformProjectV17ToV18({
+	project,
+}: {
+	project: ProjectRecord;
+}): MigrationResult<ProjectRecord> {
+	if (!getProjectId({ project })) {
+		return { project, skipped: true, reason: "no project id" };
+	}
+
+	if (typeof project.version === "number" && project.version >= 18) {
+		return { project, skipped: true, reason: "already v18" };
+	}
+
+	return {
+		project: {
+			...migrateElementVolumes({ project }),
+			version: 18,
+		},
+		skipped: false,
+	};
+}
+
+function migrateElementVolumes({
+	project,
+}: {
+	project: ProjectRecord;
+}): ProjectRecord {
+	const scenesValue = project.scenes;
+	if (!Array.isArray(scenesValue)) {
+		return project;
+	}
+
+	const migratedScenes = scenesValue.map((scene) => {
+		if (!isRecord(scene)) {
+			return scene;
+		}
+
+		const tracksValue = scene.tracks;
+		if (!Array.isArray(tracksValue)) {
+			return scene;
+		}
+
+		const migratedTracks = tracksValue.map((track) => {
+			if (!isRecord(track)) {
+				return track;
+			}
+
+			const elementsValue = track.elements;
+			if (!Array.isArray(elementsValue)) {
+				return track;
+			}
+
+			const migratedElements = elementsValue.map((element) => {
+				if (!isRecord(element)) {
+					return element;
+				}
+
+				if (element.type !== "audio" && element.type !== "video") {
+					return element;
+				}
+
+				const legacyVolume = element.volume;
+				return {
+					...element,
+					volume:
+						typeof legacyVolume === "number"
+							? linearGainToDb(legacyVolume)
+							: 0,
+				};
+			});
+
+			return {
+				...track,
+				elements: migratedElements,
+			};
+		});
+
+		return {
+			...scene,
+			tracks: migratedTracks,
+		};
+	});
+
+	return {
+		...project,
+		scenes: migratedScenes,
+	};
+}
+
+function linearGainToDb(gain: number): number {
+	if (!Number.isFinite(gain)) {
+		return 0;
+	}
+
+	if (gain <= 0) {
+		return VOLUME_DB_MIN;
+	}
+
+	return clampDb(20 * Math.log10(gain));
+}
diff --git a/apps/web/src/services/storage/migrations/transformers/v18-to-v19.ts b/apps/web/src/services/storage/migrations/transformers/v18-to-v19.ts
new file mode 100644
index 00000000..1946b829
--- /dev/null
+++ b/apps/web/src/services/storage/migrations/transformers/v18-to-v19.ts
@@ -0,0 +1,46 @@
+import type { MigrationResult, ProjectRecord } from "./types";
+import { getProjectId, isRecord } from "./utils";
+
+export function transformProjectV18ToV19({
+	project,
+}: {
+	project: ProjectRecord;
+}): MigrationResult<ProjectRecord> {
+	if (!getProjectId({ project })) {
+		return { project, skipped: true, reason: "no project id" };
+	}
+
+	if (typeof project.version === "number" && project.version >= 19) {
+		return { project, skipped: true, reason: "already v19" };
+	}
+
+	return {
+		project: {
+			...migrateCanvasSizeSettings({ project }),
+			version: 19,
+		},
+		skipped: false,
+	};
+}
+
+function migrateCanvasSizeSettings({
+	project,
+}: {
+	project: ProjectRecord;
+}): ProjectRecord {
+	const settingsValue = project.settings;
+	if (!isRecord(settingsValue)) {
+		return project;
+	}
+
+	const migratedSettings: Record<string, unknown> = {
+		...settingsValue,
+		canvasSizeMode: "preset",
+		lastCustomCanvasSize: null,
+	};
+
+	return {
+		...project,
+		settings: migratedSettings,
+	};
+}
diff --git a/apps/web/src/services/storage/migrations/transformers/v2-to-v3.ts b/apps/web/src/services/storage/migrations/transformers/v2-to-v3.ts
index 094b8bd8..0807d4fb 100644
--- a/apps/web/src/services/storage/migrations/transformers/v2-to-v3.ts
+++ b/apps/web/src/services/storage/migrations/transformers/v2-to-v3.ts
@@ -1,5 +1,3 @@
-import { getProjectDurationFromScenes } from "@/lib/scenes";
-import type { TScene } from "@/types/timeline";
 import type { MigrationResult, ProjectRecord } from "./types";
 import { getProjectId, isRecord } from "./utils";
 
@@ -18,7 +16,7 @@ export function transformProjectV2ToV3({
 	}
 
 	const scenes = getScenes({ project });
-	const duration = getProjectDurationFromScenes({ scenes });
+	const duration = getDurationFromScenes({ scenes });
 
 	const metadataValue = project.metadata;
 	const metadata = isRecord(metadataValue)
@@ -36,13 +34,42 @@ export function transformProjectV2ToV3({
 
 export { getProjectId } from "./utils";
 
-function getScenes({ project }: { project: ProjectRecord }): TScene[] {
+function getScenes({ project }: { project: ProjectRecord }): unknown[] {
 	const scenesValue = project.scenes;
 	if (!Array.isArray(scenesValue)) {
 		return [];
 	}
 
-	return scenesValue.filter(isRecord) as unknown as TScene[];
+	return scenesValue.filter(isRecord);
+}
+
+function getDurationFromScenes({ scenes }: { scenes: unknown[] }): number {
+	const mainScene =
+		scenes.find(
+			(s): s is Record<string, unknown> =>
+				isRecord(s) && s.isMain === true,
+		) ??
+		scenes.find(isRecord) ??
+		null;
+
+	if (!mainScene || !Array.isArray(mainScene.tracks)) {
+		return 0;
+	}
+
+	let maxEnd = 0;
+	for (const track of mainScene.tracks) {
+		if (!isRecord(track) || !Array.isArray(track.elements)) continue;
+		for (const element of track.elements) {
+			if (!isRecord(element)) continue;
+			const startTime =
+				typeof element.startTime === "number" ? element.startTime : 0;
+			const duration =
+				typeof element.duration === "number" ? element.duration : 0;
+			maxEnd = Math.max(maxEnd, startTime + duration);
+		}
+	}
+
+	return maxEnd;
 }
 
 function isV3Project({ project }: { project: ProjectRecord }): boolean {
diff --git a/apps/web/src/services/storage/migrations/transformers/v9-to-v10.ts b/apps/web/src/services/storage/migrations/transformers/v9-to-v10.ts
new file mode 100644
index 00000000..52d13295
--- /dev/null
+++ b/apps/web/src/services/storage/migrations/transformers/v9-to-v10.ts
@@ -0,0 +1,21 @@
+import type { MigrationResult, ProjectRecord } from "./types";
+import { getProjectId } from "./utils";
+
+export function transformProjectV9ToV10({
+	project,
+}: {
+	project: ProjectRecord;
+}): MigrationResult<ProjectRecord> {
+	if (!getProjectId({ project })) {
+		return { project, skipped: true, reason: "no project id" };
+	}
+
+	if (typeof project.version === "number" && project.version >= 10) {
+		return { project, skipped: true, reason: "already v10" };
+	}
+
+	return {
+		project: { ...project, version: 10 },
+		skipped: false,
+	};
+}