chore: normalize line endings

58 files changed, 4838 insertions, 4838 deletions

diff --git a/apps/web/src/services/renderer/canvas-utils.ts b/apps/web/src/services/renderer/canvas-utils.ts
index 093168e6..ea04037b 100644
--- a/apps/web/src/services/renderer/canvas-utils.ts
+++ b/apps/web/src/services/renderer/canvas-utils.ts
@@ -1,16 +1,16 @@
-export function createOffscreenCanvas({
-	width,
-	height,
-}: {
-	width: number;
-	height: number;
-}): OffscreenCanvas | HTMLCanvasElement {
-	try {
-		return new OffscreenCanvas(width, height);
-	} catch {
-		const canvas = document.createElement("canvas");
-		canvas.width = width;
-		canvas.height = height;
-		return canvas;
-	}
-}
+export function createOffscreenCanvas({

+	width,

+	height,

+}: {

+	width: number;

+	height: number;

+}): OffscreenCanvas | HTMLCanvasElement {

+	try {

+		return new OffscreenCanvas(width, height);

+	} catch {

+		const canvas = document.createElement("canvas");

+		canvas.width = width;

+		canvas.height = height;

+		return canvas;

+	}

+}

diff --git a/apps/web/src/services/renderer/mask-feather.ts b/apps/web/src/services/renderer/mask-feather.ts
index 39ad80a8..f1515117 100644
--- a/apps/web/src/services/renderer/mask-feather.ts
+++ b/apps/web/src/services/renderer/mask-feather.ts
@@ -1,54 +1,54 @@
-import jfaDistanceShader from "@/lib/masks/shaders/jfa-distance.frag.glsl";
-import { getWebGLContext, readResult } from "./webgl/webgl-context";
-import { computeSignedDistanceField, runPass } from "./webgl/jfa";
-import { compileProgram, createTexture } from "./webgl/webgl-utils";
-
-export function applyMaskFeather({
-	maskCanvas,
-	width,
-	height,
-	feather,
-}: {
-	maskCanvas: CanvasImageSource;
-	width: number;
-	height: number;
-	feather: number;
-}): OffscreenCanvas | HTMLCanvasElement {
-	const { context, programCache } = getWebGLContext({ width, height });
-	const sourceTexture = createTexture({ context, source: maskCanvas });
-
-	const sdf = computeSignedDistanceField({
-		context,
-		programCache,
-		sourceTexture,
-		width,
-		height,
-	});
-
-	const distanceProgram = compileProgram({
-		context,
-		fragmentShaderSource: jfaDistanceShader,
-		programCache,
-	});
-
-	runPass({
-		context,
-		program: distanceProgram,
-		inputTexture: sdf.insideTexture,
-		target: null,
-		width,
-		height,
-		uniforms: { u_feather_half: feather / 2.0 },
-		extraBindings: [
-			{ unit: 1, texture: sdf.outsideTexture, name: "u_jfa_outside" },
-		],
-	});
-
-	context.deleteTexture(sourceTexture);
-	sdf.cleanup();
-
-	context.bindTexture(context.TEXTURE_2D, null);
-	context.bindFramebuffer(context.FRAMEBUFFER, null);
-
-	return readResult({ width, height });
-}
+import jfaDistanceShader from "@/lib/masks/shaders/jfa-distance.frag.glsl";

+import { getWebGLContext, readResult } from "./webgl/webgl-context";

+import { computeSignedDistanceField, runPass } from "./webgl/jfa";

+import { compileProgram, createTexture } from "./webgl/webgl-utils";

+

+export function applyMaskFeather({

+	maskCanvas,

+	width,

+	height,

+	feather,

+}: {

+	maskCanvas: CanvasImageSource;

+	width: number;

+	height: number;

+	feather: number;

+}): OffscreenCanvas | HTMLCanvasElement {

+	const { context, programCache } = getWebGLContext({ width, height });

+	const sourceTexture = createTexture({ context, source: maskCanvas });

+

+	const sdf = computeSignedDistanceField({

+		context,

+		programCache,

+		sourceTexture,

+		width,

+		height,

+	});

+

+	const distanceProgram = compileProgram({

+		context,

+		fragmentShaderSource: jfaDistanceShader,

+		programCache,

+	});

+

+	runPass({

+		context,

+		program: distanceProgram,

+		inputTexture: sdf.insideTexture,

+		target: null,

+		width,

+		height,

+		uniforms: { u_feather_half: feather / 2.0 },

+		extraBindings: [

+			{ unit: 1, texture: sdf.outsideTexture, name: "u_jfa_outside" },

+		],

+	});

+

+	context.deleteTexture(sourceTexture);

+	sdf.cleanup();

+

+	context.bindTexture(context.TEXTURE_2D, null);

+	context.bindFramebuffer(context.FRAMEBUFFER, null);

+

+	return readResult({ width, height });

+}

diff --git a/apps/web/src/services/renderer/nodes/effect-layer-node.ts b/apps/web/src/services/renderer/nodes/effect-layer-node.ts
index 82aee1b3..51de2398 100644
--- a/apps/web/src/services/renderer/nodes/effect-layer-node.ts
+++ b/apps/web/src/services/renderer/nodes/effect-layer-node.ts
@@ -1,81 +1,81 @@
-import type { CanvasRenderer } from "../canvas-renderer";
-import { effectsRegistry, resolveEffectPasses } from "@/lib/effects";
-import type { ParamValues } from "@/lib/params";
-import { BaseNode } from "./base-node";
-import { webglEffectRenderer } from "../webgl/webgl-effect-renderer";
-
-const TIME_EPSILON = 1e-6;
-
-export type EffectLayerNodeParams = {
-	effectType: string;
-	effectParams: ParamValues;
-	timeOffset: number;
-	duration: number;
-};
-
-function isInRange({
-	time,
-	timeOffset,
-	duration,
-}: {
-	time: number;
-	timeOffset: number;
-	duration: number;
-}): boolean {
-	return (
-		time >= timeOffset - TIME_EPSILON &&
-		time < timeOffset + duration + TIME_EPSILON
-	);
-}
-
-// snapshots whatever is currently on the canvas, applies the effect, draws it back
-export class EffectLayerNode extends BaseNode<EffectLayerNodeParams> {
-	async render({
-		renderer,
-		time,
-	}: {
-		renderer: CanvasRenderer;
-		time: number;
-	}): Promise<void> {
-		if (
-			!isInRange({
-				time,
-				timeOffset: this.params.timeOffset,
-				duration: this.params.duration,
-			})
-		) {
-			return;
-		}
-
-		const source = renderer.context.canvas as CanvasImageSource;
-
-		const effectDefinition = effectsRegistry.get(this.params.effectType);
-
-		const passes = resolveEffectPasses({
-			definition: effectDefinition,
-			effectParams: this.params.effectParams,
-			width: renderer.width,
-			height: renderer.height,
-		});
-		if (passes.length === 0) {
-			return;
-		}
-		const effectResult = webglEffectRenderer.applyEffect({
-			source,
-			width: renderer.width,
-			height: renderer.height,
-			passes,
-		});
-
-		renderer.context.save();
-		renderer.context.clearRect(0, 0, renderer.width, renderer.height);
-		renderer.context.drawImage(
-			effectResult,
-			0,
-			0,
-			renderer.width,
-			renderer.height,
-		);
-		renderer.context.restore();
-	}
-}
+import type { CanvasRenderer } from "../canvas-renderer";

+import { effectsRegistry, resolveEffectPasses } from "@/lib/effects";

+import type { ParamValues } from "@/lib/params";

+import { BaseNode } from "./base-node";

+import { webglEffectRenderer } from "../webgl/webgl-effect-renderer";

+

+const TIME_EPSILON = 1e-6;

+

+export type EffectLayerNodeParams = {

+	effectType: string;

+	effectParams: ParamValues;

+	timeOffset: number;

+	duration: number;

+};

+

+function isInRange({

+	time,

+	timeOffset,

+	duration,

+}: {

+	time: number;

+	timeOffset: number;

+	duration: number;

+}): boolean {

+	return (

+		time >= timeOffset - TIME_EPSILON &&

+		time < timeOffset + duration + TIME_EPSILON

+	);

+}

+

+// snapshots whatever is currently on the canvas, applies the effect, draws it back

+export class EffectLayerNode extends BaseNode<EffectLayerNodeParams> {

+	async render({

+		renderer,

+		time,

+	}: {

+		renderer: CanvasRenderer;

+		time: number;

+	}): Promise<void> {

+		if (

+			!isInRange({

+				time,

+				timeOffset: this.params.timeOffset,

+				duration: this.params.duration,

+			})

+		) {

+			return;

+		}

+

+		const source = renderer.context.canvas as CanvasImageSource;

+

+		const effectDefinition = effectsRegistry.get(this.params.effectType);

+

+		const passes = resolveEffectPasses({

+			definition: effectDefinition,

+			effectParams: this.params.effectParams,

+			width: renderer.width,

+			height: renderer.height,

+		});

+		if (passes.length === 0) {

+			return;

+		}

+		const effectResult = webglEffectRenderer.applyEffect({

+			source,

+			width: renderer.width,

+			height: renderer.height,

+			passes,

+		});

+

+		renderer.context.save();

+		renderer.context.clearRect(0, 0, renderer.width, renderer.height);

+		renderer.context.drawImage(

+			effectResult,

+			0,

+			0,

+			renderer.width,

+			renderer.height,

+		);

+		renderer.context.restore();

+	}

+}

diff --git a/apps/web/src/services/renderer/nodes/graphic-node.ts b/apps/web/src/services/renderer/nodes/graphic-node.ts
index b258a353..0a3dc408 100644
--- a/apps/web/src/services/renderer/nodes/graphic-node.ts
+++ b/apps/web/src/services/renderer/nodes/graphic-node.ts
@@ -1,92 +1,92 @@
-import type { CanvasRenderer } from "../canvas-renderer";
-import { createOffscreenCanvas } from "../canvas-utils";
-import {
-	DEFAULT_GRAPHIC_SOURCE_SIZE,
-	getGraphicDefinition,
-	registerDefaultGraphics,
-} from "@/lib/graphics";
-import { resolveGraphicParamsAtTime } from "@/lib/animation";
-import type { ParamValues } from "@/lib/params";
-import { VisualNode, type VisualNodeParams } from "./visual-node";
-
-export interface GraphicNodeParams extends VisualNodeParams {
-	definitionId: string;
-	params: ParamValues;
-}
-
-export class GraphicNode extends VisualNode<GraphicNodeParams> {
-	private cachedKey: string | null = null;
-	private cachedSource: OffscreenCanvas | HTMLCanvasElement | null = null;
-
-	constructor(params: GraphicNodeParams) {
-		super(params);
-		registerDefaultGraphics();
-	}
-
-	private getSource({
-		localTime,
-	}: {
-		localTime: number;
-	}): OffscreenCanvas | HTMLCanvasElement | null {
-		const definition = getGraphicDefinition({
-			definitionId: this.params.definitionId,
-		});
-		const resolvedParams = resolveGraphicParamsAtTime({
-			element: this.params,
-			localTime,
-		});
-		const cacheKey = JSON.stringify({
-			definitionId: this.params.definitionId,
-			params: resolvedParams,
-		});
-		if (this.cachedSource && this.cachedKey === cacheKey) {
-			return this.cachedSource;
-		}
-
-		const canvas = createOffscreenCanvas({
-			width: DEFAULT_GRAPHIC_SOURCE_SIZE,
-			height: DEFAULT_GRAPHIC_SOURCE_SIZE,
-		});
-		const ctx = canvas.getContext("2d") as
-			| CanvasRenderingContext2D
-			| OffscreenCanvasRenderingContext2D
-			| null;
-		if (!ctx) {
-			return null;
-		}
-
-		definition.render({
-			ctx,
-			params: resolvedParams,
-			width: DEFAULT_GRAPHIC_SOURCE_SIZE,
-			height: DEFAULT_GRAPHIC_SOURCE_SIZE,
-		});
-
-		this.cachedKey = cacheKey;
-		this.cachedSource = canvas;
-		return canvas;
-	}
-
-	async render({ renderer, time }: { renderer: CanvasRenderer; time: number }) {
-		await super.render({ renderer, time });
-
-		if (!this.isInRange({ time })) {
-			return;
-		}
-
-		const source = this.getSource({
-			localTime: this.getAnimationLocalTime({ time }),
-		});
-		if (!source) {
-			return;
-		}
-
-		this.renderVisual({
-			renderer,
-			source,
-			sourceWidth: DEFAULT_GRAPHIC_SOURCE_SIZE,
-			sourceHeight: DEFAULT_GRAPHIC_SOURCE_SIZE,
-			timelineTime: time,
-		});
-	}
-}
+import type { CanvasRenderer } from "../canvas-renderer";

+import { createOffscreenCanvas } from "../canvas-utils";

+import {

+	DEFAULT_GRAPHIC_SOURCE_SIZE,

+	getGraphicDefinition,

+	registerDefaultGraphics,

+} from "@/lib/graphics";

+import { resolveGraphicParamsAtTime } from "@/lib/animation";

+import type { ParamValues } from "@/lib/params";

+import { VisualNode, type VisualNodeParams } from "./visual-node";

+

+export interface GraphicNodeParams extends VisualNodeParams {

+	definitionId: string;

+	params: ParamValues;

+}

+

+export class GraphicNode extends VisualNode<GraphicNodeParams> {

+	private cachedKey: string | null = null;

+	private cachedSource: OffscreenCanvas | HTMLCanvasElement | null = null;

+

+	constructor(params: GraphicNodeParams) {

+		super(params);

+		registerDefaultGraphics();

+	}

+

+	private getSource({

+		localTime,

+	}: {

+		localTime: number;

+	}): OffscreenCanvas | HTMLCanvasElement | null {

+		const definition = getGraphicDefinition({

+			definitionId: this.params.definitionId,

+		});

+		const resolvedParams = resolveGraphicParamsAtTime({

+			element: this.params,

+			localTime,

+		});

+		const cacheKey = JSON.stringify({

+			definitionId: this.params.definitionId,

+			params: resolvedParams,

+		});

+		if (this.cachedSource && this.cachedKey === cacheKey) {

+			return this.cachedSource;

+		}

+

+		const canvas = createOffscreenCanvas({

+			width: DEFAULT_GRAPHIC_SOURCE_SIZE,

+			height: DEFAULT_GRAPHIC_SOURCE_SIZE,

+		});

+		const ctx = canvas.getContext("2d") as

+			| CanvasRenderingContext2D

+			| OffscreenCanvasRenderingContext2D

+			| null;

+		if (!ctx) {

+			return null;

+		}

+

+		definition.render({

+			ctx,

+			params: resolvedParams,

+			width: DEFAULT_GRAPHIC_SOURCE_SIZE,

+			height: DEFAULT_GRAPHIC_SOURCE_SIZE,

+		});

+

+		this.cachedKey = cacheKey;

+		this.cachedSource = canvas;

+		return canvas;

+	}

+

+	async render({ renderer, time }: { renderer: CanvasRenderer; time: number }) {

+		await super.render({ renderer, time });

+

+		if (!this.isInRange({ time })) {

+			return;

+		}

+

+		const source = this.getSource({

+			localTime: this.getAnimationLocalTime({ time }),

+		});

+		if (!source) {

+			return;

+		}

+

+		this.renderVisual({

+			renderer,

+			source,

+			sourceWidth: DEFAULT_GRAPHIC_SOURCE_SIZE,

+			sourceHeight: DEFAULT_GRAPHIC_SOURCE_SIZE,

+			timelineTime: time,

+		});

+	}

+}

diff --git a/apps/web/src/services/renderer/nodes/video-node.ts b/apps/web/src/services/renderer/nodes/video-node.ts
index af39d26f..3bb836ec 100644
--- a/apps/web/src/services/renderer/nodes/video-node.ts
+++ b/apps/web/src/services/renderer/nodes/video-node.ts
@@ -1,37 +1,37 @@
-import type { CanvasRenderer } from "../canvas-renderer";
-import { VisualNode, type VisualNodeParams } from "./visual-node";
-import { videoCache } from "@/services/video-cache/service";
-
-export interface VideoNodeParams extends VisualNodeParams {
-	url: string;
-	file: File;
-	mediaId: string;
-}
-
-export class VideoNode extends VisualNode<VideoNodeParams> {
-	async render({ renderer, time }: { renderer: CanvasRenderer; time: number }) {
-		await super.render({ renderer, time });
-
-		if (!this.isInRange({ time })) {
-			return;
-		}
-
-		const videoTime = this.getSourceLocalTime({ time });
-
-		const frame = await videoCache.getFrameAt({
-			mediaId: this.params.mediaId,
-			file: this.params.file,
-			time: videoTime,
-		});
-
-		if (frame) {
-			this.renderVisual({
-				renderer,
-				source: frame.canvas,
-				sourceWidth: frame.canvas.width,
-				sourceHeight: frame.canvas.height,
-				timelineTime: time,
-			});
-		}
-	}
-}
+import type { CanvasRenderer } from "../canvas-renderer";

+import { VisualNode, type VisualNodeParams } from "./visual-node";

+import { videoCache } from "@/services/video-cache/service";

+

+export interface VideoNodeParams extends VisualNodeParams {

+	url: string;

+	file: File;

+	mediaId: string;

+}

+

+export class VideoNode extends VisualNode<VideoNodeParams> {

+	async render({ renderer, time }: { renderer: CanvasRenderer; time: number }) {

+		await super.render({ renderer, time });

+

+		if (!this.isInRange({ time })) {

+			return;

+		}

+

+		const videoTime = this.getSourceLocalTime({ time });

+

+		const frame = await videoCache.getFrameAt({

+			mediaId: this.params.mediaId,

+			file: this.params.file,

+			time: videoTime,

+		});

+

+		if (frame) {

+			this.renderVisual({

+				renderer,

+				source: frame.canvas,

+				sourceWidth: frame.canvas.width,

+				sourceHeight: frame.canvas.height,

+				timelineTime: time,

+			});

+		}

+	}

+}

diff --git a/apps/web/src/services/renderer/scene-builder.ts b/apps/web/src/services/renderer/scene-builder.ts
index 7d5f9fe9..1c3e6ad2 100644
--- a/apps/web/src/services/renderer/scene-builder.ts
+++ b/apps/web/src/services/renderer/scene-builder.ts
@@ -1,272 +1,272 @@
-import type { TimelineTrack } from "@/lib/timeline";
-import type { MediaAsset } from "@/lib/media/types";
-import { RootNode } from "./nodes/root-node";
-import { VideoNode } from "./nodes/video-node";
-import { ImageNode } from "./nodes/image-node";
-import { TextNode } from "./nodes/text-node";
-import { StickerNode } from "./nodes/sticker-node";
-import { GraphicNode } from "./nodes/graphic-node";
-import { ColorNode } from "./nodes/color-node";
-import { BlurBackgroundNode } from "./nodes/blur-background-node";
-import { EffectLayerNode } from "./nodes/effect-layer-node";
-import type { BaseNode } from "./nodes/base-node";
-import type { TBackground, TCanvasSize } from "@/lib/project/types";
-import { DEFAULT_BLUR_INTENSITY } from "@/constants/project-constants";
-import { isMainTrack } from "@/lib/timeline";
-
-const PREVIEW_MAX_IMAGE_SIZE = 2048;
-
-function getVisibleSortedElements({ track }: { track: TimelineTrack }) {
-	return track.elements
-		.filter((element) => !("hidden" in element && element.hidden))
-		.slice()
-		.sort((a, b) => {
-			if (a.startTime !== b.startTime) return a.startTime - b.startTime;
-			return a.id.localeCompare(b.id);
-		});
-}
-
-function buildTrackNodes({
-	tracks,
-	mediaMap,
-	canvasSize,
-	isPreview,
-}: {
-	tracks: TimelineTrack[];
-	mediaMap: Map<string, MediaAsset>;
-	canvasSize: TCanvasSize;
-	isPreview?: boolean;
-}): BaseNode[] {
-	const nodes: BaseNode[] = [];
-
-	for (const track of tracks) {
-		const elements = getVisibleSortedElements({ track });
-
-		for (const element of elements) {
-			if (element.type === "effect") {
-				nodes.push(
-					new EffectLayerNode({
-						effectType: element.effectType,
-						effectParams: element.params,
-						timeOffset: element.startTime,
-						duration: element.duration,
-					}),
-				);
-				continue;
-			}
-
-			if (element.type === "video" || element.type === "image") {
-				const mediaAsset = mediaMap.get(element.mediaId);
-				if (!mediaAsset?.file || !mediaAsset?.url) {
-					continue;
-				}
-
-				if (element.type === "video" && mediaAsset.type === "video") {
-					nodes.push(
-						new VideoNode({
-							mediaId: mediaAsset.id,
-							url: mediaAsset.url,
-							file: mediaAsset.file,
-							duration: element.duration,
-							timeOffset: element.startTime,
-							trimStart: element.trimStart,
-							trimEnd: element.trimEnd,
-							retime: element.retime,
-							transform: element.transform,
-							animations: element.animations,
-							opacity: element.opacity,
-							blendMode: element.blendMode,
-							effects: element.effects,
-							masks: element.masks,
-						}),
-					);
-				}
-				if (element.type === "image" && mediaAsset.type === "image") {
-					nodes.push(
-						new ImageNode({
-							url: mediaAsset.url,
-							duration: element.duration,
-							timeOffset: element.startTime,
-							trimStart: element.trimStart,
-							trimEnd: element.trimEnd,
-							transform: element.transform,
-							animations: element.animations,
-							opacity: element.opacity,
-							blendMode: element.blendMode,
-							effects: element.effects,
-							masks: element.masks,
-							...(isPreview && {
-								maxSourceSize: PREVIEW_MAX_IMAGE_SIZE,
-							}),
-						}),
-					);
-				}
-			}
-
-			if (element.type === "text") {
-				nodes.push(
-					new TextNode({
-						...element,
-						canvasCenter: { x: canvasSize.width / 2, y: canvasSize.height / 2 },
-						canvasHeight: canvasSize.height,
-						textBaseline: "middle",
-						effects: element.effects,
-					}),
-				);
-			}
-
-			if (element.type === "sticker") {
-				nodes.push(
-					new StickerNode({
-						stickerId: element.stickerId,
-						intrinsicWidth: element.intrinsicWidth,
-						intrinsicHeight: element.intrinsicHeight,
-						duration: element.duration,
-						timeOffset: element.startTime,
-						trimStart: element.trimStart,
-						trimEnd: element.trimEnd,
-						transform: element.transform,
-						animations: element.animations,
-						opacity: element.opacity,
-						blendMode: element.blendMode,
-						effects: element.effects,
-					}),
-				);
-			}
-
-			if (element.type === "graphic") {
-				nodes.push(
-					new GraphicNode({
-						definitionId: element.definitionId,
-						params: element.params,
-						duration: element.duration,
-						timeOffset: element.startTime,
-						trimStart: element.trimStart,
-						trimEnd: element.trimEnd,
-						transform: element.transform,
-						animations: element.animations,
-						opacity: element.opacity,
-						blendMode: element.blendMode,
-						effects: element.effects,
-						masks: element.masks,
-					}),
-				);
-			}
-		}
-	}
-
-	return nodes;
-}
-
-function buildBlurBackgroundNodes({
-	track,
-	mediaMap,
-	blurIntensity,
-}: {
-	track: TimelineTrack | undefined;
-	mediaMap: Map<string, MediaAsset>;
-	blurIntensity: number;
-}): BaseNode[] {
-	if (!track) {
-		return [];
-	}
-
-	const nodes: BaseNode[] = [];
-	const elements = getVisibleSortedElements({ track });
-
-	for (const element of elements) {
-		if (element.type !== "video" && element.type !== "image") {
-			continue;
-		}
-
-		const mediaAsset = mediaMap.get(element.mediaId);
-		if (
-			!mediaAsset?.file ||
-			!mediaAsset?.url ||
-			(mediaAsset.type !== "video" && mediaAsset.type !== "image")
-		) {
-			continue;
-		}
-
-		nodes.push(
-			new BlurBackgroundNode({
-				mediaId: mediaAsset.id,
-				url: mediaAsset.url,
-				file: mediaAsset.file,
-				mediaType: mediaAsset.type,
-				duration: element.duration,
-				timeOffset: element.startTime,
-				trimStart: element.trimStart,
-				trimEnd: element.trimEnd,
-				retime: element.type === "video" ? element.retime : undefined,
-				blurIntensity,
-			}),
-		);
-	}
-
-	return nodes;
-}
-
-export type BuildSceneParams = {
-	canvasSize: TCanvasSize;
-	tracks: TimelineTrack[];
-	mediaAssets: MediaAsset[];
-	duration: number;
-	background: TBackground;
-	isPreview?: boolean;
-};
-
-export function buildScene({
-	canvasSize,
-	tracks,
-	mediaAssets,
-	duration,
-	background,
-	isPreview,
-}: BuildSceneParams) {
-	const rootNode = new RootNode({ duration });
-	const mediaMap = new Map(mediaAssets.map((m) => [m.id, m]));
-
-	const visibleTracks = tracks.filter(
-		(track) => !("hidden" in track && track.hidden),
-	);
-
-	const orderedTracksTopToBottom = [
-		...visibleTracks.filter((track) => !isMainTrack(track)),
-		...visibleTracks.filter((track) => isMainTrack(track)),
-	];
-
-	const orderedTracksBottomToTop = orderedTracksTopToBottom.slice().reverse();
-	const mainTrack = orderedTracksBottomToTop.find((track) =>
-		isMainTrack(track),
-	);
-
-	const allNodes = buildTrackNodes({
-		tracks: orderedTracksBottomToTop,
-		mediaMap,
-		canvasSize,
-		isPreview,
-	});
-
-	if (background.type === "blur") {
-		const blurNodes = buildBlurBackgroundNodes({
-			track: mainTrack,
-			mediaMap,
-			blurIntensity: background.blurIntensity ?? DEFAULT_BLUR_INTENSITY,
-		});
-		for (const node of blurNodes) {
-			rootNode.add(node);
-		}
-	} else if (
-		background.type === "color" &&
-		background.color !== "transparent"
-	) {
-		rootNode.add(new ColorNode({ color: background.color }));
-	}
-
-	for (const node of allNodes) {
-		rootNode.add(node);
-	}
-
-	return rootNode;
-}
+import type { TimelineTrack } from "@/lib/timeline";

+import type { MediaAsset } from "@/lib/media/types";

+import { RootNode } from "./nodes/root-node";

+import { VideoNode } from "./nodes/video-node";

+import { ImageNode } from "./nodes/image-node";

+import { TextNode } from "./nodes/text-node";

+import { StickerNode } from "./nodes/sticker-node";

+import { GraphicNode } from "./nodes/graphic-node";

+import { ColorNode } from "./nodes/color-node";

+import { BlurBackgroundNode } from "./nodes/blur-background-node";

+import { EffectLayerNode } from "./nodes/effect-layer-node";

+import type { BaseNode } from "./nodes/base-node";

