chore: normalize line endings

45 files changed, 3086 insertions, 3052 deletions

diff --git a/apps/web/src/lib/commands/media/add-media-asset.ts b/apps/web/src/lib/commands/media/add-media-asset.ts
index a3dec0e6..86fa3e35 100644
--- a/apps/web/src/lib/commands/media/add-media-asset.ts
+++ b/apps/web/src/lib/commands/media/add-media-asset.ts
@@ -5,11 +5,15 @@ import type { MediaAsset } from "@/lib/media/types";
 import { generateUUID } from "@/utils/id";
 import { storageService } from "@/services/storage/service";
 import { hasMediaId } from "@/lib/timeline/element-utils";
+import { getHighestImportedVideoFps } from "@/lib/project/fps";
+import { UpdateProjectSettingsCommand } from "@/lib/commands/project";
 
 export class AddMediaAssetCommand extends Command {
 	private assetId: string;
 	private savedAssets: MediaAsset[] | null = null;
 	private createdAsset: MediaAsset | null = null;
+	private previousProjectFps: number | null = null;
+	private appliedProjectFps: number | null = null;
 
 	constructor(
 		private projectId: string,
@@ -31,6 +35,10 @@ export class AddMediaAssetCommand extends Command {
 		editor.media.setAssets({
 			assets: [...this.savedAssets, this.createdAsset],
 		});
+		this.previousProjectFps = editor.project.getActiveOrNull()?.settings.fps ?? null;
+		this.appliedProjectFps = editor.project.ratchetFpsForImportedMedia({
+			importedAssets: [this.createdAsset],
+		});
 
 		storageService
 			.saveMediaAsset({
@@ -64,6 +72,8 @@ export class AddMediaAssetCommand extends Command {
 					editor.timeline.deleteElements({ elements: orphanedElements });
 				}
 
+				this.restoreProjectFpsAfterFailedSave({ editor });
+
 				if (storageService.isQuotaExceededError({ error })) {
 					toast.error("Not enough browser storage", {
 						description: error instanceof Error ? error.message : undefined,
@@ -90,4 +100,28 @@ export class AddMediaAssetCommand extends Command {
 	getAssetId(): string {
 		return this.assetId;
 	}
+
+	private restoreProjectFpsAfterFailedSave({
+		editor,
+	}: {
+		editor: EditorCore;
+	}): void {
+		if (this.previousProjectFps === null || this.appliedProjectFps === null) return;
+
+		const activeProject = editor.project.getActiveOrNull();
+		if (!activeProject) return;
+		if (activeProject.settings.fps !== this.appliedProjectFps) return;
+
+		const highestRemainingVideoFps = getHighestImportedVideoFps({
+			mediaAssets: editor.media.getAssets(),
+		});
+		if (
+			highestRemainingVideoFps !== null &&
+			highestRemainingVideoFps >= this.appliedProjectFps
+		) {
+			return;
+		}
+
+		new UpdateProjectSettingsCommand({ fps: this.previousProjectFps }).execute();
+	}
 }
diff --git a/apps/web/src/lib/commands/media/remove-media-asset.ts b/apps/web/src/lib/commands/media/remove-media-asset.ts
index f519baef..84b395ed 100644
--- a/apps/web/src/lib/commands/media/remove-media-asset.ts
+++ b/apps/web/src/lib/commands/media/remove-media-asset.ts
@@ -1,99 +1,99 @@
-import { Command } from "@/lib/commands/base-command";
-import { EditorCore } from "@/core";
-import type { MediaAsset } from "@/lib/media/types";
-import { storageService } from "@/services/storage/service";
-import { videoCache } from "@/services/video-cache/service";
-import { hasMediaId } from "@/lib/timeline/element-utils";
-import type { TimelineTrack } from "@/lib/timeline";
-
-export class RemoveMediaAssetCommand extends Command {
-	private savedAssets: MediaAsset[] | null = null;
-	private savedTracks: TimelineTrack[] | null = null;
-	private removedAsset: MediaAsset | null = null;
-
-	constructor(
-		private projectId: string,
-		private assetId: string,
-	) {
-		super();
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		const assets = editor.media.getAssets();
-
-		this.savedAssets = [...assets];
-		this.savedTracks = editor.timeline.getTracks();
-
-		this.removedAsset =
-			assets.find((media) => media.id === this.assetId) ?? null;
-
-		if (!this.removedAsset) {
-			console.error("Media asset not found:", this.assetId);
-			return;
-		}
-
-		if (this.removedAsset.url) {
-			URL.revokeObjectURL(this.removedAsset.url);
-		}
-		if (this.removedAsset.thumbnailUrl) {
-			URL.revokeObjectURL(this.removedAsset.thumbnailUrl);
-		}
-
-		videoCache.clearVideo({ mediaId: this.assetId });
-
-		editor.media.setAssets({
-			assets: assets.filter((media) => media.id !== this.assetId),
-		});
-
-		const elementsToRemove: Array<{ trackId: string; elementId: string }> = [];
-
-		for (const track of this.savedTracks) {
-			for (const element of track.elements) {
-				if (hasMediaId(element) && element.mediaId === this.assetId) {
-					elementsToRemove.push({ trackId: track.id, elementId: element.id });
-				}
-			}
-		}
-
-		if (elementsToRemove.length > 0) {
-			editor.timeline.deleteElements({ elements: elementsToRemove });
-		}
-
-		storageService
-			.deleteMediaAsset({ projectId: this.projectId, id: this.assetId })
-			.catch((error) => {
-				console.error("Failed to delete media item:", error);
-			});
-	}
-
-	undo(): void {
-		const editor = EditorCore.getInstance();
-
-		if (this.savedAssets && this.removedAsset) {
-			const restoredAsset: MediaAsset = {
-				...this.removedAsset,
-				url: URL.createObjectURL(this.removedAsset.file),
-			};
-
-			editor.media.setAssets({
-				assets: this.savedAssets.map((a) =>
-					a.id === this.assetId ? restoredAsset : a,
-				),
-			});
-
-			storageService
-				.saveMediaAsset({
-					projectId: this.projectId,
-					mediaAsset: restoredAsset,
-				})
-				.catch((error) => {
-					console.error("Failed to restore media item on undo:", error);
-				});
-		}
-
-		if (this.savedTracks) {
-			editor.timeline.updateTracks(this.savedTracks);
-		}
-	}
-}
+import { Command } from "@/lib/commands/base-command";

+import { EditorCore } from "@/core";

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

+import { storageService } from "@/services/storage/service";

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

+import { hasMediaId } from "@/lib/timeline/element-utils";

+import type { TimelineTrack } from "@/lib/timeline";

+

+export class RemoveMediaAssetCommand extends Command {

+	private savedAssets: MediaAsset[] | null = null;

+	private savedTracks: TimelineTrack[] | null = null;

+	private removedAsset: MediaAsset | null = null;

+

+	constructor(

+		private projectId: string,

+		private assetId: string,

+	) {

+		super();

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		const assets = editor.media.getAssets();

+

+		this.savedAssets = [...assets];

+		this.savedTracks = editor.timeline.getTracks();

+

+		this.removedAsset =

+			assets.find((media) => media.id === this.assetId) ?? null;

+

+		if (!this.removedAsset) {

+			console.error("Media asset not found:", this.assetId);

+			return;

+		}

+

+		if (this.removedAsset.url) {

+			URL.revokeObjectURL(this.removedAsset.url);

+		}

+		if (this.removedAsset.thumbnailUrl) {

+			URL.revokeObjectURL(this.removedAsset.thumbnailUrl);

+		}

+

+		videoCache.clearVideo({ mediaId: this.assetId });

+

+		editor.media.setAssets({

+			assets: assets.filter((media) => media.id !== this.assetId),

+		});

+

+		const elementsToRemove: Array<{ trackId: string; elementId: string }> = [];

+

+		for (const track of this.savedTracks) {

+			for (const element of track.elements) {

+				if (hasMediaId(element) && element.mediaId === this.assetId) {

+					elementsToRemove.push({ trackId: track.id, elementId: element.id });

+				}

+			}

+		}

+

+		if (elementsToRemove.length > 0) {

+			editor.timeline.deleteElements({ elements: elementsToRemove });

+		}

+

+		storageService

+			.deleteMediaAsset({ projectId: this.projectId, id: this.assetId })

+			.catch((error) => {

+				console.error("Failed to delete media item:", error);

+			});

+	}

+

+	undo(): void {

+		const editor = EditorCore.getInstance();

+

+		if (this.savedAssets && this.removedAsset) {

+			const restoredAsset: MediaAsset = {

+				...this.removedAsset,

+				url: URL.createObjectURL(this.removedAsset.file),

+			};

+

+			editor.media.setAssets({

+				assets: this.savedAssets.map((a) =>

+					a.id === this.assetId ? restoredAsset : a,

+				),

+			});

+

+			storageService

+				.saveMediaAsset({

+					projectId: this.projectId,

+					mediaAsset: restoredAsset,

+				})

+				.catch((error) => {

+					console.error("Failed to restore media item on undo:", error);

+				});

+		}

+

+		if (this.savedTracks) {

+			editor.timeline.updateTracks(this.savedTracks);

+		}

+	}

+}

diff --git a/apps/web/src/lib/commands/preview-tracker.ts b/apps/web/src/lib/commands/preview-tracker.ts
index 68c8dee3..38ef4edd 100644
--- a/apps/web/src/lib/commands/preview-tracker.ts
+++ b/apps/web/src/lib/commands/preview-tracker.ts
@@ -1,23 +1,23 @@
-export class PreviewTracker<T> {
-	private snapshot: T | null = null;
-
-	begin({ state }: { state: T }): void {
-		if (this.snapshot === null) {
-			this.snapshot = structuredClone(state);
-		}
-	}
-
-	isActive(): boolean {
-		return this.snapshot !== null;
-	}
-
-	getSnapshot(): T | null {
-		return this.snapshot;
-	}
-
-	end(): T | null {
-		const snapshot = this.snapshot;
-		this.snapshot = null;
-		return snapshot;
-	}
-}
+export class PreviewTracker<T> {

+	private snapshot: T | null = null;

+

+	begin({ state }: { state: T }): void {

+		if (this.snapshot === null) {

+			this.snapshot = structuredClone(state);

+		}

+	}

+

+	isActive(): boolean {

+		return this.snapshot !== null;

+	}

+

+	getSnapshot(): T | null {

+		return this.snapshot;

+	}

+

+	end(): T | null {

+		const snapshot = this.snapshot;

+		this.snapshot = null;

+		return snapshot;

+	}

+}

diff --git a/apps/web/src/lib/commands/project/update-project-settings.ts b/apps/web/src/lib/commands/project/update-project-settings.ts
index b16431c1..8320095b 100644
--- a/apps/web/src/lib/commands/project/update-project-settings.ts
+++ b/apps/web/src/lib/commands/project/update-project-settings.ts
@@ -1,46 +1,46 @@
-import { Command } from "@/lib/commands/base-command";
-import { EditorCore } from "@/core";
-import type { TProject, TProjectSettings } from "@/lib/project/types";
-
-export class UpdateProjectSettingsCommand extends Command {
-	private savedSettings: TProjectSettings | null = null;
-	private savedUpdatedAt: Date | null = null;
-
-	constructor(private updates: Partial<TProjectSettings>) {
-		super();
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		const activeProject = editor.project.getActive();
-		if (!activeProject) return;
-
-		this.savedSettings = activeProject.settings;
-		this.savedUpdatedAt = activeProject.metadata.updatedAt;
-
-		const updatedProject: TProject = {
-			...activeProject,
-			settings: { ...activeProject.settings, ...this.updates },
-			metadata: { ...activeProject.metadata, updatedAt: new Date() },
-		};
-
-		editor.project.setActiveProject({ project: updatedProject });
-		editor.save.markDirty();
-	}
-
-	undo(): void {
-		if (!this.savedSettings || !this.savedUpdatedAt) return;
-		const editor = EditorCore.getInstance();
-		const activeProject = editor.project.getActive();
-		if (!activeProject) return;
-
-		const updatedProject: TProject = {
-			...activeProject,
-			settings: this.savedSettings,
-			metadata: { ...activeProject.metadata, updatedAt: this.savedUpdatedAt },
-		};
-
-		editor.project.setActiveProject({ project: updatedProject });
-		editor.save.markDirty();
-	}
-}
+import { Command } from "@/lib/commands/base-command";

+import { EditorCore } from "@/core";

+import type { TProject, TProjectSettings } from "@/lib/project/types";

+

+export class UpdateProjectSettingsCommand extends Command {

+	private savedSettings: TProjectSettings | null = null;

+	private savedUpdatedAt: Date | null = null;

+

+	constructor(private updates: Partial<TProjectSettings>) {

+		super();

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		const activeProject = editor.project.getActive();

+		if (!activeProject) return;

+

+		this.savedSettings = activeProject.settings;

+		this.savedUpdatedAt = activeProject.metadata.updatedAt;

+

+		const updatedProject: TProject = {

+			...activeProject,

+			settings: { ...activeProject.settings, ...this.updates },

+			metadata: { ...activeProject.metadata, updatedAt: new Date() },

+		};

+

+		editor.project.setActiveProject({ project: updatedProject });

+		editor.save.markDirty();

+	}

+

+	undo(): void {

+		if (!this.savedSettings || !this.savedUpdatedAt) return;

+		const editor = EditorCore.getInstance();

+		const activeProject = editor.project.getActive();

+		if (!activeProject) return;

+

+		const updatedProject: TProject = {

+			...activeProject,

+			settings: this.savedSettings,

+			metadata: { ...activeProject.metadata, updatedAt: this.savedUpdatedAt },

+		};

+

+		editor.project.setActiveProject({ project: updatedProject });

+		editor.save.markDirty();

+	}

+}

diff --git a/apps/web/src/lib/commands/scene/create-scene.ts b/apps/web/src/lib/commands/scene/create-scene.ts
index 28bda2fd..7675570d 100644
--- a/apps/web/src/lib/commands/scene/create-scene.ts
+++ b/apps/web/src/lib/commands/scene/create-scene.ts
@@ -1,40 +1,40 @@
-import { Command } from "@/lib/commands/base-command";
-import { EditorCore } from "@/core";
-import type { TScene } from "@/lib/timeline";
-import { buildDefaultScene } from "@/lib/scenes";
-
-export class CreateSceneCommand extends Command {
-	private savedScenes: TScene[] | null = null;
-	private createdScene: TScene | null = null;
-
-	constructor(
-		private name: string,
-		private isMain: boolean = false,
-	) {
-		super();
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		this.savedScenes = [...editor.scenes.getScenes()];
-
-		this.createdScene = buildDefaultScene({
-			name: this.name,
-			isMain: this.isMain,
-		});
-
-		const updatedScenes = [...this.savedScenes, this.createdScene];
-		editor.scenes.setScenes({ scenes: updatedScenes });
-	}
-
-	undo(): void {
-		if (this.savedScenes) {
-			const editor = EditorCore.getInstance();
-			editor.scenes.setScenes({ scenes: this.savedScenes });
-		}
-	}
-
-	getSceneId(): string {
-		return this.createdScene?.id ?? "";
-	}
-}
+import { Command } from "@/lib/commands/base-command";

+import { EditorCore } from "@/core";

+import type { TScene } from "@/lib/timeline";

+import { buildDefaultScene } from "@/lib/scenes";

+

+export class CreateSceneCommand extends Command {

+	private savedScenes: TScene[] | null = null;

+	private createdScene: TScene | null = null;

+

+	constructor(

+		private name: string,

+		private isMain: boolean = false,

+	) {

+		super();

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		this.savedScenes = [...editor.scenes.getScenes()];

+

+		this.createdScene = buildDefaultScene({

+			name: this.name,

+			isMain: this.isMain,

+		});

+

+		const updatedScenes = [...this.savedScenes, this.createdScene];

+		editor.scenes.setScenes({ scenes: updatedScenes });

+	}

+

+	undo(): void {

+		if (this.savedScenes) {

+			const editor = EditorCore.getInstance();

+			editor.scenes.setScenes({ scenes: this.savedScenes });

+		}

+	}

+

+	getSceneId(): string {

+		return this.createdScene?.id ?? "";

+	}

+}

diff --git a/apps/web/src/lib/commands/scene/delete-scene.ts b/apps/web/src/lib/commands/scene/delete-scene.ts
index 58c790e6..da8aac24 100644
--- a/apps/web/src/lib/commands/scene/delete-scene.ts
+++ b/apps/web/src/lib/commands/scene/delete-scene.ts
@@ -1,59 +1,59 @@
-import { Command } from "@/lib/commands/base-command";
-import { EditorCore } from "@/core";
-import type { TScene } from "@/lib/timeline";
-import { canDeleteScene, getFallbackSceneAfterDelete } from "@/lib/scenes";
-
-export class DeleteSceneCommand extends Command {
-	private savedScenes: TScene[] | null = null;
-	private savedActiveSceneId: string | null = null;
-	private deletedScene: TScene | null = null;
-
-	constructor(private sceneId: string) {
-		super();
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		const scenes = editor.scenes.getScenes();
-		const activeScene = editor.scenes.getActiveScene();
-
-		this.savedScenes = [...scenes];
-		this.savedActiveSceneId = activeScene?.id ?? null;
-
-		this.deletedScene = scenes.find((s) => s.id === this.sceneId) ?? null;
-
-		if (!this.deletedScene) {
-			console.error("Scene not found:", this.sceneId);
-			return;
-		}
-
-		const { canDelete, reason } = canDeleteScene({ scene: this.deletedScene });
-		if (!canDelete) {
-			console.error("Cannot delete scene:", reason);
-			return;
-		}
-
-		const updatedScenes = scenes.filter((s) => s.id !== this.sceneId);
-
-		const newActiveScene = getFallbackSceneAfterDelete({
-			scenes: updatedScenes,
-			deletedSceneId: this.sceneId,
-			currentSceneId: activeScene?.id ?? null,
-		});
-
-		editor.scenes.setScenes({
-			scenes: updatedScenes,
-			activeSceneId: newActiveScene?.id,
-		});
-	}
-
-	undo(): void {
-		if (this.savedScenes && this.deletedScene) {
-			const editor = EditorCore.getInstance();
-			editor.scenes.setScenes({
-				scenes: this.savedScenes,
-				activeSceneId: this.savedActiveSceneId ?? undefined,
-			});
-		}
-	}
-}
+import { Command } from "@/lib/commands/base-command";

+import { EditorCore } from "@/core";

+import type { TScene } from "@/lib/timeline";

+import { canDeleteScene, getFallbackSceneAfterDelete } from "@/lib/scenes";

+

+export class DeleteSceneCommand extends Command {

+	private savedScenes: TScene[] | null = null;

+	private savedActiveSceneId: string | null = null;

+	private deletedScene: TScene | null = null;

+

+	constructor(private sceneId: string) {

+		super();

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		const scenes = editor.scenes.getScenes();

+		const activeScene = editor.scenes.getActiveScene();

+

+		this.savedScenes = [...scenes];

+		this.savedActiveSceneId = activeScene?.id ?? null;

+

+		this.deletedScene = scenes.find((s) => s.id === this.sceneId) ?? null;

+

+		if (!this.deletedScene) {

+			console.error("Scene not found:", this.sceneId);

+			return;

+		}

+

+		const { canDelete, reason } = canDeleteScene({ scene: this.deletedScene });

+		if (!canDelete) {

+			console.error("Cannot delete scene:", reason);

+			return;

+		}

+

+		const updatedScenes = scenes.filter((s) => s.id !== this.sceneId);

+

+		const newActiveScene = getFallbackSceneAfterDelete({

+			scenes: updatedScenes,

+			deletedSceneId: this.sceneId,

+			currentSceneId: activeScene?.id ?? null,

+		});

+

+		editor.scenes.setScenes({

+			scenes: updatedScenes,

+			activeSceneId: newActiveScene?.id,

+		});

+	}

+

+	undo(): void {

+		if (this.savedScenes && this.deletedScene) {

+			const editor = EditorCore.getInstance();

+			editor.scenes.setScenes({

+				scenes: this.savedScenes,

+				activeSceneId: this.savedActiveSceneId ?? undefined,

+			});

+		}

+	}

+}

diff --git a/apps/web/src/lib/commands/scene/index.ts b/apps/web/src/lib/commands/scene/index.ts
index 2b843c99..b680108d 100644
--- a/apps/web/src/lib/commands/scene/index.ts
+++ b/apps/web/src/lib/commands/scene/index.ts
@@ -1,7 +1,7 @@
-export { CreateSceneCommand } from "./create-scene";
-export { DeleteSceneCommand } from "./delete-scene";
-export { RenameSceneCommand } from "./rename-scene";
-export { ToggleBookmarkCommand } from "./toggle-bookmark";
-export { RemoveBookmarkCommand } from "./remove-bookmark";
-export { UpdateBookmarkCommand } from "./update-bookmark";
-export { MoveBookmarkCommand } from "./move-bookmark";
+export { CreateSceneCommand } from "./create-scene";

+export { DeleteSceneCommand } from "./delete-scene";

+export { RenameSceneCommand } from "./rename-scene";

+export { ToggleBookmarkCommand } from "./toggle-bookmark";

+export { RemoveBookmarkCommand } from "./remove-bookmark";

+export { UpdateBookmarkCommand } from "./update-bookmark";

+export { MoveBookmarkCommand } from "./move-bookmark";

diff --git a/apps/web/src/lib/commands/scene/move-bookmark.ts b/apps/web/src/lib/commands/scene/move-bookmark.ts
index 28d7a45c..7b5b5aac 100644
--- a/apps/web/src/lib/commands/scene/move-bookmark.ts
+++ b/apps/web/src/lib/commands/scene/move-bookmark.ts
@@ -1,59 +1,59 @@
-import { Command } from "@/lib/commands/base-command";
-import { EditorCore } from "@/core";
-import type { TScene } from "@/lib/timeline";
-import { updateSceneInArray } from "@/lib/scenes";
-import { getFrameTime, moveBookmarkInArray } from "@/lib/timeline/bookmarks";
-
-export class MoveBookmarkCommand extends Command {
-	private savedScenes: TScene[] | null = null;
-
-	constructor(
-		private fromTime: number,
-		private toTime: number,
-	) {
-		super();
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		const activeScene = editor.scenes.getActiveScene();
-		const activeProject = editor.project.getActive();
-
-		if (!activeScene || !activeProject) {
-			return;
-		}
-
-		const scenes = editor.scenes.getScenes();
-		this.savedScenes = [...scenes];
-
-		const fromFrameTime = getFrameTime({
-			time: this.fromTime,
-			fps: activeProject.settings.fps,
-		});
-		const toFrameTime = getFrameTime({
-			time: this.toTime,
-			fps: activeProject.settings.fps,
-		});
-
-		const updatedBookmarks = moveBookmarkInArray({
-			bookmarks: activeScene.bookmarks,
-			fromTime: fromFrameTime,
-			toTime: toFrameTime,
-		});
-
-		const updatedScenes = updateSceneInArray({
-			scenes,
-			sceneId: activeScene.id,
-			updates: { bookmarks: updatedBookmarks },
-		});
-
-		editor.scenes.setScenes({ scenes: updatedScenes });
-	}
-
-	undo(): void {
-		if (this.savedScenes) {
-			const editor = EditorCore.getInstance();
-			editor.scenes.setScenes({ scenes: this.savedScenes });
-		}
-	}
-}
+import { Command } from "@/lib/commands/base-command";

+import { EditorCore } from "@/core";

+import type { TScene } from "@/lib/timeline";

+import { updateSceneInArray } from "@/lib/scenes";

+import { getFrameTime, moveBookmarkInArray } from "@/lib/timeline/bookmarks";

+

+export class MoveBookmarkCommand extends Command {

+	private savedScenes: TScene[] | null = null;

+

+	constructor(

+		private fromTime: number,

+		private toTime: number,

+	) {

+		super();

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		const activeScene = editor.scenes.getActiveScene();

+		const activeProject = editor.project.getActive();

+

+		if (!activeScene || !activeProject) {

+			return;

+		}

+

+		const scenes = editor.scenes.getScenes();

+		this.savedScenes = [...scenes];

+

+		const fromFrameTime = getFrameTime({

+			time: this.fromTime,

+			fps: activeProject.settings.fps,

+		});

+		const toFrameTime = getFrameTime({

+			time: this.toTime,

+			fps: activeProject.settings.fps,

+		});

+

+		const updatedBookmarks = moveBookmarkInArray({

+			bookmarks: activeScene.bookmarks,

+			fromTime: fromFrameTime,

+			toTime: toFrameTime,

+		});

+

+		const updatedScenes = updateSceneInArray({

+			scenes,

+			sceneId: activeScene.id,

+			updates: { bookmarks: updatedBookmarks },

+		});

+

+		editor.scenes.setScenes({ scenes: updatedScenes });

+	}

+

+	undo(): void {

+		if (this.savedScenes) {

+			const editor = EditorCore.getInstance();

+			editor.scenes.setScenes({ scenes: this.savedScenes });

+		}

+	}

+}

diff --git a/apps/web/src/lib/commands/scene/remove-bookmark.ts b/apps/web/src/lib/commands/scene/remove-bookmark.ts
index 19515b97..c5f8692c 100644
--- a/apps/web/src/lib/commands/scene/remove-bookmark.ts
+++ b/apps/web/src/lib/commands/scene/remove-bookmark.ts
@@ -1,59 +1,59 @@
-import { Command } from "@/lib/commands/base-command";
-import { EditorCore } from "@/core";
-import type { TScene } from "@/lib/timeline";
-import { updateSceneInArray } from "@/lib/scenes";
-import {
-	getFrameTime,
-	removeBookmarkFromArray,
-} from "@/lib/timeline/bookmarks";
-
-export class RemoveBookmarkCommand extends Command {
-	private savedScenes: TScene[] | null = null;
-	private frameTime: number = 0;
-
-	constructor(private time: number) {
-		super();
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		const activeScene = editor.scenes.getActiveScene();
-		const activeProject = editor.project.getActive();
-
-		if (!activeScene || !activeProject) {
-			return;
-		}
-
-		const scenes = editor.scenes.getScenes();
-		this.savedScenes = [...scenes];
-
-		this.frameTime = getFrameTime({
-			time: this.time,
-			fps: activeProject.settings.fps,
-		});
-
-		const updatedBookmarks = removeBookmarkFromArray({
-			bookmarks: activeScene.bookmarks,
-			frameTime: this.frameTime,
-		});
-
-		if (updatedBookmarks.length === activeScene.bookmarks.length) {
-			return;
-		}
-
-		const updatedScenes = updateSceneInArray({
-			scenes,
-			sceneId: activeScene.id,
-			updates: { bookmarks: updatedBookmarks },
-		});
-
-		editor.scenes.setScenes({ scenes: updatedScenes });
-	}
-
-	undo(): void {
-		if (this.savedScenes) {
-			const editor = EditorCore.getInstance();
-			editor.scenes.setScenes({ scenes: this.savedScenes });
-		}
-	}
-}
+import { Command } from "@/lib/commands/base-command";

+import { EditorCore } from "@/core";

+import type { TScene } from "@/lib/timeline";

+import { updateSceneInArray } from "@/lib/scenes";

+import {

+	getFrameTime,

+	removeBookmarkFromArray,

+} from "@/lib/timeline/bookmarks";

+

+export class RemoveBookmarkCommand extends Command {

+	private savedScenes: TScene[] | null = null;

+	private frameTime: number = 0;

+

+	constructor(private time: number) {

+		super();

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		const activeScene = editor.scenes.getActiveScene();

+		const activeProject = editor.project.getActive();

+

+		if (!activeScene || !activeProject) {

+			return;

+		}

+

+		const scenes = editor.scenes.getScenes();

+		this.savedScenes = [...scenes];

+

+		this.frameTime = getFrameTime({

+			time: this.time,

+			fps: activeProject.settings.fps,

+		});

+

+		const updatedBookmarks = removeBookmarkFromArray({

+			bookmarks: activeScene.bookmarks,

+			frameTime: this.frameTime,

+		});

+

+		if (updatedBookmarks.length === activeScene.bookmarks.length) {

+			return;

+		}

+

+		const updatedScenes = updateSceneInArray({

+			scenes,

+			sceneId: activeScene.id,

+			updates: { bookmarks: updatedBookmarks },

+		});

+

+		editor.scenes.setScenes({ scenes: updatedScenes });

+	}

+

+	undo(): void {

+		if (this.savedScenes) {

+			const editor = EditorCore.getInstance();

+			editor.scenes.setScenes({ scenes: this.savedScenes });

+		}

+	}

+}

diff --git a/apps/web/src/lib/commands/scene/rename-scene.ts b/apps/web/src/lib/commands/scene/rename-scene.ts
index f1d65e27..554e3940 100644
--- a/apps/web/src/lib/commands/scene/rename-scene.ts
+++ b/apps/web/src/lib/commands/scene/rename-scene.ts
@@ -1,46 +1,46 @@
-import { Command } from "@/lib/commands/base-command";
-import { EditorCore } from "@/core";
-import type { TScene } from "@/lib/timeline";
-import { updateSceneInArray } from "@/lib/scenes";
-
-export class RenameSceneCommand extends Command {
-	private savedScenes: TScene[] | null = null;
-	private previousName: string | null = null;
-
-	constructor(
-		private sceneId: string,
-		private newName: string,
-	) {
-		super();
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		const scenes = editor.scenes.getScenes();
-
-		this.savedScenes = [...scenes];
-
-		const scene = scenes.find((s) => s.id === this.sceneId);
-		if (!scene) {
-			console.error("Scene not found:", this.sceneId);
-			return;
-		}
-
-		this.previousName = scene.name;
-
-		const updatedScenes = updateSceneInArray({
-			scenes,
-			sceneId: this.sceneId,
-			updates: { name: this.newName, updatedAt: new Date() },
-		});
-
-		editor.scenes.setScenes({ scenes: updatedScenes });
-	}
-
-	undo(): void {
-		if (this.savedScenes && this.previousName !== null) {
-			const editor = EditorCore.getInstance();
-			editor.scenes.setScenes({ scenes: this.savedScenes });
-		}
-	}
-}
+import { Command } from "@/lib/commands/base-command";

+import { EditorCore } from "@/core";

+import type { TScene } from "@/lib/timeline";

+import { updateSceneInArray } from "@/lib/scenes";

+

+export class RenameSceneCommand extends Command {

+	private savedScenes: TScene[] | null = null;

+	private previousName: string | null = null;

+

+	constructor(

+		private sceneId: string,

+		private newName: string,

+	) {

+		super();

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		const scenes = editor.scenes.getScenes();

+

+		this.savedScenes = [...scenes];

+

+		const scene = scenes.find((s) => s.id === this.sceneId);

+		if (!scene) {

+			console.error("Scene not found:", this.sceneId);

+			return;

+		}

+

+		this.previousName = scene.name;

+

+		const updatedScenes = updateSceneInArray({

+			scenes,

+			sceneId: this.sceneId,

+			updates: { name: this.newName, updatedAt: new Date() },

+		});

+

+		editor.scenes.setScenes({ scenes: updatedScenes });

+	}

+

+	undo(): void {

+		if (this.savedScenes && this.previousName !== null) {

+			const editor = EditorCore.getInstance();

+			editor.scenes.setScenes({ scenes: this.savedScenes });

+		}

+	}

+}

diff --git a/apps/web/src/lib/commands/scene/toggle-bookmark.ts b/apps/web/src/lib/commands/scene/toggle-bookmark.ts
index 518a30aa..69fe3213 100644
--- a/apps/web/src/lib/commands/scene/toggle-bookmark.ts
+++ b/apps/web/src/lib/commands/scene/toggle-bookmark.ts
@@ -1,52 +1,52 @@
-import { Command } from "@/lib/commands/base-command";
-import { EditorCore } from "@/core";
-import type { TScene } from "@/lib/timeline";
-import { updateSceneInArray } from "@/lib/scenes";
-import { getFrameTime, toggleBookmarkInArray } from "@/lib/timeline/bookmarks";
-
-export class ToggleBookmarkCommand extends Command {
-	private savedScenes: TScene[] | null = null;
-	private frameTime: number = 0;
-
-	constructor(private time: number) {
-		super();
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		const activeScene = editor.scenes.getActiveScene();
-		const activeProject = editor.project.getActive();
-
-		if (!activeScene || !activeProject) {
-			return;
-		}
-
-		const scenes = editor.scenes.getScenes();
-		this.savedScenes = [...scenes];
-
-		this.frameTime = getFrameTime({
-			time: this.time,
-			fps: activeProject.settings.fps,
-		});
-
-		const updatedBookmarks = toggleBookmarkInArray({
-			bookmarks: activeScene.bookmarks,
-			frameTime: this.frameTime,
-		});
-
-		const updatedScenes = updateSceneInArray({
-			scenes,
-			sceneId: activeScene.id,
-			updates: { bookmarks: updatedBookmarks },
-		});
-
-		editor.scenes.setScenes({ scenes: updatedScenes });
-	}
-
-	undo(): void {
-		if (this.savedScenes) {
-			const editor = EditorCore.getInstance();
-			editor.scenes.setScenes({ scenes: this.savedScenes });
-		}
-	}
-}
+import { Command } from "@/lib/commands/base-command";

+import { EditorCore } from "@/core";

+import type { TScene } from "@/lib/timeline";

+import { updateSceneInArray } from "@/lib/scenes";

+import { getFrameTime, toggleBookmarkInArray } from "@/lib/timeline/bookmarks";

+

+export class ToggleBookmarkCommand extends Command {

+	private savedScenes: TScene[] | null = null;

+	private frameTime: number = 0;

+

+	constructor(private time: number) {

+		super();

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		const activeScene = editor.scenes.getActiveScene();

+		const activeProject = editor.project.getActive();

+

+		if (!activeScene || !activeProject) {

+			return;

+		}

+

+		const scenes = editor.scenes.getScenes();

+		this.savedScenes = [...scenes];

+

+		this.frameTime = getFrameTime({

+			time: this.time,

+			fps: activeProject.settings.fps,

+		});

+

+		const updatedBookmarks = toggleBookmarkInArray({

+			bookmarks: activeScene.bookmarks,

+			frameTime: this.frameTime,

+		});

+

+		const updatedScenes = updateSceneInArray({

+			scenes,

+			sceneId: activeScene.id,

+			updates: { bookmarks: updatedBookmarks },

+		});

+

+		editor.scenes.setScenes({ scenes: updatedScenes });

+	}

+

+	undo(): void {

+		if (this.savedScenes) {

+			const editor = EditorCore.getInstance();

+			editor.scenes.setScenes({ scenes: this.savedScenes });

+		}

+	}

+}

diff --git a/apps/web/src/lib/commands/scene/update-bookmark.ts b/apps/web/src/lib/commands/scene/update-bookmark.ts
index 6aeef42b..2e320b3d 100644
--- a/apps/web/src/lib/commands/scene/update-bookmark.ts
+++ b/apps/web/src/lib/commands/scene/update-bookmark.ts
@@ -1,55 +1,55 @@
-import { Command } from "@/lib/commands/base-command";
-import { EditorCore } from "@/core";
-import type { Bookmark, TScene } from "@/lib/timeline";
-import { updateSceneInArray } from "@/lib/scenes";
-import { getFrameTime, updateBookmarkInArray } from "@/lib/timeline/bookmarks";
-
-export class UpdateBookmarkCommand extends Command {
-	private savedScenes: TScene[] | null = null;
-
-	constructor(
-		private time: number,
-		private updates: Partial<Omit<Bookmark, "time">>,
-	) {
-		super();
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		const activeScene = editor.scenes.getActiveScene();
-		const activeProject = editor.project.getActive();
-
-		if (!activeScene || !activeProject) {
-			return;
-		}
-
-		const scenes = editor.scenes.getScenes();
-		this.savedScenes = [...scenes];
-
-		const frameTime = getFrameTime({
-			time: this.time,
-			fps: activeProject.settings.fps,
-		});
-
-		const updatedBookmarks = updateBookmarkInArray({
-			bookmarks: activeScene.bookmarks,
-			frameTime,
-			updates: this.updates,
-		});
-
-		const updatedScenes = updateSceneInArray({
-			scenes,
-			sceneId: activeScene.id,
-			updates: { bookmarks: updatedBookmarks },
-		});
-
-		editor.scenes.setScenes({ scenes: updatedScenes });
-	}
-
-	undo(): void {
-		if (this.savedScenes) {
-			const editor = EditorCore.getInstance();
-			editor.scenes.setScenes({ scenes: this.savedScenes });
-		}
-	}
-}
+import { Command } from "@/lib/commands/base-command";

+import { EditorCore } from "@/core";

+import type { Bookmark, TScene } from "@/lib/timeline";

+import { updateSceneInArray } from "@/lib/scenes";

+import { getFrameTime, updateBookmarkInArray } from "@/lib/timeline/bookmarks";

+

+export class UpdateBookmarkCommand extends Command {

+	private savedScenes: TScene[] | null = null;

+

+	constructor(

+		private time: number,

+		private updates: Partial<Omit<Bookmark, "time">>,

+	) {

+		super();

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		const activeScene = editor.scenes.getActiveScene();

+		const activeProject = editor.project.getActive();

+

+		if (!activeScene || !activeProject) {

+			return;

+		}

+

+		const scenes = editor.scenes.getScenes();

+		this.savedScenes = [...scenes];

+

+		const frameTime = getFrameTime({

+			time: this.time,

+			fps: activeProject.settings.fps,

+		});

+

+		const updatedBookmarks = updateBookmarkInArray({

+			bookmarks: activeScene.bookmarks,

+			frameTime,

+			updates: this.updates,

+		});

+

+		const updatedScenes = updateSceneInArray({

+			scenes,

+			sceneId: activeScene.id,

+			updates: { bookmarks: updatedBookmarks },

+		});

+

+		editor.scenes.setScenes({ scenes: updatedScenes });

+	}

+

+	undo(): void {

+		if (this.savedScenes) {

+			const editor = EditorCore.getInstance();

+			editor.scenes.setScenes({ scenes: this.savedScenes });

+		}

+	}

+}

diff --git a/apps/web/src/lib/commands/timeline/clipboard/paste.ts b/apps/web/src/lib/commands/timeline/clipboard/paste.ts
index 00758eb7..d9c54ec3 100644
--- a/apps/web/src/lib/commands/timeline/clipboard/paste.ts
+++ b/apps/web/src/lib/commands/timeline/clipboard/paste.ts
@@ -1,293 +1,293 @@
-import { Command } from "@/lib/commands/base-command";
-import { EditorCore } from "@/core";
-import type {
-	TimelineTrack,
-	TimelineElement,
-	ClipboardItem,
-} from "@/lib/timeline";
-import { generateUUID } from "@/utils/id";
-import { wouldElementOverlap } from "@/lib/timeline/element-utils";
-import {
-	buildEmptyTrack,
-	getHighestInsertIndexForTrack,
-	isMainTrack,
-	enforceMainTrackStart,
-} from "@/lib/timeline/track-utils";
-import { cloneAnimations } from "@/lib/animation";
-
-export class PasteCommand extends Command {
-	private savedState: TimelineTrack[] | null = null;
-	private pastedElements: { trackId: string; elementId: string }[] = [];
-	private previousSelection: { trackId: string; elementId: string }[] = [];
-
-	constructor(
-		private time: number,
-		private clipboardItems: ClipboardItem[],
-	) {
-		super();
-	}
-
-	execute(): void {
-		if (this.clipboardItems.length === 0) return;
-
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.timeline.getTracks();
-		this.previousSelection = editor.selection.getSelectedElements();
-		this.pastedElements = [];
-
-		const minStart = Math.min(
-			...this.clipboardItems.map((item) => item.element.startTime),
-		);
-
-		const updatedTracks = [...this.savedState];
-		const itemsByTrackId = groupClipboardItemsByTrackId({
-			clipboardItems: this.clipboardItems,
-		});
-
-		for (const [trackId, items] of itemsByTrackId) {
-			const elementsToAdd = buildPastedElements({
-				items,
-				minStart,
-				time: this.time,
-			});
-
-			if (elementsToAdd.length === 0) {
-				continue;
-			}
-
-			const trackType = items[0].trackType;
-			const sourceTrackIndex = updatedTracks.findIndex(
-				(track) => track.id === trackId,
-			);
-			const resolvedTargetIndex = resolveTargetTrackIndex({
-				tracks: updatedTracks,
-				sourceTrackIndex,
-				trackType,
-				elements: elementsToAdd,
-			});
-
-			if (resolvedTargetIndex >= 0) {
-				const targetTrack = updatedTracks[resolvedTargetIndex];
-				let adjustedElements = elementsToAdd;
-
-				if (isMainTrack(targetTrack)) {
-					const earliestElement = elementsToAdd.reduce((earliest, element) =>
-						element.startTime < earliest.startTime ? element : earliest,
-					);
-					const adjustedEarliestStartTime = enforceMainTrackStart({
-						tracks: updatedTracks,
-						targetTrackId: targetTrack.id,
-						requestedStartTime: earliestElement.startTime,
-					});
-					const delta = adjustedEarliestStartTime - earliestElement.startTime;
-
-					if (delta !== 0) {
-						adjustedElements = elementsToAdd.map((element) => ({
-							...element,
-							startTime: Math.max(0, element.startTime + delta),
-						}));
-					}
-				}
-
-				updatedTracks[resolvedTargetIndex] = {
-					...targetTrack,
-					elements: [...targetTrack.elements, ...adjustedElements],
-				} as TimelineTrack;
-				for (const element of adjustedElements) {
-					this.pastedElements.push({
-						trackId: targetTrack.id,
-						elementId: element.id,
-					});
-				}
-				continue;
-			}
-
-			const insertIndex = resolveInsertIndexForNewTrack({
-				tracks: updatedTracks,
-				sourceTrackIndex,
-				trackType,
-			});
-			const newTrack = buildTrackWithElements({
-				trackType,
-				elements: elementsToAdd,
-			});
-			updatedTracks.splice(insertIndex, 0, newTrack);
-			for (const element of elementsToAdd) {
-				this.pastedElements.push({
-					trackId: newTrack.id,
-					elementId: element.id,
-				});
-			}
-		}
-
-		editor.timeline.updateTracks(updatedTracks);
-
-		if (this.pastedElements.length > 0) {
-			editor.selection.setSelectedElements({ elements: this.pastedElements });
-		}
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-			editor.selection.setSelectedElements({
-				elements: this.previousSelection,
-			});
-		}
-	}
-
-	getPastedElements(): { trackId: string; elementId: string }[] {
-		return this.pastedElements;
-	}
-}
-
-function groupClipboardItemsByTrackId({
-	clipboardItems,
-}: {
-	clipboardItems: ClipboardItem[];
-}): Map<string, ClipboardItem[]> {
-	const groupedItems = new Map<string, ClipboardItem[]>();
-
-	for (const item of clipboardItems) {
-		const existingItems = groupedItems.get(item.trackId) ?? [];
-		groupedItems.set(item.trackId, [...existingItems, item]);
-	}
-
-	return groupedItems;
-}
-
-function buildPastedElements({
-	items,
-	minStart,
-	time,
-}: {
-	items: ClipboardItem[];
-	minStart: number;
-	time: number;
-}): TimelineElement[] {
-	const elementsToAdd: TimelineElement[] = [];
-
-	for (const item of items) {
-		const relativeOffset = item.element.startTime - minStart;
-		const startTime = Math.max(0, time + relativeOffset);
-		const newElementId = generateUUID();
-
-		elementsToAdd.push({
-			...item.element,
-			id: newElementId,
-			startTime,
-			animations: cloneAnimations({
-				animations: item.element.animations,
-				shouldRegenerateKeyframeIds: true,
-			}),
-		} as TimelineElement);
-	}
-
-	return elementsToAdd;
-}
-
-function resolveTargetTrackIndex({
-	tracks,
-	sourceTrackIndex,
-	trackType,
-	elements,
-}: {
-	tracks: TimelineTrack[];
-	sourceTrackIndex: number;
-	trackType: ClipboardItem["trackType"];
-	elements: TimelineElement[];
-}): number {
-	if (sourceTrackIndex >= 0) {
-		const aboveIndex = sourceTrackIndex - 1;
-		if (aboveIndex < 0) {
-			return -1;
-		}
-
-		const aboveTrack = tracks[aboveIndex];
-		if (aboveTrack.type !== trackType) {
-			return -1;
-		}
-
-		const canPlaceOnAbove = canPlaceElementsOnTrack({
-			track: aboveTrack,
-			elements,
-		});
-		return canPlaceOnAbove ? aboveIndex : -1;
-	}
-
-	const highestCompatibleIndex = tracks.findIndex(
-		(track) => track.type === trackType,
-	);
-	if (highestCompatibleIndex < 0) {
-		return -1;
-	}
-
-	const highestCompatibleTrack = tracks[highestCompatibleIndex];
-	const canPlaceOnHighest = canPlaceElementsOnTrack({
-		track: highestCompatibleTrack,
-		elements,
-	});
-
-	return canPlaceOnHighest ? highestCompatibleIndex : -1;
-}
-
-function resolveInsertIndexForNewTrack({
-	tracks,
-	sourceTrackIndex,
-	trackType,
-}: {
-	tracks: TimelineTrack[];
-	sourceTrackIndex: number;
-	trackType: ClipboardItem["trackType"];
-}): number {
-	if (sourceTrackIndex >= 0) {
-		return sourceTrackIndex;
-	}
-
-	const highestCompatibleIndex = tracks.findIndex(
-		(track) => track.type === trackType,
-	);
-	if (highestCompatibleIndex >= 0) {
-		return highestCompatibleIndex;
-	}
-
-	return getHighestInsertIndexForTrack({ tracks, trackType });
-}
-
-function canPlaceElementsOnTrack({
-	track,
-	elements,
-}: {
-	track: TimelineTrack;
-	elements: TimelineElement[];
-}): boolean {
-	for (const element of elements) {
-		const endTime = element.startTime + element.duration;
-		const hasOverlap = wouldElementOverlap({
-			elements: track.elements,
-			startTime: element.startTime,
-			endTime,
-		});
-		if (hasOverlap) {
-			return false;
-		}
-	}
-
-	return true;
-}
-
-function buildTrackWithElements({
-	trackType,
-	elements,
-}: {
-	trackType: ClipboardItem["trackType"];
-	elements: TimelineElement[];
-}): TimelineTrack {
-	const newTrackId = generateUUID();
-	const newTrackBase = buildEmptyTrack({ id: newTrackId, type: trackType });
-	return {
-		...newTrackBase,
-		elements,
-	} as TimelineTrack;
-}
+import { Command } from "@/lib/commands/base-command";

+import { EditorCore } from "@/core";

+import type {

+	TimelineTrack,

+	TimelineElement,

+	ClipboardItem,

+} from "@/lib/timeline";

+import { generateUUID } from "@/utils/id";

+import { wouldElementOverlap } from "@/lib/timeline/element-utils";

+import {

+	buildEmptyTrack,

+	getHighestInsertIndexForTrack,

+	isMainTrack,

+	enforceMainTrackStart,

+} from "@/lib/timeline/track-utils";

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

+

+export class PasteCommand extends Command {

+	private savedState: TimelineTrack[] | null = null;

+	private pastedElements: { trackId: string; elementId: string }[] = [];

+	private previousSelection: { trackId: string; elementId: string }[] = [];

+

+	constructor(

+		private time: number,

+		private clipboardItems: ClipboardItem[],

+	) {

+		super();

+	}

+

+	execute(): void {

+		if (this.clipboardItems.length === 0) return;

+

+		const editor = EditorCore.getInstance();

+		this.savedState = editor.timeline.getTracks();

+		this.previousSelection = editor.selection.getSelectedElements();

+		this.pastedElements = [];

+

+		const minStart = Math.min(

+			...this.clipboardItems.map((item) => item.element.startTime),

+		);

+

+		const updatedTracks = [...this.savedState];

+		const itemsByTrackId = groupClipboardItemsByTrackId({

+			clipboardItems: this.clipboardItems,

+		});

+

+		for (const [trackId, items] of itemsByTrackId) {

+			const elementsToAdd = buildPastedElements({

+				items,

+				minStart,

+				time: this.time,

+			});

+

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

+				continue;

+			}

+

+			const trackType = items[0].trackType;

+			const sourceTrackIndex = updatedTracks.findIndex(

+				(track) => track.id === trackId,

+			);

+			const resolvedTargetIndex = resolveTargetTrackIndex({

+				tracks: updatedTracks,

+				sourceTrackIndex,

+				trackType,

+				elements: elementsToAdd,

+			});

+

+			if (resolvedTargetIndex >= 0) {

+				const targetTrack = updatedTracks[resolvedTargetIndex];

+				let adjustedElements = elementsToAdd;

+

+				if (isMainTrack(targetTrack)) {

+					const earliestElement = elementsToAdd.reduce((earliest, element) =>

+						element.startTime < earliest.startTime ? element : earliest,

+					);

+					const adjustedEarliestStartTime = enforceMainTrackStart({

+						tracks: updatedTracks,

+						targetTrackId: targetTrack.id,

+						requestedStartTime: earliestElement.startTime,

+					});

+					const delta = adjustedEarliestStartTime - earliestElement.startTime;

+

+					if (delta !== 0) {

+						adjustedElements = elementsToAdd.map((element) => ({

+							...element,

+							startTime: Math.max(0, element.startTime + delta),

+						}));

+					}

+				}

+

+				updatedTracks[resolvedTargetIndex] = {

+					...targetTrack,

+					elements: [...targetTrack.elements, ...adjustedElements],

+				} as TimelineTrack;

+				for (const element of adjustedElements) {

+					this.pastedElements.push({

+						trackId: targetTrack.id,

+						elementId: element.id,

+					});

+				}

+				continue;

+			}

+

+			const insertIndex = resolveInsertIndexForNewTrack({

+				tracks: updatedTracks,

+				sourceTrackIndex,

+				trackType,

+			});

+			const newTrack = buildTrackWithElements({

+				trackType,

+				elements: elementsToAdd,

+			});

+			updatedTracks.splice(insertIndex, 0, newTrack);

+			for (const element of elementsToAdd) {

+				this.pastedElements.push({

+					trackId: newTrack.id,

+					elementId: element.id,

+				});

+			}

+		}

+

+		editor.timeline.updateTracks(updatedTracks);

+

+		if (this.pastedElements.length > 0) {

+			editor.selection.setSelectedElements({ elements: this.pastedElements });

+		}

+	}

+

+	undo(): void {

+		if (this.savedState) {

+			const editor = EditorCore.getInstance();

+			editor.timeline.updateTracks(this.savedState);

+			editor.selection.setSelectedElements({

+				elements: this.previousSelection,

+			});

+		}

+	}

+

+	getPastedElements(): { trackId: string; elementId: string }[] {

+		return this.pastedElements;

+	}

+}

+

+function groupClipboardItemsByTrackId({

+	clipboardItems,

+}: {

+	clipboardItems: ClipboardItem[];

+}): Map<string, ClipboardItem[]> {

+	const groupedItems = new Map<string, ClipboardItem[]>();

+

+	for (const item of clipboardItems) {

+		const existingItems = groupedItems.get(item.trackId) ?? [];

+		groupedItems.set(item.trackId, [...existingItems, item]);

+	}

+

+	return groupedItems;

+}

+

+function buildPastedElements({

+	items,

+	minStart,

+	time,

+}: {

+	items: ClipboardItem[];

+	minStart: number;

+	time: number;

+}): TimelineElement[] {

+	const elementsToAdd: TimelineElement[] = [];

+

+	for (const item of items) {

+		const relativeOffset = item.element.startTime - minStart;

+		const startTime = Math.max(0, time + relativeOffset);

+		const newElementId = generateUUID();

+

+		elementsToAdd.push({

+			...item.element,

+			id: newElementId,

+			startTime,

+			animations: cloneAnimations({

+				animations: item.element.animations,

+				shouldRegenerateKeyframeIds: true,

+			}),

+		} as TimelineElement);

+	}

+

+	return elementsToAdd;

+}

+

+function resolveTargetTrackIndex({

+	tracks,

+	sourceTrackIndex,

+	trackType,

+	elements,

+}: {

+	tracks: TimelineTrack[];

+	sourceTrackIndex: number;

+	trackType: ClipboardItem["trackType"];

+	elements: TimelineElement[];

+}): number {

+	if (sourceTrackIndex >= 0) {

+		const aboveIndex = sourceTrackIndex - 1;

+		if (aboveIndex < 0) {

+			return -1;

+		}

+

+		const aboveTrack = tracks[aboveIndex];

+		if (aboveTrack.type !== trackType) {

+			return -1;

+		}

+

+		const canPlaceOnAbove = canPlaceElementsOnTrack({

+			track: aboveTrack,

+			elements,

+		});

+		return canPlaceOnAbove ? aboveIndex : -1;

+	}

+

+	const highestCompatibleIndex = tracks.findIndex(

+		(track) => track.type === trackType,

+	);

+	if (highestCompatibleIndex < 0) {

+		return -1;

+	}

+

+	const highestCompatibleTrack = tracks[highestCompatibleIndex];

+	const canPlaceOnHighest = canPlaceElementsOnTrack({

+		track: highestCompatibleTrack,

+		elements,

+	});

+

+	return canPlaceOnHighest ? highestCompatibleIndex : -1;

+}

+

+function resolveInsertIndexForNewTrack({

+	tracks,

+	sourceTrackIndex,

+	trackType,

+}: {

+	tracks: TimelineTrack[];

+	sourceTrackIndex: number;

+	trackType: ClipboardItem["trackType"];

+}): number {

+	if (sourceTrackIndex >= 0) {

+		return sourceTrackIndex;

+	}

+

+	const highestCompatibleIndex = tracks.findIndex(

+		(track) => track.type === trackType,

+	);

+	if (highestCompatibleIndex >= 0) {

+		return highestCompatibleIndex;

+	}

+

+	return getHighestInsertIndexForTrack({ tracks, trackType });

+}

+

+function canPlaceElementsOnTrack({

+	track,

+	elements,

+}: {

+	track: TimelineTrack;

+	elements: TimelineElement[];

+}): boolean {

+	for (const element of elements) {

+		const endTime = element.startTime + element.duration;

+		const hasOverlap = wouldElementOverlap({

+			elements: track.elements,

+			startTime: element.startTime,

+			endTime,

+		});

+		if (hasOverlap) {

+			return false;

+		}

+	}

+

+	return true;

+}

+

+function buildTrackWithElements({

+	trackType,

+	elements,

+}: {

+	trackType: ClipboardItem["trackType"];

+	elements: TimelineElement[];

+}): TimelineTrack {

+	const newTrackId = generateUUID();

+	const newTrackBase = buildEmptyTrack({ id: newTrackId, type: trackType });

+	return {

+		...newTrackBase,

+		elements,

+	} as TimelineTrack;

+}

diff --git a/apps/web/src/lib/commands/timeline/element/delete-elements.ts b/apps/web/src/lib/commands/timeline/element/delete-elements.ts
index 4b439870..9b27a3c2 100644
--- a/apps/web/src/lib/commands/timeline/element/delete-elements.ts
+++ b/apps/web/src/lib/commands/timeline/element/delete-elements.ts
@@ -1,79 +1,79 @@
-import { Command } from "@/lib/commands/base-command";
-import type { TimelineTrack } from "@/lib/timeline";
-import { EditorCore } from "@/core";
-import { isMainTrack, rippleShiftElements } from "@/lib/timeline";
-
-export class DeleteElementsCommand extends Command {
-	private savedState: TimelineTrack[] | null = null;
-	private readonly elements: { trackId: string; elementId: string }[];
-	private readonly rippleEnabled: boolean;
-
-	constructor({
-		elements,
-		rippleEnabled = false,
-	}: {
-		elements: { trackId: string; elementId: string }[];
-		rippleEnabled?: boolean;
-	}) {
-		super();
-		this.elements = elements;
-		this.rippleEnabled = rippleEnabled;
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.timeline.getTracks();
-
-		const updatedTracks = this.savedState
-			.map((track) => {
-				const elementsToDeleteOnTrack = this.elements.filter(
-					(target) => target.trackId === track.id,
-				);
-				const hasElementsToDelete = elementsToDeleteOnTrack.length > 0;
-
-				if (!hasElementsToDelete) {
-					return track;
-				}
-
-				const deletedElementInfos = elementsToDeleteOnTrack
-					.map((target) =>
-						track.elements.find((element) => element.id === target.elementId),
-					)
-					.filter((element): element is NonNullable<typeof element> => element !== undefined)
-					.map((element) => ({ startTime: element.startTime, duration: element.duration }));
-
-				let elements = track.elements.filter(
-					(element) =>
-						!this.elements.some(
-							(target) =>
-								target.trackId === track.id && target.elementId === element.id,
-						),
-				);
-
-				if (this.rippleEnabled && deletedElementInfos.length > 0) {
-					const sortedByStartDesc = [...deletedElementInfos].sort(
-						(a, b) => b.startTime - a.startTime,
-					);
-					for (const { startTime, duration } of sortedByStartDesc) {
-						elements = rippleShiftElements({
-							elements,
-							afterTime: startTime,
-							shiftAmount: duration,
-						});
-					}
-				}
-
-				return { ...track, elements } as typeof track;
-			})
-			.filter((track) => track.elements.length > 0 || isMainTrack(track));
-
-		editor.timeline.updateTracks(updatedTracks);
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-}
+import { Command } from "@/lib/commands/base-command";

+import type { TimelineTrack } from "@/lib/timeline";

+import { EditorCore } from "@/core";

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

+

+export class DeleteElementsCommand extends Command {

+	private savedState: TimelineTrack[] | null = null;

+	private readonly elements: { trackId: string; elementId: string }[];

+	private readonly rippleEnabled: boolean;

+

+	constructor({

+		elements,

+		rippleEnabled = false,

+	}: {

+		elements: { trackId: string; elementId: string }[];

+		rippleEnabled?: boolean;

+	}) {

+		super();

+		this.elements = elements;

+		this.rippleEnabled = rippleEnabled;

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		this.savedState = editor.timeline.getTracks();

+

+		const updatedTracks = this.savedState

+			.map((track) => {

+				const elementsToDeleteOnTrack = this.elements.filter(

+					(target) => target.trackId === track.id,

+				);

+				const hasElementsToDelete = elementsToDeleteOnTrack.length > 0;

+

+				if (!hasElementsToDelete) {

+					return track;

+				}

+

+				const deletedElementInfos = elementsToDeleteOnTrack

+					.map((target) =>

+						track.elements.find((element) => element.id === target.elementId),

+					)

+					.filter((element): element is NonNullable<typeof element> => element !== undefined)

+					.map((element) => ({ startTime: element.startTime, duration: element.duration }));

+

+				let elements = track.elements.filter(

+					(element) =>

+						!this.elements.some(

+							(target) =>

+								target.trackId === track.id && target.elementId === element.id,

+						),

+				);

+

+				if (this.rippleEnabled && deletedElementInfos.length > 0) {

+					const sortedByStartDesc = [...deletedElementInfos].sort(

+						(a, b) => b.startTime - a.startTime,

+					);

+					for (const { startTime, duration } of sortedByStartDesc) {

+						elements = rippleShiftElements({

+							elements,

+							afterTime: startTime,

+							shiftAmount: duration,

+						});

+					}

+				}

+

+				return { ...track, elements } as typeof track;

+			})

+			.filter((track) => track.elements.length > 0 || isMainTrack(track));

+

+		editor.timeline.updateTracks(updatedTracks);

+	}

+

+	undo(): void {

+		if (this.savedState) {

+			const editor = EditorCore.getInstance();

+			editor.timeline.updateTracks(this.savedState);

+		}

+	}

+}

diff --git a/apps/web/src/lib/commands/timeline/element/duplicate-elements.ts b/apps/web/src/lib/commands/timeline/element/duplicate-elements.ts
index 207e2373..346f8c73 100644
--- a/apps/web/src/lib/commands/timeline/element/duplicate-elements.ts
+++ b/apps/web/src/lib/commands/timeline/element/duplicate-elements.ts
@@ -1,128 +1,128 @@
-import { Command } from "@/lib/commands/base-command";
-import type { TimelineElement, TimelineTrack } from "@/lib/timeline";
-import { generateUUID } from "@/utils/id";
-import { EditorCore } from "@/core";
-import {
-	buildEmptyTrack,
-	getHighestInsertIndexForTrack,
-} from "@/lib/timeline/track-utils";
-import { cloneAnimations } from "@/lib/animation";
-
-interface DuplicateElementsParams {
-	elements: { trackId: string; elementId: string }[];
-}
-
-export class DuplicateElementsCommand extends Command {
-	private duplicatedElements: { trackId: string; elementId: string }[] = [];
-	private savedState: TimelineTrack[] | null = null;
-	private previousSelection: { trackId: string; elementId: string }[] = [];
-	private elements: DuplicateElementsParams["elements"];
-
-	constructor({ elements }: DuplicateElementsParams) {
-		super();
-		this.elements = elements;
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.timeline.getTracks();
-		this.previousSelection = editor.selection.getSelectedElements();
-		this.duplicatedElements = [];
-
-		const updatedTracks = [...this.savedState];
-
-		for (const track of this.savedState) {
-			const elementsToDuplicate = this.elements.filter(
-				(elementEntry) => elementEntry.trackId === track.id,
-			);
-
-			if (elementsToDuplicate.length === 0) {
-				continue;
-			}
-
-			const elementIdsToDuplicate = new Set(
-				elementsToDuplicate.map((element) => element.elementId),
-			);
-			const newTrackElements: TimelineElement[] = [];
-
-			const newTrackId = generateUUID();
-			const newTrackBase = buildEmptyTrack({
-				id: newTrackId,
-				type: track.type,
-			});
-
-			for (const element of track.elements) {
-				if (!elementIdsToDuplicate.has(element.id)) {
-					continue;
-				}
-
-				const newId = generateUUID();
-				this.duplicatedElements.push({
-					trackId: newTrackId,
-					elementId: newId,
-				});
-				newTrackElements.push(
-					buildDuplicateElement({
-						element,
-						id: newId,
-						startTime: element.startTime,
-					}),
-				);
-			}
-
-			const newTrack = {
-				...newTrackBase,
-				elements: newTrackElements,
-			} as TimelineTrack;
-
-			const insertIndex = getHighestInsertIndexForTrack({
-				tracks: updatedTracks,
-				trackType: track.type,
-			});
-			updatedTracks.splice(insertIndex, 0, newTrack);
-		}
-
-		editor.timeline.updateTracks(updatedTracks);
-
-		if (this.duplicatedElements.length > 0) {
-			editor.selection.setSelectedElements({
-				elements: this.duplicatedElements,
-			});
-		}
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-			editor.selection.setSelectedElements({
-				elements: this.previousSelection,
-			});
-		}
-	}
-
-	getDuplicatedElements(): { trackId: string; elementId: string }[] {
-		return this.duplicatedElements;
-	}
-}
-
-function buildDuplicateElement({
-	element,
-	id,
-	startTime,
-}: {
-	element: TimelineElement;
-	id: string;
-	startTime: number;
-}): TimelineElement {
-	return {
-		...element,
-		id,
-		name: `${element.name} (copy)`,
-		startTime,
-		animations: cloneAnimations({
-			animations: element.animations,
-			shouldRegenerateKeyframeIds: true,
-		}),
-	};
-}
+import { Command } from "@/lib/commands/base-command";

+import type { TimelineElement, TimelineTrack } from "@/lib/timeline";

+import { generateUUID } from "@/utils/id";

+import { EditorCore } from "@/core";

+import {

+	buildEmptyTrack,

+	getHighestInsertIndexForTrack,

+} from "@/lib/timeline/track-utils";

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

+

+interface DuplicateElementsParams {

+	elements: { trackId: string; elementId: string }[];

+}

+

+export class DuplicateElementsCommand extends Command {

+	private duplicatedElements: { trackId: string; elementId: string }[] = [];

+	private savedState: TimelineTrack[] | null = null;

+	private previousSelection: { trackId: string; elementId: string }[] = [];

+	private elements: DuplicateElementsParams["elements"];

+

+	constructor({ elements }: DuplicateElementsParams) {

+		super();

+		this.elements = elements;

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		this.savedState = editor.timeline.getTracks();

+		this.previousSelection = editor.selection.getSelectedElements();

+		this.duplicatedElements = [];

+

+		const updatedTracks = [...this.savedState];

+

+		for (const track of this.savedState) {

+			const elementsToDuplicate = this.elements.filter(

+				(elementEntry) => elementEntry.trackId === track.id,

+			);

+

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

+				continue;

+			}

+

+			const elementIdsToDuplicate = new Set(

+				elementsToDuplicate.map((element) => element.elementId),

+			);

+			const newTrackElements: TimelineElement[] = [];

+

+			const newTrackId = generateUUID();

+			const newTrackBase = buildEmptyTrack({

+				id: newTrackId,

+				type: track.type,

+			});

+

+			for (const element of track.elements) {

+				if (!elementIdsToDuplicate.has(element.id)) {

+					continue;

+				}

+

+				const newId = generateUUID();

+				this.duplicatedElements.push({

+					trackId: newTrackId,

+					elementId: newId,

+				});

+				newTrackElements.push(

+					buildDuplicateElement({

+						element,

+						id: newId,

+						startTime: element.startTime,

+					}),

+				);

+			}

+

+			const newTrack = {

+				...newTrackBase,

+				elements: newTrackElements,

+			} as TimelineTrack;

+

+			const insertIndex = getHighestInsertIndexForTrack({

+				tracks: updatedTracks,

+				trackType: track.type,

+			});

+			updatedTracks.splice(insertIndex, 0, newTrack);

+		}

+

+		editor.timeline.updateTracks(updatedTracks);

+

+		if (this.duplicatedElements.length > 0) {

+			editor.selection.setSelectedElements({

+				elements: this.duplicatedElements,

+			});

+		}

+	}

+

+	undo(): void {

+		if (this.savedState) {

+			const editor = EditorCore.getInstance();

+			editor.timeline.updateTracks(this.savedState);

+			editor.selection.setSelectedElements({

+				elements: this.previousSelection,

+			});

+		}

+	}

+

+	getDuplicatedElements(): { trackId: string; elementId: string }[] {

+		return this.duplicatedElements;

+	}

+}

+

+function buildDuplicateElement({

+	element,

+	id,

+	startTime,

+}: {

+	element: TimelineElement;

+	id: string;

+	startTime: number;

+}): TimelineElement {

+	return {

+		...element,

+		id,

+		name: `${element.name} (copy)`,

+		startTime,

+		animations: cloneAnimations({

+			animations: element.animations,

+			shouldRegenerateKeyframeIds: true,

+		}),

+	};

+}

diff --git a/apps/web/src/lib/commands/timeline/element/effects/add-effect.ts b/apps/web/src/lib/commands/timeline/element/effects/add-effect.ts
index 34ca12ab..3d27b345 100644
--- a/apps/web/src/lib/commands/timeline/element/effects/add-effect.ts
+++ b/apps/web/src/lib/commands/timeline/element/effects/add-effect.ts
@@ -1,74 +1,74 @@
-import { Command } from "@/lib/commands/base-command";
-import { EditorCore } from "@/core";
-import { isVisualElement, updateElementInTracks } from "@/lib/timeline";
-import type { TimelineTrack, VisualElement } from "@/lib/timeline";
-import { buildDefaultEffectInstance } from "@/lib/effects";
-
-function addEffectToElement({
-	element,
-	effectType,
-}: {
-	element: VisualElement;
-	effectType: string;
-}): VisualElement {
-	const instance = buildDefaultEffectInstance({ effectType });
-	const currentEffects = element.effects ?? [];
-	return { ...element, effects: [...currentEffects, instance] };
-}
-
-export class AddClipEffectCommand extends Command {
-	private savedState: TimelineTrack[] | null = null;
-	private effectId: string | null = null;
-	private readonly trackId: string;
-	private readonly elementId: string;
-	private readonly effectType: string;
-
-	constructor({
-		trackId,
-		elementId,
-		effectType,
-	}: {
-		trackId: string;
-		elementId: string;
-		effectType: string;
-	}) {
-		super();
-		this.trackId = trackId;
-		this.elementId = elementId;
-		this.effectType = effectType;
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.timeline.getTracks();
-
-		const updatedTracks = updateElementInTracks({
-			tracks: this.savedState,
-			trackId: this.trackId,
-			elementId: this.elementId,
-			elementPredicate: isVisualElement,
-		update: (element) => {
-			const updated = addEffectToElement({
-				element: element as VisualElement,
-				effectType: this.effectType,
-			});
-				const effects = updated.effects ?? [];
-				this.effectId = effects[effects.length - 1]?.id ?? null;
-				return updated;
-			},
-		});
-
-		editor.timeline.updateTracks(updatedTracks);
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-
-	getEffectId(): string | null {
-		return this.effectId;
-	}
-}
+import { Command } from "@/lib/commands/base-command";

+import { EditorCore } from "@/core";

+import { isVisualElement, updateElementInTracks } from "@/lib/timeline";

+import type { TimelineTrack, VisualElement } from "@/lib/timeline";

+import { buildDefaultEffectInstance } from "@/lib/effects";

+

+function addEffectToElement({

+	element,

+	effectType,

+}: {

+	element: VisualElement;

+	effectType: string;

+}): VisualElement {

+	const instance = buildDefaultEffectInstance({ effectType });

+	const currentEffects = element.effects ?? [];

+	return { ...element, effects: [...currentEffects, instance] };

+}

+

+export class AddClipEffectCommand extends Command {

+	private savedState: TimelineTrack[] | null = null;

+	private effectId: string | null = null;

+	private readonly trackId: string;

+	private readonly elementId: string;

+	private readonly effectType: string;

+

+	constructor({

+		trackId,

+		elementId,

+		effectType,

+	}: {

+		trackId: string;

+		elementId: string;

+		effectType: string;

+	}) {

+		super();

+		this.trackId = trackId;

+		this.elementId = elementId;

+		this.effectType = effectType;

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		this.savedState = editor.timeline.getTracks();

+

+		const updatedTracks = updateElementInTracks({

+			tracks: this.savedState,

+			trackId: this.trackId,

+			elementId: this.elementId,

+			elementPredicate: isVisualElement,

+		update: (element) => {

+			const updated = addEffectToElement({

+				element: element as VisualElement,

+				effectType: this.effectType,

+			});

+				const effects = updated.effects ?? [];

+				this.effectId = effects[effects.length - 1]?.id ?? null;

+				return updated;

+			},

+		});

+

+		editor.timeline.updateTracks(updatedTracks);

+	}

+

+	undo(): void {

+		if (this.savedState) {

+			const editor = EditorCore.getInstance();

+			editor.timeline.updateTracks(this.savedState);

+		}

+	}

+

+	getEffectId(): string | null {

+		return this.effectId;

+	}

+}

diff --git a/apps/web/src/lib/commands/timeline/element/effects/index.ts b/apps/web/src/lib/commands/timeline/element/effects/index.ts
index 133ce661..b03c51e6 100644
--- a/apps/web/src/lib/commands/timeline/element/effects/index.ts
+++ b/apps/web/src/lib/commands/timeline/element/effects/index.ts
@@ -1,5 +1,5 @@
-export { AddClipEffectCommand } from "./add-effect";
-export { RemoveClipEffectCommand } from "./remove-effect";
-export { ToggleClipEffectCommand } from "./toggle-effect";
-export { UpdateClipEffectParamsCommand } from "./update-effect-params";
-export { ReorderClipEffectsCommand } from "./reorder-effect";
+export { AddClipEffectCommand } from "./add-effect";

+export { RemoveClipEffectCommand } from "./remove-effect";

+export { ToggleClipEffectCommand } from "./toggle-effect";

+export { UpdateClipEffectParamsCommand } from "./update-effect-params";

+export { ReorderClipEffectsCommand } from "./reorder-effect";

diff --git a/apps/web/src/lib/commands/timeline/element/effects/remove-effect.ts b/apps/web/src/lib/commands/timeline/element/effects/remove-effect.ts
index 1b309f13..88b445f3 100644
--- a/apps/web/src/lib/commands/timeline/element/effects/remove-effect.ts
+++ b/apps/web/src/lib/commands/timeline/element/effects/remove-effect.ts
@@ -1,65 +1,65 @@
-import { Command } from "@/lib/commands/base-command";
-import { EditorCore } from "@/core";
-import { isVisualElement, updateElementInTracks } from "@/lib/timeline";
-import type { TimelineTrack, VisualElement } from "@/lib/timeline";
-
-function removeEffectFromElement({
-	element,
-	effectId,
-}: {
-	element: VisualElement;
-	effectId: string;
-}): VisualElement {
-	const currentEffects = element.effects ?? [];
-	const filtered = currentEffects.filter((effect) => effect.id !== effectId);
-	return { ...element, effects: filtered };
-}
-
-export class RemoveClipEffectCommand extends Command {
-	private savedState: TimelineTrack[] | null = null;
-	private readonly trackId: string;
-	private readonly elementId: string;
-	private readonly effectId: string;
-
-	constructor({
-		trackId,
-		elementId,
-		effectId,
-	}: {
-		trackId: string;
-		elementId: string;
-		effectId: string;
-	}) {
-		super();
-		this.trackId = trackId;
-		this.elementId = elementId;
-		this.effectId = effectId;
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.timeline.getTracks();
-
-		const updatedTracks = updateElementInTracks({
-			tracks: this.savedState,
-			trackId: this.trackId,
-			elementId: this.elementId,
-			elementPredicate: isVisualElement,
-		update: (element) => {
-			return removeEffectFromElement({
-				element: element as VisualElement,
-				effectId: this.effectId,
-			});
-			},
-		});
-
-		editor.timeline.updateTracks(updatedTracks);
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-}
+import { Command } from "@/lib/commands/base-command";

+import { EditorCore } from "@/core";

+import { isVisualElement, updateElementInTracks } from "@/lib/timeline";

+import type { TimelineTrack, VisualElement } from "@/lib/timeline";

+

+function removeEffectFromElement({

+	element,

+	effectId,

+}: {

+	element: VisualElement;

+	effectId: string;

+}): VisualElement {

+	const currentEffects = element.effects ?? [];

+	const filtered = currentEffects.filter((effect) => effect.id !== effectId);

+	return { ...element, effects: filtered };

+}

+

+export class RemoveClipEffectCommand extends Command {

+	private savedState: TimelineTrack[] | null = null;

+	private readonly trackId: string;

+	private readonly elementId: string;

+	private readonly effectId: string;

+

+	constructor({

+		trackId,

+		elementId,

+		effectId,

+	}: {

+		trackId: string;

+		elementId: string;

+		effectId: string;

+	}) {

+		super();

+		this.trackId = trackId;

+		this.elementId = elementId;

+		this.effectId = effectId;

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		this.savedState = editor.timeline.getTracks();

+

+		const updatedTracks = updateElementInTracks({

+			tracks: this.savedState,

+			trackId: this.trackId,

+			elementId: this.elementId,

+			elementPredicate: isVisualElement,

+		update: (element) => {

+			return removeEffectFromElement({

+				element: element as VisualElement,

+				effectId: this.effectId,

+			});

+			},

+		});

+

+		editor.timeline.updateTracks(updatedTracks);

+	}

+

+	undo(): void {

+		if (this.savedState) {

+			const editor = EditorCore.getInstance();

+			editor.timeline.updateTracks(this.savedState);

+		}

+	}

+}

diff --git a/apps/web/src/lib/commands/timeline/element/effects/reorder-effect.ts b/apps/web/src/lib/commands/timeline/element/effects/reorder-effect.ts
index d946be18..af211a29 100644
--- a/apps/web/src/lib/commands/timeline/element/effects/reorder-effect.ts
+++ b/apps/web/src/lib/commands/timeline/element/effects/reorder-effect.ts
@@ -1,73 +1,73 @@
-import { Command } from "@/lib/commands/base-command";
-import { EditorCore } from "@/core";
-import { isVisualElement, updateElementInTracks } from "@/lib/timeline";
-import type { TimelineTrack, VisualElement } from "@/lib/timeline";
-
-function reorderEffectsOnElement({
-	element,
-	fromIndex,
-	toIndex,
-}: {
-	element: VisualElement;
-	fromIndex: number;
-	toIndex: number;
-}): VisualElement {
-	const effects = [...(element.effects ?? [])];
-	const [moved] = effects.splice(fromIndex, 1);
-	effects.splice(toIndex, 0, moved);
-	return { ...element, effects };
-}
-
-export class ReorderClipEffectsCommand extends Command {
-	private savedState: TimelineTrack[] | null = null;
-	private readonly trackId: string;
-	private readonly elementId: string;
-	private readonly fromIndex: number;
-	private readonly toIndex: number;
-
-	constructor({
-		trackId,
-		elementId,
-		fromIndex,
-		toIndex,
-	}: {
-		trackId: string;
-		elementId: string;
-		fromIndex: number;
-		toIndex: number;
-	}) {
-		super();
-		this.trackId = trackId;
-		this.elementId = elementId;
-		this.fromIndex = fromIndex;
-		this.toIndex = toIndex;
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.timeline.getTracks();
-
-		const updatedTracks = updateElementInTracks({
-			tracks: this.savedState,
-			trackId: this.trackId,
-			elementId: this.elementId,
-			elementPredicate: isVisualElement,
-		update: (element) => {
-			return reorderEffectsOnElement({
-				element: element as VisualElement,
-				fromIndex: this.fromIndex,
-				toIndex: this.toIndex,
-			});
-			},
-		});
-
-		editor.timeline.updateTracks(updatedTracks);
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-}
+import { Command } from "@/lib/commands/base-command";

+import { EditorCore } from "@/core";

+import { isVisualElement, updateElementInTracks } from "@/lib/timeline";

+import type { TimelineTrack, VisualElement } from "@/lib/timeline";

+

+function reorderEffectsOnElement({

+	element,

+	fromIndex,

+	toIndex,

+}: {

+	element: VisualElement;

+	fromIndex: number;

+	toIndex: number;

+}): VisualElement {

+	const effects = [...(element.effects ?? [])];

+	const [moved] = effects.splice(fromIndex, 1);

+	effects.splice(toIndex, 0, moved);

+	return { ...element, effects };

+}

+

+export class ReorderClipEffectsCommand extends Command {

+	private savedState: TimelineTrack[] | null = null;

+	private readonly trackId: string;

+	private readonly elementId: string;

+	private readonly fromIndex: number;

+	private readonly toIndex: number;

+

+	constructor({

+		trackId,

+		elementId,

+		fromIndex,

+		toIndex,

+	}: {

+		trackId: string;

+		elementId: string;

+		fromIndex: number;

+		toIndex: number;

+	}) {

+		super();

+		this.trackId = trackId;

+		this.elementId = elementId;

+		this.fromIndex = fromIndex;

+		this.toIndex = toIndex;

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		this.savedState = editor.timeline.getTracks();

+

+		const updatedTracks = updateElementInTracks({

+			tracks: this.savedState,

+			trackId: this.trackId,

+			elementId: this.elementId,

+			elementPredicate: isVisualElement,

+		update: (element) => {

+			return reorderEffectsOnElement({

+				element: element as VisualElement,

+				fromIndex: this.fromIndex,

+				toIndex: this.toIndex,

+			});

+			},

+		});

+

+		editor.timeline.updateTracks(updatedTracks);

+	}

+

+	undo(): void {

+		if (this.savedState) {

+			const editor = EditorCore.getInstance();

+			editor.timeline.updateTracks(this.savedState);

+		}

+	}

+}

diff --git a/apps/web/src/lib/commands/timeline/element/effects/toggle-effect.ts b/apps/web/src/lib/commands/timeline/element/effects/toggle-effect.ts
index 25e7c356..2e55b676 100644
--- a/apps/web/src/lib/commands/timeline/element/effects/toggle-effect.ts
+++ b/apps/web/src/lib/commands/timeline/element/effects/toggle-effect.ts
@@ -1,67 +1,67 @@
-import { Command } from "@/lib/commands/base-command";
-import { EditorCore } from "@/core";
-import { isVisualElement, updateElementInTracks } from "@/lib/timeline";
-import type { TimelineTrack, VisualElement } from "@/lib/timeline";
-
-export function toggleEffectOnElement({
-	element,
-	effectId,
-}: {
-	element: VisualElement;
-	effectId: string;
-}): VisualElement {
-	const currentEffects = element.effects ?? [];
-	const updated = currentEffects.map((effect) =>
-		effect.id === effectId ? { ...effect, enabled: !effect.enabled } : effect,
-	);
-	return { ...element, effects: updated };
-}
-
-export class ToggleClipEffectCommand extends Command {
-	private savedState: TimelineTrack[] | null = null;
-	private readonly trackId: string;
-	private readonly elementId: string;
-	private readonly effectId: string;
-
-	constructor({
-		trackId,
-		elementId,
-		effectId,
-	}: {
-		trackId: string;
-		elementId: string;
-		effectId: string;
-	}) {
-		super();
-		this.trackId = trackId;
-		this.elementId = elementId;
-		this.effectId = effectId;
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.timeline.getTracks();
-
-		const updatedTracks = updateElementInTracks({
-			tracks: this.savedState,
-			trackId: this.trackId,
-			elementId: this.elementId,
-			elementPredicate: isVisualElement,
-		update: (element) => {
-			return toggleEffectOnElement({
-				element: element as VisualElement,
-				effectId: this.effectId,
-			});
-			},
-		});
-
-		editor.timeline.updateTracks(updatedTracks);
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-}
+import { Command } from "@/lib/commands/base-command";

+import { EditorCore } from "@/core";

+import { isVisualElement, updateElementInTracks } from "@/lib/timeline";

+import type { TimelineTrack, VisualElement } from "@/lib/timeline";

+

+export function toggleEffectOnElement({

+	element,

+	effectId,

+}: {

+	element: VisualElement;

+	effectId: string;

+}): VisualElement {

+	const currentEffects = element.effects ?? [];

+	const updated = currentEffects.map((effect) =>

+		effect.id === effectId ? { ...effect, enabled: !effect.enabled } : effect,

+	);

+	return { ...element, effects: updated };

+}

+

+export class ToggleClipEffectCommand extends Command {

+	private savedState: TimelineTrack[] | null = null;

+	private readonly trackId: string;

+	private readonly elementId: string;

+	private readonly effectId: string;

+

+	constructor({

+		trackId,

+		elementId,

+		effectId,

+	}: {

+		trackId: string;

+		elementId: string;

+		effectId: string;

+	}) {

+		super();

+		this.trackId = trackId;

+		this.elementId = elementId;

+		this.effectId = effectId;

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		this.savedState = editor.timeline.getTracks();

+

+		const updatedTracks = updateElementInTracks({

+			tracks: this.savedState,

+			trackId: this.trackId,

+			elementId: this.elementId,

+			elementPredicate: isVisualElement,

+		update: (element) => {

+			return toggleEffectOnElement({

+				element: element as VisualElement,

+				effectId: this.effectId,

+			});

+			},

+		});

+

+		editor.timeline.updateTracks(updatedTracks);

+	}

+

+	undo(): void {

+		if (this.savedState) {

+			const editor = EditorCore.getInstance();

+			editor.timeline.updateTracks(this.savedState);

+		}

+	}

+}

diff --git a/apps/web/src/lib/commands/timeline/element/index.ts b/apps/web/src/lib/commands/timeline/element/index.ts
index 899754fb..a7e513fe 100644
--- a/apps/web/src/lib/commands/timeline/element/index.ts
+++ b/apps/web/src/lib/commands/timeline/element/index.ts
@@ -1,15 +1,15 @@
-export { InsertElementCommand } from "./insert-element";
-export { DeleteElementsCommand } from "./delete-elements";
-export { DuplicateElementsCommand } from "./duplicate-elements";
-export { UpdateElementTrimCommand } from "./update-element-trim";
-export { UpdateElementDurationCommand } from "./update-element-duration";
-export { UpdateElementStartTimeCommand } from "./update-element-start-time";
-export { SplitElementsCommand } from "./split-elements";
-export { UpdateElementCommand } from "./update-element";
-export { ToggleElementsVisibilityCommand } from "./toggle-elements-visibility";
-export { ToggleElementsMutedCommand } from "./toggle-elements-muted";
-export { MoveElementCommand } from "./move-elements";
-export * from "./keyframes";
-export * from "./effects";
-export * from "./masks";
-export * from "./retime";
+export { InsertElementCommand } from "./insert-element";

+export { DeleteElementsCommand } from "./delete-elements";

+export { DuplicateElementsCommand } from "./duplicate-elements";

+export { UpdateElementTrimCommand } from "./update-element-trim";

+export { UpdateElementDurationCommand } from "./update-element-duration";

+export { UpdateElementStartTimeCommand } from "./update-element-start-time";

+export { SplitElementsCommand } from "./split-elements";

+export { UpdateElementCommand } from "./update-element";

+export { ToggleElementsVisibilityCommand } from "./toggle-elements-visibility";

+export { ToggleElementsMutedCommand } from "./toggle-elements-muted";

+export { MoveElementCommand } from "./move-elements";

+export * from "./keyframes";

+export * from "./effects";

+export * from "./masks";

+export * from "./retime";

diff --git a/apps/web/src/lib/commands/timeline/element/insert-element.ts b/apps/web/src/lib/commands/timeline/element/insert-element.ts
index acd72b66..e6d6ee99 100644
--- a/apps/web/src/lib/commands/timeline/element/insert-element.ts
+++ b/apps/web/src/lib/commands/timeline/element/insert-element.ts
@@ -1,358 +1,358 @@
-import { Command } from "@/lib/commands/base-command";
-import { EditorCore } from "@/core";
-import type {
-	CreateTimelineElement,
-	TimelineTrack,
-	TimelineElement,
-	TrackType,
-	ElementType,
-} from "@/lib/timeline";
-import { generateUUID } from "@/utils/id";
-import {
-	requiresMediaId,
-	wouldElementOverlap,
-} from "@/lib/timeline/element-utils";
-import {
-	buildEmptyTrack,
-	canElementGoOnTrack,
-	getDefaultInsertIndexForTrack,
-	validateElementTrackCompatibility,
-	enforceMainTrackStart,
-} from "@/lib/timeline/track-utils";
-import type { MediaAsset } from "@/lib/media/types";
-import { ELEMENT_TRACK_MAP, TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
-import { graphicsRegistry, registerDefaultGraphics } from "@/lib/graphics";
-
-type InsertElementPlacement =
-	| { mode: "explicit"; trackId: string }
-	| { mode: "auto"; trackType?: TrackType; insertIndex?: number };
-
-export interface InsertElementParams {
-	element: CreateTimelineElement;
-	placement: InsertElementPlacement;
-}
-
-export class InsertElementCommand extends Command {
-	private elementId: string;
-	private savedState: TimelineTrack[] | null = null;
-	private targetTrackId: string | null = null;
-
-	constructor({ element, placement }: InsertElementParams) {
-		super();
-		this.elementId = generateUUID();
-		this.element = element;
-		this.placement = placement;
-	}
-
-	private element: CreateTimelineElement;
-	private placement: InsertElementPlacement;
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.timeline.getTracks();
-
-		if (!this.savedState) {
-			console.error("Tracks not available");
-			return;
-		}
-
-		if (!this.validateElementBasics({ element: this.element })) {
-			return;
-		}
-
-		const totalElementsInTimeline = this.savedState.reduce(
-			(total, t) => total + t.elements.length,
-			0,
-		);
-		const isFirstElement = totalElementsInTimeline === 0;
-
-		const newElement = this.buildElement({ element: this.element });
-		const updateResult = this.resolveTracksWithElement({
-			tracks: this.savedState,
-			element: newElement,
-		});
-
-		if (!updateResult) {
-			return;
-		}
-
-		const { updatedTracks, targetTrackId } = updateResult;
-		this.targetTrackId = targetTrackId;
-
-		const isVisualMedia =
-			newElement.type === "video" || newElement.type === "image";
-
-		if (isFirstElement && isVisualMedia) {
-			const mediaAssets = editor.media.getAssets();
-			const activeProject = editor.project.getActive();
-			const asset = mediaAssets.find(
-				(item: MediaAsset) => item.id === newElement.mediaId,
-			);
-
-			if (asset?.width && asset?.height) {
-				const nextCanvasSize = { width: asset.width, height: asset.height };
-				const shouldSetOriginalCanvasSize =
-					!activeProject?.settings.originalCanvasSize;
-				editor.project.updateSettings({
-					settings: {
-						canvasSize: nextCanvasSize,
-						...(shouldSetOriginalCanvasSize
-							? { originalCanvasSize: nextCanvasSize }
-							: {}),
-					},
-					pushHistory: false,
-				});
-			}
-
-			if (asset?.type === "video" && asset?.fps) {
-				editor.project.updateSettings({
-					settings: { fps: asset.fps },
-					pushHistory: false,
-				});
-			}
-		}
-
-		editor.timeline.updateTracks(updatedTracks);
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-
-	getElementId(): string {
-		return this.elementId;
-	}
-
-	getTrackId(): string | null {
-		return this.targetTrackId;
-	}
-
-	private buildElement({
-		element,
-	}: {
-		element: CreateTimelineElement;
-	}): TimelineElement {
-		return {
-			...element,
-			id: this.elementId,
-			startTime: element.startTime,
-			trimStart: element.trimStart ?? 0,
-			trimEnd: element.trimEnd ?? 0,
-			duration: element.duration ?? TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION,
-		} as TimelineElement;
-	}
-
-	private validateElementBasics({
-		element,
-	}: {
-		element: CreateTimelineElement;
-	}): boolean {
-		if (requiresMediaId({ element }) && !("mediaId" in element)) {
-			console.error("Element requires mediaId");
-			return false;
-		}
-
-		if (
-			element.type === "audio" &&
-			element.sourceType === "library" &&
-			!element.sourceUrl
-		) {
-			console.error("Library audio element must have sourceUrl");
-			return false;
-		}
-
-		if (element.type === "sticker" && !element.stickerId) {
-			console.error("Sticker element must have stickerId");
-			return false;
-		}
-
-		if (element.type === "graphic") {
-			registerDefaultGraphics();
-			if (!element.definitionId || !graphicsRegistry.has(element.definitionId)) {
-				console.error("Graphic element must have a valid definitionId");
-				return false;
-			}
-		}
-
-		if (element.type === "text" && !element.content) {
-			console.error("Text element must have content");
-			return false;
-		}
-
-		if (element.type === "effect" && !element.effectType) {
-			console.error("Effect element must have effectType");
-			return false;
-		}
-
-		return true;
-	}
-
-	private resolveTracksWithElement({
-		tracks,
-		element,
-	}: {
-		tracks: TimelineTrack[];
-		element: TimelineElement;
-	}): { updatedTracks: TimelineTrack[]; targetTrackId: string } | null {
-		const placement = this.placement;
-
-		if (placement.mode === "explicit") {
-			const targetTrack = tracks.find(
-				(track) => track.id === placement.trackId,
-			);
-
-			if (!targetTrack) {
-				console.error("Track not found:", placement.trackId);
-				return null;
-			}
-
-			const validation = validateElementTrackCompatibility({
-				element,
-				track: targetTrack,
-			});
-
-			if (!validation.isValid) {
-				console.error(validation.errorMessage);
-				return null;
-			}
-
-			const adjustedElement = this.adjustElementForMainTrack({
-				tracks,
-				targetTrackId: targetTrack.id,
-				element,
-			});
-
-			const updatedTracks = tracks.map((track) =>
-				track.id === targetTrack.id
-					? {
-							...track,
-							elements: [...track.elements, adjustedElement],
-						}
-					: track,
-			) as TimelineTrack[];
-
-			return { updatedTracks, targetTrackId: targetTrack.id };
-		}
-
-		const trackType =
-			placement.trackType ?? this.getTrackTypeForElement({ element });
-
-		if (
-			placement.trackType &&
-			!canElementGoOnTrack({
-				elementType: element.type,
-				trackType,
-			})
-		) {
-			console.error(
-				`${element.type} elements cannot be placed on ${trackType} tracks`,
-			);
-			return null;
-		}
-
-		const elementEndTime = element.startTime + element.duration;
-		const existingTrack = tracks.find((track) => {
-			if (
-				!canElementGoOnTrack({
-					elementType: element.type,
-					trackType: track.type,
-				})
-			) {
-				return false;
-			}
-
-			return !wouldElementOverlap({
-				elements: track.elements,
-				startTime: element.startTime,
-				endTime: elementEndTime,
-			});
-		});
-
-		if (existingTrack) {
-			const adjustedElement = this.adjustElementForMainTrack({
-				tracks,
-				targetTrackId: existingTrack.id,
-				element,
-			});
-
-			const updatedTracks = tracks.map((track) =>
-				track.id === existingTrack.id
-					? {
-							...track,
-							elements: [...track.elements, adjustedElement],
-						}
-					: track,
-			) as TimelineTrack[];
-
-			return { updatedTracks, targetTrackId: existingTrack.id };
-		}
-
-		const newTrackId = generateUUID();
-		const newTrack = buildEmptyTrack({
-			id: newTrackId,
-			type: trackType,
-		});
-		const newTrackWithElement = {
-			...newTrack,
-			elements: [...newTrack.elements, element],
-		} as TimelineTrack;
-
-		const updatedTracks = [...tracks];
-		const insertIndex =
-			placement.insertIndex ??
-			this.getAutoInsertIndex({ tracks: updatedTracks, trackType });
-		updatedTracks.splice(insertIndex, 0, newTrackWithElement);
-
-		return { updatedTracks, targetTrackId: newTrackId };
-	}
-
-	private getAutoInsertIndex({
-		tracks,
-		trackType,
-	}: {
-		tracks: TimelineTrack[];
-		trackType: TrackType;
-	}): number {
-		if (trackType === "text") {
-			const firstVideoTrackIndex = tracks.findIndex(
-				(track) => track.type === "video",
-			);
-			if (firstVideoTrackIndex >= 0) {
-				return firstVideoTrackIndex;
-			}
-		}
-
-		return getDefaultInsertIndexForTrack({
-			tracks,
-			trackType,
-		});
-	}
-
-	private adjustElementForMainTrack({
-		tracks,
-		targetTrackId,
-		element,
-	}: {
-		tracks: TimelineTrack[];
-		targetTrackId: string;
-		element: TimelineElement;
-	}): TimelineElement {
-		const adjustedStartTime = enforceMainTrackStart({
-			tracks,
-			targetTrackId,
-			requestedStartTime: element.startTime,
-		});
-		return { ...element, startTime: adjustedStartTime };
-	}
-
-	private getTrackTypeForElement({
-		element,
-	}: {
-		element: { type: ElementType };
-	}): TrackType {
-		return ELEMENT_TRACK_MAP[element.type];
-	}
-}
+import { Command } from "@/lib/commands/base-command";

+import { EditorCore } from "@/core";

+import type {

+	CreateTimelineElement,

+	TimelineTrack,

+	TimelineElement,

+	TrackType,

+	ElementType,

+} from "@/lib/timeline";

+import { generateUUID } from "@/utils/id";

+import {

+	requiresMediaId,

+	wouldElementOverlap,

+} from "@/lib/timeline/element-utils";

+import {

+	buildEmptyTrack,

+	canElementGoOnTrack,

+	getDefaultInsertIndexForTrack,

+	validateElementTrackCompatibility,

+	enforceMainTrackStart,

+} from "@/lib/timeline/track-utils";

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

+import { ELEMENT_TRACK_MAP, TIMELINE_CONSTANTS } from "@/constants/timeline-constants";

+import { graphicsRegistry, registerDefaultGraphics } from "@/lib/graphics";

+

+type InsertElementPlacement =

+	| { mode: "explicit"; trackId: string }

+	| { mode: "auto"; trackType?: TrackType; insertIndex?: number };

+

+export interface InsertElementParams {

+	element: CreateTimelineElement;

+	placement: InsertElementPlacement;

+}

+

+export class InsertElementCommand extends Command {

+	private elementId: string;

+	private savedState: TimelineTrack[] | null = null;

+	private targetTrackId: string | null = null;

+

+	constructor({ element, placement }: InsertElementParams) {

+		super();

+		this.elementId = generateUUID();

+		this.element = element;

+		this.placement = placement;

+	}

+

+	private element: CreateTimelineElement;

+	private placement: InsertElementPlacement;

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		this.savedState = editor.timeline.getTracks();

+

+		if (!this.savedState) {

+			console.error("Tracks not available");

+			return;

+		}

+

+		if (!this.validateElementBasics({ element: this.element })) {

+			return;

+		}

+

+		const totalElementsInTimeline = this.savedState.reduce(

+			(total, t) => total + t.elements.length,

+			0,

+		);

+		const isFirstElement = totalElementsInTimeline === 0;

+

+		const newElement = this.buildElement({ element: this.element });

+		const updateResult = this.resolveTracksWithElement({

+			tracks: this.savedState,

+			element: newElement,

+		});

+

+		if (!updateResult) {

+			return;

+		}

+

+		const { updatedTracks, targetTrackId } = updateResult;

+		this.targetTrackId = targetTrackId;

+

+		const isVisualMedia =

+			newElement.type === "video" || newElement.type === "image";

+

+		if (isFirstElement && isVisualMedia) {

+			const mediaAssets = editor.media.getAssets();

+			const activeProject = editor.project.getActive();

+			const asset = mediaAssets.find(

+				(item: MediaAsset) => item.id === newElement.mediaId,

+			);

+

+			if (asset?.width && asset?.height) {

+				const nextCanvasSize = { width: asset.width, height: asset.height };

+				const shouldSetOriginalCanvasSize =

+					!activeProject?.settings.originalCanvasSize;

+				editor.project.updateSettings({

+					settings: {

+						canvasSize: nextCanvasSize,

+						...(shouldSetOriginalCanvasSize

+							? { originalCanvasSize: nextCanvasSize }

+							: {}),

+					},

+					pushHistory: false,

+				});

+			}

+

+			if (asset?.type === "video" && asset?.fps) {

+				editor.project.updateSettings({

+					settings: { fps: asset.fps },

+					pushHistory: false,

+				});

+			}

+		}

+

+		editor.timeline.updateTracks(updatedTracks);

+	}

+

+	undo(): void {

+		if (this.savedState) {

+			const editor = EditorCore.getInstance();

+			editor.timeline.updateTracks(this.savedState);

+		}

+	}

+

+	getElementId(): string {

+		return this.elementId;

+	}

+

+	getTrackId(): string | null {

+		return this.targetTrackId;

+	}

+

+	private buildElement({

+		element,

+	}: {

+		element: CreateTimelineElement;

+	}): TimelineElement {

+		return {

+			...element,

+			id: this.elementId,

+			startTime: element.startTime,

+			trimStart: element.trimStart ?? 0,

+			trimEnd: element.trimEnd ?? 0,

+			duration: element.duration ?? TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION,

+		} as TimelineElement;

+	}

+

+	private validateElementBasics({

+		element,

+	}: {

+		element: CreateTimelineElement;

+	}): boolean {

+		if (requiresMediaId({ element }) && !("mediaId" in element)) {

+			console.error("Element requires mediaId");

+			return false;

+		}

+

+		if (

+			element.type === "audio" &&

+			element.sourceType === "library" &&

+			!element.sourceUrl

+		) {

+			console.error("Library audio element must have sourceUrl");

+			return false;

+		}

+

+		if (element.type === "sticker" && !element.stickerId) {

+			console.error("Sticker element must have stickerId");

+			return false;

+		}

+

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

+			registerDefaultGraphics();

+			if (!element.definitionId || !graphicsRegistry.has(element.definitionId)) {

+				console.error("Graphic element must have a valid definitionId");

+				return false;

+			}

+		}

+

+		if (element.type === "text" && !element.content) {

+			console.error("Text element must have content");

+			return false;

+		}

+

+		if (element.type === "effect" && !element.effectType) {

+			console.error("Effect element must have effectType");

+			return false;

+		}

+

+		return true;

+	}

+

+	private resolveTracksWithElement({

+		tracks,

+		element,

+	}: {

+		tracks: TimelineTrack[];

+		element: TimelineElement;

+	}): { updatedTracks: TimelineTrack[]; targetTrackId: string } | null {

+		const placement = this.placement;

+

+		if (placement.mode === "explicit") {

+			const targetTrack = tracks.find(

+				(track) => track.id === placement.trackId,

+			);

+

+			if (!targetTrack) {

+				console.error("Track not found:", placement.trackId);

+				return null;

+			}

+

+			const validation = validateElementTrackCompatibility({

+				element,

+				track: targetTrack,

+			});

+

+			if (!validation.isValid) {

+				console.error(validation.errorMessage);

+				return null;

+			}

+

+			const adjustedElement = this.adjustElementForMainTrack({

+				tracks,

+				targetTrackId: targetTrack.id,

+				element,

+			});

+

+			const updatedTracks = tracks.map((track) =>

+				track.id === targetTrack.id

+					? {

+							...track,

+							elements: [...track.elements, adjustedElement],

+						}

+					: track,

+			) as TimelineTrack[];

+

+			return { updatedTracks, targetTrackId: targetTrack.id };

+		}

+

+		const trackType =

+			placement.trackType ?? this.getTrackTypeForElement({ element });

+

+		if (

+			placement.trackType &&

+			!canElementGoOnTrack({

+				elementType: element.type,

+				trackType,

+			})

+		) {

+			console.error(

+				`${element.type} elements cannot be placed on ${trackType} tracks`,

+			);

+			return null;

+		}

+

+		const elementEndTime = element.startTime + element.duration;

+		const existingTrack = tracks.find((track) => {

+			if (

+				!canElementGoOnTrack({

+					elementType: element.type,

+					trackType: track.type,

+				})

+			) {

+				return false;

+			}

+

+			return !wouldElementOverlap({

+				elements: track.elements,

+				startTime: element.startTime,

+				endTime: elementEndTime,

+			});

+		});

+

+		if (existingTrack) {

+			const adjustedElement = this.adjustElementForMainTrack({

+				tracks,

+				targetTrackId: existingTrack.id,

+				element,

+			});

+

+			const updatedTracks = tracks.map((track) =>

+				track.id === existingTrack.id

+					? {

+							...track,

+							elements: [...track.elements, adjustedElement],

+						}

+					: track,

+			) as TimelineTrack[];

+

+			return { updatedTracks, targetTrackId: existingTrack.id };

+		}

+

+		const newTrackId = generateUUID();

+		const newTrack = buildEmptyTrack({

+			id: newTrackId,

+			type: trackType,

+		});

+		const newTrackWithElement = {

+			...newTrack,

+			elements: [...newTrack.elements, element],

+		} as TimelineTrack;

+

+		const updatedTracks = [...tracks];

+		const insertIndex =

+			placement.insertIndex ??

+			this.getAutoInsertIndex({ tracks: updatedTracks, trackType });

+		updatedTracks.splice(insertIndex, 0, newTrackWithElement);

+

+		return { updatedTracks, targetTrackId: newTrackId };

+	}

+

+	private getAutoInsertIndex({

+		tracks,

+		trackType,

+	}: {

+		tracks: TimelineTrack[];

+		trackType: TrackType;

+	}): number {

+		if (trackType === "text") {

+			const firstVideoTrackIndex = tracks.findIndex(

+				(track) => track.type === "video",

+			);

+			if (firstVideoTrackIndex >= 0) {

+				return firstVideoTrackIndex;

+			}

+		}

+

+		return getDefaultInsertIndexForTrack({

+			tracks,

+			trackType,

+		});

+	}

+

+	private adjustElementForMainTrack({

+		tracks,

+		targetTrackId,

+		element,

+	}: {

+		tracks: TimelineTrack[];

+		targetTrackId: string;

+		element: TimelineElement;

+	}): TimelineElement {

+		const adjustedStartTime = enforceMainTrackStart({

+			tracks,

+			targetTrackId,

+			requestedStartTime: element.startTime,

+		});

+		return { ...element, startTime: adjustedStartTime };

+	}

+

+	private getTrackTypeForElement({

+		element,

+	}: {

+		element: { type: ElementType };

+	}): TrackType {

+		return ELEMENT_TRACK_MAP[element.type];

+	}

+}

diff --git a/apps/web/src/lib/commands/timeline/element/keyframes/index.ts b/apps/web/src/lib/commands/timeline/element/keyframes/index.ts
index c03b14e9..ea19286c 100644
--- a/apps/web/src/lib/commands/timeline/element/keyframes/index.ts
+++ b/apps/web/src/lib/commands/timeline/element/keyframes/index.ts
@@ -1,5 +1,5 @@
-export * from "./remove-effect-param-keyframe";
-export * from "./remove-keyframe";
-export * from "./retime-keyframe";
-export * from "./upsert-effect-param-keyframe";
-export * from "./upsert-keyframe";
+export * from "./remove-effect-param-keyframe";

+export * from "./remove-keyframe";

+export * from "./retime-keyframe";

+export * from "./upsert-effect-param-keyframe";

+export * from "./upsert-keyframe";

diff --git a/apps/web/src/lib/commands/timeline/element/keyframes/remove-effect-param-keyframe.ts b/apps/web/src/lib/commands/timeline/element/keyframes/remove-effect-param-keyframe.ts
index 984a5ed7..aafa3c22 100644
--- a/apps/web/src/lib/commands/timeline/element/keyframes/remove-effect-param-keyframe.ts
+++ b/apps/web/src/lib/commands/timeline/element/keyframes/remove-effect-param-keyframe.ts
@@ -1,68 +1,68 @@
-import { EditorCore } from "@/core";
-import { Command } from "@/lib/commands/base-command";
-import { removeEffectParamKeyframe } from "@/lib/animation/effect-param-channel";
-import { updateElementInTracks } from "@/lib/timeline";
-import { isVisualElement } from "@/lib/timeline/element-utils";
-import type { TimelineTrack } from "@/lib/timeline";
-
-export class RemoveEffectParamKeyframeCommand extends Command {
-	private savedState: TimelineTrack[] | null = null;
-	private readonly trackId: string;
-	private readonly elementId: string;
-	private readonly effectId: string;
-	private readonly paramKey: string;
-	private readonly keyframeId: string;
-
-	constructor({
-		trackId,
-		elementId,
-		effectId,
-		paramKey,
-		keyframeId,
-	}: {
-		trackId: string;
-		elementId: string;
-		effectId: string;
-		paramKey: string;
-		keyframeId: string;
-	}) {
-		super();
-		this.trackId = trackId;
-		this.elementId = elementId;
-		this.effectId = effectId;
-		this.paramKey = paramKey;
-		this.keyframeId = keyframeId;
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.timeline.getTracks();
-
-		const updatedTracks = updateElementInTracks({
-			tracks: this.savedState,
-			trackId: this.trackId,
-			elementId: this.elementId,
-			elementPredicate: isVisualElement,
-			update: (element) => {
-				const animations = removeEffectParamKeyframe({
-					animations: element.animations,
-					effectId: this.effectId,
-					paramKey: this.paramKey,
-					keyframeId: this.keyframeId,
-				});
-				return { ...element, animations };
-			},
-		});
-
-		editor.timeline.updateTracks(updatedTracks);
-	}
-
-	undo(): void {
-		if (!this.savedState) {
-			return;
-		}
-
-		const editor = EditorCore.getInstance();
-		editor.timeline.updateTracks(this.savedState);
-	}
-}
+import { EditorCore } from "@/core";

+import { Command } from "@/lib/commands/base-command";

+import { removeEffectParamKeyframe } from "@/lib/animation/effect-param-channel";

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

+import { isVisualElement } from "@/lib/timeline/element-utils";

+import type { TimelineTrack } from "@/lib/timeline";

+

+export class RemoveEffectParamKeyframeCommand extends Command {

+	private savedState: TimelineTrack[] | null = null;

+	private readonly trackId: string;

+	private readonly elementId: string;

+	private readonly effectId: string;

+	private readonly paramKey: string;

+	private readonly keyframeId: string;

+

+	constructor({

+		trackId,

+		elementId,

+		effectId,

+		paramKey,

+		keyframeId,

+	}: {

+		trackId: string;

+		elementId: string;

+		effectId: string;

+		paramKey: string;

+		keyframeId: string;

+	}) {

+		super();

+		this.trackId = trackId;

+		this.elementId = elementId;

+		this.effectId = effectId;

+		this.paramKey = paramKey;

+		this.keyframeId = keyframeId;

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		this.savedState = editor.timeline.getTracks();

+

+		const updatedTracks = updateElementInTracks({

+			tracks: this.savedState,

+			trackId: this.trackId,

+			elementId: this.elementId,

+			elementPredicate: isVisualElement,

+			update: (element) => {

+				const animations = removeEffectParamKeyframe({

+					animations: element.animations,

+					effectId: this.effectId,

+					paramKey: this.paramKey,

+					keyframeId: this.keyframeId,

+				});

+				return { ...element, animations };

+			},

+		});

+

+		editor.timeline.updateTracks(updatedTracks);

+	}

+

+	undo(): void {

+		if (!this.savedState) {

+			return;

+		}

+

+		const editor = EditorCore.getInstance();

+		editor.timeline.updateTracks(this.savedState);

+	}

+}

diff --git a/apps/web/src/lib/commands/timeline/element/keyframes/remove-keyframe.ts b/apps/web/src/lib/commands/timeline/element/keyframes/remove-keyframe.ts
index eb5cf742..56676aa5 100644
--- a/apps/web/src/lib/commands/timeline/element/keyframes/remove-keyframe.ts
+++ b/apps/web/src/lib/commands/timeline/element/keyframes/remove-keyframe.ts
@@ -1,138 +1,138 @@
-import { EditorCore } from "@/core";
-import {
-	getChannel,
-	getChannelValueAtTime,
-	removeElementKeyframe,
-	resolveAnimationTarget,
-} from "@/lib/animation";
-import { Command } from "@/lib/commands/base-command";
-import { updateElementInTracks } from "@/lib/timeline";
-import type { AnimationPath, AnimationValue } from "@/lib/animation/types";
-import type { TimelineElement, TimelineTrack } from "@/lib/timeline";
-
-function sampleValueBeforeRemoval({
-	element,
-	propertyPath,
-	keyframeId,
-}: {
-	element: TimelineElement;
-	propertyPath: AnimationPath;
-	keyframeId: string;
-}): AnimationValue | null {
-	const channel = getChannel({
-		animations: element.animations,
-		propertyPath,
-	});
-	const keyframe = channel?.keyframes.find(
-		(candidate) => candidate.id === keyframeId,
-	);
-	if (!channel || !keyframe) {
-		return null;
-	}
-
-	const target = resolveAnimationTarget({ element, path: propertyPath });
-	if (!target) {
-		return null;
-	}
-	const baseValue = target.getBaseValue();
-	if (baseValue === null) {
-		return null;
-	}
-
-	return getChannelValueAtTime({
-		channel,
-		time: keyframe.time,
-		fallbackValue: baseValue,
-	});
-}
-
-function removeKeyframeAndPersist({
-	element,
-	propertyPath,
-	keyframeId,
-}: {
-	element: TimelineElement;
-	propertyPath: AnimationPath;
-	keyframeId: string;
-}): TimelineElement {
-	const target = resolveAnimationTarget({ element, path: propertyPath });
-	if (!target) {
-		return element;
-	}
-
-	const valueBefore = sampleValueBeforeRemoval({
-		element,
-		propertyPath,
-		keyframeId,
-	});
-
-	const nextAnimations = removeElementKeyframe({
-		animations: element.animations,
-		propertyPath,
-		keyframeId,
-	});
-
-	const isChannelNowEmpty =
-		getChannel({ animations: nextAnimations, propertyPath }) === undefined;
-	const shouldPersistToBase = isChannelNowEmpty && valueBefore !== null;
-
-	const baseElement = shouldPersistToBase
-		? target.setBaseValue(valueBefore)
-		: element;
-
-	return { ...baseElement, animations: nextAnimations };
-}
-
-export class RemoveKeyframeCommand extends Command {
-	private savedState: TimelineTrack[] | null = null;
-	private readonly trackId: string;
-	private readonly elementId: string;
-	private readonly propertyPath: AnimationPath;
-	private readonly keyframeId: string;
-
-	constructor({
-		trackId,
-		elementId,
-		propertyPath,
-		keyframeId,
-	}: {
-		trackId: string;
-		elementId: string;
-		propertyPath: AnimationPath;
-		keyframeId: string;
-	}) {
-		super();
-		this.trackId = trackId;
-		this.elementId = elementId;
-		this.propertyPath = propertyPath;
-		this.keyframeId = keyframeId;
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.timeline.getTracks();
-
-		const updatedTracks = updateElementInTracks({
-			tracks: this.savedState,
-			trackId: this.trackId,
-			elementId: this.elementId,
-			update: (element) =>
-				removeKeyframeAndPersist({
-					element,
-					propertyPath: this.propertyPath,
-					keyframeId: this.keyframeId,
-				}),
-		});
-
-		editor.timeline.updateTracks(updatedTracks);
-	}
-
-	undo(): void {
-		if (!this.savedState) {
-			return;
-		}
-
-		const editor = EditorCore.getInstance();
-		editor.timeline.updateTracks(this.savedState);
-	}
-}
+import { EditorCore } from "@/core";

+import {

+	getChannel,

+	getChannelValueAtTime,

+	removeElementKeyframe,

+	resolveAnimationTarget,

+} from "@/lib/animation";

+import { Command } from "@/lib/commands/base-command";

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

+import type { AnimationPath, AnimationValue } from "@/lib/animation/types";

+import type { TimelineElement, TimelineTrack } from "@/lib/timeline";

+

+function sampleValueBeforeRemoval({

+	element,

+	propertyPath,

+	keyframeId,

+}: {

+	element: TimelineElement;

+	propertyPath: AnimationPath;

+	keyframeId: string;

+}): AnimationValue | null {

+	const channel = getChannel({

+		animations: element.animations,

+		propertyPath,

+	});

+	const keyframe = channel?.keyframes.find(

+		(candidate) => candidate.id === keyframeId,

+	);

+	if (!channel || !keyframe) {

+		return null;

+	}

+

+	const target = resolveAnimationTarget({ element, path: propertyPath });

+	if (!target) {

+		return null;

+	}

+	const baseValue = target.getBaseValue();

+	if (baseValue === null) {

+		return null;

+	}

+

+	return getChannelValueAtTime({

+		channel,

+		time: keyframe.time,

+		fallbackValue: baseValue,

+	});

+}

+

+function removeKeyframeAndPersist({

+	element,

+	propertyPath,

+	keyframeId,

+}: {

+	element: TimelineElement;

+	propertyPath: AnimationPath;

+	keyframeId: string;

+}): TimelineElement {

+	const target = resolveAnimationTarget({ element, path: propertyPath });

+	if (!target) {

+		return element;

+	}

+

+	const valueBefore = sampleValueBeforeRemoval({

+		element,

+		propertyPath,

+		keyframeId,

+	});

+

+	const nextAnimations = removeElementKeyframe({

+		animations: element.animations,

+		propertyPath,

+		keyframeId,

+	});

+

+	const isChannelNowEmpty =

+		getChannel({ animations: nextAnimations, propertyPath }) === undefined;

+	const shouldPersistToBase = isChannelNowEmpty && valueBefore !== null;

+

+	const baseElement = shouldPersistToBase

+		? target.setBaseValue(valueBefore)

+		: element;

+

+	return { ...baseElement, animations: nextAnimations };

+}

+

+export class RemoveKeyframeCommand extends Command {

+	private savedState: TimelineTrack[] | null = null;

+	private readonly trackId: string;

+	private readonly elementId: string;

+	private readonly propertyPath: AnimationPath;

+	private readonly keyframeId: string;

+

+	constructor({

+		trackId,

+		elementId,

+		propertyPath,

+		keyframeId,

+	}: {

+		trackId: string;

+		elementId: string;

+		propertyPath: AnimationPath;

+		keyframeId: string;

+	}) {

+		super();

+		this.trackId = trackId;

+		this.elementId = elementId;

+		this.propertyPath = propertyPath;

+		this.keyframeId = keyframeId;

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		this.savedState = editor.timeline.getTracks();

+

+		const updatedTracks = updateElementInTracks({

+			tracks: this.savedState,

+			trackId: this.trackId,

+			elementId: this.elementId,

+			update: (element) =>

+				removeKeyframeAndPersist({

+					element,

+					propertyPath: this.propertyPath,

+					keyframeId: this.keyframeId,

+				}),

+		});

+

+		editor.timeline.updateTracks(updatedTracks);

+	}

+

+	undo(): void {

+		if (!this.savedState) {

+			return;

+		}

+

+		const editor = EditorCore.getInstance();

+		editor.timeline.updateTracks(this.savedState);

+	}

+}

diff --git a/apps/web/src/lib/commands/timeline/element/keyframes/retime-keyframe.ts b/apps/web/src/lib/commands/timeline/element/keyframes/retime-keyframe.ts
index 9e912f27..7818ed0d 100644
--- a/apps/web/src/lib/commands/timeline/element/keyframes/retime-keyframe.ts
+++ b/apps/web/src/lib/commands/timeline/element/keyframes/retime-keyframe.ts
@@ -1,74 +1,74 @@
-import { EditorCore } from "@/core";
-import { resolveAnimationTarget, retimeElementKeyframe } from "@/lib/animation";
-import { Command } from "@/lib/commands/base-command";
-import { updateElementInTracks } from "@/lib/timeline";
-import type { AnimationPath } from "@/lib/animation/types";
-import type { TimelineTrack } from "@/lib/timeline";
-
-export class RetimeKeyframeCommand extends Command {
-	private savedState: TimelineTrack[] | null = null;
-	private readonly trackId: string;
-	private readonly elementId: string;
-	private readonly propertyPath: AnimationPath;
-	private readonly keyframeId: string;
-	private readonly nextTime: number;
-
-	constructor({
-		trackId,
-		elementId,
-		propertyPath,
-		keyframeId,
-		nextTime,
-	}: {
-		trackId: string;
-		elementId: string;
-		propertyPath: AnimationPath;
-		keyframeId: string;
-		nextTime: number;
-	}) {
-		super();
-		this.trackId = trackId;
-		this.elementId = elementId;
-		this.propertyPath = propertyPath;
-		this.keyframeId = keyframeId;
-		this.nextTime = nextTime;
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.timeline.getTracks();
-
-		const updatedTracks = updateElementInTracks({
-			tracks: this.savedState,
-			trackId: this.trackId,
-			elementId: this.elementId,
-			update: (element) => {
-				if (!resolveAnimationTarget({ element, path: this.propertyPath })) {
-					return element;
-				}
-
-				const boundedTime = Math.max(0, Math.min(this.nextTime, element.duration));
-				return {
-					...element,
-					animations: retimeElementKeyframe({
-						animations: element.animations,
-						propertyPath: this.propertyPath,
-						keyframeId: this.keyframeId,
-						time: boundedTime,
-					}),
-				};
-			},
-		});
-
-		editor.timeline.updateTracks(updatedTracks);
-	}
-
-	undo(): void {
-		if (!this.savedState) {
-			return;
-		}
-
-		const editor = EditorCore.getInstance();
-		editor.timeline.updateTracks(this.savedState);
-	}
-}
+import { EditorCore } from "@/core";

+import { resolveAnimationTarget, retimeElementKeyframe } from "@/lib/animation";

+import { Command } from "@/lib/commands/base-command";

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

+import type { AnimationPath } from "@/lib/animation/types";

+import type { TimelineTrack } from "@/lib/timeline";

+

+export class RetimeKeyframeCommand extends Command {

+	private savedState: TimelineTrack[] | null = null;

+	private readonly trackId: string;

+	private readonly elementId: string;

+	private readonly propertyPath: AnimationPath;

+	private readonly keyframeId: string;

+	private readonly nextTime: number;

+

+	constructor({

+		trackId,

+		elementId,

+		propertyPath,

+		keyframeId,

+		nextTime,

+	}: {

+		trackId: string;

+		elementId: string;

+		propertyPath: AnimationPath;

+		keyframeId: string;

+		nextTime: number;

+	}) {

+		super();

+		this.trackId = trackId;

+		this.elementId = elementId;

+		this.propertyPath = propertyPath;

+		this.keyframeId = keyframeId;

+		this.nextTime = nextTime;

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		this.savedState = editor.timeline.getTracks();

+

+		const updatedTracks = updateElementInTracks({

+			tracks: this.savedState,

+			trackId: this.trackId,

+			elementId: this.elementId,

+			update: (element) => {

+				if (!resolveAnimationTarget({ element, path: this.propertyPath })) {

+					return element;

+				}

+

+				const boundedTime = Math.max(0, Math.min(this.nextTime, element.duration));

+				return {

+					...element,

+					animations: retimeElementKeyframe({

+						animations: element.animations,

+						propertyPath: this.propertyPath,

+						keyframeId: this.keyframeId,

+						time: boundedTime,

+					}),

+				};

+			},

+		});

+

+		editor.timeline.updateTracks(updatedTracks);

+	}

+

+	undo(): void {

+		if (!this.savedState) {

+			return;

+		}

+

+		const editor = EditorCore.getInstance();

+		editor.timeline.updateTracks(this.savedState);

+	}

+}

diff --git a/apps/web/src/lib/commands/timeline/element/keyframes/upsert-effect-param-keyframe.ts b/apps/web/src/lib/commands/timeline/element/keyframes/upsert-effect-param-keyframe.ts
index 285bd80c..8e541b72 100644
--- a/apps/web/src/lib/commands/timeline/element/keyframes/upsert-effect-param-keyframe.ts
+++ b/apps/web/src/lib/commands/timeline/element/keyframes/upsert-effect-param-keyframe.ts
@@ -1,84 +1,84 @@
-import { EditorCore } from "@/core";
-import { Command } from "@/lib/commands/base-command";
-import { upsertEffectParamKeyframe } from "@/lib/animation/effect-param-channel";
-import { updateElementInTracks } from "@/lib/timeline";
-import { isVisualElement } from "@/lib/timeline/element-utils";
-import type { TimelineTrack } from "@/lib/timeline";
-
-export class UpsertEffectParamKeyframeCommand extends Command {
-	private savedState: TimelineTrack[] | null = null;
-	private readonly trackId: string;
-	private readonly elementId: string;
-	private readonly effectId: string;
-	private readonly paramKey: string;
-	private readonly time: number;
-	private readonly value: number;
-	private readonly interpolation: "linear" | "hold" | undefined;
-	private readonly keyframeId: string | undefined;
-
-	constructor({
-		trackId,
-		elementId,
-		effectId,
-		paramKey,
-		time,
-		value,
-		interpolation,
-		keyframeId,
-	}: {
-		trackId: string;
-		elementId: string;
-		effectId: string;
-		paramKey: string;
-		time: number;
-		value: number;
-		interpolation?: "linear" | "hold";
-		keyframeId?: string;
-	}) {
-		super();
-		this.trackId = trackId;
-		this.elementId = elementId;
-		this.effectId = effectId;
-		this.paramKey = paramKey;
-		this.time = time;
-		this.value = value;
-		this.interpolation = interpolation;
-		this.keyframeId = keyframeId;
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.timeline.getTracks();
-
-		const updatedTracks = updateElementInTracks({
-			tracks: this.savedState,
-			trackId: this.trackId,
-			elementId: this.elementId,
-			elementPredicate: isVisualElement,
-			update: (element) => {
-				const boundedTime = Math.max(0, Math.min(this.time, element.duration));
-				const animations = upsertEffectParamKeyframe({
-					animations: element.animations,
-					effectId: this.effectId,
-					paramKey: this.paramKey,
-					time: boundedTime,
-					value: this.value,
-					interpolation: this.interpolation,
-					keyframeId: this.keyframeId,
-				});
-				return { ...element, animations };
-			},
-		});
-
-		editor.timeline.updateTracks(updatedTracks);
-	}
-
-	undo(): void {
-		if (!this.savedState) {
-			return;
-		}
-
-		const editor = EditorCore.getInstance();
-		editor.timeline.updateTracks(this.savedState);
-	}
-}
+import { EditorCore } from "@/core";

+import { Command } from "@/lib/commands/base-command";

+import { upsertEffectParamKeyframe } from "@/lib/animation/effect-param-channel";

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

+import { isVisualElement } from "@/lib/timeline/element-utils";

+import type { TimelineTrack } from "@/lib/timeline";

+

+export class UpsertEffectParamKeyframeCommand extends Command {

+	private savedState: TimelineTrack[] | null = null;

+	private readonly trackId: string;

+	private readonly elementId: string;

+	private readonly effectId: string;

+	private readonly paramKey: string;

+	private readonly time: number;

+	private readonly value: number;

+	private readonly interpolation: "linear" | "hold" | undefined;

+	private readonly keyframeId: string | undefined;

+

+	constructor({

+		trackId,

+		elementId,

+		effectId,

+		paramKey,

+		time,

+		value,

+		interpolation,

+		keyframeId,

+	}: {

+		trackId: string;

+		elementId: string;

+		effectId: string;

+		paramKey: string;

+		time: number;

+		value: number;

+		interpolation?: "linear" | "hold";

+		keyframeId?: string;

+	}) {

+		super();

+		this.trackId = trackId;

+		this.elementId = elementId;

+		this.effectId = effectId;

+		this.paramKey = paramKey;

+		this.time = time;

+		this.value = value;

+		this.interpolation = interpolation;

+		this.keyframeId = keyframeId;

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		this.savedState = editor.timeline.getTracks();

+

+		const updatedTracks = updateElementInTracks({

+			tracks: this.savedState,

+			trackId: this.trackId,

+			elementId: this.elementId,

+			elementPredicate: isVisualElement,

+			update: (element) => {

+				const boundedTime = Math.max(0, Math.min(this.time, element.duration));

+				const animations = upsertEffectParamKeyframe({

+					animations: element.animations,

+					effectId: this.effectId,

+					paramKey: this.paramKey,

+					time: boundedTime,

+					value: this.value,

+					interpolation: this.interpolation,

+					keyframeId: this.keyframeId,

+				});

+				return { ...element, animations };

+			},

+		});

+

+		editor.timeline.updateTracks(updatedTracks);

+	}

+

+	undo(): void {

+		if (!this.savedState) {

+			return;

+		}

+

+		const editor = EditorCore.getInstance();

+		editor.timeline.updateTracks(this.savedState);

+	}

+}

diff --git a/apps/web/src/lib/commands/timeline/element/keyframes/upsert-keyframe.ts b/apps/web/src/lib/commands/timeline/element/keyframes/upsert-keyframe.ts
index 28e7feff..4b697705 100644
--- a/apps/web/src/lib/commands/timeline/element/keyframes/upsert-keyframe.ts
+++ b/apps/web/src/lib/commands/timeline/element/keyframes/upsert-keyframe.ts
@@ -1,95 +1,95 @@
-import { EditorCore } from "@/core";
-import { Command } from "@/lib/commands/base-command";
-import { resolveAnimationTarget, upsertPathKeyframe } from "@/lib/animation";
-import { updateElementInTracks } from "@/lib/timeline";
-import type { TimelineTrack } from "@/lib/timeline";
-import type {
-	AnimationPath,
-	AnimationInterpolation,
-	AnimationValue,
-} from "@/lib/animation/types";
-
-export class UpsertKeyframeCommand extends Command {
-	private savedState: TimelineTrack[] | null = null;
-	private readonly trackId: string;
-	private readonly elementId: string;
-	private readonly propertyPath: AnimationPath;
-	private readonly time: number;
-	private readonly value: AnimationValue;
-	private readonly interpolation: AnimationInterpolation | undefined;
-	private readonly keyframeId: string | undefined;
-
-	constructor({
-		trackId,
-		elementId,
-		propertyPath,
-		time,
-		value,
-		interpolation,
-		keyframeId,
-	}: {
-		trackId: string;
-		elementId: string;
-		propertyPath: AnimationPath;
-		time: number;
-		value: AnimationValue;
-		interpolation?: AnimationInterpolation;
-		keyframeId?: string;
-	}) {
-		super();
-		this.trackId = trackId;
-		this.elementId = elementId;
-		this.propertyPath = propertyPath;
-		this.time = time;
-		this.value = value;
-		this.interpolation = interpolation;
-		this.keyframeId = keyframeId;
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.timeline.getTracks();
-
-		const updatedTracks = updateElementInTracks({
-			tracks: this.savedState,
-			trackId: this.trackId,
-			elementId: this.elementId,
-			update: (element) => {
-				const target = resolveAnimationTarget({
-					element,
-					path: this.propertyPath,
-				});
-				if (!target) {
-					return element;
-				}
-
-				const boundedTime = Math.max(0, Math.min(this.time, element.duration));
-				return {
-					...element,
-					animations: upsertPathKeyframe({
-						animations: element.animations,
-						propertyPath: this.propertyPath,
-						time: boundedTime,
-						value: this.value,
-						interpolation: this.interpolation,
-						keyframeId: this.keyframeId,
-						valueKind: target.valueKind,
-						defaultInterpolation: target.defaultInterpolation,
-						numericRange: target.numericRange,
-					}),
-				};
-			},
-		});
-
-		editor.timeline.updateTracks(updatedTracks);
-	}
-
-	undo(): void {
-		if (!this.savedState) {
-			return;
-		}
-
-		const editor = EditorCore.getInstance();
-		editor.timeline.updateTracks(this.savedState);
-	}
-}
+import { EditorCore } from "@/core";

+import { Command } from "@/lib/commands/base-command";

+import { resolveAnimationTarget, upsertPathKeyframe } from "@/lib/animation";

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

+import type { TimelineTrack } from "@/lib/timeline";

+import type {

+	AnimationPath,

+	AnimationInterpolation,

+	AnimationValue,

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

+

+export class UpsertKeyframeCommand extends Command {

+	private savedState: TimelineTrack[] | null = null;

+	private readonly trackId: string;

+	private readonly elementId: string;

+	private readonly propertyPath: AnimationPath;

+	private readonly time: number;

+	private readonly value: AnimationValue;

+	private readonly interpolation: AnimationInterpolation | undefined;

+	private readonly keyframeId: string | undefined;

+

+	constructor({

+		trackId,

+		elementId,

+		propertyPath,

+		time,

+		value,

+		interpolation,

+		keyframeId,

+	}: {

+		trackId: string;

+		elementId: string;

+		propertyPath: AnimationPath;

+		time: number;

+		value: AnimationValue;

+		interpolation?: AnimationInterpolation;

+		keyframeId?: string;

+	}) {

+		super();

+		this.trackId = trackId;

+		this.elementId = elementId;

+		this.propertyPath = propertyPath;

+		this.time = time;

+		this.value = value;

+		this.interpolation = interpolation;

+		this.keyframeId = keyframeId;

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		this.savedState = editor.timeline.getTracks();

+

+		const updatedTracks = updateElementInTracks({

+			tracks: this.savedState,

+			trackId: this.trackId,

+			elementId: this.elementId,

+			update: (element) => {

+				const target = resolveAnimationTarget({

+					element,

+					path: this.propertyPath,

+				});

+				if (!target) {

+					return element;

+				}

+

+				const boundedTime = Math.max(0, Math.min(this.time, element.duration));

+				return {

+					...element,

+					animations: upsertPathKeyframe({

+						animations: element.animations,

+						propertyPath: this.propertyPath,

+						time: boundedTime,

+						value: this.value,

+						interpolation: this.interpolation,

+						keyframeId: this.keyframeId,

+						valueKind: target.valueKind,

+						defaultInterpolation: target.defaultInterpolation,

+						numericRange: target.numericRange,

+					}),

+				};

+			},

+		});

+

+		editor.timeline.updateTracks(updatedTracks);

+	}

+

+	undo(): void {

+		if (!this.savedState) {

+			return;

+		}

+

+		const editor = EditorCore.getInstance();

+		editor.timeline.updateTracks(this.savedState);

+	}

+}

diff --git a/apps/web/src/lib/commands/timeline/element/masks/index.ts b/apps/web/src/lib/commands/timeline/element/masks/index.ts
index acc47184..5ceec931 100644
--- a/apps/web/src/lib/commands/timeline/element/masks/index.ts
+++ b/apps/web/src/lib/commands/timeline/element/masks/index.ts
@@ -1,2 +1,2 @@
-export { RemoveMaskCommand } from "./remove-mask";
-export { ToggleMaskInvertedCommand } from "./toggle-mask-inverted";
+export { RemoveMaskCommand } from "./remove-mask";

+export { ToggleMaskInvertedCommand } from "./toggle-mask-inverted";

diff --git a/apps/web/src/lib/commands/timeline/element/masks/remove-mask.ts b/apps/web/src/lib/commands/timeline/element/masks/remove-mask.ts
index ee09cbdc..71c8b413 100644
--- a/apps/web/src/lib/commands/timeline/element/masks/remove-mask.ts
+++ b/apps/web/src/lib/commands/timeline/element/masks/remove-mask.ts
@@ -1,64 +1,64 @@
-import { EditorCore } from "@/core";
-import { Command } from "@/lib/commands/base-command";
-import { isMaskableElement, updateElementInTracks } from "@/lib/timeline";
-import type { TimelineTrack, MaskableElement } from "@/lib/timeline";
-
-function removeMaskFromElement({
-	element,
-	maskId,
-}: {
-	element: MaskableElement;
-	maskId: string;
-}): MaskableElement {
-	const currentMasks = element.masks ?? [];
-	const filteredMasks = currentMasks.filter((mask) => mask.id !== maskId);
-	return { ...element, masks: filteredMasks };
-}
-
-export class RemoveMaskCommand extends Command {
-	private savedState: TimelineTrack[] | null = null;
-	private readonly trackId: string;
-	private readonly elementId: string;
-	private readonly maskId: string;
-
-	constructor({
-		trackId,
-		elementId,
-		maskId,
-	}: {
-		trackId: string;
-		elementId: string;
-		maskId: string;
-	}) {
-		super();
-		this.trackId = trackId;
-		this.elementId = elementId;
-		this.maskId = maskId;
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.timeline.getTracks();
-
-		const updatedTracks = updateElementInTracks({
-			tracks: this.savedState,
-			trackId: this.trackId,
-			elementId: this.elementId,
-			elementPredicate: isMaskableElement,
-			update: (element) =>
-				removeMaskFromElement({
-					element: element as MaskableElement,
-					maskId: this.maskId,
-				}),
-		});
-
-		editor.timeline.updateTracks(updatedTracks);
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-}
+import { EditorCore } from "@/core";

+import { Command } from "@/lib/commands/base-command";

+import { isMaskableElement, updateElementInTracks } from "@/lib/timeline";

+import type { TimelineTrack, MaskableElement } from "@/lib/timeline";

+

+function removeMaskFromElement({

+	element,

+	maskId,

+}: {

+	element: MaskableElement;

+	maskId: string;

+}): MaskableElement {

+	const currentMasks = element.masks ?? [];

+	const filteredMasks = currentMasks.filter((mask) => mask.id !== maskId);

+	return { ...element, masks: filteredMasks };

+}

+

+export class RemoveMaskCommand extends Command {

+	private savedState: TimelineTrack[] | null = null;

+	private readonly trackId: string;

+	private readonly elementId: string;

+	private readonly maskId: string;

+

+	constructor({

+		trackId,

+		elementId,

+		maskId,

+	}: {

+		trackId: string;

+		elementId: string;

+		maskId: string;

+	}) {

+		super();

+		this.trackId = trackId;

+		this.elementId = elementId;

+		this.maskId = maskId;

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		this.savedState = editor.timeline.getTracks();

+

+		const updatedTracks = updateElementInTracks({

+			tracks: this.savedState,

+			trackId: this.trackId,

+			elementId: this.elementId,

+			elementPredicate: isMaskableElement,

+			update: (element) =>

+				removeMaskFromElement({

+					element: element as MaskableElement,

+					maskId: this.maskId,

+				}),

+		});

+

+		editor.timeline.updateTracks(updatedTracks);

+	}

+

+	undo(): void {

+		if (this.savedState) {

+			const editor = EditorCore.getInstance();

+			editor.timeline.updateTracks(this.savedState);

+		}

+	}

+}

diff --git a/apps/web/src/lib/commands/timeline/element/masks/toggle-mask-inverted.ts b/apps/web/src/lib/commands/timeline/element/masks/toggle-mask-inverted.ts
index ac3c8c7c..cfa02842 100644
--- a/apps/web/src/lib/commands/timeline/element/masks/toggle-mask-inverted.ts
+++ b/apps/web/src/lib/commands/timeline/element/masks/toggle-mask-inverted.ts
@@ -1,75 +1,75 @@
-import { EditorCore } from "@/core";
-import { Command } from "@/lib/commands/base-command";
-import { isMaskableElement, updateElementInTracks } from "@/lib/timeline";
-import type { Mask } from "@/lib/masks/types";
-import type { TimelineTrack, MaskableElement } from "@/lib/timeline";
-
-export function toggleMaskInvertedOnElement({
-	element,
-	maskId,
-}: {
-	element: MaskableElement;
-	maskId: string;
-}): MaskableElement {
-	const currentMasks = element.masks ?? [];
-	const toggleMask = <TMask extends Mask>(mask: TMask): TMask => ({
-		...mask,
-		params: {
-			...mask.params,
-			inverted: !mask.params.inverted,
-		},
-	});
-	const updatedMasks = currentMasks.map((mask) =>
-		mask.id !== maskId ? mask : toggleMask(mask),
-	);
-
-	return { ...element, masks: updatedMasks };
-}
-
-export class ToggleMaskInvertedCommand extends Command {
-	private savedState: TimelineTrack[] | null = null;
-	private readonly trackId: string;
-	private readonly elementId: string;
-	private readonly maskId: string;
-
-	constructor({
-		trackId,
-		elementId,
-		maskId,
-	}: {
-		trackId: string;
-		elementId: string;
-		maskId: string;
-	}) {
-		super();
-		this.trackId = trackId;
-		this.elementId = elementId;
-		this.maskId = maskId;
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.timeline.getTracks();
-
-		const updatedTracks = updateElementInTracks({
-			tracks: this.savedState,
-			trackId: this.trackId,
-			elementId: this.elementId,
-			elementPredicate: isMaskableElement,
-			update: (element) =>
-				toggleMaskInvertedOnElement({
-					element: element as MaskableElement,
-					maskId: this.maskId,
-				}),
-		});
-
-		editor.timeline.updateTracks(updatedTracks);
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-}
+import { EditorCore } from "@/core";

+import { Command } from "@/lib/commands/base-command";

+import { isMaskableElement, updateElementInTracks } from "@/lib/timeline";

+import type { Mask } from "@/lib/masks/types";

+import type { TimelineTrack, MaskableElement } from "@/lib/timeline";

+

+export function toggleMaskInvertedOnElement({

+	element,

+	maskId,

+}: {

+	element: MaskableElement;

+	maskId: string;

+}): MaskableElement {

+	const currentMasks = element.masks ?? [];

+	const toggleMask = <TMask extends Mask>(mask: TMask): TMask => ({

+		...mask,

+		params: {

+			...mask.params,

+			inverted: !mask.params.inverted,

+		},

+	});

+	const updatedMasks = currentMasks.map((mask) =>

+		mask.id !== maskId ? mask : toggleMask(mask),

+	);

+

+	return { ...element, masks: updatedMasks };

+}

+

+export class ToggleMaskInvertedCommand extends Command {

+	private savedState: TimelineTrack[] | null = null;

+	private readonly trackId: string;

+	private readonly elementId: string;

+	private readonly maskId: string;

+

+	constructor({

+		trackId,

+		elementId,

+		maskId,

+	}: {

+		trackId: string;

+		elementId: string;

+		maskId: string;

+	}) {

+		super();

+		this.trackId = trackId;

+		this.elementId = elementId;

+		this.maskId = maskId;

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		this.savedState = editor.timeline.getTracks();

+

+		const updatedTracks = updateElementInTracks({

+			tracks: this.savedState,

+			trackId: this.trackId,

+			elementId: this.elementId,

+			elementPredicate: isMaskableElement,

+			update: (element) =>

+				toggleMaskInvertedOnElement({

+					element: element as MaskableElement,

+					maskId: this.maskId,

+				}),

+		});

+

+		editor.timeline.updateTracks(updatedTracks);

+	}

+

+	undo(): void {

+		if (this.savedState) {

+			const editor = EditorCore.getInstance();

+			editor.timeline.updateTracks(this.savedState);

+		}

+	}

+}

diff --git a/apps/web/src/lib/commands/timeline/element/move-elements.ts b/apps/web/src/lib/commands/timeline/element/move-elements.ts
index a36e8e93..24605d0b 100644
--- a/apps/web/src/lib/commands/timeline/element/move-elements.ts
+++ b/apps/web/src/lib/commands/timeline/element/move-elements.ts
@@ -1,161 +1,161 @@
-import { Command } from "@/lib/commands/base-command";
-import { EditorCore } from "@/core";
-import type {
-	TimelineTrack,
-	TimelineElement,
-	TrackType,
-} from "@/lib/timeline";
-import {
-	buildEmptyTrack,
-	isMainTrack,
-	validateElementTrackCompatibility,
-	enforceMainTrackStart,
-} from "@/lib/timeline/track-utils";
-import { rippleShiftElements } from "@/lib/timeline/ripple-utils";
-
-export class MoveElementCommand extends Command {
-	private savedState: TimelineTrack[] | null = null;
-	private readonly sourceTrackId: string;
-	private readonly targetTrackId: string;
-	private readonly elementId: string;
-	private readonly newStartTime: number;
-	private readonly createTrack: { type: TrackType; index: number } | undefined;
-	private readonly rippleEnabled: boolean;
-
-	constructor({
-		sourceTrackId,
-		targetTrackId,
-		elementId,
-		newStartTime,
-		createTrack,
-		rippleEnabled = false,
-	}: {
-		sourceTrackId: string;
-		targetTrackId: string;
-		elementId: string;
-		newStartTime: number;
-		createTrack?: { type: TrackType; index: number };
-		rippleEnabled?: boolean;
-	}) {
-		super();
-		this.sourceTrackId = sourceTrackId;
-		this.targetTrackId = targetTrackId;
-		this.elementId = elementId;
-		this.newStartTime = newStartTime;
-		this.createTrack = createTrack;
-		this.rippleEnabled = rippleEnabled;
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.timeline.getTracks();
-
-		const sourceTrack = this.savedState.find(
-			(track) => track.id === this.sourceTrackId,
-		);
-		const element = sourceTrack?.elements.find(
-			(trackElement) => trackElement.id === this.elementId,
-		);
-
-		if (!sourceTrack || !element) {
-			throw new Error("Source track or element not found");
-		}
-
-		let targetTrack = this.savedState.find((track) => track.id === this.targetTrackId);
-		let tracksToUpdate = this.savedState;
-		if (!targetTrack && this.createTrack) {
-			const newTrack = buildEmptyTrack({
-				id: this.targetTrackId,
-				type: this.createTrack.type,
-			});
-			tracksToUpdate = [...this.savedState];
-			tracksToUpdate.splice(this.createTrack.index, 0, newTrack);
-			targetTrack = newTrack;
-		}
-		if (!targetTrack) {
-			throw new Error("Target track not found");
-		}
-
-		const validation = validateElementTrackCompatibility({
-			element,
-			track: targetTrack,
-		});
-
-		if (!validation.isValid) {
-			throw new Error(validation.errorMessage);
-		}
-
-		const adjustedStartTime = enforceMainTrackStart({
-			tracks: tracksToUpdate,
-			targetTrackId: this.targetTrackId,
-			requestedStartTime: this.newStartTime,
-			excludeElementId: this.elementId,
-		});
-
-		// keyframe times remain clip-local, so moving only changes element startTime.
-		const movedElement: TimelineElement = {
-			...element,
-			startTime: adjustedStartTime,
-		};
-
-		const isSameTrack = this.sourceTrackId === this.targetTrackId;
-
-		let updatedTracks = tracksToUpdate.map((track): TimelineTrack => {
-			if (isSameTrack && track.id === this.sourceTrackId) {
-				return {
-					...track,
-					elements: track.elements.map((trackElement) =>
-						trackElement.id === this.elementId ? movedElement : trackElement,
-					),
-				} as typeof track;
-			}
-
-			if (track.id === this.sourceTrackId) {
-				const remainingElements = track.elements.filter(
-					(trackElement) => trackElement.id !== this.elementId,
-				);
-				const shiftedElements = this.rippleEnabled
-					? rippleShiftElements({
-							elements: remainingElements,
-							afterTime: element.startTime,
-							shiftAmount: element.duration,
-						})
-					: remainingElements;
-				return { ...track, elements: shiftedElements } as typeof track;
-			}
-
-			if (track.id === this.targetTrackId) {
-				return {
-					...track,
-					elements: [...track.elements, movedElement],
-				} as typeof track;
-			}
-
-			return track;
-		});
-
-		if (!isSameTrack) {
-			const sourceTrackAfterMove = updatedTracks.find(
-				(track) => track.id === this.sourceTrackId,
-			);
-			if (
-				sourceTrackAfterMove &&
-				sourceTrackAfterMove.elements.length === 0 &&
-				!isMainTrack(sourceTrackAfterMove)
-			) {
-				updatedTracks = updatedTracks.filter(
-					(track) => track.id !== this.sourceTrackId,
-				);
-			}
-		}
-
-		editor.timeline.updateTracks(updatedTracks);
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-}
+import { Command } from "@/lib/commands/base-command";

+import { EditorCore } from "@/core";

+import type {

+	TimelineTrack,

+	TimelineElement,

+	TrackType,

+} from "@/lib/timeline";

+import {

+	buildEmptyTrack,

+	isMainTrack,

+	validateElementTrackCompatibility,

+	enforceMainTrackStart,

+} from "@/lib/timeline/track-utils";

+import { rippleShiftElements } from "@/lib/timeline/ripple-utils";

+

+export class MoveElementCommand extends Command {

+	private savedState: TimelineTrack[] | null = null;

+	private readonly sourceTrackId: string;

+	private readonly targetTrackId: string;

+	private readonly elementId: string;

+	private readonly newStartTime: number;

+	private readonly createTrack: { type: TrackType; index: number } | undefined;

+	private readonly rippleEnabled: boolean;

+

+	constructor({

+		sourceTrackId,

+		targetTrackId,

+		elementId,

+		newStartTime,

+		createTrack,

+		rippleEnabled = false,

+	}: {

+		sourceTrackId: string;

+		targetTrackId: string;

+		elementId: string;

+		newStartTime: number;

+		createTrack?: { type: TrackType; index: number };

+		rippleEnabled?: boolean;

+	}) {

+		super();

+		this.sourceTrackId = sourceTrackId;

+		this.targetTrackId = targetTrackId;

+		this.elementId = elementId;

+		this.newStartTime = newStartTime;

+		this.createTrack = createTrack;

+		this.rippleEnabled = rippleEnabled;

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		this.savedState = editor.timeline.getTracks();

+

+		const sourceTrack = this.savedState.find(

+			(track) => track.id === this.sourceTrackId,

+		);

+		const element = sourceTrack?.elements.find(

+			(trackElement) => trackElement.id === this.elementId,

+		);

+

+		if (!sourceTrack || !element) {

+			throw new Error("Source track or element not found");

+		}

+

+		let targetTrack = this.savedState.find((track) => track.id === this.targetTrackId);

+		let tracksToUpdate = this.savedState;

+		if (!targetTrack && this.createTrack) {

+			const newTrack = buildEmptyTrack({

+				id: this.targetTrackId,

+				type: this.createTrack.type,

+			});

+			tracksToUpdate = [...this.savedState];

+			tracksToUpdate.splice(this.createTrack.index, 0, newTrack);

+			targetTrack = newTrack;

+		}

+		if (!targetTrack) {

+			throw new Error("Target track not found");

+		}

+

+		const validation = validateElementTrackCompatibility({

+			element,

+			track: targetTrack,

+		});

+

+		if (!validation.isValid) {

+			throw new Error(validation.errorMessage);

+		}

+

+		const adjustedStartTime = enforceMainTrackStart({

+			tracks: tracksToUpdate,

+			targetTrackId: this.targetTrackId,

+			requestedStartTime: this.newStartTime,

+			excludeElementId: this.elementId,

+		});

+

+		// keyframe times remain clip-local, so moving only changes element startTime.

+		const movedElement: TimelineElement = {

+			...element,

+			startTime: adjustedStartTime,

+		};

+

+		const isSameTrack = this.sourceTrackId === this.targetTrackId;

+

+		let updatedTracks = tracksToUpdate.map((track): TimelineTrack => {

+			if (isSameTrack && track.id === this.sourceTrackId) {

+				return {

+					...track,

+					elements: track.elements.map((trackElement) =>

+						trackElement.id === this.elementId ? movedElement : trackElement,

+					),

+				} as typeof track;

+			}

+

+			if (track.id === this.sourceTrackId) {

+				const remainingElements = track.elements.filter(

+					(trackElement) => trackElement.id !== this.elementId,

+				);

+				const shiftedElements = this.rippleEnabled

+					? rippleShiftElements({

+							elements: remainingElements,

+							afterTime: element.startTime,

+							shiftAmount: element.duration,

+						})

+					: remainingElements;

+				return { ...track, elements: shiftedElements } as typeof track;

+			}

+

+			if (track.id === this.targetTrackId) {

+				return {

+					...track,

+					elements: [...track.elements, movedElement],

+				} as typeof track;

+			}

+

+			return track;

+		});

+

+		if (!isSameTrack) {

+			const sourceTrackAfterMove = updatedTracks.find(

+				(track) => track.id === this.sourceTrackId,

+			);

+			if (

+				sourceTrackAfterMove &&

+				sourceTrackAfterMove.elements.length === 0 &&

+				!isMainTrack(sourceTrackAfterMove)

+			) {

+				updatedTracks = updatedTracks.filter(

+					(track) => track.id !== this.sourceTrackId,

+				);

+			}

+		}

+

+		editor.timeline.updateTracks(updatedTracks);

+	}

+

+	undo(): void {

+		if (this.savedState) {

+			const editor = EditorCore.getInstance();

+			editor.timeline.updateTracks(this.savedState);

+		}

+	}

+}

diff --git a/apps/web/src/lib/commands/timeline/element/retime/index.ts b/apps/web/src/lib/commands/timeline/element/retime/index.ts
index 5daa59bf..e9c24c44 100644
--- a/apps/web/src/lib/commands/timeline/element/retime/index.ts
+++ b/apps/web/src/lib/commands/timeline/element/retime/index.ts
@@ -1 +1 @@
-export { UpdateElementRetimeCommand } from "./update-element-retime";
+export { UpdateElementRetimeCommand } from "./update-element-retime";

diff --git a/apps/web/src/lib/commands/timeline/element/retime/update-element-retime.ts b/apps/web/src/lib/commands/timeline/element/retime/update-element-retime.ts
index d1f859e6..4057ec41 100644
--- a/apps/web/src/lib/commands/timeline/element/retime/update-element-retime.ts
+++ b/apps/web/src/lib/commands/timeline/element/retime/update-element-retime.ts
@@ -1,114 +1,114 @@
-import { EditorCore } from "@/core";
-import { clampRetimeRate } from "@/constants/retime-constants";
-import { clampAnimationsToDuration } from "@/lib/animation";
-import { Command } from "@/lib/commands/base-command";
-import { getTimelineDurationForSourceSpan, getSourceSpanAtClipTime } from "@/lib/retime";
-import { isRetimableElement, updateElementInTracks } from "@/lib/timeline";
-import type { RetimeConfig, TimelineTrack } from "@/lib/timeline";
-
-function getSourceDuration({
-	trimStart,
-	trimEnd,
-	duration,
-	sourceDuration,
-	retime,
-}: {
-	trimStart: number;
-	trimEnd: number;
-	duration: number;
-	sourceDuration?: number;
-	retime?: RetimeConfig;
-}): number {
-	if (typeof sourceDuration === "number") {
-		return sourceDuration;
-	}
-
-	return (
-		trimStart +
-		getSourceSpanAtClipTime({
-			clipTime: duration,
-			retime,
-		}) +
-		trimEnd
-	);
-}
-
-export class UpdateElementRetimeCommand extends Command {
-	private savedState: TimelineTrack[] | null = null;
-	private readonly trackId: string;
-	private readonly elementId: string;
-	private readonly retime: RetimeConfig | undefined;
-
-	constructor({
-		trackId,
-		elementId,
-		retime,
-	}: {
-		trackId: string;
-		elementId: string;
-		retime?: RetimeConfig;
-	}) {
-		super();
-		this.trackId = trackId;
-		this.elementId = elementId;
-		this.retime = retime;
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.timeline.getTracks();
-
-		const updatedTracks = updateElementInTracks({
-			tracks: this.savedState,
-			trackId: this.trackId,
-			elementId: this.elementId,
-			elementPredicate: isRetimableElement,
-			update: (element) => {
-				if (!isRetimableElement(element)) {
-					return element;
-				}
-
-				const nextRetime = this.retime
-					? {
-							...this.retime,
-							rate: clampRetimeRate({ rate: this.retime.rate }),
-						}
-					: undefined;
-				const sourceDuration = getSourceDuration({
-					trimStart: element.trimStart,
-					trimEnd: element.trimEnd,
-					duration: element.duration,
-					sourceDuration: element.sourceDuration,
-					retime: element.retime,
-				});
-				const visibleSourceSpan = Math.max(
-					0,
-					sourceDuration - element.trimStart - element.trimEnd,
-				);
-				const nextDuration = getTimelineDurationForSourceSpan({
-					sourceSpan: visibleSourceSpan,
-					retime: nextRetime,
-				});
-
-				return {
-					...element,
-					retime: nextRetime,
-					duration: nextDuration,
-					animations: clampAnimationsToDuration({
-						animations: element.animations,
-						duration: nextDuration,
-					}),
-				};
-			},
-		});
-
-		editor.timeline.updateTracks(updatedTracks);
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-}
+import { EditorCore } from "@/core";

+import { clampRetimeRate } from "@/constants/retime-constants";

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

+import { Command } from "@/lib/commands/base-command";

+import { getTimelineDurationForSourceSpan, getSourceSpanAtClipTime } from "@/lib/retime";

+import { isRetimableElement, updateElementInTracks } from "@/lib/timeline";

+import type { RetimeConfig, TimelineTrack } from "@/lib/timeline";

+

+function getSourceDuration({

+	trimStart,

+	trimEnd,

+	duration,

+	sourceDuration,

+	retime,

+}: {

+	trimStart: number;

+	trimEnd: number;

+	duration: number;

+	sourceDuration?: number;

+	retime?: RetimeConfig;

+}): number {

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

+		return sourceDuration;

+	}

+

+	return (

+		trimStart +

+		getSourceSpanAtClipTime({

+			clipTime: duration,

+			retime,

+		}) +

+		trimEnd

+	);

+}

+

+export class UpdateElementRetimeCommand extends Command {

+	private savedState: TimelineTrack[] | null = null;

+	private readonly trackId: string;

+	private readonly elementId: string;

+	private readonly retime: RetimeConfig | undefined;

+

+	constructor({

+		trackId,

+		elementId,

+		retime,

+	}: {

+		trackId: string;

+		elementId: string;

+		retime?: RetimeConfig;

+	}) {

+		super();

+		this.trackId = trackId;

+		this.elementId = elementId;

+		this.retime = retime;

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		this.savedState = editor.timeline.getTracks();

+

+		const updatedTracks = updateElementInTracks({

+			tracks: this.savedState,

+			trackId: this.trackId,

+			elementId: this.elementId,

+			elementPredicate: isRetimableElement,

+			update: (element) => {

+				if (!isRetimableElement(element)) {

+					return element;

+				}

+

+				const nextRetime = this.retime

+					? {

+							...this.retime,

+							rate: clampRetimeRate({ rate: this.retime.rate }),

+						}

+					: undefined;

+				const sourceDuration = getSourceDuration({

+					trimStart: element.trimStart,

+					trimEnd: element.trimEnd,

+					duration: element.duration,

+					sourceDuration: element.sourceDuration,

+					retime: element.retime,

+				});

+				const visibleSourceSpan = Math.max(

+					0,

+					sourceDuration - element.trimStart - element.trimEnd,

+				);

+				const nextDuration = getTimelineDurationForSourceSpan({

+					sourceSpan: visibleSourceSpan,

+					retime: nextRetime,

+				});

+

+				return {

+					...element,

+					retime: nextRetime,

+					duration: nextDuration,

+					animations: clampAnimationsToDuration({

+						animations: element.animations,

+						duration: nextDuration,

+					}),

+				};

+			},

+		});

+

+		editor.timeline.updateTracks(updatedTracks);

+	}

+

+	undo(): void {

+		if (this.savedState) {

+			const editor = EditorCore.getInstance();

+			editor.timeline.updateTracks(this.savedState);

+		}

+	}

+}

diff --git a/apps/web/src/lib/commands/timeline/element/toggle-elements-muted.ts b/apps/web/src/lib/commands/timeline/element/toggle-elements-muted.ts
index f416e7c5..30310806 100644
--- a/apps/web/src/lib/commands/timeline/element/toggle-elements-muted.ts
+++ b/apps/web/src/lib/commands/timeline/element/toggle-elements-muted.ts
@@ -1,57 +1,57 @@
-import { Command } from "@/lib/commands/base-command";
-import type { TimelineTrack } from "@/lib/timeline";
-import { canElementHaveAudio } from "@/lib/timeline/element-utils";
-import { EditorCore } from "@/core";
-
-export class ToggleElementsMutedCommand extends Command {
-	private savedState: TimelineTrack[] | null = null;
-
-	constructor(private elements: { trackId: string; elementId: string }[]) {
-		super();
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.timeline.getTracks();
-
-		const mutableElements = this.elements.filter(({ trackId, elementId }) => {
-			const track = this.savedState?.find((t) => t.id === trackId);
-			const element = track?.elements.find((e) => e.id === elementId);
-			return element && canElementHaveAudio(element);
-		});
-
-		if (mutableElements.length === 0) {
-			return;
-		}
-
-		const shouldMute = mutableElements.some(({ trackId, elementId }) => {
-			const track = this.savedState?.find((t) => t.id === trackId);
-			const element = track?.elements.find((e) => e.id === elementId);
-			return element && canElementHaveAudio(element) && !element.muted;
-		});
-
-		const updatedTracks = this.savedState.map((track) => {
-			const newElements = track.elements.map((element) => {
-				const shouldUpdate = mutableElements.some(
-					({ trackId, elementId }) =>
-						track.id === trackId && element.id === elementId,
-				);
-				return shouldUpdate &&
-					canElementHaveAudio(element) &&
-					element.muted !== shouldMute
-					? { ...element, muted: shouldMute }
-					: element;
-			});
-			return { ...track, elements: newElements } as typeof track;
-		});
-
-		editor.timeline.updateTracks(updatedTracks);
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-}
+import { Command } from "@/lib/commands/base-command";

+import type { TimelineTrack } from "@/lib/timeline";

+import { canElementHaveAudio } from "@/lib/timeline/element-utils";

+import { EditorCore } from "@/core";

+

+export class ToggleElementsMutedCommand extends Command {

+	private savedState: TimelineTrack[] | null = null;

+

+	constructor(private elements: { trackId: string; elementId: string }[]) {

+		super();

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		this.savedState = editor.timeline.getTracks();

+

+		const mutableElements = this.elements.filter(({ trackId, elementId }) => {

+			const track = this.savedState?.find((t) => t.id === trackId);

+			const element = track?.elements.find((e) => e.id === elementId);

+			return element && canElementHaveAudio(element);

+		});

+

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

+			return;

+		}

+

+		const shouldMute = mutableElements.some(({ trackId, elementId }) => {

+			const track = this.savedState?.find((t) => t.id === trackId);

+			const element = track?.elements.find((e) => e.id === elementId);

+			return element && canElementHaveAudio(element) && !element.muted;

+		});

+

+		const updatedTracks = this.savedState.map((track) => {

+			const newElements = track.elements.map((element) => {

+				const shouldUpdate = mutableElements.some(

+					({ trackId, elementId }) =>

+						track.id === trackId && element.id === elementId,

+				);

+				return shouldUpdate &&

+					canElementHaveAudio(element) &&

+					element.muted !== shouldMute

+					? { ...element, muted: shouldMute }

+					: element;

+			});

+			return { ...track, elements: newElements } as typeof track;

+		});

+

+		editor.timeline.updateTracks(updatedTracks);

+	}

+

+	undo(): void {

+		if (this.savedState) {

+			const editor = EditorCore.getInstance();

+			editor.timeline.updateTracks(this.savedState);

+		}

+	}

+}

diff --git a/apps/web/src/lib/commands/timeline/element/toggle-elements-visibility.ts b/apps/web/src/lib/commands/timeline/element/toggle-elements-visibility.ts
index 24d51c15..690f61aa 100644
--- a/apps/web/src/lib/commands/timeline/element/toggle-elements-visibility.ts
+++ b/apps/web/src/lib/commands/timeline/element/toggle-elements-visibility.ts
@@ -1,47 +1,47 @@
-import { Command } from "@/lib/commands/base-command";
-import type { TimelineTrack } from "@/lib/timeline";
-import { canElementBeHidden } from "@/lib/timeline/element-utils";
-import { EditorCore } from "@/core";
-
-export class ToggleElementsVisibilityCommand extends Command {
-	private savedState: TimelineTrack[] | null = null;
-
-	constructor(private elements: { trackId: string; elementId: string }[]) {
-		super();
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.timeline.getTracks();
-
-		const shouldHide = this.elements.some(({ trackId, elementId }) => {
-			const track = this.savedState?.find((t) => t.id === trackId);
-			const element = track?.elements.find((e) => e.id === elementId);
-			return element && canElementBeHidden(element) && !element.hidden;
-		});
-
-		const updatedTracks = this.savedState.map((track) => {
-			const newElements = track.elements.map((element) => {
-				const shouldUpdate = this.elements.some(
-					({ trackId, elementId }) =>
-						track.id === trackId && element.id === elementId,
-				);
-				return shouldUpdate &&
-					canElementBeHidden(element) &&
-					element.hidden !== shouldHide
-					? { ...element, hidden: shouldHide }
-					: element;
-			});
-			return { ...track, elements: newElements } as typeof track;
-		});
-
-		editor.timeline.updateTracks(updatedTracks);
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-}
+import { Command } from "@/lib/commands/base-command";

+import type { TimelineTrack } from "@/lib/timeline";

+import { canElementBeHidden } from "@/lib/timeline/element-utils";

+import { EditorCore } from "@/core";

+

+export class ToggleElementsVisibilityCommand extends Command {

+	private savedState: TimelineTrack[] | null = null;

+

+	constructor(private elements: { trackId: string; elementId: string }[]) {

+		super();

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		this.savedState = editor.timeline.getTracks();

+

+		const shouldHide = this.elements.some(({ trackId, elementId }) => {

+			const track = this.savedState?.find((t) => t.id === trackId);

+			const element = track?.elements.find((e) => e.id === elementId);

+			return element && canElementBeHidden(element) && !element.hidden;

+		});

+

+		const updatedTracks = this.savedState.map((track) => {

+			const newElements = track.elements.map((element) => {

+				const shouldUpdate = this.elements.some(

+					({ trackId, elementId }) =>

+						track.id === trackId && element.id === elementId,

+				);

+				return shouldUpdate &&

+					canElementBeHidden(element) &&

+					element.hidden !== shouldHide

+					? { ...element, hidden: shouldHide }

+					: element;

+			});

+			return { ...track, elements: newElements } as typeof track;

+		});

+

+		editor.timeline.updateTracks(updatedTracks);

+	}

+

+	undo(): void {

+		if (this.savedState) {

+			const editor = EditorCore.getInstance();

+			editor.timeline.updateTracks(this.savedState);

+		}

+	}

+}

diff --git a/apps/web/src/lib/commands/timeline/element/update-element-duration.ts b/apps/web/src/lib/commands/timeline/element/update-element-duration.ts
index d88cf9cb..4280dd4d 100644
--- a/apps/web/src/lib/commands/timeline/element/update-element-duration.ts
+++ b/apps/web/src/lib/commands/timeline/element/update-element-duration.ts
@@ -1,57 +1,57 @@
-import { Command } from "@/lib/commands/base-command";
-import type { TimelineTrack } from "@/lib/timeline";
-import { EditorCore } from "@/core";
-import { clampAnimationsToDuration } from "@/lib/animation";
-
-export class UpdateElementDurationCommand extends Command {
-	private savedState: TimelineTrack[] | null = null;
-	private readonly trackId: string;
-	private readonly elementId: string;
-	private readonly duration: number;
-
-	constructor({
-		trackId,
-		elementId,
-		duration,
-	}: {
-		trackId: string;
-		elementId: string;
-		duration: number;
-	}) {
-		super();
-		this.trackId = trackId;
-		this.elementId = elementId;
-		this.duration = duration;
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.timeline.getTracks();
-
-		const updatedTracks = this.savedState.map((track) => {
-			if (track.id !== this.trackId) return track;
-			const newElements = track.elements.map((element) =>
-				element.id === this.elementId
-					? {
-							...element,
-							duration: this.duration,
-							animations: clampAnimationsToDuration({
-								animations: element.animations,
-								duration: this.duration,
-							}),
-						}
-					: element,
-			);
-			return { ...track, elements: newElements } as typeof track;
-		});
-
-		editor.timeline.updateTracks(updatedTracks);
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-}
+import { Command } from "@/lib/commands/base-command";

+import type { TimelineTrack } from "@/lib/timeline";

+import { EditorCore } from "@/core";

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

+

+export class UpdateElementDurationCommand extends Command {

+	private savedState: TimelineTrack[] | null = null;

+	private readonly trackId: string;

+	private readonly elementId: string;

+	private readonly duration: number;

+

+	constructor({

+		trackId,

+		elementId,

+		duration,

+	}: {

+		trackId: string;

+		elementId: string;

+		duration: number;

+	}) {

+		super();

+		this.trackId = trackId;

+		this.elementId = elementId;

+		this.duration = duration;

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		this.savedState = editor.timeline.getTracks();

+

+		const updatedTracks = this.savedState.map((track) => {

+			if (track.id !== this.trackId) return track;

+			const newElements = track.elements.map((element) =>

+				element.id === this.elementId

+					? {

+							...element,

+							duration: this.duration,

+							animations: clampAnimationsToDuration({

+								animations: element.animations,

+								duration: this.duration,

+							}),

+						}

+					: element,

+			);

+			return { ...track, elements: newElements } as typeof track;

+		});

+

+		editor.timeline.updateTracks(updatedTracks);

+	}

+

+	undo(): void {

+		if (this.savedState) {

+			const editor = EditorCore.getInstance();

+			editor.timeline.updateTracks(this.savedState);

+		}

+	}

+}

diff --git a/apps/web/src/lib/commands/timeline/element/update-element-start-time.ts b/apps/web/src/lib/commands/timeline/element/update-element-start-time.ts
index 75773ec2..d640d001 100644
--- a/apps/web/src/lib/commands/timeline/element/update-element-start-time.ts
+++ b/apps/web/src/lib/commands/timeline/element/update-element-start-time.ts
@@ -1,69 +1,69 @@
-import { Command } from "@/lib/commands/base-command";
-import type { TimelineTrack } from "@/lib/timeline";
-import { EditorCore } from "@/core";
-import { enforceMainTrackStart } from "@/lib/timeline/track-utils";
-
-export class UpdateElementStartTimeCommand extends Command {
-	private savedState: TimelineTrack[] | null = null;
-	private readonly elements: { trackId: string; elementId: string }[];
-	private readonly startTime: number;
-
-	constructor({
-		elements,
-		startTime,
-	}: {
-		elements: { trackId: string; elementId: string }[];
-		startTime: number;
-	}) {
-		super();
-		this.elements = elements;
-		this.startTime = startTime;
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.timeline.getTracks();
-
-		const currentTracks = this.savedState;
-		const updatedTracks = currentTracks.map((track) => {
-			const hasElementsToUpdate = this.elements.some(
-				(elementEntry) => elementEntry.trackId === track.id,
-			);
-
-			if (!hasElementsToUpdate) {
-				return track;
-			}
-
-			const newElements = track.elements.map((element) => {
-				const shouldUpdate = this.elements.some(
-					(elementEntry) =>
-						elementEntry.elementId === element.id &&
-						elementEntry.trackId === track.id,
-				);
-				if (!shouldUpdate) {
-					return element;
-				}
-
-				const baseStartTime = Math.max(0, this.startTime);
-				const adjustedStartTime = enforceMainTrackStart({
-					tracks: currentTracks,
-					targetTrackId: track.id,
-					requestedStartTime: baseStartTime,
-					excludeElementId: element.id,
-				});
-
-				return { ...element, startTime: adjustedStartTime };
-			});
-			return { ...track, elements: newElements } as typeof track;
-		});
-
-		editor.timeline.updateTracks(updatedTracks);
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-}
+import { Command } from "@/lib/commands/base-command";

+import type { TimelineTrack } from "@/lib/timeline";

+import { EditorCore } from "@/core";

+import { enforceMainTrackStart } from "@/lib/timeline/track-utils";

+

+export class UpdateElementStartTimeCommand extends Command {

+	private savedState: TimelineTrack[] | null = null;

+	private readonly elements: { trackId: string; elementId: string }[];

+	private readonly startTime: number;

+

+	constructor({

+		elements,

+		startTime,

+	}: {

+		elements: { trackId: string; elementId: string }[];

+		startTime: number;

+	}) {

+		super();

+		this.elements = elements;

+		this.startTime = startTime;

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		this.savedState = editor.timeline.getTracks();

+

+		const currentTracks = this.savedState;

+		const updatedTracks = currentTracks.map((track) => {

+			const hasElementsToUpdate = this.elements.some(

+				(elementEntry) => elementEntry.trackId === track.id,

+			);

+

+			if (!hasElementsToUpdate) {

+				return track;

+			}

+

+			const newElements = track.elements.map((element) => {

+				const shouldUpdate = this.elements.some(

+					(elementEntry) =>

+						elementEntry.elementId === element.id &&

+						elementEntry.trackId === track.id,

+				);

+				if (!shouldUpdate) {

+					return element;

+				}

+

+				const baseStartTime = Math.max(0, this.startTime);

+				const adjustedStartTime = enforceMainTrackStart({

+					tracks: currentTracks,

+					targetTrackId: track.id,

+					requestedStartTime: baseStartTime,

+					excludeElementId: element.id,

+				});

+

+				return { ...element, startTime: adjustedStartTime };

+			});

+			return { ...track, elements: newElements } as typeof track;

+		});

+

+		editor.timeline.updateTracks(updatedTracks);

+	}

+

+	undo(): void {

+		if (this.savedState) {

+			const editor = EditorCore.getInstance();

+			editor.timeline.updateTracks(this.savedState);

+		}

+	}

+}

diff --git a/apps/web/src/lib/commands/timeline/element/update-element.ts b/apps/web/src/lib/commands/timeline/element/update-element.ts
index cf0c5cbc..494fa1f6 100644
--- a/apps/web/src/lib/commands/timeline/element/update-element.ts
+++ b/apps/web/src/lib/commands/timeline/element/update-element.ts
@@ -1,47 +1,47 @@
-import { Command } from "@/lib/commands/base-command";
-import type { TimelineElement, TimelineTrack } from "@/lib/timeline";
-import { EditorCore } from "@/core";
-import { updateElementInTracks } from "@/lib/timeline";
-
-export class UpdateElementCommand extends Command {
-	private savedState: TimelineTrack[] | null = null;
-	private readonly trackId: string;
-	private readonly elementId: string;
-	private readonly updates: Partial<TimelineElement>;
-
-	constructor({
-		trackId,
-		elementId,
-		updates,
-	}: {
-		trackId: string;
-		elementId: string;
-		updates: Partial<TimelineElement>;
-	}) {
-		super();
-		this.trackId = trackId;
-		this.elementId = elementId;
-		this.updates = updates;
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.timeline.getTracks();
-
-		const updatedTracks = updateElementInTracks({
-			tracks: this.savedState,
-			trackId: this.trackId,
-			elementId: this.elementId,
-			update: (element) => ({ ...element, ...this.updates }) as TimelineElement,
-		});
-
-		editor.timeline.updateTracks(updatedTracks);
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-}
+import { Command } from "@/lib/commands/base-command";

+import type { TimelineElement, TimelineTrack } from "@/lib/timeline";

+import { EditorCore } from "@/core";

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

+

+export class UpdateElementCommand extends Command {

+	private savedState: TimelineTrack[] | null = null;

+	private readonly trackId: string;

+	private readonly elementId: string;

+	private readonly updates: Partial<TimelineElement>;

+

+	constructor({

+		trackId,

+		elementId,

+		updates,

+	}: {

+		trackId: string;

+		elementId: string;

+		updates: Partial<TimelineElement>;

+	}) {

+		super();

+		this.trackId = trackId;

+		this.elementId = elementId;

+		this.updates = updates;

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		this.savedState = editor.timeline.getTracks();

+

+		const updatedTracks = updateElementInTracks({

+			tracks: this.savedState,

+			trackId: this.trackId,

+			elementId: this.elementId,

+			update: (element) => ({ ...element, ...this.updates }) as TimelineElement,

+		});

+

+		editor.timeline.updateTracks(updatedTracks);

+	}

+

+	undo(): void {

+		if (this.savedState) {

+			const editor = EditorCore.getInstance();

+			editor.timeline.updateTracks(this.savedState);

+		}

+	}

+}

diff --git a/apps/web/src/lib/commands/timeline/index.ts b/apps/web/src/lib/commands/timeline/index.ts
index cb285d94..d0bfd5e9 100644
--- a/apps/web/src/lib/commands/timeline/index.ts
+++ b/apps/web/src/lib/commands/timeline/index.ts
@@ -1,5 +1,5 @@
-export * from "./track";
-export * from "./element";
-export * from "./clipboard";
-
-export { TracksSnapshotCommand } from "./tracks-snapshot";
+export * from "./track";

+export * from "./element";

+export * from "./clipboard";

+

+export { TracksSnapshotCommand } from "./tracks-snapshot";

diff --git a/apps/web/src/lib/commands/timeline/track/add-track.ts b/apps/web/src/lib/commands/timeline/track/add-track.ts
index dd4ceb64..b1f0daa0 100644
--- a/apps/web/src/lib/commands/timeline/track/add-track.ts
+++ b/apps/web/src/lib/commands/timeline/track/add-track.ts
@@ -1,53 +1,53 @@
-import { Command } from "@/lib/commands/base-command";
-import type { TrackType, TimelineTrack } from "@/lib/timeline";
-import { generateUUID } from "@/utils/id";
-import { EditorCore } from "@/core";
-import {
-	buildEmptyTrack,
-	getDefaultInsertIndexForTrack,
-} from "@/lib/timeline/track-utils";
-
-export class AddTrackCommand extends Command {
-	private trackId: string;
-	private savedState: TimelineTrack[] | null = null;
-
-	constructor(
-		private type: TrackType,
-		private index?: number,
-	) {
-		super();
-		this.trackId = generateUUID();
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.timeline.getTracks();
-
-		const newTrack: TimelineTrack = buildEmptyTrack({
-			id: this.trackId,
-			type: this.type,
-		});
-
-		const updatedTracks = [...(this.savedState || [])];
-		const insertIndex =
-			this.index ??
-			getDefaultInsertIndexForTrack({
-				tracks: updatedTracks,
-				trackType: this.type,
-			});
-		updatedTracks.splice(insertIndex, 0, newTrack);
-
-		editor.timeline.updateTracks(updatedTracks);
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-
-	getTrackId(): string {
-		return this.trackId;
-	}
-}
+import { Command } from "@/lib/commands/base-command";

+import type { TrackType, TimelineTrack } from "@/lib/timeline";

+import { generateUUID } from "@/utils/id";

+import { EditorCore } from "@/core";

+import {

+	buildEmptyTrack,

+	getDefaultInsertIndexForTrack,

+} from "@/lib/timeline/track-utils";

+

+export class AddTrackCommand extends Command {

+	private trackId: string;

+	private savedState: TimelineTrack[] | null = null;

+

+	constructor(

+		private type: TrackType,

+		private index?: number,

+	) {

+		super();

+		this.trackId = generateUUID();

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		this.savedState = editor.timeline.getTracks();

+

+		const newTrack: TimelineTrack = buildEmptyTrack({

+			id: this.trackId,

+			type: this.type,

+		});

+

+		const updatedTracks = [...(this.savedState || [])];

+		const insertIndex =

+			this.index ??

+			getDefaultInsertIndexForTrack({

+				tracks: updatedTracks,

+				trackType: this.type,

+			});

+		updatedTracks.splice(insertIndex, 0, newTrack);

+

+		editor.timeline.updateTracks(updatedTracks);

+	}

+

+	undo(): void {

+		if (this.savedState) {

+			const editor = EditorCore.getInstance();

+			editor.timeline.updateTracks(this.savedState);

+		}

+	}

+

+	getTrackId(): string {

+		return this.trackId;

+	}

+}

diff --git a/apps/web/src/lib/commands/timeline/track/remove-track.ts b/apps/web/src/lib/commands/timeline/track/remove-track.ts
index 35f29b1c..a9859a1a 100644
--- a/apps/web/src/lib/commands/timeline/track/remove-track.ts
+++ b/apps/web/src/lib/commands/timeline/track/remove-track.ts
@@ -1,35 +1,35 @@
-import { Command } from "@/lib/commands/base-command";
-import { EditorCore } from "@/core";
-import type { TimelineTrack } from "@/lib/timeline";
-import { getMainTrack } from "@/lib/timeline";
-
-export class RemoveTrackCommand extends Command {
-	private savedState: TimelineTrack[] | null = null;
-
-	constructor(private trackId: string) {
-		super();
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.timeline.getTracks();
-		const targetTrack = this.savedState.find(
-			(track) => track.id === this.trackId,
-		);
-		const mainTrack = getMainTrack({ tracks: this.savedState });
-		if (mainTrack?.id === targetTrack?.id) {
-			return;
-		}
-		const updatedTracks = this.savedState.filter(
-			(track) => track.id !== this.trackId,
-		);
-		editor.timeline.updateTracks(updatedTracks);
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-}
+import { Command } from "@/lib/commands/base-command";

+import { EditorCore } from "@/core";

+import type { TimelineTrack } from "@/lib/timeline";

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

+

+export class RemoveTrackCommand extends Command {

+	private savedState: TimelineTrack[] | null = null;

+

+	constructor(private trackId: string) {

+		super();

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		this.savedState = editor.timeline.getTracks();

+		const targetTrack = this.savedState.find(

+			(track) => track.id === this.trackId,

+		);

+		const mainTrack = getMainTrack({ tracks: this.savedState });

+		if (mainTrack?.id === targetTrack?.id) {

+			return;

+		}

+		const updatedTracks = this.savedState.filter(

+			(track) => track.id !== this.trackId,

+		);

+		editor.timeline.updateTracks(updatedTracks);

+	}

+

+	undo(): void {

+		if (this.savedState) {

+			const editor = EditorCore.getInstance();

+			editor.timeline.updateTracks(this.savedState);

+		}

+	}

+}

diff --git a/apps/web/src/lib/commands/timeline/track/toggle-track-mute.ts b/apps/web/src/lib/commands/timeline/track/toggle-track-mute.ts
index 9acf732a..120220fe 100644
--- a/apps/web/src/lib/commands/timeline/track/toggle-track-mute.ts
+++ b/apps/web/src/lib/commands/timeline/track/toggle-track-mute.ts
@@ -1,39 +1,39 @@
-import { Command } from "@/lib/commands/base-command";
-import type { TimelineTrack } from "@/lib/timeline";
-import { EditorCore } from "@/core";
-import { canTracktHaveAudio } from "@/lib/timeline";
-
-export class ToggleTrackMuteCommand extends Command {
-	private savedState: TimelineTrack[] | null = null;
-
-	constructor(private trackId: string) {
-		super();
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.timeline.getTracks();
-
-		const targetTrack = this.savedState.find(
-			(track) => track.id === this.trackId,
-		);
-		if (!targetTrack) {
-			return;
-		}
-
-		const updatedTracks = this.savedState.map((track) =>
-			track.id === this.trackId && canTracktHaveAudio(track)
-				? { ...track, muted: !track.muted }
-				: track,
-		);
-
-		editor.timeline.updateTracks(updatedTracks);
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-}
+import { Command } from "@/lib/commands/base-command";

+import type { TimelineTrack } from "@/lib/timeline";

+import { EditorCore } from "@/core";

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

+

+export class ToggleTrackMuteCommand extends Command {

+	private savedState: TimelineTrack[] | null = null;

+

+	constructor(private trackId: string) {

+		super();

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		this.savedState = editor.timeline.getTracks();

+

+		const targetTrack = this.savedState.find(

+			(track) => track.id === this.trackId,

+		);

+		if (!targetTrack) {

+			return;

+		}

+

+		const updatedTracks = this.savedState.map((track) =>

+			track.id === this.trackId && canTracktHaveAudio(track)

+				? { ...track, muted: !track.muted }

+				: track,

+		);

+

+		editor.timeline.updateTracks(updatedTracks);

+	}

+

+	undo(): void {

+		if (this.savedState) {

+			const editor = EditorCore.getInstance();

+			editor.timeline.updateTracks(this.savedState);

+		}

+	}

+}

diff --git a/apps/web/src/lib/commands/timeline/track/toggle-track-visibility.ts b/apps/web/src/lib/commands/timeline/track/toggle-track-visibility.ts
index 4bfd53c0..6d74e238 100644
--- a/apps/web/src/lib/commands/timeline/track/toggle-track-visibility.ts
+++ b/apps/web/src/lib/commands/timeline/track/toggle-track-visibility.ts
@@ -1,40 +1,40 @@
-import { Command } from "@/lib/commands/base-command";
-import type { TimelineTrack } from "@/lib/timeline";
-import { EditorCore } from "@/core";
-import { canTrackBeHidden } from "@/lib/timeline";
-
-export class ToggleTrackVisibilityCommand extends Command {
-	private savedState: TimelineTrack[] | null = null;
-
-	constructor(private trackId: string) {
-		super();
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.timeline.getTracks();
-
-		const targetTrack = this.savedState.find(
-			(track) => track.id === this.trackId,
-		);
-		if (!targetTrack) {
-			return;
-		}
-
-		const updatedTracks = this.savedState.map((track) => {
-			if (track.id === this.trackId && canTrackBeHidden(track)) {
-				return { ...track, hidden: !track.hidden };
-			}
-			return track;
-		});
-
-		editor.timeline.updateTracks(updatedTracks);
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-}
+import { Command } from "@/lib/commands/base-command";

+import type { TimelineTrack } from "@/lib/timeline";

+import { EditorCore } from "@/core";

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

+

+export class ToggleTrackVisibilityCommand extends Command {

+	private savedState: TimelineTrack[] | null = null;

+

+	constructor(private trackId: string) {

+		super();

+	}

+

+	execute(): void {

+		const editor = EditorCore.getInstance();

+		this.savedState = editor.timeline.getTracks();

+

+		const targetTrack = this.savedState.find(

+			(track) => track.id === this.trackId,

+		);

+		if (!targetTrack) {

+			return;

+		}

+

+		const updatedTracks = this.savedState.map((track) => {

+			if (track.id === this.trackId && canTrackBeHidden(track)) {

+				return { ...track, hidden: !track.hidden };

+			}

+			return track;

+		});

+

+		editor.timeline.updateTracks(updatedTracks);

+	}

+

+	undo(): void {

+		if (this.savedState) {

+			const editor = EditorCore.getInstance();

+			editor.timeline.updateTracks(this.savedState);

+		}

+	}

+}

diff --git a/apps/web/src/lib/commands/timeline/tracks-snapshot.ts b/apps/web/src/lib/commands/timeline/tracks-snapshot.ts
index a4370cab..d397431c 100644
--- a/apps/web/src/lib/commands/timeline/tracks-snapshot.ts
+++ b/apps/web/src/lib/commands/timeline/tracks-snapshot.ts
@@ -1,20 +1,20 @@
-import { Command } from "@/lib/commands/base-command";
-import type { TimelineTrack } from "@/lib/timeline";
-import { EditorCore } from "@/core";
-
-export class TracksSnapshotCommand extends Command {
-	constructor(
-		private before: TimelineTrack[],
-		private after: TimelineTrack[],
-	) {
-		super();
-	}
-
-	execute(): void {
-		EditorCore.getInstance().timeline.updateTracks(this.after);
-	}
-
-	undo(): void {
-		EditorCore.getInstance().timeline.updateTracks(this.before);
-	}
-}
+import { Command } from "@/lib/commands/base-command";

+import type { TimelineTrack } from "@/lib/timeline";

+import { EditorCore } from "@/core";

+

+export class TracksSnapshotCommand extends Command {

+	constructor(

+		private before: TimelineTrack[],

+		private after: TimelineTrack[],

+	) {

+		super();

+	}

+

+	execute(): void {

+		EditorCore.getInstance().timeline.updateTracks(this.after);

+	}

+

+	undo(): void {

+		EditorCore.getInstance().timeline.updateTracks(this.before);

+	}

+}