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

3 files changed, 288 insertions, 0 deletions

diff --git a/apps/web/src/services/storage/migrations/__tests__/v15-to-v16.test.ts b/apps/web/src/services/storage/migrations/__tests__/v15-to-v16.test.ts
new file mode 100644
index 00000000..f2a4908f
--- /dev/null
+++ b/apps/web/src/services/storage/migrations/__tests__/v15-to-v16.test.ts
@@ -0,0 +1,93 @@
+import { describe, expect, test } from "bun:test";
+import { transformProjectV15ToV16 } from "../transformers/v15-to-v16";
+
+describe("V15 to V16 Migration", () => {
+	test("renames sticker tracks to graphic tracks", () => {
+		const result = transformProjectV15ToV16({
+			project: {
+				id: "project-v15",
+				version: 15,
+				metadata: {
+					id: "project-v15",
+					name: "Project",
+					createdAt: "2024-01-01T00:00:00.000Z",
+					updatedAt: "2024-01-01T00:00:00.000Z",
+				},
+				settings: {
+					fps: 30,
+					canvasSize: { width: 1920, height: 1080 },
+					background: { type: "color", color: "#000000" },
+				},
+				currentSceneId: "scene-main",
+				scenes: [
+					{
+						id: "scene-main",
+						name: "Main scene",
+						isMain: true,
+						tracks: [
+							{
+								id: "track-graphic",
+								type: "sticker",
+								name: "Sticker Track",
+								hidden: false,
+								elements: [
+									{
+										id: "sticker-1",
+										type: "sticker",
+										name: "Logo",
+										stickerId: "icons:mdi:home",
+										duration: 5,
+										startTime: 0,
+										trimStart: 0,
+										trimEnd: 0,
+										transform: {
+											scaleX: 1,
+											scaleY: 1,
+											position: { x: 0, y: 0 },
+											rotate: 0,
+										},
+										opacity: 1,
+									},
+								],
+							},
+						],
+						bookmarks: [],
+						createdAt: "2024-01-01T00:00:00.000Z",
+						updatedAt: "2024-01-01T00:00:00.000Z",
+					},
+				],
+			},
+		});
+
+		expect(result.skipped).toBe(false);
+		expect(result.project.version).toBe(16);
+		expect(
+			(result.project.scenes as Array<{ tracks: Array<{ type: string }> }>)[0]
+				.tracks[0].type,
+		).toBe("graphic");
+	});
+
+	test("skips projects already on v16", () => {
+		const result = transformProjectV15ToV16({
+			project: {
+				id: "project-v16",
+				version: 16,
+			},
+		});
+
+		expect(result.skipped).toBe(true);
+		expect(result.reason).toBe("already v16");
+	});
+
+	test("skips projects with no id", () => {
+		const result = transformProjectV15ToV16({
+			project: {
+				version: 15,
+				scenes: [],
+			},
+		});
+
+		expect(result.skipped).toBe(true);
+		expect(result.reason).toBe("no project id");
+	});
+});
diff --git a/apps/web/src/services/storage/migrations/__tests__/v16-to-v17.test.ts b/apps/web/src/services/storage/migrations/__tests__/v16-to-v17.test.ts
new file mode 100644
index 00000000..e246943e
--- /dev/null
+++ b/apps/web/src/services/storage/migrations/__tests__/v16-to-v17.test.ts
@@ -0,0 +1,132 @@
+import { describe, expect, test } from "bun:test";
+import { transformProjectV16ToV17 } from "../transformers/v16-to-v17";
+
+describe("V16 to V17 Migration", () => {
+	test("adds center stroke alignment to masks that do not have it", () => {
+		const result = transformProjectV16ToV17({
+			project: {
+				id: "project-v16",
+				version: 16,
+				metadata: {
+					id: "project-v16",
+					name: "Project",
+					createdAt: "2024-01-01T00:00:00.000Z",
+					updatedAt: "2024-01-01T00:00:00.000Z",
+				},
+				settings: {
+					fps: 30,
+					canvasSize: { width: 1920, height: 1080 },
+					background: { type: "color", color: "#000000" },
+				},
+				currentSceneId: "scene-main",
+				scenes: [
+					{
+						id: "scene-main",
+						name: "Main scene",
+						isMain: true,
+						tracks: [
+							{
+								id: "track-video",
+								type: "video",
+								name: "Video Track",
+								hidden: false,
+								elements: [
+									{
+										id: "video-1",
+										type: "video",
+										name: "Clip",
+										mediaId: "media-1",
+										duration: 5,
+										startTime: 0,
+										trimStart: 0,
+										trimEnd: 0,
+										transform: {
+											scaleX: 1,
+											scaleY: 1,
+											position: { x: 0, y: 0 },
+											rotate: 0,
+										},
+										opacity: 1,
+										masks: [
+											{
+												id: "mask-1",
+												type: "rectangle",
+												params: {
+													feather: 0,
+													inverted: false,
+													strokeColor: "#ffffff",
+													strokeWidth: 8,
+													centerX: 0,
+													centerY: 0,
+													width: 0.6,
+													height: 0.6,
+													rotation: 0,
+													scale: 1,
+												},
+											},
+											{
+												id: "mask-2",
+												type: "ellipse",
+												params: {
+													feather: 0,
+													inverted: false,
+													strokeColor: "#ffffff",
+													strokeWidth: 8,
+													strokeAlign: "outside",
+													centerX: 0,
+													centerY: 0,
+													width: 0.6,
+													height: 0.6,
+													rotation: 0,
+													scale: 1,
+												},
+											},
+										],
+									},
+								],
+							},
+						],
+						bookmarks: [],
+						createdAt: "2024-01-01T00:00:00.000Z",
+						updatedAt: "2024-01-01T00:00:00.000Z",
+					},
+				],
+			},
+		});
+
+		expect(result.skipped).toBe(false);
+		expect(result.project.version).toBe(17);
+
+		const migratedMasks = (
+			((result.project.scenes as Array<{ tracks: Array<{ elements: Array<{ masks: Array<{ params: Record<string, unknown> }> }> }> }>)[0]
+				.tracks[0].elements[0].masks)
+		);
+
+		expect(migratedMasks[0].params.strokeAlign).toBe("center");
+		expect(migratedMasks[1].params.strokeAlign).toBe("outside");
+	});
+
+	test("skips projects already on v17", () => {
+		const result = transformProjectV16ToV17({
+			project: {
+				id: "project-v17",
+				version: 17,
+			},
+		});
+
+		expect(result.skipped).toBe(true);
+		expect(result.reason).toBe("already v17");
+	});
+
+	test("skips projects with no id", () => {
+		const result = transformProjectV16ToV17({
+			project: {
+				version: 16,
+				scenes: [],
+			},
+		});
+
+		expect(result.skipped).toBe(true);
+		expect(result.reason).toBe("no project id");
+	});
+});
diff --git a/apps/web/src/services/storage/migrations/__tests__/v18-to-v19.test.ts b/apps/web/src/services/storage/migrations/__tests__/v18-to-v19.test.ts
new file mode 100644
index 00000000..7524a8d4
--- /dev/null
+++ b/apps/web/src/services/storage/migrations/__tests__/v18-to-v19.test.ts
@@ -0,0 +1,63 @@
+import { describe, expect, test } from "bun:test";
+import { transformProjectV18ToV19 } from "../transformers/v18-to-v19";
+
+describe("V18 to V19 Migration", () => {
+	test("adds canvas size mode and empty remembered custom size defaults", () => {
+		const result = transformProjectV18ToV19({
+			project: {
+				id: "project-v18-defaults",
+				version: 18,
+				metadata: {
+					id: "project-v18-defaults",
+					name: "Project",
+					createdAt: "2024-01-01T00:00:00.000Z",
+					updatedAt: "2024-01-01T00:00:00.000Z",
+				},
+				settings: {
+					fps: 30,
+					canvasSize: { width: 1920, height: 1080 },
+					originalCanvasSize: { width: 1920, height: 1080 },
+					background: { type: "color", color: "#000000" },
+				},
+				currentSceneId: "scene-main",
+				scenes: [],
+			},
+		});
+
+		expect(result.skipped).toBe(false);
+		expect(result.project.version).toBe(19);
+		expect(
+			(result.project.settings as Record<string, unknown>).canvasSizeMode,
+		).toBe("preset");
+		expect(
+			(result.project.settings as Record<string, unknown>).lastCustomCanvasSize,
+		).toBeNull();
+		expect(
+			(result.project.settings as Record<string, unknown>).originalCanvasSize,
+		).toEqual({ width: 1920, height: 1080 });
+	});
+
+	test("skips projects already on v19", () => {
+		const result = transformProjectV18ToV19({
+			project: {
+				id: "project-v19",
+				version: 19,
+			},
+		});
+
+		expect(result.skipped).toBe(true);
+		expect(result.reason).toBe("already v19");
+	});
+
+	test("skips projects with no id", () => {
+		const result = transformProjectV18ToV19({
+			project: {
+				version: 18,
+				scenes: [],
+			},
+		});
+
+		expect(result.skipped).toBe(true);
+		expect(result.reason).toBe("no project id");
+	});
+});