+import type { TBackground, TCanvasSize } from "@/lib/project/types";

+import { DEFAULT_BLUR_INTENSITY } from "@/constants/project-constants";

+import { isMainTrack } from "@/lib/timeline";

+

+const PREVIEW_MAX_IMAGE_SIZE = 2048;

+

+function getVisibleSortedElements({ track }: { track: TimelineTrack }) {

+	return track.elements

+		.filter((element) => !("hidden" in element && element.hidden))

+		.slice()

+		.sort((a, b) => {

+			if (a.startTime !== b.startTime) return a.startTime - b.startTime;

+			return a.id.localeCompare(b.id);

+		});

+}

+

+function buildTrackNodes({

+	tracks,

+	mediaMap,

+	canvasSize,

+	isPreview,

+}: {

+	tracks: TimelineTrack[];

+	mediaMap: Map<string, MediaAsset>;

+	canvasSize: TCanvasSize;

+	isPreview?: boolean;

+}): BaseNode[] {

+	const nodes: BaseNode[] = [];

+

+	for (const track of tracks) {

+		const elements = getVisibleSortedElements({ track });

+

+		for (const element of elements) {

+			if (element.type === "effect") {

+				nodes.push(

+					new EffectLayerNode({

+						effectType: element.effectType,

+						effectParams: element.params,

+						timeOffset: element.startTime,

+						duration: element.duration,

+					}),

+				);

+				continue;

+			}

+

+			if (element.type === "video" || element.type === "image") {

+				const mediaAsset = mediaMap.get(element.mediaId);

+				if (!mediaAsset?.file || !mediaAsset?.url) {

+					continue;

+				}

+

+				if (element.type === "video" && mediaAsset.type === "video") {

+					nodes.push(

+						new VideoNode({

+							mediaId: mediaAsset.id,

+							url: mediaAsset.url,

+							file: mediaAsset.file,

+							duration: element.duration,

+							timeOffset: element.startTime,

+							trimStart: element.trimStart,

+							trimEnd: element.trimEnd,

+							retime: element.retime,

+							transform: element.transform,

+							animations: element.animations,

+							opacity: element.opacity,

+							blendMode: element.blendMode,

+							effects: element.effects,

+							masks: element.masks,

+						}),

+					);

+				}

+				if (element.type === "image" && mediaAsset.type === "image") {

+					nodes.push(

+						new ImageNode({

+							url: mediaAsset.url,

+							duration: element.duration,

+							timeOffset: element.startTime,

+							trimStart: element.trimStart,

+							trimEnd: element.trimEnd,

+							transform: element.transform,

+							animations: element.animations,

+							opacity: element.opacity,

+							blendMode: element.blendMode,

+							effects: element.effects,

+							masks: element.masks,

+							...(isPreview && {

+								maxSourceSize: PREVIEW_MAX_IMAGE_SIZE,

+							}),

+						}),

+					);

+				}

+			}

+

+			if (element.type === "text") {

+				nodes.push(

+					new TextNode({

+						...element,

+						canvasCenter: { x: canvasSize.width / 2, y: canvasSize.height / 2 },

+						canvasHeight: canvasSize.height,

+						textBaseline: "middle",

+						effects: element.effects,

+					}),

+				);

+			}

+

+			if (element.type === "sticker") {

+				nodes.push(

+					new StickerNode({

+						stickerId: element.stickerId,

+						intrinsicWidth: element.intrinsicWidth,

+						intrinsicHeight: element.intrinsicHeight,

+						duration: element.duration,

+						timeOffset: element.startTime,

+						trimStart: element.trimStart,

+						trimEnd: element.trimEnd,

+						transform: element.transform,

+						animations: element.animations,

+						opacity: element.opacity,

+						blendMode: element.blendMode,

+						effects: element.effects,

+					}),

+				);

+			}

+

+			if (element.type === "graphic") {

+				nodes.push(

+					new GraphicNode({

+						definitionId: element.definitionId,

+						params: element.params,

+						duration: element.duration,

+						timeOffset: element.startTime,

+						trimStart: element.trimStart,

+						trimEnd: element.trimEnd,

+						transform: element.transform,

+						animations: element.animations,

+						opacity: element.opacity,

+						blendMode: element.blendMode,

+						effects: element.effects,

+						masks: element.masks,

+					}),

+				);

+			}

+		}

+	}

+

+	return nodes;

+}

+

+function buildBlurBackgroundNodes({

+	track,

+	mediaMap,

+	blurIntensity,

+}: {

+	track: TimelineTrack | undefined;

+	mediaMap: Map<string, MediaAsset>;

+	blurIntensity: number;

+}): BaseNode[] {

+	if (!track) {

+		return [];

+	}

+

+	const nodes: BaseNode[] = [];

+	const elements = getVisibleSortedElements({ track });

+

+	for (const element of elements) {

+		if (element.type !== "video" && element.type !== "image") {

+			continue;

+		}

+

+		const mediaAsset = mediaMap.get(element.mediaId);

+		if (

+			!mediaAsset?.file ||

+			!mediaAsset?.url ||

+			(mediaAsset.type !== "video" && mediaAsset.type !== "image")

+		) {

+			continue;

+		}

+

+		nodes.push(

+			new BlurBackgroundNode({

+				mediaId: mediaAsset.id,

+				url: mediaAsset.url,

+				file: mediaAsset.file,

+				mediaType: mediaAsset.type,

+				duration: element.duration,

+				timeOffset: element.startTime,

+				trimStart: element.trimStart,

+				trimEnd: element.trimEnd,

+				retime: element.type === "video" ? element.retime : undefined,

+				blurIntensity,

+			}),

+		);

+	}

+

+	return nodes;

+}

+

+export type BuildSceneParams = {

+	canvasSize: TCanvasSize;

+	tracks: TimelineTrack[];

+	mediaAssets: MediaAsset[];

+	duration: number;

+	background: TBackground;

+	isPreview?: boolean;

+};

+

+export function buildScene({

+	canvasSize,

+	tracks,

+	mediaAssets,

+	duration,

+	background,

+	isPreview,

+}: BuildSceneParams) {

+	const rootNode = new RootNode({ duration });

+	const mediaMap = new Map(mediaAssets.map((m) => [m.id, m]));

+

+	const visibleTracks = tracks.filter(

+		(track) => !("hidden" in track && track.hidden),

+	);

+

+	const orderedTracksTopToBottom = [

+		...visibleTracks.filter((track) => !isMainTrack(track)),

+		...visibleTracks.filter((track) => isMainTrack(track)),

+	];

+

+	const orderedTracksBottomToTop = orderedTracksTopToBottom.slice().reverse();

+	const mainTrack = orderedTracksBottomToTop.find((track) =>

+		isMainTrack(track),

+	);

+

+	const allNodes = buildTrackNodes({

+		tracks: orderedTracksBottomToTop,

+		mediaMap,

+		canvasSize,

+		isPreview,

+	});

+

+	if (background.type === "blur") {

+		const blurNodes = buildBlurBackgroundNodes({

+			track: mainTrack,

+			mediaMap,

+			blurIntensity: background.blurIntensity ?? DEFAULT_BLUR_INTENSITY,

+		});

+		for (const node of blurNodes) {

+			rootNode.add(node);

+		}

+	} else if (

+		background.type === "color" &&

+		background.color !== "transparent"

+	) {

+		rootNode.add(new ColorNode({ color: background.color }));

+	}

+

+	for (const node of allNodes) {

+		rootNode.add(node);

+	}

+

+	return rootNode;

+}

diff --git a/apps/web/src/services/renderer/scene-exporter.ts b/apps/web/src/services/renderer/scene-exporter.ts
index 6ab8c6f3..2dbb7cdd 100644
--- a/apps/web/src/services/renderer/scene-exporter.ts
+++ b/apps/web/src/services/renderer/scene-exporter.ts
@@ -1,163 +1,163 @@
-import EventEmitter from "eventemitter3";
-
-import {
-	Output,
-	Mp4OutputFormat,
-	WebMOutputFormat,
-	BufferTarget,
-	CanvasSource,
-	AudioBufferSource,
-	QUALITY_LOW,
-	QUALITY_MEDIUM,
-	QUALITY_HIGH,
-	QUALITY_VERY_HIGH,
-} from "mediabunny";
-import type { RootNode } from "./nodes/root-node";
-import type { ExportFormat, ExportQuality } from "@/lib/export";
-import { CanvasRenderer } from "./canvas-renderer";
-
-type ExportParams = {
-	width: number;
-	height: number;
-	fps: number;
-	format: ExportFormat;
-	quality: ExportQuality;
-	shouldIncludeAudio?: boolean;
-	audioBuffer?: AudioBuffer;
-};
-
-const qualityMap = {
-	low: QUALITY_LOW,
-	medium: QUALITY_MEDIUM,
-	high: QUALITY_HIGH,
-	very_high: QUALITY_VERY_HIGH,
-};
-
-export type SceneExporterEvents = {
-	progress: [progress: number];
-	complete: [buffer: ArrayBuffer];
-	error: [error: Error];
-	cancelled: [];
-};
-
-export class SceneExporter extends EventEmitter<SceneExporterEvents> {
-	private renderer: CanvasRenderer;
-	private format: ExportFormat;
-	private quality: ExportQuality;
-	private shouldIncludeAudio: boolean;
-	private audioBuffer?: AudioBuffer;
-
-	private isCancelled = false;
-
-	constructor({
-		width,
-		height,
-		fps,
-		format,
-		quality,
-		shouldIncludeAudio,
-		audioBuffer,
-	}: ExportParams) {
-		super();
-		this.renderer = new CanvasRenderer({
-			width,
-			height,
-			fps,
-		});
-
-		this.format = format;
-		this.quality = quality;
-		this.shouldIncludeAudio = shouldIncludeAudio ?? false;
-		this.audioBuffer = audioBuffer;
-	}
-
-	cancel(): void {
-		this.isCancelled = true;
-	}
-
-	async export({
-		rootNode,
-	}: {
-		rootNode: RootNode;
-	}): Promise<ArrayBuffer | null> {
-		const { fps } = this.renderer;
-		const frameCount = Math.ceil(rootNode.duration * fps);
-
-		const outputFormat =
-			this.format === "webm" ? new WebMOutputFormat() : new Mp4OutputFormat();
-
-		const output = new Output({
-			format: outputFormat,
-			target: new BufferTarget(),
-		});
-
-		const videoSource = new CanvasSource(this.renderer.canvas, {
-			codec: this.format === "webm" ? "vp9" : "avc",
-			bitrate: qualityMap[this.quality],
-		});
-
-		output.addVideoTrack(videoSource, { frameRate: fps });
-
-		let audioSource: AudioBufferSource | null = null;
-		if (this.shouldIncludeAudio && this.audioBuffer) {
-			let audioCodec: "aac" | "opus" =
-				this.format === "webm" ? "opus" : "aac";
-
-			if (audioCodec === "aac" && typeof AudioEncoder !== "undefined") {
-				const { supported } = await AudioEncoder.isConfigSupported({
-					codec: "mp4a.40.2",
-					sampleRate: this.audioBuffer.sampleRate,
-					numberOfChannels: this.audioBuffer.numberOfChannels,
-					bitrate: 192000,
-				});
-				if (!supported) audioCodec = "opus";
-			}
-
-			audioSource = new AudioBufferSource({
-				codec: audioCodec,
-				bitrate: qualityMap[this.quality],
-			});
-			output.addAudioTrack(audioSource);
-		}
-
-		await output.start();
-
-		if (audioSource && this.audioBuffer) {
-			await audioSource.add(this.audioBuffer);
-			audioSource.close();
-		}
-
-		for (let i = 0; i < frameCount; i++) {
-			if (this.isCancelled) {
-				await output.cancel();
-				this.emit("cancelled");
-				return null;
-			}
-
-			const time = i / fps;
-			await this.renderer.render({ node: rootNode, time });
-			await videoSource.add(time, 1 / fps);
-
-			this.emit("progress", i / frameCount);
-		}
-
-		if (this.isCancelled) {
-			await output.cancel();
-			this.emit("cancelled");
-			return null;
-		}
-
-		videoSource.close();
-		await output.finalize();
-		this.emit("progress", 1);
-
-		const buffer = output.target.buffer;
-		if (!buffer) {
-			this.emit("error", new Error("Failed to export video"));
-			return null;
-		}
-
-		this.emit("complete", buffer);
-		return buffer;
-	}
-}
+import EventEmitter from "eventemitter3";

+

+import {

+	Output,

+	Mp4OutputFormat,

+	WebMOutputFormat,

+	BufferTarget,

+	CanvasSource,

+	AudioBufferSource,

+	QUALITY_LOW,

+	QUALITY_MEDIUM,

+	QUALITY_HIGH,

+	QUALITY_VERY_HIGH,

+} from "mediabunny";

+import type { RootNode } from "./nodes/root-node";

+import type { ExportFormat, ExportQuality } from "@/lib/export";

+import { CanvasRenderer } from "./canvas-renderer";

+

+type ExportParams = {

+	width: number;

+	height: number;

+	fps: number;

+	format: ExportFormat;

+	quality: ExportQuality;

+	shouldIncludeAudio?: boolean;

+	audioBuffer?: AudioBuffer;

+};

+

+const qualityMap = {

+	low: QUALITY_LOW,

+	medium: QUALITY_MEDIUM,

+	high: QUALITY_HIGH,

+	very_high: QUALITY_VERY_HIGH,

+};

+

+export type SceneExporterEvents = {

+	progress: [progress: number];

+	complete: [buffer: ArrayBuffer];

+	error: [error: Error];

+	cancelled: [];

+};

+

+export class SceneExporter extends EventEmitter<SceneExporterEvents> {

+	private renderer: CanvasRenderer;

+	private format: ExportFormat;

+	private quality: ExportQuality;

+	private shouldIncludeAudio: boolean;

+	private audioBuffer?: AudioBuffer;

+

+	private isCancelled = false;

+

+	constructor({

+		width,

+		height,

+		fps,

+		format,

+		quality,

+		shouldIncludeAudio,

+		audioBuffer,

+	}: ExportParams) {

+		super();

+		this.renderer = new CanvasRenderer({

+			width,

+			height,

+			fps,

+		});

+

+		this.format = format;

+		this.quality = quality;

+		this.shouldIncludeAudio = shouldIncludeAudio ?? false;

+		this.audioBuffer = audioBuffer;

+	}

+

+	cancel(): void {

+		this.isCancelled = true;

+	}

+

+	async export({

+		rootNode,

+	}: {

+		rootNode: RootNode;

+	}): Promise<ArrayBuffer | null> {

+		const { fps } = this.renderer;

+		const frameCount = Math.ceil(rootNode.duration * fps);

+

+		const outputFormat =

+			this.format === "webm" ? new WebMOutputFormat() : new Mp4OutputFormat();

+

+		const output = new Output({

+			format: outputFormat,

+			target: new BufferTarget(),

+		});

+

+		const videoSource = new CanvasSource(this.renderer.canvas, {

+			codec: this.format === "webm" ? "vp9" : "avc",

+			bitrate: qualityMap[this.quality],

+		});

+

+		output.addVideoTrack(videoSource, { frameRate: fps });

+

+		let audioSource: AudioBufferSource | null = null;

+		if (this.shouldIncludeAudio && this.audioBuffer) {

+			let audioCodec: "aac" | "opus" =

+				this.format === "webm" ? "opus" : "aac";

+

+			if (audioCodec === "aac" && typeof AudioEncoder !== "undefined") {

+				const { supported } = await AudioEncoder.isConfigSupported({

+					codec: "mp4a.40.2",

+					sampleRate: this.audioBuffer.sampleRate,

+					numberOfChannels: this.audioBuffer.numberOfChannels,

+					bitrate: 192000,

+				});

+				if (!supported) audioCodec = "opus";

+			}

+

+			audioSource = new AudioBufferSource({

+				codec: audioCodec,

+				bitrate: qualityMap[this.quality],

+			});

+			output.addAudioTrack(audioSource);

+		}

+

+		await output.start();

+

+		if (audioSource && this.audioBuffer) {

+			await audioSource.add(this.audioBuffer);

+			audioSource.close();

+		}

+

+		for (let i = 0; i < frameCount; i++) {

+			if (this.isCancelled) {

+				await output.cancel();

+				this.emit("cancelled");

+				return null;

+			}

+

+			const time = i / fps;

+			await this.renderer.render({ node: rootNode, time });

+			await videoSource.add(time, 1 / fps);

+

+			this.emit("progress", i / frameCount);

+		}

+

+		if (this.isCancelled) {

+			await output.cancel();

+			this.emit("cancelled");

+			return null;

+		}

+

+		videoSource.close();

+		await output.finalize();

+		this.emit("progress", 1);

+

+		const buffer = output.target.buffer;

+		if (!buffer) {

+			this.emit("error", new Error("Failed to export video"));

+			return null;

+		}

+

+		this.emit("complete", buffer);

+		return buffer;

+	}

+}

diff --git a/apps/web/src/services/renderer/webgl/jfa.ts b/apps/web/src/services/renderer/webgl/jfa.ts
index b69a9d06..9c87e7fa 100644
--- a/apps/web/src/services/renderer/webgl/jfa.ts
+++ b/apps/web/src/services/renderer/webgl/jfa.ts
@@ -1,194 +1,194 @@
-import jfaInitShader from "@/lib/shaders/jfa-init.frag.glsl";
-import jfaStepShader from "@/lib/shaders/jfa-step.frag.glsl";
-import {
-	compileProgram,
-	createFramebufferTexture,
-	setUniforms,
-	drawFullscreenQuad,
-} from "./webgl-utils";
-
-interface FBPair {
-	texture: WebGLTexture;
-	framebuffer: WebGLFramebuffer;
-}
-
-function runPass({
-	context,
-	program,
-	inputTexture,
-	target,
-	width,
-	height,
-	uniforms,
-	extraBindings,
-}: {
-	context: WebGLRenderingContext;
-	program: WebGLProgram;
-	inputTexture: WebGLTexture;
-	target: WebGLFramebuffer | null;
-	width: number;
-	height: number;
-	uniforms: Record<string, number | number[]>;
-	extraBindings?: Array<{ unit: number; texture: WebGLTexture; name: string }>;
-}): void {
-	context.bindFramebuffer(context.FRAMEBUFFER, target);
-	// biome-ignore lint/correctness/useHookAtTopLevel: WebGL API method, not a React hook
-	context.useProgram(program);
-
-	context.activeTexture(context.TEXTURE0);
-	context.bindTexture(context.TEXTURE_2D, inputTexture);
-	const uTexLoc = context.getUniformLocation(program, "u_texture");
-	if (uTexLoc) context.uniform1i(uTexLoc, 0);
-
-	if (extraBindings) {
-		for (const binding of extraBindings) {
-			context.activeTexture(context.TEXTURE0 + binding.unit);
-			context.bindTexture(context.TEXTURE_2D, binding.texture);
-			const loc = context.getUniformLocation(program, binding.name);
-			if (loc) context.uniform1i(loc, binding.unit);
-		}
-	}
-
-	setUniforms({
-		context,
-		program,
-		uniforms: { ...uniforms, u_resolution: [width, height] },
-	});
-	drawFullscreenQuad({ context, program, width, height });
-}
-
-function runJFA({
-	context,
-	programCache,
-	sourceTexture,
-	width,
-	height,
-	isInverted,
-}: {
-	context: WebGLRenderingContext;
-	programCache: Map<string, WebGLProgram>;
-	sourceTexture: WebGLTexture;
-	width: number;
-	height: number;
-	isInverted: boolean;
-}): {
-	resultTexture: WebGLTexture;
-	resultFB: WebGLFramebuffer;
-	tempFBs: FBPair[];
-} {
-	const numSteps = Math.ceil(Math.log2(Math.max(width, height)));
-
-	const fbA = createFramebufferTexture({ context, width, height });
-	const fbB = createFramebufferTexture({ context, width, height });
-
-	const initProgram = compileProgram({
-		context,
-		fragmentShaderSource: jfaInitShader,
-		programCache,
-	});
-	runPass({
-		context,
-		program: initProgram,
-		inputTexture: sourceTexture,
-		target: fbA.framebuffer,
-		width,
-		height,
-		uniforms: { u_invert: isInverted ? 1.0 : 0.0 },
-	});
-
-	const stepProgram = compileProgram({
-		context,
-		fragmentShaderSource: jfaStepShader,
-		programCache,
-	});
-
-	let readFB = fbA;
-	let writeFB = fbB;
-
-	for (let i = numSteps - 1; i >= 0; i--) {
-		const stepSize = 2 ** i;
-		runPass({
-			context,
-			program: stepProgram,
-			inputTexture: readFB.texture,
-			target: writeFB.framebuffer,
-			width,
-			height,
-			uniforms: { u_step_size: stepSize },
-		});
-		const tmp = readFB;
-		readFB = writeFB;
-		writeFB = tmp;
-	}
-
-	return {
-		resultTexture: readFB.texture,
-		resultFB: readFB.framebuffer,
-		tempFBs: [writeFB],
-	};
-}
-
-function cleanupJFAResult({
-	context,
-	result,
-}: {
-	context: WebGLRenderingContext;
-	result: {
-		resultTexture: WebGLTexture;
-		resultFB: WebGLFramebuffer;
-		tempFBs: FBPair[];
-	};
-}): void {
-	context.deleteTexture(result.resultTexture);
-	context.deleteFramebuffer(result.resultFB);
-	for (const fb of result.tempFBs) {
-		context.deleteTexture(fb.texture);
-		context.deleteFramebuffer(fb.framebuffer);
-	}
-}
-
-export { runPass };
-
-export function computeSignedDistanceField({
-	context,
-	programCache,
-	sourceTexture,
-	width,
-	height,
-}: {
-	context: WebGLRenderingContext;
-	programCache: Map<string, WebGLProgram>;
-	sourceTexture: WebGLTexture;
-	width: number;
-	height: number;
-}): {
-	insideTexture: WebGLTexture;
-	outsideTexture: WebGLTexture;
-	cleanup: () => void;
-} {
-	const inside = runJFA({
-		context,
-		programCache,
-		sourceTexture,
-		width,
-		height,
-		isInverted: false,
-	});
-	const outside = runJFA({
-		context,
-		programCache,
-		sourceTexture,
-		width,
-		height,
-		isInverted: true,
-	});
-
-	return {
-		insideTexture: inside.resultTexture,
-		outsideTexture: outside.resultTexture,
-		cleanup: () => {
-			cleanupJFAResult({ context, result: inside });
-			cleanupJFAResult({ context, result: outside });
-		},
-	};
-}
+import jfaInitShader from "@/lib/shaders/jfa-init.frag.glsl";

+import jfaStepShader from "@/lib/shaders/jfa-step.frag.glsl";

+import {

+	compileProgram,

+	createFramebufferTexture,

+	setUniforms,

+	drawFullscreenQuad,

+} from "./webgl-utils";

+

+interface FBPair {

+	texture: WebGLTexture;

+	framebuffer: WebGLFramebuffer;

+}

+

+function runPass({

+	context,

+	program,

+	inputTexture,

+	target,

+	width,

+	height,

+	uniforms,

+	extraBindings,

+}: {

+	context: WebGLRenderingContext;

+	program: WebGLProgram;

+	inputTexture: WebGLTexture;

+	target: WebGLFramebuffer | null;

+	width: number;

+	height: number;

+	uniforms: Record<string, number | number[]>;

+	extraBindings?: Array<{ unit: number; texture: WebGLTexture; name: string }>;

+}): void {

+	context.bindFramebuffer(context.FRAMEBUFFER, target);

+	// biome-ignore lint/correctness/useHookAtTopLevel: WebGL API method, not a React hook

+	context.useProgram(program);

+

+	context.activeTexture(context.TEXTURE0);

+	context.bindTexture(context.TEXTURE_2D, inputTexture);

+	const uTexLoc = context.getUniformLocation(program, "u_texture");

+	if (uTexLoc) context.uniform1i(uTexLoc, 0);

+

+	if (extraBindings) {

+		for (const binding of extraBindings) {

+			context.activeTexture(context.TEXTURE0 + binding.unit);

+			context.bindTexture(context.TEXTURE_2D, binding.texture);

+			const loc = context.getUniformLocation(program, binding.name);

+			if (loc) context.uniform1i(loc, binding.unit);

+		}

+	}

+

+	setUniforms({

+		context,

+		program,

+		uniforms: { ...uniforms, u_resolution: [width, height] },

+	});

+	drawFullscreenQuad({ context, program, width, height });

+}

+

+function runJFA({

+	context,

+	programCache,

+	sourceTexture,

+	width,

+	height,

+	isInverted,

+}: {

+	context: WebGLRenderingContext;

+	programCache: Map<string, WebGLProgram>;

+	sourceTexture: WebGLTexture;

+	width: number;

+	height: number;

+	isInverted: boolean;

+}): {

+	resultTexture: WebGLTexture;

+	resultFB: WebGLFramebuffer;

+	tempFBs: FBPair[];

+} {

+	const numSteps = Math.ceil(Math.log2(Math.max(width, height)));

+

+	const fbA = createFramebufferTexture({ context, width, height });

+	const fbB = createFramebufferTexture({ context, width, height });

+

+	const initProgram = compileProgram({

+		context,

+		fragmentShaderSource: jfaInitShader,

+		programCache,

+	});

+	runPass({

+		context,

+		program: initProgram,

+		inputTexture: sourceTexture,

+		target: fbA.framebuffer,

+		width,

+		height,

+		uniforms: { u_invert: isInverted ? 1.0 : 0.0 },

+	});

+

+	const stepProgram = compileProgram({

+		context,

+		fragmentShaderSource: jfaStepShader,

+		programCache,

+	});

+

+	let readFB = fbA;

+	let writeFB = fbB;

+

+	for (let i = numSteps - 1; i >= 0; i--) {

+		const stepSize = 2 ** i;

+		runPass({

+			context,

+			program: stepProgram,

+			inputTexture: readFB.texture,

+			target: writeFB.framebuffer,

+			width,

+			height,

+			uniforms: { u_step_size: stepSize },

+		});

+		const tmp = readFB;

+		readFB = writeFB;

+		writeFB = tmp;

+	}

+

+	return {

+		resultTexture: readFB.texture,

+		resultFB: readFB.framebuffer,

+		tempFBs: [writeFB],

+	};

+}

+

+function cleanupJFAResult({

+	context,

+	result,

+}: {

+	context: WebGLRenderingContext;

+	result: {

+		resultTexture: WebGLTexture;

+		resultFB: WebGLFramebuffer;

+		tempFBs: FBPair[];

+	};

+}): void {

+	context.deleteTexture(result.resultTexture);

+	context.deleteFramebuffer(result.resultFB);

+	for (const fb of result.tempFBs) {

+		context.deleteTexture(fb.texture);

+		context.deleteFramebuffer(fb.framebuffer);

+	}

+}

+

+export { runPass };

+

+export function computeSignedDistanceField({

+	context,

+	programCache,

+	sourceTexture,

+	width,

+	height,

+}: {

+	context: WebGLRenderingContext;

+	programCache: Map<string, WebGLProgram>;

+	sourceTexture: WebGLTexture;

+	width: number;

+	height: number;

+}): {

+	insideTexture: WebGLTexture;

+	outsideTexture: WebGLTexture;

+	cleanup: () => void;

+} {

+	const inside = runJFA({

+		context,

+		programCache,

+		sourceTexture,

+		width,

+		height,

+		isInverted: false,

+	});

+	const outside = runJFA({

+		context,

+		programCache,

+		sourceTexture,

+		width,

+		height,

+		isInverted: true,

+	});

+

+	return {

+		insideTexture: inside.resultTexture,

+		outsideTexture: outside.resultTexture,

+		cleanup: () => {

+			cleanupJFAResult({ context, result: inside });

+			cleanupJFAResult({ context, result: outside });

+		},

+	};

+}

diff --git a/apps/web/src/services/renderer/webgl/webgl-context.ts b/apps/web/src/services/renderer/webgl/webgl-context.ts
index aeefc503..39869a02 100644
--- a/apps/web/src/services/renderer/webgl/webgl-context.ts
+++ b/apps/web/src/services/renderer/webgl/webgl-context.ts
@@ -1,49 +1,49 @@
-import { createOffscreenCanvas } from "../canvas-utils";
-
-let gl: WebGLRenderingContext | null = null;
-let webglCanvas: OffscreenCanvas | HTMLCanvasElement | null = null;
-const programCache = new Map<string, WebGLProgram>();
-
-export function getWebGLContext({
-	width,
-	height,
-}: {
-	width: number;
-	height: number;
-}): {
-	context: WebGLRenderingContext;
-	programCache: Map<string, WebGLProgram>;
-} {
-	if (!webglCanvas) {
-		webglCanvas = createOffscreenCanvas({ width, height });
-		gl = webglCanvas.getContext("webgl", {
-			premultipliedAlpha: false,
-		}) as WebGLRenderingContext | null;
-		if (!gl) throw new Error("WebGL not supported");
-	}
-	if (webglCanvas.width !== width || webglCanvas.height !== height) {
-		webglCanvas.width = width;
-		webglCanvas.height = height;
-	}
-	if (!gl) throw new Error("WebGL context lost");
-	return { context: gl, programCache };
-}
-
-export function readResult({
-	width,
-	height,
-}: {
-	width: number;
-	height: number;
-}): OffscreenCanvas | HTMLCanvasElement {
-	if (!webglCanvas) throw new Error("WebGL canvas not initialized");
-	const outputCanvas = createOffscreenCanvas({ width, height });
-	const outputCtx = outputCanvas.getContext("2d") as
-		| CanvasRenderingContext2D
-		| OffscreenCanvasRenderingContext2D
-		| null;
-	if (outputCtx) {
-		outputCtx.drawImage(webglCanvas, 0, 0, width, height);
-	}
-	return outputCanvas;
-}
+import { createOffscreenCanvas } from "../canvas-utils";

+

+let gl: WebGLRenderingContext | null = null;

+let webglCanvas: OffscreenCanvas | HTMLCanvasElement | null = null;

+const programCache = new Map<string, WebGLProgram>();

+

+export function getWebGLContext({

+	width,

+	height,

+}: {

+	width: number;

+	height: number;

+}): {

+	context: WebGLRenderingContext;

+	programCache: Map<string, WebGLProgram>;

+} {

+	if (!webglCanvas) {

+		webglCanvas = createOffscreenCanvas({ width, height });

+		gl = webglCanvas.getContext("webgl", {

+			premultipliedAlpha: false,

+		}) as WebGLRenderingContext | null;

+		if (!gl) throw new Error("WebGL not supported");

+	}

+	if (webglCanvas.width !== width || webglCanvas.height !== height) {

+		webglCanvas.width = width;

+		webglCanvas.height = height;

+	}

+	if (!gl) throw new Error("WebGL context lost");

+	return { context: gl, programCache };

+}

+

+export function readResult({

+	width,

+	height,

+}: {

+	width: number;

+	height: number;

+}): OffscreenCanvas | HTMLCanvasElement {

+	if (!webglCanvas) throw new Error("WebGL canvas not initialized");

+	const outputCanvas = createOffscreenCanvas({ width, height });

+	const outputCtx = outputCanvas.getContext("2d") as

+		| CanvasRenderingContext2D

+		| OffscreenCanvasRenderingContext2D

+		| null;

+	if (outputCtx) {

+		outputCtx.drawImage(webglCanvas, 0, 0, width, height);

+	}

+	return outputCanvas;

+}

diff --git a/apps/web/src/services/renderer/webgl/webgl-effect-renderer.ts b/apps/web/src/services/renderer/webgl/webgl-effect-renderer.ts
index 89dcb2ae..95ef990b 100644
--- a/apps/web/src/services/renderer/webgl/webgl-effect-renderer.ts
+++ b/apps/web/src/services/renderer/webgl/webgl-effect-renderer.ts
@@ -1,35 +1,35 @@
-import { getWebGLContext, readResult } from "./webgl-context";
-import { applyMultiPassEffect } from "./webgl-utils";
-import type { EffectPassData } from "./webgl-utils";
-
-export interface ApplyEffectParams {
-	source: CanvasImageSource;
-	width: number;
-	height: number;
-	passes: EffectPassData[];
-}
-
-function applyEffect({
-	source,
-	width,
-	height,
-	passes,
-}: ApplyEffectParams): CanvasImageSource {
-	if (passes.length === 0) {
-		return source;
-	}
-	const { context, programCache } = getWebGLContext({ width, height });
-	applyMultiPassEffect({
-		context,
-		source,
-		width,
-		height,
-		passes,
-		programCache,
-	});
-	return readResult({ width, height });
-}
-
-export const webglEffectRenderer = {
-	applyEffect,
-};
+import { getWebGLContext, readResult } from "./webgl-context";

+import { applyMultiPassEffect } from "./webgl-utils";

+import type { EffectPassData } from "./webgl-utils";

+

+export interface ApplyEffectParams {

+	source: CanvasImageSource;

+	width: number;

+	height: number;

+	passes: EffectPassData[];

+}

+

+function applyEffect({

+	source,

+	width,

+	height,

+	passes,

+}: ApplyEffectParams): CanvasImageSource {

+	if (passes.length === 0) {

+		return source;

+	}

+	const { context, programCache } = getWebGLContext({ width, height });

+	applyMultiPassEffect({

+		context,

+		source,

+		width,

+		height,

+		passes,

+		programCache,

+	});

+	return readResult({ width, height });

+}

+

+export const webglEffectRenderer = {

+	applyEffect,

+};

diff --git a/apps/web/src/services/renderer/webgl/webgl-utils.ts b/apps/web/src/services/renderer/webgl/webgl-utils.ts
index 834c652e..ec207546 100644
--- a/apps/web/src/services/renderer/webgl/webgl-utils.ts
+++ b/apps/web/src/services/renderer/webgl/webgl-utils.ts
@@ -1,298 +1,298 @@
-import VERTEX_SHADER_SOURCE from "@/lib/effects/effect.vert.glsl";
-
-export interface EffectPassData {
-	fragmentShader: string;
-	uniforms: Record<string, number | number[]>;
-}
-
-export const QUAD_POSITIONS = new Float32Array([
-	-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1,
-]);
-
-export function compileProgram({
-	context,
-	fragmentShaderSource,
-	programCache,
-}: {
-	context: WebGLRenderingContext;
-	fragmentShaderSource: string;
-	programCache: Map<string, WebGLProgram>;
-}): WebGLProgram {
-	const cached = programCache.get(fragmentShaderSource);
-	if (cached) {
-		return cached;
-	}
-	const vertexShader = compileShader({
-		context,
-		source: VERTEX_SHADER_SOURCE,
-		type: context.VERTEX_SHADER,
-	});
-	const fragmentShader = compileShader({
-		context,
-		source: fragmentShaderSource,
-		type: context.FRAGMENT_SHADER,
-	});
-	const program = context.createProgram();
-	if (!program) {
-		throw new Error("Failed to create WebGL program");
-	}
-	context.attachShader(program, vertexShader);
-	context.attachShader(program, fragmentShader);
-	context.linkProgram(program);
-	if (!context.getProgramParameter(program, context.LINK_STATUS)) {
-		const info = context.getProgramInfoLog(program);
-		context.deleteProgram(program);
-		throw new Error(`WebGL program link failed: ${info}`);
-	}
-	context.deleteShader(vertexShader);
-	context.deleteShader(fragmentShader);
-	programCache.set(fragmentShaderSource, program);
-	return program;
-}
-
-export function compileShader({
-	context,
-	source,
-	type,
-}: {
-	context: WebGLRenderingContext;
-	source: string;
-	type: number;
-}): WebGLShader {
-	const shader = context.createShader(type);
-	if (!shader) {
-		throw new Error("Failed to create WebGL shader");
-	}
-	context.shaderSource(shader, source);
-	context.compileShader(shader);
-	if (!context.getShaderParameter(shader, context.COMPILE_STATUS)) {
-		const info = context.getShaderInfoLog(shader);
-		context.deleteShader(shader);
-		throw new Error(`WebGL shader compile failed: ${info}`);
-	}
-	return shader;
-}
-
-export function createTexture({
-	context,
-	source,
-}: {
-	context: WebGLRenderingContext;
-	source: CanvasImageSource;
-}): WebGLTexture {
-	const texture = context.createTexture();
-	if (!texture) {
-		throw new Error("Failed to create WebGL texture");
-	}
-	context.activeTexture(context.TEXTURE0);
-	context.bindTexture(context.TEXTURE_2D, texture);
-	context.pixelStorei(context.UNPACK_FLIP_Y_WEBGL, 1);
-	context.texParameteri(
-		context.TEXTURE_2D,
-		context.TEXTURE_WRAP_S,
-		context.CLAMP_TO_EDGE,
-	);
-	context.texParameteri(
-		context.TEXTURE_2D,
-		context.TEXTURE_WRAP_T,
-		context.CLAMP_TO_EDGE,
-	);
-	context.texParameteri(
-		context.TEXTURE_2D,
-		context.TEXTURE_MIN_FILTER,
-		context.LINEAR,
-	);
-	context.texParameteri(
-		context.TEXTURE_2D,
-		context.TEXTURE_MAG_FILTER,
-		context.LINEAR,
-	);
-	context.texImage2D(
-		context.TEXTURE_2D,
-		0,
-		context.RGBA,
-		context.RGBA,
-		context.UNSIGNED_BYTE,
-		source as TexImageSource,
-	);
-	return texture;
-}
-
-export function setUniforms({
-	context,
-	program,
-	uniforms,
-}: {
-	context: WebGLRenderingContext;
-	program: WebGLProgram;
-	uniforms: Record<string, number | number[]>;
-}): void {
-	for (const [name, value] of Object.entries(uniforms)) {
-		const location = context.getUniformLocation(program, name);
-		if (location === null) continue;
-
-		if (typeof value === "number") {
-			context.uniform1f(location, value);
-		} else if (Array.isArray(value)) {
-			if (value.length === 2) {
-				context.uniform2fv(location, new Float32Array(value));
-			} else if (value.length === 3) {
-				context.uniform3fv(location, new Float32Array(value));
-			} else if (value.length === 4) {
-				context.uniform4fv(location, new Float32Array(value));
-			}
-		}
-	}
-}
-
-export function drawFullscreenQuad({
-	context,
-	program,
-	width,
-	height,
-}: {
-	context: WebGLRenderingContext;
-	program: WebGLProgram;
-	width: number;
-	height: number;
-}): void {
-	const positionLocation = context.getAttribLocation(program, "a_position");
-	const buffer = context.createBuffer();
-	context.bindBuffer(context.ARRAY_BUFFER, buffer);
-	context.bufferData(context.ARRAY_BUFFER, QUAD_POSITIONS, context.STATIC_DRAW);
-	context.enableVertexAttribArray(positionLocation);
-	context.vertexAttribPointer(positionLocation, 2, context.FLOAT, false, 0, 0);
-
-	context.viewport(0, 0, width, height);
-	context.clearColor(0, 0, 0, 0);
-	context.clear(context.COLOR_BUFFER_BIT);
-	context.drawArrays(context.TRIANGLES, 0, 6);
-}
-
-export function createFramebufferTexture({
-	context,
-	width,
-	height,
-}: {
-	context: WebGLRenderingContext;
-	width: number;
-	height: number;
-}): { texture: WebGLTexture; framebuffer: WebGLFramebuffer } {
-	const texture = context.createTexture();
-	if (!texture) throw new Error("Failed to create framebuffer texture");
-	context.bindTexture(context.TEXTURE_2D, texture);
-	context.texImage2D(
-		context.TEXTURE_2D,
-		0,
-		context.RGBA,
-		width,
-		height,
-		0,
-		context.RGBA,
-		context.UNSIGNED_BYTE,
-		null,
-	);
-	context.texParameteri(
-		context.TEXTURE_2D,
-		context.TEXTURE_WRAP_S,
-		context.CLAMP_TO_EDGE,
-	);
-	context.texParameteri(
-		context.TEXTURE_2D,
-		context.TEXTURE_WRAP_T,
-		context.CLAMP_TO_EDGE,
-	);
-	context.texParameteri(
-		context.TEXTURE_2D,
-		context.TEXTURE_MIN_FILTER,
-		context.LINEAR,
-	);
-	context.texParameteri(
-		context.TEXTURE_2D,
-		context.TEXTURE_MAG_FILTER,
-		context.LINEAR,
-	);
-	context.bindTexture(context.TEXTURE_2D, null);
-
-	const framebuffer = context.createFramebuffer();
-	if (!framebuffer) throw new Error("Failed to create framebuffer");
-	context.bindFramebuffer(context.FRAMEBUFFER, framebuffer);
-	context.framebufferTexture2D(
-		context.FRAMEBUFFER,
-		context.COLOR_ATTACHMENT0,
-		context.TEXTURE_2D,
-		texture,
-		0,
-	);
-	context.bindFramebuffer(context.FRAMEBUFFER, null);
-
-	return { texture, framebuffer };
-}
-
-export function applyMultiPassEffect({
-	context,
-	source,
-	width,
-	height,
-	passes,
-	programCache,
-}: {
-	context: WebGLRenderingContext;
-	source: CanvasImageSource;
-	width: number;
-	height: number;
-	passes: EffectPassData[];
-	programCache: Map<string, WebGLProgram>;
-}): void {
-	const sourceTexture = createTexture({ context, source });
-	let currentTexture: WebGLTexture = sourceTexture;
-
-	const intermediates: Array<{
-		texture: WebGLTexture;
-		framebuffer: WebGLFramebuffer;
-	}> = [];
-	for (let i = 0; i < passes.length - 1; i++) {
-		intermediates.push(createFramebufferTexture({ context, width, height }));
-	}
-
-	for (let i = 0; i < passes.length; i++) {
-		const pass = passes[i];
-		const program = compileProgram({
-			context,
-			fragmentShaderSource: pass.fragmentShader,
-			programCache,
-		});
-		const isLastPass = i === passes.length - 1;
-		const targetFramebuffer = isLastPass ? null : intermediates[i].framebuffer;
-
-		context.bindFramebuffer(context.FRAMEBUFFER, targetFramebuffer);
-		// biome-ignore lint/correctness/useHookAtTopLevel: WebGL API method, not a React hook
-		context.useProgram(program);
-		context.activeTexture(context.TEXTURE0);
-		context.bindTexture(context.TEXTURE_2D, currentTexture);
-
-		const uTextureLocation = context.getUniformLocation(program, "u_texture");
-		if (uTextureLocation) {
-			context.uniform1i(uTextureLocation, 0);
-		}
-
-		setUniforms({
-			context,
-			program,
-			uniforms: { ...pass.uniforms, u_resolution: [width, height] },
-		});
-		drawFullscreenQuad({ context, program, width, height });
-
-		if (!isLastPass) {
-			currentTexture = intermediates[i].texture;
-		}
-	}
-
-	context.deleteTexture(sourceTexture);
-	for (const intermediate of intermediates) {
-		context.deleteTexture(intermediate.texture);
-		context.deleteFramebuffer(intermediate.framebuffer);
-	}
-	context.bindTexture(context.TEXTURE_2D, null);
-	context.bindFramebuffer(context.FRAMEBUFFER, null);
-}
+import VERTEX_SHADER_SOURCE from "@/lib/effects/effect.vert.glsl";

+

+export interface EffectPassData {

+	fragmentShader: string;

+	uniforms: Record<string, number | number[]>;

+}

+

+export const QUAD_POSITIONS = new Float32Array([

+	-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1,

+]);

+

+export function compileProgram({

+	context,

+	fragmentShaderSource,

+	programCache,

+}: {

+	context: WebGLRenderingContext;

+	fragmentShaderSource: string;

+	programCache: Map<string, WebGLProgram>;

+}): WebGLProgram {

+	const cached = programCache.get(fragmentShaderSource);

+	if (cached) {

+		return cached;

+	}

+	const vertexShader = compileShader({

+		context,

+		source: VERTEX_SHADER_SOURCE,

+		type: context.VERTEX_SHADER,

+	});

+	const fragmentShader = compileShader({

+		context,

+		source: fragmentShaderSource,

+		type: context.FRAGMENT_SHADER,

+	});

+	const program = context.createProgram();

+	if (!program) {

+		throw new Error("Failed to create WebGL program");

+	}

+	context.attachShader(program, vertexShader);

+	context.attachShader(program, fragmentShader);

+	context.linkProgram(program);

+	if (!context.getProgramParameter(program, context.LINK_STATUS)) {

+		const info = context.getProgramInfoLog(program);

+		context.deleteProgram(program);

+		throw new Error(`WebGL program link failed: ${info}`);

+	}

+	context.deleteShader(vertexShader);

+	context.deleteShader(fragmentShader);

+	programCache.set(fragmentShaderSource, program);

+	return program;

+}

+

+export function compileShader({

+	context,

+	source,

+	type,

+}: {

+	context: WebGLRenderingContext;

+	source: string;

+	type: number;

+}): WebGLShader {

+	const shader = context.createShader(type);

+	if (!shader) {

+		throw new Error("Failed to create WebGL shader");

+	}

+	context.shaderSource(shader, source);

+	context.compileShader(shader);

+	if (!context.getShaderParameter(shader, context.COMPILE_STATUS)) {

+		const info = context.getShaderInfoLog(shader);

+		context.deleteShader(shader);

+		throw new Error(`WebGL shader compile failed: ${info}`);

+	}

+	return shader;

+}

+

+export function createTexture({

+	context,

+	source,

+}: {

+	context: WebGLRenderingContext;

+	source: CanvasImageSource;

+}): WebGLTexture {

+	const texture = context.createTexture();

+	if (!texture) {

+		throw new Error("Failed to create WebGL texture");

+	}

+	context.activeTexture(context.TEXTURE0);

+	context.bindTexture(context.TEXTURE_2D, texture);

+	context.pixelStorei(context.UNPACK_FLIP_Y_WEBGL, 1);

+	context.texParameteri(

+		context.TEXTURE_2D,

+		context.TEXTURE_WRAP_S,

+		context.CLAMP_TO_EDGE,

+	);

+	context.texParameteri(

+		context.TEXTURE_2D,

+		context.TEXTURE_WRAP_T,

+		context.CLAMP_TO_EDGE,

+	);

+	context.texParameteri(

+		context.TEXTURE_2D,

+		context.TEXTURE_MIN_FILTER,

+		context.LINEAR,

+	);

+	context.texParameteri(

+		context.TEXTURE_2D,

+		context.TEXTURE_MAG_FILTER,

+		context.LINEAR,

+	);

+	context.texImage2D(

+		context.TEXTURE_2D,

+		0,

+		context.RGBA,

+		context.RGBA,

+		context.UNSIGNED_BYTE,

+		source as TexImageSource,

+	);

+	return texture;

+}

+

+export function setUniforms({

+	context,

+	program,

+	uniforms,

+}: {

+	context: WebGLRenderingContext;

+	program: WebGLProgram;

+	uniforms: Record<string, number | number[]>;

+}): void {

+	for (const [name, value] of Object.entries(uniforms)) {

+		const location = context.getUniformLocation(program, name);

+		if (location === null) continue;

+

+		if (typeof value === "number") {

+			context.uniform1f(location, value);

+		} else if (Array.isArray(value)) {

+			if (value.length === 2) {

+				context.uniform2fv(location, new Float32Array(value));

+			} else if (value.length === 3) {

+				context.uniform3fv(location, new Float32Array(value));

+			} else if (value.length === 4) {

+				context.uniform4fv(location, new Float32Array(value));

+			}

+		}

+	}

+}

+

+export function drawFullscreenQuad({

+	context,

+	program,

+	width,

+	height,

+}: {

+	context: WebGLRenderingContext;

+	program: WebGLProgram;

+	width: number;

+	height: number;

+}): void {

+	const positionLocation = context.getAttribLocation(program, "a_position");

+	const buffer = context.createBuffer();

+	context.bindBuffer(context.ARRAY_BUFFER, buffer);

+	context.bufferData(context.ARRAY_BUFFER, QUAD_POSITIONS, context.STATIC_DRAW);

+	context.enableVertexAttribArray(positionLocation);

+	context.vertexAttribPointer(positionLocation, 2, context.FLOAT, false, 0, 0);

+

+	context.viewport(0, 0, width, height);

+	context.clearColor(0, 0, 0, 0);

+	context.clear(context.COLOR_BUFFER_BIT);

+	context.drawArrays(context.TRIANGLES, 0, 6);

+}

+

+export function createFramebufferTexture({

+	context,

+	width,

+	height,

+}: {

+	context: WebGLRenderingContext;

+	width: number;

+	height: number;

+}): { texture: WebGLTexture; framebuffer: WebGLFramebuffer } {

+	const texture = context.createTexture();

+	if (!texture) throw new Error("Failed to create framebuffer texture");

+	context.bindTexture(context.TEXTURE_2D, texture);

+	context.texImage2D(

+		context.TEXTURE_2D,

+		0,

+		context.RGBA,

+		width,

+		height,

+		0,

+		context.RGBA,

+		context.UNSIGNED_BYTE,

+		null,

+	);

+	context.texParameteri(

+		context.TEXTURE_2D,

+		context.TEXTURE_WRAP_S,

+		context.CLAMP_TO_EDGE,

+	);

+	context.texParameteri(

+		context.TEXTURE_2D,

+		context.TEXTURE_WRAP_T,

+		context.CLAMP_TO_EDGE,

+	);

+	context.texParameteri(

+		context.TEXTURE_2D,

+		context.TEXTURE_MIN_FILTER,

+		context.LINEAR,

+	);

+	context.texParameteri(

+		context.TEXTURE_2D,

+		context.TEXTURE_MAG_FILTER,

+		context.LINEAR,

+	);

+	context.bindTexture(context.TEXTURE_2D, null);

+

+	const framebuffer = context.createFramebuffer();

+	if (!framebuffer) throw new Error("Failed to create framebuffer");

+	context.bindFramebuffer(context.FRAMEBUFFER, framebuffer);

+	context.framebufferTexture2D(

+		context.FRAMEBUFFER,

+		context.COLOR_ATTACHMENT0,

+		context.TEXTURE_2D,

+		texture,

+		0,

+	);

+	context.bindFramebuffer(context.FRAMEBUFFER, null);

+

+	return { texture, framebuffer };

+}

+

+export function applyMultiPassEffect({

+	context,

+	source,

+	width,

+	height,

+	passes,

+	programCache,

+}: {

+	context: WebGLRenderingContext;

+	source: CanvasImageSource;

+	width: number;

+	height: number;

+	passes: EffectPassData[];

+	programCache: Map<string, WebGLProgram>;

+}): void {

+	const sourceTexture = createTexture({ context, source });

+	let currentTexture: WebGLTexture = sourceTexture;

+

+	const intermediates: Array<{

+		texture: WebGLTexture;

+		framebuffer: WebGLFramebuffer;

+	}> = [];

+	for (let i = 0; i < passes.length - 1; i++) {

+		intermediates.push(createFramebufferTexture({ context, width, height }));

+	}

+

+	for (let i = 0; i < passes.length; i++) {

+		const pass = passes[i];

+		const program = compileProgram({

+			context,

+			fragmentShaderSource: pass.fragmentShader,

+			programCache,

+		});

+		const isLastPass = i === passes.length - 1;

+		const targetFramebuffer = isLastPass ? null : intermediates[i].framebuffer;

+

+		context.bindFramebuffer(context.FRAMEBUFFER, targetFramebuffer);

+		// biome-ignore lint/correctness/useHookAtTopLevel: WebGL API method, not a React hook

+		context.useProgram(program);

+		context.activeTexture(context.TEXTURE0);

+		context.bindTexture(context.TEXTURE_2D, currentTexture);

+

+		const uTextureLocation = context.getUniformLocation(program, "u_texture");

+		if (uTextureLocation) {

+			context.uniform1i(uTextureLocation, 0);

+		}

+

+		setUniforms({

+			context,

+			program,

+			uniforms: { ...pass.uniforms, u_resolution: [width, height] },

+		});

+		drawFullscreenQuad({ context, program, width, height });

+

+		if (!isLastPass) {

+			currentTexture = intermediates[i].texture;

+		}

+	}

+

+	context.deleteTexture(sourceTexture);

+	for (const intermediate of intermediates) {

+		context.deleteTexture(intermediate.texture);

+		context.deleteFramebuffer(intermediate.framebuffer);

+	}

+	context.bindTexture(context.TEXTURE_2D, null);

+	context.bindFramebuffer(context.FRAMEBUFFER, null);

+}

diff --git a/apps/web/src/services/storage/migrations/__tests__/fixtures/index.ts b/apps/web/src/services/storage/migrations/__tests__/fixtures/index.ts
index 5f82e14a..a97e42d7 100644
--- a/apps/web/src/services/storage/migrations/__tests__/fixtures/index.ts
+++ b/apps/web/src/services/storage/migrations/__tests__/fixtures/index.ts
@@ -1,10 +1,10 @@
-/**
- * Test fixtures for storage migrations.
- * These represent real project data shapes from each version.
- */
-
-export * from "./v0";
-export * from "./v1";
-export * from "./v2";
-export * from "./v3";
-export * from "./v5";
+/**

+ * Test fixtures for storage migrations.

+ * These represent real project data shapes from each version.

+ */

+

+export * from "./v0";

+export * from "./v1";

+export * from "./v2";

+export * from "./v3";

+export * from "./v5";

diff --git a/apps/web/src/services/storage/migrations/__tests__/fixtures/v5.ts b/apps/web/src/services/storage/migrations/__tests__/fixtures/v5.ts
index 5e181c76..89bb83c3 100644
--- a/apps/web/src/services/storage/migrations/__tests__/fixtures/v5.ts
+++ b/apps/web/src/services/storage/migrations/__tests__/fixtures/v5.ts
@@ -1,54 +1,54 @@
-export const v5Project = {
-	id: "project-v5-456",
-	version: 5,
-	metadata: {
-		id: "project-v5-456",
-		name: "My V5 Project",
-		thumbnail: "data:image/png;base64,abc123",
-		duration: 30,
-		createdAt: "2024-06-01T10:00:00.000Z",
-		updatedAt: "2024-06-01T14: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-1",
-					type: "video",
-					name: "Video Track",
-					isMain: true,
-					elements: [],
-				},
-			],
-			bookmarks: [2.0, 5.5, 12.0],
-			createdAt: "2024-06-01T10:00:00.000Z",
-			updatedAt: "2024-06-01T14:00:00.000Z",
-		},
-		{
-			id: "scene-intro",
-			name: "Intro",
-			isMain: false,
-			tracks: [
-				{
-					id: "track-2",
-					type: "video",
-					name: "Video Track",
-					isMain: true,
-					elements: [],
-				},
-			],
-			bookmarks: [],
-			createdAt: "2024-06-01T10:00:00.000Z",
-			updatedAt: "2024-06-01T14:00:00.000Z",
-		},
-	],
-};
+export const v5Project = {

+	id: "project-v5-456",

+	version: 5,

+	metadata: {

+		id: "project-v5-456",

+		name: "My V5 Project",

+		thumbnail: "data:image/png;base64,abc123",

+		duration: 30,

+		createdAt: "2024-06-01T10:00:00.000Z",

+		updatedAt: "2024-06-01T14: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-1",

+					type: "video",

+					name: "Video Track",

+					isMain: true,

+					elements: [],

+				},

+			],

+			bookmarks: [2.0, 5.5, 12.0],

+			createdAt: "2024-06-01T10:00:00.000Z",

+			updatedAt: "2024-06-01T14:00:00.000Z",

+		},

+		{

+			id: "scene-intro",

+			name: "Intro",

+			isMain: false,

+			tracks: [

+				{

+					id: "track-2",

+					type: "video",

+					name: "Video Track",

+					isMain: true,

+					elements: [],

+				},

+			],

+			bookmarks: [],

+			createdAt: "2024-06-01T10:00:00.000Z",

+			updatedAt: "2024-06-01T14:00:00.000Z",

+		},

+	],

+};

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
index f2a4908f..122af2cb 100644
--- 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
@@ -1,93 +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");
-	});
-});
+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
index e246943e..352ca762 100644
--- 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
@@ -1,132 +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");
-	});
-});
+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
index 7524a8d4..0f679b6d 100644
--- 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
@@ -1,63 +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");
-	});
-});
+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");

+	});

+});

diff --git a/apps/web/src/services/storage/migrations/__tests__/v3-to-v4.test.ts b/apps/web/src/services/storage/migrations/__tests__/v3-to-v4.test.ts
index 81d03147..6c2d6597 100644
--- a/apps/web/src/services/storage/migrations/__tests__/v3-to-v4.test.ts
+++ b/apps/web/src/services/storage/migrations/__tests__/v3-to-v4.test.ts
@@ -1,140 +1,140 @@
-import { describe, expect, test } from "bun:test";
-import { transformProjectV3ToV4 } from "../transformers/v3-to-v4";
-import { v3Project } from "./fixtures";
-
-describe("V3 to V4 Migration", () => {
-	test("normalizes legacy text fontWeight values", () => {
-		const projectWithLegacyTextWeight = {
-			...v3Project,
-			scenes: [
-				{
-					...v3Project.scenes[0],
-					tracks: [
-						{
-							id: "track-text",
-							type: "text",
-							name: "Text Track",
-							hidden: false,
-							elements: [
-								{
-									id: "text-1",
-									type: "text",
-									name: "Title",
-									content: "Hello",
-									duration: 5,
-									startTime: 0,
-									trimStart: 0,
-									trimEnd: 0,
-									fontSize: 64,
-									fontFamily: "Inter",
-									color: "#ffffff",
-									backgroundColor: "transparent",
-									textAlign: "center",
-									fontWeight: "bold",
-									fontStyle: "normal",
-									textDecoration: "none",
-									transform: {
-										scale: 1,
-										position: { x: 0, y: 0 },
-										rotate: 0,
-									},
-									opacity: 1,
-								},
-							],
-						},
-					],
-				},
-			],
-		};
-
-		const result = transformProjectV3ToV4({
-			project: projectWithLegacyTextWeight,
-		});
-
-		expect(result.skipped).toBe(false);
-		expect(result.project.version).toBe(4);
-
-		const migratedScene = (
-			result.project.scenes as Array<Record<string, unknown>>
-		)[0];
-		const migratedTrack = (
-			migratedScene.tracks as Array<Record<string, unknown>>
-		)[0];
-		const migratedElement = (
-			migratedTrack.elements as Array<Record<string, unknown>>
-		)[0];
-
-		expect(migratedElement.fontWeight).toBe("700");
-	});
-
-	test("does not mutate non-text tracks", () => {
-		const projectWithoutTextTrack = {
-			...v3Project,
-			scenes: [
-				{
-					...v3Project.scenes[0],
-					tracks: [
-						{
-							id: "track-sticker",
-							type: "sticker",
-							name: "Sticker Track",
-							hidden: false,
-							elements: [
-								{
-									id: "sticker-1",
-									type: "sticker",
-									name: "Flag",
-									iconName: "mdi:home",
-									duration: 5,
-									startTime: 0,
-									trimStart: 0,
-									trimEnd: 0,
-									transform: {
-										scale: 1,
-										position: { x: 0, y: 0 },
-										rotate: 0,
-									},
-									opacity: 1,
-								},
-							],
-						},
-					],
-				},
-			],
-		};
-
-		const result = transformProjectV3ToV4({ project: projectWithoutTextTrack });
-		const migratedScene = (
-			result.project.scenes as Array<Record<string, unknown>>
-		)[0];
-		const migratedTrack = (
-			migratedScene.tracks as Array<Record<string, unknown>>
-		)[0];
-		const migratedElement = (
-			migratedTrack.elements as Array<Record<string, unknown>>
-		)[0];
-
-		expect(migratedElement.iconName).toBe("mdi:home");
-	});
-
-	test("skips projects that are already v4", () => {
-		const result = transformProjectV3ToV4({
-			project: { ...v3Project, version: 4 },
-		});
-
-		expect(result.skipped).toBe(true);
-		expect(result.reason).toBe("already v4");
-	});
-
-	test("skips projects with no id", () => {
-		const result = transformProjectV3ToV4({
-			project: {
-				version: 3,
-				scenes: [],
-			},
-		});
-
-		expect(result.skipped).toBe(true);
-		expect(result.reason).toBe("no project id");
-	});
-});
+import { describe, expect, test } from "bun:test";

+import { transformProjectV3ToV4 } from "../transformers/v3-to-v4";

+import { v3Project } from "./fixtures";

+

+describe("V3 to V4 Migration", () => {

+	test("normalizes legacy text fontWeight values", () => {

+		const projectWithLegacyTextWeight = {

+			...v3Project,

+			scenes: [

+				{

+					...v3Project.scenes[0],

+					tracks: [

+						{

+							id: "track-text",

+							type: "text",

+							name: "Text Track",

+							hidden: false,

+							elements: [

+								{

+									id: "text-1",

+									type: "text",

+									name: "Title",

+									content: "Hello",

+									duration: 5,

+									startTime: 0,

+									trimStart: 0,

+									trimEnd: 0,

+									fontSize: 64,

+									fontFamily: "Inter",

+									color: "#ffffff",

+									backgroundColor: "transparent",

+									textAlign: "center",

+									fontWeight: "bold",

+									fontStyle: "normal",

+									textDecoration: "none",

+									transform: {

+										scale: 1,

+										position: { x: 0, y: 0 },

+										rotate: 0,

+									},

+									opacity: 1,

+								},

+							],

+						},

+					],

+				},

+			],

+		};

+

+		const result = transformProjectV3ToV4({

+			project: projectWithLegacyTextWeight,

+		});

+

+		expect(result.skipped).toBe(false);

+		expect(result.project.version).toBe(4);

+

+		const migratedScene = (

+			result.project.scenes as Array<Record<string, unknown>>

+		)[0];

+		const migratedTrack = (

+			migratedScene.tracks as Array<Record<string, unknown>>

+		)[0];

+		const migratedElement = (

+			migratedTrack.elements as Array<Record<string, unknown>>

+		)[0];

+

+		expect(migratedElement.fontWeight).toBe("700");

+	});

+

+	test("does not mutate non-text tracks", () => {

+		const projectWithoutTextTrack = {

+			...v3Project,

+			scenes: [

+				{

+					...v3Project.scenes[0],

+					tracks: [

+						{

+							id: "track-sticker",

+							type: "sticker",

+							name: "Sticker Track",

+							hidden: false,

+							elements: [

+								{

+									id: "sticker-1",

+									type: "sticker",

+									name: "Flag",

+									iconName: "mdi:home",

+									duration: 5,

+									startTime: 0,

+									trimStart: 0,

+									trimEnd: 0,

+									transform: {

+										scale: 1,

+										position: { x: 0, y: 0 },

+										rotate: 0,

+									},

+									opacity: 1,

+								},

+							],

+						},

+					],

+				},

+			],

+		};

+

+		const result = transformProjectV3ToV4({ project: projectWithoutTextTrack });

+		const migratedScene = (

+			result.project.scenes as Array<Record<string, unknown>>

+		)[0];

+		const migratedTrack = (

+			migratedScene.tracks as Array<Record<string, unknown>>

+		)[0];

+		const migratedElement = (

+			migratedTrack.elements as Array<Record<string, unknown>>

+		)[0];

+

+		expect(migratedElement.iconName).toBe("mdi:home");

+	});

+

+	test("skips projects that are already v4", () => {

+		const result = transformProjectV3ToV4({

+			project: { ...v3Project, version: 4 },

+		});

+

+		expect(result.skipped).toBe(true);

+		expect(result.reason).toBe("already v4");

+	});

+

+	test("skips projects with no id", () => {

+		const result = transformProjectV3ToV4({

+			project: {

+				version: 3,

+				scenes: [],

+			},

+		});

+

+		expect(result.skipped).toBe(true);

+		expect(result.reason).toBe("no project id");

+	});

+});

diff --git a/apps/web/src/services/storage/migrations/__tests__/v4-to-v5.test.ts b/apps/web/src/services/storage/migrations/__tests__/v4-to-v5.test.ts
index ce0c3019..95386137 100644
--- a/apps/web/src/services/storage/migrations/__tests__/v4-to-v5.test.ts
+++ b/apps/web/src/services/storage/migrations/__tests__/v4-to-v5.test.ts
@@ -1,137 +1,137 @@
-import { describe, expect, test } from "bun:test";
-import { transformProjectV4ToV5 } from "../transformers/v4-to-v5";
-import { v3Project } from "./fixtures";
-
-describe("V4 to V5 Migration", () => {
-	test("migrates sticker iconName to stickerId and removes legacy color", () => {
-		const projectWithLegacySticker = {
-			...v3Project,
-			version: 4,
-			scenes: [
-				{
-					...v3Project.scenes[0],
-					tracks: [
-						{
-							id: "track-sticker",
-							type: "sticker",
-							name: "Sticker Track",
-							hidden: false,
-							elements: [
-								{
-									id: "sticker-1",
-									type: "sticker",
-									name: "Home",
-									iconName: "mdi:home",
-									color: "#ff0000",
-									duration: 5,
-									startTime: 0,
-									trimStart: 0,
-									trimEnd: 0,
-									transform: {
-										scale: 1,
-										position: { x: 0, y: 0 },
-										rotate: 0,
-									},
-									opacity: 1,
-								},
-							],
-						},
-					],
-				},
-			],
-		};
-
-		const result = transformProjectV4ToV5({
-			project: projectWithLegacySticker,
-		});
-
-		expect(result.skipped).toBe(false);
-		expect(result.project.version).toBe(5);
-
-		const migratedScene = (
-			result.project.scenes as Array<Record<string, unknown>>
-		)[0];
-		const migratedTrack = (
-			migratedScene.tracks as Array<Record<string, unknown>>
-		)[0];
-		const migratedElement = (
-			migratedTrack.elements as Array<Record<string, unknown>>
-		)[0];
-
-		expect(migratedElement.stickerId).toBe("icons:mdi:home");
-		expect("iconName" in migratedElement).toBe(false);
-		expect("color" in migratedElement).toBe(false);
-	});
-
-	test("keeps provider-prefixed stickerId values unchanged", () => {
-		const projectWithStickerId = {
-			...v3Project,
-			version: 4,
-			scenes: [
-				{
-					...v3Project.scenes[0],
-					tracks: [
-						{
-							id: "track-sticker",
-							type: "sticker",
-							name: "Sticker Track",
-							hidden: false,
-							elements: [
-								{
-									id: "sticker-1",
-									type: "sticker",
-									name: "Flag",
-									stickerId: "flags:AD",
-									duration: 5,
-									startTime: 0,
-									trimStart: 0,
-									trimEnd: 0,
-									transform: {
-										scale: 1,
-										position: { x: 0, y: 0 },
-										rotate: 0,
-									},
-									opacity: 1,
-								},
-							],
-						},
-					],
-				},
-			],
-		};
-
-		const result = transformProjectV4ToV5({ project: projectWithStickerId });
-		const migratedScene = (
-			result.project.scenes as Array<Record<string, unknown>>
-		)[0];
-		const migratedTrack = (
-			migratedScene.tracks as Array<Record<string, unknown>>
-		)[0];
-		const migratedElement = (
-			migratedTrack.elements as Array<Record<string, unknown>>
-		)[0];
-
-		expect(migratedElement.stickerId).toBe("flags:AD");
-	});
-
-	test("skips projects that are already v5", () => {
-		const result = transformProjectV4ToV5({
-			project: { ...v3Project, version: 5 },
-		});
-
-		expect(result.skipped).toBe(true);
-		expect(result.reason).toBe("already v5");
-	});
-
-	test("skips projects with no id", () => {
-		const result = transformProjectV4ToV5({
-			project: {
-				version: 4,
-				scenes: [],
-			},
-		});
-
-		expect(result.skipped).toBe(true);
-		expect(result.reason).toBe("no project id");
-	});
-});
+import { describe, expect, test } from "bun:test";

+import { transformProjectV4ToV5 } from "../transformers/v4-to-v5";

+import { v3Project } from "./fixtures";

+

+describe("V4 to V5 Migration", () => {

+	test("migrates sticker iconName to stickerId and removes legacy color", () => {

+		const projectWithLegacySticker = {

+			...v3Project,

+			version: 4,

+			scenes: [

+				{

+					...v3Project.scenes[0],

+					tracks: [

+						{

+							id: "track-sticker",

+							type: "sticker",

+							name: "Sticker Track",

+							hidden: false,

+							elements: [

+								{

+									id: "sticker-1",

+									type: "sticker",

+									name: "Home",

+									iconName: "mdi:home",

+									color: "#ff0000",

+									duration: 5,

+									startTime: 0,

+									trimStart: 0,

+									trimEnd: 0,

+									transform: {

+										scale: 1,

+										position: { x: 0, y: 0 },

+										rotate: 0,

+									},

+									opacity: 1,

+								},

+							],

+						},

+					],

+				},

+			],

+		};

+

+		const result = transformProjectV4ToV5({

+			project: projectWithLegacySticker,

+		});

+

+		expect(result.skipped).toBe(false);

+		expect(result.project.version).toBe(5);

+

+		const migratedScene = (

+			result.project.scenes as Array<Record<string, unknown>>

+		)[0];

+		const migratedTrack = (

+			migratedScene.tracks as Array<Record<string, unknown>>

+		)[0];

+		const migratedElement = (

+			migratedTrack.elements as Array<Record<string, unknown>>

+		)[0];

+

+		expect(migratedElement.stickerId).toBe("icons:mdi:home");

+		expect("iconName" in migratedElement).toBe(false);

+		expect("color" in migratedElement).toBe(false);

+	});

+

+	test("keeps provider-prefixed stickerId values unchanged", () => {

+		const projectWithStickerId = {

+			...v3Project,

+			version: 4,

+			scenes: [

+				{

+					...v3Project.scenes[0],

+					tracks: [

+						{

+							id: "track-sticker",

+							type: "sticker",

+							name: "Sticker Track",

+							hidden: false,

+							elements: [

+								{

+									id: "sticker-1",

+									type: "sticker",

+									name: "Flag",

+									stickerId: "flags:AD",

+									duration: 5,

+									startTime: 0,

+									trimStart: 0,

+									trimEnd: 0,

+									transform: {

+										scale: 1,

+										position: { x: 0, y: 0 },

+										rotate: 0,

+									},

+									opacity: 1,

+								},

+							],

+						},

+					],

+				},

+			],

+		};

+

+		const result = transformProjectV4ToV5({ project: projectWithStickerId });

+		const migratedScene = (

+			result.project.scenes as Array<Record<string, unknown>>

+		)[0];

+		const migratedTrack = (

+			migratedScene.tracks as Array<Record<string, unknown>>

+		)[0];

+		const migratedElement = (

+			migratedTrack.elements as Array<Record<string, unknown>>

+		)[0];

+

+		expect(migratedElement.stickerId).toBe("flags:AD");

+	});

+

+	test("skips projects that are already v5", () => {

+		const result = transformProjectV4ToV5({

+			project: { ...v3Project, version: 5 },

+		});

+

+		expect(result.skipped).toBe(true);

+		expect(result.reason).toBe("already v5");

+	});

+

+	test("skips projects with no id", () => {

+		const result = transformProjectV4ToV5({

+			project: {

+				version: 4,

+				scenes: [],

+			},

+		});

+

+		expect(result.skipped).toBe(true);

+		expect(result.reason).toBe("no project id");

+	});

+});

diff --git a/apps/web/src/services/storage/migrations/__tests__/v5-to-v6.test.ts b/apps/web/src/services/storage/migrations/__tests__/v5-to-v6.test.ts
index 6bbd5634..66e87713 100644
--- a/apps/web/src/services/storage/migrations/__tests__/v5-to-v6.test.ts
+++ b/apps/web/src/services/storage/migrations/__tests__/v5-to-v6.test.ts
@@ -1,92 +1,92 @@
-import { describe, expect, test } from "bun:test";
-import { transformProjectV5ToV6 } from "../transformers/v5-to-v6";
-import { v5Project } from "./fixtures";
-
-describe("V5 to V6 Migration", () => {
-	test("converts number bookmarks to Bookmark objects", async () => {
-		const result = transformProjectV5ToV6({
-			project: v5Project as Parameters<
-				typeof transformProjectV5ToV6
-			>[0]["project"],
-		});
-
-		expect(result.skipped).toBe(false);
-		expect(result.project.version).toBe(6);
-
-		const mainScene = (
-			result.project.scenes as Array<{ bookmarks: unknown[] }>
-		)[0];
-		expect(mainScene.bookmarks).toEqual([
-			{ time: 2.0 },
-			{ time: 5.5 },
-			{ time: 12.0 },
-		]);
-
-		const introScene = (
-			result.project.scenes as Array<{ bookmarks: unknown[] }>
-		)[1];
-		expect(introScene.bookmarks).toEqual([]);
-	});
-
-	test("skips projects that are already v6", () => {
-		const result = transformProjectV5ToV6({
-			project: {
-				...v5Project,
-				version: 6,
-				scenes: [
-					{
-						...(v5Project as { scenes: unknown[] }).scenes[0],
-						bookmarks: [{ time: 2 }, { time: 5 }],
-					},
-				],
-			} as Parameters<typeof transformProjectV5ToV6>[0]["project"],
-		});
-
-		expect(result.skipped).toBe(true);
-		expect(result.reason).toBe("already v6");
-	});
-
-	test("skips projects with no id", () => {
-		const result = transformProjectV5ToV6({
-			project: {
-				version: 5,
-				scenes: [],
-			} as Parameters<typeof transformProjectV5ToV6>[0]["project"],
-		});
-
-		expect(result.skipped).toBe(true);
-		expect(result.reason).toBe("no project id");
-	});
-
-	test("preserves existing Bookmark objects with note, color, duration", () => {
-		const projectWithRichBookmarks = {
-			...v5Project,
-			version: 5,
-			scenes: [
-				{
-					...(v5Project as { scenes: Array<Record<string, unknown>> })
-						.scenes[0],
-					bookmarks: [
-						{ time: 1, note: "Intro", color: "#ef4444" },
-						{ time: 5.5, duration: 2 },
-					],
-				},
-			],
-		};
-
-		const result = transformProjectV5ToV6({
-			project: projectWithRichBookmarks as Parameters<
-				typeof transformProjectV5ToV6
-			>[0]["project"],
-		});
-
-		expect(result.skipped).toBe(false);
-		const mainScene = (
-			result.project.scenes as Array<{ bookmarks: unknown[] }>
-		)[0];
-		expect(mainScene.bookmarks).toEqual([
-			{ time: 1, note: "Intro", color: "#ef4444" },
-			{ time: 5.5, duration: 2 },
-		]);
-	});
-});
+import { describe, expect, test } from "bun:test";

+import { transformProjectV5ToV6 } from "../transformers/v5-to-v6";

+import { v5Project } from "./fixtures";

+

+describe("V5 to V6 Migration", () => {

+	test("converts number bookmarks to Bookmark objects", async () => {

+		const result = transformProjectV5ToV6({

+			project: v5Project as Parameters<

+				typeof transformProjectV5ToV6

+			>[0]["project"],

+		});

+

+		expect(result.skipped).toBe(false);

+		expect(result.project.version).toBe(6);

+

+		const mainScene = (

+			result.project.scenes as Array<{ bookmarks: unknown[] }>

+		)[0];

+		expect(mainScene.bookmarks).toEqual([

+			{ time: 2.0 },

+			{ time: 5.5 },

+			{ time: 12.0 },

+		]);

+

+		const introScene = (

+			result.project.scenes as Array<{ bookmarks: unknown[] }>

+		)[1];

+		expect(introScene.bookmarks).toEqual([]);

+	});

+

+	test("skips projects that are already v6", () => {

+		const result = transformProjectV5ToV6({

+			project: {

+				...v5Project,

+				version: 6,

+				scenes: [

+					{

+						...(v5Project as { scenes: unknown[] }).scenes[0],

+						bookmarks: [{ time: 2 }, { time: 5 }],

+					},

+				],

+			} as Parameters<typeof transformProjectV5ToV6>[0]["project"],

+		});

+

+		expect(result.skipped).toBe(true);

+		expect(result.reason).toBe("already v6");

+	});

+

+	test("skips projects with no id", () => {

+		const result = transformProjectV5ToV6({

+			project: {

+				version: 5,

+				scenes: [],

+			} as Parameters<typeof transformProjectV5ToV6>[0]["project"],

+		});

+

+		expect(result.skipped).toBe(true);

+		expect(result.reason).toBe("no project id");

+	});

+

+	test("preserves existing Bookmark objects with note, color, duration", () => {

+		const projectWithRichBookmarks = {

+			...v5Project,

+			version: 5,

+			scenes: [

+				{

+					...(v5Project as { scenes: Array<Record<string, unknown>> })

+						.scenes[0],

+					bookmarks: [

+						{ time: 1, note: "Intro", color: "#ef4444" },

+						{ time: 5.5, duration: 2 },

+					],

+				},

+			],

+		};

+

+		const result = transformProjectV5ToV6({

+			project: projectWithRichBookmarks as Parameters<

+				typeof transformProjectV5ToV6

+			>[0]["project"],

+		});

+

+		expect(result.skipped).toBe(false);

+		const mainScene = (

+			result.project.scenes as Array<{ bookmarks: unknown[] }>

+		)[0];

+		expect(mainScene.bookmarks).toEqual([

+			{ time: 1, note: "Intro", color: "#ef4444" },

+			{ time: 5.5, duration: 2 },

+		]);

+	});

+});

diff --git a/apps/web/src/services/storage/migrations/__tests__/v8-to-v9.test.ts b/apps/web/src/services/storage/migrations/__tests__/v8-to-v9.test.ts
index 51e91f78..aa79a6ea 100644
--- a/apps/web/src/services/storage/migrations/__tests__/v8-to-v9.test.ts
+++ b/apps/web/src/services/storage/migrations/__tests__/v8-to-v9.test.ts
@@ -1,175 +1,175 @@
-import { describe, expect, test } from "bun:test";
-import { transformProjectV8ToV9 } from "../transformers/v8-to-v9";
-
-const v8ProjectWithText = {
-	id: "project-v8-text",
-	version: 8,
-	metadata: {
-		id: "project-v8-text",
-		name: "V8 Project with Text",
-		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-text",
-					type: "text",
-					name: "Text Track",
-					hidden: false,
-					elements: [
-						{
-							id: "el-1",
-							type: "text",
-							content: "With color",
-							startTime: 0,
-							duration: 5,
-							background: {
-								color: "#ff0000",
-								cornerRadius: 0,
-								paddingX: 8,
-								paddingY: 4,
-							},
-						},
-						{
-							id: "el-2",
-							type: "text",
-							content: "Transparent",
-							startTime: 5,
-							duration: 5,
-							background: {
-								color: "transparent",
-								paddingX: 30,
-								paddingY: 42,
-							},
-						},
-					],
-				},
-			],
-			bookmarks: [],
-			createdAt: "2024-01-01T00:00:00.000Z",
-			updatedAt: "2024-01-01T00:00:00.000Z",
-		},
-	],
-} as Parameters<typeof transformProjectV8ToV9>[0]["project"];
-
-describe("V8 to V9 Migration", () => {
-	test("adds background.enabled from color (transparent => false, otherwise true)", () => {
-		const result = transformProjectV8ToV9({ project: v8ProjectWithText });
-
-		expect(result.skipped).toBe(false);
-		expect(result.project.version).toBe(9);
-
-		const track = (
-			result.project.scenes as Array<{ tracks: Array<{ elements: unknown[] }> }>
-		)[0].tracks[0];
-		const elements = track.elements as Array<{ background: { enabled: boolean; color: string } }>;
-
-		expect(elements[0].background.enabled).toBe(true);
-		expect(elements[0].background.color).toBe("#ff0000");
-
-		expect(elements[1].background.enabled).toBe(false);
-		expect(elements[1].background.color).toBe("transparent");
-	});
-
-	test("preserves existing background.enabled if already present", () => {
-		const projectWithEnabled = {
-			...v8ProjectWithText,
-			scenes: [
-				{
-					...(v8ProjectWithText.scenes as Record<string, unknown>[])[0],
-					tracks: [
-						{
-							id: "track-text",
-							type: "text",
-							name: "Text Track",
-							hidden: false,
-							elements: [
-								{
-									id: "el-1",
-									type: "text",
-									content: "Already has enabled",
-									startTime: 0,
-									duration: 5,
-									background: {
-										enabled: false,
-										color: "#00ff00",
-									},
-								},
-							],
-						},
-					],
-				},
-			],
-		} as Parameters<typeof transformProjectV8ToV9>[0]["project"];
-
-		const result = transformProjectV8ToV9({ project: projectWithEnabled });
-
-		expect(result.skipped).toBe(false);
-		const elements = (
-			result.project.scenes as Array<{ tracks: Array<{ elements: unknown[] }> }>
-		)[0].tracks[0].elements as Array<{ background: { enabled: boolean } }>;
-		expect(elements[0].background.enabled).toBe(false);
-	});
-
-	test("skips non-text elements and tracks", () => {
-		const projectWithVideoOnly = {
-			...v8ProjectWithText,
-			scenes: [
-				{
-					id: "scene-main",
-					name: "Main scene",
-					isMain: true,
-					tracks: [
-						{
-							id: "track-video",
-							type: "video",
-							name: "Video Track",
-							isMain: true,
-							elements: [],
-						},
-					],
-					bookmarks: [],
-					createdAt: "2024-01-01T00:00:00.000Z",
-					updatedAt: "2024-01-01T00:00:00.000Z",
-				},
-			],
-		} as Parameters<typeof transformProjectV8ToV9>[0]["project"];
-
-		const result = transformProjectV8ToV9({ project: projectWithVideoOnly });
-
-		expect(result.skipped).toBe(false);
-		expect(result.project.version).toBe(9);
-	});
-
-	test("skips projects that are already v9", () => {
-		const result = transformProjectV8ToV9({
-			project: { ...v8ProjectWithText, version: 9 },
-		});
-
-		expect(result.skipped).toBe(true);
-		expect(result.reason).toBe("already v9");
-	});
-
-	test("skips projects with no id", () => {
-		const result = transformProjectV8ToV9({
-			project: {
-				version: 8,
-				scenes: [],
-			} as Parameters<typeof transformProjectV8ToV9>[0]["project"],
-		});
-
-		expect(result.skipped).toBe(true);
-		expect(result.reason).toBe("no project id");
-	});
-});
+import { describe, expect, test } from "bun:test";

+import { transformProjectV8ToV9 } from "../transformers/v8-to-v9";

+

+const v8ProjectWithText = {

+	id: "project-v8-text",

+	version: 8,

+	metadata: {

+		id: "project-v8-text",

+		name: "V8 Project with Text",

+		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-text",

+					type: "text",

+					name: "Text Track",

+					hidden: false,

+					elements: [

+						{

+							id: "el-1",

+							type: "text",

+							content: "With color",

+							startTime: 0,

+							duration: 5,

+							background: {

+								color: "#ff0000",

+								cornerRadius: 0,

+								paddingX: 8,

+								paddingY: 4,

+							},

+						},

+						{

+							id: "el-2",

+							type: "text",

+							content: "Transparent",

+							startTime: 5,

+							duration: 5,

+							background: {

+								color: "transparent",

+								paddingX: 30,

+								paddingY: 42,

+							},

+						},

+					],

+				},

+			],

+			bookmarks: [],

+			createdAt: "2024-01-01T00:00:00.000Z",

+			updatedAt: "2024-01-01T00:00:00.000Z",

+		},

+	],

+} as Parameters<typeof transformProjectV8ToV9>[0]["project"];

+

+describe("V8 to V9 Migration", () => {

+	test("adds background.enabled from color (transparent => false, otherwise true)", () => {

+		const result = transformProjectV8ToV9({ project: v8ProjectWithText });

+

+		expect(result.skipped).toBe(false);

+		expect(result.project.version).toBe(9);

+

+		const track = (

+			result.project.scenes as Array<{ tracks: Array<{ elements: unknown[] }> }>

+		)[0].tracks[0];

+		const elements = track.elements as Array<{ background: { enabled: boolean; color: string } }>;

+

+		expect(elements[0].background.enabled).toBe(true);

+		expect(elements[0].background.color).toBe("#ff0000");

+

+		expect(elements[1].background.enabled).toBe(false);

+		expect(elements[1].background.color).toBe("transparent");

+	});

+

+	test("preserves existing background.enabled if already present", () => {

+		const projectWithEnabled = {

+			...v8ProjectWithText,

+			scenes: [

+				{

+					...(v8ProjectWithText.scenes as Record<string, unknown>[])[0],

+					tracks: [

+						{

+							id: "track-text",

+							type: "text",

+							name: "Text Track",

+							hidden: false,

+							elements: [

+								{

+									id: "el-1",

+									type: "text",

+									content: "Already has enabled",

+									startTime: 0,

+									duration: 5,

+									background: {

+										enabled: false,

+										color: "#00ff00",

+									},

+								},

+							],

+						},

+					],

+				},

+			],

+		} as Parameters<typeof transformProjectV8ToV9>[0]["project"];

+

+		const result = transformProjectV8ToV9({ project: projectWithEnabled });

+

+		expect(result.skipped).toBe(false);

+		const elements = (

+			result.project.scenes as Array<{ tracks: Array<{ elements: unknown[] }> }>

+		)[0].tracks[0].elements as Array<{ background: { enabled: boolean } }>;

+		expect(elements[0].background.enabled).toBe(false);

+	});

+

+	test("skips non-text elements and tracks", () => {

+		const projectWithVideoOnly = {

+			...v8ProjectWithText,

+			scenes: [

+				{

+					id: "scene-main",

+					name: "Main scene",

+					isMain: true,

+					tracks: [

+						{

+							id: "track-video",

+							type: "video",

+							name: "Video Track",

+							isMain: true,

+							elements: [],

+						},

+					],

+					bookmarks: [],

+					createdAt: "2024-01-01T00:00:00.000Z",

+					updatedAt: "2024-01-01T00:00:00.000Z",

+				},

+			],

+		} as Parameters<typeof transformProjectV8ToV9>[0]["project"];

+

+		const result = transformProjectV8ToV9({ project: projectWithVideoOnly });

+

+		expect(result.skipped).toBe(false);

+		expect(result.project.version).toBe(9);

+	});

+

+	test("skips projects that are already v9", () => {

+		const result = transformProjectV8ToV9({

+			project: { ...v8ProjectWithText, version: 9 },

+		});

+

+		expect(result.skipped).toBe(true);

+		expect(result.reason).toBe("already v9");

+	});

+

+	test("skips projects with no id", () => {

+		const result = transformProjectV8ToV9({

+			project: {

+				version: 8,

+				scenes: [],

+			} as Parameters<typeof transformProjectV8ToV9>[0]["project"],

+		});

+

+		expect(result.skipped).toBe(true);

+		expect(result.reason).toBe("no project id");

+	});

+});

diff --git a/apps/web/src/services/storage/migrations/base.ts b/apps/web/src/services/storage/migrations/base.ts
index 5b7e9db0..13418f98 100644
--- a/apps/web/src/services/storage/migrations/base.ts
+++ b/apps/web/src/services/storage/migrations/base.ts
@@ -1,9 +1,9 @@
-import type { MigrationResult, ProjectRecord } from "./transformers/types";
-
-export abstract class StorageMigration {
-	abstract from: number;
-	abstract to: number;
-	abstract transform(
-		project: ProjectRecord,
-	): Promise<MigrationResult<ProjectRecord>>;
-}
+import type { MigrationResult, ProjectRecord } from "./transformers/types";

+

+export abstract class StorageMigration {

+	abstract from: number;

+	abstract to: number;

+	abstract transform(

+		project: ProjectRecord,

+	): Promise<MigrationResult<ProjectRecord>>;

+}

diff --git a/apps/web/src/services/storage/migrations/index.ts b/apps/web/src/services/storage/migrations/index.ts
index 1a855287..e87d1cb9 100644
--- a/apps/web/src/services/storage/migrations/index.ts
+++ b/apps/web/src/services/storage/migrations/index.ts
@@ -1,46 +1,46 @@
-export { StorageMigration } from "./base";
-import { V0toV1Migration } from "./v0-to-v1";
-import { V1toV2Migration } from "./v1-to-v2";
-import { V2toV3Migration } from "./v2-to-v3";
-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";
-import { V8toV9Migration } from "./v8-to-v9";
-import { V9toV10Migration } from "./v9-to-v10";
-import { V10toV11Migration } from "./v10-to-v11";
-import { V11toV12Migration } from "./v11-to-v12";
-import { V12toV13Migration } from "./v12-to-v13";
-import { V13toV14Migration } from "./v13-to-v14";
-import { V14toV15Migration } from "./v14-to-v15";
-import { V15toV16Migration } from "./v15-to-v16";
-import { V16toV17Migration } from "./v16-to-v17";
-import { V17toV18Migration } from "./v17-to-v18";
-import { V18toV19Migration } from "./v18-to-v19";
-export { runStorageMigrations } from "./runner";
-export type { MigrationProgress } from "./runner";
-
-export const CURRENT_PROJECT_VERSION = 19;
-
-export const migrations = [
-	new V0toV1Migration(),
-	new V1toV2Migration(),
-	new V2toV3Migration(),
-	new V3toV4Migration(),
-	new V4toV5Migration(),
-	new V5toV6Migration(),
-	new V6toV7Migration(),
-	new V7toV8Migration(),
-	new V8toV9Migration(),
-	new V9toV10Migration(),
-	new V10toV11Migration(),
-	new V11toV12Migration(),
-	new V12toV13Migration(),
-	new V13toV14Migration(),
-	new V14toV15Migration(),
-	new V15toV16Migration(),
-	new V16toV17Migration(),
-	new V17toV18Migration(),
-	new V18toV19Migration(),
-];
+export { StorageMigration } from "./base";

+import { V0toV1Migration } from "./v0-to-v1";

+import { V1toV2Migration } from "./v1-to-v2";

+import { V2toV3Migration } from "./v2-to-v3";

+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";

+import { V8toV9Migration } from "./v8-to-v9";

+import { V9toV10Migration } from "./v9-to-v10";

+import { V10toV11Migration } from "./v10-to-v11";

+import { V11toV12Migration } from "./v11-to-v12";

+import { V12toV13Migration } from "./v12-to-v13";

+import { V13toV14Migration } from "./v13-to-v14";

+import { V14toV15Migration } from "./v14-to-v15";

+import { V15toV16Migration } from "./v15-to-v16";

+import { V16toV17Migration } from "./v16-to-v17";

+import { V17toV18Migration } from "./v17-to-v18";

+import { V18toV19Migration } from "./v18-to-v19";

+export { runStorageMigrations } from "./runner";

+export type { MigrationProgress } from "./runner";

+

+export const CURRENT_PROJECT_VERSION = 19;

+

+export const migrations = [

+	new V0toV1Migration(),

+	new V1toV2Migration(),

+	new V2toV3Migration(),

+	new V3toV4Migration(),

+	new V4toV5Migration(),

+	new V5toV6Migration(),

+	new V6toV7Migration(),

+	new V7toV8Migration(),

+	new V8toV9Migration(),

+	new V9toV10Migration(),

+	new V10toV11Migration(),

+	new V11toV12Migration(),

+	new V12toV13Migration(),

+	new V13toV14Migration(),

+	new V14toV15Migration(),

+	new V15toV16Migration(),

+	new V16toV17Migration(),

+	new V17toV18Migration(),

+	new V18toV19Migration(),

+];

diff --git a/apps/web/src/services/storage/migrations/runner.ts b/apps/web/src/services/storage/migrations/runner.ts
index e1c2d09a..409a8695 100644
--- a/apps/web/src/services/storage/migrations/runner.ts
+++ b/apps/web/src/services/storage/migrations/runner.ts
@@ -1,155 +1,155 @@
-import {
-	IndexedDBAdapter,
-	deleteDatabase,
-} from "@/services/storage/indexeddb-adapter";
-import type { StorageMigration } from "./base";
-import type { ProjectRecord } from "./transformers/types";
-import { getProjectId, isRecord } from "./transformers/utils";
-
-export interface StorageMigrationResult {
-	migratedCount: number;
-}
-
-export interface MigrationProgress {
-	isMigrating: boolean;
-	fromVersion: number | null;
-	toVersion: number | null;
-	projectName: string | null;
-}
-
-let hasCleanedUpMetaDb = false;
-
-const MIN_MIGRATION_DISPLAY_MS = 1000;
-
-export async function runStorageMigrations({
-	migrations,
-	onProgress,
-}: {
-	migrations: StorageMigration[];
-	onProgress?: (progress: MigrationProgress) => void;
-}): Promise<StorageMigrationResult> {
-	// One-time cleanup: delete the old global version database
-	if (!hasCleanedUpMetaDb) {
-		try {
-			await deleteDatabase({ dbName: "video-editor-meta" });
-		} catch {
-			// Ignore errors - DB might not exist
-		}
-		hasCleanedUpMetaDb = true;
-	}
-
-	const projectsAdapter = new IndexedDBAdapter<ProjectRecord>(
-		"video-editor-projects",
-		"projects",
-		1,
-	);
-	const projects = await projectsAdapter.getAll();
-
-	const orderedMigrations = [...migrations].sort((a, b) => a.from - b.from);
-	let migratedCount = 0;
-	let migrationStartTime: number | null = null;
-
-	for (const project of projects) {
-		if (typeof project !== "object" || project === null) {
-			continue;
-		}
-
-		let projectRecord = project as ProjectRecord;
-		let currentVersion = getProjectVersion({ project: projectRecord });
-		const targetVersion = orderedMigrations.at(-1)?.to ?? currentVersion;
-
-		if (currentVersion >= targetVersion) {
-			continue;
-		}
-
-		// Track when we first showed the migration dialog
-		if (migrationStartTime === null) {
-			migrationStartTime = Date.now();
-		}
-
-		const projectName = getProjectName({ project: projectRecord });
-		onProgress?.({
-			isMigrating: true,
-			fromVersion: currentVersion,
-			toVersion: targetVersion,
-			projectName,
-		});
-
-		for (const migration of orderedMigrations) {
-			if (migration.from !== currentVersion) {
-				continue;
-			}
-
-			const result = await migration.transform(projectRecord);
-
-			if (result.skipped) {
-				break;
-			}
-
-			const projectId = getProjectId({ project: result.project });
-			if (!projectId) {
-				break;
-			}
-
-			await projectsAdapter.set(projectId, result.project);
-			migratedCount++;
-			currentVersion = migration.to;
-			projectRecord = result.project;
-		}
-	}
-
-	// Ensure dialog is visible for minimum time so users can see it
-	if (migrationStartTime !== null) {
-		const elapsed = Date.now() - migrationStartTime;
-		if (elapsed < MIN_MIGRATION_DISPLAY_MS) {
-			await new Promise((resolve) =>
-				setTimeout(resolve, MIN_MIGRATION_DISPLAY_MS - elapsed),
-			);
-		}
-	}
-
-	onProgress?.({
-		isMigrating: false,
-		fromVersion: null,
-		toVersion: null,
-		projectName: null,
-	});
-
-	return { migratedCount };
-}
-
-function getProjectVersion({ project }: { project: ProjectRecord }): number {
-	const versionValue = project.version;
-
-	// v2 and up - has explicit version field
-	if (typeof versionValue === "number") {
-		return versionValue;
-	}
-
-	// v1 - has scenes array
-	const scenesValue = project.scenes;
-	if (Array.isArray(scenesValue) && scenesValue.length > 0) {
-		return 1;
-	}
-
-	// v0 - no scenes
-	return 0;
-}
-
-function getProjectName({
-	project,
-}: {
-	project: ProjectRecord;
-}): string | null {
-	const metadata = project.metadata;
-	if (isRecord(metadata) && typeof metadata.name === "string") {
-		return metadata.name;
-	}
-
-	// v0 had name directly on project
-	if (typeof project.name === "string") {
-		return project.name;
-	}
-
-	return null;
-}
+import {

+	IndexedDBAdapter,

+	deleteDatabase,

+} from "@/services/storage/indexeddb-adapter";

+import type { StorageMigration } from "./base";

+import type { ProjectRecord } from "./transformers/types";

+import { getProjectId, isRecord } from "./transformers/utils";

+

+export interface StorageMigrationResult {

+	migratedCount: number;

+}

+

+export interface MigrationProgress {

+	isMigrating: boolean;

+	fromVersion: number | null;

+	toVersion: number | null;

+	projectName: string | null;

+}

+

+let hasCleanedUpMetaDb = false;

+

+const MIN_MIGRATION_DISPLAY_MS = 1000;

+

+export async function runStorageMigrations({

+	migrations,

+	onProgress,

+}: {

+	migrations: StorageMigration[];

+	onProgress?: (progress: MigrationProgress) => void;

+}): Promise<StorageMigrationResult> {

+	// One-time cleanup: delete the old global version database

+	if (!hasCleanedUpMetaDb) {

+		try {

+			await deleteDatabase({ dbName: "video-editor-meta" });

+		} catch {

+			// Ignore errors - DB might not exist

+		}

+		hasCleanedUpMetaDb = true;

+	}

+

+	const projectsAdapter = new IndexedDBAdapter<ProjectRecord>(

+		"video-editor-projects",

+		"projects",

+		1,

+	);

+	const projects = await projectsAdapter.getAll();

+

+	const orderedMigrations = [...migrations].sort((a, b) => a.from - b.from);

+	let migratedCount = 0;

+	let migrationStartTime: number | null = null;

+

+	for (const project of projects) {

+		if (typeof project !== "object" || project === null) {

+			continue;

+		}

+

+		let projectRecord = project as ProjectRecord;

+		let currentVersion = getProjectVersion({ project: projectRecord });

+		const targetVersion = orderedMigrations.at(-1)?.to ?? currentVersion;

+

+		if (currentVersion >= targetVersion) {

+			continue;

+		}

+

+		// Track when we first showed the migration dialog

+		if (migrationStartTime === null) {

+			migrationStartTime = Date.now();

+		}

+

+		const projectName = getProjectName({ project: projectRecord });

+		onProgress?.({

+			isMigrating: true,

+			fromVersion: currentVersion,

+			toVersion: targetVersion,

+			projectName,

+		});

+

+		for (const migration of orderedMigrations) {

+			if (migration.from !== currentVersion) {

+				continue;

+			}

+

+			const result = await migration.transform(projectRecord);

+

+			if (result.skipped) {

+				break;

+			}

+

+			const projectId = getProjectId({ project: result.project });

+			if (!projectId) {

+				break;

+			}

+

+			await projectsAdapter.set(projectId, result.project);

+			migratedCount++;

+			currentVersion = migration.to;

+			projectRecord = result.project;

+		}

+	}

+

+	// Ensure dialog is visible for minimum time so users can see it

+	if (migrationStartTime !== null) {

+		const elapsed = Date.now() - migrationStartTime;

+		if (elapsed < MIN_MIGRATION_DISPLAY_MS) {

+			await new Promise((resolve) =>

+				setTimeout(resolve, MIN_MIGRATION_DISPLAY_MS - elapsed),

+			);

+		}

+	}

+

+	onProgress?.({

+		isMigrating: false,

+		fromVersion: null,

+		toVersion: null,

+		projectName: null,

+	});

+

+	return { migratedCount };

+}

+

+function getProjectVersion({ project }: { project: ProjectRecord }): number {

+	const versionValue = project.version;

+

+	// v2 and up - has explicit version field

+	if (typeof versionValue === "number") {

+		return versionValue;

+	}

+

+	// v1 - has scenes array

+	const scenesValue = project.scenes;

+	if (Array.isArray(scenesValue) && scenesValue.length > 0) {

+		return 1;

+	}

+

+	// v0 - no scenes

+	return 0;

+}

+

+function getProjectName({

+	project,

+}: {

+	project: ProjectRecord;

+}): string | null {

+	const metadata = project.metadata;

+	if (isRecord(metadata) && typeof metadata.name === "string") {

+		return metadata.name;

+	}

+

+	// v0 had name directly on project

+	if (typeof project.name === "string") {

+		return project.name;

+	}

+

+	return null;

+}

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
index b48f5e88..2f803d67 100644
--- a/apps/web/src/services/storage/migrations/transformers/v10-to-v11.ts
+++ b/apps/web/src/services/storage/migrations/transformers/v10-to-v11.ts
@@ -1,113 +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;
-}
+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
index fa1bd371..4efc5b25 100644
--- a/apps/web/src/services/storage/migrations/transformers/v11-to-v12.ts
+++ b/apps/web/src/services/storage/migrations/transformers/v11-to-v12.ts
@@ -1,196 +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;
-}
+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
index 59b29732..518de59a 100644
--- a/apps/web/src/services/storage/migrations/transformers/v12-to-v13.ts
+++ b/apps/web/src/services/storage/migrations/transformers/v12-to-v13.ts
@@ -1,102 +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;
-}
+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
index 01a3cc3e..89dde38e 100644
--- a/apps/web/src/services/storage/migrations/transformers/v13-to-v14.ts
+++ b/apps/web/src/services/storage/migrations/transformers/v13-to-v14.ts
@@ -1,106 +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 },
-	};
-}
+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
index beef05d4..e75c541b 100644
--- a/apps/web/src/services/storage/migrations/transformers/v14-to-v15.ts
+++ b/apps/web/src/services/storage/migrations/transformers/v14-to-v15.ts
@@ -1,67 +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 };
-}
+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
index 15e2f3bb..746938d0 100644
--- a/apps/web/src/services/storage/migrations/transformers/v15-to-v16.ts
+++ b/apps/web/src/services/storage/migrations/transformers/v15-to-v16.ts
@@ -1,60 +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,
-	};
-}
+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
index 7fec70e9..00474188 100644
--- a/apps/web/src/services/storage/migrations/transformers/v16-to-v17.ts
+++ b/apps/web/src/services/storage/migrations/transformers/v16-to-v17.ts
@@ -1,107 +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,
-	};
-}
+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
index 31a60121..5dcf6feb 100644
--- a/apps/web/src/services/storage/migrations/transformers/v17-to-v18.ts
+++ b/apps/web/src/services/storage/migrations/transformers/v17-to-v18.ts
@@ -1,105 +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));
-}
+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
index 1946b829..3afa5203 100644
--- a/apps/web/src/services/storage/migrations/transformers/v18-to-v19.ts
+++ b/apps/web/src/services/storage/migrations/transformers/v18-to-v19.ts
@@ -1,46 +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,
-	};
-}
+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/v3-to-v4.ts b/apps/web/src/services/storage/migrations/transformers/v3-to-v4.ts
index d6e1efee..84d97fd8 100644
--- a/apps/web/src/services/storage/migrations/transformers/v3-to-v4.ts
+++ b/apps/web/src/services/storage/migrations/transformers/v3-to-v4.ts
@@ -1,189 +1,189 @@
-import type { MigrationResult, ProjectRecord } from "./types";
-import { getProjectId, isRecord } from "./utils";
-
-const LEGACY_FONT_WEIGHT_MAP = {
-	normal: "400",
-	bold: "700",
-} as const;
-
-const VALID_NUMERIC_FONT_WEIGHTS = new Set([
-	"100",
-	"200",
-	"300",
-	"400",
-	"500",
-	"600",
-	"700",
-	"800",
-	"900",
-]);
-
-export function transformProjectV3ToV4({
-	project,
-}: {
-	project: ProjectRecord;
-}): MigrationResult<ProjectRecord> {
-	const projectId = getProjectId({ project });
-	if (!projectId) {
-		return { project, skipped: true, reason: "no project id" };
-	}
-
-	if (isV4Project({ project })) {
-		return { project, skipped: true, reason: "already v4" };
-	}
-
-	const migratedProject = normalizeProjectTextFontWeights({ project });
-
-	return {
-		project: {
-			...migratedProject,
-			version: 4,
-		},
-		skipped: false,
-	};
-}
-
-function normalizeProjectTextFontWeights({
-	project,
-}: {
-	project: ProjectRecord;
-}): ProjectRecord {
-	const scenesValue = project.scenes;
-	if (!Array.isArray(scenesValue)) {
-		return project;
-	}
-
-	let hasSceneChanges = false;
-	const normalizedScenes = scenesValue.map((scene) => {
-		const normalizedScene = normalizeSceneTextFontWeights({ scene });
-		if (normalizedScene !== scene) {
-			hasSceneChanges = true;
-		}
-		return normalizedScene;
-	});
-
-	if (!hasSceneChanges) {
-		return project;
-	}
-
-	return {
-		...project,
-		scenes: normalizedScenes,
-	};
-}
-
-function normalizeSceneTextFontWeights({ scene }: { scene: unknown }): unknown {
-	if (!isRecord(scene)) {
-		return scene;
-	}
-
-	const tracksValue = scene.tracks;
-	if (!Array.isArray(tracksValue)) {
-		return scene;
-	}
-
-	let hasTrackChanges = false;
-	const normalizedTracks = tracksValue.map((track) => {
-		const normalizedTrack = normalizeTrackTextFontWeights({ track });
-		if (normalizedTrack !== track) {
-			hasTrackChanges = true;
-		}
-		return normalizedTrack;
-	});
-
-	if (!hasTrackChanges) {
-		return scene;
-	}
-
-	return {
-		...scene,
-		tracks: normalizedTracks,
-	};
-}
-
-function normalizeTrackTextFontWeights({ track }: { track: unknown }): unknown {
-	if (!isRecord(track)) {
-		return track;
-	}
-
-	if (track.type !== "text") {
-		return track;
-	}
-
-	const elementsValue = track.elements;
-	if (!Array.isArray(elementsValue)) {
-		return track;
-	}
-
-	let hasElementChanges = false;
-	const normalizedElements = elementsValue.map((element) => {
-		const normalizedElement = normalizeTextElementFontWeight({ element });
-		if (normalizedElement !== element) {
-			hasElementChanges = true;
-		}
-		return normalizedElement;
-	});
-
-	if (!hasElementChanges) {
-		return track;
-	}
-
-	return {
-		...track,
-		elements: normalizedElements,
-	};
-}
-
-function normalizeTextElementFontWeight({
-	element,
-}: {
-	element: unknown;
-}): unknown {
-	if (!isRecord(element) || element.type !== "text") {
-		return element;
-	}
-
-	const normalizedWeight = normalizeFontWeight({ value: element.fontWeight });
-	if (normalizedWeight === element.fontWeight) {
-		return element;
-	}
-
-	return {
-		...element,
-		fontWeight: normalizedWeight,
-	};
-}
-
-function normalizeFontWeight({ value }: { value: unknown }): unknown {
-	if (typeof value === "number") {
-		const numericWeight = String(value);
-		if (VALID_NUMERIC_FONT_WEIGHTS.has(numericWeight)) {
-			return numericWeight;
-		}
-		return value;
-	}
-
-	if (typeof value !== "string") {
-		return value;
-	}
-
-	const normalized = value.trim().toLowerCase();
-	if (normalized in LEGACY_FONT_WEIGHT_MAP) {
-		return LEGACY_FONT_WEIGHT_MAP[
-			normalized as keyof typeof LEGACY_FONT_WEIGHT_MAP
-		];
-	}
-
-	if (VALID_NUMERIC_FONT_WEIGHTS.has(normalized)) {
-		return normalized;
-	}
-
-	return value;
-}
-
-export { getProjectId } from "./utils";
-
-function isV4Project({ project }: { project: ProjectRecord }): boolean {
-	const versionValue = project.version;
-	return typeof versionValue === "number" && versionValue >= 4;
-}
+import type { MigrationResult, ProjectRecord } from "./types";

+import { getProjectId, isRecord } from "./utils";

+

+const LEGACY_FONT_WEIGHT_MAP = {

+	normal: "400",

+	bold: "700",

+} as const;

+

+const VALID_NUMERIC_FONT_WEIGHTS = new Set([

+	"100",

+	"200",

+	"300",

+	"400",

+	"500",

+	"600",

+	"700",

+	"800",

+	"900",

+]);

+

+export function transformProjectV3ToV4({

+	project,

+}: {

+	project: ProjectRecord;

+}): MigrationResult<ProjectRecord> {

+	const projectId = getProjectId({ project });

+	if (!projectId) {

+		return { project, skipped: true, reason: "no project id" };

+	}

+

+	if (isV4Project({ project })) {

+		return { project, skipped: true, reason: "already v4" };

+	}

+

+	const migratedProject = normalizeProjectTextFontWeights({ project });

+

+	return {

+		project: {

+			...migratedProject,

+			version: 4,

+		},

+		skipped: false,

+	};

+}

+

+function normalizeProjectTextFontWeights({

+	project,

+}: {

+	project: ProjectRecord;

+}): ProjectRecord {

+	const scenesValue = project.scenes;

+	if (!Array.isArray(scenesValue)) {

+		return project;

+	}

+

+	let hasSceneChanges = false;

+	const normalizedScenes = scenesValue.map((scene) => {

+		const normalizedScene = normalizeSceneTextFontWeights({ scene });

+		if (normalizedScene !== scene) {

+			hasSceneChanges = true;

+		}

+		return normalizedScene;

+	});

+

+	if (!hasSceneChanges) {

+		return project;

+	}

+

+	return {

+		...project,

+		scenes: normalizedScenes,

+	};

+}

+

+function normalizeSceneTextFontWeights({ scene }: { scene: unknown }): unknown {

+	if (!isRecord(scene)) {

+		return scene;

+	}

+

+	const tracksValue = scene.tracks;

+	if (!Array.isArray(tracksValue)) {

+		return scene;

+	}

+

+	let hasTrackChanges = false;

+	const normalizedTracks = tracksValue.map((track) => {

+		const normalizedTrack = normalizeTrackTextFontWeights({ track });

+		if (normalizedTrack !== track) {

+			hasTrackChanges = true;

+		}

+		return normalizedTrack;

+	});

+

+	if (!hasTrackChanges) {

+		return scene;

+	}

+

+	return {

+		...scene,

+		tracks: normalizedTracks,

+	};

+}

+

+function normalizeTrackTextFontWeights({ track }: { track: unknown }): unknown {

+	if (!isRecord(track)) {

+		return track;

+	}

+

+	if (track.type !== "text") {

+		return track;

+	}

+

+	const elementsValue = track.elements;

+	if (!Array.isArray(elementsValue)) {

+		return track;

+	}

+

+	let hasElementChanges = false;

+	const normalizedElements = elementsValue.map((element) => {

+		const normalizedElement = normalizeTextElementFontWeight({ element });

+		if (normalizedElement !== element) {

+			hasElementChanges = true;

+		}

+		return normalizedElement;

+	});

+

+	if (!hasElementChanges) {

+		return track;

+	}

+

+	return {

+		...track,

+		elements: normalizedElements,

+	};

+}

+

+function normalizeTextElementFontWeight({

+	element,

+}: {

+	element: unknown;

+}): unknown {

+	if (!isRecord(element) || element.type !== "text") {

+		return element;

+	}

+

+	const normalizedWeight = normalizeFontWeight({ value: element.fontWeight });

+	if (normalizedWeight === element.fontWeight) {

+		return element;

+	}

+

+	return {

+		...element,

+		fontWeight: normalizedWeight,

+	};

+}

+

+function normalizeFontWeight({ value }: { value: unknown }): unknown {

+	if (typeof value === "number") {

+		const numericWeight = String(value);

+		if (VALID_NUMERIC_FONT_WEIGHTS.has(numericWeight)) {

+			return numericWeight;

+		}

+		return value;

+	}

+

+	if (typeof value !== "string") {

+		return value;

+	}

+

+	const normalized = value.trim().toLowerCase();

+	if (normalized in LEGACY_FONT_WEIGHT_MAP) {

+		return LEGACY_FONT_WEIGHT_MAP[

+			normalized as keyof typeof LEGACY_FONT_WEIGHT_MAP

+		];

+	}

+

+	if (VALID_NUMERIC_FONT_WEIGHTS.has(normalized)) {

+		return normalized;

+	}

+

+	return value;

+}

+

+export { getProjectId } from "./utils";

+

+function isV4Project({ project }: { project: ProjectRecord }): boolean {

+	const versionValue = project.version;

+	return typeof versionValue === "number" && versionValue >= 4;

+}

diff --git a/apps/web/src/services/storage/migrations/transformers/v4-to-v5.ts b/apps/web/src/services/storage/migrations/transformers/v4-to-v5.ts
index 971e3510..243b130c 100644
--- a/apps/web/src/services/storage/migrations/transformers/v4-to-v5.ts
+++ b/apps/web/src/services/storage/migrations/transformers/v4-to-v5.ts
@@ -1,177 +1,177 @@
-import type { MigrationResult, ProjectRecord } from "./types";
-import { getProjectId, isRecord } from "./utils";
-
-const KNOWN_STICKER_PROVIDER_IDS = new Set([
-	"icons",
-	"emoji",
-	"flags",
-	"shapes",
-]);
-
-export function transformProjectV4ToV5({
-	project,
-}: {
-	project: ProjectRecord;
-}): MigrationResult<ProjectRecord> {
-	const projectId = getProjectId({ project });
-	if (!projectId) {
-		return { project, skipped: true, reason: "no project id" };
-	}
-
-	if (isV5Project({ project })) {
-		return { project, skipped: true, reason: "already v5" };
-	}
-
-	const migratedProject = migrateProjectStickerElements({ project });
-
-	return {
-		project: {
-			...migratedProject,
-			version: 5,
-		},
-		skipped: false,
-	};
-}
-
-function migrateProjectStickerElements({
-	project,
-}: {
-	project: ProjectRecord;
-}): ProjectRecord {
-	const scenesValue = project.scenes;
-	if (!Array.isArray(scenesValue)) {
-		return project;
-	}
-
-	let hasSceneChanges = false;
-	const migratedScenes = scenesValue.map((scene) => {
-		const migratedScene = migrateSceneStickerElements({ scene });
-		if (migratedScene !== scene) {
-			hasSceneChanges = true;
-		}
-		return migratedScene;
-	});
-
-	if (!hasSceneChanges) {
-		return project;
-	}
-
-	return {
-		...project,
-		scenes: migratedScenes,
-	};
-}
-
-function migrateSceneStickerElements({ scene }: { scene: unknown }): unknown {
-	if (!isRecord(scene)) {
-		return scene;
-	}
-
-	const tracksValue = scene.tracks;
-	if (!Array.isArray(tracksValue)) {
-		return scene;
-	}
-
-	let hasTrackChanges = false;
-	const migratedTracks = tracksValue.map((track) => {
-		const migratedTrack = migrateTrackStickerElements({ track });
-		if (migratedTrack !== track) {
-			hasTrackChanges = true;
-		}
-		return migratedTrack;
-	});
-
-	if (!hasTrackChanges) {
-		return scene;
-	}
-
-	return {
-		...scene,
-		tracks: migratedTracks,
-	};
-}
-
-function migrateTrackStickerElements({ track }: { track: unknown }): unknown {
-	if (!isRecord(track)) {
-		return track;
-	}
-
-	const elementsValue = track.elements;
-	if (!Array.isArray(elementsValue)) {
-		return track;
-	}
-
-	let hasElementChanges = false;
-	const migratedElements = elementsValue.map((element) => {
-		const migratedElement = migrateStickerElement({ element });
-		if (migratedElement !== element) {
-			hasElementChanges = true;
-		}
-		return migratedElement;
-	});
-
-	if (!hasElementChanges) {
-		return track;
-	}
-
-	return {
-		...track,
-		elements: migratedElements,
-	};
-}
-
-function migrateStickerElement({ element }: { element: unknown }): unknown {
-	if (!isRecord(element) || element.type !== "sticker") {
-		return element;
-	}
-
-	const existingStickerId =
-		typeof element.stickerId === "string" ? element.stickerId : null;
-	const legacyIconName =
-		typeof element.iconName === "string" ? element.iconName : null;
-
-	const normalizedStickerId =
-		normalizeStickerId({
-			value: existingStickerId ?? legacyIconName,
-		}) ?? null;
-
-	const hasLegacyIconName = "iconName" in element;
-	const hasLegacyColor = "color" in element;
-	const shouldUpdateStickerId = normalizedStickerId !== existingStickerId;
-
-	if (!hasLegacyIconName && !hasLegacyColor && !shouldUpdateStickerId) {
-		return element;
-	}
-
-	const {
-		iconName: _legacyIconName,
-		color: _legacyColor,
-		...remaining
-	} = element;
-	return normalizedStickerId
-		? { ...remaining, stickerId: normalizedStickerId }
-		: remaining;
-}
-
-function normalizeStickerId({ value }: { value: unknown }): string | null {
-	if (typeof value !== "string" || value.length === 0) {
-		return null;
-	}
-
-	const separatorIndex = value.indexOf(":");
-	if (separatorIndex === -1) {
-		return `icons:${value}`;
-	}
-
-	const maybeProvider = value.slice(0, separatorIndex);
-	if (KNOWN_STICKER_PROVIDER_IDS.has(maybeProvider)) {
-		return value;
-	}
-
-	return `icons:${value}`;
-}
-
-function isV5Project({ project }: { project: ProjectRecord }): boolean {
-	const versionValue = project.version;
-	return typeof versionValue === "number" && versionValue >= 5;
-}
+import type { MigrationResult, ProjectRecord } from "./types";

+import { getProjectId, isRecord } from "./utils";

+

+const KNOWN_STICKER_PROVIDER_IDS = new Set([

+	"icons",

+	"emoji",

+	"flags",

+	"shapes",

+]);

+

+export function transformProjectV4ToV5({

+	project,

+}: {

+	project: ProjectRecord;

+}): MigrationResult<ProjectRecord> {

+	const projectId = getProjectId({ project });

+	if (!projectId) {

+		return { project, skipped: true, reason: "no project id" };

+	}

+

+	if (isV5Project({ project })) {

+		return { project, skipped: true, reason: "already v5" };

+	}

+

+	const migratedProject = migrateProjectStickerElements({ project });

+

+	return {

+		project: {

+			...migratedProject,

+			version: 5,

+		},

+		skipped: false,

+	};

+}

+

+function migrateProjectStickerElements({

+	project,

+}: {

+	project: ProjectRecord;

+}): ProjectRecord {

+	const scenesValue = project.scenes;

+	if (!Array.isArray(scenesValue)) {

+		return project;

+	}

+

+	let hasSceneChanges = false;

+	const migratedScenes = scenesValue.map((scene) => {

+		const migratedScene = migrateSceneStickerElements({ scene });

+		if (migratedScene !== scene) {

+			hasSceneChanges = true;

+		}

+		return migratedScene;

+	});

+

+	if (!hasSceneChanges) {

+		return project;

+	}

+

+	return {

+		...project,

+		scenes: migratedScenes,

+	};

+}

+

+function migrateSceneStickerElements({ scene }: { scene: unknown }): unknown {

+	if (!isRecord(scene)) {

+		return scene;

+	}

+

+	const tracksValue = scene.tracks;

+	if (!Array.isArray(tracksValue)) {

+		return scene;

+	}

+

+	let hasTrackChanges = false;

+	const migratedTracks = tracksValue.map((track) => {

+		const migratedTrack = migrateTrackStickerElements({ track });

+		if (migratedTrack !== track) {

+			hasTrackChanges = true;

+		}

+		return migratedTrack;

+	});

+

+	if (!hasTrackChanges) {

+		return scene;

+	}

+

+	return {

+		...scene,

+		tracks: migratedTracks,

+	};

+}

+

+function migrateTrackStickerElements({ track }: { track: unknown }): unknown {

+	if (!isRecord(track)) {

+		return track;

+	}

+

+	const elementsValue = track.elements;

+	if (!Array.isArray(elementsValue)) {

+		return track;

+	}

+

+	let hasElementChanges = false;

+	const migratedElements = elementsValue.map((element) => {

+		const migratedElement = migrateStickerElement({ element });

+		if (migratedElement !== element) {

+			hasElementChanges = true;

+		}

+		return migratedElement;

+	});

+

+	if (!hasElementChanges) {

+		return track;

+	}

+

+	return {

+		...track,

+		elements: migratedElements,

+	};

+}

+

+function migrateStickerElement({ element }: { element: unknown }): unknown {

+	if (!isRecord(element) || element.type !== "sticker") {

+		return element;

+	}

+

+	const existingStickerId =

+		typeof element.stickerId === "string" ? element.stickerId : null;

+	const legacyIconName =

+		typeof element.iconName === "string" ? element.iconName : null;

+

+	const normalizedStickerId =

+		normalizeStickerId({

+			value: existingStickerId ?? legacyIconName,

+		}) ?? null;

+

+	const hasLegacyIconName = "iconName" in element;

+	const hasLegacyColor = "color" in element;

+	const shouldUpdateStickerId = normalizedStickerId !== existingStickerId;

+

+	if (!hasLegacyIconName && !hasLegacyColor && !shouldUpdateStickerId) {

+		return element;

+	}

+

+	const {

+		iconName: _legacyIconName,

+		color: _legacyColor,

+		...remaining

+	} = element;

+	return normalizedStickerId

+		? { ...remaining, stickerId: normalizedStickerId }

+		: remaining;

+}

+

+function normalizeStickerId({ value }: { value: unknown }): string | null {

+	if (typeof value !== "string" || value.length === 0) {

+		return null;

+	}

+

+	const separatorIndex = value.indexOf(":");

+	if (separatorIndex === -1) {

+		return `icons:${value}`;

+	}

+

+	const maybeProvider = value.slice(0, separatorIndex);

+	if (KNOWN_STICKER_PROVIDER_IDS.has(maybeProvider)) {

+		return value;

+	}

+

+	return `icons:${value}`;

+}

+

+function isV5Project({ project }: { project: ProjectRecord }): boolean {

+	const versionValue = project.version;

+	return typeof versionValue === "number" && versionValue >= 5;

+}

diff --git a/apps/web/src/services/storage/migrations/transformers/v5-to-v6.ts b/apps/web/src/services/storage/migrations/transformers/v5-to-v6.ts
index ca855149..f3890f24 100644
--- a/apps/web/src/services/storage/migrations/transformers/v5-to-v6.ts
+++ b/apps/web/src/services/storage/migrations/transformers/v5-to-v6.ts
@@ -1,88 +1,88 @@
-import type { MigrationResult, ProjectRecord } from "./types";
-import { getProjectId, isRecord } from "./utils";
-
-export function transformProjectV5ToV6({
-	project,
-}: {
-	project: ProjectRecord;
-}): MigrationResult<ProjectRecord> {
-	const projectId = getProjectId({ project });
-	if (!projectId) {
-		return { project, skipped: true, reason: "no project id" };
-	}
-
-	if (isV6Project({ project })) {
-		return { project, skipped: true, reason: "already v6" };
-	}
-
-	const migratedProject = migrateProjectBookmarks({ project });
-
-	return {
-		project: {
-			...migratedProject,
-			version: 6,
-		},
-		skipped: false,
-	};
-}
-
-function migrateProjectBookmarks({
-	project,
-}: {
-	project: ProjectRecord;
-}): ProjectRecord {
-	const scenesValue = project.scenes;
-	if (!Array.isArray(scenesValue)) {
-		return project;
-	}
-
-	let hasSceneChanges = false;
-	const migratedScenes = scenesValue.map((scene) => {
-		const migratedScene = migrateSceneBookmarks({ scene });
-		if (migratedScene !== scene) {
-			hasSceneChanges = true;
-		}
-		return migratedScene;
-	});
-
-	if (!hasSceneChanges) {
-		return project;
-	}
-
-	return {
-		...project,
-		scenes: migratedScenes,
-	};
-}
-
-function migrateSceneBookmarks({ scene }: { scene: unknown }): unknown {
-	if (!isRecord(scene)) {
-		return scene;
-	}
-
-	const bookmarksValue = scene.bookmarks;
-	if (!Array.isArray(bookmarksValue)) {
-		return scene;
-	}
-
-	const needsMigration = bookmarksValue.some(
-		(bookmark) => typeof bookmark === "number",
-	);
-	if (!needsMigration) {
-		return scene;
-	}
-
-	const migratedBookmarks = bookmarksValue.map((bookmark) =>
-		typeof bookmark === "number" ? { time: bookmark } : bookmark,
-	);
-
-	return {
-		...scene,
-		bookmarks: migratedBookmarks,
-	};
-}
-
-function isV6Project({ project }: { project: ProjectRecord }): boolean {
-	const versionValue = project.version;
-	return typeof versionValue === "number" && versionValue >= 6;
-}
+import type { MigrationResult, ProjectRecord } from "./types";

+import { getProjectId, isRecord } from "./utils";

+

+export function transformProjectV5ToV6({

+	project,

+}: {

+	project: ProjectRecord;

+}): MigrationResult<ProjectRecord> {

+	const projectId = getProjectId({ project });

+	if (!projectId) {

+		return { project, skipped: true, reason: "no project id" };

+	}

+

+	if (isV6Project({ project })) {

+		return { project, skipped: true, reason: "already v6" };

+	}

+

+	const migratedProject = migrateProjectBookmarks({ project });

+

+	return {

+		project: {

+			...migratedProject,

+			version: 6,

+		},

+		skipped: false,

+	};

+}

+

+function migrateProjectBookmarks({

+	project,

+}: {

+	project: ProjectRecord;

+}): ProjectRecord {

+	const scenesValue = project.scenes;

+	if (!Array.isArray(scenesValue)) {

+		return project;

+	}

+

+	let hasSceneChanges = false;

+	const migratedScenes = scenesValue.map((scene) => {

+		const migratedScene = migrateSceneBookmarks({ scene });

+		if (migratedScene !== scene) {

+			hasSceneChanges = true;

+		}

+		return migratedScene;

+	});

+

+	if (!hasSceneChanges) {

+		return project;

+	}

+

+	return {

+		...project,

+		scenes: migratedScenes,

+	};

+}

+

+function migrateSceneBookmarks({ scene }: { scene: unknown }): unknown {

+	if (!isRecord(scene)) {

+		return scene;

+	}

+

+	const bookmarksValue = scene.bookmarks;

+	if (!Array.isArray(bookmarksValue)) {

+		return scene;

+	}

+

+	const needsMigration = bookmarksValue.some(

+		(bookmark) => typeof bookmark === "number",

+	);

+	if (!needsMigration) {

+		return scene;

+	}

+

+	const migratedBookmarks = bookmarksValue.map((bookmark) =>

+		typeof bookmark === "number" ? { time: bookmark } : bookmark,

+	);

+

+	return {

+		...scene,

+		bookmarks: migratedBookmarks,

+	};

+}

+

+function isV6Project({ project }: { project: ProjectRecord }): boolean {

+	const versionValue = project.version;

+	return typeof versionValue === "number" && versionValue >= 6;

+}

diff --git a/apps/web/src/services/storage/migrations/transformers/v6-to-v7.ts b/apps/web/src/services/storage/migrations/transformers/v6-to-v7.ts
index 6f4848d4..fe3b75fd 100644
--- a/apps/web/src/services/storage/migrations/transformers/v6-to-v7.ts
+++ b/apps/web/src/services/storage/migrations/transformers/v6-to-v7.ts
@@ -1,106 +1,106 @@
-import type { MigrationResult, ProjectRecord } from "./types";
-import { getProjectId, isRecord } from "./utils";
-
-export function transformProjectV6ToV7({
-	project,
-}: {
-	project: ProjectRecord;
-}): MigrationResult<ProjectRecord> {
-	const projectId = getProjectId({ project });
-	if (!projectId) {
-		return { project, skipped: true, reason: "no project id" };
-	}
-
-	if (isV7Project({ project })) {
-		return { project, skipped: true, reason: "already v7" };
-	}
-
-	const migratedProject = migrateProjectTextElements({ project });
-
-	return {
-		project: { ...migratedProject, version: 7 },
-		skipped: false,
-	};
-}
-
-function migrateProjectTextElements({
-	project,
-}: {
-	project: ProjectRecord;
-}): ProjectRecord {
-	const scenesValue = project.scenes;
-	if (!Array.isArray(scenesValue)) return project;
-
-	let hasChanges = false;
-	const migratedScenes = scenesValue.map((scene) => {
-		const migrated = migrateSceneTextElements({ scene });
-		if (migrated !== scene) hasChanges = true;
-		return migrated;
-	});
-
-	if (!hasChanges) return project;
-	return { ...project, scenes: migratedScenes };
-}
-
-function migrateSceneTextElements({ 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 = migrateTrackTextElements({ track });
-		if (migrated !== track) hasChanges = true;
-		return migrated;
-	});
-
-	if (!hasChanges) return scene;
-	return { ...scene, tracks: migratedTracks };
-}
-
-function migrateTrackTextElements({ 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 = migrateTextElement({ element });
-		if (migrated !== element) hasChanges = true;
-		return migrated;
-	});
-
-	if (!hasChanges) return track;
-	return { ...track, elements: migratedElements };
-}
-
-function migrateTextElement({ element }: { element: unknown }): unknown {
-	if (!isRecord(element)) return element;
-	if (element.type !== "text") return element;
-	if (isRecord(element.background)) return element;
-
-	const backgroundColor =
-		typeof element.backgroundColor === "string"
-			? element.backgroundColor
-			: "transparent";
-
-	const { backgroundColor: _removed, ...rest } = element;
-
-	return {
-		...rest,
-		background: {
-			color: backgroundColor,
-			cornerRadius: 0,
-			paddingX: 8,
-			paddingY: 4,
-			offsetX: 0,
-			offsetY: 0,
-		},
-	};
-}
-
-function isV7Project({ project }: { project: ProjectRecord }): boolean {
-	return typeof project.version === "number" && project.version >= 7;
-}
+import type { MigrationResult, ProjectRecord } from "./types";

+import { getProjectId, isRecord } from "./utils";

+

+export function transformProjectV6ToV7({

+	project,

+}: {

+	project: ProjectRecord;

+}): MigrationResult<ProjectRecord> {

+	const projectId = getProjectId({ project });

+	if (!projectId) {

+		return { project, skipped: true, reason: "no project id" };

+	}

+

+	if (isV7Project({ project })) {

+		return { project, skipped: true, reason: "already v7" };

+	}

+

+	const migratedProject = migrateProjectTextElements({ project });

+

+	return {

+		project: { ...migratedProject, version: 7 },

+		skipped: false,

+	};

+}

+

+function migrateProjectTextElements({

+	project,

+}: {

+	project: ProjectRecord;

+}): ProjectRecord {

+	const scenesValue = project.scenes;

+	if (!Array.isArray(scenesValue)) return project;

+

+	let hasChanges = false;

+	const migratedScenes = scenesValue.map((scene) => {

+		const migrated = migrateSceneTextElements({ scene });

+		if (migrated !== scene) hasChanges = true;

+		return migrated;

+	});

+

+	if (!hasChanges) return project;

+	return { ...project, scenes: migratedScenes };

+}

+

+function migrateSceneTextElements({ 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 = migrateTrackTextElements({ track });

+		if (migrated !== track) hasChanges = true;

+		return migrated;

+	});

+

+	if (!hasChanges) return scene;

+	return { ...scene, tracks: migratedTracks };

+}

+

+function migrateTrackTextElements({ 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 = migrateTextElement({ element });

+		if (migrated !== element) hasChanges = true;

+		return migrated;

+	});

+

+	if (!hasChanges) return track;

+	return { ...track, elements: migratedElements };

+}

+

+function migrateTextElement({ element }: { element: unknown }): unknown {

+	if (!isRecord(element)) return element;

+	if (element.type !== "text") return element;

+	if (isRecord(element.background)) return element;

+

+	const backgroundColor =

+		typeof element.backgroundColor === "string"

+			? element.backgroundColor

+			: "transparent";

+

+	const { backgroundColor: _removed, ...rest } = element;

+

+	return {

+		...rest,

+		background: {

+			color: backgroundColor,

+			cornerRadius: 0,

+			paddingX: 8,

+			paddingY: 4,

+			offsetX: 0,

+			offsetY: 0,

+		},

+	};

+}

+

+function isV7Project({ project }: { project: ProjectRecord }): boolean {

+	return typeof project.version === "number" && project.version >= 7;

+}

diff --git a/apps/web/src/services/storage/migrations/transformers/v7-to-v8.ts b/apps/web/src/services/storage/migrations/transformers/v7-to-v8.ts
index 7393f776..e592cde9 100644
--- a/apps/web/src/services/storage/migrations/transformers/v7-to-v8.ts
+++ b/apps/web/src/services/storage/migrations/transformers/v7-to-v8.ts
@@ -1,96 +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;
-}
+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;

+}

diff --git a/apps/web/src/services/storage/migrations/transformers/v8-to-v9.ts b/apps/web/src/services/storage/migrations/transformers/v8-to-v9.ts
index 1dc895bc..628eebb6 100644
--- a/apps/web/src/services/storage/migrations/transformers/v8-to-v9.ts
+++ b/apps/web/src/services/storage/migrations/transformers/v8-to-v9.ts
@@ -1,99 +1,99 @@
-import type { MigrationResult, ProjectRecord } from "./types";
-import { getProjectId, isRecord } from "./utils";
-
-export function transformProjectV8ToV9({
-	project,
-}: {
-	project: ProjectRecord;
-}): MigrationResult<ProjectRecord> {
-	const projectId = getProjectId({ project });
-	if (!projectId) {
-		return { project, skipped: true, reason: "no project id" };
-	}
-
-	if (isV9Project({ project })) {
-		return { project, skipped: true, reason: "already v9" };
-	}
-
-	const migratedProject = migrateProjectTextElements({ project });
-
-	return {
-		project: { ...migratedProject, version: 9 },
-		skipped: false,
-	};
-}
-
-function migrateProjectTextElements({
-	project,
-}: {
-	project: ProjectRecord;
-}): ProjectRecord {
-	const scenesValue = project.scenes;
-	if (!Array.isArray(scenesValue)) return project;
-
-	let hasChanges = false;
-	const migratedScenes = scenesValue.map((scene) => {
-		const migrated = migrateSceneTextElements({ scene });
-		if (migrated !== scene) hasChanges = true;
-		return migrated;
-	});
-
-	if (!hasChanges) return project;
-	return { ...project, scenes: migratedScenes };
-}
-
-function migrateSceneTextElements({ 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 = migrateTrackTextElements({ track });
-		if (migrated !== track) hasChanges = true;
-		return migrated;
-	});
-
-	if (!hasChanges) return scene;
-	return { ...scene, tracks: migratedTracks };
-}
-
-function migrateTrackTextElements({ track }: { track: unknown }): unknown {
-	if (!isRecord(track)) return track;
-	if (track.type !== "text") return track;
-
-	const elementsValue = track.elements;
-	if (!Array.isArray(elementsValue)) return track;
-
-	let hasChanges = false;
-	const migratedElements = elementsValue.map((element) => {
-		const migrated = migrateTextElement({ element });
-		if (migrated !== element) hasChanges = true;
-		return migrated;
-	});
-
-	if (!hasChanges) return track;
-	return { ...track, elements: migratedElements };
-}
-
-function migrateTextElement({ element }: { element: unknown }): unknown {
-	if (!isRecord(element)) return element;
-	if (element.type !== "text") return element;
-
-	const bg = element.background;
-	if (!isRecord(bg)) return element;
-	if (typeof bg.enabled === "boolean") return element;
-
-	const color = typeof bg.color === "string" ? bg.color : "transparent";
-	const enabled = color !== "transparent";
-
-	return {
-		...element,
-		background: { ...bg, enabled },
-	};
-}
-
-function isV9Project({ project }: { project: ProjectRecord }): boolean {
-	return typeof project.version === "number" && project.version >= 9;
-}
+import type { MigrationResult, ProjectRecord } from "./types";

+import { getProjectId, isRecord } from "./utils";

+

+export function transformProjectV8ToV9({

+	project,

+}: {

+	project: ProjectRecord;

+}): MigrationResult<ProjectRecord> {

+	const projectId = getProjectId({ project });

+	if (!projectId) {

+		return { project, skipped: true, reason: "no project id" };

+	}

+

+	if (isV9Project({ project })) {

+		return { project, skipped: true, reason: "already v9" };

+	}

+

+	const migratedProject = migrateProjectTextElements({ project });

+

+	return {

+		project: { ...migratedProject, version: 9 },

+		skipped: false,

+	};

+}

+

+function migrateProjectTextElements({

+	project,

+}: {

+	project: ProjectRecord;

+}): ProjectRecord {

+	const scenesValue = project.scenes;

+	if (!Array.isArray(scenesValue)) return project;

+

+	let hasChanges = false;

+	const migratedScenes = scenesValue.map((scene) => {

+		const migrated = migrateSceneTextElements({ scene });

+		if (migrated !== scene) hasChanges = true;

+		return migrated;

+	});

+

+	if (!hasChanges) return project;

+	return { ...project, scenes: migratedScenes };

+}

+

+function migrateSceneTextElements({ 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 = migrateTrackTextElements({ track });

+		if (migrated !== track) hasChanges = true;

+		return migrated;

+	});

+

+	if (!hasChanges) return scene;

+	return { ...scene, tracks: migratedTracks };

+}

+

+function migrateTrackTextElements({ track }: { track: unknown }): unknown {

+	if (!isRecord(track)) return track;

+	if (track.type !== "text") return track;

+

+	const elementsValue = track.elements;

+	if (!Array.isArray(elementsValue)) return track;

+

+	let hasChanges = false;

+	const migratedElements = elementsValue.map((element) => {

+		const migrated = migrateTextElement({ element });

+		if (migrated !== element) hasChanges = true;

+		return migrated;

+	});

+

+	if (!hasChanges) return track;

+	return { ...track, elements: migratedElements };

+}

+

+function migrateTextElement({ element }: { element: unknown }): unknown {

+	if (!isRecord(element)) return element;

+	if (element.type !== "text") return element;

+

+	const bg = element.background;

+	if (!isRecord(bg)) return element;

+	if (typeof bg.enabled === "boolean") return element;

+

+	const color = typeof bg.color === "string" ? bg.color : "transparent";

+	const enabled = color !== "transparent";

+

+	return {

+		...element,

+		background: { ...bg, enabled },

+	};

+}

+

+function isV9Project({ project }: { project: ProjectRecord }): boolean {

+	return typeof project.version === "number" && project.version >= 9;

+}

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
index 52d13295..18885b62 100644
--- a/apps/web/src/services/storage/migrations/transformers/v9-to-v10.ts
+++ b/apps/web/src/services/storage/migrations/transformers/v9-to-v10.ts
@@ -1,21 +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,
-	};
-}
+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,

+	};

+}

diff --git a/apps/web/src/services/storage/migrations/v10-to-v11.ts b/apps/web/src/services/storage/migrations/v10-to-v11.ts
index 68439fbe..345dbeb3 100644
--- a/apps/web/src/services/storage/migrations/v10-to-v11.ts
+++ b/apps/web/src/services/storage/migrations/v10-to-v11.ts
@@ -1,16 +1,16 @@
-import { StorageMigration } from "./base";
-import type { ProjectRecord } from "./transformers/types";
-import { transformProjectV10ToV11 } from "./transformers/v10-to-v11";
-
-export class V10toV11Migration extends StorageMigration {
-	from = 10;
-	to = 11;
-
-	async transform(project: ProjectRecord): Promise<{
-		project: ProjectRecord;
-		skipped: boolean;
-		reason?: string;
-	}> {
-		return transformProjectV10ToV11({ project });
-	}
-}
+import { StorageMigration } from "./base";

+import type { ProjectRecord } from "./transformers/types";

+import { transformProjectV10ToV11 } from "./transformers/v10-to-v11";

+

+export class V10toV11Migration extends StorageMigration {

+	from = 10;

+	to = 11;

+

+	async transform(project: ProjectRecord): Promise<{

+		project: ProjectRecord;

+		skipped: boolean;

+		reason?: string;

+	}> {

+		return transformProjectV10ToV11({ project });

+	}

+}

diff --git a/apps/web/src/services/storage/migrations/v11-to-v12.ts b/apps/web/src/services/storage/migrations/v11-to-v12.ts
index 5efedbef..b3154ca8 100644
--- a/apps/web/src/services/storage/migrations/v11-to-v12.ts
+++ b/apps/web/src/services/storage/migrations/v11-to-v12.ts
@@ -1,16 +1,16 @@
-import { StorageMigration } from "./base";
-import type { ProjectRecord } from "./transformers/types";
-import { transformProjectV11ToV12 } from "./transformers/v11-to-v12";
-
-export class V11toV12Migration extends StorageMigration {
-	from = 11;
-	to = 12;
-
-	async transform(project: ProjectRecord): Promise<{
-		project: ProjectRecord;
-		skipped: boolean;
-		reason?: string;
-	}> {
-		return transformProjectV11ToV12({ project });
-	}
-}
+import { StorageMigration } from "./base";

+import type { ProjectRecord } from "./transformers/types";

+import { transformProjectV11ToV12 } from "./transformers/v11-to-v12";

+

+export class V11toV12Migration extends StorageMigration {

+	from = 11;

+	to = 12;

+

+	async transform(project: ProjectRecord): Promise<{

+		project: ProjectRecord;

+		skipped: boolean;

+		reason?: string;

+	}> {

+		return transformProjectV11ToV12({ project });

+	}

+}

diff --git a/apps/web/src/services/storage/migrations/v12-to-v13.ts b/apps/web/src/services/storage/migrations/v12-to-v13.ts
index 5c6e05fc..34b8de60 100644
--- a/apps/web/src/services/storage/migrations/v12-to-v13.ts
+++ b/apps/web/src/services/storage/migrations/v12-to-v13.ts
@@ -1,16 +1,16 @@
-import { StorageMigration } from "./base";
-import type { ProjectRecord } from "./transformers/types";
-import { transformProjectV12ToV13 } from "./transformers/v12-to-v13";
-
-export class V12toV13Migration extends StorageMigration {
-	from = 12;
-	to = 13;
-
-	async transform(project: ProjectRecord): Promise<{
-		project: ProjectRecord;
-		skipped: boolean;
-		reason?: string;
-	}> {
-		return transformProjectV12ToV13({ project });
-	}
-}
+import { StorageMigration } from "./base";

+import type { ProjectRecord } from "./transformers/types";

+import { transformProjectV12ToV13 } from "./transformers/v12-to-v13";

+

+export class V12toV13Migration extends StorageMigration {

+	from = 12;

+	to = 13;

+

+	async transform(project: ProjectRecord): Promise<{

+		project: ProjectRecord;

+		skipped: boolean;

+		reason?: string;

+	}> {

+		return transformProjectV12ToV13({ project });

+	}

+}

diff --git a/apps/web/src/services/storage/migrations/v13-to-v14.ts b/apps/web/src/services/storage/migrations/v13-to-v14.ts
index fbc9fc5f..b8bde59c 100644
--- a/apps/web/src/services/storage/migrations/v13-to-v14.ts
+++ b/apps/web/src/services/storage/migrations/v13-to-v14.ts
@@ -1,16 +1,16 @@
-import { StorageMigration } from "./base";
-import type { ProjectRecord } from "./transformers/types";
-import { transformProjectV13ToV14 } from "./transformers/v13-to-v14";
-
-export class V13toV14Migration extends StorageMigration {
-	from = 13;
-	to = 14;
-
-	async transform(project: ProjectRecord): Promise<{
-		project: ProjectRecord;
-		skipped: boolean;
-		reason?: string;
-	}> {
-		return transformProjectV13ToV14({ project });
-	}
-}
+import { StorageMigration } from "./base";

+import type { ProjectRecord } from "./transformers/types";

+import { transformProjectV13ToV14 } from "./transformers/v13-to-v14";

+

+export class V13toV14Migration extends StorageMigration {

+	from = 13;

+	to = 14;

+

+	async transform(project: ProjectRecord): Promise<{

+		project: ProjectRecord;

+		skipped: boolean;

+		reason?: string;

+	}> {

+		return transformProjectV13ToV14({ project });

+	}

+}

diff --git a/apps/web/src/services/storage/migrations/v14-to-v15.ts b/apps/web/src/services/storage/migrations/v14-to-v15.ts
index 1d18423f..5c3a60cf 100644
--- a/apps/web/src/services/storage/migrations/v14-to-v15.ts
+++ b/apps/web/src/services/storage/migrations/v14-to-v15.ts
@@ -1,16 +1,16 @@
-import { StorageMigration } from "./base";
-import type { ProjectRecord } from "./transformers/types";
-import { transformProjectV14ToV15 } from "./transformers/v14-to-v15";
-
-export class V14toV15Migration extends StorageMigration {
-	from = 14;
-	to = 15;
-
-	async transform(project: ProjectRecord): Promise<{
-		project: ProjectRecord;
-		skipped: boolean;
-		reason?: string;
-	}> {
-		return transformProjectV14ToV15({ project });
-	}
-}
+import { StorageMigration } from "./base";

+import type { ProjectRecord } from "./transformers/types";

+import { transformProjectV14ToV15 } from "./transformers/v14-to-v15";

+

+export class V14toV15Migration extends StorageMigration {

+	from = 14;

+	to = 15;

+

+	async transform(project: ProjectRecord): Promise<{

+		project: ProjectRecord;

+		skipped: boolean;

+		reason?: string;

+	}> {

+		return transformProjectV14ToV15({ project });

+	}

+}

diff --git a/apps/web/src/services/storage/migrations/v15-to-v16.ts b/apps/web/src/services/storage/migrations/v15-to-v16.ts
index 800c9c07..07afe148 100644
--- a/apps/web/src/services/storage/migrations/v15-to-v16.ts
+++ b/apps/web/src/services/storage/migrations/v15-to-v16.ts
@@ -1,16 +1,16 @@
-import { StorageMigration } from "./base";
-import type { ProjectRecord } from "./transformers/types";
-import { transformProjectV15ToV16 } from "./transformers/v15-to-v16";
-
-export class V15toV16Migration extends StorageMigration {
-	from = 15;
-	to = 16;
-
-	async transform(project: ProjectRecord): Promise<{
-		project: ProjectRecord;
-		skipped: boolean;
-		reason?: string;
-	}> {
-		return transformProjectV15ToV16({ project });
-	}
-}
+import { StorageMigration } from "./base";

+import type { ProjectRecord } from "./transformers/types";

+import { transformProjectV15ToV16 } from "./transformers/v15-to-v16";

+

+export class V15toV16Migration extends StorageMigration {

+	from = 15;

+	to = 16;

+

+	async transform(project: ProjectRecord): Promise<{

+		project: ProjectRecord;

+		skipped: boolean;

+		reason?: string;

+	}> {

+		return transformProjectV15ToV16({ project });

+	}

+}

diff --git a/apps/web/src/services/storage/migrations/v16-to-v17.ts b/apps/web/src/services/storage/migrations/v16-to-v17.ts
index f4029db6..053e8d07 100644
--- a/apps/web/src/services/storage/migrations/v16-to-v17.ts
+++ b/apps/web/src/services/storage/migrations/v16-to-v17.ts
@@ -1,16 +1,16 @@
-import { StorageMigration } from "./base";
-import type { ProjectRecord } from "./transformers/types";
-import { transformProjectV16ToV17 } from "./transformers/v16-to-v17";
-
-export class V16toV17Migration extends StorageMigration {
-	from = 16;
-	to = 17;
-
-	async transform(project: ProjectRecord): Promise<{
-		project: ProjectRecord;
-		skipped: boolean;
-		reason?: string;
-	}> {
-		return transformProjectV16ToV17({ project });
-	}
-}
+import { StorageMigration } from "./base";

+import type { ProjectRecord } from "./transformers/types";

+import { transformProjectV16ToV17 } from "./transformers/v16-to-v17";

+

+export class V16toV17Migration extends StorageMigration {

+	from = 16;

+	to = 17;

+

+	async transform(project: ProjectRecord): Promise<{

+		project: ProjectRecord;

+		skipped: boolean;

+		reason?: string;

+	}> {

+		return transformProjectV16ToV17({ project });

+	}

+}

diff --git a/apps/web/src/services/storage/migrations/v17-to-v18.ts b/apps/web/src/services/storage/migrations/v17-to-v18.ts
index 75beb36b..b1591907 100644
--- a/apps/web/src/services/storage/migrations/v17-to-v18.ts
+++ b/apps/web/src/services/storage/migrations/v17-to-v18.ts
@@ -1,16 +1,16 @@
-import { StorageMigration } from "./base";
-import type { ProjectRecord } from "./transformers/types";
-import { transformProjectV17ToV18 } from "./transformers/v17-to-v18";
-
-export class V17toV18Migration extends StorageMigration {
-	from = 17;
-	to = 18;
-
-	async transform(project: ProjectRecord): Promise<{
-		project: ProjectRecord;
-		skipped: boolean;
-		reason?: string;
-	}> {
-		return transformProjectV17ToV18({ project });
-	}
-}
+import { StorageMigration } from "./base";

+import type { ProjectRecord } from "./transformers/types";

+import { transformProjectV17ToV18 } from "./transformers/v17-to-v18";

+

+export class V17toV18Migration extends StorageMigration {

+	from = 17;

+	to = 18;

+

+	async transform(project: ProjectRecord): Promise<{

+		project: ProjectRecord;

+		skipped: boolean;

+		reason?: string;

+	}> {

+		return transformProjectV17ToV18({ project });

+	}

+}

diff --git a/apps/web/src/services/storage/migrations/v18-to-v19.ts b/apps/web/src/services/storage/migrations/v18-to-v19.ts
index 166d9855..d8fde783 100644
--- a/apps/web/src/services/storage/migrations/v18-to-v19.ts
+++ b/apps/web/src/services/storage/migrations/v18-to-v19.ts
@@ -1,16 +1,16 @@
-import { StorageMigration } from "./base";
-import type { ProjectRecord } from "./transformers/types";
-import { transformProjectV18ToV19 } from "./transformers/v18-to-v19";
-
-export class V18toV19Migration extends StorageMigration {
-	from = 18;
-	to = 19;
-
-	async transform(project: ProjectRecord): Promise<{
-		project: ProjectRecord;
-		skipped: boolean;
-		reason?: string;
-	}> {
-		return transformProjectV18ToV19({ project });
-	}
-}
+import { StorageMigration } from "./base";

+import type { ProjectRecord } from "./transformers/types";

+import { transformProjectV18ToV19 } from "./transformers/v18-to-v19";

+

+export class V18toV19Migration extends StorageMigration {

+	from = 18;

+	to = 19;

+

+	async transform(project: ProjectRecord): Promise<{

+		project: ProjectRecord;

+		skipped: boolean;

+		reason?: string;

+	}> {

+		return transformProjectV18ToV19({ project });

+	}

+}

diff --git a/apps/web/src/services/storage/migrations/v3-to-v4.ts b/apps/web/src/services/storage/migrations/v3-to-v4.ts
index 67b2fdf7..a3738076 100644
--- a/apps/web/src/services/storage/migrations/v3-to-v4.ts
+++ b/apps/web/src/services/storage/migrations/v3-to-v4.ts
@@ -1,16 +1,16 @@
-import { StorageMigration } from "./base";
-import type { ProjectRecord } from "./transformers/types";
-import { transformProjectV3ToV4 } from "./transformers/v3-to-v4";
-
-export class V3toV4Migration extends StorageMigration {
-	from = 3;
-	to = 4;
-
-	async transform(project: ProjectRecord): Promise<{
-		project: ProjectRecord;
-		skipped: boolean;
-		reason?: string;
-	}> {
-		return transformProjectV3ToV4({ project });
-	}
-}
+import { StorageMigration } from "./base";

+import type { ProjectRecord } from "./transformers/types";

+import { transformProjectV3ToV4 } from "./transformers/v3-to-v4";

+

+export class V3toV4Migration extends StorageMigration {

+	from = 3;

+	to = 4;

+

+	async transform(project: ProjectRecord): Promise<{

+		project: ProjectRecord;

+		skipped: boolean;

+		reason?: string;

+	}> {

+		return transformProjectV3ToV4({ project });

+	}

+}

diff --git a/apps/web/src/services/storage/migrations/v4-to-v5.ts b/apps/web/src/services/storage/migrations/v4-to-v5.ts
index 829a746d..394406d1 100644
--- a/apps/web/src/services/storage/migrations/v4-to-v5.ts
+++ b/apps/web/src/services/storage/migrations/v4-to-v5.ts
@@ -1,16 +1,16 @@
-import { StorageMigration } from "./base";
-import type { ProjectRecord } from "./transformers/types";
-import { transformProjectV4ToV5 } from "./transformers/v4-to-v5";
-
-export class V4toV5Migration extends StorageMigration {
-	from = 4;
-	to = 5;
-
-	async transform(project: ProjectRecord): Promise<{
-		project: ProjectRecord;
-		skipped: boolean;
-		reason?: string;
-	}> {
-		return transformProjectV4ToV5({ project });
-	}
-}
+import { StorageMigration } from "./base";

+import type { ProjectRecord } from "./transformers/types";

+import { transformProjectV4ToV5 } from "./transformers/v4-to-v5";

+

+export class V4toV5Migration extends StorageMigration {

+	from = 4;

+	to = 5;

+

+	async transform(project: ProjectRecord): Promise<{

+		project: ProjectRecord;

+		skipped: boolean;

+		reason?: string;

+	}> {

+		return transformProjectV4ToV5({ project });

+	}

+}

diff --git a/apps/web/src/services/storage/migrations/v5-to-v6.ts b/apps/web/src/services/storage/migrations/v5-to-v6.ts
index b621bd72..e6be4f9b 100644
--- a/apps/web/src/services/storage/migrations/v5-to-v6.ts
+++ b/apps/web/src/services/storage/migrations/v5-to-v6.ts
@@ -1,16 +1,16 @@
-import { StorageMigration } from "./base";
-import type { ProjectRecord } from "./transformers/types";
-import { transformProjectV5ToV6 } from "./transformers/v5-to-v6";
-
-export class V5toV6Migration extends StorageMigration {
-	from = 5;
-	to = 6;
-
-	async transform(project: ProjectRecord): Promise<{
-		project: ProjectRecord;
-		skipped: boolean;
-		reason?: string;
-	}> {
-		return transformProjectV5ToV6({ project });
-	}
-}
+import { StorageMigration } from "./base";

+import type { ProjectRecord } from "./transformers/types";

+import { transformProjectV5ToV6 } from "./transformers/v5-to-v6";

+

+export class V5toV6Migration extends StorageMigration {

+	from = 5;

+	to = 6;

+

+	async transform(project: ProjectRecord): Promise<{

+		project: ProjectRecord;

+		skipped: boolean;

+		reason?: string;

+	}> {

+		return transformProjectV5ToV6({ project });

+	}

+}

diff --git a/apps/web/src/services/storage/migrations/v6-to-v7.ts b/apps/web/src/services/storage/migrations/v6-to-v7.ts
index 0556b4d5..3f63770b 100644
--- a/apps/web/src/services/storage/migrations/v6-to-v7.ts
+++ b/apps/web/src/services/storage/migrations/v6-to-v7.ts
@@ -1,16 +1,16 @@
-import { StorageMigration } from "./base";
-import type { ProjectRecord } from "./transformers/types";
-import { transformProjectV6ToV7 } from "./transformers/v6-to-v7";
-
-export class V6toV7Migration extends StorageMigration {
-	from = 6;
-	to = 7;
-
-	async transform(project: ProjectRecord): Promise<{
-		project: ProjectRecord;
-		skipped: boolean;
-		reason?: string;
-	}> {
-		return transformProjectV6ToV7({ project });
-	}
-}
+import { StorageMigration } from "./base";

+import type { ProjectRecord } from "./transformers/types";

+import { transformProjectV6ToV7 } from "./transformers/v6-to-v7";

+

+export class V6toV7Migration extends StorageMigration {

+	from = 6;

+	to = 7;

+

+	async transform(project: ProjectRecord): Promise<{

+		project: ProjectRecord;

+		skipped: boolean;

+		reason?: string;

+	}> {

+		return transformProjectV6ToV7({ project });

+	}

+}

diff --git a/apps/web/src/services/storage/migrations/v7-to-v8.ts b/apps/web/src/services/storage/migrations/v7-to-v8.ts
index 33372c0a..5a3302f7 100644
--- a/apps/web/src/services/storage/migrations/v7-to-v8.ts
+++ b/apps/web/src/services/storage/migrations/v7-to-v8.ts
@@ -1,16 +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 });
-	}
-}
+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 });

+	}

+}

diff --git a/apps/web/src/services/storage/migrations/v8-to-v9.ts b/apps/web/src/services/storage/migrations/v8-to-v9.ts
index 6222eeac..bdbed910 100644
--- a/apps/web/src/services/storage/migrations/v8-to-v9.ts
+++ b/apps/web/src/services/storage/migrations/v8-to-v9.ts
@@ -1,16 +1,16 @@
-import { StorageMigration } from "./base";
-import type { ProjectRecord } from "./transformers/types";
-import { transformProjectV8ToV9 } from "./transformers/v8-to-v9";
-
-export class V8toV9Migration extends StorageMigration {
-	from = 8;
-	to = 9;
-
-	async transform(project: ProjectRecord): Promise<{
-		project: ProjectRecord;
-		skipped: boolean;
-		reason?: string;
-	}> {
-		return transformProjectV8ToV9({ project });
-	}
-}
+import { StorageMigration } from "./base";

+import type { ProjectRecord } from "./transformers/types";

+import { transformProjectV8ToV9 } from "./transformers/v8-to-v9";

+

+export class V8toV9Migration extends StorageMigration {

+	from = 8;

+	to = 9;

+

+	async transform(project: ProjectRecord): Promise<{

+		project: ProjectRecord;

+		skipped: boolean;

+		reason?: string;

+	}> {

+		return transformProjectV8ToV9({ project });

+	}

+}

diff --git a/apps/web/src/services/storage/migrations/v9-to-v10.ts b/apps/web/src/services/storage/migrations/v9-to-v10.ts
index 801096fe..d61116f0 100644
--- a/apps/web/src/services/storage/migrations/v9-to-v10.ts
+++ b/apps/web/src/services/storage/migrations/v9-to-v10.ts
@@ -1,16 +1,16 @@
-import { StorageMigration } from "./base";
-import type { ProjectRecord } from "./transformers/types";
-import { transformProjectV9ToV10 } from "./transformers/v9-to-v10";
-
-export class V9toV10Migration extends StorageMigration {
-	from = 9;
-	to = 10;
-
-	async transform(project: ProjectRecord): Promise<{
-		project: ProjectRecord;
-		skipped: boolean;
-		reason?: string;
-	}> {
-		return transformProjectV9ToV10({ project });
-	}
-}
+import { StorageMigration } from "./base";

+import type { ProjectRecord } from "./transformers/types";

+import { transformProjectV9ToV10 } from "./transformers/v9-to-v10";

+

+export class V9toV10Migration extends StorageMigration {

+	from = 9;

+	to = 10;

+

+	async transform(project: ProjectRecord): Promise<{

+		project: ProjectRecord;

+		skipped: boolean;

+		reason?: string;

+	}> {

+		return transformProjectV9ToV10({ project });

+	}

+}

diff --git a/apps/web/src/services/storage/quota.ts b/apps/web/src/services/storage/quota.ts
index 1eb6028e..4d1adad5 100644
--- a/apps/web/src/services/storage/quota.ts
+++ b/apps/web/src/services/storage/quota.ts
@@ -1,145 +1,145 @@
-const BYTE_UNITS = ["B", "KB", "MB", "GB", "TB"] as const;
-
-export const STORAGE_HEADROOM_RESERVE_BYTES = 50 * 1024 * 1024;
-
-export interface StorageQuotaStatus {
-	quotaBytes: number | null;
-	usageBytes: number | null;
-	headroomBytes: number | null;
-	availableBytes: number | null;
-}
-
-export interface StorageCapacityCheckResult {
-	canStore: boolean;
-	reason: "enough-space" | "insufficient-space" | "estimate-unavailable";
-	availableBytes: number | null;
-}
-
-function normalizeByteValue({ value }: { value: unknown }): number | null {
-	if (typeof value !== "number" || !Number.isFinite(value) || value < 0) {
-		return null;
-	}
-
-	return value;
-}
-
-export function formatStorageBytes({ bytes }: { bytes: number }): string {
-	if (!Number.isFinite(bytes) || bytes <= 0) {
-		return "0 B";
-	}
-
-	let value = bytes;
-	let unitIndex = 0;
-
-	while (value >= 1024 && unitIndex < BYTE_UNITS.length - 1) {
-		value /= 1024;
-		unitIndex += 1;
-	}
-
-	const precision = value >= 10 || unitIndex === 0 ? 0 : 1;
-	return `${value.toFixed(precision)} ${BYTE_UNITS[unitIndex]}`;
-}
-
-export async function readStorageQuotaStatus(): Promise<StorageQuotaStatus> {
-	if (
-		typeof navigator === "undefined" ||
-		!navigator.storage ||
-		typeof navigator.storage.estimate !== "function"
-	) {
-		return {
-			quotaBytes: null,
-			usageBytes: null,
-			headroomBytes: null,
-			availableBytes: null,
-		};
-	}
-
-	const estimate = await navigator.storage.estimate();
-	const quotaBytes = normalizeByteValue({ value: estimate.quota });
-	const usageBytes = normalizeByteValue({ value: estimate.usage });
-
-	if (quotaBytes === null || usageBytes === null) {
-		return {
-			quotaBytes,
-			usageBytes,
-			headroomBytes: null,
-			availableBytes: null,
-		};
-	}
-
-	const headroomBytes = Math.max(quotaBytes - usageBytes, 0);
-	const availableBytes = Math.max(
-		headroomBytes - STORAGE_HEADROOM_RESERVE_BYTES,
-		0,
-	);
-
-	return {
-		quotaBytes,
-		usageBytes,
-		headroomBytes,
-		availableBytes,
-	};
-}
-
-export function evaluateStorageCapacity({
-	requiredBytes,
-	quotaStatus,
-}: {
-	requiredBytes: number;
-	quotaStatus: StorageQuotaStatus;
-}): StorageCapacityCheckResult {
-	if (quotaStatus.availableBytes === null) {
-		return {
-			canStore: true,
-			reason: "estimate-unavailable",
-			availableBytes: null,
-		};
-	}
-
-	if (requiredBytes > quotaStatus.availableBytes) {
-		return {
-			canStore: false,
-			reason: "insufficient-space",
-			availableBytes: quotaStatus.availableBytes,
-		};
-	}
-
-	return {
-		canStore: true,
-		reason: "enough-space",
-		availableBytes: quotaStatus.availableBytes,
-	};
-}
-
-export class StorageQuotaExceededError extends Error {
-	requiredBytes: number;
-
-	constructor({ requiredBytes }: { requiredBytes: number }) {
-		super(
-			`Not enough browser storage to save a ${formatStorageBytes({ bytes: requiredBytes })} file.`,
-		);
-
-		this.name = "StorageQuotaExceededError";
-		this.requiredBytes = requiredBytes;
-	}
-}
-
-export function isStorageQuotaExceededError({
-	error,
-}: {
-	error: unknown;
-}): boolean {
-	if (error instanceof StorageQuotaExceededError) {
-		return true;
-	}
-
-	if (!(error instanceof Error)) {
-		return false;
-	}
-
-	return (
-		error.name === "QuotaExceededError" ||
-		error.name === "NS_ERROR_DOM_QUOTA_REACHED" ||
-		error.message.toLowerCase().includes("quota")
-	);
-}
+const BYTE_UNITS = ["B", "KB", "MB", "GB", "TB"] as const;

+

+export const STORAGE_HEADROOM_RESERVE_BYTES = 50 * 1024 * 1024;

+

+export interface StorageQuotaStatus {

+	quotaBytes: number | null;

+	usageBytes: number | null;

+	headroomBytes: number | null;

+	availableBytes: number | null;

+}

+

+export interface StorageCapacityCheckResult {

+	canStore: boolean;

+	reason: "enough-space" | "insufficient-space" | "estimate-unavailable";

+	availableBytes: number | null;

+}

+

+function normalizeByteValue({ value }: { value: unknown }): number | null {

+	if (typeof value !== "number" || !Number.isFinite(value) || value < 0) {

+		return null;

+	}

+

+	return value;

+}

+

+export function formatStorageBytes({ bytes }: { bytes: number }): string {

+	if (!Number.isFinite(bytes) || bytes <= 0) {

+		return "0 B";

+	}

+

+	let value = bytes;

+	let unitIndex = 0;

+

+	while (value >= 1024 && unitIndex < BYTE_UNITS.length - 1) {

+		value /= 1024;

+		unitIndex += 1;

+	}

+

+	const precision = value >= 10 || unitIndex === 0 ? 0 : 1;

+	return `${value.toFixed(precision)} ${BYTE_UNITS[unitIndex]}`;

+}

+

+export async function readStorageQuotaStatus(): Promise<StorageQuotaStatus> {

+	if (

+		typeof navigator === "undefined" ||

+		!navigator.storage ||

+		typeof navigator.storage.estimate !== "function"

+	) {

+		return {

+			quotaBytes: null,

+			usageBytes: null,

+			headroomBytes: null,

+			availableBytes: null,

+		};

+	}

+

+	const estimate = await navigator.storage.estimate();

+	const quotaBytes = normalizeByteValue({ value: estimate.quota });

+	const usageBytes = normalizeByteValue({ value: estimate.usage });

+

+	if (quotaBytes === null || usageBytes === null) {

+		return {

+			quotaBytes,

+			usageBytes,

+			headroomBytes: null,

+			availableBytes: null,

+		};

+	}

+

+	const headroomBytes = Math.max(quotaBytes - usageBytes, 0);

+	const availableBytes = Math.max(

+		headroomBytes - STORAGE_HEADROOM_RESERVE_BYTES,

+		0,

+	);

+

+	return {

+		quotaBytes,

+		usageBytes,

+		headroomBytes,

+		availableBytes,

+	};

+}

+

+export function evaluateStorageCapacity({

+	requiredBytes,

+	quotaStatus,

+}: {

+	requiredBytes: number;

+	quotaStatus: StorageQuotaStatus;

+}): StorageCapacityCheckResult {

+	if (quotaStatus.availableBytes === null) {

+		return {

+			canStore: true,

+			reason: "estimate-unavailable",

+			availableBytes: null,

+		};

+	}

+

+	if (requiredBytes > quotaStatus.availableBytes) {

+		return {

+			canStore: false,

+			reason: "insufficient-space",

+			availableBytes: quotaStatus.availableBytes,

+		};

+	}

+

+	return {

+		canStore: true,

+		reason: "enough-space",

+		availableBytes: quotaStatus.availableBytes,

+	};

+}

+

+export class StorageQuotaExceededError extends Error {

+	requiredBytes: number;

+

+	constructor({ requiredBytes }: { requiredBytes: number }) {

+		super(

+			`Not enough browser storage to save a ${formatStorageBytes({ bytes: requiredBytes })} file.`,

+		);

+

+		this.name = "StorageQuotaExceededError";

+		this.requiredBytes = requiredBytes;

+	}

+}

+

+export function isStorageQuotaExceededError({

+	error,

+}: {

+	error: unknown;

+}): boolean {

+	if (error instanceof StorageQuotaExceededError) {

+		return true;

+	}

+

+	if (!(error instanceof Error)) {

+		return false;

+	}

+

+	return (

+		error.name === "QuotaExceededError" ||

+		error.name === "NS_ERROR_DOM_QUOTA_REACHED" ||

+		error.message.toLowerCase().includes("quota")

+	);

+}

diff --git a/apps/web/src/services/transcription/service.ts b/apps/web/src/services/transcription/service.ts
index ab88106c..fa657032 100644
--- a/apps/web/src/services/transcription/service.ts
+++ b/apps/web/src/services/transcription/service.ts
@@ -1,186 +1,186 @@
-import type {
-	TranscriptionLanguage,
-	TranscriptionResult,
-	TranscriptionProgress,
-	TranscriptionModelId,
-} from "@/lib/transcription/types";
-import {
-	DEFAULT_TRANSCRIPTION_MODEL,
-	TRANSCRIPTION_MODELS,
-} from "@/constants/transcription-constants";
-import type { WorkerMessage, WorkerResponse } from "./worker";
-
-type ProgressCallback = (progress: TranscriptionProgress) => void;
-
-class TranscriptionService {
-	private worker: Worker | null = null;
-	private currentModelId: TranscriptionModelId | null = null;
-	private isInitialized = false;
-	private isInitializing = false;
-
-	async transcribe({
-		audioData,
-		language = "auto",
-		modelId = DEFAULT_TRANSCRIPTION_MODEL,
-		onProgress,
-	}: {
-		audioData: Float32Array;
-		language?: TranscriptionLanguage;
-		modelId?: TranscriptionModelId;
-		onProgress?: ProgressCallback;
-	}): Promise<TranscriptionResult> {
-		await this.ensureWorker({ modelId, onProgress });
-
-		return new Promise((resolve, reject) => {
-			if (!this.worker) {
-				reject(new Error("Worker not initialized"));
-				return;
-			}
-
-			const handleMessage = (event: MessageEvent<WorkerResponse>) => {
-				const response = event.data;
-
-				switch (response.type) {
-					case "transcribe-progress":
-						onProgress?.({
-							status: "transcribing",
-							progress: response.progress,
-							message: "Transcribing audio...",
-						});
-						break;
-
-					case "transcribe-complete":
-						this.worker?.removeEventListener("message", handleMessage);
-						resolve({
-							text: response.text,
-							segments: response.segments,
-							language,
-						});
-						break;
-
-					case "transcribe-error":
-						this.worker?.removeEventListener("message", handleMessage);
-						reject(new Error(response.error));
-						break;
-
-					case "cancelled":
-						this.worker?.removeEventListener("message", handleMessage);
-						reject(new Error("Transcription cancelled"));
-						break;
-				}
-			};
-
-			this.worker.addEventListener("message", handleMessage);
-
-			this.worker.postMessage({
-				type: "transcribe",
-				audio: audioData,
-				language,
-			} satisfies WorkerMessage);
-		});
-	}
-
-	cancel() {
-		this.worker?.postMessage({ type: "cancel" } satisfies WorkerMessage);
-	}
-
-	private async ensureWorker({
-		modelId,
-		onProgress,
-	}: {
-		modelId: TranscriptionModelId;
-		onProgress?: ProgressCallback;
-	}): Promise<void> {
-		const needsNewModel = this.currentModelId !== modelId;
-
-		if (this.worker && this.isInitialized && !needsNewModel) {
-			return;
-		}
-
-		if (this.isInitializing && !needsNewModel) {
-			await this.waitForInit();
-			return;
-		}
-
-		this.terminate();
-		this.isInitializing = true;
-		this.isInitialized = false;
-
-		const model = TRANSCRIPTION_MODELS.find((m) => m.id === modelId);
-		if (!model) {
-			throw new Error(`Unknown model: ${modelId}`);
-		}
-
-		this.worker = new Worker(new URL("./worker.ts", import.meta.url), {
-			type: "module",
-		});
-
-		return new Promise((resolve, reject) => {
-			if (!this.worker) {
-				reject(new Error("Failed to create worker"));
-				return;
-			}
-
-			const handleMessage = (event: MessageEvent<WorkerResponse>) => {
-				const response = event.data;
-
-				switch (response.type) {
-					case "init-progress":
-						onProgress?.({
-							status: "loading-model",
-							progress: response.progress,
-							message: `Loading ${model.name} model...`,
-						});
-						break;
-
-					case "init-complete":
-						this.worker?.removeEventListener("message", handleMessage);
-						this.isInitialized = true;
-						this.isInitializing = false;
-						this.currentModelId = modelId;
-						resolve();
-						break;
-
-					case "init-error":
-						this.worker?.removeEventListener("message", handleMessage);
-						this.isInitializing = false;
-						this.terminate();
-						reject(new Error(response.error));
-						break;
-				}
-			};
-
-			this.worker.addEventListener("message", handleMessage);
-
-			this.worker.postMessage({
-				type: "init",
-				modelId: model.huggingFaceId,
-			} satisfies WorkerMessage);
-		});
-	}
-
-	private waitForInit(): Promise<void> {
-		return new Promise((resolve) => {
-			const checkInit = () => {
-				if (this.isInitialized) {
-					resolve();
-				} else if (!this.isInitializing) {
-					resolve();
-				} else {
-					setTimeout(checkInit, 100);
-				}
-			};
-			checkInit();
-		});
-	}
-
-	terminate() {
-		this.worker?.terminate();
-		this.worker = null;
-		this.isInitialized = false;
-		this.isInitializing = false;
-		this.currentModelId = null;
-	}
-}
-
-export const transcriptionService = new TranscriptionService();
+import type {

+	TranscriptionLanguage,

+	TranscriptionResult,

+	TranscriptionProgress,

+	TranscriptionModelId,

+} from "@/lib/transcription/types";

+import {

+	DEFAULT_TRANSCRIPTION_MODEL,

+	TRANSCRIPTION_MODELS,

+} from "@/constants/transcription-constants";

+import type { WorkerMessage, WorkerResponse } from "./worker";

+

+type ProgressCallback = (progress: TranscriptionProgress) => void;

+

+class TranscriptionService {

+	private worker: Worker | null = null;

+	private currentModelId: TranscriptionModelId | null = null;

+	private isInitialized = false;

+	private isInitializing = false;

+

+	async transcribe({

+		audioData,

+		language = "auto",

+		modelId = DEFAULT_TRANSCRIPTION_MODEL,

+		onProgress,

+	}: {

+		audioData: Float32Array;

+		language?: TranscriptionLanguage;

+		modelId?: TranscriptionModelId;

+		onProgress?: ProgressCallback;

+	}): Promise<TranscriptionResult> {

+		await this.ensureWorker({ modelId, onProgress });

+

+		return new Promise((resolve, reject) => {

+			if (!this.worker) {

+				reject(new Error("Worker not initialized"));

+				return;

+			}

+

+			const handleMessage = (event: MessageEvent<WorkerResponse>) => {

+				const response = event.data;

+

+				switch (response.type) {

+					case "transcribe-progress":

+						onProgress?.({

+							status: "transcribing",

+							progress: response.progress,

+							message: "Transcribing audio...",

+						});

+						break;

+

+					case "transcribe-complete":

+						this.worker?.removeEventListener("message", handleMessage);

+						resolve({

+							text: response.text,

+							segments: response.segments,

+							language,

+						});

+						break;

+

+					case "transcribe-error":

+						this.worker?.removeEventListener("message", handleMessage);

+						reject(new Error(response.error));

+						break;

+

+					case "cancelled":

+						this.worker?.removeEventListener("message", handleMessage);

+						reject(new Error("Transcription cancelled"));

+						break;

+				}

+			};

+

+			this.worker.addEventListener("message", handleMessage);

+

+			this.worker.postMessage({

+				type: "transcribe",

+				audio: audioData,

+				language,

+			} satisfies WorkerMessage);

+		});

+	}

+

+	cancel() {

+		this.worker?.postMessage({ type: "cancel" } satisfies WorkerMessage);

+	}

+

+	private async ensureWorker({

+		modelId,

+		onProgress,

+	}: {

+		modelId: TranscriptionModelId;

+		onProgress?: ProgressCallback;

+	}): Promise<void> {

+		const needsNewModel = this.currentModelId !== modelId;

+

+		if (this.worker && this.isInitialized && !needsNewModel) {

+			return;

+		}

+

+		if (this.isInitializing && !needsNewModel) {

+			await this.waitForInit();

+			return;

+		}

+

+		this.terminate();

+		this.isInitializing = true;

+		this.isInitialized = false;

+

+		const model = TRANSCRIPTION_MODELS.find((m) => m.id === modelId);

+		if (!model) {

+			throw new Error(`Unknown model: ${modelId}`);

+		}

+

+		this.worker = new Worker(new URL("./worker.ts", import.meta.url), {

+			type: "module",

+		});

+

+		return new Promise((resolve, reject) => {

+			if (!this.worker) {

+				reject(new Error("Failed to create worker"));

+				return;

+			}

+

+			const handleMessage = (event: MessageEvent<WorkerResponse>) => {

+				const response = event.data;

+

+				switch (response.type) {

+					case "init-progress":

+						onProgress?.({

+							status: "loading-model",

+							progress: response.progress,

+							message: `Loading ${model.name} model...`,

+						});

+						break;

+

+					case "init-complete":

+						this.worker?.removeEventListener("message", handleMessage);

+						this.isInitialized = true;

+						this.isInitializing = false;

+						this.currentModelId = modelId;

+						resolve();

+						break;

+

+					case "init-error":

+						this.worker?.removeEventListener("message", handleMessage);

+						this.isInitializing = false;

+						this.terminate();

+						reject(new Error(response.error));

+						break;

+				}

+			};

+

+			this.worker.addEventListener("message", handleMessage);

+

+			this.worker.postMessage({

+				type: "init",

+				modelId: model.huggingFaceId,

+			} satisfies WorkerMessage);

+		});

+	}

+

+	private waitForInit(): Promise<void> {

+		return new Promise((resolve) => {

+			const checkInit = () => {

+				if (this.isInitialized) {

+					resolve();

+				} else if (!this.isInitializing) {

+					resolve();

+				} else {

+					setTimeout(checkInit, 100);

+				}

+			};

+			checkInit();

+		});

+	}

+

+	terminate() {

+		this.worker?.terminate();

+		this.worker = null;

+		this.isInitialized = false;

+		this.isInitializing = false;

+		this.currentModelId = null;

+	}

+}

+

+export const transcriptionService = new TranscriptionService();

diff --git a/apps/web/src/services/transcription/worker.ts b/apps/web/src/services/transcription/worker.ts
index e583b2ab..e22fe796 100644
--- a/apps/web/src/services/transcription/worker.ts
+++ b/apps/web/src/services/transcription/worker.ts
@@ -1,176 +1,176 @@
-import {
-	pipeline,
-	type AutomaticSpeechRecognitionPipeline,
-	type AutomaticSpeechRecognitionOutput,
-} from "@huggingface/transformers";
-import type { TranscriptionSegment } from "@/lib/transcription/types";
-import {
-	DEFAULT_CHUNK_LENGTH_SECONDS,
-	DEFAULT_STRIDE_SECONDS,
-} from "@/constants/transcription-constants";
-
-export type WorkerMessage =
-	| { type: "init"; modelId: string }
-	| { type: "transcribe"; audio: Float32Array; language: string }
-	| { type: "cancel" };
-
-export type WorkerResponse =
-	| { type: "init-progress"; progress: number }
-	| { type: "init-complete" }
-	| { type: "init-error"; error: string }
-	| { type: "transcribe-progress"; progress: number }
-	| {
-			type: "transcribe-complete";
-			text: string;
-			segments: TranscriptionSegment[];
-	  }
-	| { type: "transcribe-error"; error: string }
-	| { type: "cancelled" };
-
-let transcriber: AutomaticSpeechRecognitionPipeline | null = null;
-let cancelled = false;
-let lastReportedProgress = -1;
-const fileBytes = new Map<string, { loaded: number; total: number }>();
-
-self.onmessage = async (event: MessageEvent<WorkerMessage>) => {
-	const message = event.data;
-
-	switch (message.type) {
-		case "init":
-			await handleInit({ modelId: message.modelId });
-			break;
-		case "transcribe":
-			await handleTranscribe({
-				audio: message.audio,
-				language: message.language,
-			});
-			break;
-		case "cancel":
-			cancelled = true;
-			self.postMessage({ type: "cancelled" } satisfies WorkerResponse);
-			break;
-	}
-};
-
-async function handleInit({ modelId }: { modelId: string }) {
-	lastReportedProgress = -1;
-	fileBytes.clear();
-
-	try {
-		transcriber = (await pipeline("automatic-speech-recognition", modelId, {
-			dtype: "q4",
-			device: "auto",
-			progress_callback: (progressInfo: {
-				status?: string;
-				file?: string;
-				loaded?: number;
-				total?: number;
-			}) => {
-				const file = progressInfo.file;
-				if (!file) return;
-
-				const loaded = progressInfo.loaded ?? 0;
-				const total = progressInfo.total ?? 0;
-
-				if (progressInfo.status === "progress" && total > 0) {
-					fileBytes.set(file, { loaded, total });
-				} else if (progressInfo.status === "done") {
-					const existing = fileBytes.get(file);
-					if (existing) {
-						fileBytes.set(file, {
-							loaded: existing.total,
-							total: existing.total,
-						});
-					}
-				}
-
-				// sum all bytes
-				let totalLoaded = 0;
-				let totalSize = 0;
-				for (const { loaded, total } of fileBytes.values()) {
-					totalLoaded += loaded;
-					totalSize += total;
-				}
-
-				if (totalSize === 0) return;
-
-				const overallProgress = (totalLoaded / totalSize) * 100;
-				const roundedProgress = Math.floor(overallProgress);
-
-				if (roundedProgress !== lastReportedProgress) {
-					lastReportedProgress = roundedProgress;
-					self.postMessage({
-						type: "init-progress",
-						progress: roundedProgress,
-					} satisfies WorkerResponse);
-				}
-			},
-		})) as unknown as AutomaticSpeechRecognitionPipeline;
-
-		self.postMessage({ type: "init-complete" } satisfies WorkerResponse);
-	} catch (error) {
-		self.postMessage({
-			type: "init-error",
-			error: error instanceof Error ? error.message : "Failed to load model",
-		} satisfies WorkerResponse);
-	}
-}
-
-async function handleTranscribe({
-	audio,
-	language,
-}: {
-	audio: Float32Array;
-	language: string;
-}) {
-	if (!transcriber) {
-		self.postMessage({
-			type: "transcribe-error",
-			error: "Model not initialized",
-		} satisfies WorkerResponse);
-		return;
-	}
-
-	cancelled = false;
-
-	try {
-		const rawResult = await transcriber(audio, {
-			chunk_length_s: DEFAULT_CHUNK_LENGTH_SECONDS,
-			stride_length_s: DEFAULT_STRIDE_SECONDS,
-			language: language === "auto" ? undefined : language,
-			return_timestamps: true,
-		});
-
-		if (cancelled) return;
-
-		const result: AutomaticSpeechRecognitionOutput = Array.isArray(rawResult)
-			? rawResult[0]
-			: rawResult;
-
-		const segments: TranscriptionSegment[] = [];
-
-		if (result.chunks) {
-			for (const chunk of result.chunks) {
-				if (chunk.timestamp && chunk.timestamp.length >= 2) {
-					segments.push({
-						text: chunk.text,
-						start: chunk.timestamp[0] ?? 0,
-						end: chunk.timestamp[1] ?? chunk.timestamp[0] ?? 0,
-					});
-				}
-			}
-		}
-
-		self.postMessage({
-			type: "transcribe-complete",
-			text: result.text,
-			segments,
-		} satisfies WorkerResponse);
-	} catch (error) {
-		if (cancelled) return;
-		self.postMessage({
-			type: "transcribe-error",
-			error: error instanceof Error ? error.message : "Transcription failed",
-		} satisfies WorkerResponse);
-	}
-}
+import {

+	pipeline,

+	type AutomaticSpeechRecognitionPipeline,

+	type AutomaticSpeechRecognitionOutput,

+} from "@huggingface/transformers";

+import type { TranscriptionSegment } from "@/lib/transcription/types";

+import {

+	DEFAULT_CHUNK_LENGTH_SECONDS,

+	DEFAULT_STRIDE_SECONDS,

+} from "@/constants/transcription-constants";

+

+export type WorkerMessage =

+	| { type: "init"; modelId: string }

+	| { type: "transcribe"; audio: Float32Array; language: string }

+	| { type: "cancel" };

+

+export type WorkerResponse =

+	| { type: "init-progress"; progress: number }

+	| { type: "init-complete" }

+	| { type: "init-error"; error: string }

+	| { type: "transcribe-progress"; progress: number }

+	| {

+			type: "transcribe-complete";

+			text: string;

+			segments: TranscriptionSegment[];

+	  }

+	| { type: "transcribe-error"; error: string }

+	| { type: "cancelled" };

+

+let transcriber: AutomaticSpeechRecognitionPipeline | null = null;

+let cancelled = false;

+let lastReportedProgress = -1;

+const fileBytes = new Map<string, { loaded: number; total: number }>();

+

+self.onmessage = async (event: MessageEvent<WorkerMessage>) => {

+	const message = event.data;

+

+	switch (message.type) {

+		case "init":

+			await handleInit({ modelId: message.modelId });

+			break;

+		case "transcribe":

+			await handleTranscribe({

+				audio: message.audio,

+				language: message.language,

+			});

+			break;

+		case "cancel":

+			cancelled = true;

+			self.postMessage({ type: "cancelled" } satisfies WorkerResponse);

+			break;

+	}

+};

+

+async function handleInit({ modelId }: { modelId: string }) {

+	lastReportedProgress = -1;

+	fileBytes.clear();

+

+	try {

+		transcriber = (await pipeline("automatic-speech-recognition", modelId, {

+			dtype: "q4",

+			device: "auto",

+			progress_callback: (progressInfo: {

+				status?: string;

+				file?: string;

+				loaded?: number;

+				total?: number;

+			}) => {

+				const file = progressInfo.file;

+				if (!file) return;

+

+				const loaded = progressInfo.loaded ?? 0;

+				const total = progressInfo.total ?? 0;

+

+				if (progressInfo.status === "progress" && total > 0) {

+					fileBytes.set(file, { loaded, total });

+				} else if (progressInfo.status === "done") {

+					const existing = fileBytes.get(file);

+					if (existing) {

+						fileBytes.set(file, {

+							loaded: existing.total,

+							total: existing.total,

+						});

+					}

+				}

+

+				// sum all bytes

+				let totalLoaded = 0;

+				let totalSize = 0;

+				for (const { loaded, total } of fileBytes.values()) {

+					totalLoaded += loaded;

+					totalSize += total;

+				}

+

+				if (totalSize === 0) return;

+

+				const overallProgress = (totalLoaded / totalSize) * 100;

+				const roundedProgress = Math.floor(overallProgress);

+

+				if (roundedProgress !== lastReportedProgress) {

+					lastReportedProgress = roundedProgress;

+					self.postMessage({

+						type: "init-progress",

+						progress: roundedProgress,

+					} satisfies WorkerResponse);

+				}

+			},

+		})) as unknown as AutomaticSpeechRecognitionPipeline;

+

+		self.postMessage({ type: "init-complete" } satisfies WorkerResponse);

+	} catch (error) {

+		self.postMessage({

+			type: "init-error",

+			error: error instanceof Error ? error.message : "Failed to load model",

+		} satisfies WorkerResponse);

+	}

+}

+

+async function handleTranscribe({

+	audio,

+	language,

+}: {

+	audio: Float32Array;

+	language: string;

+}) {

+	if (!transcriber) {

+		self.postMessage({

+			type: "transcribe-error",

+			error: "Model not initialized",

+		} satisfies WorkerResponse);

+		return;

+	}

+

+	cancelled = false;

+

+	try {

+		const rawResult = await transcriber(audio, {

+			chunk_length_s: DEFAULT_CHUNK_LENGTH_SECONDS,

+			stride_length_s: DEFAULT_STRIDE_SECONDS,

+			language: language === "auto" ? undefined : language,

+			return_timestamps: true,

+		});

+

+		if (cancelled) return;

+

+		const result: AutomaticSpeechRecognitionOutput = Array.isArray(rawResult)

+			? rawResult[0]

+			: rawResult;

+

+		const segments: TranscriptionSegment[] = [];

+

+		if (result.chunks) {

+			for (const chunk of result.chunks) {

+				if (chunk.timestamp && chunk.timestamp.length >= 2) {

+					segments.push({

+						text: chunk.text,

+						start: chunk.timestamp[0] ?? 0,

+						end: chunk.timestamp[1] ?? chunk.timestamp[0] ?? 0,

+					});

+				}

+			}

+		}

+

+		self.postMessage({

+			type: "transcribe-complete",

+			text: result.text,

+			segments,

+		} satisfies WorkerResponse);

+	} catch (error) {

+		if (cancelled) return;

+		self.postMessage({

+			type: "transcribe-error",

+			error: error instanceof Error ? error.message : "Transcription failed",

+		} satisfies WorkerResponse);

+	}

+}